/* ============================================================================
   ClicAndPublish : feuille de style de la vitrine.
   FR et EN la PARTAGENT : une seule source, deux copies auraient diverge des la
   premiere retouche.

   DIRECTION « L'ECRAN DANS L'ECRAN » (validee par Philippe le 2026-09-26, skill
   frontend-design). L'audace est en UN seul endroit : le haut de page, ou un vrai
   ecran Philips montre le panneau LED du Mont-Dore, qui affiche le titre. Tout le
   reste est calme : un mur gris, une seule famille (Instrument Sans, en deux
   largeurs), le cyan reserve aux actions, et des filets plutot que des cartes.
   ⚠️ Ecartes a dessein, parce que ce sont les tics d'une page generee : grilles de
   cartes arrondies identiques, emoticones, etiquettes en capitales, un mot du titre
   en couleur, degrades en decor, ombre douce sous chaque bloc, tout centre.
   ========================================================================== */
:root{
  --mur:#e5e7e4;      /* le fond du haut de page : le mur ou l'ecran est accroche */
  --page:#f4f5f3;     /* le fond de la page */
  --clair:#fbfbfa;    /* la seule surface « posee » : la cle V8, la carte */
  --nuit:#1b2124;     /* bandeau, bandes sombres, pied de page (les logos exigent du sombre) */
  --encre:#1b2124;
  --gris:#56626a;     /* texte secondaire : 5,9:1 sur --page */
  --filet:#d3d7d4;
  /* ⚠️ Assez sombre pour du texte BLANC : 5,06:1 (le #12a3b5 de la maquette ne faisait que 3,03:1,
     et le #1abdd0 du site precedent moins encore). Mesure le 2026-09-26. */
  --cyan:#0b7a88;     /* boutons seulement */
  --cyan-d:#09656f;   /* survol : 6,77:1 */
  --cyan-x:#0b6f7c;   /* liens sur fond clair : 5,6:1 sur --page */
  --or:#735a1a;       /* l'option VIP, et rien d'autre (5,2:1 sur le mur ; #8a6d23 ne faisait que 3,9:1) */
  --r:6px;
  --etroit:85%;       /* largeur des titres */
}
*{box-sizing:border-box}
/* 112 px : le bandeau a deux etages fait ~103 px ; une ancre visee passerait dessous. */
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--encre);background:var(--page);font-size:17px;line-height:1.58;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:var(--cyan-x)}
:focus-visible{outline:3px solid var(--cyan-x);outline-offset:2px;border-radius:2px}
/* Sur fond sombre, le contour cyan fonce ne se voyait plus : il passe au cyan clair (mesure au
   clavier le 2026-09-26, bandeau compris). */
.topbar :focus-visible,.final :focus-visible,footer :focus-visible,.lignee :focus-visible{outline-color:#7fe6f2}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-stretch:var(--etroit);text-wrap:balance}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- boutons ---------- */
.btn{display:inline-block;border-radius:var(--r);padding:13px 24px;font-weight:600;text-decoration:none;
  font-size:1rem;border:0;cursor:pointer;font-family:inherit;text-align:center;
  transition:background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cyan);color:#fff}
.btn-primary:hover{background:var(--cyan-d)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff}
.btn-line{background:transparent;color:var(--encre);border:1.5px solid var(--encre)}
.btn-line:hover{background:#fff}

/* ---------- barre haute ----------
   🔑 DEUX ETAGES sur ordinateur (choix de Philippe, 2026-09-26) : logo, langue et connexion
   en haut, le menu ENTIER dessous. Sous 880 px, le menu passe dans un bouton « hamburger »
   (assets/menu.js).
   ⓘ Historique : sur UNE ligne, le bandeau etait au bord de la rupture. « L'IA » devenu
   « Menu Board » l'a fait deborder ; le logo, premier element a ceder, s'ecrasait, et le
   bouton passait sur deux lignes a TOUTES les largeurs d'ordinateur. */
.topbar{position:sticky;top:0;z-index:40;background:var(--nuit)}
/* ⚠️ La marge du HAUT est explicite : `min-height` porterait sur les DEUX etages ensemble, et
   le bouton de connexion toucherait le bord superieur de la barre (vu en ligne le 2026-09-26). */
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;padding-top:10px}
/* Un bandeau SANS menu (page 404) n'a pas de second etage : il lui faut aussi sa marge du bas.
   Une classe et non `:has()`, trop recent pour une partie des navigateurs encore en service. */
.topbar.seule .wrap{padding-bottom:10px}
/* ⚠️ flex-shrink:0 : sans lui le logo est le premier a ceder la place quand la ligne se remplit. */
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:1.1rem;
  text-decoration:none;white-space:nowrap;flex-shrink:0}
