/* ============================================================
   AUDY CONSTRUCTION — Feuille de style
   ------------------------------------------------------------
   DIRECTION : « feuille de chantier ». Fond papier, encre
   charbon, filets pleins, chiffres tabulaires, blocs francs.
   Rien à voir avec les autres maquettes du dossier (fond noir,
   italique serif, halos) : ce client vend du bâtiment à des
   gestionnaires d'immeubles, pas du service au particulier.

   COULEUR DE MARQUE : ne rien changer ici.
   Le rouge et le charbon viennent de leur logo. Ils se règlent
   dans assets/js/config.js → couleurs: {…}
   ============================================================ */

:root{
  /* ── Le papier ─────────────────────────────────────────── */
  --paper:    #EFEFEC;   /* le fond : blanc froid de feuille de plan */
  --paper-2:  #FFFFFF;   /* les blocs de contenu */
  --paper-3:  #E5E6E2;   /* les creux, les bandes */

  /* ── L'encre ───────────────────────────────────────────── */
  --ink:      #1A1819;   /* le texte courant */
  --ink-2:    #4A4749;   /* le texte secondaire      — 8,0:1 */
  --ink-3:    #635E61;   /* les libellés, les notes  — 4,7:1 */
  --charbon:  #322F31;   /* ✔ le charbon du logo : les blocs pleins */
  --sur-charbon:#EFEFEC; /* le texte POSÉ SUR le charbon. Jamais inversé
                            dans les blocs foncés, contrairement à --paper :
                            c'est ce qui évite le charbon sur charbon. */
  --charbon-rgb: 50,47,49;

  /* ── Le rouge ──────────────────────────────────────────── */
  --rouge:      #ED2628;   /* ✔ le rouge du logo : aplats, boutons */
  --rouge-rgb:  237,38,40;
  --rouge-txt:  #C4181A;   /* le même, foncé pour le petit texte — 5,4:1 */
  --rouge-plein:#E42124;   /* les aplats qui portent du texte blanc — 4,6:1 */
  --sur-rouge:  #FFFFFF;
  --rouge-sur-charbon:#FF8F90;   /* le même, pâli pour le petit texte sur charbon — 6:1 */

  /* ── Les filets ────────────────────────────────────────────
     Un site de plans, ça se tient par ses traits. Trois
     épaisseurs, jamais plus.                                 */
  --trait:    rgba(26,24,25,.14);
  --trait-2:  rgba(26,24,25,.26);
  --trait-3:  rgba(26,24,25,.55);

  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 60px);

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ── Palettes de rechange ───────────────────────────────────
   Le défaut est celui de leur logo. Si un jour la marque
   change : theme: 'charbon' | 'ocre' | 'sapin' | 'acier'    */

:root[data-theme="charbon"]{   /* sans rouge — tout en charbon, très sobre */
  --rouge:#322F31; --rouge-rgb:50,47,49; --rouge-txt:#322F31;
}
:root[data-theme="ocre"]{      /* terre cuite — maçonnerie */
  --rouge:#C2662B; --rouge-rgb:194,102,43; --rouge-txt:#9A4E1D; --marque:#5E3316;
}
:root[data-theme="sapin"]{     /* vert forêt — efficacité énergétique */
  --rouge:#1F6B4A; --rouge-rgb:31,107,74; --rouge-txt:#175338;
}
:root[data-theme="acier"]{     /* bleu acier — si le rouge est jugé trop vif */
  --rouge:#1D5FA8; --rouge-rgb:29,95,168; --rouge-txt:#174C87;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,.4vw + 14px,16.5px);
  line-height:1.6;
  font-weight:400;
  font-synthesis:none;          /* pas de faux gras : les 4 graisses sont réelles */
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
::selection{ background:var(--rouge); color:var(--sur-rouge) }

:focus-visible{ outline:2px solid var(--rouge); outline-offset:2px }

/* Tous les chiffres sont tabulaires : c'est ce qui fait qu'un
   tableau de coûts s'aligne comme dans un bordereau. */
b,strong,.num,input,output,td,th,.tab{ font-variant-numeric:tabular-nums }

/* ── Titres ─────────────────────────────────────────────────
   Capitales serrées, graisse réelle. Aucun italique, aucun
   dégradé sur le texte : c'est la signature des autres
   maquettes, pas de celle-ci.                                */
h1,h2,h3,h4{ font-weight:700; letter-spacing:-.03em; line-height:1.02 }

h1{
  font-size:clamp(2.3rem,5.2vw,4.4rem);
  letter-spacing:-.045em; line-height:.96; text-transform:uppercase;
}
h2{
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  letter-spacing:-.038em; text-transform:uppercase;
}
h3{ font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:-.022em; line-height:1.22 }

/* Le mot mis en avant passe en rouge, pas en italique. */
h1 em, h2 em{ font-style:normal; color:var(--rouge) }

/* ── Utilitaires ────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

section[id],main[id]{ scroll-margin-top:88px }


/* ── Boutons ────────────────────────────────────────────────
   Angles francs, aucun arrondi. Un chantier, c'est droit.   */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:15px 26px; border-radius:0;
  font-size:.85rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn--sm{ padding:11px 18px; font-size:.78rem }
.btn--lg{ padding:18px 32px; font-size:.9rem }

.btn--gold{ background:var(--rouge-plein); color:var(--sur-rouge) }
.btn--gold:hover{ background:var(--charbon); transform:translateY(-2px) }

.btn--ghost{ border:1px solid var(--trait-3); color:var(--ink) }
.btn--ghost:hover{ background:var(--charbon); border-color:var(--charbon); color:var(--paper-2); transform:translateY(-2px) }
.btn--ghost.is-ok{ background:var(--rouge); border-color:var(--rouge); color:var(--sur-rouge) }

.btn--plain{ color:var(--ink-3); padding-inline:6px; text-decoration:underline; text-underline-offset:4px }
.btn--plain:hover{ color:var(--ink) }

  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  opacity:.7; padding-left:12px; border-left:1px solid rgba(255,255,255,.32);
}
.btn:disabled{ opacity:.3; pointer-events:none }
/* L'en-tête porte le libellé long ; sous 820 px il passe au court. */

/* ── Révélation au défilement ───────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s) }
.reveal.in{ opacity:1; transform:none }

/* ══ BANDEAU DÉMO ═══════════════════════════════════════ */
.demo-bar{
  position:relative; z-index:120;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:9px 46px 9px 20px; background:var(--charbon); color:var(--sur-charbon);
  font-size:.73rem; letter-spacing:.03em; text-align:center;
}
.demo-dot{ width:6px; height:6px; background:var(--rouge); flex:none; animation:blink 2.4s infinite }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.demo-bar button{ position:absolute; right:14px; font-size:1.15rem; line-height:1; color:var(--sur-charbon); opacity:.6; padding:4px 8px }
.demo-bar button:hover{ opacity:1 }

