/* ═══════════════════════════════════════════════════════════════════════
   ATI Group · Anwar Tunisie — direction artistique « showroom de nuit »
   Chargé en dernier. N'écrase que ce qui doit changer.

   Principe : nous vendons de la lumière et de la surveillance. Les deux
   vivent la nuit. Le fond devient une halle sombre ; le papier ne
   subsiste que comme surface de documentation (fiches techniques).
   Le vert cesse d'être une teinte décorative : il devient de la lumière
   émise, en deux températures — 4000 K froid, 3000 K chaud — qui sont
   littéralement ce que le catalogue vend.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* halle */
  --void:#080D0B;            /* noir vert, la halle de nuit                */
  --slate:#111A16;           /* surface surélevée dans la halle            */
  --slate-2:#18241F;         /* surface au-dessus de slate                 */

  /* documentation (conservé) */
  --paper:#F2F1EA;
  --card:#FBFAF4;

  /* lumière émise — deux températures, c'est le sujet même du catalogue */
  --beam:#3BDE8B;            /* 4000 K — froid, registre Comelit           */
  --filament:#F0C27B;        /* 3000 K — chaud, contrepoint                */
  --em:#0B7A4A;              /* vert structurel ATI (marque, inchangé)     */
  --em-2:#0FA35C;

  /* filets */
  --hair:rgba(15,31,24,.14);
  --hair-soft:rgba(15,31,24,.07);
  --hair-dark:rgba(242,241,234,.12);

  /* rythme : une seule respiration par section, pas deux qui s'additionnent */
  --sp:clamp(56px,6.4vw,104px);
  --maxw:1320px;

  /* échelle typographique — quarte juste, base 16 */
  --t-xs:12px; --t-s:14px; --t-m:16px; --t-l:21px;
  --t-xl:clamp(26px,2.4vw,34px);
  --t-2xl:clamp(34px,4.2vw,58px);
  --t-3xl:clamp(42px,6.4vw,88px);
}

/* ── 1. TYPOGRAPHIE ──────────────────────────────────────────────────────
   Geist passe en face d'affichage (déjà chargée : zéro octet de plus).
   Cormorant est rétrogradée : elle ne sert plus de papier peint, elle
   ne signe plus qu'un seul endroit — la bande « couple de confiance ».
   Le mono ne décore plus : il ne marque QUE des valeurs mesurées.        */

body{font:400 16px/1.65 var(--sans);letter-spacing:-.005em}

#hero .h-display,
#hero.hero-ws .h-display,
.h-section,
.maison h3,
.hp-card h3{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.03;
}
#hero .h-display,#hero.hero-ws .h-display{font-size:var(--t-3xl)}
.h-section{font-size:var(--t-2xl);margin-top:14px}
.maison h3{font-size:var(--t-xl);letter-spacing:-.028em}
.hp-card h3{font-size:var(--t-l);letter-spacing:-.025em;line-height:1.18;margin:8px 0 10px}

/* l'italique verte sur un seul mot était le tic le plus visible du site :
   on le remplace par un changement de poids + un filet de lumière dessous */
#hero .h-display em,.h-section em,.maison h3 em,.cm h2 em{
  font-style:normal;font-weight:300;color:inherit;opacity:.62;
}
#hero .h-display em{color:var(--beam);opacity:1;font-weight:300}

/* SEULE survivance de Cormorant : la signature du partenariat. */
#comelit .h-section,#comelit .h-section em{
  font-family:var(--disp);font-weight:300;font-size:clamp(38px,5vw,70px);
  letter-spacing:-.005em;line-height:1.05;
}
#comelit .h-section em{font-style:italic;opacity:1;color:var(--beam)}

/* ── 2. LES SURLIGNES ────────────────────────────────────────────────────
   Un label mono capitales au-dessus de CHAQUE titre ne porte aucune
   information : c'est du bruit. On le réduit à un filet + un mot discret. */
