/* =====================================================================
   ÉCRIN — la charte du site www.ecrin-home.com (lot site-v2, 13/10/2026 ;
   lot site-v3, 14/10/2026 : « un écran, une idée » — les tableaux, en fin de feuille)
   Noir chaud et or, Montserrat seule (esprit Gotham, Tesla), capitales serrées
   pour les grands titres. L'or est rare : filets, chiffres, boutons.
   Aucun émoji, aucun dégradé criard, aucun verre dépoli, aucune ressource externe.
   Montserrat est celle de l'app (assets/polices/montserrat.woff2, tenue par
   serveur/tests/test_site_villa.py). Les variables --texte, --texte2, --bord,
   --carte, --or-vif, --bord-or, --serif et --sans servent aussi à la villa
   (assets/energie/villa-site.css) et à la sphère (assets/voix/voix-demo.css).
   ===================================================================== */

@font-face{
  font-family:"Montserrat";
  src:url(polices/montserrat.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --fond:#0a0908;          /* noir chaud */
  --carte:#14110d;         /* surface */
  --carte2:#1c1813;        /* surface relevée */
  --bord:#2b251d;          /* filet */
  --bord-or:rgba(216,171,106,.38);
  --or:#d8ab6a;            /* l'or ÉCRIN */
  --or-vif:#e6c08a;
  --texte:#f3efe8;         /* ivoire : titres */
  --texte2:#c4bcae;        /* gris chaud : corps (10:1 sur le noir) */
  --faible:#9c9386;        /* gris des dates et légendes (6:1) */
  --sur-or:#17120a;        /* l'encre sur l'or */
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--sans);     /* le serif est abandonné depuis le 07/09/2026 */
  --largeur:1200px;
  --marge:24px;
  --ac:var(--or);
  --clair-txt:var(--sur-or);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--fond);color:var(--texte2);
  font-family:var(--sans);font-size:18px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"lnum" 1;
}
img,video,svg{max-width:100%;display:block}
img{height:auto}
/* le texte en or est l'or vif : il garde 4,5:1 même posé sur un halo du fond d'écran */
a{color:var(--or-vif);text-decoration:none}
a:hover{color:#f0d2a4}
p a,li a,dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--bord-or)}
::selection{background:rgba(216,171,106,.32);color:var(--texte)}
.contenu{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}
@media(max-width:680px){:root{--marge:16px}body{font-size:17px}}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{font-family:var(--sans);color:var(--texte);line-height:1.08;text-wrap:balance}
h1{font-size:clamp(36px,6.4vw,76px);font-weight:800;text-transform:uppercase;letter-spacing:-.012em}
h2{font-size:clamp(28px,4vw,48px);font-weight:700;text-transform:uppercase;letter-spacing:-.008em}
h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:0}
p{max-width:68ch;text-wrap:pretty}
strong,b{color:var(--texte);font-weight:600}
.chapeau{font-size:clamp(18px,1.9vw,22px);line-height:1.5;color:var(--texte2);margin-top:22px;max-width:56ch}
.note{font-size:14px;color:var(--faible);margin-top:14px}
.or{color:var(--or)}
.filet{display:block;width:56px;height:1px;background:var(--or);margin-bottom:22px}
.centre{text-align:center}
.centre p,.centre .chapeau{margin-left:auto;margin-right:auto}

/* ---------- En-tête et menu ---------- */
.tete{
  position:sticky;top:0;z-index:50;background:rgba(10,9,8,.94);
  border-bottom:1px solid var(--bord);transition:background .25s,border-color .25s;
}
.tete.compact{background:#0a0908;border-bottom-color:var(--bord-or)}
.barre{max-width:1440px;margin:0 auto;padding:0 var(--marge);height:68px;display:flex;align-items:center;gap:24px;position:relative}
.marque{display:flex;align-items:center;gap:12px;color:var(--texte);flex:none}
.marque img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.marque span{font-size:15px;font-weight:700;letter-spacing:.32em;color:var(--texte)}
.marque:hover span{color:var(--or-vif)}
nav.principal{display:flex;align-items:center;gap:18px;margin-left:auto}
/* Le « :not(.bouton) » n'est pas un ornement : sans lui, ce sélecteur l'emporte sur
   « .bouton » et repeint le texte du bouton en gris sur l'or (relevé du 12/09/2026). */
nav.principal a:not(.bouton){
  color:var(--texte2);font-size:13px;font-weight:500;letter-spacing:.005em;
  white-space:nowrap;transition:color .15s;
}
nav.principal a:not(.bouton):hover,nav.principal a:not(.bouton).actif{color:var(--texte)}
nav.principal a.actif{box-shadow:inset 0 -1px 0 var(--or)}
nav.principal a.bouton{white-space:nowrap;padding:10px 15px;font-size:11.5px;letter-spacing:.05em}
.deroulant{position:relative}
.deroulant .ouvre{
  background:none;border:0;color:var(--texte2);font:500 13px/1 var(--sans);cursor:pointer;
  display:flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 0;
}
.deroulant .ouvre::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.deroulant.actif .ouvre,.deroulant .ouvre:hover{color:var(--texte)}
.deroulant .panneau{
  display:none;position:absolute;top:calc(100% + 18px);left:-18px;min-width:210px;
  background:#0d0b09;border:1px solid var(--bord);padding:10px 0;flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.deroulant .panneau a{display:block;padding:11px 18px}
.deroulant:hover .panneau,.deroulant:focus-within .panneau,.deroulant.ouvert .panneau{display:flex}
#burger{
  display:none;margin-left:auto;width:44px;height:44px;background:none;border:1px solid var(--bord);
  border-radius:6px;cursor:pointer;padding:0;
}
#burger span{display:block;width:18px;height:1.5px;margin:5px auto;background:var(--texte);transition:transform .2s,opacity .2s}
#burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Sous ce point, le menu ne tient plus dans la barre : le burger l'ouvre.
   Le point de bascule vit ICI et nulle part ailleurs : outils/verifier-site.py le lit
   (BASCULE_BURGER) et serveur/tests/test_site_options.py le tient. */
@media(max-width:1300px){
  #burger{display:block}
  nav.principal{
    display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    background:#0b0a08;flex-direction:column;align-items:stretch;
    padding:6px var(--marge) 26px;border-bottom:1px solid var(--bord);
    max-height:calc(100vh - 68px);overflow-y:auto;
  }
  nav.principal.ouvert{display:flex}
}
@media(max-width:1300px){
  nav.principal{
    gap:4px;box-shadow:0 24px 40px rgba(0,0,0,.55);
  }
  nav.principal a:not(.bouton){padding:15px 0;font-size:16px;border-bottom:1px solid var(--bord);box-shadow:none}
  nav.principal a.actif{color:var(--or)}
  .deroulant{border-bottom:1px solid var(--bord)}
  .deroulant .ouvre{padding:15px 0;font-size:16px;color:var(--faible);pointer-events:none}
  .deroulant .ouvre::after{display:none}
  .deroulant .panneau{display:flex;position:static;border:0;box-shadow:none;background:none;padding:0 0 8px 16px;min-width:0}
  .deroulant .panneau a{padding:11px 0;border-bottom:0 !important}
  nav.principal a.bouton{margin-top:20px;text-align:center;padding:15px 20px;font-size:13px}
}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--or);color:var(--sur-or);border:1px solid var(--or);border-radius:4px;
  font:600 13px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  padding:16px 26px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-decoration:none;
}
.bouton:hover{background:var(--or-vif);border-color:var(--or-vif);color:var(--sur-or)}
.bouton.second{background:transparent;color:var(--texte);border-color:rgba(243,239,232,.38)}
.bouton.second:hover{border-color:var(--texte);color:var(--texte)}
.boutons{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.centre .boutons{justify-content:center}
.lien-suite{display:inline-block;margin-top:22px;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--bord-or)}