/* ══ NAVIGATION ════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:clamp(18px,3.5vw,48px);
  padding:12px var(--pad);
  background:var(--paper); border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.nav.stuck{ border-bottom-color:var(--trait); box-shadow:0 1px 20px rgba(26,24,25,.06); padding-block:9px }

.nav__brand{ display:flex; align-items:center; gap:11px; flex:none }
.nav__logo{ max-width:min(200px,40vw); object-fit:contain }
.foot__logo{ max-width:min(230px,52vw); object-fit:contain }

/* Repli si le fichier logo manque : le nom composé en typo */
.lockup{ display:flex; flex-direction:column; line-height:1; --lk:1 }
.lockup__name{
  font-size:calc(1.3rem * var(--lk)); font-weight:700;
  letter-spacing:.13em; color:var(--rouge);
}
.lockup__rule{ display:flex; align-items:center; gap:calc(7px * var(--lk)); margin-top:calc(5px * var(--lk)) }
.lockup__rule em{
  font-style:normal; font-size:calc(.52rem * var(--lk)); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
.lockup__rule i{ display:none }
.lockup--lg{ --lk:1.5 }

.nav__links{ display:flex; gap:clamp(14px,1.9vw,28px); margin-right:auto; font-size:.83rem; font-weight:500; color:var(--ink-2) }
.nav__links a{ position:relative; padding:5px 0; transition:color .25s }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--rouge); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink) }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }

.nav__cta{ display:flex; align-items:center; gap:16px; flex:none }
.link-phone{ display:flex; align-items:center; gap:9px; font-size:.85rem; font-weight:600 }
.link-phone:hover{ color:var(--rouge-txt) }
.pulse{ position:relative; width:6px; height:6px; border-radius:50%; background:#1F8A4C; flex:none }
.pulse::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid #1F8A4C; opacity:0; animation:ping 2.6s var(--ease) infinite }
@keyframes ping{ 0%{transform:scale(.5);opacity:.9} 70%,100%{transform:scale(1.5);opacity:0} }

.nav__burger{ display:none; width:36px; height:36px; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px }
.nav__burger span{ display:block; height:2px; background:var(--ink); transition:transform .35s var(--ease)}
.nav__burger span:nth-child(1){ width:22px } .nav__burger span:nth-child(2){ width:14px }
.nav__burger[aria-expanded=true] span:nth-child(1){ width:22px; transform:translateY(4px) rotate(45deg) }
.nav__burger[aria-expanded=true] span:nth-child(2){ width:22px; transform:translateY(-4px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0 0 auto; top:0; z-index:99;
  display:flex; flex-direction:column;
  padding:92px var(--pad) 36px;
  background:var(--paper); border-bottom:2px solid var(--charbon);
  transform:translateY(-102%); transition:transform .5s var(--ease); visibility:hidden;
}
.drawer.open{ transform:none; visibility:visible }
.drawer a:not(.btn){
  padding:15px 0; font-size:1.25rem; font-weight:600; letter-spacing:-.025em;
  text-transform:uppercase; border-bottom:1px solid var(--trait);
}
.drawer .btn{ margin-top:24px; align-self:flex-start }

/* ══ HÉRO ═══════════════════════════════════════════════
   Pas de halo, pas de grain. Une grille de plan, une
   élévation dessinée au trait, une cote sur le côté.      */
.hero{ position:relative; padding:clamp(34px,5vw,64px) 0 clamp(48px,6vw,86px) }
.hero__glow{ display:none }
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000,transparent 78%);
}

.hero__inner{
  position:relative; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(28px,4vw,60px); align-items:start;
}

.hero__copy h1{ margin-bottom:1.6rem }
.hero__lead{ max-width:44ch; color:var(--ink-2); font-size:1.02rem; line-height:1.66 }
.hero__actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:2.2rem }


/* ── L'élévation dessinée ─────────────────────────────────
   Un plan, pas une image de synthèse : trait fin sur blanc,
   les ouvertures faites en rouge plein, celle en cours
   cerclée, et une cote qui monte avec le chantier.        */
.hero__stage{ position:relative }
.stage{
  position:relative; aspect-ratio:1;
  border:1px solid var(--trait-2); background:var(--paper-2);
  overflow:hidden;
}
.stage__sky{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);
  background-size:26px 26px; opacity:.55;
}
.stage__sky::after{   /* le sol */
  content:''; position:absolute; left:0; right:0; bottom:14%; height:1px; background:var(--trait-3);
}

.facade{
  position:absolute; z-index:2; left:20%; right:20%; top:9%; bottom:14%;
  display:flex; flex-direction:column; gap:clamp(4px,.9vw,7px);
  padding:clamp(7px,1.3vw,11px) clamp(7px,1.3vw,11px) 0;
  border:1.5px solid var(--charbon); border-bottom:0;
  background:var(--paper-2);
}
.facade__row{ flex:1; display:grid; grid-template-columns:repeat(var(--cols,6),1fr); gap:clamp(4px,.9vw,7px) }

.facade__win{
  border:1px solid var(--trait-3); background:transparent;
  transition:background .5s var(--ease) var(--dc,0s), border-color .5s var(--ease) var(--dc,0s);
}
/* Fait : l'ouverture est remplie, en rouge de marque */
.facade__row.is-neuf .facade__win{ background:var(--rouge); border-color:var(--rouge) }
/* En cours : hachurée, comme sur un plan de phasage */
.facade__row.is-now .facade__win{
  border-color:var(--charbon);
  background:repeating-linear-gradient(45deg,var(--charbon) 0 1.5px,transparent 1.5px 5px);
  animation:travail 1.6s steps(2) infinite;
}
@keyframes travail{ 0%,100%{opacity:1} 50%{opacity:.45} }

