/* Toiture Pro 95 — feuille unique. Voir SYSTEME.md (hors dossier déployé). */

:root{
  --fond:#232A30; --surface:#2E373E; --surface-2:#39434B;
  --texte:#D9DEE1; --texte-doux:#9BA5AC; --accent:#3E8F76; --zinc-clair:#C3CBD0;
  --t1:clamp(2.6rem,1.6rem + 4.4vw,5.4rem);
  --t2:clamp(1.9rem,1.4rem + 2.1vw,3.1rem);
  --t3:clamp(1.25rem,1.1rem + 0.7vw,1.6rem);
  --t4:clamp(1.02rem,0.98rem + 0.2vw,1.14rem);
  --t5:0.86rem;
  --e1:0.35rem; --e2:0.7rem; --e3:1.15rem; --e4:1.9rem;
  --e5:3.1rem; --e6:5rem; --e7:8rem;
}

*{margin:0;padding:0;box-sizing:border-box}

html{background:var(--fond);-webkit-text-size-adjust:100%}
body{
  background:var(--fond);color:var(--texte);
  font-family:"Asap",sans-serif;font-size:var(--t4);line-height:1.62;
  overflow-x:hidden;
}

h1,h2,h3{font-family:"Bricolage Grotesque",serif;font-weight:700;line-height:1.04}
h1{font-size:var(--t1);letter-spacing:-0.02em}
h2{font-size:var(--t2);letter-spacing:-0.02em}
h3{font-size:var(--t3);letter-spacing:-0.01em}

h1 + p,h2 + p,h2 + ul,h3 + p{margin-top:var(--e3)}
p + p{margin-top:var(--e3)}
p + ul,p + .liste-tech{margin-top:var(--e3)}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}

.sur{
  font-size:var(--t5);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--texte-doux);font-family:"Asap",sans-serif;
}

/* ── En-tête ─────────────────────────────────────────────── */
.tete{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);
  flex-wrap:wrap;
  padding-block:var(--e4) var(--e3);
  padding-inline:clamp(1.2rem,4vw,4.5rem);
  border-bottom:1px solid var(--surface-2);
}
.marque{
  font-family:"Bricolage Grotesque",serif;font-weight:700;
  font-size:1.32rem;letter-spacing:-0.02em;line-height:1.1;
}
.marque-sous{
  display:block;font-family:"Asap",sans-serif;font-weight:400;
  font-size:var(--t5);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--texte-doux);margin-top:var(--e1);
}
.nav{display:flex;gap:var(--e4);flex-wrap:wrap;font-size:var(--t5);
  letter-spacing:0.09em;text-transform:uppercase;color:var(--texte-doux)}
.nav a{padding-block:var(--e1);border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--texte);border-bottom-color:var(--surface-2)}

/* ── Grille ──────────────────────────────────────────────── */
.page{display:block}
.grille{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4);
  max-width:1360px;margin-left:auto;margin-right:auto;
  padding-inline:clamp(1.2rem,4vw,4.5rem);
}
.section{
  padding-block:var(--e6);
  border-top:1px solid var(--surface-2);
}
.section:first-of-type{border-top:0}

/* ── Hero plein écran ────────────────────────────────────── */
.plein-ecran{
  display:grid;min-height:82svh;
  margin-bottom:var(--e6);
}
.plein-ecran > .vis-plein{grid-area:1/1;overflow:hidden}
.plein-ecran > .grille{
  grid-area:1/1;align-self:end;position:relative;z-index:2;
  width:100%;padding-block:var(--e6);
}
.vis-plein img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04)}
.vis-plein::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,42,48,.42) 0%,rgba(35,42,48,.72) 52%,rgba(35,42,48,.97) 100%);
}
.vis-plein{position:relative}

/* ── Blocs ───────────────────────────────────────────────── */
.accroche{
  grid-column:1/9;
  border-left:3px solid var(--accent);
  padding-inline:var(--e4) 0;
  padding-block:var(--e2);
}
.bandeau{
  grid-column:2/11;
  padding-block:0;
}
.fiche{
  background:var(--surface);border:1px solid var(--surface-2);
  padding-block:var(--e4);padding-inline:var(--e4);
}
.fiche:nth-of-type(odd){grid-column:1/7}
.fiche:nth-of-type(even){grid-column:8/13;margin-top:var(--e5)}