.eyebrow{
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  opacity:.72;gap:12px;
}
.eyebrow::before{width:26px}
.side{display:none}                     /* méta « A · B · C » : supprimée */

/* ── 3. RYTHME VERTICAL ──────────────────────────────────────────────────
   Chaque section padded en haut ET en bas : 130 + 130 = 260 px de vide
   entre deux sections. C'est l'origine des bandes mortes. Une seule
   respiration + un filet pour marquer la coupure.                        */
section{padding:var(--sp) 0;position:relative}
section + section{padding-top:var(--sp)}
#secteurs,#gammes,#maisons,#contact{padding-bottom:calc(var(--sp) * .62)}
#maison-ati{padding-top:calc(var(--sp) * .8)}
.sec-head{margin-bottom:clamp(28px,3.2vw,44px);align-items:flex-end}

/* ── 4. LA HALLE ─────────────────────────────────────────────────────────
   Le showroom (« Chaque lieu, ses points de vie ») passe en nocturne :
   la maquette est un plan lumineux, elle se lit sur fond sombre.         */
#maison-ati{background:var(--void);color:var(--paper)}
#maison-ati .h-section{color:var(--paper)}
#maison-ati .h-section em{color:var(--beam);opacity:1}
#maison-ati .eyebrow{color:var(--beam)}
#maison-ati .eyebrow::before{background:var(--beam)}

#maison-ati .env-tabs button{
  background:transparent;border-color:var(--hair-dark);color:rgba(242,241,234,.72);
  font:500 10.5px var(--mono);letter-spacing:.16em;padding:12px 18px;
}
#maison-ati .env-tabs button:hover{border-color:var(--beam);color:var(--beam)}
#maison-ati .env-tabs button.on{background:var(--beam);border-color:var(--beam);color:var(--void)}

/* la scène : fond sombre, le plan devient un tracé lumineux */
#maison-ati .house-stage{background:radial-gradient(70% 90% at 50% 45%,#15221C 0%,var(--void) 78%)}
#maison-ati .house-stage svg{mix-blend-mode:normal}

/* ── 5. LA FICHE PRODUIT ─────────────────────────────────────────────────
   Elle reste en papier : c'est la surface de documentation posée sur
   l'établi. Elle gagne en contraste sur le fond sombre.                  */
#maison-ati .hp-card{
  background:var(--card);backdrop-filter:none;
  border:0;border-top:2px solid var(--em);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  padding:clamp(24px,2.6vw,32px);min-height:0;
}
.hp-card .who{
  font:500 9.5px var(--mono);letter-spacing:.2em;color:var(--mist);
  display:block;
}

/* Les « specs » n'étaient pas une séquence : 01/02/03 était faux.
   On les remet dans leur forme réelle — une ligne de fiche technique. */
.hp-specs{margin:18px 0 0;counter-reset:none}
.hp-specs li{
  counter-increment:none;padding:9px 0;padding-left:0;
  font:400 13.5px/1.45 var(--sans);color:var(--ink);
  border-top:1px solid var(--hair-soft);
  display:flex;gap:14px;align-items:baseline;
}
.hp-specs li::before{
  content:"";position:static;
  flex:0 0 auto;width:5px;height:5px;margin-top:.5em;
  background:var(--em);border-radius:50%;
}
/* toute valeur mesurée passe en mono : le mono = « ceci est un nombre » */
.hp-specs li{font-variant-numeric:tabular-nums}

/* ── 6. LA LÉGENDE ───────────────────────────────────────────────────────
   10 pastilles sur 3 rangées repoussaient la fiche et creusaient le vide
   sous la maquette. Compactées en une rangée défilante.                  */
#maison-ati .hp-legend.on{
  display:flex;flex-wrap:wrap;gap:6px;
}
#maison-ati .hp-legend button{
  background:transparent;border-color:var(--hair-dark);color:rgba(242,241,234,.66);
  font:500 9.5px var(--mono);letter-spacing:.1em;padding:7px 10px;
}
#maison-ati .hp-legend button:hover{border-color:var(--beam);color:var(--beam)}
#maison-ati .hp-legend button.on{background:var(--beam);border-color:var(--beam);color:var(--void)}