/* La cote de phasage, sur le côté */
.stage__lift{
  position:absolute; z-index:3; left:6%; right:6%; top:var(--y,50%);
  height:0; pointer-events:none; transition:top .9s var(--ease);
}
.stage__lift i{
  position:absolute; left:0; right:0; top:0; height:1.5px; background:var(--rouge);
}
.stage__lift i::before,.stage__lift i::after{   /* les flèches de cote */
  content:''; position:absolute; top:-3.25px; width:6px; height:8px; background:var(--rouge);
}
.stage__lift i::before{ left:0; clip-path:polygon(0 50%,100% 0,100% 100%) }
.stage__lift i::after{ right:0; clip-path:polygon(0 0,100% 50%,0 100%) }
.stage__lift b{
  position:absolute; left:50%; top:-24px; transform:translateX(-50%);
  padding:2px 8px; background:var(--rouge-plein); color:var(--sur-rouge);
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.stage__lift b::after{ content:'Front de remplacement' }
.stage__sweep{ display:none }

/* Une vraie photo remplace le dessin. */
.stage--photo .facade,
.stage--photo .stage__lift,
.stage--photo .stage__sky{ display:none }
.stage__photo{ position:absolute; inset:0; z-index:2; background-size:cover; background-position:center }

/* Le cartouche, en bas du cadre — comme sur une feuille de plan */
.stage__tag{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:baseline; gap:14px;
  padding:11px 14px; background:var(--charbon); color:var(--sur-charbon);
}
.stage__tag-k{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rouge); flex:none }
.stage__tag-v{ font-size:.78rem; font-weight:500 }

.stage__key{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px }
.stage__key span{ display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) }
.k{ width:11px; height:11px; flex:none; border:1px solid var(--trait-3) }
.k--new{ background:var(--rouge); border-color:var(--rouge) }
.k--now{ border-color:var(--charbon); background:repeating-linear-gradient(45deg,var(--charbon) 0 1.5px,transparent 1.5px 5px) }
.k--old{ background:transparent }

.hero__scroll{ display:none }

/* ══ BANDE DÉFILANTE ═══════════════════════════════════ */

/* ══ STRUCTURE DE SECTION ══════════════════════════════ */
.section{ padding:clamp(60px,8vw,120px) 0; position:relative }
.section--dark{ background:var(--charbon); color:var(--ink) }
.section--form{ background:var(--paper-3); border-block:1px solid var(--trait) }

/* Dans un bloc charbon, TOUS les jetons s'inversent — encre,
   papier et filets. En oublier un seul (le papier des encarts,
   par exemple) donne du texte pâle sur fond pâle. */
.section--dark{ --ink:#EFEFEC; --ink-2:#C3BFC1; --ink-3:#BEBABC;
                --trait:rgba(255,255,255,.16); --trait-2:rgba(255,255,255,.28); --trait-3:rgba(255,255,255,.5);
                --paper:#322F31; --paper-2:#3C393B; --paper-3:#4A4649;
                --rouge-txt:var(--rouge-sur-charbon) }

.s-head{ margin-bottom:clamp(36px,4.5vw,64px); max-width:62ch }
.s-head__lead{ color:var(--ink-2); max-width:46ch; margin-top:1.2rem; font-size:.97rem }
.demo-note{
  display:inline-flex; align-items:center; gap:9px; margin-top:1.2rem;
  padding:8px 14px; border:1px dashed var(--trait-2);
  font-size:.75rem; color:var(--ink-3);
}
.demo-note::before{ content:''; width:6px; height:6px; background:var(--rouge); flex:none }
.s-head--split{ display:grid; grid-template-columns:1fr minmax(0,.8fr); gap:clamp(24px,4vw,56px); align-items:end; max-width:none }
.s-head--split .s-head__lead{ margin-top:0 }


/* ── Le résultat : un cartouche de bordereau ───────────── */
.res{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:1px; background:var(--trait) }
.res__left,.res__right{ background:var(--paper-2); padding-right:clamp(18px,2.4vw,32px) }
.res__right{ padding:clamp(20px,2.4vw,28px); background:var(--paper-3) }
.res__kicker{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--rouge-txt); margin-bottom:.8rem }
.res__name{ font-size:clamp(1.6rem,3vw,2.3rem); font-weight:700; letter-spacing:-.04em; line-height:1; text-transform:uppercase }
.res__claim{ color:var(--ink-2); margin-top:.6rem; font-size:.88rem }

.res__price{ margin:1.8rem 0 0; padding:20px; border:2px solid var(--charbon); background:var(--paper-3) }
.res__price-k{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px }
.res__price-v{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 9px;
  font-size:clamp(1.45rem,2.9vw,2.2rem); font-weight:700; letter-spacing:-.05em; line-height:1.1;
}
.res__price-v s{ text-decoration:none; color:var(--ink-3); font-weight:400 }
.res__price-v sup{ font-size:.4em; font-weight:600; color:var(--rouge-txt); top:-.5em }
.res__price-u{ display:block; margin-top:10px; font-size:.76rem; color:var(--ink-3) }

.res__meta{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:1px; background:var(--trait) }
.res__meta > div{ background:var(--paper-3); padding:16px 18px; border:1px solid var(--trait-2); border-top:0 }
.res__meta strong{ display:block; font-size:.94rem; font-weight:700; letter-spacing:-.02em; line-height:1.3 }
.res__note{ margin-top:1.3rem; font-size:.78rem; color:var(--ink-3); line-height:1.58; max-width:52ch }
.res__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:1.8rem }

.res__inc-k{ font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem }
.res__inc-k--2{ margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--trait-2) }

.split li{ display:grid; grid-template-columns:1fr auto; gap:5px 14px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--trait) }
.split li:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0 }
.split span{ font-size:.81rem; color:var(--ink-2) }
.split b{ font-size:.84rem; font-weight:700; text-align:right; white-space:nowrap }
.split i{ grid-column:1; align-self:center; height:5px; background:var(--trait-2); overflow:hidden }
.split i::after{ content:''; display:block; height:100%; width:var(--w); background:var(--rouge) }
.split u{ grid-column:2; text-decoration:none; font-size:.72rem; font-weight:600; color:var(--ink-3); text-align:right }

.res__inc li{ position:relative; padding-left:22px; padding-block:8px; font-size:.85rem; border-bottom:1px solid var(--trait) }
.res__inc li:last-child{ border-bottom:0 }
.res__inc li::before{
  content:''; position:absolute; left:0; top:15px; width:10px; height:5px;
  border-left:2px solid var(--rouge); border-bottom:2px solid var(--rouge); transform:rotate(-45deg);
}
.res__inc--extra li{ display:flex; justify-content:space-between; gap:12px }
.res__inc--extra em{ font-style:normal; color:var(--rouge-txt); font-weight:700; font-size:.8rem }
.res__cstr{ margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--trait-2) }


