/* =====================================================================
   styles.css — Remorques Houlmann.
   Une seule feuille pour les deux langues : la page française et la
   page allemande partagent exactement la même mise en forme.

   Palette tirée du logotype : jaune F2C200 et noir 111111. Le bleu
   n'apparaît que là où il est question de froid — bandeau de
   température, verdicts, chiffres. Rien de décoratif.
   ===================================================================== */

:root{
  --jaune:#F2C200;
  --jaune-fonce:#C79F00;
  --noir:#111111;
  --nuit:#17181A;
  --nuit-clair:#232529;
  --creme:#F7F7F3;
  --blanc:#FFFFFF;
  --papier:#EFEFE9;
  --gris:#56595E;
  --gris-clair:#8B8F95;
  --glace:#EAF1F6;
  --bleu:#1B6E9C;
  --bleu-nuit:#0E3B57;
  --vert:#2E7D4F;
  --rouge:#B23B2E;
  --ambre:#B8791B;
  --trait:rgba(17,17,17,.14);
  --trait-clair:rgba(247,247,243,.18);
  --ombre:0 1px 2px rgba(17,17,17,.05), 0 10px 28px rgba(17,17,17,.08);
  --rayon:4px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--creme);color:var(--noir);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Montserrat,Inter,system-ui,sans-serif;font-weight:700;line-height:1.13;letter-spacing:-.018em;margin:0}
h1{font-size:clamp(1.95rem,4.6vw,3.15rem)}
h2{font-size:clamp(1.65rem,3.5vw,2.5rem)}
h3{font-size:clamp(1.06rem,1.8vw,1.25rem);line-height:1.3}
h4{font-size:.98rem;line-height:1.3}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.04rem,1.5vw,1.18rem);line-height:1.56;max-width:38em;color:var(--gris)}
.wrap{width:min(1160px,92vw);margin-inline:auto}
section{padding:clamp(3.2rem,6.4vw,5.4rem) 0}
.surtitre{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bleu);margin:0 0 .55rem}
.saut{position:absolute;left:-9999px}
.saut:focus{position:static;display:inline-block;margin:.5rem;padding:.5rem .9rem;background:var(--noir);color:var(--creme)}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- bandeau de maquette ---- */
.banniere{background:var(--noir);color:var(--creme);font-size:.79rem;padding:.5rem 1rem;text-align:center}
.banniere:empty{display:none}

/* ---- navigation ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,247,243,.97);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.nav-in{display:flex;align-items:center;gap:.9rem;padding:.5rem 0}
.marque{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex:0 0 auto}
.marque img{width:clamp(148px,20vw,224px);height:auto}
.nav-liens{display:none;gap:1.05rem;font-size:.87rem;font-weight:500}
.nav-liens a{text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-liens a:hover,.nav-liens a:focus-visible{border-color:var(--jaune)}
.nav-outils{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.langues{display:flex;gap:1px;background:var(--trait);border-radius:2px;overflow:hidden}
.langues a{display:block;padding:.34rem .55rem;background:var(--creme);text-decoration:none;
  font-size:.76rem;font-weight:700;letter-spacing:.05em}
.langues a[aria-current=true]{background:var(--noir);color:var(--creme)}
.nav-tel{font-weight:700;font-size:.85rem;text-decoration:none;background:var(--jaune);color:var(--noir);
  padding:.5rem .95rem;border-radius:2px;white-space:nowrap}
.nav-tel:hover{background:var(--jaune-fonce)}
@media(min-width:1040px){.nav-liens{display:flex}}
@media(min-width:1040px) and (max-width:1180px){.nav-liens{gap:.8rem;font-size:.83rem}}
/* Le numéro reste visible jusque sur le plus petit écran : c'est le geste
   que le visiteur vient faire. */
@media(max-width:560px){
  .nav-in{gap:.5rem}
  .nav-tel{padding:.45rem .65rem;font-size:.79rem}
  .langues a{padding:.32rem .45rem;font-size:.72rem}
}