.duo{grid-column:1/7}
.duo:nth-of-type(even){grid-column:7/13;padding-block:var(--e5) 0}

.trio{background:var(--surface);border-top:1px solid var(--surface-2);
  padding-block:var(--e4);padding-inline:var(--e3)}
.trio:nth-of-type(1){grid-column:1/5}
.trio:nth-of-type(2){grid-column:5/9;margin-top:var(--e4)}
.trio:nth-of-type(3){grid-column:9/13;margin-top:var(--e6)}

.note{
  grid-column:8/13;color:var(--texte-doux);font-size:var(--t5);
  border-top:1px solid var(--surface-2);padding-block:var(--e3);
}

.liste-tech{display:block}
.liste-tech li{
  border-bottom:1px solid var(--surface-2);
  padding-block:var(--e2);
  display:flex;gap:var(--e3);align-items:baseline;
}
.liste-tech li::before{
  content:"—";color:var(--texte-doux);flex:0 0 auto;
}

.chiffre{border-top:1px solid var(--surface-2);padding-block:var(--e3)}
.chiffre-val{font-family:"Bricolage Grotesque",serif;font-size:var(--t2);
  line-height:1;display:block}
.chiffre-lib{display:block;color:var(--texte-doux);font-size:var(--t5);margin-top:var(--e2)}

.etape{border-top:1px solid var(--surface-2);padding-block:var(--e4)}
.etape:nth-of-type(odd){grid-column:1/8}
.etape:nth-of-type(even){grid-column:6/13}
.etape-num{
  font-family:"Bricolage Grotesque",serif;font-size:var(--t5);
  letter-spacing:0.16em;color:var(--texte-doux);display:block;margin-bottom:var(--e2);
}

.tableau{grid-column:1/11;border-collapse:collapse;width:100%;font-size:var(--t5)}
.tableau caption{text-align:left;color:var(--texte-doux);
  padding-block:0 var(--e3);font-size:var(--t5)}
.tableau th,.tableau td{
  text-align:left;padding:0.72rem;border-bottom:1px solid var(--surface-2);
  vertical-align:top;
}
.tableau th{font-family:"Bricolage Grotesque",serif;font-weight:700;color:var(--texte)}
.tableau td{color:var(--texte-doux)}
.tableau td:last-child{color:var(--texte);white-space:nowrap}

.visuel{overflow:hidden;background:var(--surface)}
.visuel img{width:100%;object-fit:cover;aspect-ratio:3/2}
.visuel-legende{display:block;color:var(--texte-doux);font-size:var(--t5);
  padding-block:var(--e2);border-bottom:1px solid var(--surface-2)}

/* ── Formulaire ──────────────────────────────────────────── */
.form{grid-column:1/8;display:grid;gap:var(--e3)}
.champ{display:grid;gap:var(--e1)}
.champ label{font-size:var(--t5);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--texte-doux)}
.champ input,.champ select,.champ textarea{
  background:var(--surface);border:1px solid var(--surface-2);border-radius:2px;
  color:var(--texte);font-family:"Asap",sans-serif;font-size:var(--t4);
  padding:0.7rem;width:100%;
}
.champ textarea{min-height:8.5rem;resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:2px solid var(--zinc-clair);outline-offset:1px}
.form button{
  justify-self:start;background:var(--surface-2);color:var(--texte);
  border:1px solid var(--zinc-clair);border-radius:2px;
  font-family:"Bricolage Grotesque",serif;font-size:var(--t4);
  padding-block:0.75rem;padding-inline:1.5rem;cursor:pointer;
}
.form button:hover{background:var(--zinc-clair);color:var(--fond)}