/* ══ PROJETS ═══════════════════════════════════════════ */
.cases{ display:grid; gap:clamp(14px,2vw,22px) }
.case{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  border:1px solid var(--trait-2); background:var(--paper-2); transition:border-color .3s;
}
.case:hover{ border-color:var(--charbon) }
.case__scene{ position:relative; min-height:260px; overflow:hidden; border-right:1px solid var(--trait-2) }
.case__cat{
  position:absolute; left:0; bottom:0; z-index:3;
  padding:7px 13px; background:var(--rouge-plein); color:var(--sur-rouge);
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.case__body{ padding:clamp(24px,3vw,38px) }
.case__body h3{ text-transform:uppercase }
.case__sub{ margin-top:.5rem; font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--rouge-txt) }

.case__num{ display:flex; flex-wrap:wrap; gap:24px; margin:1.5rem 0; padding:16px 0; border-block:1px solid var(--trait-2) }
.case__num b{ display:block; font-size:1.55rem; font-weight:700; letter-spacing:-.05em; line-height:1 }
.case__num span{ display:block; margin-top:5px; font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }

.case__txt{ font-size:.88rem; color:var(--ink-2); line-height:1.66; max-width:60ch }
.case__q{
  margin-top:1.5rem; padding:16px 18px; background:var(--paper-3); border-top:2px solid var(--rouge);
  font-size:.89rem; line-height:1.58; color:var(--ink);
}
.case__q::before{ content:'«\00a0' } .case__q::after{ content:'' }
.case__q cite{
  display:block; margin-top:.8rem; font-style:normal;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* Élévations dessinées : trait fin sur blanc, ouvertures pleines.
   Une photo déposée dans projets[].photo les remplace. */
.case__scene::after{ content:''; position:absolute; inset:0; z-index:2 }
.sc-case--tour{
  background:
    repeating-linear-gradient(0deg,  transparent 0 30px, var(--trait-2) 30px 31px),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--trait-2) 26px 27px),
    repeating-linear-gradient(90deg, rgba(var(--rouge-rgb),.9) 0 12px, transparent 12px 26px),
    var(--paper-2);
  background-size:100% 100%, 100% 100%, 26px 31px, 100% 100%;
}
.sc-case--facade{
  background:
    repeating-linear-gradient(0deg,  transparent 0 52px, var(--trait-2) 52px 53px),
    repeating-linear-gradient(90deg, transparent 0 46px, var(--trait-2) 46px 47px),
    repeating-linear-gradient(90deg, rgba(var(--rouge-rgb),.85) 0 24px, transparent 24px 46px),
    var(--paper-2);
  background-size:100% 100%, 100% 100%, 46px 53px, 100% 100%;
}
.sc-case--copro{
  background:
    repeating-linear-gradient(90deg, transparent 0 32%, var(--charbon) 32% 32.6%),
    repeating-linear-gradient(0deg,  transparent 0 36px, var(--trait-2) 36px 37px),
    repeating-linear-gradient(90deg, transparent 0 30px, var(--trait-2) 30px 31px),
    repeating-linear-gradient(90deg, rgba(var(--rouge-rgb),.85) 0 15px, transparent 15px 30px),
    var(--paper-2);
  background-size:100% 100%, 100% 100%, 100% 100%, 30px 37px, 100% 100%;
}

/* ══ AVANT / APRÈS ═════════════════════════════════════ */
.ba__tabs{ display:flex; flex-wrap:wrap; gap:1px; margin-bottom:18px; background:var(--trait); width:max-content; max-width:100% }
.ba__tabs button{
  padding:11px 18px; background:var(--paper-2);
  font-size:.79rem; font-weight:600; color:var(--ink-3); transition:.25s;
}
.ba__tabs button:hover{ color:var(--ink); background:var(--paper-3) }
.ba__tabs button.sel{ background:var(--charbon); color:var(--sur-charbon) }

.ba__duo{ display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start }
.ba__frame{
  position:relative; aspect-ratio:1;
  border:1px solid var(--trait-2);
  overflow:hidden; touch-action:pan-y; user-select:none; cursor:ew-resize;
}
.ba__aside{ padding-top:6px }
.ba__aside h3{ text-transform:uppercase; margin-bottom:.9rem }
.ba__after,.ba__before{ position:absolute; inset:0 }
.ba__before{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0) }
.ba__scene{ position:absolute; inset:0; background-size:cover; background-position:center }

