body{background:var(--beton);color:var(--encre);--focus:var(--encre)}
.quai{max-width:1240px;margin:0 auto;padding:0 28px 60px}
.q-tete{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0 18px;border-bottom:1px solid var(--beton-3)}
.q-marque{display:flex;align-items:center;gap:14px;min-width:0}
.q-nom{font-family:var(--display);font-size:30px;letter-spacing:.08em;line-height:1}
.q-sous{font-size:12.5px;color:var(--encre-2);margin-top:2px}
.q-qui{display:flex;align-items:center;gap:10px;font-size:13px}
.q-qui b{display:block;font-weight:600}
.q-qui .l{color:var(--muet);font-size:12px;display:block}
.pastille{width:34px;height:34px;border-radius:50%;background:var(--encre);color:var(--beton);display:grid;place-items:center;font-family:var(--display);font-size:15px;letter-spacing:.04em;padding-top:2px;flex:none}
.lien-bouton{font-size:12px;color:var(--encre-2);border-bottom:1px dashed var(--muet);margin-left:6px}
.lien-bouton:hover{color:var(--encre)}

.q-these{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:end;padding:44px 0 34px}
.q-these h1{font-family:var(--display);font-weight:400;font-size:112px;line-height:.86;letter-spacing:.01em;text-transform:uppercase}
.q-these h1 small{display:block;font-family:var(--corps);text-transform:none;font-size:24px;line-height:1.25;letter-spacing:-.005em;font-weight:500;margin-top:16px;max-width:520px;color:var(--encre)}
.etapes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:3px solid var(--encre)}
.etapes li{padding:12px 14px 0 0;position:relative}
.etapes li::before{content:"";position:absolute;top:-9px;left:0;width:15px;height:15px;border-radius:50%;background:var(--beton);border:3px solid var(--encre)}
.etapes li:last-child::before{background:var(--jaune)}
.etapes .n{font-family:var(--display);font-size:22px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:6px}
.etapes p{font-size:12.5px;color:var(--encre-2);line-height:1.4}