/* la scène et la fiche s'alignent en haut : plus de vide sous la maquette */
#maison-ati .house-panel{align-self:start;gap:14px}

/* ── 7. LES SECTEURS ─────────────────────────────────────────────────────
   Quatre cartes identiques avec la même ombre douce = le kit SaaS.
   On les dé-carte : un registre réglé, l'information porte la structure. */
.sect-grid{gap:0;border-top:1px solid var(--hair)}
.sect{
  background:transparent;border:0;box-shadow:none;
  border-right:1px solid var(--hair);
  padding:clamp(24px,2.2vw,30px) clamp(18px,1.8vw,26px) clamp(24px,2.2vw,30px) 0;
  gap:10px;
}
.sect:last-child{border-right:0}
.sect svg{width:26px;height:26px;stroke:var(--em);stroke-width:1.6;opacity:.9}
.sect h3{font-family:var(--sans);font-weight:600;letter-spacing:-.022em;font-size:19px;line-height:1.2}
.sect p{font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ── 8. LA VITRINE ───────────────────────────────────────────────────────
   Un mur plat de 6 colonnes identiques = un déversement de catalogue.
   On lui donne une hiérarchie et un fond de tuile constant, pour que les
   photos (détourées / en situation / brutes) cessent de se contredire.  */
.vitrine{gap:1px;background:var(--hair-soft)}
.vt{
  border:0;box-shadow:none;background:#FFFFFC;padding:10px 10px 4px;
  transition:background .3s,transform .3s;
}
.vt:hover{transform:none;background:#fff;box-shadow:0 12px 30px rgba(15,31,24,.10)}
.vt img{height:150px;object-fit:contain;background:#FAFAF6;padding:6px}
.vt b{font-size:12.5px;font-weight:500;letter-spacing:-.012em}
.vt span{font:500 8.5px var(--mono);letter-spacing:.14em;color:var(--mist)}
.vt-filter button{font:500 10px var(--mono);letter-spacing:.14em;padding:10px 15px}

/* ── 9. LIENS ET BOUTONS ─────────────────────────────────────────────────
   Les flèches « ↓ » et « → » collées au texte du lien sont retirées du
   contenu (voir index.html) : c'est la règle qui bouge, pas un glyphe.  */
.link-line{
  font:500 11px var(--mono);letter-spacing:.12em;
  border-bottom-width:1px;padding-bottom:4px;
  background-image:linear-gradient(var(--em),var(--em));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
}
.btn{font:500 10.5px var(--mono);letter-spacing:.16em;padding:15px 24px;border-radius:0}
.btn-acc{background:var(--em);border-color:var(--em)}
#maison-ati .link-line{color:var(--em)}

/* ── 10. LE HÉROS ────────────────────────────────────────────────────────
   Le lockup ANWAR TUNISIE en 240 px se battait avec le titre. Il redevient
   une signature d'émetteur, pas un deuxième titre.                       */
#hero.hero-ws{background:radial-gradient(88% 74% at 84% 22%,#15352a 0%,var(--void) 64%)}
.ws-anwar{width:clamp(130px,12vw,168px);margin-bottom:clamp(14px,2.2vh,22px);opacity:.96}
#hero.hero-ws .h-display{margin:18px 0 22px}
#hero .lead,.hero-in .lead{font-size:16px;line-height:1.7;color:#BCC6BE;max-width:52ch}
.ws-card{box-shadow:0 22px 50px rgba(0,0,0,.5);padding:7px 7px 9px}
.ws-card img{background:#FAFAF6;object-fit:contain;padding:4px}
.ws-card b{font-size:11.5px;font-weight:500}
.ws-card span{font:500 8px var(--mono);letter-spacing:.14em;color:var(--mist)}

/* ── 11. LA BANDE COMELIT ────────────────────────────────────────────────
   Comelit se présente lui-même en charbon + vert vif. Le dégradé émeraude
   plein cadre ne ressemble ni à eux ni à nous. On repasse en halle.      */
#comelit{
  background:
    radial-gradient(64% 80% at 78% 18%,rgba(59,222,139,.16) 0%,transparent 62%),
    linear-gradient(168deg,#0E1A15 0%,var(--void) 100%);
  color:var(--paper);
}
#comelit .cm p{color:#A9B6AD}
#comelit .cm li{border-bottom-color:var(--hair-dark);font-size:14px}
#comelit .cm li span:last-child,#comelit .cm li b:last-child{
  font:500 10px var(--mono);letter-spacing:.12em;color:var(--filament);
}

/* ── 12. ACCESSIBILITÉ ET SOBRIÉTÉ ───────────────────────────────────────  */
:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
#maison-ati :focus-visible,#comelit :focus-visible{outline-color:var(--beam)}
.grain{opacity:.035}

@media (prefers-reduced-motion:reduce){
  .ws-col{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .scroll-cue i{animation:none}
}

/* ── 13. RESPONSIVE ──────────────────────────────────────────────────────  */
@media (max-width:900px){
  .sect{border-right:0;border-bottom:1px solid var(--hair);padding-right:0}
  .sect:last-child{border-bottom:0}
}
@media (max-width:640px){
  :root{--sp:clamp(44px,9vw,64px)}
  #hero .h-display,#hero.hero-ws .h-display{font-size:clamp(32px,8.6vw,44px)}
  .vt img{height:120px}
}

/* ═══ PASSE 2 ═══════════════════════════════════════════════════════════ */

/* ── 14. LE TITRE DU HÉROS ───────────────────────────────────────────────
   Le titre énumère trois familles : vidéophonie, éclairage LED, sécurité.
   En colorer UNE seule était arbitraire — rien dans la phrase ne justifie
   que ce soit celle-là. On rend le titre d'un seul bloc et on dépense
   l'audace de la page ailleurs : dans la halle de nuit.                  */
#hero .h-display em,#hero.hero-ws .h-display em{
  color:inherit;opacity:1;font-weight:300;font-style:normal;
}

/* ── 15. HIÉRARCHIE DE LA VITRINE ────────────────────────────────────────
   48 tuiles identiques = un déversement de catalogue : l'œil n'a aucun
   point d'entrée. Une référence phare par famille passe en double tuile.
   `dense` recolle les trous quand un filtre masque des produits.         */
.vitrine{grid-auto-flow:dense}
.vt[data-lead]{grid-column:span 2;grid-row:span 2}
.vt[data-lead] img{height:100%;min-height:312px}
.vt[data-lead] b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.vt[data-lead] span{font-size:9px}
.vt[data-lead] figcaption{padding:12px 4px 6px}
.vt{display:flex;flex-direction:column}
.vt img{flex:1 1 auto}

/* ── 16. LOCKUPS ─────────────────────────────────────────────────────────
   Les deux verrous n'ont pas le même rapport (5,1:1 contre 2,8:1) :
   à hauteur égale l'un pèse deux fois l'autre. Hauteurs accordées à l'œil. */
.hp-logo.is-comelit{height:38px}
.hp-logo.is-lighting{height:44px;margin-bottom:10px}
.cm-mark{max-width:min(420px,78%);height:auto}
.mz-logo{max-height:52px;width:auto}

/* ── 17. CONTRASTE SUR LES SURFACES SOMBRES ──────────────────────────────  */
#maison-ati .hp-card p{color:#3A4A41}
#maison-ati .side,#comelit .side{display:none}
#comelit .cm p{color:#B3C0B7}
.hero-foot .tb span,.ws-fam span{color:#96A398}
.scroll-cue{color:#96A398}

/* ── 18. MOBILE ──────────────────────────────────────────────────────────  */
@media (max-width:860px){
  #hero.hero-ws .hero-in{grid-template-columns:1fr}
  .ws-wall{height:min(42vh,340px)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:640px){
  .vitrine{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}
  .vt[data-lead]{grid-column:span 2;grid-row:span 1}
  .vt[data-lead] img{min-height:190px}
  .hp-logo.is-comelit{height:30px}
  .hp-logo.is-lighting{height:36px}
  .ws-anwar{width:clamp(112px,32vw,140px)}
  .btn{padding:14px 18px;font-size:10px;letter-spacing:.12em}
  .hero-cta{gap:10px}
  #maison-ati .hp-legend button{font-size:9px;padding:6px 8px}
}

/* ── 19. LE PLAN DE NUIT ─────────────────────────────────────────────────
   La section est passée en nocturne mais la coupe restait une boîte
   blanche posée dessus : incohérent, ça se lit comme un bug et pas comme
   un choix. On inverse le dessin — le plan devient un tracé lumineux, et
   les zones allumées sont les SEULES sources de lumière de la scène.
   C'est le sujet du site rendu littéral.                                 */
#maison-ati svg linearGradient[id^="sky"] stop:first-child{stop-color:#101B16}
#maison-ati svg linearGradient[id^="sky"] stop:last-child {stop-color:#080D0B}
#maison-ati svg linearGradient[id^="room"] stop:first-child{stop-color:#16211C}
#maison-ati svg linearGradient[id^="room"] stop:last-child {stop-color:#0D1512}

/* traits : le plan se dessine en papier, pas en encre */
#maison-ati .hv-line{stroke:rgba(242,241,234,.80)}
#maison-ati .hv-thin{stroke:rgba(242,241,234,.34);opacity:1}

/* surfaces */
#maison-ati .hv-fill,
#maison-ati .hv-room     {fill:#16211C}
#maison-ati .hv-glass    {fill:#1B2A23}
#maison-ati .hv-soil     {fill:#0B120F}
#maison-ati .hv-dark     {fill:#05_0A08;fill:#050A08}
#maison-ati .hv-person   {fill:rgba(242,241,234,.42)}
#maison-ati svg [fill="#EDEBDF"]{fill:#16211C}
#maison-ati svg [fill="#FFFFFA"]{fill:#1C2C25}
#maison-ati svg [fill="#E3E7DB"]{fill:#131E19}
#maison-ati svg [fill="#DCE1D3"]{fill:#101A16}

/* appareils : boîtiers sombres cerclés de papier */
#maison-ati .hv-dev{fill:#1C2C25;stroke:rgba(242,241,234,.62)}

/* lumière émise — la seule chose qui brille dans la halle */
#maison-ati .hv-led{stroke:var(--beam);opacity:.22}
#maison-ati .hv-cone{fill:var(--filament)}
#maison-ati .hv-pool{fill:var(--filament);opacity:.14}
#maison-ati .zone.on{filter:drop-shadow(0 0 22px rgba(59,222,139,.45))}
#maison-ati .zone.on .hv-led{stroke:var(--beam);opacity:1}
#maison-ati .zone.on .hv-cone{opacity:.30}
#maison-ati .zone.on .hv-room {fill:#1F3329}
#maison-ati .zone.on .hv-glass{fill:#26402F}
#maison-ati .zone.on .hv-dev{fill:#24382D;stroke:var(--beam)}

/* pastilles de survol sur la coupe */
#maison-ati .hs i{background:var(--beam)}

/* ── 20. LA SCÈNE REMPLIT SA RANGÉE ──────────────────────────────────────
   La coupe était plus courte que la fiche : la rangée de grille se calait
   sur la fiche et laissait un trou noir sous le dessin.                  */
#maison-ati .stage3,#maison-ati .env.env-on{height:100%}
#maison-ati .house-stage{height:100%;display:flex;align-items:center;justify-content:center}
#maison-ati .house-stage svg{max-height:100%}

/* ── 21. DEUX SECTIONS SOMBRES QUI SE SUIVENT ────────────────────────────
   Mesuré : la halle et la bande Comelit sont désormais toutes deux
   sombres. Leurs marges s'additionnent (104 + 104) et, sans coupure
   visible, les ~208 px se lisent comme une panne, pas comme une
   respiration. On resserre la jointure et on la marque d'un filet.      */
#maison-ati{padding-bottom:calc(var(--sp) * .5)}
#comelit{padding-top:calc(var(--sp) * .72);border-top:1px solid rgba(242,241,234,.10)}

/* ── 22. LISIBILITÉ DU PLAN ──────────────────────────────────────────────
   Premier rendu trop sourd : le tracé se noyait dans le fond. Le plan
   doit se lire comme un dessin technique rétroéclairé.                  */
#maison-ati .hv-line{stroke:rgba(242,241,234,.94);stroke-width:2.1}
#maison-ati .hv-thin{stroke:rgba(242,241,234,.42)}
#maison-ati .hv-fill,#maison-ati .hv-room{fill:#1B2720}
#maison-ati .hv-glass{fill:#22352C}
#maison-ati svg [fill="#EDEBDF"]{fill:#1B2720}
#maison-ati svg [fill="#FFFFFA"]{fill:#243830}
#maison-ati .hv-dev{fill:#243830;stroke:rgba(242,241,234,.78)}
#maison-ati .hv-led{opacity:.30}

/* ── 23. CIBLES TACTILES ─────────────────────────────────────────────────
   Mesuré au doigt (390 px) : les liens soulignés tombaient à 19 px de
   haut, les pastilles de légende à 26 px, le téléphone à 28 px. WCAG 2.2
   AA (2.5.8) demande 24x24 minimum ; on vise 44 pour ce qui se tape.
   La zone grandit, pas le trait : on garde le dessin.                   */
@media (pointer:coarse){
  .link-line{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0}
  .hp-legend button,.vt-filter button,.env-tabs button{min-height:44px}
  .maison .go,.ws-fam a,a[href^="tel:"],a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .nav-links a{padding-block:12px}
}

/* ═══ PASSE 3 ═══════════════════════════════════════════════════════════ */

/* ── 24. LES QUATRE SECTEURS ─────────────────────────────────────────────
   Quatre colonnes ouvertes, séparées par un filet qui ne ferme rien :
   ça flottait. On en fait un registre fermé en haut et en bas, chaque
   colonne devient une surface cliquable dont l'arête supérieure
   s'allume — cohérent avec le reste du site, où le vert est de la
   lumière et pas une teinte.                                            */
.sect-grid{border-bottom:1px solid var(--hair)}
.sect{
  position:relative;padding:clamp(28px,2.6vw,38px) clamp(20px,2vw,28px);
  transition:background .35s;
}
.sect::before{                       /* l'arête qui s'allume */
  content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
  background:var(--em);transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.sect:hover,.sect:focus-within{background:rgba(11,122,74,.045)}
.sect:hover::before,.sect:focus-within::before{width:100%}

.sect svg{width:30px;height:30px;stroke-width:1.5;margin-bottom:4px}
.sect .eyebrow,.sect > p:first-of-type{opacity:1}
.sect h3{font-size:20px;line-height:1.22;margin-bottom:2px}
.sect p{font-size:14px;line-height:1.62;color:var(--ink-2);max-width:32ch}

/* les pastilles : 18 petits rectangles sur quatre colonnes faisaient du
   bruit. Sans bordure, teintées, elles redeviennent des étiquettes.     */
.sect .chips{gap:6px;margin-top:auto;padding-top:18px}
.sect .chips span{
  border:0;background:rgba(11,122,74,.08);color:var(--em);
  font:500 9.5px var(--mono);letter-spacing:.1em;padding:6px 9px;
}
.sect .link-line{margin-top:16px;align-self:flex-start}

/* ── 25. LE BANDEAU, COUTURE ENTRE DEUX SECTIONS ─────────────────────────
   Mesuré : ~220 px de crème morte sous le bandeau, parce qu'il fermait
   une section qui gardait sa marge basse et que la suivante rajoutait la
   sienne. En pleine largeur et sans marge, il fait la jointure.         */
#secteurs{padding-bottom:0}
.sect-band{
  margin:clamp(44px,5vw,76px) 0 0;background:var(--void);color:var(--paper);
  padding:clamp(30px,3.4vw,48px) 0;
}
.sect-band-in{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;
  justify-content:space-between;
}
.sect-band p{
  font-family:var(--sans);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(22px,2.3vw,32px);line-height:1.18;max-width:20ch;margin:0;
}
.sect-band p em{font-style:normal;font-weight:300;color:inherit;opacity:.7}
.sect-band .acts{display:flex;gap:12px;flex-wrap:wrap}
.sect-band .btn{color:var(--paper);border-color:rgba(242,241,234,.32)}
.sect-band .btn-acc{background:var(--em);border-color:var(--em)}
#gammes{padding-top:var(--sp)}

/* ── 26. LA PHOTO DE L'USINE ─────────────────────────────────────────────  */
.maison figure img{filter:saturate(1.02) contrast(1.02)}

@media (max-width:900px){
  .sect::before{top:auto;bottom:-1px}
  .sect-band-in{flex-direction:column;align-items:flex-start}
  .sect-band p{max-width:none;font-size:clamp(20px,5.4vw,26px)}
}

/* ── 27. ALIGNEMENT DU REGISTRE ──────────────────────────────────────────
   Trois titres sur deux lignes, un sur une seule : les paragraphes
   démarraient à quatre hauteurs différentes. On réserve deux lignes au
   titre pour que le corps de texte parte d'une ligne de base commune.   */
.sect h3{min-height:2.44em;display:flex;align-items:flex-start}
.sect-band p{max-width:26ch}
#gammes{padding-top:calc(var(--sp) * .7)}
@media (max-width:900px){.sect h3{min-height:0;display:block}}

/* ── 27. « DE LA CARTE AU BÂTIMENT » (Option A) ──────────────────────────
   Placée entre la bande Comelit et les trois maisons : c'est exactement
   l'argument de la charnière — la carte sort de Zaghouan, le luminaire
   de la même usine, la pose se fait avec Comelit.

   Deux écarts assumés par rapport à la maquette d'origine :
   1) le titre passe en Geist et non en Cormorant. La serif ne signe plus
      qu'un seul endroit du site, la bande Comelit, juste au-dessus : la
      réutiliser ici userait la signature.
   2) les pistes restent vertes (l'électronique) mais les fenêtres
      s'allument en 3000 K ambré. Dans la maquette tout était d'un seul
      vert ; séparer les deux températures fait dire au dessin ce que le
      groupe vend — on fabrique la carte, elle produit de la lumière.   */
#pont{padding:0}
.pont-frame{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(420px,58vh,660px);
  background:radial-gradient(118% 88% at 76% 42%,#12261d 0%,var(--void) 62%);
  color:var(--paper);
}
.pont-frame svg{position:absolute;inset:0;width:100%;height:100%}
.pont-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(8,13,11,.86) 0%,rgba(8,13,11,.30) 56%,rgba(8,13,11,.04) 100%),
    linear-gradient(0deg,rgba(8,13,11,.66) 0%,transparent 42%);
}
.pont-copy{
  position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;
  padding:clamp(52px,7vw,96px) var(--pad);
}
.pont-copy .eyebrow{color:var(--beam)}
.pont-copy .eyebrow::before{background:var(--beam)}
.pont-h{
  font:600 clamp(32px,5vw,68px)/1.04 var(--sans);
  letter-spacing:-.038em;margin:16px 0 0;max-width:16ch;
}
.pont-h em{font-style:normal;font-weight:300;opacity:.66}
.pont-sub{
  font:300 16px/1.7 var(--sans);color:#B6C2B9;max-width:46ch;margin:20px 0 26px;
}
.pont-copy .link-line{color:var(--beam);border-bottom-color:var(--beam)}

/* le tracé : pistes vertes, cuivre chaud pour les pastilles */
.pt-dots{fill:rgba(242,241,234,.06)}
.pt-tr{fill:none;stroke:var(--beam);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:pt-draw 11s ease-in-out infinite}
.pt-bd{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linejoin:round;opacity:.9;
  stroke-dasharray:1;stroke-dashoffset:1;animation:pt-draw 11s ease-in-out infinite;animation-delay:.9s}
.pt-pad{fill:var(--beam);opacity:0;animation:pt-pop 11s ease-in-out infinite}
.pt-chip{fill:#0F2A1F;stroke:var(--beam);stroke-width:2;opacity:0;
  animation:pt-pop 11s ease-in-out infinite;animation-delay:.4s}
.pt-win{fill:var(--filament);opacity:0;animation:pt-lit 11s ease-in-out infinite}

@keyframes pt-draw{0%{stroke-dashoffset:1;opacity:.9}32%{stroke-dashoffset:0}
  86%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pt-pop{0%,6%{opacity:0}14%,86%{opacity:1}100%{opacity:0}}
@keyframes pt-lit{0%,40%{opacity:0}50%,86%{opacity:.88}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pt-tr,.pt-bd{animation:none;stroke-dashoffset:0}
  .pt-pad,.pt-chip{animation:none;opacity:1}
  .pt-win{animation:none;opacity:.88}
}
@media (max-width:640px){
  .pont-frame{min-height:0}
  .pont-frame svg{opacity:.5}
  .pont-h{font-size:clamp(28px,8vw,38px);max-width:none}
  .pont-sub{font-size:15px}
}

/* 27b. Le bâtiment était tranché à sa base : le cadre est plus large que
   le viewBox (2,8:1 contre 1,8:1), donc « slice » rognait en hauteur.
   Ancrage en bas (xMidYMax) pour garder la ligne de sol, et plus de
   hauteur pour que le bâtiment tienne entier. Ombre renforcée à gauche
   pour que le titre ne se batte pas avec le tracé.                      */
.pont-frame{min-height:clamp(480px,64vh,700px)}
.pont-shade{
  background:
    linear-gradient(100deg,rgba(8,13,11,.93) 0%,rgba(8,13,11,.62) 34%,rgba(8,13,11,.16) 62%,transparent 100%),
    linear-gradient(0deg,rgba(8,13,11,.58) 0%,transparent 38%);
}
.pont-copy{padding-block:clamp(58px,7.5vw,104px)}

/* ── 28. BARRE DES FAMILLES, SANS COMPTEURS ──────────────────────────────
   La deuxième ligne (« 8 produits ») est partie : sans elle les cellules
   restaient calées en haut et la bande sonnait creux. Le nom se centre,
   et la cellule s'allume au survol comme le reste de la navigation.     */
.ws-fam a{
  justify-content:center;min-height:62px;gap:0;
  border-left-color:rgba(242,241,234,.10);
  transition:background .3s,color .3s;
}
.ws-fam a:hover{background:rgba(59,222,139,.07)}
.ws-fam b{font-size:15px;font-weight:500;letter-spacing:-.012em}
@media (max-width:860px){.ws-fam a{min-height:54px}.ws-fam b{font-size:14px}}

/* ── 29. LIENS VERS LES PAGES FAMILLES ───────────────────────────────────
   Les six pages /alarme/, /domotique-knx/… n'avaient aucun lien entrant :
   invisibles pour Google comme pour le visiteur.                          */
.fam-links{margin-top:clamp(18px,2.2vw,28px);font:400 14px/1.8 var(--sans);color:var(--ink-2)}
.fam-links span{color:var(--mist)}
.fam-links a{color:var(--em);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fam-links a:hover{color:var(--em-2)}