.ba__badge{
  position:absolute; top:0; z-index:5; padding:7px 13px;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.ba__badge--b{ left:0; background:var(--charbon); color:var(--sur-charbon) }
.ba__badge--a{ right:0; background:var(--rouge-plein); color:var(--sur-rouge) }

.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); z-index:6;
  width:2px; background:var(--rouge); transform:translateX(-1px); pointer-events:none;
}
.ba__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--rouge); border:2px solid var(--paper-2);
}
.ba__knob svg{ width:19px; height:19px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.ba__range{ position:absolute; inset:0; z-index:7; opacity:0; width:100%; height:100%; cursor:ew-resize; margin:0 }
.ba__cap{ font-size:.92rem; color:var(--ink-2); line-height:1.6; max-width:46ch }

/* Scènes avant/après — en clair : l'avant est terne et sale,
   l'après est net. Deux photos remplacent tout. */
.sc-fenetre--after{
  background-image:
    repeating-linear-gradient(90deg, var(--charbon) 0 5px, transparent 5px 92px),
    repeating-linear-gradient(0deg,  var(--charbon) 0 5px, transparent 5px 108px),
    linear-gradient(148deg,#FFFFFF 0 26%,#CFE6F5 26% 40%,#EAF3F9 40%);
  background-size:92px 108px, 92px 108px, 100% 100%;
}
.sc-fenetre--before{
  background-image:
    radial-gradient(ellipse 32% 24% at 28% 72%, rgba(120,104,58,.34), transparent 76%),
    radial-gradient(ellipse 26% 18% at 70% 32%, rgba(120,104,58,.26), transparent 78%),
    repeating-linear-gradient(90deg, #8C8271 0 6px, transparent 6px 92px),
    repeating-linear-gradient(0deg,  #8C8271 0 6px, transparent 6px 108px),
    linear-gradient(148deg,#D8D4C6 0 28%,#B3B4A8 28% 42%,#C6C4B6 42%);
  background-size:100% 100%, 100% 100%, 92px 108px, 92px 108px, 100% 100%;
  filter:saturate(.6) contrast(.92);
}
.sc-facade--after{
  background-image:
    repeating-linear-gradient(0deg,  var(--trait-3) 0 1.5px, transparent 1.5px 56px),
    repeating-linear-gradient(90deg, var(--trait-3) 0 1.5px, transparent 1.5px 128px),
    linear-gradient(112deg,#EDEAE4 0%,#D6D2CB 34%,#F4F2EC 52%,#DDD9D2 72%,#E8E5DF 100%);
  background-size:128px 56px, 128px 56px, 100% 100%;
}
.sc-facade--before{
  background-image:
    radial-gradient(ellipse 14% 62% at 32% 42%, rgba(74,64,44,.4), transparent 76%),
    radial-gradient(ellipse 9% 70% at 63% 48%, rgba(66,58,40,.34), transparent 78%),
    repeating-linear-gradient(0deg,  rgba(60,54,42,.45) 0 2.5px, transparent 2.5px 56px),
    repeating-linear-gradient(90deg, rgba(60,54,42,.4) 0 2.5px, transparent 2.5px 128px),
    linear-gradient(112deg,#C3BCA9 0%,#A79F8C 34%,#CFC8B6 52%,#A29A87 72%,#B8B09D 100%);
  background-size:100% 100%, 100% 100%, 128px 56px, 128px 56px, 100% 100%;
  filter:saturate(.5) contrast(.9) brightness(.94);
}
.sc-entree--after{
  background-image:
    linear-gradient(90deg, transparent 0 30%, var(--charbon) 30% 31.5%, transparent 31.5% 68.5%, var(--charbon) 68.5% 70%, transparent 70%),
    linear-gradient(0deg,  var(--rouge) 0 5%, transparent 5% 84%, var(--charbon) 84% 86%, transparent 86%),
    linear-gradient(150deg,#FFFFFF 0 30%,#CFE6F5 30% 45%,#EAF3F9 45%);
}
.sc-entree--before{
  background-image:
    radial-gradient(ellipse 22% 16% at 44% 80%, rgba(92,80,54,.42), transparent 76%),
    linear-gradient(90deg, transparent 0 30%, #8A8474 30% 32%, transparent 32% 68%, #8A8474 68% 70%, transparent 70%),
    linear-gradient(0deg,  #7A7364 0 6%, transparent 6% 82%, #96907F 82% 85%, transparent 85%),
    linear-gradient(150deg,#D5D1C3 0 30%,#B6B7AB 30% 47%,#C8C6B8 47%);
  filter:saturate(.5) contrast(.9);
}

/* ══ SERVICES ══════════════════════════════════════════ */
/* La carte vedette se distingue par un cerne rouge, pas par un
   fond charbon : dans une section déjà charbon, un fond charbon
   sur charbon ne se voit plus. Le cerne marche des deux bords. */

/* ══ ATOUTS ════════════════════════════════════════════ */
.atouts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--trait-2); border:1px solid var(--trait-2) }
.atouts > div{ padding:clamp(24px,2.8vw,34px); background:var(--paper-2); transition:background .3s }
.atouts > div:hover{ background:var(--paper-3) }
.atouts b{ display:block; font-size:1.02rem; font-weight:700; letter-spacing:-.028em; margin-bottom:.8rem; text-transform:uppercase }
.atouts p{ font-size:.84rem; color:var(--ink-2); line-height:1.6 }
.atouts i{ display:block; width:52px; height:3px; background:var(--rouge); margin-bottom:1.4rem; transform:scaleX(.5); transform-origin:0 50%; transition:transform .5s var(--ease) }
.atouts > div:hover i{ transform:none }

/* ══ PROCESSUS ═════════════════════════════════════════ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px) }
.steps li{ position:relative; padding-top:26px; border-top:3px solid var(--trait-2) }
.steps li::after{
  content:''; position:absolute; top:-3px; left:0; width:100%; height:3px; background:var(--rouge);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 1s var(--ease) var(--d,0s);
}
.steps li.in::after{ transform:none }
.steps b{ font-size:.78rem; font-weight:700; color:var(--rouge-txt); letter-spacing:.06em }
.steps h3{ margin:1.1rem 0 .7rem; text-transform:uppercase }
.steps p{ font-size:.84rem; color:var(--ink-2); line-height:1.62 }

/* ══ ZONE ══════════════════════════════════════════════ */
.zone{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(30px,5vw,72px); align-items:center }
.zone__list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:2rem }
.zone__list li{
  padding:9px 15px; border:1px solid var(--trait-2);
  font-size:.81rem; font-weight:500; color:var(--ink-2); transition:.25s;
}
.zone__list li:hover{ border-color:var(--charbon); background:var(--charbon); color:var(--sur-charbon) }
.zone__note{ margin-top:1.6rem; font-size:.83rem; color:var(--ink-3); max-width:46ch }

/* Le radar devient une mire de repérage, comme sur un plan de localisation */
.radar{ position:relative; aspect-ratio:1; max-width:400px; margin-inline:auto; display:grid; place-items:center; border:1px solid var(--trait-2); background:var(--paper-2) }
.radar__ring{ position:absolute; border:1px solid var(--trait); border-radius:50% }
.radar__ring:nth-child(1){ inset:6% } .radar__ring:nth-child(2){ inset:20% }
.radar__ring:nth-child(3){ inset:34% } .radar__ring:nth-child(4){ inset:48% }
.radar__sweep{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);
  background-size:32px 32px;
}
.radar__core{ width:11px; height:11px; background:var(--rouge); box-shadow:0 0 0 5px rgba(var(--rouge-rgb),.16) }
.radar__pin{ position:absolute; left:var(--x); top:var(--y); width:7px; height:7px; background:var(--charbon) }
.radar__pin::after{
  content:''; position:absolute; inset:-5px; border:1px solid var(--charbon);
  opacity:0; animation:ping 3.4s var(--ease) infinite;
}
.radar__pin:nth-of-type(2)::after{ animation-delay:.7s }
.radar__pin:nth-of-type(3)::after{ animation-delay:1.4s }
.radar__pin:nth-of-type(4)::after{ animation-delay:2.1s }
.radar__pin:nth-of-type(5)::after{ animation-delay:2.8s }

/* ══ AVIS ══════════════════════════════════════════════ */
.avis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--trait) }
.avis figure{
  display:flex; flex-direction:column; padding:28px 24px;
  background:var(--paper-2); transition:background .3s;
}
.avis figure:hover{ background:var(--paper-3) }
.avis__stars{ display:flex; gap:3px; margin-bottom:1.2rem; color:var(--rouge); font-size:.78rem; letter-spacing:.16em }
.avis blockquote{ font-size:.95rem; line-height:1.58; flex:1; color:var(--ink) }
.avis blockquote::before{ content:'«\00a0' } .avis blockquote::after{ content:'\00a0»' }
.avis figcaption{ margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--trait-2) }
.avis figcaption b{ display:block; font-size:.86rem; font-weight:700 }
.avis figcaption span{ display:block; font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:5px }

/* ══ FAQ ═══════════════════════════════════════════════ */
.faq-wrap{ display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); gap:clamp(28px,5vw,64px); align-items:start }
.faq-wrap .s-head{ margin-bottom:0; position:sticky; top:104px }
.faq{ border-top:2px solid var(--charbon) }
.faq details{ border-bottom:1px solid var(--trait-2) }
.faq summary{
  display:flex; align-items:flex-start; gap:20px; padding:22px 0; cursor:pointer;
  font-size:.99rem; font-weight:600; letter-spacing:-.022em; list-style:none; transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--rouge-txt) }
.faq summary i{ position:relative; flex:none; width:14px; height:14px; margin-top:6px; margin-left:auto; transition:transform .35s var(--ease) }
.faq summary i::before,.faq summary i::after{
  content:''; position:absolute; inset:50% 0 auto; height:2px; background:var(--rouge); transform:translateY(-50%);
}
.faq summary i::after{ inset:0 50% auto; width:2px; height:100%; transform:translateX(-50%) }
.faq details[open] summary i{ transform:rotate(135deg) }
.faq__a p{ padding:0 44px 24px 0; color:var(--ink-2); font-size:.9rem; line-height:1.66; max-width:62ch }

/* ══ CONTACT ═══════════════════════════════════════════ */
.section--book{ background:var(--paper-3); border-top:1px solid var(--trait) }
.book{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(30px,5vw,72px); align-items:start }

.book__direct{ display:grid; gap:1px; background:var(--trait-2); border:1px solid var(--trait-2); align-content:start }
.book__chan{ display:flex; align-items:center; gap:14px; padding:15px 20px; background:var(--paper-2); transition:background .25s }
.book__chan:hover{ background:var(--charbon); color:var(--sur-charbon) }
.book__chan:hover .book__chan-i{ stroke:var(--paper) }
.book__chan:hover i{ color:var(--sur-charbon) }
.book__chan-i{ width:19px; height:19px; flex:none; fill:none; stroke:var(--rouge); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; transition:stroke .25s }
.book__chan b{ display:block; font-size:.88rem; font-weight:600 }
.book__chan i{ display:block; font-style:normal; font-size:.76rem; color:var(--ink-3); margin-top:2px; word-break:break-word; transition:color .25s }

/* Le canal d'appel logé dans la colonne de gauche du formulaire :
   même motif que la section Contact, juste décollé du chapeau. */
.book__direct--aside{ margin-top:clamp(28px,3.4vw,44px); max-width:340px }

.book__addr{ display:block; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--trait-2); font-style:normal }
.book__addr b{ display:block; font-size:.93rem; font-weight:700; margin-top:6px }
.book__addr i{ display:block; font-style:normal; font-size:.85rem; color:var(--ink-2); margin-top:3px }
.book__addr em{ display:block; font-style:normal; font-size:.75rem; color:var(--ink-3); margin-top:9px }
.book__social{ display:none }

.form{ padding:clamp(24px,3vw,38px); border:1.5px solid var(--charbon); background:var(--paper-2) }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:13px }
.field{ display:block; margin-bottom:15px }
.field > span{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px }
.field > span i{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.75 }
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; background:var(--paper);
  border:1px solid var(--trait-2); border-radius:0; font-size:.9rem;
  transition:border-color .2s, background .2s;
}
.field textarea{ resize:vertical; min-height:80px; line-height:1.5; font-family:inherit }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6769' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px; padding-right:36px }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); opacity:.72 }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--rouge); background:var(--paper-2) }
.field input.bad,.field select.bad,.field textarea.bad{ border-color:var(--rouge); border-width:2px }

