:root{
  --ink:#14171A;
  --graphite:#22282D;
  --steel:#4A555E;
  --concrete:#E6E4DF;
  --concrete-dim:#D2CFC8;
  --paper:#F5F4F1;
  --pool:#1B7FA8;
  --pool-bright:#3FB3DE;
  --signal:#B26A16;
  --rule:rgba(20,23,26,.14);
  --rule-dark:rgba(255,255,255,.16);
  --maxw:1180px;
  --pad:clamp(1.25rem,4vw,3rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 1.1rem;
}
.eyebrow--onDark{color:var(--pool-bright)}
h1,h2,h3{font-family:Archivo,system-ui,sans-serif;margin:0;text-wrap:balance}
h1{
  font-weight:900;
  font-size:clamp(2.4rem,6.4vw,4.6rem);
  line-height:.98;
  letter-spacing:-.025em;
}
h2{
  font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.06;
  letter-spacing:-.02em;
}
h3{font-weight:600;font-size:1.18rem;line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1.1rem}
.lede{font-size:clamp(1.05rem,1.7vw,1.25rem);color:#333B42;max-width:60ch}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(20,23,26,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-dark);
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:64px;
}
.brand{
  font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.03em;
  font-size:1.3rem;color:#fff;text-decoration:none;
}
.brand span{color:var(--pool-bright)}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{
  font-size:.9rem;color:#C9CFD4;text-decoration:none;
  padding:.4rem 0;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a:focus-visible{color:#fff;border-bottom-color:var(--pool-bright)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--pool-bright)}
.nav .nav__cta{
  border:1px solid var(--rule-dark);border-radius:2px;
  padding:.5rem .9rem;color:#fff;
}
.nav .nav__cta:hover{background:var(--pool);border-color:var(--pool)}


/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--concrete);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.88;filter:contrast(1.04) saturate(.94)}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(20,23,26,.92) 0%,rgba(20,23,26,.35) 34%,transparent 62%),
    linear-gradient(100deg,rgba(20,23,26,.9) 0%,rgba(20,23,26,.66) 34%,rgba(20,23,26,.2) 64%,rgba(20,23,26,.42) 100%);
}
.hero__in{position:relative;padding-top:clamp(4rem,11vw,8rem);padding-bottom:0}
.hero h1{color:#fff;max-width:16ch}
.hero__sub{
  margin:1.6rem 0 0;max-width:52ch;color:#B9C1C7;font-size:clamp(1rem,1.5vw,1.15rem);
}

/* hero courte, sans grille CNPE (pages secondaires) */
.hero--short .hero__in{padding-bottom:clamp(2.6rem,6vw,4rem)}

/* signature: la bande des dix CNPE */
.sites{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid var(--rule-dark);
  padding-top:1.1rem;padding-bottom:2.6rem;
}
.sites__label{
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:#A7B2B9;font-weight:500;margin-bottom:1rem;
  display:flex;align-items:center;gap:.7rem;
}
/* --steel (#4A555E) ne tenait que 2,36 de contraste sur le fond sombre,
   sous le minimum de 4,5 exigé pour un texte. #A7B2B9 monte à 8,3. */
.sites__label b{color:var(--pool-bright);font-weight:600;letter-spacing:.1em}
.sites__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:.15rem 1.5rem;list-style:none;margin:0;padding:0;
}
.sites__grid li{
  font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:#DDE3E7;
  padding:.34rem 0;display:flex;align-items:baseline;gap:.6rem;
  opacity:0;transform:translateY(6px);
  animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards;
}
.sites__grid li::before{
  content:"";width:5px;height:5px;flex:0 0 5px;
  background:var(--pool-bright);border-radius:50%;
  box-shadow:0 0 8px rgba(63,179,222,.7);
}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .sites__grid li{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- bandeau preuves ---------- */
.proof{background:var(--graphite);color:#D7DDE1;border-top:1px solid var(--rule-dark)}
.proof__in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0;
}
.proof__item{padding:1.5rem 1.5rem 1.5rem 0;border-right:1px solid var(--rule-dark)}
.proof__item:last-child{border-right:0}
.proof__k{
  font-family:Archivo,sans-serif;font-weight:800;font-size:1.55rem;
  color:#fff;letter-spacing:-.02em;line-height:1;
}
.proof__v{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:#8D979E;margin-top:.5rem;
}
@media(max-width:700px){.proof__item{border-right:0;border-bottom:1px solid var(--rule-dark);padding-right:0}}

/* ---------- plan pleine largeur ---------- */
.plate{position:relative;background:var(--ink);overflow:hidden;height:clamp(300px,54vh,620px)}
.plate img{width:100%;height:100%;object-fit:cover}
.plate__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.6rem var(--pad) 1.15rem;
  background:linear-gradient(0deg,rgba(20,23,26,.82),transparent);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#C3D6E0;
}
.plate__cap span{max-width:var(--maxw);margin:0 auto;display:block}