.tools{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav{order:3;flex-basis:100%;display:flex;justify-content:center;align-items:center;gap:28px;
  height:42px;margin-top:10px;border-top:1px solid rgba(255,255,255,.09)}
.nav a{color:#c3cccf;text-decoration:none;font-size:.9rem;font-weight:500;white-space:nowrap}
.nav a:hover{color:#fff}
.lang{display:flex;gap:2px;background:rgba(255,255,255,.09);border-radius:999px;padding:3px}
.lang a{color:#cfd8db;text-decoration:none;font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:999px}
.lang a[aria-current]{background:var(--cyan);color:#fff}
/* ⚠️ `white-space:nowrap` n'est pas cosmetique : sans lui le bouton passe sur deux lignes. */
.topbar .btn{padding:9px 18px;font-size:.9rem;white-space:nowrap}

/* Le bouton hamburger : trois traits, qui deviennent une croix menu ouvert. */
.burger{display:none;width:40px;height:38px;padding:0;border:1px solid rgba(255,255,255,.22);
  border-radius:9px;background:transparent;cursor:pointer;flex-direction:column;
  justify-content:center;align-items:center;gap:4px}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#dbe4e6;
  transition:transform .2s,opacity .2s}
.menu-ouvert .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-ouvert .burger span:nth-child(2){opacity:0}
.menu-ouvert .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}

/* ⚠️ Le seuil suit la LARGEUR MESUREE du menu : ses sept entrees demandent ~800 px sur leur
   etage. Tout libelle ajoute ou allonge : re-mesurer. */
@media(max-width:880px){
  html{scroll-padding-top:68px}
  .burger{display:flex}
  .topbar .wrap{padding-top:10px;padding-bottom:10px}
  /* Menu ouvert : un panneau sous le bandeau. `.topbar` est sticky, donc positionne : c'est
     lui qui sert de repere a `position:absolute`. */
  .nav{display:none;position:absolute;top:100%;left:0;right:0;height:auto;flex-direction:column;
    align-items:stretch;gap:0;margin-top:0;padding:6px 0 12px;background:var(--nuit);
    border-top:1px solid rgba(255,255,255,.1);box-shadow:0 16px 32px rgba(0,0,0,.35)}
  .topbar.menu-ouvert .nav{display:flex}
  .nav a{padding:13px 24px;font-size:1rem}
}
/* ⚠️ ET SURTOUT : on ne MASQUE PAS le bouton de connexion sur petit ecran. On le retrecit. */
@media(max-width:560px){
  .topbar .wrap{column-gap:8px;padding-top:9px;padding-bottom:9px}
  .tools{gap:8px}
  .brand{font-size:.95rem}
  .lang a{padding:5px 8px;font-size:.74rem}
  .topbar .btn{padding:8px 11px;font-size:.8rem;border-radius:9px}
  .burger{width:36px;height:34px}
  /* Sur telephone, la premiere rangee ne tenait pas (logo, FR/EN, connexion et hamburger) : le
     choix de la langue passe EN TETE DU MENU ouvert.
     ⚠️ Le z-index est INDISPENSABLE depuis que les boutons precedent le menu dans le HTML (ordre du
     clavier, 2026-09-26) : .lang venant AVANT .nav, le panneau se peignait par-dessus et le choix
     de la langue disparaissait, sans erreur. Vu a l'image, menu ouvert. */
  .lang{display:none}
  .topbar.menu-ouvert .lang{display:flex;position:absolute;top:calc(100% + 14px);left:24px;z-index:2}
  .nav{padding-top:58px}
}

/* ---------- logos ---------- */
/* ⚠️ Les trois logos (ClicAndPublish, CapPilote, CapDisplay) sont dessines pour un FOND
   SOMBRE : leur lettrage comporte du blanc pur. Ne jamais les poser sur le fond clair. */
.brand img{height:28px;width:auto}
@media(max-width:560px){.brand img{height:19px}}
/* ⚠️ APRES la regle de 560 px, sinon elle l'ecrase (meme specificite : la derniere gagne).
   A 320 px : logo 107 + outils 151 + ecart 8 = 266 px, pour 276 disponibles. */
@media(max-width:360px){.brand img{height:16px}}

/* ---------- haut de page : le texte, et l'ecran accroche au mur ---------- */
.hero{background:var(--mur);padding:64px 0 60px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.hero h1{margin:0;font-weight:700;font-size:3.9rem;line-height:1;letter-spacing:-1.2px}
/* Les deux noms portaient une couleur a eux : c'est le premier tic d'une page generee (un mot
   du titre en couleur). Ils gardent leur balise, sans rien changer a la lecture. */
.hero h1 .hl{color:inherit}
.lead{font-size:1.2rem;margin:24px 0 28px;max-width:30em;color:#2c363b}
.lead strong{color:var(--encre)}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-ghost{color:var(--encre);border-color:var(--encre)}
.hero .btn-ghost:hover{background:#fff}
.badges{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px;color:var(--gris);font-size:.93rem}
.badge b{color:var(--encre);font-weight:600}

/* L'ecran : un VRAI Philips 43BDL5050D (photo produit de sa fiche technique, logo d'origine sur
   le cadre). Sa dalle et le fond blanc ont ete rendus transparents ; la photo du Mont-Dore passe
   DESSOUS, a la place exacte de la dalle (reperee au pixel : 837 x 472, soit du 16:9). */
.ecran{margin:0}
.produit{position:relative;filter:drop-shadow(0 22px 26px rgba(20,26,28,.32))}
.produit .cadre{position:relative;width:100%;height:auto;pointer-events:none}
.dalle{position:absolute;left:1.39%;top:2.414%;width:96.987%;height:94.97%;overflow:hidden;background:#000}
.dalle > img{width:100%;height:100%;object-fit:cover}
/* Le titre pose sur la surface LED de la photo. ecran.js projette cette boite (1000 x 600 px
   nominaux) sur les QUATRE coins du panneau, pour suivre sa perspective du bord haut au bord
   bas. Sans script, elle reste posee a plat sur le rectangle approche. */
.led{position:absolute;left:34%;top:26.9%;width:30.3%;height:32.6%;background:#0a1a24;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:1.5% 5%}
.led.projete{left:0;top:0;width:1000px;height:600px;transform-origin:0 0;padding:26px 60px}
.led span{display:block;font-stretch:var(--etroit);font-weight:700;line-height:1;color:#fff;
  text-shadow:0 0 10px rgba(120,230,245,.75);white-space:nowrap}
.led:not(.projete) span{font-size:clamp(8px,1.25vw,16px)}
.led.projete span{font-size:128px;letter-spacing:-1px}
.led span.c{color:#7fe6f2}
.led::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,transparent 55%,rgba(0,0,0,.22) 70%) 0 0/3px 3px}
.led.projete::after{background-size:9px 9px}
.ecran figcaption{margin-top:14px;font-size:.86rem;color:var(--gris);max-width:44em}
@media(max-width:900px){
  .hero{padding:40px 0 44px}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:2.5rem}
  .lead{font-size:1.08rem}
  .led:not(.projete) span{font-size:clamp(8px,2.6vw,14px)}
}

/* ---------- sections ---------- */
section{padding:72px 0}
section.alt{background:var(--mur)}
/* Deux sections grises qui se suivent se fondaient en un seul bloc (vu a l'image) : un filet les separe. */
section.alt + section.alt{border-top:1px solid var(--filet)}
h2.sec{font-size:2.35rem;line-height:1.08;font-weight:700;letter-spacing:-.6px;margin:0 0 16px;max-width:22em}
p.seclead{color:var(--gris);max-width:40em;margin:0 0 36px;font-size:1.08rem}
p.seclead strong{color:var(--encre)}
/* Tout s'aligne a gauche : un texte centre sur plusieurs lignes se lit mal, et c'est l'autre
   reflexe d'une page generee. La classe reste dans le HTML, sans effet. */
.center p.seclead{margin-left:0}
h3{font-size:1.2rem;line-height:1.25;margin:0 0 8px}
@media(max-width:700px){section{padding:52px 0}h2.sec{font-size:1.75rem}}

/* Des colonnes a filet en tete, pas des cartes : une couleur, une epaisseur, et c'est tout. */
.grid{display:grid;gap:36px 32px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{border-top:2px solid var(--encre);padding-top:16px}
.card p{margin:0;color:var(--gris);font-size:.98rem}

/* ---------- le sigle CAP et la lignee (fond sombre : les logos l'exigent) ---------- */
.lignee{background:var(--nuit);border-radius:var(--r);padding:30px;margin:0 0 30px;display:flex;
  align-items:center;justify-content:center;gap:34px;flex-wrap:wrap}
.lignee .src img{height:34px;width:auto}
.lignee .fleche{color:#c9a54c;font-size:1.8rem;line-height:1}
.lignee .dst{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.lignee .dst img{height:30px;width:auto}
@media(max-width:620px){
  .lignee{gap:20px;padding:24px 18px}
  .lignee .fleche{transform:rotate(90deg)}
  .lignee .src img{height:28px}.lignee .dst img{height:25px}
}
.cap{margin-top:40px;padding-top:28px;border-top:1px solid var(--filet)}
.cap .word{color:var(--encre);font-size:2.6rem;font-weight:700;font-stretch:var(--etroit);letter-spacing:-.6px;line-height:1.1;margin:0 0 12px}
.cap .word i{font-style:normal;color:var(--cyan-x)}
.cap .word em{font-style:normal;color:var(--gris);font-weight:400}
.cap p{margin:0;color:var(--gris);max-width:44em}
.cap p b{color:var(--encre)}
@media(max-width:620px){.cap .word{font-size:1.8rem}}

/* ---------- la declaration de renommage ----------
   🔑 Elle est ISOLEE et non noyee dans le recit, pour une raison de fond : un moteur de
   reponse extrait des affirmations ISOLABLES. Le meme fait raconte sur quatre phrases de
   prose se cite mal ; pose en un bloc autonome, date et attribue, il se cite bien.
   ⚠️ Ne pas la fondre dans le paragraphe voisin « pour alleger ». */
.declaration{border-left:3px solid var(--encre);padding:4px 0 4px 26px;margin:34px 0 40px;
  font-size:1.08rem;max-width:48em}
/* ⚠️⚠️ `> strong:first-child` ET PAS `strong` (defaut paye le 2026-09-24, vu SEULEMENT au
   rendu). Le paragraphe contient d'autres `<strong>` (le sigle CAP, ses initiales,
   « VisualCom ») : en `display:block` sur tous, la declaration sortait en escalier. */
.declaration > strong:first-child{display:block;font-size:1.35rem;font-stretch:var(--etroit);
  line-height:1.2;margin-bottom:10px}
.declaration .quand{display:block;margin-top:12px;color:var(--gris);font-size:.82rem}
@media(max-width:620px){.declaration{padding-left:18px;font-size:1rem}}

/* ---------- les trois fonctionnalites ---------- */
.innov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}
@media(max-width:900px){.innov{grid-template-columns:1fr}}
.innov article{border-top:2px solid var(--encre);padding-top:18px;position:relative;display:flex;flex-direction:column}
.innov h3{font-size:1.5rem;margin-bottom:12px}
.innov p{margin:0 0 16px;color:#34403f}
.innov .preuve{margin-top:auto;padding-top:14px;border-top:1px solid var(--filet);font-size:.9rem;color:var(--gris)}
.innov .preuve b{color:var(--encre);font-weight:600}
/* L'option VIP est une INFORMATION (ce n'est pas inclus), pas une decoration : elle garde sa
   pastille, et c'est la seule de la page. */
/* ⚠️ La pastille passe SOUS le titre (demande de Philippe, 2026-09-26) : placee au-dessus, elle
   descendait le titre de la 3e colonne, qui ne s'alignait plus avec les deux autres. Elle vient
   avant le titre dans le HTML : c'est l'ordre flex qui la replace, sans toucher au texte. */
/* Titre, puis schema, puis pastille : les schemas demarrent ainsi a la meme hauteur dans les trois
   colonnes (places sous le texte, ils suivaient sa longueur et la 3e colonne descendait). */
.innov h3{order:-3}
.innov .illu{order:-2}
.innov .opt{align-self:flex-start;order:-1;margin:-4px 0 12px;border:1.5px solid var(--or);color:var(--or);
  border-radius:999px;padding:2px 11px;font-size:.78rem;font-weight:600}

/* ---------- demonstrations (lecteur de captures) ---------- */
.video-slot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--nuit);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.video-slot video,.video-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
/* ⚠️ Le cartouche d'attente n'est PAS un decor : il dit qu'il n'y a pas encore de video. */
.video-slot .attente{color:#9fb0b6;max-width:420px}
.video-slot .attente b{display:block;color:#fff;font-size:1.05rem;margin-bottom:7px}
.video-slot .attente span{font-size:.86rem;line-height:1.5}

/* ---------- ce qu'un ecran fait : les etudes, puis nos mesures ---------- */
h3.sous{font-size:1.05rem;font-weight:600;color:var(--gris);margin:8px 0 18px;font-stretch:100%}
.etudes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px;margin-bottom:56px}
@media(max-width:900px){.etudes{grid-template-columns:1fr}}
.etude,.stat{border-top:2px solid var(--encre);padding-top:18px;display:flex;flex-direction:column}
.etude b,.stat b{font-size:3.4rem;line-height:1;font-weight:700;font-stretch:var(--etroit);letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;margin-bottom:12px}
.stat b{font-size:2.5rem;letter-spacing:-1px}
.etude span,.stat span{font-weight:600;font-size:1.02rem;line-height:1.4;margin-bottom:10px}
.etude small,.stat small{color:var(--gris);font-size:.86rem;line-height:1.5;margin-top:auto}
.etude cite{font-style:italic}
.note{color:var(--gris);font-size:.88rem;margin-top:28px;max-width:52em}

/* ---------- menu board : des lignes, pas des cartes ---------- */
#menuboards .grid.g3{grid-template-columns:1fr;gap:0;border-top:2px solid var(--encre)}
#menuboards .card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 32px;
  border-top:0;border-bottom:1px solid var(--filet);padding:20px 0}
#menuboards .card h3{margin:0;font-size:1.3rem}
@media(max-width:700px){#menuboards .card{grid-template-columns:1fr}}

/* ---------- materiel : la cle V8 est le SEUL bloc pose de la page (c'est ce qu'on achete) ---------- */
.kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
@media(max-width:840px){.kit{grid-template-columns:1fr}}
.kit>div{display:flex;flex-direction:column;padding:28px 0 0;border-top:2px solid var(--encre)}
.kit>div:first-child{background:var(--clair);border:1.5px solid var(--encre);border-radius:var(--r);padding:28px}
.kit .tag{align-self:flex-start;color:var(--gris);font-size:.9rem;font-weight:600;margin-bottom:8px}
.kit h3{font-size:1.7rem;margin:0 0 4px}
.kit .px{font-size:2.3rem;font-weight:700;font-stretch:var(--etroit);margin:2px 0 10px;line-height:1.1}
.kit .px small{font-size:.85rem;font-weight:500;color:var(--gris);font-stretch:100%}
.kit>div>p{color:#34403f;margin:0}
.specs{list-style:none;padding:14px 0 0;margin:18px 0 0;font-size:.9rem;color:var(--gris);border-top:1px solid var(--filet)}
.specs li{padding:5px 0}
.kit .btn{margin-top:22px;align-self:flex-start}
/* Le depliant des ecrans eprouves (2026-09-28) : un <details> dont le <summary> a l'allure du bouton. */
.compat{margin-top:22px;align-self:stretch}
.kit .compat>summary{margin-top:0;list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px}
.compat>summary::-webkit-details-marker{display:none}
.compat>summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.compat[open]>summary{background:#fff}
.compat[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.compat-corps{padding:18px 0 0}
.compat-corps>p{margin:0;color:#34403f}
.compat-corps .specs{margin-top:10px}
.compat-note{font-size:.9rem;color:var(--gris);margin:14px 0 0}
.compat-note a{color:var(--cyan-x)}
@media(prefers-reduced-motion:reduce){.compat>summary::after{transition:none}}

/* ---------- carte du parc ---------- */
.carte{border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;background:#fff}
.carte iframe{display:block;width:100%;height:560px;border:0}
/* ⓘ Sur telephone le bandeau de compteurs de la carte passe sur deux rangees et mange
   ~110 px : sans cette hauteur plus genereuse, il ne reste presque rien pour la carte. */
@media(max-width:700px){.carte iframe{height:540px}}

/* ---------- references : des photos legendees ---------- */
.cas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
@media(max-width:900px){.cas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cas{grid-template-columns:1fr}}
.cas a{text-decoration:none;color:inherit;display:flex;flex-direction:column}
/* ⚠️ `height:auto` est INDISPENSABLE (defaut en ligne jusqu'au 2026-09-26) : l'attribut
   height="450" de la balise vaut une hauteur CSS fixe, qui l'emporte sur aspect-ratio. */
.cas img{aspect-ratio:720/450;object-fit:cover;width:100%;height:auto;border-radius:4px}
.cas .txt{padding-top:14px;display:flex;flex-direction:column;flex:1}
.cas .ou{font-size:.85rem;color:var(--gris);margin-bottom:4px}
.cas h3{margin:0 0 6px;font-size:1.2rem}
.cas p{margin:0;color:var(--gris);font-size:.93rem}
.cas .lire{margin-top:10px;font-size:.9rem;font-weight:600;color:var(--cyan-x)}
.cas a:hover .lire,.cas a:focus-visible .lire{text-decoration:underline}

/* ---------- comparatif ---------- */
.pricecard{border-top:2px solid var(--encre)}
.prow{display:grid;grid-template-columns:220px minmax(0,1fr) 104px;align-items:center;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--filet)}
.prow .nm{font-weight:600;font-size:.96rem}
.prow .nm small{display:block;color:var(--gris);font-weight:400;font-size:.8rem;line-height:1.35}
.track{height:12px;border-radius:3px;background:#e2e6e3;overflow:hidden}
.fill{height:100%;border-radius:3px;background:#9fabae}
.prow.me .fill{background:var(--cyan)}
.prow.me .nm{color:var(--cyan-x)}
.prow .amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.quote{color:var(--gris);font-style:italic;font-weight:600;font-size:.88rem}
@media(max-width:620px){.prow{grid-template-columns:112px minmax(0,1fr) 74px}.prow .nm small{display:none}}

/* ---------- appel final et pied de page ---------- */
.final{background:var(--nuit);color:#fff}
.final h2{font-size:2.4rem;font-weight:700;margin:0 0 12px;letter-spacing:-.6px;color:#fff;max-width:20em}
.final p{color:#c3cccf;max-width:40em;margin:0 0 28px;font-size:1.08rem}
.final .cta{justify-content:flex-start}
@media(max-width:700px){.final h2{font-size:1.75rem}}
footer{background:#141a1c;color:#9fb0b6;padding:46px 0 34px;font-size:.9rem}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer h4{color:#fff;font-size:.95rem;margin:0 0 12px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:7px}
footer a{color:#9fb0b6;text-decoration:none}
footer a:hover{color:#fff}
footer .bot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;font-size:.82rem;color:#7d9098}

/* ---------- page 404 : l'ecran du haut de page, qui ne recoit rien ---------- */
.p404{min-height:calc(100vh - 60px);display:flex;align-items:center}
.p404 .wrap{width:100%}
.p404 .lead + .lead{margin-top:-12px;color:var(--gris)}
.dalle.osd{display:flex;align-items:center;justify-content:center;background:#0b1320}
/* Le cartouche imite l'affichage a l'ecran d'un moniteur : texte clair, cadre fin, rien d'autre. */
.osd-texte{display:flex;flex-direction:column;align-items:center;gap:4px;padding:3% 6%;
  border:1px solid rgba(255,255,255,.45);color:#e8eef0;font-stretch:var(--etroit)}
.osd-texte b{font-size:clamp(14px,2.2vw,28px);font-weight:700}
.osd-texte span{font-size:clamp(11px,1.3vw,16px);color:#aab7bc}

/* ---------- illustrations : une par accroche (demande de Philippe, 2026-09-26) ----------
   🔑 Le texte n'est PAS retire : il reste entier dans le HTML (c'est lui que les moteurs citent),
   mais l'accroche passe devant et le reste en petit. Les images sont de vraies captures de
   CapPilote ou de vraies installations, jamais des illustrations de banque d'images. */
.card .illu{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;
  margin-top:16px;border:1px solid var(--filet);border-radius:4px;background:#fff}
#histoire .card .illu{aspect-ratio:16/9}
/* Menu board : l'accroche de la section en grand, la suite en petit ; chaque ligne a son image. */
/* L'accroche de section : seulement la ou la premiere phrase est ENTIEREMENT en gras et finit par
   un point (verifie section par section, FR et EN). Ailleurs le gras ne couvre qu'un mot ou une
   demi-phrase, et le passer en bloc la couperait en deux (le defaut de la declaration, 24/09). */
#menuboards p.seclead,#catalogue p.seclead,#references p.seclead,#comparatif p.seclead,#comparison p.seclead{font-size:.97rem}
#menuboards p.seclead > strong:first-child,#catalogue p.seclead > strong:first-child,#references p.seclead > strong:first-child,
#comparatif p.seclead > strong:first-child,#comparison p.seclead > strong:first-child{display:block;font-size:1.35rem;line-height:1.3;
  color:var(--encre);font-stretch:var(--etroit);margin-bottom:10px}
/* `auto 1fr` : sans lui la grille repartissait la hauteur de l'image entre les deux rangees, et le
   texte tombait loin sous son titre (vu a l'image). */
#menuboards .card{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"t i" "p i";grid-template-rows:auto 1fr;
  column-gap:40px;align-items:start;padding:28px 0}
#menuboards .card h3{grid-area:t;font-size:1.55rem}
#menuboards .card p{grid-area:p;font-size:.95rem}
/* Format NATUREL des captures : imposees en 16:10, elles etaient rognees sur les cotes (« s boissons »). */
#menuboards .card .illu{grid-area:i;margin:0;aspect-ratio:auto;object-fit:contain}
@media(max-width:700px){#menuboards .card{grid-template-columns:1fr;grid-template-areas:"t" "p" "i"}#menuboards .card .illu{margin-top:12px}}
/* La cle V8 : la photo du catalogue du fabricant choisie par Philippe (image 6), a sa taille d'origine
   (217 x 198, jamais agrandie).
   Son fond blanc se fond dans la carte par `multiply` plutot que par un detourage. */
.kit .photo-v8{width:100%;max-width:217px;height:auto;margin:4px 0 12px;mix-blend-mode:multiply}
/* Les 3 fonctionnalites : un schema par accroche. Pas de capture honnete du flux ni de la prise en main
   sans une session reelle : un schema qui montre le MECANISME plutot qu'une fausse capture. */
.innov .illu{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;margin:0 0 14px;
  border:1px solid var(--filet);border-radius:4px;background:#fff}

/* ═══ Animations (2026-09-28), reprises de l'artefact « Clarte » : voir assets/anim.js ═══════════
   Chaque regle ne s'applique qu'a une classe que le SCRIPT pose : sans JavaScript, rien ne change. */
:root{--sortie:cubic-bezier(.16,1,.3,1)}
/* 1. Le sigle */
.sigle{font-size:clamp(2.4rem,9vw,7.2rem);font-weight:400;letter-spacing:-.045em;line-height:1;margin:0 0 18px;
  white-space:nowrap;display:flex;align-items:baseline;overflow:hidden}
.sigle .k{font-weight:700;color:var(--encre);display:inline-block;transition:color .8s}
.sigle .d{display:inline-block;overflow:hidden;max-width:4.2em;color:#9aa6aa;vertical-align:bottom;
  transition:max-width 1.1s var(--sortie),opacity .7s,transform 1.1s var(--sortie)}
.sigle .sp{display:inline-block;width:.26em;transition:width 1.1s var(--sortie)}
.sigle .sep{display:inline-block;width:0;opacity:0;color:var(--cyan-x);overflow:hidden;transition:width 1s var(--sortie),opacity .6s}
.sigle.is-cap .d{max-width:0;opacity:0;transform:translateY(-.1em)}
.sigle.is-cap .sp{width:0}
.sigle.is-cap .sep{width:.6em;opacity:1;text-align:center}
.sigle.is-cap .k{color:var(--cyan-x)}
/* 2. Les compteurs */
.roule .lu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.roule .dg{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit}
.roule .dg>span{display:inline-block;animation:roule .75s var(--sortie) both}
@keyframes roule{from{transform:translateY(105%)}to{transform:none}}
/* 3. Les titres */
h2.rv .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .12em;margin:0 -.03em -.12em}
h2.rv .wi{display:inline-block;transform:translateY(108%);transition:transform .7s var(--sortie)}
h2.rv.rv-in .wi{transform:none}
/* 4. Les photos des references */
.allume{position:relative;display:block;border-radius:4px;overflow:hidden}
.allume img{display:block}
.allume-grille{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);pointer-events:none}
.allume-grille i{background:var(--nuit);box-shadow:inset 0 0 0 1px rgba(11,122,136,.12)}
.allume-grille i:nth-child(5n+2){background:#1f2a2e}
.allume-grille i:nth-child(7n+3){background:#18343a}
.allume-grille.go i{opacity:0;transition:opacity .05s linear}
/* 5. Les barres */
.barres .fill{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--sortie)}
.barres .prow:nth-child(2) .fill{transition-delay:.05s}
.barres .prow:nth-child(3) .fill{transition-delay:.1s}
.barres .prow:nth-child(4) .fill{transition-delay:.15s}
.barres .prow:nth-child(5) .fill{transition-delay:.2s}
.barres .prow:nth-child(6) .fill{transition-delay:.25s}
.barres.barres-in .fill{transform:none}
/* 6. Au pointeur */
.cas a.spot{position:relative;border-radius:6px;transition:transform .25s ease-out;will-change:transform}
.cas a.spot::after{content:"";position:absolute;inset:-10px;border-radius:10px;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(11,122,136,.12),transparent 62%);
  opacity:0;transition:opacity .45s var(--sortie)}
.cas a.spot:hover::after{opacity:1}
@media(prefers-reduced-motion:reduce){
  .sigle *,.roule .dg>span,h2.rv .wi,.allume-grille i,.barres .fill{transition:none!important;animation:none!important}
}
/* 7. Le duo : la demo du menu board et l'ecran du comptoir qui reagit (fabrique par anim.js).
   🔑 Plus large que .wrap sur grand ecran : a cote de l'ecran, la demo doit rester lisible. */
.duo{position:relative}
.duo-ecran{margin:0}
@media(min-width:1100px){
  /* Alignee a gauche sur le texte de la section, elle deborde seulement vers la droite. */
  .duo{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:96px;align-items:center;
    width:min(1320px,calc(100% + (100vw - 100%) / 2 - 32px))}
  .duo-ecran .produit{transform:perspective(1400px) rotateY(-12deg);transform-origin:0 50%;transition:transform 1.2s var(--sortie)}
  .duo.actif .duo-ecran .produit{transform:perspective(1400px) rotateY(-5deg)}
}
/* ⚠️ Apres la regle generale .duo-ecran{margin:0}, sinon celle-ci l'ecrase (vu au telephone). */
@media(max-width:1099px){.duo-ecran{max-width:520px;margin:28px auto 0}}
@media(max-width:560px){.duo-bulle{top:4%;right:3%;padding:3px 8px 3px 7px;font-size:9px;gap:5px}.duo-bulle::before{width:5px;height:5px}}
.duo-ecran figcaption{margin-top:12px;font-size:.84rem;color:var(--gris);display:flex;align-items:center;gap:8px}
.duo-ecran figcaption::before{content:"";width:8px;height:8px;border-radius:50%;background:#9aa6aa;transition:background .4s}
.duo.actif .duo-ecran figcaption::before{background:#1f9d57;box-shadow:0 0 0 4px rgba(31,157,87,.15)}
.duo-dalle{background:radial-gradient(ellipse at 50% 40%,#16323a,#0a1519 70%)}
.duo-osd{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:#e8eef0;font-stretch:var(--etroit);transition:opacity .5s}
.duo-osd b{font-size:clamp(15px,1.6vw,24px);letter-spacing:.01em}
.duo-osd span{font-size:clamp(10px,.9vw,13px);color:#9fb0b6}
.duo-osd .duo-heure{margin-top:6px;font-variant-numeric:tabular-nums;color:#6f8389}
.duo-dalle > .duo-vue{position:absolute;inset:0;opacity:0;transition:opacity .6s,filter .6s}
.duo-ecran:not([data-etat="veille"]) .duo-vue{opacity:1}
.duo-ecran:not([data-etat="veille"]) .duo-osd{opacity:0}
.duo-ecran.recu .duo-vue{animation:duo-flash .7s ease-out}
@keyframes duo-flash{0%{filter:brightness(1.35)}100%{filter:none}}
.duo-bulle{position:absolute;top:6%;right:4%;display:flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;
  border-radius:999px;background:rgba(10,21,25,.86);color:#fff;font-size:clamp(10px,.85vw,13px);font-weight:600;
  opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s var(--sortie);white-space:nowrap}
.duo-bulle::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fd0e0}
.duo-ecran.recu .duo-bulle{opacity:1;transform:none}
.faisceau{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.f-base{fill:none;stroke:rgba(11,122,136,.35);stroke-width:2;stroke-dasharray:4 7}
.f-trait{fill:none;stroke:#2fd0e0;stroke-width:3;stroke-linecap:round;stroke-dasharray:46 260;stroke-dashoffset:46;opacity:0;transition:opacity .4s}
.duo.actif .f-trait{opacity:.95;animation:duo-flux 1.8s linear infinite}
@keyframes duo-flux{from{stroke-dashoffset:306}to{stroke-dashoffset:0}}
.f-point{fill:#2fd0e0;opacity:0;filter:drop-shadow(0 0 6px rgba(47,208,224,.9))}
.f-point.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .duo .duo-ecran .produit{transition:none!important}.duo.actif .f-trait{animation:none}.duo-ecran.recu .duo-vue{animation:none}
}