.form__send{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px }
.form__legal{ margin-top:16px; font-size:.8rem; color:var(--ink-3); line-height:1.5 }
.form__err{ margin-top:13px; font-size:.81rem; font-weight:600; color:var(--rouge-txt) }

/* ══ PIED DE PAGE ══════════════════════════════════════ */
.foot{ background:var(--charbon); padding-top:clamp(44px,5vw,70px) }
.foot{ --ink:#EFEFEC; --ink-2:#C3BFC1; --ink-3:#BEBABC;
       --trait:rgba(255,255,255,.16); --trait-2:rgba(255,255,255,.28);
       --paper:#322F31; --paper-2:#3C393B; --paper-3:#4A4649;
       --rouge-txt:var(--rouge-sur-charbon); color:var(--ink) }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,46px); padding-bottom:clamp(36px,4.5vw,58px) }
.foot__tag{ margin-top:1.2rem; font-size:.81rem; color:var(--ink-3); line-height:1.65 }
.foot__h{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:1.2rem }
.foot__col li{ font-size:.84rem; color:var(--ink-2); padding-block:5px; line-height:1.5 }
.foot__col li b{ font-weight:500; color:var(--ink-3) }
.foot__col a{ transition:color .25s; word-break:break-word } .foot__col a:hover{ color:var(--rouge-txt) }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding-block:20px; border-top:1px solid var(--trait); font-size:.8rem; color:var(--ink-3);
}

/* ══ BARRE MOBILE ══════════════════════════════════════ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:98; display:none;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--trait-2);
  border-top:1px solid var(--charbon);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(102%); transition:transform .45s var(--ease);
}
.dock.up{ transform:none }
.dock__b{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 6px 12px;
  background:var(--paper-2); font-size:.72rem; font-weight:600;
}
.dock__b svg{ width:19px; height:19px; fill:none; stroke:var(--rouge); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round }
.dock__b--gold{ background:var(--rouge-plein); color:var(--sur-rouge) }
.dock__b--gold svg{ stroke:var(--sur-rouge) }

/* ══ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:minmax(0,1fr); gap:38px }
  .hero__stage{ order:-1; max-width:540px }
  .atouts,.svc{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .avis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .res{ grid-template-columns:minmax(0,1fr) }
  .res__left{ padding-right:0; padding-bottom:24px }
  .ba__duo{ grid-template-columns:minmax(0,1fr) }
  .case{ grid-template-columns:minmax(0,1fr) }
  .case__scene{ min-height:180px; border-right:0; border-bottom:1px solid var(--trait-2) }
  .faq-wrap,.book,.zone{ grid-template-columns:minmax(0,1fr) }
  .faq-wrap .s-head{ position:static }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .s-head--split{ grid-template-columns:minmax(0,1fr); align-items:start }
}

@media (max-width:820px){
  .nav__links{ display:none }
  .nav__burger{ display:flex; margin-left:auto }
  .nav__cta .link-phone{ display:none }
  .dock{ display:grid }
  .foot__bar{ padding-bottom:82px }
  .hero__stage{ order:0 }
  .steps,.avis,.atouts,.svc{ grid-template-columns:minmax(0,1fr) }
  .res__meta{ grid-template-columns:minmax(0,1fr) }
  .form__row{ grid-template-columns:1fr }
  .foot__grid{ grid-template-columns:1fr; gap:28px }
  .section{ padding-block:clamp(52px,10vw,80px) }
  .case__num{ gap:20px }
}

@media (max-width:560px){
  .btn--lg{ padding:16px 22px; font-size:.86rem }
  .hero__actions .btn{ flex:1 1 100% }
  /* « Demander une soumission » + le badge, en nowrap, dépassent
     les 280 px de contenu d'un écran de 320. Le badge saute. */
  .res__actions .btn{ flex:1 1 100% }
  .res__actions .btn--plain{ flex:none; margin-inline:auto }
}