/* ---------- Le héros de l'accueil ---------- */
.heros{position:relative;overflow:hidden}
.heros .contenu{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;min-height:calc(100vh - 68px);padding-top:64px;padding-bottom:64px}
.heros h1{max-width:12ch}
.heros .chapeau{max-width:42ch}
.heros-visuel{display:flex;justify-content:center}
@media(max-width:980px){
  .heros .contenu{grid-template-columns:1fr;min-height:0;padding-top:48px;gap:44px}
}

/* le cadre de téléphone : un rectangle arrondi, une encoche sobre, aucun dessin de marque */
.telephone{
  position:relative;width:min(330px,78vw);aspect-ratio:390/844;border-radius:46px;
  border:11px solid #1b1814;background:#000;overflow:hidden;
  box-shadow:0 0 0 1px #3a332a,0 40px 90px rgba(0,0,0,.6);
}
.telephone::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:12px;background:#000;z-index:3}
.telephone video,.telephone img,.telephone .ecran{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.telephone.petit{width:min(260px,70vw);border-width:9px;border-radius:38px}
.tablette{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:26px;border:12px solid #1b1814;background:#000;overflow:hidden;
  box-shadow:0 0 0 1px #3a332a,0 30px 70px rgba(0,0,0,.55);
}
.tablette img{width:100%;height:100%;object-fit:cover}
.tele{position:relative;width:100%;aspect-ratio:16/9;border:8px solid #15120f;background:#000;box-shadow:0 0 0 1px #3a332a,0 30px 70px rgba(0,0,0,.55)}
.tele img{width:100%;height:100%;object-fit:cover}

/* ---------- Bandeau-titre des pages intérieures ---------- */
.tete-page{position:relative;overflow:hidden;padding:120px 0 64px;border-bottom:1px solid var(--bord)}
.tete-page.sobre{padding:96px 0 56px}
.tete-page .fond{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.tete-page .voile{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,9,8,.95) 30%,rgba(10,9,8,.55) 70%,rgba(10,9,8,.3))}
.tete-page .contenu{position:relative;z-index:2}
.tete-page h1{max-width:16ch}
@media(max-width:680px){.tete-page{padding:72px 0 44px}.tete-page.sobre{padding:60px 0 40px}}

/* ---------- Sections ---------- */
section{padding:112px 0}
section + section{border-top:1px solid var(--bord)}
.section-tete{max-width:780px;margin-bottom:56px}
.section-tete.centre{margin-left:auto;margin-right:auto}
.section-tete p{margin-top:18px}
@media(max-width:680px){section{padding:72px 0}.section-tete{margin-bottom:40px}}

/* deux colonnes : un visuel, un texte */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.duo.inverse > :first-child{order:2}
.duo .visuel img{border:1px solid var(--bord);border-radius:6px;width:100%}
.duo .visuel.cadre{display:flex;justify-content:center}
.duo .visuel.cadre img{border:0;border-radius:0}
@media(max-width:980px){.duo{grid-template-columns:1fr;gap:44px}.duo.inverse > :first-child{order:0}}

/* une liste à filets : un titre court, une phrase */
.points{list-style:none;margin-top:28px;border-top:1px solid var(--bord)}
.points li{padding:16px 0;border-bottom:1px solid var(--bord);font-size:16px}
.points li strong{display:block;margin-bottom:2px}

/* une grille à filets (pas des cartes) */
.grille{display:grid;gap:0 40px;grid-template-columns:repeat(3,1fr)}
.grille.deux{grid-template-columns:repeat(2,1fr)}
.grille.quatre{grid-template-columns:repeat(4,1fr)}
.grille > *{padding:30px 0 34px;border-top:1px solid var(--bord)}
.grille h3{margin:14px 0 8px}
.grille p{font-size:15.5px}
.grille .ico{width:26px;height:26px;color:var(--or)}
@media(max-width:980px){.grille,.grille.quatre{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grille,.grille.deux,.grille.quatre{grid-template-columns:1fr}}

.ico{width:24px;height:24px;color:var(--or);flex:none}
.ico.petit{width:16px;height:16px}

/* ---------- Accueil : les domaines (généré) ---------- */
.domaines{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bord);border-left:1px solid var(--bord)}
.domaines li{border-right:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.domaines a{display:flex;flex-direction:column;gap:6px;height:100%;padding:28px 26px 30px;color:var(--texte2);text-decoration:none;transition:background .2s}
.domaines a:hover{background:var(--carte)}
.domaines .ico{width:28px;height:28px;margin-bottom:12px}
.domaines .d-nom{font-size:18px;font-weight:600;color:var(--texte)}
.domaines .d-compte{font-size:13px;font-weight:600;color:var(--or-vif);letter-spacing:.04em}
.domaines .d-exemples{font-size:14.5px;line-height:1.5;margin-top:6px}
@media(max-width:980px){.domaines{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.domaines{grid-template-columns:1fr}.domaines a{padding:22px 4px 24px 18px}}

/* ---------- Accueil : nouveau ce mois-ci (généré) ---------- */
.nouveau{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.nouveau li{border-top:1px solid var(--or);padding-top:22px}
.nouveau time{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--or-vif)}
.nouveau h3{margin:10px 0 8px}
.nouveau p{font-size:15.5px}
.nouveau a{display:inline-block;margin-top:12px;font-size:14px}
@media(max-width:860px){.nouveau{grid-template-columns:1fr;gap:34px}}

/* ---------- La preuve : quatre chiffres vrais (généré) ---------- */
.preuve{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
.preuve div{display:flex;flex-direction:column-reverse;justify-content:flex-end;border-top:1px solid var(--bord);padding-top:24px}
.preuve dd{font-size:clamp(40px,4.6vw,60px);font-weight:300;color:var(--or);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preuve dt{font-size:14.5px;margin-top:12px;max-width:24ch}
@media(max-width:860px){.preuve{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:420px){.preuve{grid-template-columns:1fr}}

/* ---------- Compatibilités (généré) ---------- */
.compatibles{list-style:none;columns:3;column-gap:40px;border-top:1px solid var(--bord);padding-top:22px}
.compatibles li{break-inside:avoid;padding:9px 0;font-size:15px}
.compatibles strong{display:block;font-size:16px}
@media(max-width:860px){.compatibles{columns:2}}
@media(max-width:520px){.compatibles{columns:1}}

/* ---------- Le catalogue (généré) ---------- */
.filtres-cadre{position:sticky;top:68px;z-index:20;background:rgba(10,9,8,.97);border-bottom:1px solid var(--bord)}
.filtres{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtres::-webkit-scrollbar{display:none}
.filtres a{
  flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--bord);border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--texte2);white-space:nowrap;text-decoration:none;
}
.filtres a span{font-size:12px;color:var(--faible)}
.filtres a:hover{border-color:var(--bord-or);color:var(--texte)}
.filtres a[aria-current="true"]{border-color:var(--or);color:var(--texte)}
.catalogue{padding-top:24px;padding-bottom:40px}
.domaine{padding:64px 0 24px;scroll-margin-top:140px}
.domaine + .domaine{border-top:1px solid var(--bord)}
.d-tete{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline;margin-bottom:28px}
.d-tete .ico{width:30px;height:30px;grid-row:span 2;align-self:start;margin-top:4px}
.d-tete h2{font-size:clamp(24px,3vw,34px)}
.d-tete p{grid-column:2;font-size:16px}
.d-tete .d-compte{font-size:13px;font-weight:600;color:var(--or-vif);letter-spacing:.04em}
.d-tete .d-lien{grid-column:2;font-size:14px;margin-top:4px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bord-or)}
.fonctions{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.fonctions li{padding:20px 0 22px;border-top:1px solid var(--bord);scroll-margin-top:140px}
.fonctions li:target{background:linear-gradient(90deg,rgba(216,171,106,.08),transparent)}
.fonctions h3{font-size:17.5px;margin-bottom:6px}
.fonctions p{font-size:15.5px}
.fonctions .depuis{font-size:13px;color:var(--faible);margin-top:8px}
.fonctions li.avec-visuel{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
.fonctions li.avec-visuel img{border:1px solid var(--bord);border-radius:4px;aspect-ratio:3/4;object-fit:cover;object-position:top;width:100%}
.pastille{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 11px;border:1px solid var(--bord-or);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--or)}
.pastille.bientot{border-color:var(--bord);color:var(--texte2)}
.domaine[hidden]{display:none}
@media(max-width:860px){.fonctions{grid-template-columns:1fr}.fonctions li.avec-visuel{grid-template-columns:88px 1fr;gap:16px}}

/* ---------- Les nouveautés (généré) ---------- */
.journal{padding-top:24px;padding-bottom:40px}
.mois{padding:56px 0 8px}
.mois + .mois{border-top:1px solid var(--bord)}
.mois h2{font-size:clamp(24px,3vw,34px);margin-bottom:24px}
.nouveautes{list-style:none}
.nouveautes li{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--bord)}
.nouveautes time{font-size:14px;font-weight:600;color:var(--or-vif);padding-top:2px}
.nouveautes h3{font-size:18px;margin-bottom:6px}
.nouveautes p{font-size:15.5px}
.nouveautes a{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--faible);text-decoration:none}
.nouveautes a:hover{color:var(--or)}
.mois.avant p{font-size:16px}
@media(max-width:600px){.nouveautes li{grid-template-columns:1fr;gap:6px}}

/* ---------- Appel de fin ---------- */
.appel{text-align:center}
.appel p{margin:18px auto 0}
.appel .boutons{justify-content:center}
.appel .tel{margin-top:26px;font-size:15px;color:var(--texte2)}
.appel .tel a{color:var(--texte);font-weight:600;text-decoration:none}

/* ---------- Démarcation : le tableau des trois approches ---------- */
.tableau-cadre{overflow-x:auto;border-top:1px solid var(--bord);-webkit-overflow-scrolling:touch}
table.comparer{width:100%;border-collapse:collapse;min-width:720px;font-size:15px}
table.comparer th,table.comparer td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-bottom:1px solid var(--bord)}
table.comparer thead th{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--faible);padding-top:20px}
table.comparer thead th:last-child,table.comparer td:last-child{color:var(--texte)}
table.comparer thead th:last-child{color:var(--or)}
table.comparer tbody th{font-weight:600;color:var(--texte);width:24%}
table.comparer td{color:var(--texte2);width:25%}

/* ---------- Questions (FAQ) ---------- */
.questions{border-top:1px solid var(--bord)}
details{border-bottom:1px solid var(--bord)}
details summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-size:17px;font-weight:600;color:var(--texte);
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:6px;top:30px;width:9px;height:9px;border-right:1.5px solid var(--or);border-bottom:1.5px solid var(--or);transform:rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg);top:34px}
details > *:not(summary){padding-bottom:20px;font-size:16px}
details ul{margin:0 0 18px 20px}
.questions h2{font-size:clamp(20px,2.4vw,26px);margin:56px 0 10px}