/* ── Pied ────────────────────────────────────────────────── */
.pied{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4);
  max-width:1360px;margin-left:auto;margin-right:auto;
  padding-inline:clamp(1.2rem,4vw,4.5rem);
  padding-block:var(--e6) var(--e7);
  border-top:1px solid var(--surface-2);
  margin-top:var(--e6);
}
.pied-bloc{grid-column:span 4;color:var(--texte-doux);font-size:var(--t5)}
.pied-bloc:first-child{grid-column:1/4}
.pied-action{grid-column:9/13;justify-self:start}
.lien-action{
  font-family:"Bricolage Grotesque",serif;font-size:var(--t3);color:var(--texte);
  border-bottom:2px solid var(--accent);padding-block:0 var(--e1);display:inline-block;
}
.pied-mention{grid-column:1/9;color:var(--texte-doux);font-size:var(--t5);
  margin-top:var(--e4)}

/* ── Révélations ─────────────────────────────────────────── */
.rev{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.rev-ouvert{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rev{opacity:1;transform:none;transition:none}
}

/* ── Dispositif « le prochain créneau » ──────────────────── */
.creneau{
  position:fixed;right:0;bottom:var(--e4);z-index:40;
  width:min(21rem,calc(100vw - 1.4rem));
  background:var(--surface);border:1px solid var(--surface-2);border-right:0;
  border-radius:2px 0 0 2px;
  padding-block:var(--e3);padding-inline:var(--e3);
  transform:translateX(calc(100% - 3.4rem));
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.creneau-deplie{transform:translateX(0)}
.creneau-tete{
  font-family:"Bricolage Grotesque",serif;font-size:var(--t5);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--texte);
  display:flex;justify-content:space-between;gap:var(--e2);
}
.creneau-etat{color:var(--texte-doux)}
.creneau-corps{opacity:0;transition:opacity .35s linear .1s;margin-top:var(--e3)}
.creneau-deplie .creneau-corps{opacity:1}
.compteur{display:flex;gap:var(--e3)}
.compteur-bloc{flex:1 1 auto}
.compteur-val{
  font-family:"Bricolage Grotesque",serif;font-size:1.9rem;line-height:1;
  display:block;color:var(--texte);
}
.compteur-bloc:first-child .compteur-val{color:var(--accent)}
.compteur-lib{display:block;font-size:var(--t5);color:var(--texte-doux);margin-top:var(--e1)}
.creneau-meteo{font-size:var(--t5);color:var(--texte-doux);margin-top:var(--e3);
  border-top:1px solid var(--surface-2);padding-block:var(--e2) 0}
.creneau-nojs{font-size:var(--t5);color:var(--texte-doux);margin-top:var(--e2)}
html:not(.no-js) .creneau-nojs{display:none}
html.no-js .compteur{display:none}
html.no-js .creneau-tete .creneau-etat{display:none}
html.no-js .creneau-meteo{border-top:0}
html.no-js .creneau{transform:none}
html.no-js .creneau-corps{opacity:1}
@media (prefers-reduced-motion: reduce){
  .creneau,.creneau-corps{transition:none}
}

/* ── Sous 900 px ─────────────────────────────────────────── */
@media (max-width:900px){
  .accroche{grid-column:1/-1}
  .bandeau{grid-column:1/-1}
  .fiche:nth-of-type(odd){grid-column:1/-1}
  .fiche:nth-of-type(even){grid-column:1/-1;margin-top:0}
  .duo{grid-column:1/-1}
  .duo:nth-of-type(even){grid-column:1/-1;padding-block:0}
  .trio:nth-of-type(1){grid-column:1/-1}
  .trio:nth-of-type(2){grid-column:1/-1;margin-top:0}
  .trio:nth-of-type(3){grid-column:1/-1;margin-top:0}
  .etape:nth-of-type(odd){grid-column:1/-1}
  .etape:nth-of-type(even){grid-column:1/-1}
  .note{grid-column:1/-1}
  .tableau{grid-column:1/-1}
  .form{grid-column:1/-1}
  .pied-bloc{grid-column:1/-1}
  .pied-bloc:first-child{grid-column:1/-1}
  .pied-action{grid-column:1/-1}
  .pied-mention{grid-column:1/-1}
  .section{padding-block:var(--e5)}
}
@media (max-width:700px){
  .creneau{width:min(19rem,calc(100vw - 1.4rem))}
  .tete{align-items:flex-start;flex-direction:column;gap:var(--e3)}
}