@media (max-width:480px){
  .nav{ gap:12px }
  .nav__cta{ display:none }
  .ba__tabs button,.zone__list li{ font-size:.75rem }
  .case__num b{ font-size:1.3rem }
  .case__num{ gap:16px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}

/* La note Google, au-dessus des témoignages. C'est le seul chiffre
   de la page qu'un visiteur peut aller vérifier lui-même en deux
   clics — il mérite d'être gros. */
.note-google{ display:flex; align-items:baseline; gap:12px; margin-top:1.3rem }
.note-google b{ font-size:2rem; font-weight:700; letter-spacing:-.05em; line-height:1 }
.note-google__e{ color:var(--rouge); font-size:.95rem; letter-spacing:.14em }
.note-google i{ font-style:normal; font-size:.82rem; color:var(--ink-3) }

/* ══ LE FORMULAIRE DE DEMANDE ══════════════════════════════ */
.form__hint{ font-size:.84rem; color:var(--ink-3); margin-bottom:1.5rem }
.req{ color:var(--rouge-txt); font-weight:700 }
.field--plan input[type=file]{
  padding:11px 13px; font-size:.82rem; cursor:pointer; background:var(--paper-3);
}
.field--plan input[type=file]::file-selector-button{
  margin-right:12px; padding:7px 13px; border:0; border-radius:0;
  background:var(--charbon); color:var(--sur-charbon);
  font-size:.76rem; font-weight:600; cursor:pointer;
}
.field__note{ display:block; margin-top:7px; font-style:normal; font-size:.75rem; color:var(--ink-3) }
.form__ok{
  margin-top:13px; padding:12px 15px; border:1px solid var(--trait-2);
  background:var(--paper-3); font-size:.85rem; font-weight:500;
}
/* Les liens dans les deux boîtes gardent la couleur du message — c'est le
   soulignement qui dit que c'est cliquable, pas une deuxième teinte. */
.form__ok a, .form__err a{
  color:inherit; font-weight:700; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1.5px;
}
.form__ok a:hover, .form__err a:hover{ text-decoration-thickness:3px }


/* Les heures dans la section « Contactez-nous » */
.book__heures{ margin-top:2rem; border-top:1px solid var(--trait-2) }
.book__heures li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--trait); font-size:.86rem;
}
.book__heures b{ font-weight:600 }
.book__heures span{ color:var(--ink-2) }

/* La barre mobile n'a plus que deux boutons */
.dock{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.dock__b{ font-size:.72rem; text-align:center; line-height:1.25 }

/* L'attribut hidden doit gagner contre les classes qui posent un
   display : sans ça, un champ masqué en JS reste à l'écran. */
[hidden]{ display:none !important }

/* ══ SIGNATURE ORYX ════════════════════════════════════════
   Le pictogramme du fichier est noir sur transparent ; on le
   retourne en blanc pour le pied de page charbon plutôt que de
   maintenir un deuxième fichier. */
.sig{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-3); transition:color .25s }
.sig:hover{ color:var(--sur-charbon) }
.sig__mark{ width:18px; height:auto; flex:none; filter:brightness(0) invert(1); opacity:.7; transition:opacity .25s }
.sig:hover .sig__mark{ opacity:1 }
.sig b{ font-weight:600 }

/* ══ CASE À COCHER ET PIÈGE À ROBOTS ═══════════════════════ */
.coche{ display:flex; align-items:flex-start; gap:11px; margin:-4px 0 18px; cursor:pointer }
.coche input{ flex:none; width:17px; height:17px; margin-top:2px; accent-color:var(--rouge-plein); cursor:pointer }
.coche span{ font-size:.86rem; color:var(--ink-2) }
.coche:hover span{ color:var(--ink) }
/* Le champ que seul un robot remplit : hors de l'écran, hors du
   parcours clavier, hors des lecteurs d'écran. */
.miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }


/* ══════════════════════════════════════════════════════════
   OPTION B — L'ACTUEL POUSSÉ D'UN CRAN
   Même monde : papier, encre charbon, rouge Audy, filets pleins,
   chiffres tabulaires. Ce qui change, c'est la tenue.
   ══════════════════════════════════════════════════════════ */

/* Les surfaces que le navigateur dessine lui-même */
html{ scrollbar-color:var(--ink-3) var(--paper-3) }
body{ caret-color:var(--rouge) }
::selection{ background:var(--rouge-plein); color:var(--sur-rouge) }
:focus-visible{ outline:3px solid var(--rouge); outline-offset:3px }
a{ text-underline-offset:.2em }

/* Un seul moment chorégraphié : le héro qui se pose. Partout
   ailleurs, le contenu est là dès le départ — plus la même
   entrée en fondu sur chaque section. */
.reveal{ opacity:1; transform:none; transition:none }
@media (prefers-reduced-motion:no-preference){
  .hero .reveal{ transform:translateY(14px); transition:transform .9s var(--ease) var(--d,0s) }
  .hero .reveal.in{ transform:none }
}

/* La barre d'avancement : scroll-progress de Magic UI, en CSS */
.avancement{
  position:absolute; left:0; right:0; bottom:-1px; height:3px; z-index:2;
  background:var(--rouge); transform-origin:0 50%; transform:scaleX(var(--p,0)); pointer-events:none;
}

/* ── Le héro ── */
.hero__titre{ position:relative; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); margin-bottom:clamp(24px,3vw,40px) }
.hero h1{ font-size:clamp(2.4rem,5.35vw,5.2rem); letter-spacing:-.04em; line-height:.92 }
.hero__inner{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(32px,5vw,88px); align-items:start }
/* La photo du héro est servie en 1000 px : nette jusqu'à 500 px d'affichage
   sur un écran haute densité. Le cadre reste carré pour que le cartouche
   tienne dans le premier écran. */