/* ---------- Formulaire ---------- */
.formulaire{max-width:680px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.champ{margin-bottom:20px}
.champ.large{grid-column:1/-1}
.champ label{display:block;font-size:14px;font-weight:500;color:var(--texte);margin-bottom:8px}
.champ label span{color:var(--faible);font-weight:400}
.champ input,.champ select,.champ textarea{
  width:100%;background:var(--carte);border:1px solid #3a332a;color:var(--texte);
  border-radius:4px;padding:14px 16px;font:16px var(--sans);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(216,171,106,.18)}
.champ textarea{min-height:150px;resize:vertical}
.pot-de-miel{position:absolute;left:-9999px;opacity:0}
@media(max-width:600px){.champs{grid-template-columns:1fr}}
.coordonnees{list-style:none;border-top:1px solid var(--bord)}
.coordonnees li{padding:18px 0;border-bottom:1px solid var(--bord)}
.coordonnees span{display:block;font-size:13px;color:var(--faible);margin-bottom:4px}
.coordonnees a{font-size:19px;font-weight:600;color:var(--texte);text-decoration:none}

/* ---------- Texte long (mentions, confidentialité) ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin:56px 0 16px}
.prose h3{margin:30px 0 8px}
.prose p,.prose li{font-size:16.5px;margin-bottom:12px}
.prose ul{margin:0 0 14px 22px}

/* ---------- Prix des options ---------- */
.offre{display:flex;flex-direction:column;gap:16px;padding:34px 0;border-top:1px solid var(--bord)}
.offre h2{font-size:clamp(26px,3vw,34px)}
.offre .points{margin-top:0}
.offre .bouton{align-self:flex-start;margin-top:auto}
.prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.prix .montant{font-size:52px;font-weight:300;color:var(--or);line-height:1;letter-spacing:-.02em}
.prix .unite{font-size:14px;color:var(--texte2)}
.encart-prix{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;border:1px solid var(--bord-or);border-radius:6px;padding:26px 28px;margin-top:36px}
.encart-prix .note{margin-top:8px;max-width:520px}
.etapes{list-style:none;counter-reset:etape;display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
.etapes.trois{grid-template-columns:repeat(3,1fr)}
.etapes li{counter-increment:etape;border-top:1px solid var(--bord);padding-top:22px}
.etapes li::before{content:counter(etape);display:block;font-size:34px;font-weight:300;color:var(--or);line-height:1;margin-bottom:14px}
.etapes h3{font-size:18px;margin-bottom:6px}
.etapes p{font-size:15.5px}
@media(max-width:980px){.etapes{grid-template-columns:repeat(2,1fr);gap:28px 32px}}
@media(max-width:680px){.etapes,.etapes.trois{grid-template-columns:1fr}}

/* ---------- Scènes animées (une journée, l'alerte, la piscine) ---------- */
.scene{position:relative}
.scene-legende{display:flex;align-items:baseline;gap:16px;margin-top:18px;min-height:3.2em}
.scene-legende .heure{font-size:28px;font-weight:300;color:var(--or);font-variant-numeric:tabular-nums;flex:none}
.scene-legende p{font-size:15.5px}
.scene-commandes{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.scene-commandes button{
  background:none;border:1px solid var(--bord);color:var(--texte2);border-radius:999px;
  padding:7px 13px;font:500 13px var(--sans);cursor:pointer;
}
.scene-commandes button[aria-pressed="true"]{border-color:var(--or);color:var(--texte)}
.scene-commandes .pause{border-color:var(--bord-or);color:var(--or)}

/* ---------- Pied de page ---------- */
.pied{position:relative;border-top:1px solid var(--bord);background:#080706}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:72px 0 44px}
.pied-nom{font-size:16px;font-weight:700;letter-spacing:.32em;color:var(--texte);margin-bottom:14px}
.pied-marque p{font-size:15px}
.pied-contact{margin-top:18px;line-height:1.9}
.pied-contact a{color:var(--texte);text-decoration:none;font-weight:500}
.pied h2{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:none;color:var(--texte);margin-bottom:16px}
.pied ul{list-style:none}
.pied li{margin-bottom:10px}
.pied ul a{color:var(--texte2);font-size:14.5px;text-decoration:none}
.pied ul a:hover{color:var(--texte)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;border-top:1px solid var(--bord);padding:22px 0 30px;font-size:13px;color:var(--faible)}
.compteur{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:980px){.pied-grille{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied-grille{grid-template-columns:1fr;gap:32px;padding-top:56px}}

/* ---------- Accessibilité ---------- */
.evitement{position:absolute;left:-9999px;top:0;z-index:100;background:var(--or);color:var(--sur-or);padding:12px 20px;font-size:14px;font-weight:600}
.evitement:focus{left:0}
:target{scroll-margin-top:96px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,video:focus-visible{
  outline:2px solid var(--or);outline-offset:3px;border-radius:2px;
}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Le fond d'écran ÉCRIN (25/09/2026), réservé depuis le lot site-v3 ----------
   Ludovic (25/09) : « le fond d'écran tout noir me dérange » ; l'audit du 14/10 : posé partout,
   il ne marque plus aucun changement de sujet. Depuis le lot site-v3, les halos d'or, les arcs
   gravés du coffret et les constellations du logo (outils/dessiner-fond-site.py) ne parent plus
   que le PREMIER ÉCRAN d'une page (le héros) et l'APPEL DE FIN : la classe « etoiles »
   (serveur/tests/test_site_rythme.py le tient). Le reste du site est uni : le noir chaud, et un
   tableau sur deux sur le gris chaud le plus sombre de la charte (--carte). Le contraste réel du
   texte sur ce fond se mesure par outils/verifier-site-fond.py. */
:root{--motif-haut:clamp(560px,64vmax,1180px);--motif-bas:clamp(420px,50vmax,900px);--etoiles:.8}
.etoiles{position:relative;isolation:isolate}
.etoiles::before,.etoiles::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.etoiles::before{
  background:
    url(img/fond/fond-ecrin-haut.svg) right top/var(--motif-haut) auto no-repeat,
    url(img/fond/fond-ecrin-bas.svg) left bottom/var(--motif-bas) auto no-repeat,
    radial-gradient(52% 46% at 90% 4%,rgba(216,171,106,.10),transparent 72%),
    radial-gradient(46% 42% at 6% 98%,rgba(216,171,106,.08),transparent 72%),
    linear-gradient(180deg,#110e0a 0%,#0c0a08 45%,#090806 100%);
}
.etoiles::after{
  background:
    url(img/fond/etoiles-ecrin-haut.svg) right top/var(--motif-haut) auto no-repeat,
    url(img/fond/etoiles-ecrin-bas.svg) left bottom/var(--motif-bas) auto no-repeat;
  opacity:var(--etoiles);
}
@media(max-width:680px){:root{--etoiles:.5}}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Impression : le catalogue se pose sur la table d'un client ---------- */
@media print{
  @page{margin:14mm 14mm 16mm}
  :root{--fond:#fff;--carte:#fff;--bord:#c9c2b6;--or:#7a5a22;--texte:#111;--texte2:#2a2723;--faible:#555;--bord-or:#b89a62}
  body{background:#fff;color:#2a2723;font-size:10.5pt;line-height:1.45}
  body::before,body::after{display:none}
  .tete,.pied,.filtres-cadre,.evitement,#burger,.appel,.boutons,.scene-commandes,video,.heros-visuel{display:none !important}
  section{padding:0 !important;border:0 !important}
  .tete-page{padding:0 0 8mm !important;border-bottom:1px solid #c9c2b6}
  .tete-page .fond,.tete-page .voile{display:none}
  h1{font-size:22pt;color:#111}
  h2{font-size:14pt;color:#111}
  .chapeau{font-size:11pt;margin-top:4mm}
  .domaine{padding:7mm 0 0 !important;break-inside:auto}
  .domaine[hidden]{display:block !important}
  .d-tete{margin-bottom:3mm;break-after:avoid}
  .fonctions{grid-template-columns:1fr 1fr;gap:0 8mm}
  .fonctions li{padding:2.6mm 0;break-inside:avoid}
  .fonctions li.avec-visuel{display:block}
  .fonctions li img,.d-image,.domaines img,.nouveau img,.barre-demo,.tableau-visuel,.etoiles::before,.etoiles::after{display:none !important}
  .fonctions h3{font-size:10.5pt}
  .fonctions p{font-size:9.5pt}
  .fonctions .depuis{font-size:8.5pt;margin-top:1mm}
  a{color:inherit;text-decoration:none}
  .note{color:#555}
}

/* ---------- Les scènes : une journée, l'alerte (assets/scenes/scenes.js) ---------- */
.scene-cadre{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.scene-cadre .telephone{flex:none}
@media(max-width:860px){.scene-cadre{grid-template-columns:1fr;gap:32px;justify-items:center}.scene-cadre > div{justify-self:stretch}}
.moment{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.moment.actif,.scene:not(.vivante) .moment:first-of-type{opacity:1}
.moment > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.notif{
  position:absolute;left:8px;right:8px;top:42px;z-index:4;display:grid;grid-template-columns:30px 1fr;gap:1px 10px;align-items:start;
  background:rgba(30,26,21,.97);border:1px solid #3d362c;border-radius:16px;padding:11px 12px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);transform:translateY(-150%);transition:transform .55s cubic-bezier(.2,.8,.2,1) .45s;
}
.moment.actif .notif,.scene:not(.vivante) .moment:first-of-type .notif{transform:none}
.notif img{grid-row:span 3;width:30px;height:30px;border-radius:7px;position:static}
.notif .n-app{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--faible)}
.notif strong{font-size:13px;line-height:1.3}
.notif .n-txt{font-size:12.5px;line-height:1.35;color:var(--texte2)}
.legende-moment{display:flex;gap:16px;align-items:baseline;margin:0;min-height:4.6em;max-width:none}
.legende-moment .heure{font-size:30px;font-weight:300;color:var(--or);flex:none;min-width:3.4em;font-variant-numeric:tabular-nums}
.legende-moment span:last-child{font-size:17px;color:var(--texte)}
.scene-commandes button{min-width:44px;min-height:36px}
.scene-texte{list-style:none;margin-top:22px;border-top:1px solid var(--bord)}
.scene-texte li{padding:12px 0;border-bottom:1px solid var(--bord);font-size:15.5px}
.scene-texte b{color:var(--or);font-weight:600;margin-right:10px}
.scene.vivante .scene-texte{display:none}
.scene:not(.vivante) .scene-commandes,.scene:not(.vivante) .legende-moment{display:none}
.legende-moment[hidden]{display:none}

/* ---------- Accueil et pages : les pièces de mise en page du lot site-v2 ---------- */
.heros-texte .boutons{margin-top:38px}
.heros-note{font-size:14px;color:var(--faible);margin-top:26px}
.heros .telephone{width:min(320px,74vw)}
.heros .telephone video{background:transparent;opacity:0;transition:opacity .4s}
.heros .telephone video.en-lecture{opacity:1}
p.centre{margin-left:auto;margin-right:auto}
.prix-limite{display:block;margin-top:4px;font-size:14px;color:var(--texte)}
.prix-limite b{color:var(--or);font-weight:600}
.lit{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.lit li{border-top:1px solid var(--bord);padding:16px 0 20px;font-size:15px}
.lit strong{display:block;margin-bottom:4px}
@media(max-width:860px){.lit{grid-template-columns:repeat(2,1fr)}}
.duo .texte > p{margin-top:18px}
.scene-cadre figcaption{max-width:560px}
.section-pied{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.ecrans{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0 28px;margin-top:8px}
.ecrans li{border-top:1px solid var(--bord);padding-top:20px}
.ecrans h3{font-size:16px;margin-bottom:6px}
.ecrans p{font-size:14.5px}
@media(max-width:1100px){.ecrans{grid-template-columns:repeat(3,1fr);gap:28px}}
@media(max-width:600px){.ecrans{grid-template-columns:1fr 1fr;gap:24px 20px}}
.appareils{display:flex;align-items:flex-end;justify-content:center;gap:40px;margin-bottom:56px}
.appareils .telephone{width:min(230px,40vw);border-width:8px;border-radius:34px}
.appareils .telephone::before{height:16px;top:7px}
.tablette.portrait{aspect-ratio:3/4}
.tablette.portrait img{object-position:top}
.appareils .tablette{width:min(400px,46vw)}
@media(max-width:680px){.appareils{gap:18px}.appareils .tablette{width:54vw;border-width:7px;border-radius:16px}.appareils .telephone{width:30vw;border-width:5px;border-radius:20px}.appareils .telephone::before{display:none}}
.encadre{border:1px solid var(--bord-or);border-radius:6px;padding:30px 32px}
.encadre h3{margin-bottom:8px}
.liste-simple{list-style:none}
.liste-simple li{padding:10px 0 10px 22px;position:relative;font-size:16px}
.liste-simple li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:1px;background:var(--or)}
.mention-lieux{font-size:15px;color:var(--faible);margin-top:22px}
.capture-legende{font-size:13.5px;color:var(--faible);margin-top:14px;text-align:center}
.plan-acces{display:block;border:1px solid var(--bord);border-radius:6px;overflow:hidden}
.plan-acces img{width:100%}

/* l'écran verrouillé et le film de l'alerte (dessinés : jamais une image de caméra) */
.verrou{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,#2a2218 0%,#0d0b09 55%,#050403 100%)}
.verrou .v-heure{position:absolute;top:110px;left:0;right:0;text-align:center;font-size:62px;font-weight:300;color:var(--texte);letter-spacing:-.02em}
.verrou .v-date{position:absolute;top:92px;left:0;right:0;text-align:center;font-size:14px;color:var(--texte2)}
.verrou .notif{top:240px}
.film{position:absolute;inset:0;background:#070605;display:flex;flex-direction:column}
.film .f-entete{padding:52px 16px 12px;font-size:13px;color:var(--texte2)}
.film .f-entete strong{display:block;font-size:17px;color:var(--texte)}
.film .f-image{position:relative;aspect-ratio:16/9;margin:0 10px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#1c2430 0%,#141a22 45%,#20201b 46%,#151410 100%)}
.film .f-image::before{content:"";position:absolute;left:12%;right:12%;bottom:18%;height:38%;border:2px solid rgba(216,171,106,.35);border-bottom:0;border-radius:4px 4px 0 0}
.film .f-image::after{content:"";position:absolute;left:47%;bottom:18%;width:6%;height:30%;border-radius:40% 40% 4px 4px;background:rgba(243,239,232,.18);box-shadow:0 0 0 2px var(--or)}
.film .f-cartouche{position:absolute;left:8px;top:8px;font-size:10.5px;padding:3px 7px;border-radius:4px;background:rgba(0,0,0,.6);color:var(--texte)}
.film .f-barre{position:relative;height:4px;margin:18px 16px 6px;background:#2b251d;border-radius:2px}
.film .f-barre i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--or);border-radius:2px}
.film .f-barre b{position:absolute;left:26.6%;top:-5px;width:2px;height:14px;background:var(--texte)}
.moment.actif .film .f-barre i{animation:lecture 5s linear forwards}
@keyframes lecture{to{width:100%}}
.film .f-legende{display:flex;justify-content:space-between;padding:0 16px;font-size:11.5px;color:var(--faible)}
.film .f-actions{display:flex;gap:8px;padding:18px 16px}
.film .f-actions span{flex:1;text-align:center;padding:10px 0;border:1px solid #3a332a;border-radius:10px;font-size:12px;color:var(--texte2)}

/* le graphique de la piscine (courbes, jamais des barres) */
.piscine{border:1px solid var(--bord);border-radius:6px;padding:26px 26px 20px;background:rgba(20,17,13,.6)}
.piscine-tete{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.piscine-tete h3{font-size:18px}
.piscine-tete p{font-size:14px;color:var(--faible)}
.piscine-chiffres{display:flex;gap:28px}
.piscine-chiffres div{text-align:right}
.piscine-chiffres b{display:block;font-size:30px;font-weight:300;color:var(--or);line-height:1.1}
.piscine-chiffres span{font-size:12.5px;color:var(--faible)}
.piscine svg{width:100%;height:auto;margin-top:18px;overflow:visible}
.piscine .p-trait{fill:none;stroke:var(--or);stroke-width:2.2;stroke-linecap:round}
.piscine .p-aire{fill:url(#p-degrade);stroke:none}
.piscine .p-grille{stroke:var(--bord);stroke-width:1}
.p-axe{display:flex;justify-content:space-between;font-size:12px;color:var(--faible);margin-top:6px}
.piscine .scene-commandes{margin-top:18px}
.piscine:not(.vivante) .scene-commandes{display:none}

/* =====================================================================
   LOT SITE-V3 (14/10/2026) — « UN ÉCRAN, UNE IDÉE »
   Chaque point fort a son TABLEAU : une section de pleine hauteur (85 % de la fenêtre sur
   ordinateur, la hauteur de son contenu sur téléphone), une phrase en capitales avec un mot
   en or, une phrase dessous, un grand écran réel de l'app dans un cadre d'appareil, trois
   fonctions qui renvoient au catalogue. Les visuels alternent gauche et droite ; un tableau
   sur deux est posé sur le gris chaud le plus sombre de la charte (--carte). Jamais trois
   colonnes de texte dans un tableau. Règles tenues par serveur/tests/test_site_rythme.py.
   ===================================================================== */
:root{--uni:var(--carte)}
main > section{border-top:0}
main > section + section:not(.uni):not(.etoiles){border-top:1px solid var(--bord)}
main > section.uni + section:not(.uni){border-top:0}

/* ---------- Le héros ---------- */
.heros .heros-grille{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"titre visuel" "texte visuel";
  column-gap:64px;align-items:end;min-height:calc(100vh - 68px);padding-top:56px;padding-bottom:56px;
}
.heros h1{grid-area:titre;max-width:11ch;align-self:end}
.heros .heros-texte{grid-area:texte;align-self:start}
.heros .heros-visuel{grid-area:visuel;align-self:center;display:flex;justify-content:center}
.heros .chapeau{max-width:40ch}
.heros .telephone{width:auto;height:min(76vh,780px);max-width:100%}
@media(max-width:980px){
  .heros .heros-grille{grid-template-columns:1fr;grid-template-areas:"titre" "visuel" "texte";min-height:0;
    padding-top:22px;padding-bottom:48px;row-gap:22px;align-items:start}
  .heros h1{font-size:clamp(34px,10vw,56px);max-width:none}
  .heros .telephone{height:55vh;height:55svh;width:auto;max-width:86vw;border-width:9px;border-radius:38px}
  .heros .chapeau{margin-top:0}
  .heros .boutons{margin-top:24px}
}
@media(max-width:980px) and (max-height:600px){ .heros .telephone{height:72vh} }
/* le bouton de lecture du film : il paraît si le film ne part pas tout seul (mode économie
   d'énergie de l'iPhone, données réduites, mouvement réduit) — un toucher le lance */
.lecture{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;display:inline-flex;align-items:center;gap:10px;
  background:rgba(10,9,8,.82);color:var(--texte);border:1px solid var(--or);border-radius:999px;padding:13px 20px 13px 15px;
  font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
}
.lecture[hidden]{display:none}
.lecture svg{width:22px;height:22px;flex:none;color:var(--or)}
.lecture:hover{background:rgba(10,9,8,.95)}

/* ---------- Le tableau ---------- */
.tableau{min-height:85vh;min-height:85svh;display:flex;align-items:center;padding:96px 0}
.tableau.uni{background:var(--uni)}
.tableau > .contenu{width:100%}
.tableau-grille{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:72px;align-items:center}
.tableau.inverse .tableau-visuel{order:-1}
.tableau h2{font-size:clamp(30px,3.5vw,50px);font-weight:800;line-height:1.04;letter-spacing:-.012em}
.tableau h2 .or,.titre-or{color:var(--or)}
.tableau-phrase{font-size:clamp(18px,1.45vw,21px);line-height:1.55;margin-top:22px;max-width:46ch}
.tableau-fonctions{list-style:none;margin-top:34px;border-top:1px solid var(--bord);max-width:52ch}
.tableau-fonctions li{border-bottom:1px solid var(--bord)}
.tableau-fonctions a{display:block;padding:15px 28px 15px 0;color:var(--texte2);text-decoration:none;position:relative}
.tableau-fonctions a::after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--or);border-top:1.5px solid var(--or);transform:translateY(-50%) rotate(45deg)}
.tableau-fonctions a:hover strong{color:var(--or-vif)}
.tableau-fonctions strong{display:block;color:var(--texte);font-size:18px;font-weight:600;margin-bottom:2px}
.tableau-fonctions span{display:block;font-size:17px;line-height:1.5}
.tableau .lien-suite{margin-top:26px}
.tableau .boutons{margin-top:28px}
.tableau-visuel{display:flex;justify-content:center;align-items:center;gap:28px;min-width:0}
.tableau-visuel .telephone{width:auto;height:min(78vh,760px);max-width:100%}
.tableau-visuel .note,.tableau-visuel .capture-legende{text-align:center}
.badge-ocpp{display:inline-block;margin-bottom:20px;padding:7px 14px;border:1px solid var(--or);border-radius:4px;
  font:700 14px/1 var(--sans);letter-spacing:.12em;color:var(--or);text-transform:uppercase}
.ligne-vraie{font-size:15.5px;color:var(--faible);margin-top:18px;max-width:52ch}
@media(max-width:980px){
  .tableau{min-height:0;padding:64px 0}
  .tableau-grille{grid-template-columns:1fr;gap:40px}
  .tableau.inverse .tableau-visuel{order:0}
  .tableau-visuel{flex-wrap:wrap}
  .tableau-visuel .telephone{height:auto;width:min(78vw,360px)}
}

/* ---------- Les cadres d'appareils (génériques : aucun dessin de marque) ---------- */
.montre{
  position:relative;width:min(190px,42vw);aspect-ratio:416/496;border-radius:30% / 25%;border:9px solid #1b1814;
  background:#000;overflow:hidden;box-shadow:0 0 0 1px #3a332a,0 30px 60px rgba(0,0,0,.55);flex:none
}
.montre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ecran-large{position:relative;width:100%;border:8px solid #1b1814;border-radius:10px;background:#000;overflow:hidden;
  box-shadow:0 0 0 1px #3a332a,0 30px 70px rgba(0,0,0,.55)}
.ecran-large img{width:100%;height:auto;display:block}
.tele{border-radius:6px}
.tele img{object-fit:cover}
.pied-tele{display:block;width:22%;height:10px;margin:0 auto;background:linear-gradient(#15120f,#0d0b09);border-radius:0 0 6px 6px}
/* un téléphone et une montre, côte à côte (la borne) */
.duo-appareils{position:relative;display:flex;align-items:flex-end;justify-content:center}
.duo-appareils .montre{margin-left:-46px;margin-bottom:6%;z-index:2}
@media(max-width:680px){.duo-appareils .montre{width:34vw;margin-left:-30px;border-width:7px}}
/* la villa et le téléphone (l'énergie) */
.villa-et-tel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;width:100%}
.villa-et-tel .telephone{height:min(62vh,600px)}
.villa-et-tel .villa-vivante{min-width:0}
@media(max-width:1180px){.villa-et-tel{grid-template-columns:1fr}.villa-et-tel .telephone{display:none}}
/* les écrans de la maison : la télé et l'écran branché, puis l'iPad, l'iPhone et la montre */
.parc-ecrans{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px;align-items:end;width:100%}
.parc-ecrans figure{margin:0;min-width:0}
.parc-ecrans .p-tele{grid-column:span 3}
.parc-ecrans .p-mur{grid-column:span 3}
.parc-ecrans .p-ipad{grid-column:span 3}
.parc-ecrans .p-iphone{grid-column:span 2;display:flex;justify-content:center}
.parc-ecrans .p-montre{grid-column:span 1;display:flex;justify-content:center;align-self:center}
.parc-ecrans .tablette{aspect-ratio:3/4;border-width:9px;border-radius:20px}
.parc-ecrans .tablette img{object-position:top}
.parc-ecrans .telephone{width:100%;max-width:170px;border-width:7px;border-radius:28px}
.parc-ecrans .telephone::before{height:14px;top:6px}
.parc-ecrans .montre{width:100%;max-width:120px;border-width:6px}
.parc-ecrans figcaption{font-size:14px;color:var(--faible);margin-top:10px;text-align:center}
@media(max-width:680px){
  .parc-ecrans{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 10px}
  .parc-ecrans .p-tele,.parc-ecrans .p-mur{grid-column:span 6}
  .parc-ecrans .p-ipad{grid-column:span 3}
  .parc-ecrans .p-iphone{grid-column:span 2}
  .parc-ecrans .p-montre{grid-column:span 1}
}

/* ---------- Le schéma de la confiance (dessiné au trait, une couleur) ---------- */
.schema{width:100%;height:auto;overflow:visible;color:var(--or)}
.schema .trait{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.schema .fin{stroke-width:1.4}
.schema .tirets{stroke-dasharray:6 7}
.schema .plein{fill:currentColor;stroke:none}
.schema .doux{opacity:.45}
.schema text{fill:var(--texte2);font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:.02em}
.schema text.titre{fill:var(--texte);font-weight:700;font-size:20px;letter-spacing:.08em;text-transform:uppercase}
.schema-haut{display:none}
@media(max-width:680px){.schema-large{display:none}.schema-haut{display:block;max-width:420px;margin:0 auto}}

/* ---------- Et tout le reste : les douze domaines, chacun sa vignette ---------- */
.domaines{grid-template-columns:repeat(4,1fr);border:0;gap:20px}
.domaines li{border:1px solid var(--bord);border-radius:8px;overflow:hidden;background:var(--carte)}
.domaines a{padding:0 0 18px;gap:4px}
.domaines a:hover{background:var(--carte2)}
.domaines img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--bord);margin-bottom:12px}
.domaines .d-nom,.domaines .d-compte,.domaines .d-exemples{padding:0 18px}
.domaines .d-nom{font-size:17px;line-height:1.3}
.domaines .d-exemples{font-size:15px}
.domaines .ico{display:none}
@media(max-width:1100px){.domaines{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.domaines{grid-template-columns:repeat(2,1fr);gap:12px}.domaines .d-exemples{display:none}
  .domaines a{padding-bottom:14px}.domaines .d-nom{font-size:15.5px}.domaines .d-nom,.domaines .d-compte{padding:0 12px}}

/* ---------- Nouveau ce mois-ci : une vignette par nouveauté ---------- */
.nouveau img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--bord);border-radius:6px;margin-bottom:16px}
.nouveau li{border-top:0;padding-top:0}
.nouveau p{font-size:17px}

/* ---------- Pourquoi ÉCRIN : le manifeste ---------- */
.manifeste{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center}
.manifeste-texte p.grand{font-size:clamp(22px,2.2vw,30px);line-height:1.45;color:var(--texte);font-weight:500;max-width:30ch}
.manifeste-texte p.grand + p.grand{margin-top:12px}
.manifeste-texte .ha{margin-top:30px;font-size:18px;max-width:58ch}
.manifeste-visuel img{width:100%;border-radius:8px;border:1px solid var(--bord)}
@media(max-width:980px){.manifeste{grid-template-columns:1fr;gap:36px}.manifeste-visuel{max-width:420px}}

/* ---------- Des chiffres, et les compatibilités en une bande ---------- */
.preuve dt{font-size:16px;max-width:26ch}
.bande{margin-top:64px;padding-top:28px;border-top:1px solid var(--bord);font:600 15px/2 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faible);text-align:center;text-wrap:balance}
.bande span{white-space:nowrap}
.bande span + span::before{content:"·";margin:0 .7em;color:var(--bord-or)}
.bande .or{color:var(--or)}
.bande-titre{text-align:center;font-size:14px;color:var(--faible);letter-spacing:.06em;margin-top:40px}

/* ---------- La barre collée du téléphone : « Demander une démonstration » ----------
   Sans JavaScript, c'est un lien en bas de page. Avec, sur un téléphone, elle reste collée en
   bas de l'écran une fois le héros passé ; elle se retire quand le clavier s'ouvre. Jamais sur
   la page Contact (le générateur ne la pose pas). */
.barre-demo{padding:16px var(--marge) 24px;text-align:center;background:#080706}
.barre-demo .bouton{width:100%;max-width:420px}
@media(min-width:681px){.js .barre-demo{display:none}}
@media(max-width:680px){
  .js .barre-demo{position:fixed;left:0;right:0;bottom:0;z-index:60;height:56px;padding:0 var(--marge);display:flex;align-items:center;
    background:rgba(10,9,8,.9);border-top:1px solid var(--bord);transform:translateY(110%);transition:transform .25s ease;
    padding-bottom:env(safe-area-inset-bottom)}
  .js .barre-demo .bouton{padding:11px 16px;max-width:none}
  .js .barre-demo.visible{transform:none}
  .js body.avec-barre{padding-bottom:56px}
}

/* ---------- L'apparition au défilement : un fondu et 12 px, 300 ms, rien d'autre ---------- */
@media(prefers-reduced-motion:no-preference){
  .js .apparait{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
  .js .apparait.vu{opacity:1;transform:none}
}

/* ---------- Le catalogue : une image par domaine, une pastille « Nouveau » ---------- */
.d-tete{grid-template-columns:auto 1fr minmax(0,380px)}
.d-tete .d-image{grid-column:3;grid-row:1 / span 4;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--bord);border-radius:6px}
.pastille.nouveau{border-color:var(--or);color:var(--sur-or);background:var(--or)}
.fonctions p{font-size:16.5px}
@media(max-width:860px){.d-tete{grid-template-columns:auto 1fr}.d-tete .d-image{grid-column:1 / -1;grid-row:auto;margin-top:16px}}

/* ---------- Le corps de texte, partout : 17 px au moins ---------- */
.grille p,.points li,.lit li,.etapes p,.ecrans p,.scene-texte li,.compatibles li,.coordonnees li,.prose p,.prose li{font-size:17px}
details > *:not(summary){font-size:17px}
@media(min-width:981px){.points li,.grille p{font-size:17.5px}}

/* ---------- Pourquoi ÉCRIN (comparer) ---------- */
table.comparer{font-size:16px}
table.comparer thead th:nth-child(2){color:var(--texte2)}
.sources{font-size:14px;color:var(--faible);margin-top:18px;max-width:none}
.visuel-comparer{display:flex;justify-content:center;margin:0 0 64px}
.visuel-comparer .tablette{max-width:520px}
.schema .masque{fill:var(--fond)}
.tableau.uni .schema .masque{fill:var(--uni)}
.tableau-grille.large-visuel{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
@media(max-width:980px){.tableau-grille.large-visuel{grid-template-columns:1fr}}
/* une scène (une journée, l'alerte) dans un tableau : le téléphone et sa légende, côte à côte */
.scene-tableau{display:grid;grid-template-columns:auto minmax(0,1fr);gap:36px;align-items:center;width:100%;margin:0}
.scene-tableau .telephone{height:min(76vh,740px)}
.scene-tableau figcaption{max-width:320px}
.scene-tableau .legende-moment{flex-direction:column;gap:4px;min-height:6.4em}
@media(max-width:980px){
  .scene-tableau{grid-template-columns:1fr;justify-items:center;gap:26px}
  .scene-tableau .telephone{height:auto;width:min(78vw,360px)}
  .scene-tableau figcaption{max-width:none;width:100%}
  .scene-tableau .legende-moment{flex-direction:row;gap:14px;min-height:3.4em}
}
#installateur .tableau-grille{align-items:center}
#installateur{padding:112px 0}
/* un visuel de tableau ne déborde jamais : ses enfants peuvent rétrécir sous leur contenu */
.tableau-visuel > *{min-width:0;max-width:100%}
.villa-et-tel,.villa-et-tel > *{min-width:0}
@media(max-width:680px){
  .duo-appareils .telephone{width:62vw}
  .duo-appareils .montre{width:30vw;margin-left:-22px}
}
@media(max-width:680px){
  .parc-ecrans .p-ipad{grid-column:span 3}
  .parc-ecrans .p-iphone{grid-column:span 3}
  .parc-ecrans .p-montre{grid-column:span 6}
  .parc-ecrans .telephone{max-width:140px}
  .parc-ecrans .montre{max-width:110px}
}
.parc-ecrans .p-iphone,.parc-ecrans .p-montre{flex-direction:column;align-items:center}
.schema-haut text{font-size:17px}
.schema-haut text.titre{font-size:18px;letter-spacing:.05em}
.tableau-visuel{flex-direction:column}
.villa-et-tel .telephone{height:min(52vh,500px)}
.villa-et-tel{grid-template-columns:minmax(0,1fr) auto}
/* les écrans de la maison, composés : la télé et l'écran branché, puis l'iPad, l'iPhone, la montre */
.parc-ecrans{grid-template-columns:repeat(12,minmax(0,1fr));gap:26px 16px;align-items:end}
.parc-ecrans .p-tele{grid-column:1 / span 8;grid-row:1}
.parc-ecrans .p-mur{grid-column:9 / span 4;grid-row:1}
.parc-ecrans .p-ipad{grid-column:1 / span 5;grid-row:2}
.parc-ecrans .p-iphone{grid-column:6 / span 4;grid-row:2}
.parc-ecrans .p-montre{grid-column:10 / span 3;grid-row:2;align-self:center}
.parc-ecrans .telephone{max-width:180px}
.parc-ecrans .montre{max-width:130px}
@media(max-width:680px){
  .parc-ecrans{gap:20px 12px}
  .parc-ecrans .p-tele{grid-column:1 / span 12;grid-row:1}
  .parc-ecrans .p-mur{grid-column:1 / span 7;grid-row:2;align-self:center}
  .parc-ecrans .p-montre{grid-column:8 / span 5;grid-row:2}
  .parc-ecrans .p-ipad{grid-column:1 / span 7;grid-row:3}
  .parc-ecrans .p-iphone{grid-column:8 / span 5;grid-row:3}
  .parc-ecrans .telephone{max-width:150px}
  .parc-ecrans .montre{max-width:100px}
}
.parc-ecrans .telephone{height:auto;width:100%}
.domaines .d-exemples{display:none}
.domaines a{padding-bottom:16px}
/* ---------- le rythme, resserré : 11 000 px visés sur ordinateur, 15 000 sur téléphone ---------- */
section{padding:96px 0}
.tableau{padding:80px 0}
.tableau-visuel .telephone,.scene-tableau .telephone{height:min(72vh,700px)}
.manifeste-corps{margin-top:26px}
@media(max-width:980px){
  .heros h1{font-size:clamp(28px,8.4vw,44px)}
}
@media(max-width:680px){
  section{padding:60px 0}
  .tableau{padding:52px 0}
  .tableau h2{font-size:28px}
  .tableau-phrase{font-size:17px;margin-top:16px}
  .tableau-fonctions{margin-top:24px}
  .tableau-fonctions a{padding:11px 26px 11px 0}
  .tableau-fonctions strong{font-size:17px}
  .tableau-grille{gap:32px}
  .tableau-visuel .telephone,.scene-tableau .telephone{width:min(70vw,330px);height:auto}
  .duo-appareils .telephone{width:60vw}
  .nouveau{gap:22px}
  .nouveau li{display:grid;grid-template-columns:118px 1fr;gap:4px 16px;align-items:start}
  .nouveau li > img{grid-row:1 / span 4;margin:4px 0 0}
  .nouveau h3{margin:4px 0 4px;font-size:17px}
  .nouveau p{font-size:16px}
  .manifeste-texte p.grand{font-size:21px}
  .preuve{grid-template-columns:repeat(2,1fr);gap:28px 20px}
  .bande{font-size:13.5px;margin-top:40px}
}
section.heros{padding:0}
.heros .heros-grille{align-content:center}
@media(min-width:981px){.heros .telephone{height:min(74vh,760px)}}

/* ---------- Le premier écran des pages Énergie, Famille, Sécurité : un grand visuel d'emblée ---------- */
.tableau.premier{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);padding:48px 0 64px}
.tableau.premier h1{font-size:clamp(34px,4.6vw,64px);line-height:1.02}
.tableau.premier .chapeau{max-width:44ch}
.premier-tete{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px 64px;align-items:end;margin-bottom:34px}
.premier-tete .chapeau{margin-top:0}
.premier-visuel{width:100%}
.liens-fonctions{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:22px}
.liens-fonctions a{display:inline-block;padding:9px 18px;border:1px solid var(--bord-or);border-radius:999px;color:var(--texte2);
  font-size:16px;font-weight:500;text-decoration:none}
.liens-fonctions a:hover{border-color:var(--or);color:var(--texte)}
@media(max-width:980px){
  .tableau.premier{min-height:0;padding:28px 0 52px}
  .premier-tete{grid-template-columns:1fr;margin-bottom:24px}
}
/* une capture déjà composée (ses cadres sont ceux de l'app) */
.capture-app{width:100%;max-width:600px;height:auto;border-radius:10px}
/* une capture d'Écrin Studio, dans la colonne du texte */
.capture-studio{margin:30px 0 0;max-width:620px}
.capture-studio img{width:100%;height:auto;border:6px solid #1b1814;border-radius:8px;box-shadow:0 0 0 1px #3a332a,0 20px 50px rgba(0,0,0,.5)}
.capture-studio .capture-legende{text-align:left;font-size:15px}
/* deux téléphones côte à côte, le second un peu plus bas : la largeur décide, jamais un rognage */
.duo-telephones{display:flex;justify-content:center;align-items:flex-start;gap:24px;width:100%}
.tableau-visuel .duo-telephones .telephone{flex:1 1 0;min-width:0;max-width:290px;width:auto;height:auto}
.duo-telephones .telephone + .telephone{margin-top:56px}
@media(max-width:680px){
  .duo-telephones{gap:12px}
  .tableau-visuel .duo-telephones .telephone{border-width:6px;border-radius:26px}
  .duo-telephones .telephone + .telephone{margin-top:36px}
  .duo-telephones .telephone::before{height:12px;top:5px}
}
.montre.montre-grande{width:min(300px,64vw);border-width:12px}
/* le trajet d'une détection, de haut en bas */
.schema-detection{max-width:400px;margin:0 auto}
@media(max-width:680px){.schema-detection{max-width:360px}}
/* le visuel prend toujours la grande colonne, à gauche comme à droite */
@media(min-width:981px){
  .tableau.inverse .tableau-grille{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .tableau.inverse .tableau-grille.large-visuel{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
}
/* les écrans composés : chaque appareil garde ses proportions */
.tableau-visuel .parc-ecrans .telephone{height:auto;width:100%}
/* les liens de fin de tableau, sur une ligne quand ils tiennent */
.tableau .section-pied{margin-top:28px}
.tableau .section-pied .lien-suite{margin-top:0}
/* le catalogue : la miniature d'un écran large (Studio, télé, mur) garde sa largeur */
.fonctions li.avec-visuel.large{grid-template-columns:168px 1fr}
.fonctions li.avec-visuel.large img{aspect-ratio:auto}
@media(max-width:860px){.fonctions li.avec-visuel.large{grid-template-columns:120px 1fr}}
/* l'en-tête d'un domaine du catalogue : le titre en haut, la grande capture à droite, sans trou */
@media(min-width:861px){
  .d-tete{grid-template-rows:auto auto auto auto 1fr;align-items:start}
  .d-tete .ico{grid-row:1}
  .d-tete h2{grid-column:2;grid-row:1}
  .d-tete .d-image{grid-row:1 / span 5}
}
/* ---------- Pourquoi ÉCRIN (comparer) : l'Accueil en grand, puis le tableau ---------- */
.tableau-visuel .tablette.portrait{width:auto;height:min(72vh,700px);max-width:100%}
@media(max-width:980px){.tableau-visuel .tablette.portrait{width:100%;height:auto}}
#tableau{padding-top:72px}
/* sur téléphone, chaque ligne du tableau devient une carte : la question, puis les trois réponses */
@media(max-width:680px){
  .tableau-cadre{overflow:visible;border-top:0}
  table.comparer{min-width:0;display:block}
  table.comparer thead{display:none}
  table.comparer tbody,table.comparer tr,table.comparer tbody th,table.comparer td{display:block;width:auto}
  table.comparer tr{border-top:1px solid var(--bord);padding:20px 0 14px}
  table.comparer tbody th{padding:0 0 8px;border:0;font-size:19px}
  table.comparer td{padding:7px 0;border:0;font-size:17px}
  table.comparer td::before{content:attr(data-col);display:block;font:600 12.5px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faible)}
  table.comparer td:last-child::before{color:var(--or)}
}
.domaines-studio{margin-top:22px;font-size:17px;color:var(--texte2)}
/* ---------- le grand visuel, au moins 55 % de la fenêtre sur ordinateur (consigne § 2) ----------
   Un visuel large (un écran d'Écrin Studio, le schéma de la confiance) passe SOUS le texte, sur
   toute la largeur : le titre et la phrase à gauche, les fonctions à droite (deux colonnes). */
@media(min-width:981px){
  .tableau .tableau-grille.pleine,.tableau.inverse .tableau-grille.pleine{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .tableau-grille.pleine .tableau-texte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
  .tableau-grille.pleine .tableau-texte > *{grid-column:1}
  .tableau-grille.pleine .tableau-texte > .tableau-fonctions{grid-column:2;grid-row:1 / span 6;margin-top:6px;max-width:none}
  .tableau.inverse .tableau-grille.pleine .tableau-visuel{order:0}
  .montre.montre-grande{width:auto;height:min(62vh,600px)}
}
/* une capture composée presque carrée : sa largeur décide, plafonnée à la hauteur de l'écran
   (jamais width:auto, qui la laisserait sans taille tant qu'elle n'est pas chargée) */
.capture-app{width:100%;height:auto;max-width:min(100%,76vh,700px)}

/* 20/10/2026 (lot publier-1.0.1) — le bouton officiel d'Apple « Télécharger dans l'App Store »
   (version française, fourni par Apple : jamais redessiné, jamais recoloré) */
.badge-app-store{display:inline-block;line-height:0}
.badge-app-store img{height:46px;width:auto}
.heros-app{margin-top:18px}
.tableau-app{margin:22px 0 4px}