/* ---------- bandes génériques ---------- */
.band{padding:clamp(3.5rem,8vw,6.5rem) 0}
.band--concrete{background:var(--concrete)}
.band--dark{background:var(--ink);color:var(--concrete)}
.band--dark h2{color:#fff}
.band--dark .lede{color:#AAB3B9}

.statement{max-width:34ch;font-family:Archivo,sans-serif;font-weight:600;
  font-size:clamp(1.35rem,2.9vw,2rem);line-height:1.25;letter-spacing:-.02em}
.statement em{font-style:normal;color:var(--pool);}

/* ---------- prestations ---------- */
.grid4{
  display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:2.8rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.card{
  background:var(--concrete);padding:1.9rem 1.6rem 2rem;
  text-decoration:none;display:flex;flex-direction:column;gap:.7rem;
  transition:background .2s ease;
}
.card:hover,.card:focus-visible{background:var(--paper)}
.card__num{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  color:var(--signal);text-transform:uppercase;
}
.card p{font-size:.95rem;color:#3C444A;margin:0}
.card__go{
  margin-top:auto;padding-top:1.1rem;font-family:"IBM Plex Mono",monospace;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pool);
}

/* ---------- fiche habilitations (signature 2) ---------- */
.zc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.zc{grid-template-columns:1fr}}
.fiche{
  border:1px solid var(--rule-dark);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.fiche__head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem 1.15rem;border-bottom:1px solid var(--rule-dark);
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#939DA4;
}
.fiche__head b{color:var(--pool-bright);font-weight:500}
.fiche__head b.pending{color:var(--signal)}
.fiche__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.82rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:"IBM Plex Mono",monospace;font-size:.83rem;
}
.fiche__row:last-child{border-bottom:0}
.fiche__row span:first-child{color:#DCE2E6}
.fiche__row span:last-child{color:#7F8990;text-align:right;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.fiche__note{
  padding:.9rem 1.15rem;border-top:1px solid var(--rule-dark);
  font-size:.8rem;color:#818B92;line-height:1.5;
}
.fiche__note--pending{color:var(--signal);border-top-color:rgba(178,106,22,.4)}

/* ---------- réalisations ---------- */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2.8rem}
.reel__frame{position:relative;padding-top:56.25%;background:var(--graphite);border:1px solid var(--rule)}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel__meta{
  margin-top:.85rem;font-family:"IBM Plex Mono",monospace;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
}
.reel h3{margin-top:.35rem;font-size:1.05rem}

/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:820px){.studio{grid-template-columns:1fr}}
.studio__tags{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.studio__tags li{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.06em;
  border:1px solid var(--rule);padding:.4rem .7rem;color:#3C444A;
}

/* ---------- listes utilitaires (étapes numérotées / à puces) ---------- */
.steps{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.5rem}
.steps li{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;align-items:baseline}
.steps__n{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--pool)}
.band--dark .steps__n{color:var(--pool-bright)}
.steps h3{font-size:1.02rem;margin-bottom:.3rem}
.steps p{margin:0;font-size:.95rem}