/* ---- boutons ---- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.94rem;padding:.82rem 1.5rem;
  border:2px solid transparent;border-radius:2px;cursor:pointer;font-family:inherit;
  transition:background .18s,color .18s,border-color .18s}
.btn-jaune{background:var(--jaune);color:var(--noir)}
.btn-jaune:hover{background:var(--jaune-fonce)}
.btn-noir{background:var(--noir);color:var(--creme)}
.btn-noir:hover{background:#000}
.btn-vide{border-color:currentColor;background:none}
.btn-vide:hover{background:rgba(255,255,255,.14)}

/* ---- accueil ---- */
.hero{position:relative;color:var(--creme);isolation:isolate;overflow:hidden;background:var(--nuit)}
.hero .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(10,11,12,.93) 0%,rgba(10,11,12,.78) 40%,rgba(10,11,12,.30) 78%,rgba(10,11,12,.14) 100%)}
.hero-in{position:relative;z-index:0;padding:clamp(3rem,7vw,5rem) 0 clamp(3rem,6.5vw,4.8rem);max-width:41rem}
/* Voile local sous le seul bloc de texte. La remorque porte elle-même de
   grandes inscriptions — « A LOUER », « +2° », « −22° » — qui viennent
   sinon se mêler au titre selon le recadrage de la photo. */
.hero-in::before{content:"";position:absolute;z-index:-1;inset:-8% -26% -8% -50%;
  background:radial-gradient(105% 100% at 30% 50%,
    rgba(8,9,10,.74) 0%, rgba(8,9,10,.58) 48%, rgba(8,9,10,0) 76%)}
.hero .surtitre{color:var(--jaune)}
.hero .lede{color:rgba(247,247,243,.9);margin-top:1.05rem}
.hero h1{margin-top:.1rem}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.9rem}
.hero-tels{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.7rem;align-items:center}
.hero-tels-t{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,247,243,.6);width:100%;margin:0 0 .1rem}
.tel-puce{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;
  font-size:1.02rem;letter-spacing:.01em;padding:.6rem 1rem;border-radius:2px;
  background:rgba(247,247,243,.1);border:1px solid var(--trait-clair);color:var(--creme)}
.tel-puce:hover{background:rgba(242,194,0,.2);border-color:var(--jaune)}
.tel-puce svg{flex:0 0 16px;fill:var(--jaune)}

/* ---- bande de repères ---- */
.reperes{background:var(--noir);color:var(--creme)}
.reperes .wrap{display:grid;gap:1.5rem;padding:2.1rem 0}
@media(min-width:780px){.reperes .wrap{grid-template-columns:repeat(3,1fr);gap:2.2rem}}
.repere b{display:block;font-family:Montserrat,sans-serif;font-size:1.5rem;font-weight:800;
  color:var(--jaune);margin-bottom:.2rem;letter-spacing:-.02em}
.repere span{font-size:.92rem;color:rgba(247,247,243,.78);line-height:1.5}

/* ---- températures ---- */
.temp-sec{background:var(--glace)}
.temp-haut{display:grid;gap:2.2rem;align-items:start}
@media(min-width:940px){.temp-haut{grid-template-columns:1.02fr .98fr;gap:3.2rem}}

/* le bandeau : un dégradé continu du plus chaud au plus froid */
.bandeau{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:1.4rem 1.5rem;box-shadow:var(--ombre)}
.bandeau h3{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-bottom:1.1rem}
.echelle{display:flex;align-items:stretch;gap:1rem}
.echelle-barre{flex:0 0 26px;border-radius:13px;min-height:240px;
  background:linear-gradient(180deg,#9CC9E3 0%,#4A93C0 26%,#1B6E9C 52%,#134F73 76%,#0B2F47 100%);
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.1)}
/* Chaque repère est posé à sa hauteur réelle sur la plage, pas réparti
   à intervalles réguliers : l'échelle doit dire la vérité. */