.hero__stage{ width:100%; max-width:420px; justify-self:end }
.hero__lead{ font-size:clamp(1.08rem,1.45vw,1.34rem); line-height:1.55; max-width:40ch; color:var(--ink) }

/* Le cartouche : le bloc d'identification d'une feuille de plan */
.cartouche{ position:relative; width:100%; max-width:var(--wrap); margin:clamp(36px,4.4vw,60px) auto 0; padding-inline:var(--pad) }
.cartouche__grille{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2fr);
  border:2px solid var(--charbon); background:var(--paper-2);
}
.cartouche__grille > div{ padding:12px 16px 13px; border-right:1px solid var(--trait-2); min-width:0 }
.cartouche__grille > div:last-child{ border-right:0 }
.cartouche dt{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3) }
.cartouche dd{ margin-top:5px; font-weight:700; font-size:.98rem; line-height:1.3 }
/* Un numéro par ligne : la deuxième ligne se range sous la première. */
.cartouche dd a{ display:block; width:max-content; max-width:100%; text-decoration:underline; text-decoration-thickness:1.5px }
.cartouche dd a:hover{ color:var(--rouge-txt) }
.cartouche__preuves ul{ display:flex; flex-wrap:wrap; gap:2px 22px }
.cartouche__preuves li{ font-size:.98rem; font-weight:500; color:var(--ink-2) }
.cartouche__preuves b{ color:var(--ink); font-weight:700; font-size:1.08rem }


/* ── Le chantier : la photo à sa taille réelle ── */
.case{ grid-template-columns:minmax(0,414px) minmax(0,1fr) }
.case__scene{ min-height:0; aspect-ratio:1; align-self:start }

/* ── Ce qu'on fait : un bordereau des travaux, pas des cartes ── */
.bordereau{ border-top:2px solid var(--ink) }
.poste{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.5fr);
  gap:8px clamp(20px,3vw,48px); align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--trait-2);
}
.poste__nom{ font-size:clamp(1.2rem,1.9vw,1.55rem); text-transform:uppercase; letter-spacing:-.03em; line-height:1.1 }
.poste--vedette .poste__nom{ font-size:clamp(1.55rem,2.7vw,2.15rem) }
.poste__claim{ font-size:.88rem; font-weight:600; color:var(--rouge-txt) }
.poste__claim b{
  display:inline-block; margin-right:8px; padding:3px 7px; vertical-align:2px;
  background:var(--rouge-plein); color:var(--sur-rouge); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
}
.poste__txt{ font-size:.92rem; color:var(--ink-2); line-height:1.6; max-width:60ch }
/* Une photo par poste, en vignette au début de la ligne : leurs photos
   quand elles existent, sinon une illustration sans légende. */
.poste--photo{ grid-template-columns:minmax(0,176px) minmax(0,1fr) minmax(0,1.35fr); grid-template-rows:auto 1fr; align-items:start }
.poste__photo{ grid-row:1 / span 2; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; background:var(--paper-3) }
.poste--photo .poste__nom{ grid-column:2; grid-row:1; align-self:end }
.poste--photo .poste__claim{ grid-column:2; grid-row:2 }
.poste--photo .poste__txt{ grid-column:3; grid-row:1 / span 2; align-self:center }
.case__src{ margin-top:1.1rem; font-size:.84rem; font-weight:600; color:var(--ink-2) }
.case__src a{ text-decoration:underline; text-decoration-color:var(--trait-2); text-decoration-thickness:1px; text-underline-offset:.24em; transition:color .2s, text-decoration-color .2s }
.case__src a:hover{ color:var(--ink); text-decoration-color:var(--ink) }
.cartouche__preuves a{ text-decoration:underline; text-decoration-color:var(--trait-2); text-decoration-thickness:1px; text-underline-offset:.24em; transition:text-decoration-color .2s }
.cartouche__preuves a:hover{ text-decoration-color:var(--ink) }

@media (max-width:1080px){
  .hero__inner{ grid-template-columns:minmax(0,1fr) }
  .hero__stage{ justify-self:start }
  .cartouche__grille{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cartouche__grille > div{ border-bottom:1px solid var(--trait-2) }
  .cartouche__grille > div:nth-child(2n){ border-right:0 }
  .cartouche__preuves{ grid-column:1 / -1; border-bottom:0 !important }
  .case{ grid-template-columns:minmax(0,1fr) }
  .case__scene{ max-width:414px; width:100% }
  .poste{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) }
  .poste__claim{ grid-column:1; grid-row:2 }
  .poste__txt{ grid-column:2; grid-row:1 / span 2 }
  .poste--photo{ grid-template-columns:minmax(0,176px) minmax(0,1fr); grid-template-rows:auto auto 1fr }
  .poste--photo .poste__photo{ grid-row:1 / span 3 }
  .poste--photo .poste__nom{ grid-column:2; grid-row:1 }
  .poste--photo .poste__claim{ grid-column:2; grid-row:2 }
  .poste--photo .poste__txt{ grid-column:2; grid-row:3; align-self:start }
}
@media (max-width:640px){
  .poste,.poste--photo{ grid-template-columns:minmax(0,1fr); grid-template-rows:none }
  .poste__claim,.poste__txt,
  .poste--photo .poste__photo,.poste--photo .poste__nom,.poste--photo .poste__claim,.poste--photo .poste__txt{ grid-column:1; grid-row:auto }
  .poste--photo .poste__photo{ margin-bottom:6px }
}
@media (max-width:400px){
  .cartouche__grille{ grid-template-columns:minmax(0,1fr) }
  .cartouche__grille > div{ border-right:0 }
}

/* Le rouge vif du logo fait 3,1:1 sur le charbon : trop peu pour une
   petite étiquette. La version pâle du rouge, faite pour les fonds
   foncés, passe à 6:1. */
.stage__tag-k{ color:var(--rouge-sur-charbon) }

/* Le comparateur à la taille des photos : 414 px, pas 520 agrandis.
   Sous 1080 px, il s'empile comme avant. */
@media (min-width:1081px){ .ba__duo{ grid-template-columns:minmax(0,414px) minmax(0,1fr) } }
@media (max-width:1080px){ .ba__frame{ max-width:414px; width:100% } }
@media (max-width:600px){ .cartouche__grille{ grid-template-columns:repeat(2,minmax(0,1fr)) } .cartouche__preuves{ grid-column:1 / -1 } }