.checklist{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem}
.checklist li{
  display:block;position:relative;padding-left:1.95rem;
  font-size:1rem;
}
.checklist li::before{
  content:"—";color:var(--signal);font-family:"IBM Plex Mono",monospace;
  position:absolute;left:0;top:0;
}

.tags{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.06em;
  border:1px solid var(--rule);padding:.4rem .7rem;color:#3C444A;
}
.band--dark .tags li{border-color:var(--rule-dark);color:#C9CFD4}

/* ---------- cta / footer ---------- */
.cta{background:var(--pool);color:#fff}
.cta h2{color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.86);max-width:52ch}
.btn{
  display:inline-block;margin-top:1.4rem;background:#fff;color:var(--ink);
  font-family:Archivo,sans-serif;font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;text-decoration:none;border:1px solid #fff;
}
.btn:hover,.btn:focus-visible{background:transparent;color:#fff}

.foot{background:var(--ink);color:#8D979E;font-size:.87rem;padding:3rem 0 2.2rem}
.foot__in{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between}
.foot a{color:#C4CBD0;text-decoration:none}
.foot a:hover{color:#fff}
.foot__col{display:flex;flex-direction:column;gap:.45rem}
.foot__h{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:#5D666C;margin-bottom:.35rem;
}
.foot__legal{
  margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--rule-dark);
  font-size:.78rem;color:#5D666C;
}

/* ---------- formulaire de contact ---------- */
.cform{display:grid;gap:1.4rem;max-width:640px;margin-top:2.8rem}
.cform label{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.5rem;
}
.cform input,.cform textarea{
  width:100%;border:1px solid var(--rule);background:var(--paper);
  padding:.75rem .9rem;font-family:"IBM Plex Sans",sans-serif;font-size:.95rem;
  color:var(--ink);
}
.cform textarea{resize:vertical;min-height:110px}
.cform input:focus-visible,.cform textarea:focus-visible{border-color:var(--pool)}
.cform button{
  justify-self:start;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-family:Archivo,sans-serif;font-weight:600;font-size:.95rem;
  padding:.85rem 1.7rem;cursor:pointer;
}
.cform button:hover,.cform button:focus-visible{background:var(--pool);border-color:var(--pool)}

:focus-visible{outline:2px solid var(--pool-bright);outline-offset:3px}
/* ---------- chiffres clés ---------- */
.figs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:2.6rem;
}
.figs div{background:var(--paper);padding:1.5rem 1.3rem}
.figs b{
  display:block;font-family:Archivo,sans-serif;font-weight:800;
  font-size:1.75rem;letter-spacing:-.02em;line-height:1;color:var(--ink);
}
.figs span{
  display:block;margin-top:.55rem;font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
}

/* ---------- tableau de références ---------- */
.reftable{width:100%;border-collapse:collapse;margin-top:2.8rem;font-size:.95rem}
.reftable thead th{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);text-align:left;
  padding:0 1.4rem .85rem 0;border-bottom:1px solid var(--ink);white-space:nowrap;
}
.reftable td{padding:1.05rem 1.4rem 1.05rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.reftable tbody tr:hover{background:rgba(27,127,168,.045)}
.reftable .r-client{font-weight:600;white-space:nowrap}
.reftable .r-year,.reftable .r-place{
  font-family:"IBM Plex Mono",monospace;font-size:.79rem;
  letter-spacing:.04em;color:var(--steel);
}
.reftable .r-year{white-space:nowrap}

@media(max-width:820px){
  .reftable,.reftable tbody,.reftable tr,.reftable td{display:block;width:100%}
  .reftable thead{display:none}
  .reftable tr{border-bottom:1px solid var(--rule);padding:1.3rem 0}
  .reftable tr:hover{background:none}
  .reftable td{border:0;padding:.2rem 0}
  .reftable td::before{
    content:attr(data-l);display:block;margin-bottom:.2rem;
    font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);
  }
  .reftable .r-client{white-space:normal}
}

/* ---------- galerie de tournage ---------- */
.gal{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;margin-top:2.8rem;
}
.gal figure{margin:0}
.gal img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--rule);background:var(--graphite);
}
.gal figcaption{
  margin-top:.7rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--steel);
}
.band--dark .gal figcaption{color:#8D979E}
.band--dark .gal img{border-color:var(--rule-dark)}

/* ---------- correction globale des proportions d'image ----------
   Les attributs width/height des balises réservent la place au
   chargement, mais imposent une hauteur fixe. Sans height:auto,
   l'image est étirée dès que sa largeur est contrainte.
   Les composants qui fixent leur propre hauteur (.hero__media,
   .plate) ne sont pas affectés : leur règle de classe l'emporte. */
img{height:auto}


/* ---------- grille des dix CNPE : cinq par ligne ----------
   Le remplissage automatique donnait six puis quatre. */
.sites__grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.sites__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.sites__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- bandeau de preuves : décoller du filet ----------
   La première case reste calée sur la marge de contenu. */
.proof__item + .proof__item{padding-left:1.6rem}
@media(max-width:700px){.proof__item + .proof__item{padding-left:0}}


/* ---------- pastille de statut (studio en construction) ---------- */
.statut{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  border:1px solid var(--signal);border-left-width:3px;
  padding:.6rem .95rem;margin-top:1.6rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--signal);
}
.statut b{font-weight:500;color:var(--signal)}
.statut span{display:block}
.statut span::before{content:"· "}
.hero .statut,.band--dark .statut{
  border-color:#D08A2E;color:#E0A253;background:rgba(178,106,22,.08);
}
.hero .statut b,.band--dark .statut b{color:#E0A253}


/* ---------- géométrie des images ----------
   Le site sert le WebP directement, sans <picture> ni repli JPEG :
   ces règles s'appliquent donc à <img>. */
.hero__media img,.plate img{display:block;width:100%;height:100%}
.gal img,.studio img,.zc img{display:block;width:100%}


/* ---------- chiffre mis en avant ---------- */
.chiffre{
  font-family:Archivo,sans-serif;font-weight:900;
  font-size:clamp(3.4rem,10vw,7rem);line-height:.85;letter-spacing:-.04em;
  color:var(--pool);margin:.2rem 0 0;
}
.band--dark .chiffre{color:var(--pool-bright)}


/* ---------- mention sous une image (provenance, contexte) ---------- */
.credit{
  border-left:2px solid var(--signal);
  padding:.15rem 0 .15rem .8rem;margin:.9rem 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;line-height:1.6;
  color:var(--steel);max-width:46ch;
}
.credit b{font-weight:500;color:var(--signal);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.3rem}
.band--dark .credit{color:#8D979E;border-left-color:#D08A2E}
.band--dark .credit b{color:#E0A253}


/* ---------- navigation repliable ----------
   Sous 820 px, les liens passaient en display:none sans remplacement :
   la navigation devenait inaccessible au téléphone. */
.topbar{position:sticky}
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-right:-10px;
  background:none;border:0;cursor:pointer;
}
.burger span{display:block;height:2px;background:#DDE3E7;transition:transform .18s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--pool-bright);outline-offset:2px}

@media(max-width:820px){
  .burger{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(20,23,26,.985);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule-dark);
    padding:.25rem 0 1rem;
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .nav[data-ouvert="true"]{display:flex}
  .nav a{
    padding:.95rem var(--pad);font-size:1rem;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav a:hover,.nav a:focus-visible{border-bottom-color:rgba(255,255,255,.07);background:rgba(255,255,255,.04)}
  .nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.07);color:var(--pool-bright)}
  .nav .nav__cta{
    margin:.9rem var(--pad) 0;text-align:center;border-radius:2px;
    border:1px solid var(--rule-dark);background:var(--pool);border-color:var(--pool);
  }
}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}


/* ---------- sous-bloc dans une section ----------
   Sépare deux listes au sein d'une même bande, sans changer de fond. */
.sous-bloc{
  margin-top:2.8rem;padding-top:2.2rem;
  border-top:1px solid var(--rule);
}
.band--dark .sous-bloc{border-top-color:var(--rule-dark)}
.sous-bloc h3{
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);
}
.band--dark .sous-bloc h3{color:#939DA4}


/* ---------- bloc studio sur fond sombre ---------- */
.band--dark .studio__tags li{border-color:var(--rule-dark);color:#C9CFD4}
.band--dark .studio img{border-color:var(--rule-dark)!important}

.studio.sous-bloc{align-items:center}
@media(max-width:820px){.studio.sous-bloc{gap:1.8rem}}


/* listes à puces sur fond sombre */
.band--dark .checklist li{color:var(--concrete)}
.band--dark .checklist li strong{color:#fff}


/* ---------- trois vues empilées, la médiane décalée ---------- */
.trio{display:flex;flex-direction:column;gap:1.1rem}
.trio img{display:block;width:82%;height:auto;border:1px solid var(--rule)}
.trio img.trio__decale{align-self:flex-end}
.band--dark .trio img{border-color:var(--rule-dark)}
@media(max-width:820px){.trio img{width:90%}}


/* légende du chiffre mis en avant : subordonnée, jamais un titre */
.chiffre__note{
  font-family:"IBM Plex Mono",monospace;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin:1rem 0 0;max-width:34ch;line-height:1.7;
}
.band--dark .chiffre__note{color:#8D979E}

/* ---------- champ piège du formulaire de contact ----------
   Invisible pour un visiteur, atteignable par un robot qui lit
   le HTML. Ne jamais passer par display:none : certains robots
   ignorent les champs ainsi masqués. */
.pot-de-miel{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- figure à légende incrustée ----------
   Même rendu que .plate__cap, mais sans hauteur fixe :
   l'image garde ses proportions au lieu d'être recadrée. */
.fig-cap{position:relative}
.fig-cap .plate__cap{padding:2.6rem 1.1rem 1.1rem}

/* ---------- images de contenu à fond perdu sur mobile ----------
   Sous 700 px, la marge latérale de .wrap ampute une largeur déjà
   étroite. Les images des grilles de contenu débordent donc de la
   valeur exacte de cette marge, pour atteindre les bords de l'écran.
   Les légendes, elles, restent alignées sur le texte.
   Non concernés : .hero__media et .plate, déjà pleine largeur,
   et .trio, dont le décalage des trois vues est intentionnel. */
@media(max-width:700px){
  .gal img,
  .zc > div > img,
  .zc > img,
  .studio img,
  .fig-cap{
    width:calc(100% + var(--pad) * 2);
    max-width:none;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
  }
  .fig-cap img{width:100%;margin:0}
  .gal{gap:2rem}
}

/* ---------- plans pleine largeur sur mobile ----------
   Sur grand écran, .plate impose une hauteur de bande et recadre
   l'image au centre. Sous 700 px, cette hauteur plancher de 300 px
   force un recadrage latéral qui ampute près de trois dixièmes du
   cadre. On rend donc la hauteur au contenu : l'image s'affiche
   entière, en bandeau panoramique. */
@media(max-width:700px){
  .plate{height:auto}
  .plate img{height:auto;object-fit:contain}
}

/* ---------- message d'erreur du formulaire ---------- */
.cform-erreur{
  margin-top:1.4rem;padding:.9rem 1.1rem;
  border-left:3px solid var(--signal);background:rgba(178,106,22,.08);
  font-size:.94rem;color:var(--ink);
}