.echelle-graduations{flex:1;position:relative;min-height:240px}
.grad{position:absolute;left:0;right:0;transform:translateY(-50%);
  display:flex;align-items:baseline;gap:.7rem}
.grad b{font-family:Montserrat,sans-serif;font-size:1.32rem;font-weight:800;color:var(--bleu-nuit);
  min-width:3.4em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.grad span{font-size:.82rem;color:var(--gris);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.grad.bord b{font-size:1.62rem}

/* les paliers d'usage */
.paliers{display:grid;gap:.9rem;margin-top:1.4rem}
@media(min-width:620px){.paliers{grid-template-columns:repeat(3,1fr)}}
@media(min-width:940px){.paliers{grid-template-columns:1fr;gap:.8rem}}
@media(min-width:1180px){.paliers{grid-template-columns:repeat(3,1fr)}}
.palier{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);
  border-top:4px solid var(--bleu);padding:1.1rem 1.2rem}
.palier:nth-child(1){border-top-color:#7FB8DA}
.palier:nth-child(2){border-top-color:#2A80AF}
.palier:nth-child(3){border-top-color:#0E3B57}
.palier b{display:block;font-family:Montserrat,sans-serif;font-size:1.55rem;font-weight:800;
  letter-spacing:-.02em;color:var(--bleu-nuit);line-height:1}
.palier h4{margin:.4rem 0 .3rem}
.palier p{margin:0;font-size:.9rem;color:var(--gris);line-height:1.5}

.avertissement{margin-top:2rem;background:var(--blanc);border:1px solid var(--trait);
  border-left:4px solid var(--jaune);border-radius:0 var(--rayon) var(--rayon) 0;padding:1.2rem 1.4rem}
.avertissement h3{font-size:.98rem;margin-bottom:.5rem}
.avertissement p{margin:0;font-size:.93rem;color:var(--gris)}

/* ---- les remorques ---- */
.remorques{display:grid;gap:1.4rem;margin-top:2.4rem}
@media(min-width:860px){.remorques{grid-template-columns:repeat(2,1fr)}}
.remorque{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);
  overflow:hidden;box-shadow:var(--ombre);display:flex;flex-direction:column}
.remorque>img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 62%;background:var(--papier)}
/* Une seule fiche : elle se déplie en largeur au lieu de laisser un vide. */
@media(min-width:860px){
  .remorques.seule{grid-template-columns:1fr}
  .remorques.seule .remorque{flex-direction:row}
  .remorques.seule .remorque>img{flex:0 0 46%;width:46%;aspect-ratio:auto;
    align-self:stretch;min-height:300px;object-position:50% 72%}
  .remorques.seule .remorque-corps{flex:1}
}
.remorque-corps{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.remorque-tete{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}
.numero{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;
  padding:0 .5rem;background:var(--jaune);color:var(--noir);border-radius:2px;
  font-family:Montserrat,sans-serif;font-weight:800;font-size:1.05rem}
.remorque-tete h3{margin-right:auto}
.puce-froid{font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:.24rem .55rem;border-radius:2px;
  background:var(--glace);color:var(--bleu-nuit);white-space:nowrap}
.remorque p{font-size:.94rem;color:var(--gris)}
.fiche{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:0;font-size:.92rem}
.fiche li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;
  border-bottom:1px dotted var(--trait)}
.fiche li:last-child{border-bottom:0}
.fiche dt,.fiche b{font-weight:600;color:var(--noir)}
.fiche span{color:var(--gris);text-align:right;font-variant-numeric:tabular-nums}
.a-completer{color:var(--gris-clair);font-style:italic}
.note-section{margin-top:1.6rem;font-size:.9rem;color:var(--gris)}
.rien{margin-top:2rem;padding:2.4rem 1.4rem;text-align:center;border:1px dashed var(--trait);
  border-radius:var(--rayon);color:var(--gris-clair);font-size:.95rem}

/* ---- calculateur d'attelage ---- */
.attelage-sec{background:var(--nuit);color:var(--creme)}
.attelage-sec h2,.attelage-sec h3{color:var(--creme)}
.attelage-sec .lede{color:rgba(247,247,243,.78)}
.attelage-sec .surtitre{color:var(--jaune)}
.attelage-sec p{color:rgba(247,247,243,.8)}
.attelage-grille{display:grid;gap:1.6rem;margin-top:2.4rem}
@media(min-width:960px){.attelage-grille{grid-template-columns:1fr 1fr;gap:2rem;align-items:start}}
.calc{background:var(--nuit-clair);border:1px solid var(--trait-clair);border-radius:var(--rayon);padding:1.5rem}
.calc h3{font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--jaune);margin-bottom:1.1rem}
.calc-champs{display:grid;gap:1rem}
@media(min-width:560px){.calc-champs{grid-template-columns:repeat(3,1fr)}}
.calc-champ label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.calc-champ .aide{display:block;font-size:.74rem;color:var(--gris-clair);margin-top:.3rem}
.calc-unite{position:relative;display:block}
.calc-unite input{width:100%;font:inherit;font-size:1.02rem;font-weight:600;padding:.6rem 2.4rem .6rem .7rem;
  border:1px solid var(--trait-clair);border-radius:2px;background:rgba(0,0,0,.28);color:var(--creme);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.calc-unite input::-webkit-outer-spin-button,
.calc-unite input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-unite em{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:.82rem;color:var(--gris-clair);pointer-events:none}
.calc-bas{display:grid;gap:1rem;margin-top:1.2rem}
@media(min-width:560px){.calc-bas{grid-template-columns:1fr 1fr}}
.calc-bas label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.calc-bas select{width:100%;font:inherit;font-size:.95rem;padding:.6rem .7rem;border-radius:2px;
  border:1px solid var(--trait-clair);background:rgba(0,0,0,.28);color:var(--creme)}
.permis{display:flex;gap:.5rem}
.permis label{flex:1;margin:0;display:block;cursor:pointer}
.permis input{position:absolute;opacity:0;width:0;height:0}
.permis span{display:block;text-align:center;padding:.6rem .5rem;border-radius:2px;font-weight:700;
  font-size:.95rem;border:1px solid var(--trait-clair);background:rgba(0,0,0,.28)}
.permis input:checked+span{background:var(--jaune);color:var(--noir);border-color:var(--jaune)}
.permis input:focus-visible+span{outline:3px solid var(--jaune);outline-offset:2px}

.verdict{border-radius:var(--rayon);padding:1.4rem 1.5rem;background:var(--nuit-clair);
  border:1px solid var(--trait-clair);border-left:5px solid var(--gris)}
.verdict.attente{border-left-color:var(--gris-clair)}
.verdict.oui{border-left-color:var(--vert);background:rgba(46,125,79,.16)}
.verdict.be{border-left-color:var(--jaune);background:rgba(242,194,0,.13)}
.verdict.non{border-left-color:var(--rouge);background:rgba(178,59,46,.16)}
.verdict-tete{display:flex;gap:.7rem;align-items:flex-start}
.verdict-signe{font-size:1.5rem;line-height:1.1;flex:0 0 auto}
.verdict-tete strong{font-family:Montserrat,sans-serif;font-size:clamp(1.12rem,2vw,1.35rem);
  font-weight:800;letter-spacing:-.01em;line-height:1.2}
.verdict p{margin:.6rem 0 0;font-size:.94rem;color:rgba(247,247,243,.86)}
.verdict h3{margin-top:1.3rem;font-size:.78rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(247,247,243,.62)}
.detail{list-style:none;padding:0;margin:1.2rem 0 0;font-size:.9rem;display:grid;gap:0}
.detail li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.45rem 0;border-bottom:1px solid var(--trait-clair)}
.detail li:last-child{border-bottom:0}
.detail b{font-weight:500;color:rgba(247,247,243,.76)}
.detail span{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.detail .ok{color:#8FD1A6}
.detail .ko{color:#F0A79B}

.regle{margin-top:1.6rem;background:rgba(0,0,0,.25);border:1px solid var(--trait-clair);
  border-radius:var(--rayon);padding:1.3rem 1.4rem}
.regle h3{font-size:1rem;margin-bottom:.7rem}
.regle ol{margin:0;padding-left:1.2rem;display:grid;gap:.55rem;font-size:.92rem;color:rgba(247,247,243,.82)}
.mention{margin-top:1.2rem;font-size:.87rem;color:rgba(247,247,243,.66);
  border-top:1px solid var(--trait-clair);padding-top:1.1rem}
.mention strong{display:block;color:var(--jaune);font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:.4rem}
.mention a{color:var(--jaune);text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- sur place ---- */
.blocs{display:grid;gap:1.1rem;margin-top:2.4rem}
@media(min-width:700px){.blocs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.blocs{grid-template-columns:repeat(4,1fr)}}
.bloc{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.3rem 1.35rem}
.bloc-num{display:inline-block;font-family:Montserrat,sans-serif;font-weight:800;font-size:.82rem;
  color:var(--noir);background:var(--jaune);border-radius:2px;padding:.1rem .45rem;margin-bottom:.7rem}
.bloc h3{margin-bottom:.4rem}
.bloc p{margin:0;font-size:.92rem;color:var(--gris)}
.valeurs{margin-top:1.6rem;background:var(--papier);border-radius:var(--rayon);padding:1.2rem 1.4rem}
.valeurs h3{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-bottom:.8rem}
.valeurs ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.valeurs li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.5rem 0;border-bottom:1px dotted var(--trait);font-size:.93rem}
.valeurs li:last-child{border-bottom:0}
.valeurs b{font-weight:600}

/* ---- pour qui ---- */
.pourqui-sec{background:var(--papier)}
/* Le filet vient d'un liseré porté par chaque case, jamais du fond de la
   grille : avec sept usages sur trois colonnes, les cases vides de la
   dernière rangée ne se dessinent pas. */
.usages{display:grid;gap:1px;margin-top:2.4rem}
@media(min-width:640px){.usages{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.usages{grid-template-columns:repeat(3,1fr)}}
.usage{background:var(--papier);padding:1.25rem 1.35rem;box-shadow:0 0 0 1px var(--trait)}
.usage h3{margin-bottom:.3rem}
.usage p{margin:0;font-size:.92rem;color:var(--gris)}

/* ---- ce qu'il faut apporter ---- */
.apporter{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1px}
@media(min-width:760px){.apporter{grid-template-columns:repeat(2,1fr)}}
.apporter li{background:var(--creme);padding:1.25rem 1.4rem;display:flex;gap:1rem;
  align-items:flex-start;box-shadow:0 0 0 1px var(--trait)}
.coche{flex:0 0 1.6rem;height:1.6rem;border-radius:50%;background:var(--jaune);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;margin-top:.1rem}
.apporter h3{margin-bottom:.25rem}
.apporter p{margin:0;font-size:.92rem;color:var(--gris)}
.caution{margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:baseline;
  border:1px dashed var(--trait);border-radius:var(--rayon);padding:.9rem 1.2rem;font-size:.94rem}
.caution b{font-weight:600}

/* ---- accès ---- */
.acces-sec{background:var(--papier)}
.acces-grille{display:grid;gap:1.2rem;margin-top:2.4rem}
@media(min-width:860px){.acces-grille{grid-template-columns:repeat(3,1fr)}}
.acces-bloc{background:var(--creme);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.3rem 1.4rem}
.acces-bloc h3{margin-bottom:.6rem}
.acces-bloc p{margin:0;font-size:.94rem;color:var(--gris)}
.acces-bloc address{font-style:normal;font-size:.98rem;line-height:1.8}
.acces-bloc a{color:var(--bleu);text-underline-offset:3px}
.carte{margin-top:1.4rem;border:1px solid var(--trait);border-radius:var(--rayon);
  overflow:hidden;background:var(--creme)}
.carte iframe{width:100%;height:min(58vw,420px);border:0;display:block}
.carte-legende{font-size:.82rem;padding:.6rem .9rem;color:var(--gris);display:flex;gap:.6rem;flex-wrap:wrap}
.carte-legende a{color:var(--bleu)}

/* ---- actualités ---- */
.cartes{display:grid;gap:1.2rem;margin-top:2.4rem}
@media(min-width:760px){.cartes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.cartes{grid-template-columns:repeat(3,1fr)}}
.carte-actu{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);
  overflow:hidden;display:flex;flex-direction:column}
.carte-actu img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--papier)}
.carte-actu-corps{padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.carte-actu time{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--bleu);font-weight:700}
.carte-actu p{margin:0;font-size:.93rem;color:var(--gris)}

/* ---- demande ---- */
.demande-sec{background:var(--nuit);color:var(--creme)}
.demande-sec h2,.demande-sec h3{color:var(--creme)}
.demande-sec .lede{color:rgba(247,247,243,.78)}
.demande-sec .surtitre{color:var(--jaune)}
.demande-grille{display:grid;gap:2.4rem;margin-top:2.2rem}
@media(min-width:940px){.demande-grille{grid-template-columns:.85fr 1.15fr;gap:3rem}}
.champs{display:grid;gap:.85rem}
@media(min-width:600px){.champs.deux{grid-template-columns:1fr 1fr}}
.champs label{display:block;font-size:.83rem;font-weight:600;margin-bottom:.3rem}
.champs input,.champs textarea,.champs select{width:100%;font:inherit;font-size:.95rem;padding:.6rem .75rem;
  border:1px solid var(--trait-clair);border-radius:2px;background:rgba(0,0,0,.28);color:var(--creme)}
.champs textarea{min-height:96px;resize:vertical}
.champs input::placeholder,.champs textarea::placeholder{color:rgba(247,247,243,.4)}
.retour{margin-top:1rem;font-size:.93rem;font-weight:600;min-height:1.3em}
.retour.ok{color:#8FD1A6}
.retour.ko{color:#F0A79B}
.rappels{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.5rem}
.rappels li{position:relative;padding-left:1.5rem;font-size:.93rem;color:rgba(247,247,243,.8)}
.rappels li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;
  border-left:2px solid var(--jaune);border-bottom:2px solid var(--jaune);transform:rotate(-45deg)}
.demande-tels{display:grid;gap:.6rem;margin-top:1.2rem}
.demande-tels .tel-puce{justify-content:flex-start}

/* ---- pied de page ---- */
footer{background:var(--noir);color:rgba(247,247,243,.76);padding:3.2rem 0 1.6rem;font-size:.93rem}
.foot{display:grid;gap:2rem}
@media(min-width:820px){.foot{grid-template-columns:1.7fr 1fr 1fr}}
.foot-logo{width:200px;height:auto;margin-bottom:1rem}
.foot strong{color:var(--creme);display:block;margin-bottom:.6rem;font-weight:700}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.foot a{color:rgba(247,247,243,.76);text-underline-offset:3px}
.foot a:hover{color:var(--jaune)}
.legal{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid rgba(247,247,243,.14);
  display:flex;gap:1rem;flex-wrap:wrap;font-size:.79rem;color:rgba(247,247,243,.55)}
.legal a{margin-left:auto}

/* ---- repli sans JavaScript ---- */
.sans-js{background:var(--jaune);color:var(--noir);padding:1.4rem 0}
.sans-js .wrap{display:grid;gap:.4rem}
.sans-js h2{font-size:1.2rem}
.sans-js a{font-weight:700}