.q-titre{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.q-titre h2{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.q-titre span{font-size:13px;color:var(--encre-2)}
.q-titre .nb{font-family:var(--chiffre);font-size:13px;background:var(--encre);color:var(--beton);border-radius:10px;padding:1px 8px 0}

.sol{margin:8px -28px 0;padding:26px 28px 30px;background:var(--beton-2);
  background-image:radial-gradient(#0000000d 1px,transparent 1.2px),radial-gradient(#ffffff40 1px,transparent 1.2px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px;border-top:1px solid var(--beton-3);border-bottom:1px solid var(--beton-3)}
.baies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@property --l{syntax:"<length-percentage>";inherits:false;initial-value:28px}
.baie{--c:var(--jaune);--l:28px;position:relative;min-height:168px;display:flex;flex-direction:column;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) top left/5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) top right/5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/5px var(--l) no-repeat;
  transition:--l .4s, box-shadow .3s}
.baie:hover{--l:46px}
.baie:focus-within{outline:2px solid var(--encre);outline-offset:3px}
.baie.survol{--l:100%;box-shadow:inset 0 0 0 999px #f2c2302e}
.baie.envoi{--l:100%}
.baie.recu{--c:var(--vert);--l:100%;box-shadow:inset 0 0 0 999px #ffffff66}
.baie-zone{flex:1;display:flex;flex-direction:column;padding:20px 20px 16px;cursor:pointer;position:relative}
.baie .fichier{position:absolute;width:1px;height:1px;opacity:0;left:20px;top:20px}
.baie .pochoir{position:absolute;right:14px;bottom:2px;font-family:var(--display);font-size:78px;line-height:1;color:#16161412;pointer-events:none;letter-spacing:.02em}
.baie-titre{display:block;font-size:16.5px;font-weight:600;line-height:1.25;max-width:85%}
.baie-detail{display:block;font-size:13px;color:var(--encre-2);margin-top:5px;max-width:88%}
.baie .quand{align-self:flex-start;margin-top:10px;font-family:var(--chiffre);font-size:12.5px;background:var(--encre);color:var(--jaune);padding:3px 8px 2px;border-radius:2px}
.baie .bas{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muet)}
.baie .act{color:var(--encre);font-weight:600}
.baie .act::before{content:"↓ ";font-weight:400}
.baie .ok{display:block;font-size:13px;color:var(--vert);font-weight:600;margin-top:10px;overflow-wrap:anywhere}
.baie .envoyer{align-self:flex-start;margin:0 20px 14px}
.js .baie .envoyer{display:none}
.baie .message{font-size:13px;margin:0 20px 12px;overflow-wrap:anywhere}
.baie .message:empty{display:none}
.baie .message.erreur{color:var(--rouge);font-weight:600}
.baie .message.encours{color:var(--encre);font-family:var(--chiffre)}
.baie .message a{color:inherit}
.baie.libre{grid-column:span 3;min-height:120px;--c:var(--encre);border-top:9px solid;border-image:repeating-linear-gradient(-45deg,var(--jaune) 0 12px,var(--encre) 12px 24px) 9}
.baie.libre .baie-zone{flex-direction:row;align-items:center;gap:28px;flex-wrap:wrap}
.baie.libre .baie-titre{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:.05em;text-transform:uppercase;max-width:none}
.baie.libre .baie-detail{max-width:520px;margin:0}
.baie.libre .bas{margin:0 0 0 auto;padding:0}
.types{font-size:12px;color:var(--encre-2);margin-top:14px}

.bloc{padding-top:44px}
.bloc-serre{padding-top:26px}
.colis-liste{list-style:none;display:flex;flex-direction:column;gap:10px}
.colis{display:grid;grid-template-columns:132px minmax(0,1.2fr) 300px minmax(0,1fr);gap:22px;align-items:center;background:var(--papier);padding:14px 18px;border-radius:3px;
  box-shadow:0 1px 0 #0000000f,0 6px 14px -10px #00000040}
.ref{display:flex;flex-direction:column;gap:5px}
.ref .bar{height:22px;width:100%;background:repeating-linear-gradient(90deg,var(--encre) 0 2px,transparent 2px 4px,var(--encre) 4px 5px,transparent 5px 8px,var(--encre) 8px 11px,transparent 11px 12px,var(--encre) 12px 13px,transparent 13px 16px)}
.ref code{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.doc b{display:block;font-weight:600;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.doc span{font-size:12px;color:var(--muet)}
.piste{display:grid;grid-template-columns:repeat(4,1fr);position:relative;padding-top:2px}
.piste::before{content:"";position:absolute;top:8px;left:7px;right:calc(25% - 7px);height:2px;background:var(--beton-3)}
.piste::after{content:"";position:absolute;top:8px;left:7px;height:2px;background:var(--encre);width:0}
.piste.av-2::after{width:25%} .piste.av-3::after{width:50%} .piste.av-4::after{width:75%}
.piste i{position:relative;z-index:1;font-style:normal;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muet);padding-top:22px}
.piste i::before{content:"";position:absolute;top:2px;left:1px;width:14px;height:14px;border-radius:50%;background:var(--papier);border:2px solid var(--beton-3);box-sizing:border-box}
.piste i.fait{color:var(--encre)} .piste i.fait::before{background:var(--encre);border-color:var(--encre)}
.piste i.ici{color:var(--encre);font-weight:600} .piste i.ici::before{background:var(--jaune);border-color:var(--encre);box-shadow:0 0 0 4px #f2c23055}
.tire{font-size:13px;color:var(--encre-2);line-height:1.45}
.avant{border:2px dashed var(--beton-3);border-radius:3px;padding:22px;color:var(--encre-2);font-size:14px}

.q-deux{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:start}
.q-deux.seul{grid-template-columns:minmax(0,1fr)}
.qgroupe{margin-bottom:22px}
.qgroupe h3{font-size:13px;font-weight:600;letter-spacing:.02em;padding-bottom:6px;border-bottom:2px solid var(--encre);display:flex;justify-content:space-between}
.qst{list-style:none;padding:13px 0;border-bottom:1px solid var(--beton-3)}
.qst-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muet);margin-bottom:4px;align-items:center}
.qst-meta .age{font-family:var(--chiffre);color:var(--encre)}
.qst-meta .age.vieux{color:var(--orange)}
.qst p{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.qst summary{margin-top:8px;font-size:12.5px;font-weight:600;border-bottom:2px solid var(--jaune);padding-bottom:1px;cursor:pointer;display:inline-block;list-style:none}
.qst summary::-webkit-details-marker{display:none}
.qst form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.qst textarea{width:100%;min-height:74px;resize:vertical;border:1px solid var(--beton-3);background:var(--papier);border-radius:3px;padding:9px 11px;font-size:14px}
.qst .ligne{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;flex-wrap:wrap}
.joindre{color:var(--encre-2);display:flex;flex-direction:column;gap:3px;min-width:0}
.joindre input{font-size:12px;max-width:100%}
.bouton{background:var(--encre);color:var(--beton);border-radius:3px;padding:8px 14px;font-size:13px;font-weight:600}
.bouton.jaune{background:var(--jaune);color:var(--jaune-encre)}
.qst.repondue p{color:var(--muet)}
.qst .envoye{margin-top:8px;font-size:12.5px;color:var(--vert);font-weight:600}

.rendu{list-style:none;background:var(--papier);padding:14px 16px;border-radius:3px;margin-bottom:10px;display:flex;justify-content:space-between;gap:12px;align-items:center;border-left:5px solid var(--vert)}
.rendu b{display:block;font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.rendu span{font-size:12px;color:var(--muet)}
.rendu a{flex:none;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre);text-decoration:none;border:1.5px solid var(--encre);border-radius:2px;padding:3px 7px 1px}
.rendu a:hover{background:var(--encre);color:var(--beton)}
.liste-rendus{list-style:none}
.echeances{list-style:none;border-left:3px solid var(--encre);margin-left:6px}
.echeances li{position:relative;padding:0 0 18px 20px}
.echeances li::before{content:"";position:absolute;left:-9px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--beton);border:3px solid var(--encre)}
.echeances li.proche::before{background:var(--jaune)}
.echeances .d{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:.03em}
.echeances .d small{font-family:var(--chiffre);font-size:12px;color:var(--muet);letter-spacing:0;margin-left:8px}
.echeances .t{font-size:14px;font-weight:600;margin-top:3px}
.echeances .w{font-size:12px;color:var(--muet)}

.grandit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;background:var(--encre);color:var(--beton);margin:44px -28px 0;padding:34px 28px 36px;--focus:var(--jaune)}
.grandit .q-titre h2{color:var(--jaune)} .grandit .q-titre span{color:#b9bbb4}
.versions{list-style:none}
.versions li{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:11px 0;border-top:1px solid #34362f}
.versions .v{font-family:var(--display);font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--jaune)}
.versions .v.futur{color:#8d9087}
.versions b{display:block;font-weight:600;font-size:14px}
.versions p{font-size:13px;color:#b9bbb4}
.idee textarea{width:100%;min-height:96px;background:#22231f;border:1px solid #3a3c35;color:var(--beton);border-radius:3px;padding:11px 12px;font-size:14px;resize:vertical}
.idee textarea::placeholder{color:#8d9087}
.idee .ligne{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:#a4a79d;gap:12px}
.idees-faites{list-style:none;margin-top:14px}
.idees-faites li{font-size:13px;padding:8px 0;border-top:1px solid #34362f;color:#d5d7cf;overflow-wrap:anywhere}
.idees-faites .rep{display:block;color:var(--jaune);font-size:12px;margin-top:3px}
.vide-texte{font-size:14px;color:var(--encre-2)}
.grandit .vide-texte{color:#b9bbb4}
.q-pied{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muet);padding-top:22px}
.q-pied b{color:var(--encre);font-weight:600}

/* la porte d'entrée */
.porte{min-height:100vh;display:grid;place-items:center;padding:28px 16px;background-color:var(--beton-2);
  background-image:radial-gradient(#0000000d 1px,transparent 1.2px),radial-gradient(#ffffff40 1px,transparent 1.2px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
.porte-boite{width:100%;max-width:440px}
.porte h1{font-family:var(--display);font-weight:400;font-size:72px;line-height:.9;letter-spacing:.02em;text-transform:uppercase;margin-top:18px}
.porte .intro{margin:8px 0 22px;font-size:15px;color:var(--encre-2)}
.porte form{--l:44px;--c:var(--jaune);padding:24px;display:flex;flex-direction:column;gap:12px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) top left/5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) top right/5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/5px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 5px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/5px var(--l) no-repeat}
.porte label{font-size:13px;font-weight:600}
.porte input[type=email],.porte input[type=text]{width:100%;border:1px solid var(--beton-3);background:var(--papier);border-radius:3px;padding:10px 12px;font-size:16px}
.porte input.champ-code{font-family:var(--mono);font-size:24px;letter-spacing:.3em;text-align:center}
.porte .bouton{padding:11px 14px;font-size:14px}
.porte .note{font-size:12.5px;color:var(--encre-2);margin-top:14px}
.porte .note a{color:inherit}
.porte .erreur{color:var(--rouge);font-weight:600;font-size:13.5px}
.erreur-code{font-family:var(--mono);font-size:12px;color:var(--muet)}

@media (max-width:1050px){
  .q-these{grid-template-columns:1fr;gap:26px}
  .colis{grid-template-columns:110px minmax(0,1fr) 230px}
  .colis .tire{grid-column:1/-1}
}
@media (max-width:860px){
  .baies{grid-template-columns:repeat(2,minmax(0,1fr))} .baie.libre{grid-column:span 2}
  .q-deux,.grandit{grid-template-columns:1fr}
}
@media (max-width:620px){
  .quai{padding:0 16px 50px} .sol,.grandit{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .q-these h1{font-size:76px} .q-these h1 small{font-size:19px}
  .etapes{grid-template-columns:repeat(2,1fr);row-gap:22px;border-top:0} .etapes li{border-top:3px solid var(--encre)}
  .baie{min-height:124px} .baies{grid-template-columns:minmax(0,1fr)} .baie.libre{grid-column:auto} .baie.libre .baie-zone{flex-direction:column;align-items:flex-start;gap:8px} .baie.libre .bas{margin:0}
  .colis{grid-template-columns:minmax(0,1fr);gap:12px} .ref{flex-direction:row;align-items:center} .ref .bar{width:90px;flex:none}
  .q-tete{flex-direction:column;align-items:flex-start}
  .porte h1{font-size:60px}
}