/* CYBSECURE, site vitrine.
   Lecture : site de services B2B pour responsables sûreté, services techniques et acheteurs publics,
   dans la charte sombre pétrole de la présentation CYBSECURE. Réglages : variété 6, mouvement 6 sur l'accueil
   et 3 ailleurs, densité 4. Un seul thème (sombre, imposé par la marque), un seul accent (sarcelle).
   Rayons : boutons et puces en pilule, cartes 16 px, champs 10 px. */
:root{
  --nuit:#101E26; --fond-2:#14262F; --surface:#192E38; --surface-2:#1F3742; --petrole:#1C343E;
  --texte:#FFFFFF; --texte-2:#FFFFFF; --texte-3:#D3E2DF;
  --sarcelle:#55C0AD; --sarcelle-clair:#78D2C3; --filet:rgba(120,210,195,.16); --filet-fort:rgba(120,210,195,.32);
  --acces:#5EE0A8; --erreur:#FF8A80;
  --f-titre:Arial,"Arimo","Liberation Sans","Helvetica Neue",sans-serif;
  --f-texte:Calibri,"Carlito","Segoe UI",system-ui,sans-serif;
  --courbe:cubic-bezier(.4,0,.2,1);
  --largeur:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
.lecteur-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-size:1.3em}
body{margin:0;-webkit-tap-highlight-color:rgba(85,192,173,.2);touch-action:manipulation;background:var(--nuit);color:var(--texte);font-family:var(--f-texte);font-size:18px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--f-titre);font-weight:700;margin:0;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,4.2vw,3.5rem)}
h2{font-size:clamp(1.75rem,3vw,2.5rem)}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:0}
:focus-visible{outline:2px solid var(--sarcelle);outline-offset:3px;border-radius:6px}
.ico{width:1em;height:1em;flex:none}
.wrap{max-width:var(--largeur);margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.mesure{max-width:62ch}
.discret{color:var(--texte-2)}
.saut{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--sarcelle);color:var(--nuit);padding:10px 16px;border-radius:999px;font-weight:700}
.saut:focus{left:16px}
.signature{font-family:var(--f-texte);font-weight:700;font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--sarcelle)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font-family:var(--f-titre);font-weight:700;font-size:15.5px;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer;border:2px solid transparent;transition:background-color .2s var(--courbe),border-color .2s var(--courbe),transform .12s var(--courbe)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-plein{background:var(--sarcelle);color:var(--nuit)}
.btn-plein:hover{background:var(--sarcelle-clair)}
.btn-trait{border-color:var(--filet-fort);color:var(--texte);background:transparent}
.btn-trait:hover{border-color:var(--sarcelle);background:rgba(85,192,173,.08)}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;color:var(--sarcelle);font-weight:700;text-decoration:none;font-family:var(--f-titre);font-size:15.5px}
.lien-fleche:hover{text-decoration:underline;text-underline-offset:4px}

/* En-tête */
.entete{position:sticky;top:0;z-index:40;background:rgba(16,30,38,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--filet);padding-top:env(safe-area-inset-top,0px)}
.accueil .entete{position:fixed;left:0;right:0;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .35s var(--courbe),border-color .35s var(--courbe)}
.accueil .entete.solide{background:rgba(16,30,38,.88);border-color:var(--filet);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.entete .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.entete .logo img{height:40px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-family:var(--f-titre);font-weight:700;font-size:14.5px;color:var(--texte-2);padding-block:6px;border-bottom:2px solid transparent;transition:color .2s var(--courbe),border-color .2s var(--courbe)}
.nav a:hover{color:var(--texte)}
.nav a[aria-current="page"]{color:var(--texte);border-color:var(--sarcelle)}
.nav a.nav-cat,.tiroir a.nav-cat{color:var(--sarcelle)}
.nav a.nav-cat:hover{color:var(--sarcelle-clair)}
.nav a.nav-cat[aria-current="page"]{color:var(--sarcelle-clair)}
.entete .btn{min-height:42px;padding:9px 18px;font-size:14.5px}
.burger{display:none;margin-left:auto;align-items:center;gap:8px;background:none;border:1px solid var(--filet-fort);color:var(--texte);border-radius:999px;padding:9px 14px;font:700 14.5px var(--f-titre);cursor:pointer}
.burger .ico{width:20px;height:20px}
.tiroir{position:fixed;inset:0;z-index:45;overscroll-behavior:contain;overflow-y:auto;background:var(--nuit);padding:calc(88px + env(safe-area-inset-top,0px)) 24px 32px;display:flex;flex-direction:column;gap:6px}
.tiroir a{font-family:var(--f-titre);font-weight:700;font-size:1.6rem;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--filet)}
.tiroir a[aria-current="page"]{color:var(--sarcelle)}
.tiroir .btn{margin-top:20px;font-size:17px}
@media (max-width:960px){.nav,.entete .btn-contact{display:none}.burger{display:inline-flex}}
@media (max-width:380px){.entete .logo img{height:34px}}

/* Ouvertures de page (hors accueil) */
.ouverture{padding-block:clamp(56px,8vw,96px) clamp(40px,5vw,64px);position:relative;overflow:hidden;border-bottom:1px solid var(--filet)}
.ouverture .wrap{position:relative;display:grid;gap:20px}
.ouverture h1{max-width:20ch}
.ouverture .chapo{font-size:20px;color:var(--texte-2);max-width:56ch}
.arcs{position:absolute;pointer-events:none;color:var(--sarcelle);opacity:.14}
.ouverture .arcs{right:-180px;top:-140px;width:620px;height:620px}

/* Sections */
.bloc{padding-block:clamp(64px,8vw,104px)}
.bloc+.bloc{border-top:1px solid var(--filet)}
.bloc-tete{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,44px);max-width:62ch}
.bloc-tete p{color:var(--texte-2)}

/* Accueil : scène 3D fixe */
.scene{position:fixed;inset:0;z-index:0;background:radial-gradient(110% 85% at 15% 10%,#24434E 0%,var(--petrole) 42%,#101E26 100%)}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .repli{position:absolute;right:8vw;top:50%;width:min(36vw,420px);translate:0 -50%;display:none;opacity:.9}
.sans-webgl .scene .repli{display:block}
.scene.endormie{visibility:hidden}
.zone{position:relative;z-index:1}
.hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;position:relative}
.hero .wrap{width:100%;padding-block:112px 72px}
.hero-txt{display:grid;gap:24px;max-width:600px}
.hero h1{font-size:clamp(2.5rem,4.6vw,4rem);max-width:13ch}
.hero .chapo{font-size:20px;color:#FFFFFF;max-width:40ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.etat{position:absolute;right:clamp(16px,7vw,120px);bottom:clamp(24px,6vh,64px);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;background:rgba(16,30,38,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--filet-fort);font-size:15.5px;color:#FFFFFF;transition:border-color .3s var(--courbe),background-color .3s var(--courbe)}
.etat .voyant{width:9px;height:9px;border-radius:50%;background:var(--sarcelle)}
.etat.ok{border-color:var(--acces);background:rgba(94,224,168,.14);color:var(--texte)}
.etat.ok .voyant{background:var(--acces);box-shadow:0 0 12px var(--acces)}
.etat button{font:700 14px var(--f-titre);background:rgba(85,192,173,.14);border:0;color:var(--sarcelle);cursor:pointer;padding:8px 14px;border-radius:999px;min-height:36px}
.etat button:hover{background:rgba(85,192,173,.24)}
.etat .pause{width:36px;padding:0;display:grid;place-items:center}
.etat .pause .ico{width:16px;height:16px}
@media (max-width:960px){
  .hero{align-items:flex-start}
  .hero .wrap{padding-block:100px 40vh}
  .hero h1{font-size:2.3rem}
  .hero .chapo{font-size:17.5px}
  .etat{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));font-size:14px}
}
@media (max-width:420px){.ctas .btn{padding:12px 18px;font-size:14.5px}}

.recit{position:relative;height:300vh}
.recit-colle{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.etape{position:absolute;left:0;right:0;top:50%;translate:0 -50%}
.etape .carte{max-width:480px;display:grid;gap:16px}
.etape .num{font-family:var(--f-titre);font-weight:700;font-size:15px;color:var(--sarcelle)}
.etape h2{font-size:clamp(2rem,3.8vw,3.1rem)}
.etape p{color:#FFFFFF;font-size:19px}
.etape.ok h2{color:var(--acces)}
.jauge{position:absolute;left:clamp(16px,4vw,48px);bottom:40px;display:flex;gap:8px}
.jauge i{width:40px;height:3px;border-radius:2px;background:rgba(169,207,200,.22);overflow:hidden;position:relative}
.jauge b{position:absolute;inset:0;background:var(--sarcelle);transform:scaleX(0);transform-origin:left}
@media (max-width:960px){
  .etape{top:auto;bottom:8vh;translate:none}
  .etape .carte{background:rgba(16,30,38,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--filet);border-radius:16px;padding:20px}
  .etape h2{font-size:1.7rem}.etape p{font-size:17px}
  .jauge{left:50%;translate:-50% 0;bottom:auto;top:96px}
}
.reduit .recit{height:auto}
.reduit .recit-colle{position:relative;height:auto;overflow:visible;padding-block:48px;display:grid;gap:48px;background:var(--nuit)}
.reduit .etape{position:relative;top:auto;bottom:auto;translate:none}
.reduit .jauge{display:none}

.site{position:relative;z-index:2;background:var(--nuit)}
.accueil .site{box-shadow:0 -40px 80px rgba(16,30,38,.9)}

/* Chiffres */
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-block:1px solid var(--filet)}
.chiffre{padding:28px 24px;display:grid;gap:6px}
.chiffre+.chiffre{border-left:1px solid var(--filet)}
.chiffre b{font-family:var(--f-titre);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--sarcelle);font-variant-numeric:tabular-nums}
.chiffre span{color:var(--texte-2);font-size:16.5px}
@media (max-width:820px){.chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}.chiffre:nth-child(3){border-left:0}.chiffre:nth-child(n+3){border-top:1px solid var(--filet)}}

/* Mosaïque des solutions */
.mosaique{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"a a v v i i" "s s s r r r";gap:16px}
.tuile{position:relative;overflow:hidden;border-radius:16px;background:var(--surface);border:1px solid var(--filet);padding:26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;min-height:200px;transition:border-color .25s var(--courbe),background-color .25s var(--courbe)}
.tuile:hover{border-color:var(--sarcelle);background:var(--surface-2)}
.tuile .pictos{width:46px;height:46px;border-radius:50%;background:rgba(85,192,173,.14);color:var(--sarcelle);display:grid;place-items:center}
.tuile .pictos .ico{width:24px;height:24px}
.tuile p{color:var(--texte-2)}
.tuile .suite{margin-top:auto;color:var(--sarcelle);font-weight:700;font-family:var(--f-titre);font-size:15px;display:inline-flex;align-items:center;gap:8px}
.tuile-photo{background-size:cover;background-position:center}
.tuile-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,30,38,.35) 0%,rgba(16,30,38,.94) 72%)}
.tuile-photo>*{position:relative}
.tuile-photo{justify-content:flex-end}
.tuile-accent{background:linear-gradient(140deg,#284A56 0%,var(--petrole) 60%);border-color:var(--filet-fort)}
.tuile .arcs{right:-90px;bottom:-110px;width:300px;height:300px;opacity:.22}
.tuile-accent>*:not(.arcs){position:relative}
.t-a.tuile-accent{justify-content:flex-end}
.t-a .arcs{right:-120px;top:-120px;bottom:auto;width:460px;height:460px}
.t-a{grid-area:a}.t-v{grid-area:v}.t-i{grid-area:i}.t-s{grid-area:s}.t-r{grid-area:r}.t-n{grid-area:n}

@media (max-width:900px){.mosaique{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a v" "i s" "r r"}}
@media (max-width:560px){.mosaique{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "v" "i" "s" "r"}}

/* Références (aperçu accueil) */
.vitrine{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px}
.vitrine .colonne{display:grid;gap:16px}
.fiche-photo{position:relative;border-radius:16px;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;text-decoration:none;background:var(--surface)}
.fiche-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--courbe)}
.fiche-photo:hover img{transform:scale(1.04)}
.fiche-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,30,38,0) 30%,rgba(16,30,38,.92) 100%)}
.fiche-photo>div{position:relative;z-index:1;display:grid;gap:6px}
.fiche-photo .secteur{color:var(--sarcelle-clair);font-size:15px;font-weight:700}
.fiche-photo .kpi{color:#FFFFFF;font-size:16px}
.vitrine .grande{min-height:540px}
.vitrine .grande h3{font-size:1.9rem}
.sous-lien{margin-top:24px}
@media (max-width:860px){.vitrine{grid-template-columns:minmax(0,1fr)}.vitrine .grande{min-height:360px}}

/* Citation pleine largeur */
.citation{display:grid;gap:22px;max-width:900px}
.citation blockquote{margin:0;font-family:var(--f-titre);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.32;letter-spacing:-.01em}
.citation figcaption{color:var(--texte-2);font-size:17px}
.citation figcaption b{color:var(--texte)}

/* Bandeau d'action */
.appel{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(130deg,#284A56 0%,var(--petrole) 55%,#12242E 100%);border:1px solid var(--filet-fort);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.appel .arcs{right:-120px;top:-160px;width:520px;height:520px;opacity:.2}
.appel>div{position:relative;display:grid;gap:12px}
.appel p{color:#FFFFFF;max-width:52ch}
.appel .actions{display:grid;gap:12px;justify-items:start}
.appel .tel{font-family:var(--f-titre);font-weight:700;font-size:1.2rem;color:var(--texte);text-decoration:none}
@media (max-width:760px){.appel{grid-template-columns:minmax(0,1fr)}}

/* Pied de page */
.pied{border-top:1px solid var(--filet);padding-block:48px 32px;color:var(--texte-2);font-size:16px}
.pied .grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:32px}
.pied img{height:38px;width:auto;margin-bottom:14px}
.pied nav{display:grid;gap:8px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--texte)}
.pied address{font-style:normal;display:grid;gap:8px}
.pied .bas{margin-top:36px;padding-top:20px;border-top:1px solid var(--filet);display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14.5px;color:var(--texte-3)}
@media (max-width:760px){.pied .grille{grid-template-columns:minmax(0,1fr)}}

/* Solutions : sommaire collant */
.metiers{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(28px,5vw,64px);align-items:start}
.sommaire{position:sticky;top:96px;display:grid;gap:4px}
.sommaire a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texte-2);padding:10px 14px;border-radius:999px;font-weight:700;font-size:16px}
.sommaire a:hover{color:var(--texte);background:var(--surface)}
.sommaire a.actif{color:var(--nuit);background:var(--sarcelle)}
.sommaire .ico{width:18px;height:18px}
.metier{display:grid;gap:18px;padding-block:8px 56px;scroll-margin-top:96px}
.metier+.metier{border-top:1px solid var(--filet);padding-top:56px}
.metier .tete{display:flex;align-items:center;gap:16px}
.metier .pictos{width:56px;height:56px;border-radius:50%;background:var(--sarcelle);color:var(--nuit);display:grid;place-items:center;flex:none}
.metier .pictos .ico{width:28px;height:28px}
.metier .lead{font-size:20px;color:#FFFFFF;max-width:56ch}
.metier .deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.metier h3{font-size:1.05rem;color:var(--texte-2);margin-bottom:12px}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.coches li{display:flex;gap:12px;align-items:flex-start}
.coches .ico{color:var(--sarcelle);width:20px;height:20px;margin-top:3px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puces span{border:1px solid var(--filet-fort);border-radius:999px;padding:6px 14px;font-size:15px;color:var(--sarcelle-clair)}
.exemple{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;background:var(--surface);border:1px solid var(--filet);border-radius:16px;padding:12px;text-decoration:none}
.exemple img{width:120px;height:84px;object-fit:cover;border-radius:10px}
.exemple b{font-family:var(--f-titre)}
.exemple span{color:var(--texte-2);font-size:16px}
.exemple:hover{border-color:var(--sarcelle)}
@media (max-width:900px){.metiers{grid-template-columns:minmax(0,1fr)}.sommaire{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:6px}.sommaire a{flex:none;border:1px solid var(--filet)}.metier .deux{grid-template-columns:minmax(0,1fr)}}

/* Cybersécurité */
.cyber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.groupe{border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);padding:28px;display:grid;gap:18px;align-content:start}
.groupe .ico-titre{display:flex;align-items:center;gap:12px}
.groupe .ico-titre .ico{color:var(--sarcelle);width:28px;height:28px}
@media (max-width:760px){.cyber{grid-template-columns:minmax(0,1fr)}}

/* Services : frise */
.frise{position:relative;display:grid;gap:0;counter-reset:etape}
.frise::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:linear-gradient(var(--sarcelle),rgba(85,192,173,.15))}
.jalon{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:28px;padding-bottom:44px}
.jalon:last-child{padding-bottom:0}
.jalon .rond{width:56px;height:56px;border-radius:50%;background:var(--nuit);border:2px solid var(--sarcelle);display:grid;place-items:center;font-family:var(--f-titre);font-weight:700;color:var(--sarcelle);position:relative;z-index:1}
.jalon .corps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;padding:22px 26px;border-radius:16px;background:var(--surface);border:1px solid var(--filet)}
.jalon .corps>div:first-child{display:grid;gap:10px;align-content:start}
.jalon .pour{color:#FFFFFF}
@media (max-width:860px){.jalon{grid-template-columns:44px minmax(0,1fr);gap:16px}.jalon .rond{width:44px;height:44px}.frise::before{left:21px}.jalon .corps{grid-template-columns:minmax(0,1fr)}}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.encart{border-radius:16px;padding:32px;display:grid;gap:14px;align-content:start;position:relative;overflow:hidden;border:1px solid var(--filet)}
.encart.plein{background:linear-gradient(140deg,#284A56 0%,var(--petrole) 70%)}
.encart.vide{background:var(--fond-2)}
.encart .arcs{right:-100px;bottom:-140px;width:360px;height:360px;opacity:.2}
.encart>*:not(.arcs){position:relative}
.encart>.ico{width:40px;height:40px;color:var(--sarcelle)}
@media (max-width:760px){.duo{grid-template-columns:minmax(0,1fr)}}

/* Références : filtres et cartes */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtre{font:700 15px var(--f-titre);border:1px solid var(--filet-fort);border-radius:999px;padding:10px 16px;background:transparent;color:var(--texte-2);cursor:pointer;min-height:44px}
.filtre:hover{color:var(--texte);border-color:var(--sarcelle)}
.filtre[aria-pressed="true"]{background:var(--sarcelle);border-color:var(--sarcelle);color:var(--nuit)}
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ref{border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--filet);display:flex;flex-direction:column}
.ref img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.ref .corps{padding:20px 22px 22px;display:grid;gap:10px;align-content:start;flex:1}
.ref .haut{display:flex;justify-content:space-between;gap:12px;color:var(--sarcelle-clair);font-weight:700;font-size:15px}
.ref .haut span:last-child{color:var(--texte-3);font-weight:400}
.ref p{color:var(--texte-2);font-size:16.5px}
.ref .kpis{display:flex;gap:24px;margin-top:auto;padding-top:12px;border-top:1px solid var(--filet)}
.ref .kpis b{display:block;font-family:var(--f-titre);color:var(--texte);font-size:1.25rem;line-height:1.1}
.ref .kpis span{font-size:14.5px;color:var(--texte-2)}
.ref .techno{font-size:14.5px;color:var(--texte-3)}
.vide-filtre{color:var(--texte-2);padding:24px 0}
@media (max-width:980px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cartes{grid-template-columns:minmax(0,1fr)}}
.autres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.autre{border-radius:16px;background:var(--fond-2);border:1px solid var(--filet);padding:18px 20px;display:grid;gap:6px}
.autre b{font-family:var(--f-titre)}
.autre span{color:var(--texte-2);font-size:16px}
@media (max-width:860px){.autres{grid-template-columns:minmax(0,1fr)}}
.paire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.paire figure{margin:0;border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);padding:28px;display:grid;gap:16px;align-content:space-between}
.paire blockquote{margin:0;font-family:var(--f-titre);font-weight:700;font-size:1.35rem;line-height:1.35}
.paire figcaption{color:var(--texte-2);font-size:16px}
@media (max-width:760px){.paire{grid-template-columns:minmax(0,1fr)}}

/* Entreprise */
.recit-societe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
.recit-societe .texte{display:grid;gap:18px;font-size:19px;color:#FFFFFF}
.faits{display:grid;gap:0;border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);overflow:hidden}
.fait{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:20px 22px}
.fait+.fait{border-top:1px solid var(--filet)}
.fait .ico{color:var(--sarcelle);width:26px;height:26px}
.fait b{display:block;font-family:var(--f-titre)}
.fait span{color:var(--texte-2);font-size:16px}
@media (max-width:860px){.recit-societe{grid-template-columns:minmax(0,1fr)}}
.valeurs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px)}
.valeurs dl{margin:0;display:grid;gap:28px}
.valeurs dt{font-family:var(--f-titre);font-weight:700;font-size:1.5rem;display:flex;align-items:center;gap:12px}
.valeurs dt .ico{color:var(--sarcelle)}
.valeurs dd{margin:6px 0 0;color:var(--texte-2);max-width:52ch}
@media (max-width:860px){.valeurs{grid-template-columns:minmax(0,1fr)}}
.annees{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.annees::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--filet-fort)}
.annee{position:relative;display:grid;gap:10px;padding-right:20px;align-content:start}
.annee i{width:32px;height:32px;border-radius:50%;background:var(--nuit);border:2px solid var(--sarcelle);display:block}
.annee:last-child i{background:var(--sarcelle)}
.annee b{font-family:var(--f-titre);font-size:1.3rem;color:var(--sarcelle)}
.annee h3{font-size:1.1rem}
.annee p{color:var(--texte-2);font-size:16.5px}
@media (max-width:860px){.annees{grid-template-columns:minmax(0,1fr);gap:28px}.annees::before{left:15px;right:auto;top:0;bottom:0;width:2px;height:auto}.annee{grid-template-columns:32px minmax(0,1fr);column-gap:16px}.annee i{grid-row:span 3}}
.partenaires{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.partenaire{border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);padding:22px;display:grid;gap:10px;align-content:start}
.partenaire.majeur{grid-column:span 3;background:linear-gradient(140deg,#284A56 0%,var(--petrole) 70%);border-color:var(--filet-fort);grid-template-columns:minmax(0,1fr) auto;align-items:center}
.partenaire h3{font-size:1.1rem}
.partenaire p{color:var(--texte-2);font-size:16px}
.partenaire .marques{color:var(--texte);font-weight:700;font-size:16px}
.partenaire.majeur .grand{font-family:var(--f-titre);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--sarcelle);letter-spacing:.04em}
@media (max-width:860px){.partenaires{grid-template-columns:minmax(0,1fr)}.partenaire.majeur{grid-column:auto;grid-template-columns:minmax(0,1fr)}}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
form{display:grid;gap:18px;background:var(--surface);border:1px solid var(--filet);border-radius:16px;padding:clamp(20px,3vw,32px)}
.champ{display:grid;gap:8px;align-content:start}
.champ label,.champ legend{font-weight:700;font-size:16px;color:var(--texte)}
.champ .aide{font-size:14.5px;color:var(--texte-2)}
.champ .err{font-size:15px;color:var(--erreur);min-height:0}
.deux-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:560px){.deux-champs{grid-template-columns:minmax(0,1fr)}}
input,select,textarea{font:inherit;font-size:17px;color:var(--texte);background:var(--nuit);border:1px solid var(--filet-fort);border-radius:10px;padding:12px 14px;width:100%;min-height:48px}
input::placeholder,textarea::placeholder{color:var(--texte-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sarcelle);outline-offset:1px;border-color:var(--sarcelle)}
[aria-invalid="true"]{border-color:var(--erreur)}
textarea{min-height:130px;resize:vertical}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.cases{display:flex;flex-wrap:wrap;gap:8px}
.case{display:inline-flex;align-items:center;gap:10px;font-weight:400;font-size:16px;border:1px solid var(--filet-fort);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:44px}
.case input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--sarcelle)}
.case:has(input:checked){border-color:var(--sarcelle);background:rgba(85,192,173,.12)}
.envoi{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.retour{font-size:16px;color:var(--texte-2)}
.retour.ok{color:var(--acces)}
.coordonnees{display:grid;gap:14px}
.coord{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border-radius:16px;border:1px solid var(--filet);background:var(--fond-2)}
.coord .pictos{width:48px;height:48px;border-radius:50%;background:rgba(85,192,173,.14);color:var(--sarcelle);display:grid;place-items:center}
.coord .pictos .ico{width:22px;height:22px}
.coord .val{font-family:var(--f-titre);font-weight:700;font-size:17px;overflow-wrap:anywhere}
.coord small{display:block;color:var(--texte-2);font-size:14.5px;font-family:var(--f-texte);font-weight:400}
.copier{font:700 14px var(--f-titre);border:1px solid var(--filet-fort);background:transparent;color:var(--sarcelle);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:40px}
.ensuite{display:grid;gap:16px;margin-top:12px;counter-reset:s}
.ensuite li{list-style:none;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px}
.ensuite ol{margin:0;padding:0;display:grid;gap:16px}
.ensuite .n{width:36px;height:36px;border-radius:50%;border:2px solid var(--sarcelle);display:grid;place-items:center;font-family:var(--f-titre);font-weight:700;color:var(--sarcelle);font-size:15px}
.ensuite span{color:var(--texte-2)}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}

/* Badge qui suit la souris (sur demande du client) */
.badge{position:fixed;left:0;top:0;z-index:60;width:120px;height:76px;margin:-38px 0 0 -60px;border-radius:10px;pointer-events:none;background:linear-gradient(135deg,#1E5A54 0%,var(--petrole) 55%,var(--nuit) 100%);border:1px solid rgba(120,210,195,.45);box-shadow:0 8px 18px rgba(4,10,15,.45),inset 0 1px 0 rgba(255,255,255,.12);transform-origin:50% -30px;opacity:0;visibility:hidden}
.badge::before{content:"";position:absolute;left:50%;top:-32px;width:2px;height:32px;background:linear-gradient(var(--texte-2),rgba(169,207,200,0));translate:-50% 0}
.badge .trou{position:absolute;left:50%;top:7px;width:22px;height:5px;border-radius:3px;background:var(--nuit);translate:-50% 0}
.badge img{position:absolute;left:10px;top:22px;width:34px;height:34px;object-fit:contain}
.badge .nom{position:absolute;left:50px;top:24px;font:700 10.5px var(--f-titre);letter-spacing:.12em;color:#fff}
.badge .role{position:absolute;left:50px;top:39px;font-size:10px;letter-spacing:.16em;color:var(--sarcelle);text-transform:uppercase}
.badge .puce{position:absolute;right:11px;bottom:10px;width:17px;height:13px;border-radius:3px;background:linear-gradient(135deg,#FFFFFF,#78D2C3);opacity:.85}
.badge .led{position:absolute;right:11px;top:10px;width:7px;height:7px;border-radius:50%;background:#2F6F67;transition:background-color .15s,box-shadow .15s}
.badge.lien .led{background:var(--sarcelle);box-shadow:0 0 8px var(--sarcelle)}
.badge.ok .led{background:var(--acces);box-shadow:0 0 10px var(--acces)}

.maquette{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--texte);color:var(--nuit);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- Catalogue
   Rayons : identiques au site (pilule pour les actions, 16 px pour les cartes, 10 px pour les champs). */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.passerelle{margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 26px;border-radius:16px;border:1px solid var(--filet-fort);background:var(--fond-2);text-decoration:none;transition:border-color .2s var(--courbe),background-color .2s var(--courbe)}
.passerelle:hover{border-color:var(--sarcelle);background:var(--surface)}
.passerelle .pictos{width:48px;height:48px;border-radius:50%;background:rgba(85,192,173,.14);color:var(--sarcelle);display:grid;place-items:center}
.passerelle .pictos .ico{width:24px;height:24px}
.passerelle b{display:block;font-family:var(--f-titre);font-size:1.15rem}
.passerelle span span{color:var(--texte-2)}
.passerelle .suite{color:var(--sarcelle);font-weight:700;font-family:var(--f-titre)}
@media (max-width:700px){.passerelle{grid-template-columns:auto minmax(0,1fr)}.passerelle .suite{grid-column:2}}

.fil{margin-bottom:20px;font-size:15px;color:var(--texte-2)}
.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0}
.fil li+li::before{content:"/";margin-inline:10px;color:var(--texte-3)}
.fil a{text-decoration:none}
.fil a:hover{color:var(--texte);text-decoration:underline;text-underline-offset:3px}
.fil [aria-current]{color:var(--texte)}

.recherche{display:grid;gap:12px;margin-bottom:12px;background:none;border:0;padding:0}
.recherche label{font-weight:700}
.champ-recherche{position:relative}
.champ-recherche .ico{position:absolute;left:16px;top:50%;translate:0 -50%;width:20px;height:20px;color:var(--texte-2);pointer-events:none}
.champ-recherche input{padding-left:46px;min-height:56px;font-size:18px;border-radius:999px}
.filtres-cat{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bascule{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;color:var(--texte-2);cursor:pointer;min-height:44px}
.bascule input{width:18px;height:18px;min-height:0;accent-color:var(--sarcelle)}
.resultats{display:grid;gap:8px;margin-top:8px}
.resultats-info{color:var(--texte-2);font-size:15.5px}
.ligne-prod{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 16px;border-radius:12px;border:1px solid var(--filet);background:var(--fond-2)}
.ligne-prod:hover{border-color:var(--filet-fort);background:var(--surface)}
.ligne-prod .lp-ref{font-family:var(--f-titre);font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ligne-prod .lp-ref a{text-decoration:none}
.ligne-prod .lp-ref a:hover{text-decoration:underline;text-underline-offset:3px}
.ligne-prod .tit{color:var(--texte-2);font-size:16px;min-width:0}
.ligne-prod .tit small{display:block;color:var(--texte-3);font-size:14px}
.ligne-prod .actions{display:flex;gap:8px;align-items:center}
.etiquette{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--sarcelle-clair);border:1px solid var(--filet-fort);border-radius:999px;padding:4px 10px;white-space:nowrap;font-size:1.3em}
.etiquette .ico{width:14px;height:14px}
.ajout{font:700 14px var(--f-titre);border:1px solid var(--filet-fort);background:transparent;color:var(--texte);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:1.3em}
.ajout:hover{border-color:var(--sarcelle);background:rgba(85,192,173,.08)}
.ajout[data-ajoute="true"]{background:rgba(85,192,173,.16);border-color:var(--sarcelle);color:var(--sarcelle-clair)}
.ajout .ico{width:16px;height:16px}
@media (max-width:760px){.ligne-prod{grid-template-columns:minmax(0,1fr)}.ligne-prod .actions{justify-content:flex-start}}

.domaine{display:grid;gap:18px;scroll-margin-top:96px}
.domaine+.domaine{margin-top:clamp(40px,6vw,64px)}
.domaine-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.domaine-tete p{color:var(--texte-2)}
.gammes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gamme{display:grid;gap:8px;align-content:start;padding:20px 22px;border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);text-decoration:none;transition:border-color .2s var(--courbe),background-color .2s var(--courbe)}
.gamme:hover{border-color:var(--sarcelle);background:var(--surface)}
.gamme h3{font-size:1.1rem}
.gamme p{color:var(--texte-2);font-size:15.5px}
.gamme .compte{color:var(--sarcelle-clair);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
@media (max-width:900px){.gammes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gammes{grid-template-columns:minmax(0,1fr)}}

.sous-gamme{display:grid;gap:10px;scroll-margin-top:96px}
.sous-gamme+.sous-gamme{margin-top:36px}
.sous-gamme h2{font-size:1.25rem;line-height:1.25}
.doc-gamme{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

.produit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,56px);align-items:start}
.produit .marque{color:var(--sarcelle);font-weight:700;font-size:15.5px}
.produit h1{font-size:clamp(2rem,3.6vw,3rem);margin-top:6px;overflow-wrap:anywhere}
.produit .designation{font-size:21px;color:#FFFFFF;margin-top:12px;max-width:52ch}
.produit .caracs{margin-top:24px}
.produit .paras{margin-top:18px;display:grid;gap:10px;color:var(--texte-2);max-width:62ch}
.infos{margin:28px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);border-radius:16px;border:1px solid var(--filet);overflow:hidden}
.infos dt,.infos dd{margin:0;padding:12px 18px;border-bottom:1px solid var(--filet)}
.infos dt{color:var(--texte-2);font-size:15.5px;background:var(--fond-2)}
.infos dd{font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.infos dt:nth-last-of-type(1),.infos dd:last-of-type{border-bottom:0}
.cote{position:sticky;top:96px;display:grid;gap:16px}
.carte-fiche,.carte-devis{border-radius:16px;border:1px solid var(--filet);background:var(--surface);padding:20px;display:grid;gap:14px}
.carte-fiche .apercu{display:block;border-radius:10px;overflow:hidden;background:#F4F7F6;aspect-ratio:210/297;max-height:340px;justify-self:center;width:min(100%,240px)}
.carte-fiche .apercu img{width:100%;height:100%;object-fit:cover;object-position:top}
.carte-fiche h2,.carte-devis h2{font-size:1.15rem}
.carte-fiche p{color:var(--texte-2);font-size:15.5px}
.carte-fiche .btn{justify-self:start}
.qte{display:flex;align-items:center;gap:10px}
.qte label{font-weight:700;font-size:15.5px}
.qte input{width:96px;min-height:44px;text-align:center}
.carte-devis .btn{width:100%}
.carte-devis .lien-fleche{justify-self:start}
.carte-devis .prix{font-family:var(--f-titre);font-weight:700;font-size:1.3rem}
.carte-devis .prix small{display:block;font-family:var(--f-texte);font-weight:400;font-size:15px;color:var(--texte-2)}
@media (max-width:900px){.produit{grid-template-columns:minmax(0,1fr)}.cote{position:static}}
.garanties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.garanties div{border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);padding:20px;display:grid;gap:8px;align-content:start}
.garanties .ico{width:26px;height:26px;color:var(--sarcelle)}
.garanties b{font-family:var(--f-titre)}
.garanties span{color:var(--texte-2);font-size:16px}
@media (max-width:760px){.garanties{grid-template-columns:minmax(0,1fr)}}
.voisins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.voisin{display:grid;gap:6px;padding:16px 18px;border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);text-decoration:none}
.voisin:hover{border-color:var(--sarcelle)}
.voisin b{font-family:var(--f-titre);overflow-wrap:anywhere}
.voisin span{color:var(--texte-2);font-size:15.5px}
@media (max-width:860px){.voisins{grid-template-columns:minmax(0,1fr)}}

.panier-flottant{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 20px;border-radius:999px;background:var(--sarcelle);color:var(--nuit);font:700 15.5px var(--f-titre);text-decoration:none;box-shadow:0 8px 20px rgba(4,10,15,.45)}
.panier-flottant .ico{width:20px;height:20px}
.panier-flottant b{background:var(--nuit);color:var(--sarcelle);border-radius:999px;padding:2px 9px;font-size:14px;font-variant-numeric:tabular-nums}

.devis{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,56px);align-items:start}
.lignes-devis{display:grid;gap:8px}
.ligne-devis{display:grid;grid-template-columns:minmax(0,1fr) 92px auto;gap:12px;align-items:center;padding:12px 16px;border-radius:12px;border:1px solid var(--filet);background:var(--fond-2)}
.ligne-devis b{font-family:var(--f-titre);overflow-wrap:anywhere}
.ligne-devis span{display:block;color:var(--texte-2);font-size:15px}
.ligne-devis input{min-height:44px;text-align:center}
.retirer{font:700 14px var(--f-titre);border:0;background:transparent;color:var(--texte-2);cursor:pointer;min-height:40px;padding:8px 10px;border-radius:999px}
.retirer:hover{color:var(--erreur);background:rgba(255,138,128,.1)}
.vide-devis{border-radius:16px;border:1px dashed var(--filet-fort);padding:32px;display:grid;gap:12px;justify-items:start}
.vide-devis p{color:var(--texte-2)}
@media (max-width:900px){.devis{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ligne-devis{grid-template-columns:minmax(0,1fr) 80px}.ligne-devis .retirer{grid-column:1/-1;justify-self:start}}
.catalogue .maquette{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
@media (max-width:560px){.infos{grid-template-columns:minmax(0,1fr)}.infos dt{border-bottom:0;padding-bottom:2px}.infos dd{padding-top:2px}}
.clients{display:grid;gap:0;border-top:1px solid var(--filet)}
.client-ligne{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px 28px;padding-block:18px;border-bottom:1px solid var(--filet);align-items:baseline}
.client-ligne h3{font-size:1.05rem;color:var(--texte-2)}
.client-ligne .puces span{color:var(--texte);font-weight:700}
@media (max-width:700px){.client-ligne{grid-template-columns:minmax(0,1fr)}}
.liste-partenaires{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.liste-partenaires li{border-radius:16px;border:1px solid var(--filet);background:var(--fond-2);padding:18px 20px;display:grid;gap:6px;align-content:start}
.liste-partenaires b{font-family:var(--f-titre);letter-spacing:.02em}
.liste-partenaires span{color:var(--texte-2);font-size:16px}
@media (max-width:900px){.liste-partenaires{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.liste-partenaires{grid-template-columns:minmax(0,1fr)}}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.logos li{height:96px;display:grid;place-items:center;padding:12px 14px;border-radius:12px;transition:background-color .2s var(--courbe)}
.logos li:hover{background:var(--fond-2)}
.logos img{max-height:60px;max-width:100%;width:auto;height:auto;object-fit:contain}
.logos-partenaires img{max-height:54px}
@media (max-width:560px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}.logos li{height:76px;padding:8px}.logos img{max-height:44px}}

/* Sites sensibles : bloc à part des cinq métiers */
.sensible{position:relative;overflow:hidden;margin-top:16px;border-radius:20px;border:1px solid var(--filet-fort);background:linear-gradient(130deg,#284A56 0%,var(--petrole) 55%,#12242E 100%);padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,48px);align-items:center}
.sensible .arcs{right:-140px;bottom:-200px;width:520px;height:520px;opacity:.18}
.sensible>*:not(.arcs){position:relative}
.sensible-tete{display:grid;gap:14px;align-content:start}
.sensible-tete .pictos{width:56px;height:56px;border-radius:50%;background:var(--sarcelle);color:var(--nuit);display:grid;place-items:center}
.sensible-tete .pictos .ico{width:28px;height:28px}
.sensible-tete h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.sensible-tete p{color:#FFFFFF;max-width:52ch}
.sensible .coches li span{color:var(--texte)}
@media (max-width:860px){.sensible{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- Thème clair (proposition)
   Contenu sur blanc et gris clair, texte pétrole ; le pétrole sombre sert d'accent :
   en-tête, ouverture des pages, bandeaux d'appel, sites sensibles, logos, pied de page. */
.clair main,.clair .site{
  --nuit:#FFFFFF; --fond-2:#F6F8F9; --surface:#FFFFFF; --surface-2:#EAEFF1;
  --texte:#1C343E; --texte-2:#3B535D; --texte-3:#55696E;
  --sarcelle:#55C0AD; --sarcelle-clair:#78D2C3; --filet:#DCE2E4; --filet-fort:#A9B7BB;
  --acces:#55C0AD; --erreur:#B3261E; color-scheme:light; color:var(--texte)}
.clair :is(.ouverture,.zone,.appel,.sensible,.fiche-photo,.encart.plein,.partenaire.majeur,.sombre,.panier-flottant,.pied){
  --nuit:#101E26; --fond-2:#14262F; --surface:#192E38; --surface-2:#1F3742;
  --texte:#FFFFFF; --texte-2:#FFFFFF; --texte-3:#D3E2DF;
  --sarcelle:#55C0AD; --sarcelle-clair:#78D2C3; --filet:rgba(120,210,195,.16); --filet-fort:rgba(120,210,195,.32);
  --acces:#5EE0A8; color-scheme:dark; color:var(--texte)}
.clair.page main{background:#FFFFFF}
.clair .site{background:#FFFFFF;box-shadow:none}
.clair :is(main,.site)>.bloc:nth-of-type(even):not(.sombre){background:#F2F4F5}
.clair .pied{background:#101E26}
.clair .ouverture,.clair .sombre{background:radial-gradient(120% 90% at 0% 0%,#24434E 0%,var(--petrole) 45%,#12242E 100%);color:var(--texte)}
.clair .sombre+.sombre{border-top-color:rgba(120,210,195,.16)}
.clair .btn-plein{background:var(--sarcelle);color:#fff}
.clair .btn-plein:hover{background:#78D2C3}
.clair :is(.entete,.tiroir,.ouverture,.zone,.appel,.sensible,.sombre) .btn-plein{background:#55C0AD;color:#101E26}
.clair :is(.entete,.tiroir,.ouverture,.zone,.appel,.sensible,.sombre) .btn-plein:hover{background:#78D2C3}
.clair :is(.sommaire a.actif,.filtre[aria-pressed="true"],.metier .pictos){color:#fff}
.clair .metier .lead,.clair .jalon .pour,.clair .recit-societe .texte,.clair .produit .designation{color:var(--texte)}
.clair :is(.tuile,.atout,.ref,.groupe,.jalon .corps,.partenaire:not(.majeur),.gamme,.ligne-prod,.coord,.carte-fiche,.carte-devis,.voisin,.garanties div,.autre,.paire figure,.passerelle,.faits,.ligne-devis,.infos,form){box-shadow:0 1px 2px rgba(28,52,62,.06),0 8px 22px rgba(28,52,62,.07)}
.clair .chiffres{border-color:var(--filet)}
.clair .panier-flottant,.clair .panier-flottant span{background:#55C0AD;color:#101E26}
.clair .panier-flottant span{background:none}

/* Logos des marques (couleurs d'origine) sur la page Solutions */
.marques-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.marques-logos li{background:#FFFFFF;border:1px solid var(--filet);border-radius:10px;height:68px;padding:8px 12px;display:grid;place-items:center;align-content:center;gap:2px}
.marques-logos img{max-height:38px;max-width:100%;width:auto;height:auto;object-fit:contain}
.marques-logos li:has(span) img{max-height:26px}
.marques-logos span{font-size:11.5px;font-weight:700;color:#3B535D;line-height:1}

/* Logos clients et partenaires en couleurs d'origine (page Références) */
.logos-couleur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.logos-couleur li{background:#FFFFFF;border-radius:12px;height:88px;padding:12px 16px;display:grid;place-items:center;box-shadow:0 1px 2px rgba(4,10,15,.18)}
.logos-couleur img{max-height:54px;max-width:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:560px){.logos-couleur{grid-template-columns:repeat(2,minmax(0,1fr))}.logos-couleur li{height:76px}.logos-couleur img{max-height:46px}}

/* ---------------------------------------------------------------- Corrections de l'audit (version « après ») */
html:has(.clair){color-scheme:light}
/* Téléphone dans l'en-tête : numéro sur ordinateur, icône sur téléphone */
.tel-entete{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--f-titre);text-decoration:none;color:var(--texte);white-space:nowrap;min-height:44px;padding:0 4px}
.tel-entete .ico{width:20px;height:20px;color:var(--sarcelle)}
.tel-entete:hover span{text-decoration:underline;text-underline-offset:4px}
@media (max-width:1180px) and (min-width:961px){.tel-entete span{display:none}}
@media (max-width:960px){.tel-entete{margin-left:auto;width:44px;justify-content:center;border:1px solid var(--filet-fort);border-radius:999px}.tel-entete span{display:none}.tel-entete+.burger,.tel-entete~.burger{margin-left:0}}
/* Menu téléphone : sous l'en-tête, pour que « Fermer » reste visible */
.tiroir{z-index:39}
.tiroir .btn-trait{margin-top:0;gap:10px}
/* Demande de devis : dans l'en-tête sur ordinateur, barre pleine largeur sur téléphone */
.btn-devis{gap:10px}
.btn-devis .ico{width:18px;height:18px}
.btn-devis b{background:#101E26;color:#55C0AD;border-radius:999px;padding:1px 9px;font-size:13.5px;font-variant-numeric:tabular-nums}
@media (min-width:961px){.panier-flottant{display:none}}
@media (max-width:960px){
  .panier-flottant{left:12px;right:12px;justify-content:center;border-radius:14px}
  body.catalogue:not(.page-devis){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
.catalogue .maquette{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.page-devis .maquette{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* Accueil : titre plus lisible, pied de page hors de la scène */
.hero h1{max-width:20ch}
@media (max-width:960px){.hero .wrap{padding-block:96px 40vh}}
.accueil .pied{position:relative;z-index:2}
/* Photos des références : voile dès le haut pour que le texte reste lisible */
.fiche-photo::after{background:linear-gradient(180deg,rgba(16,30,38,.18) 0%,rgba(16,30,38,.55) 45%,rgba(16,30,38,.94) 100%)}
/* Champs : bordure à 3:1 sur blanc */
.clair main :is(input,select,textarea){border-color:#7E8F94}
.clair main [aria-invalid="true"]{border-color:var(--erreur)}
.rgpd{font-size:14.5px;color:var(--texte-2)}
.rgpd a{color:var(--sarcelle)}
/* Contact : coordonnées avant le formulaire sur téléphone */
.contact-cote{display:grid;gap:28px}
.coord a.val{text-decoration:none}
.coord a.val:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.contact{display:flex;flex-direction:column}.contact-cote{display:contents}.coordonnees{order:-1}}
/* Fiche produit : désignation en titre, référence dessous, devis juste après sur téléphone */
.produit{grid-template-areas:"tete cote" "corps cote";grid-template-rows:auto 1fr;row-gap:0}
.p-tete{grid-area:tete}
.p-corps{grid-area:corps}
.produit .cote{grid-area:cote;align-self:start}
.produit h1{font-size:clamp(1.7rem,3vw,2.5rem);max-width:28ch}
.ref-produit{margin-top:14px;font-size:17px;color:var(--texte-2)}
.ref-produit b{display:inline-block;font:700 1.35rem var(--f-titre);color:var(--texte);letter-spacing:.01em;overflow-wrap:anywhere;margin-left:4px}
.carte-devis .btn{white-space:normal;text-align:center}
@media (max-width:900px){
  .produit{display:flex;flex-direction:column;gap:20px}
  .produit .cote{display:contents}
  .p-tete{order:1}.carte-devis{order:2}.p-corps{order:3}.carte-fiche{order:4}
}
/* Références et mentions */
.sous-titre-logos{font-size:1.2rem;margin:40px 0 16px}
.texte-legal{max-width:72ch;display:grid;gap:14px}
.texte-legal h2{font-size:1.35rem;margin-top:22px}
.texte-legal h2:first-child{margin-top:0}
.texte-legal p{color:var(--texte-2)}
mark.a-completer{background:#FFF0B8;color:#4D3B00;border-radius:4px;padding:0 5px;font-weight:700}
.nav a{white-space:nowrap;font-size:1.3em}
@media (max-width:1400px) and (min-width:961px){.catalogue .tel-entete span{display:none}}
.catalogue main>.wrap{padding-top:24px}
/* Intitulés du menu en majuscules (demande du client) */
.nav a,.tiroir a:not(.btn){text-transform:uppercase;letter-spacing:.04em}
.nav a{font-size:14px}
.nav{gap:22px}
@media (max-width:1240px) and (min-width:961px){.nav{gap:16px}.nav a{font-size:13px;letter-spacing:.02em}.tel-entete span{display:none}}
.tiroir a:not(.btn){font-size:1.35rem}
.entete .logo,.entete .btn,.tel-entete,.burger{flex:none}
@media (max-width:1320px) and (min-width:961px){.catalogue .nav{gap:14px}.catalogue .nav a{font-size:13px;letter-spacing:.02em}.btn-devis>span{display:none}.btn-devis::after{content:"Mon devis"}}
/* En-tête : le menu en majuscules prend plus de place, on resserre par paliers */
@media (min-width:961px){.catalogue .tel-entete span{display:none}}
@media (max-width:1400px) and (min-width:961px){.tel-entete span{display:none}}
@media (max-width:1180px) and (min-width:961px){
  .entete .wrap{gap:16px}.entete .logo img{height:32px}
  .nav,.catalogue .nav{gap:14px}.nav a,.catalogue .nav a{font-size:13px;letter-spacing:.02em}
  .entete .btn{padding:9px 14px}
}
/* Téléphone de l'en-tête : icône seule, partout (demande du client) */
.tel-entete{width:44px;height:44px;padding:0;justify-content:center;border:1px solid var(--filet-fort);border-radius:999px;transition:background-color .2s var(--courbe),border-color .2s var(--courbe)}
.tel-entete:hover{background:rgba(85,192,173,.14);border-color:var(--sarcelle)}
@media (min-width:961px){.tel-entete{margin-left:4px}}
@media (max-width:1060px) and (min-width:961px){.entete .wrap{gap:12px}.nav,.catalogue .nav{gap:11px}.nav a,.catalogue .nav a{font-size:12.5px;letter-spacing:.01em}}
/* Bandeaux d'appel : icône téléphone à côté du bouton, sans numéro écrit */
.appel .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tel-rond{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:999px;border:1px solid var(--filet-fort);color:var(--sarcelle);transition:background-color .2s var(--courbe),border-color .2s var(--courbe)}
.tel-rond .ico{width:22px;height:22px}
.tel-rond:hover{background:rgba(85,192,173,.14);border-color:var(--sarcelle)}
/* Accueil sur téléphone : pas de lecteur (ni 3D ni image), le titre occupe l'ouverture */
.scene-fixe .scene .repli,.scene-fixe .scene canvas,.scene-fixe .etat{display:none!important}
@media (max-width:960px){
  .scene-fixe .hero{min-height:auto}
  .scene-fixe .hero .wrap{padding-block:120px 72px}
}
.scene>.arcs{display:none}
.scene-fixe .scene>.arcs{display:block;right:-200px;top:-60px;width:560px;height:560px;opacity:.18}
/* Fiche produit : présentation */
.intro-ref{margin-top:20px;color:var(--texte-2);max-width:62ch}
.presentation{margin-top:28px;padding-top:24px;border-top:1px solid var(--filet);display:grid;gap:12px;max-width:66ch}
.presentation h2{font-size:1.3rem}
.presentation h3{font-size:1.05rem;margin-top:4px}
.presentation .source{font-size:14.5px;color:var(--texte-3)}
.presentation p{color:var(--texte-2)}
.presentation .plus{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.presentation .plus li{color:var(--texte-2);padding-left:14px;border-left:3px solid var(--sarcelle)}
.presentation .plus b{display:block;color:var(--texte);font-family:var(--f-titre)}
.p-corps .infos{margin-top:28px}

/* ================================================================ Version 3 : accueil au défilement (scroll-craft) */
:root{--sc-accent:#55C0AD;--sc-accent-ink:#101E26;--sc-canvas:#FFFFFF;--sc-ink:#1C343E;--sc-ink-soft:#3B535D;--sc-font-display:var(--f-titre);--sc-font-text:var(--f-texte)}
.accueil .ico,.page .ico{display:inline-block}
/* Dehors : plan lointain (arcs), puis la scène 3D transparente, puis le texte */
.scene>.arcs{display:block;right:-160px;top:-120px;width:820px;height:820px;opacity:.15;transform:translate3d(0,calc(var(--defil,0) * -70px),0)}
.scene canvas{background:transparent}
/* Le seuil : l'arrêt sur image du badge */
.seuil{position:relative}
.seuil-scene{z-index:1}
.seuil-ligne{position:absolute;left:50%;bottom:clamp(4.5rem,12vh,8rem);translate:-50% 0;margin:0;width:max-content;max-width:calc(100vw - 32px);text-align:center;font-family:var(--f-titre);font-weight:700;font-size:clamp(1.45rem,2.4vw,2.2rem);letter-spacing:-.01em;color:#FFFFFF;z-index:20}
.seuil-ligne--ok{color:#5EE0A8}
/* La porte : l'intérieur clair s'ouvre en cercle depuis le lecteur */
.porte{position:absolute;inset:0;z-index:30;pointer-events:none;background:#FFFFFF;clip-path:circle(var(--porte-r,0px) at var(--porte-x,50%) var(--porte-y,50%))}
@media (prefers-reduced-motion: reduce){.porte{display:none}}
/* Version dessinée (téléphone, ou ordinateur sans 3D) : badge et voyant */
.dessin{display:none}
.sans-webgl .dessin{display:block;position:absolute;left:50%;top:44%;translate:-50% -50%;width:min(78vw,360px);height:auto;overflow:visible;z-index:2}
.d-arc{fill:none;stroke:#55C0AD;stroke-width:5;stroke-linecap:round;transition:stroke .3s}
.d-arc--2{stroke:#FFFFFF}
.d-voyant{fill:#55C0AD;transition:fill .3s}
.d-onde{fill:none;stroke:#55C0AD;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.proche .d-onde{animation:d-onde 1.1s ease-out infinite}
.proche .d-onde--2{animation-delay:.36s}.proche .d-onde--3{animation-delay:.72s}
.acces-ok .d-onde{stroke:#5EE0A8;animation:d-onde .9s ease-out 2}
.acces-ok .d-voyant,.acces-ok .d-arc--1,.acces-ok .d-arc--3{fill:#5EE0A8;stroke:#5EE0A8}
.acces-ok .d-arc--1,.acces-ok .d-arc--3{fill:none}
@keyframes d-onde{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(3.2)}}
.d-badge{will-change:transform}
.d-badge>rect:first-child{fill:rgba(28,52,62,.92);stroke:#78D2C3;stroke-width:2;transition:stroke .3s}
.acces-ok .d-badge>rect:first-child{stroke:#5EE0A8}
.d-bande{stroke:#78D2C3;stroke-width:2}
.d-fente{fill:#101E26;stroke:#78D2C3;stroke-width:1.5}
.d-badge text{fill:#FFFFFF;font:700 26px Arial,Arimo,sans-serif;letter-spacing:.04em}
.d-trait{stroke:#55C0AD;stroke-width:4;stroke-linecap:round}
@media (prefers-reduced-motion: reduce){.d-onde{animation:none!important}}
/* Dedans */
.bienvenue{color:var(--sarcelle);font-family:var(--f-titre);font-weight:700;font-size:1.05rem;margin:0 0 10px}
.dedans{padding-top:clamp(56px,8vw,96px)}
.sas{display:block}
/* Les photos des références respirent dans leur cadre */
.vitrine .fiche-photo img[data-sc-parallax]{top:-12%;bottom:auto;height:124%;transition:none}
/* Corrections après les premières captures */
.seuil-ligne{bottom:clamp(1.5rem,6vh,3.5rem)}
@media (max-width:960px){.seuil-ligne{bottom:auto;top:calc(76px + 6vh)}}
.porte{display:grid;place-items:center}
.porte p{margin:0;font-family:var(--f-titre);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.8rem);letter-spacing:-.01em;color:#1C343E;text-align:center;padding:0 16px}
.dedans{padding-top:clamp(40px,5vw,64px)}

/* ---------------------------------------------------------------- v3 : la scène photo du lecteur (ordinateur) */
.scene{perspective:1600px;--vert:#4FE39A}
.s-halo,.s-lecteur,.s-badge,.s-anneau{display:none}
.scene-photo .s-halo,.scene-photo .s-lecteur,.scene-photo .s-badge{display:block}
.scene-photo .scene canvas{display:none}
/* plan lointain : les arcs, plus lents ; plan moyen : la lumière derrière le lecteur */
.scene-photo .scene>.arcs{transform:translate3d(calc(var(--mx,0) * -16px),calc(var(--defil,0) * -70px + var(--my,0) * -10px),0)}
.s-halo{position:absolute;left:calc(70% - 42vw);top:calc(55% - 42vw);width:84vw;height:84vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(120,210,195,.22),rgba(120,210,195,.08) 45%,transparent 72%);
  transform:translate3d(calc(var(--ks,0) * -20vw + var(--mx,0) * -8px),calc(var(--ks,0) * -8vh),0);transition:background .5s}
.acces-ok .s-halo,.flash-ok .s-halo{background:radial-gradient(closest-side,rgba(79,227,154,.30),rgba(79,227,154,.10) 45%,transparent 72%)}
/* le lecteur (photo) */
.s-lecteur{position:absolute;left:0;top:0;width:var(--lw,400px);aspect-ratio:951/1100;will-change:transform}
.s-lecteur img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(18px 34px 38px rgba(5,12,17,.55)) drop-shadow(4px 8px 10px rgba(5,12,17,.4))}
/* la tranche translucide : blanche au repos, verte à l'autorisation */
.s-tranche{position:absolute;inset:0;background:#FFFFFF;-webkit-mask:url(img/lecteur-tranche.png) center/100% 100% no-repeat;mask:url(img/lecteur-tranche.png) center/100% 100% no-repeat;mix-blend-mode:screen;opacity:.18;transition:background-color .2s,opacity .25s}
.s-tranche--halo{filter:blur(18px);transform:scale(1.04);opacity:.0}
@media (prefers-reduced-motion: no-preference){.s-tranche{animation:respire 3.6s ease-in-out infinite}.proche .s-tranche{animation-duration:1.1s}}
@keyframes respire{50%{opacity:.4}}
.acces-ok .s-tranche,.flash-ok .s-tranche{background:var(--vert);opacity:1;animation:none}
.acces-ok .s-tranche--halo,.flash-ok .s-tranche--halo{opacity:.95}
/* les ondes de lecture, depuis la croix de visée */
.s-ondes{position:absolute;left:44.16%;top:36.18%;width:0;height:0}
.s-ondes i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:2px solid rgba(120,210,195,.9);opacity:0}
@media (prefers-reduced-motion: no-preference){
  .proche .s-ondes i{animation:onde-l 1.1s ease-out infinite}.proche .s-ondes i:nth-child(2){animation-delay:.36s}.proche .s-ondes i:nth-child(3){animation-delay:.72s}
  .acces-ok .s-ondes i,.flash-ok .s-ondes i{border-color:var(--vert);animation:onde-l .95s ease-out 2}.acces-ok .s-ondes i:nth-child(2),.flash-ok .s-ondes i:nth-child(2){animation-delay:.16s}.acces-ok .s-ondes i:nth-child(3),.flash-ok .s-ondes i:nth-child(3){animation-delay:.32s}
}
@keyframes onde-l{from{opacity:.95;transform:scale(.35)}to{opacity:0;transform:scale(3.4)}}
/* le badge : premier plan, flou quand il est près de l'œil, net sur le lecteur */
.s-badge{position:absolute;left:0;top:0;width:var(--bw,340px);transform-origin:50% 50%;will-change:transform,filter;visibility:hidden;
  filter:blur(var(--flou,0px)) drop-shadow(0 22px 26px rgba(5,12,17,.45)) drop-shadow(0 4px 6px rgba(5,12,17,.35))}
.s-carte{display:block;width:100%;height:auto;border-radius:4.4%}
/* l'anneau de lumière au bord de la porte */
.porte-anneau{position:absolute;z-index:31;pointer-events:none;left:calc(var(--porte-x,50%) - var(--porte-r,0px));top:calc(var(--porte-y,50%) - var(--porte-r,0px));
  width:calc(var(--porte-r,0px) * 2);height:calc(var(--porte-r,0px) * 2);border-radius:50%;
  box-shadow:0 0 0 2px rgba(79,227,154,.9),0 0 34px 8px rgba(79,227,154,.45);opacity:calc(min(var(--porte-k,0) * 14, 1) * (1 - var(--porte-k,0)) * 1.4)}
@media (prefers-reduced-motion: reduce){.porte-anneau{display:none}}
/* zone sensible : la lumière rouge des lecteurs, accès réglementé */
.feu-rouge{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:14.5px;font-weight:700;letter-spacing:.02em;color:#FFB4AE}
.feu-rouge span{width:10px;height:10px;border-radius:50%;background:#F0524A;box-shadow:0 0 0 3px rgba(240,82,74,.18),0 0 14px 2px rgba(240,82,74,.6)}
/* v3 : lumière de la tranche rendue d'après la photo (variante B du marquage) */
.s-tranche--halo{background:var(--vert);filter:blur(22px);transform:scale(1.05);opacity:0;mix-blend-mode:screen;animation:none}
.s-lumiere{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .22s ease-out}
.acces-ok .s-lumiere,.flash-ok .s-lumiere{opacity:1}
.acces-ok .s-tranche--halo,.flash-ok .s-tranche--halo{opacity:.85;background:var(--vert)}
.porte p{opacity:clamp(0, calc((var(--porte-k,0) - .4) * 3), 1)}
/* v3 : la tranche en veille, blanc froid et lumineux, qui respire très doucement */
.s-veille{position:absolute;inset:0;width:100%;height:100%;opacity:.92;transition:opacity .22s ease-out}
@media (prefers-reduced-motion: no-preference){.s-veille{animation:veille 4.2s ease-in-out infinite}.proche .s-veille{animation-duration:1.2s}}
@keyframes veille{50%{opacity:.72}}
.acces-ok .s-veille,.flash-ok .s-veille{opacity:0;animation:none}
.s-tranche--halo{background:#D6F0EC;opacity:.35}

/* ================================================================ Catalogue : prix et demande de devis (conversion) */
/* Prix dans les listes */
.ligne-prod{grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto auto}
.lp-prix{display:flex;align-items:baseline;gap:6px;justify-content:flex-end;white-space:nowrap;font-variant-numeric:tabular-nums}
.lp-prix s{color:var(--texte-3);font-size:14px}
.lp-prix b{font-family:var(--f-titre);font-size:17px;color:var(--texte)}
.lp-prix small{color:var(--texte-3);font-size:13px}
.sur-devis{color:var(--texte-2);font-size:15px}
@media (max-width:760px){.lp-prix{justify-content:flex-start}}
/* Bloc prix de la fiche produit */
.carte-devis .prix{font-family:var(--f-texte);font-weight:400;font-size:16px;display:grid;gap:2px}
.prix-public{color:var(--texte-2);font-size:15px}
.prix-public s{color:var(--texte-2)}
.prix-cyb{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:16px;color:var(--texte-2)}
.prix-cyb b{font-family:var(--f-titre);font-size:2rem;letter-spacing:-.01em;color:var(--texte);font-variant-numeric:tabular-nums}
.pastille{font:700 13px var(--f-titre);color:#101E26;background:#55C0AD;border-radius:999px;padding:3px 9px}
.prix-ttc{font-size:14.5px;color:var(--texte-2)}
.rassure{list-style:none;margin:2px 0 0;padding:12px 0 0;border-top:1px solid var(--filet);display:grid;gap:8px}
.rassure li{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--texte-2)}
.rassure .ico{width:18px;height:18px;color:var(--sarcelle);flex:none}
/* Promesses en tête du catalogue */
.promesses{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1000px}
.promesses li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--filet);color:var(--texte-2);font-size:15.5px;line-height:1.4}
.promesses b{display:block;color:var(--texte);font-family:var(--f-titre)}
.promesses .ico{width:22px;height:22px;color:var(--sarcelle);flex:none;margin-top:2px}
@media (max-width:860px){.promesses{grid-template-columns:minmax(0,1fr)}}
/* Confirmation après un ajout */
.toast-devis{position:fixed;z-index:70;right:24px;bottom:24px;width:min(380px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;
  padding:16px 18px;border-radius:16px;background:#101E26;color:#FFFFFF;box-shadow:0 18px 40px rgba(4,10,15,.35),0 2px 6px rgba(4,10,15,.25);
  opacity:0;transform:translate3d(0,14px,0);pointer-events:none;transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .22s cubic-bezier(.23,1,.32,1)}
.toast-devis.visible{opacity:1;transform:none;pointer-events:auto}
.toast-devis p{margin:0;grid-column:1}
.toast-devis b{font-family:var(--f-titre)}
.toast-total{color:#FFFFFF;font-size:15px;font-variant-numeric:tabular-nums}
.toast-devis .btn{grid-column:2;grid-row:1 / span 2;background:#55C0AD;color:#101E26;min-height:44px;padding:10px 16px;font-size:15px}
.toast-fermer{grid-column:1 / -1;justify-self:start;background:none;border:0;color:#FFFFFF;font:700 14px var(--f-titre);cursor:pointer;padding:4px 0;min-height:32px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){.toast-devis{left:12px;right:12px;width:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion: reduce){.toast-devis{transition:opacity .15s}}
/* Page devis */
.devis{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.devis-titre{font-size:1.4rem;margin-bottom:16px}
.devis-titre span{font-family:var(--f-texte);font-weight:400;color:var(--texte-2);font-size:1rem}
.lignes-devis{display:grid;gap:10px}
.ligne-devis{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"nom pu qte total" "nom pu retirer total";gap:6px 18px;padding:14px 16px;background:var(--surface)}
.ld-nom{grid-area:nom;min-width:0}
.ld-nom b{display:block}
.ld-nom b a{text-decoration:none}
.ld-nom b a:hover{text-decoration:underline;text-underline-offset:3px}
.ld-pu{grid-area:pu;display:grid;justify-items:end;font-variant-numeric:tabular-nums}
.ld-pu s{color:var(--texte-3);font-size:13.5px}
.ld-pu small,.ld-total small{color:var(--texte-3);font-size:13px}
.ld-qte{grid-area:qte;display:flex;align-items:center;border:1px solid #7E8F94;border-radius:10px;overflow:hidden;height:44px}
.ld-qte input{width:56px;min-height:0;height:42px;border:0!important;border-radius:0;text-align:center;padding:0 4px;-moz-appearance:textfield}
.ld-qte input::-webkit-inner-spin-button{-webkit-appearance:none}
.pas{width:40px;height:42px;border:0;background:transparent;color:var(--texte);font:700 20px var(--f-titre);cursor:pointer}
.pas:hover{background:var(--fond-2)}
.ld-total{grid-area:total;display:grid;justify-items:end;align-content:center;min-width:96px;font-variant-numeric:tabular-nums}
.ld-total b{font-family:var(--f-titre);font-size:17px}
.ligne-devis .retirer{grid-area:retirer;justify-self:center;font-size:13.5px;min-height:28px;padding:2px 8px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.ligne-devis{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nom nom" "pu total" "qte retirer"}.ld-pu{justify-items:start}}
.ajouter-plus{margin-top:14px}
.recherche-vide{display:flex;gap:8px;flex-wrap:wrap}
.recherche-vide input{flex:1 1 240px}
.devis-droite{display:grid;gap:16px;position:sticky;top:96px}
@media (max-width:900px){.devis-droite{position:static}}
.recap{border-radius:16px;border:1px solid var(--filet);background:var(--surface);padding:18px 20px;box-shadow:0 1px 2px rgba(28,52,62,.06),0 8px 22px rgba(28,52,62,.07)}
.recap h2{font-size:1.15rem;margin-bottom:10px}
.recap dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;margin:0;font-variant-numeric:tabular-nums}
.recap dt{color:var(--texte-2)}
.recap dd{margin:0;text-align:right}
.recap dd b{font-family:var(--f-titre);font-size:1.35rem}
.recap .eco{color:#55C0AD;font-weight:700}
.recap .ttc{padding-top:6px;border-top:1px solid var(--filet);font-weight:700;color:var(--texte)}
.recap-note,.recap-vide{margin-top:10px;font-size:14px;color:var(--texte-2)}
#form-devis h2{font-size:1.3rem}
.choix{display:grid;gap:8px}
.choix label{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #7E8F94;border-radius:10px;cursor:pointer;font-size:16px;min-height:46px}
.choix input{width:18px;height:18px;min-height:0;margin:0;accent-color:#55C0AD}
.choix label:has(input:checked){border-color:#55C0AD;background:rgba(85,192,173,.07);box-shadow:inset 0 0 0 1px #55C0AD}
.facultatif summary{cursor:pointer;font-weight:700;color:var(--sarcelle);padding:6px 0;list-style-position:inside}
.facultatif summary span{font-weight:400;color:var(--texte-2)}
.facultatif[open]{display:grid;gap:12px}
.btn-envoi{width:100%;min-height:54px;font-size:17px;justify-content:center;gap:10px}
.btn-envoi .ico{width:20px;height:20px}
.sous-bouton{font-size:14.5px;color:var(--texte-2);text-align:center;margin-top:-6px}
/* Confirmation finale */
.merci{max-width:720px;margin:0 auto;text-align:center;display:grid;gap:14px;justify-items:center;outline:none}
.merci-ok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#55C0AD;color:#101E26}
.merci-ok .ico{width:32px;height:32px}
.merci h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.merci-recap{width:100%;text-align:left}
.merci-recap ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.merci-recap li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--filet);font-size:15.5px}
.merci-recap li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.merci-total{text-align:right;margin-top:10px}
.merci-note{font-size:14px;color:var(--texte-2)}
.merci-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* Barre du bas sur téléphone (page devis) */
.barre-devis{position:fixed;z-index:60;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#101E26;color:#FFFFFF;box-shadow:0 -8px 24px rgba(4,10,15,.25)}
.barre-devis span{display:grid}
.barre-devis b{font-family:var(--f-titre);font-size:17px;font-variant-numeric:tabular-nums}
.barre-devis small{color:#FFFFFF;font-size:13.5px}
.barre-devis .btn{background:#55C0AD;color:#101E26;min-height:46px}
@media (max-width:960px){.barre-devis:not([hidden]){display:flex}.form-visible .barre-devis{display:none!important}body.page-devis{padding-bottom:84px}}
.panier-flottant span{font-variant-numeric:tabular-nums}
@media (max-width:760px){.ligne-prod{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ref ref" "tit tit" "prix actions"}.ligne-prod .lp-ref{grid-area:ref}.ligne-prod .tit{grid-area:tit}.ligne-prod .lp-prix{grid-area:prix;justify-content:flex-start}.ligne-prod .actions{grid-area:actions}}
@media (max-width:900px){.devis{grid-template-columns:minmax(0,1fr)}}
/* Page devis : en-tête resserré, la sélection doit être visible dès l'arrivée */
.page-devis .ouverture{padding-block:clamp(26px,3.5vw,40px)!important;min-height:0!important}
.page-devis .ouverture .wrap{padding-block:0!important}
.page-devis .ouverture h1{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.page-devis .ouverture .chapo{font-size:16.5px;margin-top:8px;max-width:62ch}
.page-devis main>.bloc,.page-devis .ouverture+.bloc{padding-top:clamp(24px,3vw,36px)}
.prix-etiquette{font-size:14.5px;color:var(--texte-2);font-weight:700}

/* ================================================================ Accueil : la démonstration du lecteur (se joue seule, une fois) */
.accueil .hero{overflow:hidden;background:radial-gradient(110% 85% at 15% 10%,#24434E 0%,var(--petrole) 42%,#101E26 100%)}
.accueil .hero>.arcs{right:-160px;top:-120px;width:820px;height:820px;opacity:.15}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,4vw,64px)}
.demo{position:relative;justify-self:center;width:min(400px,30vw);aspect-ratio:951/1100;margin-block:24px 56px;perspective:1400px;--vert:#4FE39A}
.demo-halo{position:absolute;left:50%;top:46%;width:190%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(120,210,195,.20),rgba(120,210,195,.07) 45%,transparent 72%);transition:background .5s}
.demo.acces-ok .demo-halo{background:radial-gradient(closest-side,rgba(79,227,154,.30),rgba(79,227,154,.10) 45%,transparent 72%)}
.demo-lecteur{position:absolute;inset:0}
.demo-lecteur>img:first-child{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(18px 34px 38px rgba(5,12,17,.55)) drop-shadow(4px 8px 10px rgba(5,12,17,.4))}
.demo-carte{position:absolute;left:0;top:0;width:76%;visibility:hidden;transform-origin:50% 50%;will-change:transform,opacity;
  filter:drop-shadow(0 22px 26px rgba(5,12,17,.45)) drop-shadow(0 4px 6px rgba(5,12,17,.35))}
.demo-etat{position:absolute;left:50%;top:calc(100% + 18px);translate:-50% 0;margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap;
  padding:8px 16px;border-radius:999px;background:rgba(16,30,38,.55);border:1px solid var(--filet-fort);font-size:15.5px;color:#FFFFFF;
  transition:color .25s,border-color .25s,background-color .25s}
.demo-etat .voyant{width:9px;height:9px;border-radius:50%;background:var(--sarcelle);transition:background-color .2s,box-shadow .2s}
.demo.acces-ok .demo-etat{color:#FFFFFF;border-color:var(--vert);background:rgba(79,227,154,.14)}
.demo.acces-ok .demo-etat .voyant{background:var(--vert);box-shadow:0 0 12px var(--vert)}
@media (max-width:960px){
  .hero-grille{grid-template-columns:minmax(0,1fr)}
  .demo{display:none}
  .accueil .hero{min-height:auto}
  .accueil .hero .wrap{padding-block:120px 72px}
  .accueil .hero>.arcs{right:-200px;top:-60px;width:560px;height:560px;opacity:.18}
}
/* la lueur floue de la tranche : seulement à l'autorisation, sans décalage (au repos elle dessinait un double bord flou) */
.demo .s-tranche--halo{opacity:0;transform:none;filter:blur(10px);background:var(--vert);transition:opacity .25s}
.demo.acces-ok .s-tranche--halo{opacity:.55}
/* Le fond de l'ouverture : les anneaux du logo qui tournent, comme sur l'Académie CYBSECURE */
.accueil .hero{background:radial-gradient(ellipse at 18% 12%,rgba(78,128,158,.20),transparent 55%),radial-gradient(ellipse at 95% 100%,rgba(56,108,138,.18),transparent 50%),linear-gradient(155deg,#172C36 0%,#0F1D25 100%)}
.anneaux{position:absolute;left:54%;top:46%;width:min(190%,84vh);max-width:none;height:auto;aspect-ratio:1;translate:-50% -50%;overflow:visible;pointer-events:none}
.anneau{fill:none;stroke-linecap:round;transform-box:view-box;transform-origin:50% 50%;transition:stroke .4s}
.anneau-ext{stroke:#55C0AD;stroke-width:12}
.anneau-mil{stroke:#FFFFFF;stroke-width:12;opacity:.92}
.anneau-int{stroke:#55C0AD;stroke-width:18}
@media (prefers-reduced-motion: no-preference){
  .anneau-ext{animation:anneau-tour 46s linear infinite}
  .anneau-mil{animation:anneau-tour 34s linear infinite reverse}
  .anneau-int{animation:anneau-tour 22s linear infinite}
}
@keyframes anneau-tour{to{transform:rotate(360deg)}}
.demo.acces-ok .anneau-ext,.demo.acces-ok .anneau-int{stroke:var(--vert)}
.anneaux-coin{display:none}
@media (max-width:960px){.anneaux-coin{display:block;left:auto;top:-130px;right:-150px;translate:none;width:min(440px,90vw)}}
@media (max-width:960px){
  .anneaux-coin{top:auto;bottom:-120px;right:-110px;width:330px}
  .accueil .hero .wrap{padding-bottom:230px}
}
/* Les anciens arcs fins remplacés partout par les anneaux du logo (même dessin que l'accueil) */
.anneaux-fond{max-width:none;overflow:visible;opacity:.5}
.ouverture .anneaux-fond{opacity:.75}
@media (max-width:760px){.anneaux-fond,.ouverture .anneaux-fond{opacity:.3}}
.sensible .anneaux-fond{opacity:.3}
@media (max-width:760px){.anneaux-fond,.ouverture .anneaux-fond,.sensible .anneaux-fond{opacity:.16}}
/* Le dégradé de l'Académie CYBSECURE sur tous les fonds sombres : lueur verte en haut à gauche,
   lueur sarcelle en bas à droite, encre de #172C36 à #0F1D25 */
:root{--degrade-academie:radial-gradient(ellipse at 18% 12%,rgba(78,128,158,.20),transparent 55%),radial-gradient(ellipse at 95% 100%,rgba(56,108,138,.18),transparent 50%),linear-gradient(155deg,#172C36 0%,#0F1D25 100%)}
.accueil .hero,.clair .ouverture,.clair .sombre,.appel,.sensible,.encart.plein{background:var(--degrade-academie)}
.clair .pied,.tiroir{background:linear-gradient(155deg,#172C36 0%,#0F1D25 100%)}
/* en-tête : même encre que l'Académie, opaque (plus de gris au-dessus des sections blanches) */
.entete,.accueil .entete.solide{background:rgba(17,33,43,.97)}
/* Proportions du vrai logo (mesurées sur le fichier) : traits épais, anneau intérieur serré, point central plein.
   Position de repos = le logo exact : extérieur ouvert à droite, blanc en U, intérieur en C. */
.anneau-ext{stroke-width:48}
.anneau-mil{stroke-width:45;opacity:1;stroke:#EDEDED}
.anneau-int{stroke-width:52}
.anneaux-fond .anneau{animation:none}          /* dans les bandeaux : le logo fixe, dans sa vraie position */
.anneaux{left:64%;top:40%}                       /* accueil : pas forcément centré derrière le lecteur */
/* proportions du logo officiel (marque.png) : traits fins, l'anneau intérieur un peu plus épais */
.anneau-ext{stroke-width:17}
.anneau-mil{stroke-width:18;stroke:#FFFFFF}
.anneau-int{stroke-width:25}
.anneaux{left:56%;top:44%}
/* lecteur un peu plus petit (demande de MDV) ; les anneaux gardent leur taille autour */
.demo{width:min(340px,25vw)}
.demo .anneaux{width:min(225%,84vh)}
/* formulaire de devis : téléphone et site côte à côte, facultatifs */
.champs-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.facult{font-weight:400;color:var(--texte-3)}
@media (max-width:480px){.champs-duo{grid-template-columns:minmax(0,1fr)}}
/* accueil : lecteur et anneaux réduits de 20 % (demande de MDV) */
.demo{width:min(272px,20vw)}
.demo .anneaux{width:min(225%,67vh)}
.champs-duo{gap:22px 14px}

/* Références : une étude par client, photo et texte en alternance (05/10) */
.etudes{display:grid;gap:clamp(56px,8vw,104px)}
.etude{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,64px);align-items:start;scroll-margin-top:96px}
.etude-inverse .etude-photo{order:2}
.etude-photo{position:sticky;top:104px;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.etude-photo img{width:100%;height:100%;object-fit:cover}
.etude-txt{display:grid;gap:16px;max-width:64ch}
.etude-txt>p:not([class]){color:var(--texte-2);font-size:17.5px}
.etude-haut{display:flex;gap:14px;align-items:baseline;font-size:15.5px;font-weight:700;color:var(--sarcelle)}
.etude-haut span+span{color:var(--texte-3);font-weight:400}
.etude h3{font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.015em}
.etude-accroche{font-family:var(--f-titre);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.35;color:var(--texte);padding-left:16px;border-left:3px solid var(--sarcelle);text-wrap:balance}
.etude .kpis{display:flex;flex-wrap:wrap;gap:12px 40px;padding-block:18px;border-block:1px solid var(--filet);margin-top:6px}
.etude .kpis b{display:block;font-family:var(--f-titre);font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;color:var(--sarcelle);font-variant-numeric:tabular-nums}
.etude .kpis span{font-size:15px;color:var(--texte-2)}
.etude-missions{display:grid;gap:10px}
.etude-missions h4{margin:0;font:700 15.5px var(--f-titre);color:var(--texte)}
.etude-missions .puces{list-style:none;margin:0;padding:0}
.etude-missions .puces li{border:1px solid var(--filet-fort);border-radius:999px;padding:6px 14px;font-size:15px;color:var(--texte)}
.etude-cit{margin:8px 0 0;padding:20px 22px;border-radius:14px;background:var(--fond-2);border:1px solid var(--filet);display:grid;gap:10px}
.etude-cit blockquote{margin:0;font-family:var(--f-titre);font-weight:700;font-size:1.15rem;line-height:1.4}
.etude-cit figcaption{color:var(--texte-2);font-size:15.5px}
.etude-cit-til{margin:0 0 28px}
@media (max-width:860px){
  .etude{grid-template-columns:minmax(0,1fr)}
  .etude-inverse .etude-photo{order:0}
  .etude-photo{position:static;aspect-ratio:16/10}
}
/* Solutions : liste détaillée (intitulé en gras, précision à la suite), bloc supervision (05/10) */
.coches-detail{gap:14px}
.coches-detail li span{color:var(--texte-2)}
.coches-detail li b{color:var(--texte);font-weight:700}
@media (min-width:901px){.metier .deux:has(.coches-detail){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.coches-detail li>span{display:grid;gap:2px}
.coches-detail .precision{color:var(--texte-2)}
.ouverture .chapo-suite{margin-top:10px;font-size:18px}
/* L'entreprise : récit avec titre, trois atouts (05/10) */
.recit-societe .texte h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:4px;color:var(--texte)}
.atouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.atout{display:grid;gap:12px;align-content:start;padding:26px;border-radius:16px;background:var(--surface);border:1px solid var(--filet)}
.atout>.ico{width:30px;height:30px;color:var(--sarcelle)}
.atout h3{font-size:1.2rem}
.atout p{color:var(--texte-2);font-size:17px}
@media (max-width:860px){.atouts{grid-template-columns:minmax(0,1fr)}}

/* L'entreprise : frise « Notre parcours » (05/10), l'histoire de CYBSECURE seulement.
   Sans JavaScript ou en mouvement réduit, tout est visible d'emblée ; sinon la ligne se trace une fois. */
.parcours{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto}
.pc-etape{display:grid;grid-row:span 2;grid-template-rows:subgrid;padding-right:24px}
.pc-an{position:relative;display:grid;justify-items:start;gap:14px}
.pc-an::before{content:"";position:absolute;left:0;right:-24px;bottom:10px;height:2px;background:var(--sarcelle);transform-origin:left;opacity:.55}
.pc-an i{position:relative;width:22px;height:22px;border-radius:50%;background:var(--surface);border:3px solid var(--sarcelle)}
.pc-an b{order:-1;font-family:var(--f-titre);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;color:var(--sarcelle)}
.pc-fin .pc-an i{background:var(--sarcelle);box-shadow:0 0 0 6px rgba(85,192,173,.18)}
.pc-fin .pc-an::before{right:0;background:linear-gradient(90deg,var(--sarcelle),transparent)}
.pc-txt{display:grid;gap:8px;align-content:start;padding-top:22px;max-width:30ch}
.pc-txt h3{font-size:1.15rem}
.pc-txt p{color:var(--texte-2);font-size:16px}
.pc-total{margin:0;display:grid;gap:4px}
.pc-total b{font-family:var(--f-titre);font-size:clamp(2.4rem,3.8vw,3.2rem);line-height:1;color:var(--sarcelle)}
.pc-txt .pc-total span{color:var(--texte-2);font-size:16px;max-width:22ch}
/* le tracé : une seule fois, étape par étape */
.parcours.attente .pc-an::before{transform:scaleX(0)}
.parcours.attente :is(.pc-an i,.pc-an b,.pc-txt){opacity:0;transform:translateY(8px)}
.parcours.vu .pc-an::before{transform:scaleX(1);transition:transform .6s cubic-bezier(.4,0,.2,1) calc(var(--n) * .4s)}
.parcours.vu :is(.pc-an i,.pc-an b,.pc-txt){opacity:1;transform:none;transition:opacity .45s ease calc(var(--n) * .4s + .15s),transform .45s ease calc(var(--n) * .4s + .15s)}
.parcours.vu .pc-txt{transition-delay:calc(var(--n) * .4s + .3s)}
@media (max-width:980px) and (min-width:861px){.pc-etape{padding-right:16px}.pc-an::before{right:-16px}}
@media (max-width:860px){
  .parcours{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .pc-etape{grid-row:auto;grid-template-rows:none;grid-template-columns:22px minmax(0,1fr);column-gap:18px;padding:0 0 30px;position:relative}
  .pc-etape::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--sarcelle);opacity:.55}
  .pc-etape:last-child::before{display:none}
  .pc-an{grid-column:1 / -1;grid-template-columns:22px auto;column-gap:18px;align-items:center}
  .pc-an b{order:0}
  .pc-an::before{display:none}
  .pc-txt{grid-column:2;padding-top:10px;max-width:none}
}

/* Logo d'ouverture des pages : plein et net, plus en transparence */
.ouverture .anneaux-fond{opacity:1}
.ouverture .anneaux-fond .anneau-ext,.ouverture .anneaux-fond .anneau-int{stroke:#55C0AD}
.ouverture .anneaux-fond .anneau-mil{stroke:#FFFFFF;opacity:1}
.ouverture .wrap{position:relative;z-index:1}
@media (max-width:760px){.ouverture .anneaux-fond{opacity:.35}}
/* Parcours : les textes démarrent tous à la même hauteur (titres réservés sur deux lignes) */
@media (min-width:861px){.pc-txt h3{line-height:1.25;min-height:2.5em}}
/* Pied de page : accroche courte, titres et séparations entre les informations */
.pied .pied-marque img{height:48px;margin-bottom:18px}
.pied-accroche{margin:0;font-family:var(--f-titre);font-weight:700;font-size:1.25rem;line-height:1.35;color:var(--texte)}
.pied-titre{margin:0 0 14px;font-family:var(--f-titre);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#55C0AD}
.pied .grille>.pied-col{border-left:1px solid var(--filet);padding-left:32px}
.pied nav,.pied address{gap:0}
.pied nav>a,.pied address>*{padding-block:9px;border-bottom:1px solid var(--filet)}
.pied nav>a:first-child,.pied address>:first-child{padding-top:0}
.pied nav>a:last-child,.pied address>:last-child{border-bottom:0}
@media (max-width:760px){.pied .grille>.pied-col{border-left:0;padding-left:0;border-top:1px solid var(--filet);padding-top:24px}}
/* Haut des pages : textes en vrai blanc */
.clair .ouverture,.ouverture h1,.ouverture .chapo,.ouverture .chapo-suite,.ouverture p{color:#FFFFFF}
/* Mot mis en avant dans un titre */
.accent-vert{color:var(--sarcelle)}
/* Pied de page : colonnes rééquilibrées, plus d'espace entre les deux séparations */
@media (min-width:761px){.pied .grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.pied .grille>.pied-col{padding-left:48px}}
/* Pied de page : sans traits entre chaque lien (essai) */
.pied nav>a,.pied address>*{border-bottom:0;padding-block:6px}
/* Pied de page : logo un peu plus grand */
.pied .pied-marque img{height:60px}
/* Pied de page : colonne « Nous joindre » rapprochée du plan du site */
@media (min-width:761px){.pied .grille{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr)}}
/* Pied de page : pictos sobres devant les coordonnées */
.pied address>*{display:flex;align-items:center;gap:10px}
.pied address .ico{width:16px;height:16px;color:var(--sarcelle)}
/* Un seul vert pour tout ce qui est plein (boutons, pastilles, pictos, éléments actifs), sur fond clair comme sur fond foncé */
.clair .btn-plein,.clair :is(.sommaire a.actif,.filtre[aria-pressed="true"],.metier .pictos,.sensible-tete .pictos,.pastille,.saut){background:#55C0AD;border-color:#55C0AD;color:#101E26}
.clair .btn-plein:hover,.clair .filtre[aria-pressed="true"]:hover{background:#78D2C3;border-color:#78D2C3;color:#101E26}
.clair .btn-plein:active{background:#4AB09E}
.clair .sommaire a:hover:not(.actif){background:rgba(85,192,173,.14)}
/* Mot mis en avant : le même vert que les boutons, partout */
.accent-vert{color:#55C0AD}
/* Encadré des chiffres clés : fond blanc */
.clair .faits{background:#FFFFFF}
/* Valeurs (page L'entreprise) : titre en haut, trois cartes côte à côte */
.valeurs{grid-template-columns:minmax(0,1fr);gap:36px}
.valeurs-tete{display:grid;gap:12px;max-width:62ch}
.valeurs-tete h2{max-width:none}
.valeurs-tete p{margin:0;color:var(--texte-2);font-size:18px}
.valeurs dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.valeurs dl>div{background:#FFFFFF;border:1px solid var(--filet);border-radius:16px;padding:28px 26px;box-shadow:0 1px 2px rgba(28,52,62,.06),0 8px 22px rgba(28,52,62,.07)}
.valeurs dt{flex-direction:column;align-items:flex-start;gap:16px;font-size:1.35rem}
.valeurs dt .ico{width:48px;height:48px;padding:12px;border-radius:50%;background:rgba(85,192,173,.16);box-sizing:border-box}
.valeurs dd{margin-top:10px}
@media (max-width:860px){.valeurs dl{grid-template-columns:minmax(0,1fr)}}
.valeurs-tete{max-width:none}.valeurs-tete h2{max-width:26ch}.valeurs-tete p{max-width:60ch}
section .valeurs .valeurs-tete h2{max-width:34ch}
/* Solutions : rond des métiers et sommaire actif en vert semi-transparent */
.clair :is(.metier .pictos,.sommaire a.actif){background:rgba(85,192,173,.28);border-color:transparent;color:#1C343E;box-shadow:inset 0 0 0 1px rgba(85,192,173,.65)}
.clair .sommaire a.actif .ico{color:#1C343E}

/* Solutions : haut de page enrichi (surtitre, accès direct aux cinq métiers) */
.surtitre{margin:0;font-family:var(--f-titre);font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:#55C0AD;display:flex;align-items:center;gap:10px}
.surtitre::before{content:"";width:28px;height:2px;background:#55C0AD;border-radius:2px}
.metiers-ouverture{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:18px;max-width:none}
.metiers-ouverture a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:start;gap:14px 10px;padding:18px 18px 16px;border-radius:16px;text-decoration:none;color:#FFFFFF;font-family:var(--f-titre);font-weight:700;font-size:15px;line-height:1.25;background:rgba(255,255,255,.06);border:1px solid rgba(85,192,173,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background-color .2s,border-color .2s,transform .2s}
.metiers-ouverture a>.ico:first-child{grid-column:1 / -1;width:40px;height:40px;padding:9px;border-radius:50%;box-sizing:border-box;background:rgba(85,192,173,.28);color:#FFFFFF}
.metiers-ouverture a>span{grid-column:1;align-self:end}
.metiers-ouverture a>.ico:last-child{grid-column:2;justify-self:end;align-self:end;width:16px;height:16px;color:#55C0AD;transition:transform .2s}
.metiers-ouverture a:hover{background:rgba(85,192,173,.16);border-color:rgba(85,192,173,.7);transform:translateY(-2px)}
.metiers-ouverture a:hover>.ico:last-child{transform:translateX(3px)}
@media (max-width:1100px){.metiers-ouverture{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.metiers-ouverture{grid-template-columns:repeat(2,minmax(0,1fr))}.metiers-ouverture a{padding:14px;font-size:14px}}

/* Haut des pages : logo en anneaux plus petit et qui tourne doucement */
.ouverture .arcs{width:400px;height:400px;right:6%;top:50%;margin-top:-200px}
@media (prefers-reduced-motion:no-preference){
  .ouverture .anneaux-fond .anneau-ext{animation:anneau-tour 46s linear infinite}
  .ouverture .anneaux-fond .anneau-mil{animation:anneau-tour 34s linear infinite reverse}
  .ouverture .anneaux-fond .anneau-int{animation:anneau-tour 22s linear infinite}
}
@media (max-width:1100px){.ouverture .arcs{width:300px;height:300px;margin-top:-150px;right:-40px}}
@media (max-width:760px){.ouverture .arcs{width:200px;height:200px;top:16px;margin-top:0;right:-50px}.ouverture .anneaux-fond{opacity:.45}}
/* Fil d'Ariane du catalogue au-dessus du titre, dans le même esprit que le surtitre */
.ouverture .fil{font-size:13.5px}
@media (max-width:760px){.ouverture .arcs{width:160px;height:160px;top:-24px;right:-48px}.ouverture .anneaux-fond{opacity:.35}}
/* Accueil, démonstration du lecteur : vert de la marque au lieu du vert fluo, état placé au-dessus du lecteur */
.demo{--vert:#55C0AD}
.demo.acces-ok .demo-halo{background:radial-gradient(closest-side,rgba(85,192,173,.28),rgba(85,192,173,.08) 45%,transparent 72%)}
.demo.acces-ok .demo-etat{background:rgba(85,192,173,.22);border-color:rgba(85,192,173,.8)}
.demo.acces-ok .anneau-ext,.demo.acces-ok .anneau-int{stroke:#78D2C3}
.demo-etat{top:auto;bottom:calc(100% + 26px);font-size:14.5px;padding:7px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* Accueil : l'état du lecteur s'affiche dans un petit journal de supervision sous les boutons */
.demo-etat{display:none}
.journal{margin-top:34px;max-width:440px;border:1px solid rgba(85,192,173,.35);border-radius:14px;background:rgba(6,24,28,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;font-variant-numeric:tabular-nums}
.journal-tete{margin:0;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(85,192,173,.22);font-family:var(--f-titre);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#55C0AD}
.journal-site{margin-left:auto;letter-spacing:.04em;text-transform:none;font-weight:400;font-family:var(--f-texte);font-size:13px;color:rgba(255,255,255,.7)}
.journal-live{width:8px;height:8px;border-radius:50%;background:#55C0AD;box-shadow:0 0 0 0 rgba(85,192,173,.6)}
@media (prefers-reduced-motion:no-preference){.journal-live{animation:journal-pouls 2s ease-out infinite}}
@keyframes journal-pouls{0%{box-shadow:0 0 0 0 rgba(85,192,173,.6)}70%{box-shadow:0 0 0 8px rgba(85,192,173,0)}100%{box-shadow:0 0 0 0 rgba(85,192,173,0)}}
.journal-lignes{list-style:none;margin:0;padding:6px 0;min-height:96px}
.journal-lignes li{display:flex;gap:14px;align-items:center;padding:5px 16px;font-size:14.5px;color:rgba(255,255,255,.62)}
.journal-lignes li:first-child{color:#FFFFFF}
.journal-lignes li.ok:first-child span{color:#55C0AD;font-weight:700}
.journal-lignes time{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:rgba(255,255,255,.5)}
@media (prefers-reduced-motion:no-preference){.journal-lignes li:first-child{animation:journal-entree .45s cubic-bezier(.2,.7,.2,1)}}
@keyframes journal-entree{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:960px){.journal{display:none}}
/* Accueil, démo du lecteur : la lumière s'allume et s'éteint en douceur */
.demo .s-lumiere{transition:opacity .7s ease-in-out}
.demo .s-veille{transition:opacity .7s ease-in-out}
.demo .s-tranche--halo{transition:opacity .8s ease-in-out}
.demo .demo-halo{transition:background 1s ease-in-out}
.demo .anneau{transition:stroke .8s ease-in-out}
@media (prefers-reduced-motion:no-preference){
  .demo.acces-ok .s-ondes i{animation:onde-l 1.8s ease-out 2}
  .demo.acces-ok .s-ondes i:nth-child(2){animation-delay:.35s}
  .demo.acces-ok .s-ondes i:nth-child(3){animation-delay:.7s}
  .demo.proche .s-ondes i{animation-duration:1.6s}
}

/* Pages du menu (L'entreprise, Solutions, Services, Références) : même hauteur de bandeau vert,
   calée sur L'entreprise, titre toujours au même endroit quand on passe d'une page à l'autre (07/10) */
.ouverture-haute{min-height:562px}
@media (max-width:1280px){.ouverture-haute{min-height:554px}}
@media (max-width:1100px){.ouverture-haute{min-height:492px}}
@media (max-width:760px){.ouverture-haute{min-height:0}}   /* téléphone : hauteur naturelle, sinon grand vide sous les textes courts */

/* Accueil, OUVERTURE (07/10) : la page s'ouvre une fois à l'arrivée, sans rien demander au visiteur.
   Les anneaux se tracent, le lecteur sort de l'ombre, un badge se pose, une onde verte part du lecteur
   et allume la page en la traversant (titre, boutons, menu). Ordinateur seulement, mouvement autorisé. */
.ouv-nuit,.ouv-ondes{display:none}
.hero.ouv-attente .ouv-nuit,.hero[data-ouv] .ouv-nuit{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 45%,#05191C 0%,#020C0E 70%);--r:-200px;--ox:70%;--oy:45%;
  -webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),transparent var(--r),#000 calc(var(--r) + 180px));
  mask-image:radial-gradient(circle at var(--ox) var(--oy),transparent var(--r),#000 calc(var(--r) + 180px))}
.hero.ouv-attente .ouv-ondes,.hero[data-ouv] .ouv-ondes{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.ouv-ondes circle{fill:none;stroke:#55C0AD;opacity:0}
.accueil .hero>.wrap{position:relative;z-index:1}
.ouv-page .entete{opacity:0}
.hero.ouv-attente .hero-txt{visibility:hidden}
.hero.ouv-attente .demo .anneau{stroke-dasharray:0 100}
.hero.ouv-attente .demo .anneaux>circle:last-child{opacity:0}
.hero.ouv-attente .demo-lecteur{filter:brightness(.05) saturate(.2)}
.s-reflet{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 56%,transparent 62%) 140% 0/260% 100% no-repeat;
  -webkit-mask:url(img/lecteur-cyb.webp) center/100% 100% no-repeat;mask:url(img/lecteur-cyb.webp) center/100% 100% no-repeat}

/* En-tête comme sur l'accueil, sur toutes les pages qui commencent par un bandeau foncé :
   transparent par-dessus le bandeau, puis plein dès qu'on fait défiler */
body:has(main#contenu > .ouverture:first-child) .entete{position:fixed;left:0;right:0;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .35s var(--courbe),border-color .35s var(--courbe)}
body:has(main#contenu > .ouverture:first-child) .entete.solide{background:rgba(17,33,43,.97);border-color:var(--filet);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body:has(main#contenu > .ouverture:first-child) main > .ouverture:first-child{padding-top:calc(clamp(56px,8vw,96px) + 72px + env(safe-area-inset-top,0px))}
@media (min-width:761px){body:has(main#contenu > .ouverture:first-child) .ouverture .arcs{top:calc(50% + 36px);max-height:calc(100% - 96px);width:auto;aspect-ratio:1;height:400px}}
@media (min-width:761px){body:has(main#contenu > .ouverture:first-child) .ouverture .arcs{margin-top:0;translate:0 -50%}}
/* Bandeaux du haut : même hauteur sur toutes les pages, contenu centré verticalement */
main#contenu > .ouverture:first-child,.page-devis main#contenu > .ouverture:first-child{display:flex;flex-direction:column;justify-content:center;min-height:660px!important;box-sizing:border-box}
main#contenu > .ouverture:first-child > .wrap{width:100%;box-sizing:border-box}
@media (max-width:1100px){main#contenu > .ouverture:first-child,.page-devis main#contenu > .ouverture:first-child{min-height:600px!important}}
@media (max-width:760px){main#contenu > .ouverture:first-child,.page-devis main#contenu > .ouverture:first-child{min-height:650px!important}}
/* Logo en anneaux des hauts de page : les trois demi-cercles ont la même épaisseur */
.ouverture .anneaux-fond .anneau-ext,.ouverture .anneaux-fond .anneau-mil,.ouverture .anneaux-fond .anneau-int{stroke-width:20}
/* Accueil, scène 3D (07/10) : la toile WebGL dessine le fond, le lecteur et le logo ; le DOM garde le texte et le badge */
.scene-3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.hero.mode-3d .ouv-nuit,.hero.mode-3d .ouv-ondes{display:none!important}
.demo.mode-3d .anneaux,.demo.mode-3d .demo-lecteur>img,.demo.mode-3d .s-tranche,.demo.mode-3d .s-reflet,.demo.mode-3d .demo-halo{visibility:hidden}
.demo.mode-3d .demo-lecteur{filter:none!important}
/* Cases à logos (références, partenaires, marques) : au survol le logo grossit un peu et la case s'éclaire */
:is(.logos-couleur,.marques-logos,.logos) li{position:relative;transition:box-shadow .3s ease,transform .3s ease}
:is(.logos-couleur,.marques-logos,.logos) li img{transition:transform .3s ease}
:is(.logos-couleur,.marques-logos,.logos) li:hover{z-index:1;box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.25)}
:is(.logos-couleur,.marques-logos,.logos) li:hover img{transform:scale(1.12)}
/* Cases à logos : c'est toute la case blanche qui grossit au survol, le logo reste bien dedans */
:is(.logos-couleur,.marques-logos,.logos) li:hover{transform:scale(1.1)}
:is(.logos-couleur,.marques-logos,.logos) li:hover img{transform:none}

/* Accueil : intro du logo (écran vert, logo qui grossit, anneaux qui filent se poser dans le haut de page) */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;
  animation:intro-secours .5s ease 7s forwards}                      /* filet de sécurité si le script ne tourne pas */
@keyframes intro-secours{to{opacity:0;visibility:hidden}}
.intro-fond{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,#24434E 0%,#1C343E 45%,#12242E 100%)}
.intro-logo{position:relative;display:flex;align-items:center;gap:0;opacity:0}
.intro-ronds{width:120px;height:120px;flex:none}
.intro-ronds svg{width:100%;height:100%;overflow:visible;display:block}
.intro-ronds .anneau{fill:none;stroke-linecap:round}
.intro-ronds .anneau-ext,.intro-ronds .anneau-int{stroke:#55C0AD}
.intro-ronds .anneau-mil{stroke:#FFFFFF}
.intro-ronds .anneau-ext,.intro-ronds .anneau-mil,.intro-ronds .anneau-int{stroke-width:22}
.intro-nom{width:331px;height:120px;background:url(logo.png) right center/463px 120px no-repeat}
html.intro-active body{overflow:hidden}
@media (max-width:640px){.intro-ronds{width:80px;height:80px}.intro-nom{width:221px;height:80px;background-size:309px 80px}}
/* le badge n'est plus utilisé sur l'accueil */
.accueil .demo-carte,.accueil .demo-etat{display:none}
.hero[data-ouv="intro"] :is(.ouv-nuit,.ouv-ondes){display:none!important}

/* Accueil sans lecteur : les anneaux du logo seuls, plus grands, à droite du titre */
.accueil .demo{width:min(520px,36vw,68vh);aspect-ratio:1;margin-block:24px;perspective:none}
.accueil .demo .anneaux{left:50%;top:50%;width:100%}
.accueil .demo .anneau-ext,.accueil .demo .anneau-mil,.accueil .demo .anneau-int{stroke-width:20}
.accueil .demo .demo-halo{left:50%;top:50%;width:150%;background:radial-gradient(closest-side,rgba(85,192,173,.20),rgba(85,192,173,.06) 50%,transparent 75%)}
/* intro plus vive : ondes de choc et lueur */
.intro-ronds .anneau-ext,.intro-ronds .anneau-mil,.intro-ronds .anneau-int{stroke-width:20}
.intro-ronds .anneau{animation:none!important}
.intro-onde{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:2px solid #55C0AD;opacity:0;pointer-events:none}
.intro-onde:nth-of-type(2){border-color:#FFFFFF}
/* intro fluide : lueur en dégradé (plus léger qu'un filtre), calques accélérés */
.intro-ronds{position:relative;will-change:transform}
.intro-lueur{position:absolute;left:50%;top:50%;width:180%;height:180%;translate:-50% -50%;border-radius:50%;opacity:0;visibility:hidden;pointer-events:none;
  background:radial-gradient(closest-side,rgba(85,192,173,.35),rgba(85,192,173,.1) 55%,transparent 75%)}
.intro-ronds svg{position:relative}
.intro-onde,.intro-fond{will-change:transform,opacity}
/* Logo en anneaux : même taille et même place sur toutes les pages (accueil compris), sur ordinateur */
:root{--logo-taille:min(440px,30vw)}
@media (min-width:961px){
  .accueil .demo{width:var(--logo-taille)}
  body:has(main#contenu > .ouverture:first-child) .ouverture .arcs{
    width:var(--logo-taille);height:var(--logo-taille);max-height:none;
    right:calc(max(0px,(100% - var(--largeur))/2) + clamp(16px,4vw,48px)
      + ((min(100%,var(--largeur)) - 2*clamp(16px,4vw,48px) - clamp(24px,4vw,64px)) * .85 / 2 - var(--logo-taille)) / 2)}
}
/* Essai : lueur légère derrière le logo des autres pages (deux fois moins forte qu'à l'accueil) */
@media (min-width:961px){
  body:has(main#contenu > .ouverture:first-child) main > .ouverture:first-child::before{content:"";position:absolute;pointer-events:none;border-radius:50%;
    width:calc(var(--logo-taille) * 1.5);aspect-ratio:1;top:calc(50% + 36px);translate:0 -50%;
    right:calc(max(0px,(100% - var(--largeur))/2) + clamp(16px,4vw,48px)
      + ((min(100%,var(--largeur)) - 2*clamp(16px,4vw,48px) - clamp(24px,4vw,64px)) * .85 / 2 - var(--logo-taille)) / 2 - var(--logo-taille) * .25);
    background:radial-gradient(closest-side,rgba(85,192,173,.14),rgba(85,192,173,.04) 50%,transparent 75%)}
}
/* Frise : le point « Aujourd'hui » pulse doucement, comme un voyant en service,
   seulement une fois que la frise s'est tracée (pour ne pas cacher son apparition) */
@media (prefers-reduced-motion: no-preference){
  .pc-fin .pc-an i::before,.pc-fin .pc-an i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #55C0AD;opacity:0}
  .parcours.vu .pc-fin .pc-an i::before{animation:pc-pouls 2.4s ease-out 2.4s infinite}
  .parcours.vu .pc-fin .pc-an i::after{animation:pc-pouls 2.4s ease-out 3.6s infinite}
  .parcours:not(.attente) .pc-fin .pc-an i::before{animation:pc-pouls 2.4s ease-out 1s infinite}
}
/* apparition de la frise un peu plus marquée et plus lente */
.parcours.attente:not(.vu) :is(.pc-an i,.pc-an b,.pc-txt){transform:translateY(16px)}
.parcours.vu .pc-an::before{transition-duration:.8s}
.parcours.vu :is(.pc-an i,.pc-an b,.pc-txt){transition-duration:.6s,.6s}
@keyframes pc-pouls{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
/* Frise interactive : six étapes (avec « Demain »), clic = étape agrandie + détail, les autres floues */
@media (min-width:861px){
  .parcours{grid-template-columns:repeat(6,minmax(0,1fr));transition:grid-template-columns .6s cubic-bezier(.4,0,.2,1)}
  .pc-an b{font-size:clamp(1.4rem,2.1vw,1.75rem);white-space:nowrap;font-size:1.3em}
  .parcours.focus .pc-etape:not(.actif) .pc-an b{font-size:1.25rem}
  .parcours.focus .pc-etape:not(.actif) .pc-total b{font-size:2rem}
  .pc-etape.actif .pc-an b{font-size:clamp(1.8rem,2.8vw,2.4rem)}
}
.pc-etape{cursor:pointer;outline:none;transition:filter .5s ease,opacity .5s ease}
.pc-etape:focus-visible .pc-an i{outline:2px solid #55C0AD;outline-offset:4px}
.pc-etape:hover .pc-an i{transform:scale(1.15)}
.pc-an i{transition:transform .3s ease,background-color .3s ease}
.pc-plus{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1),opacity .4s ease}
.pc-plus>*{overflow:hidden;min-height:0}
.pc-plus p{margin:0;color:var(--texte);font-size:16px;line-height:1.5}
.pc-plus .lien-fleche{margin-top:10px;display:inline-flex}
.pc-txt h3,.pc-an b{transition:font-size .5s cubic-bezier(.4,0,.2,1),color .3s}
.parcours.focus .pc-etape:not(.actif){filter:blur(3px);opacity:.4}
.parcours.focus .pc-etape:not(.actif):hover{filter:blur(1px);opacity:.7}
.pc-etape.actif .pc-plus{grid-template-rows:1fr;opacity:1}
.pc-etape.actif .pc-plus>*:first-child{padding-top:6px}
.pc-etape.actif .pc-txt{max-width:none}
.pc-etape.actif .pc-txt h3{font-size:1.45rem}
.pc-etape.actif .pc-an i{background:#55C0AD;transform:scale(1.25)}
@media (min-width:861px){
  .parcours.focus:has(.pc-etape:nth-child(1).actif){grid-template-columns:2.6fr repeat(5,minmax(0,1fr))}
  .parcours.focus:has(.pc-etape:nth-child(2).actif){grid-template-columns:1fr 2.6fr repeat(4,minmax(0,1fr))}
  .parcours.focus:has(.pc-etape:nth-child(3).actif){grid-template-columns:repeat(2,minmax(0,1fr)) 2.6fr repeat(3,minmax(0,1fr))}
  .parcours.focus:has(.pc-etape:nth-child(4).actif){grid-template-columns:repeat(3,minmax(0,1fr)) 2.6fr repeat(2,minmax(0,1fr))}
  .parcours.focus:has(.pc-etape:nth-child(5).actif){grid-template-columns:repeat(4,minmax(0,1fr)) 2.6fr minmax(0,1fr)}
  .parcours.focus:has(.pc-etape:nth-child(6).actif){grid-template-columns:repeat(5,minmax(0,1fr)) 2.6fr}
}
/* Aujourd'hui → Demain : la ligne continue en pointillés vers l'avenir */
.pc-fin .pc-an::before{right:-24px;background:repeating-linear-gradient(90deg,#55C0AD 0 8px,transparent 8px 14px);opacity:.7}
.pc-demain .pc-an::before{display:none}
.pc-demain .pc-an i{border-style:dashed;background:transparent}
.pc-demain .pc-an b{color:#55C0AD;font-style:italic}
.pc-aide{margin:22px 0 0;font-size:14px;color:var(--texte-2);transition:opacity .3s}
.parcours.focus+.pc-aide{opacity:0}
@media (max-width:860px){.pc-fin::before{background:repeating-linear-gradient(180deg,#55C0AD 0 8px,transparent 8px 14px)!important;display:block!important}}
/* une fois la frise tracée, les réactions au clic et au survol sont immédiates (sans les délais du tracé) */
.parcours.fini :is(.pc-an i,.pc-an b,.pc-txt){transition:transform .3s ease,opacity .4s ease,background-color .3s ease,font-size .5s cubic-bezier(.4,0,.2,1),color .3s}
.parcours.fini .pc-txt{transition-delay:0s}
/* Frise : barre de navigation entre les années (flèches) quand une année est ouverte */
.pc-bas{margin-top:22px;min-height:48px;display:flex;align-items:center}
.pc-bas .pc-aide{margin:0}
.pc-nav{display:flex;align-items:center;gap:12px}
.pc-nav[hidden]{display:none}
.pc-fleche{width:46px;height:46px;border-radius:50%;border:2px solid #55C0AD;background:transparent;color:#55C0AD;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s,transform .2s,opacity .2s}
.pc-fleche .ico{width:20px;height:20px}
.pc-prec .ico{transform:rotate(180deg)}
.pc-fleche:hover:not(:disabled){background:#55C0AD;color:#FFFFFF;transform:scale(1.06)}
.pc-fleche:disabled{opacity:.3;cursor:default}
.pc-fleche:focus-visible,.pc-fermer:focus-visible{outline:2px solid #55C0AD;outline-offset:3px}
.pc-ou{min-width:150px;text-align:center;font-family:var(--f-titre);font-weight:700;color:var(--texte)}
.pc-fermer{margin-left:10px;border:0;background:none;color:var(--texte-2);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:860px){.pc-bas{position:sticky;bottom:12px;z-index:5;justify-content:center}.pc-nav{background:var(--surface);padding:6px 10px;border-radius:999px;box-shadow:0 6px 20px rgba(16,30,38,.18)}.pc-ou{min-width:110px}}
/* Après « Demain », le trait en pointillés continue et s'efface en fondu */
@media (min-width:861px){
  .pc-demain .pc-an::before{display:block;left:22px;right:0;background:repeating-linear-gradient(90deg,#55C0AD 0 8px,transparent 8px 14px);opacity:.7;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,transparent 100%)}
}
/* Année ouverte : son trait ne file plus jusqu'à l'année suivante, il s'efface juste après le point */
@media (min-width:861px){
  .parcours.focus .pc-etape.actif .pc-an::before{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 85%);mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 85%)}
}
/* Frise : chaque année ouverte commence par un chiffre fort */
.pc-plus>div{display:grid;gap:8px}
.pc-plus .pc-chiffre{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--texte-2)}
.pc-plus .pc-chiffre b{font-family:var(--f-titre);font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.05;color:#55C0AD}
.pc-etape.actif .pc-court{display:none}
.pc-chiffre sup{font-size:.5em;vertical-align:.7em;margin-left:1px}
.pc-plus .pc-fort{font-family:var(--f-titre);font-size:1.5em;line-height:1;color:#55C0AD;white-space:nowrap;font-size:1.3em}
.pc-bas .pc-aide{color:#55C0AD;font-weight:700}
/* frise : apparition des dates un peu plus lente pour qu'on la voie bien */
.parcours.vu .pc-an::before{transition-duration:1s}
.parcours.vu:not(.fini) .pc-an b{transition:opacity .7s ease calc(var(--n) * .45s + .1s),transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--n) * .45s + .1s)}
.parcours.attente:not(.vu) .pc-an b{transform:translateY(22px)}
.pc-bas .pc-aide{font-size:17px}
/* Catalogue sans prix : « Nous contacter » à la place */
.prix .prix-cyb a,.prix>a{color:#55C0AD;font-family:var(--f-titre);font-weight:700;font-size:1.4rem;text-decoration:none}
.prix .prix-cyb a:hover,.prix>a:hover{text-decoration:underline}
.lp-prix a.sur-devis{color:#55C0AD;font-weight:700;text-decoration:none;white-space:nowrap}
.lp-prix a.sur-devis:hover{text-decoration:underline}
/* Catalogue : les trois promesses restent dans la colonne du texte, le logo qui tourne ne passe plus dessus */
@media (min-width:961px){
  .ouverture .promesses{grid-template-columns:minmax(0,1fr);max-width:min(620px,calc(100% - var(--logo-taille) - 60px));gap:8px}
  .ouverture .promesses li{padding:10px 14px;align-items:center}
  .ouverture .promesses li span{display:flex;flex-wrap:wrap;column-gap:8px}
  .ouverture .promesses b{display:inline}
}
/* Catalogue : les cartes de gamme grossissent avec la lueur verte au survol, comme les cases à logos */
.gamme{position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .2s ease,background-color .2s ease}
.gamme:hover{z-index:1;transform:scale(1.04);box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.25)}
@media (prefers-reduced-motion: reduce){.gamme:hover{transform:none}}
/* Catalogue : boutons « Fiche » et « Devis » encore plus gros et bien lisibles */
.ligne-prod .etiquette{font-size:16px;padding:6px 13px;min-height:40px;color:#55C0AD;border-color:rgba(85,192,173,.6)}
.ligne-prod .etiquette .ico{width:16px;height:16px}
.ligne-prod .ajout{font-size:16px;min-height:40px;padding:6px 14px}
.ligne-prod .ajout .ico{width:16px;height:16px}
/* Demande de devis : le récapitulatif commence au même niveau que la première ligne de la sélection */
@media (min-width:901px){.devis-droite{margin-top:calc(var(--decal-titre, 41px))}}
/* Catalogue : la recherche dans un vrai cadre blanc, comme les autres blocs */
.clair .recherche{background:#FFFFFF;border:1px solid var(--filet);border-radius:16px;padding:clamp(18px,2.5vw,28px);box-shadow:0 1px 2px rgba(28,52,62,.06),0 8px 24px rgba(28,52,62,.06)}
.clair .recherche>label{font-size:1.05rem}
/* ================================================================ Page devis : un vrai panier (vignettes, colonnes, étapes) */
.etapes-achat{grid-column:1/-1;list-style:none;margin:0 0 4px;padding:0;display:flex;align-items:center;gap:0;font:700 15px var(--f-titre);color:var(--texte-3)}
.etapes-achat li{display:flex;align-items:center;gap:10px;flex:none}
.etapes-achat li+li::before{content:"";width:clamp(24px,6vw,72px);height:2px;background:var(--filet-fort);margin:0 14px;border-radius:2px}
.ea-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--filet-fort);font-size:14px;color:var(--texte-2);background:#FFFFFF}
.etapes-achat [aria-current="step"]{color:var(--texte)}
.etapes-achat [aria-current="step"] .ea-num{background:var(--petrole);border-color:var(--petrole);color:#FFFFFF}
@media (max-width:560px){.etapes-achat{font-size:14px}.etapes-achat li{gap:8px}.etapes-achat li:not([aria-current]){font-size:0;gap:0}.etapes-achat li+li::before{width:22px;margin:0 10px}.ea-num{width:28px;height:28px;font-size:13px}}
.devis-titre{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.devis-titre>.ico{width:28px;height:28px;color:var(--sarcelle)}
.entete-lignes,.ligne-devis{grid-template-columns:80px minmax(0,1fr) 104px 124px 40px;column-gap:14px}
/* sans aucun prix (cas actuel) : pas de colonne Prix, la mention « Prix sur devis » passe sous la désignation */
.entete-lignes.sans-prix,.sans-prix .ligne-devis{grid-template-columns:88px minmax(0,1fr) 124px 40px}
.entete-lignes.sans-prix .el-prix{display:none}
.sans-prix .ligne-devis{grid-template-areas:"vig nom qte retirer" "vig pu qte retirer"}
.sans-prix .ld-pu{justify-self:start;justify-items:start;text-align:left;margin-top:4px}
.entete-lignes.sans-prix span:nth-child(3){text-align:center}
.entete-lignes{display:grid;padding:0 16px 8px;font:700 13.5px var(--f-titre);color:var(--texte-3);border-bottom:1px solid var(--filet);margin-bottom:12px}
.entete-lignes span:first-child{grid-column:1/3}
.entete-lignes span:nth-child(2),.entete-lignes span:nth-child(3){text-align:center}
.lignes-devis{gap:12px}
.ligne-devis{grid-template-areas:"vig nom pu qte retirer" "vig nom pu total retirer";row-gap:4px;padding:16px;border-radius:14px;align-items:center}
.ld-vignette{grid-area:vig;display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:88px;border-radius:12px;overflow:hidden;background:radial-gradient(120% 120% at 0% 0%,#24434E 0%,var(--petrole) 55%,#12242E 100%);color:#55C0AD;text-decoration:none}
.ld-vignette .ico{width:38px;height:38px}
.ld-vignette.photo{background:#FFFFFF;border:1px solid var(--filet)}
.ld-vignette img{width:100%;height:100%;object-fit:contain;padding:6px}
.ld-nom{display:grid;gap:2px;align-self:center}
.ld-nom .ld-gamme{font-size:13.5px;color:var(--texte-3)}
.ld-nom b{font-size:1.1rem}
.ld-pu{justify-items:center;text-align:center}
.ligne-devis .sur-devis{display:inline-block;padding:4px 10px;border-radius:999px;background:#E8F5F2;color:var(--petrole);font:700 13.5px var(--f-titre);white-space:nowrap}
.ld-qte{justify-self:center}
.ld-total{justify-self:center;justify-items:center;min-width:0}
.ligne-devis .retirer{grid-area:retirer;justify-self:end;display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;text-decoration:none;color:var(--texte-3)}
.ligne-devis .retirer .ico{width:20px;height:20px}
.ligne-devis .retirer:hover{color:var(--erreur);background:rgba(179,38,30,.08)}
.ajouter-plus{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.vider{border:0;background:transparent;color:var(--texte-2);font:700 14px var(--f-titre);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0 6px}
.vider:hover{color:var(--erreur)}
.recap dl{row-gap:8px;column-gap:0}
.recap dd{padding-left:16px}
.recap .ttc{font-size:1.05rem}
.rassure{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--filet);display:grid;gap:10px;font-size:15px;color:var(--texte-2)}
.rassure li{display:flex;align-items:center;gap:10px}
.rassure .ico{width:20px;height:20px;color:var(--sarcelle);flex:none}
@media (max-width:760px){
  .entete-lignes{display:none}
  .entete-lignes,.ligne-devis,.sans-prix .ligne-devis{grid-template-columns:72px minmax(0,1fr) 44px;column-gap:14px}
  .ligne-devis,.sans-prix .ligne-devis{grid-template-areas:"vig nom retirer" "vig pu pu" "vig qte total";row-gap:10px;align-items:start}
  .ld-vignette{max-width:72px}
  .ld-vignette .ico{width:30px;height:30px}
  .ld-pu,.ld-qte{justify-self:start;justify-items:start;text-align:left}
  .ld-total{justify-self:end;align-self:center}
}
/* Catalogue : « Prix : nous consulter » sur une seule ligne dans les listes (même texte que le panier) */
.lp-prix a.sur-devis{font-size:0}
.lp-prix a.sur-devis::before{content:"Prix : nous consulter";font-size:15px}
/* En-tête : logo plus grand et plus net */
.entete .logo img{height:52px;image-rendering:-webkit-optimize-contrast}
@media (max-width:1240px){.entete .logo img{height:46px}}
@media (max-width:960px){.entete .logo img{height:42px}}
@media (max-width:380px){.entete .logo img{height:36px}}
/* Services : les étapes apparaissent une à une au défilement, la ligne verte se trace en suivant */
.frise.anime::before{transform-origin:top;transform:scaleY(var(--trace,0))}
.frise.anime .jalon .rond{opacity:0;transform:scale(.5);transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .6s ease}
.frise.anime .jalon .corps{opacity:0;transform:translateX(40px);transition:opacity .7s ease .12s,transform .8s cubic-bezier(.2,.8,.2,1) .12s}
.frise.anime .jalon .coches li{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.frise.anime .jalon.vu .rond{opacity:1;transform:none;box-shadow:0 0 0 8px rgba(85,192,173,.15)}
.frise.anime .jalon.vu .corps{opacity:1;transform:none}
.frise.anime .jalon.vu .coches li{opacity:1;transform:none}
.frise.anime .jalon.vu .coches li:nth-child(1){transition-delay:.45s}
.frise.anime .jalon.vu .coches li:nth-child(2){transition-delay:.55s}
.frise.anime .jalon.vu .coches li:nth-child(3){transition-delay:.65s}
.frise.anime .jalon.vu .coches li:nth-child(4){transition-delay:.75s}
.frise.anime .jalon.vu .coches li:nth-child(n+5){transition-delay:.85s}
/* En-tête : logo redimensionné à l'avance (2x et 3x) avec une petite marge, pour que le texte du bas ne soit jamais coupé ni crénelé */
.entete .logo img{image-rendering:auto;content:image-set(url("logo-entete@2x.png") 2x,url("logo-entete@3x.png") 3x)}
.entete .logo img{height:55px}
@media (max-width:1240px){.entete .logo img{height:48px}}
@media (max-width:960px){.entete .logo img{height:44px}}
@media (max-width:380px){.entete .logo img{height:38px}}
/* Accueil : les cinq métiers grossissent avec la lueur verte au survol, comme les logos clients et fournisseurs */
.mosaique .tuile{position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .2s ease,background-color .2s ease}
.mosaique .tuile:hover{z-index:1;transform:scale(1.04);box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.25)}
@media (prefers-reduced-motion: reduce){.mosaique .tuile:hover{transform:none}}
.mosaique .tuile:hover{background:var(--surface);transition-delay:0s!important}
/* Même survol (zoom léger + lueur verte) sur le bloc cliquable vers le catalogue */
a.passerelle{position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .2s ease,background-color .2s ease}
a.passerelle:hover{z-index:1;transform:scale(1.02);box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.25)}
@media (prefers-reduced-motion: reduce){a.passerelle:hover{transform:none}}
/* Même survol sur les autres blocs cliquables : photos des références, produits voisins du catalogue */
:is(a.fiche-photo,a.voisin){transition:transform .3s ease,box-shadow .3s ease,border-color .2s ease}
:is(a.fiche-photo,a.voisin):hover{z-index:2;transform:scale(1.03);box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.25)}
@media (prefers-reduced-motion: reduce){:is(a.fiche-photo,a.voisin):hover{transform:none}}
/* Pied de page : les liens réagissent au survol dans le même esprit (léger zoom, vert, petite lueur) */
.pied .pied-col :is(nav a,address a,address>span){display:inline-flex;transform-origin:left center;transition:transform .25s ease,color .2s ease,text-shadow .25s ease}
.pied .pied-col :is(nav a,address a,address>span):hover{transform:scale(1.08) translateX(2px);color:#55C0AD;text-shadow:0 0 14px rgba(85,192,173,.55)}
@media (prefers-reduced-motion: reduce){.pied .pied-col :is(nav a,address a,address>span):hover{transform:none}}
/* Page Cybsecure : le bloc Implantation / Création / Expertise est éclairé en permanence (même lueur verte que le survol) */
.clair .faits{border-color:rgba(85,192,173,.7);box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.12)}
/* Page Cybsecure : les trois engagements sont éclairés en permanence, comme le bloc Implantation / Création */
.clair .valeurs dl>div{border-color:rgba(85,192,173,.7)}   /* même rendu que le bloc Implantation / Création : contour vert, ombre douce */
/* Page Cybsecure : bloc Implantation / Création et trois engagements, contour vert léger et lueur verte douce et étendue */
.clair .recit-societe .faits,.clair .valeurs dl>div,.clair .atouts .atout{border-color:rgba(85,192,173,.38);box-shadow:0 0 28px 4px rgba(85,192,173,.14),0 8px 22px rgba(28,52,62,.06)}
/* Règle générale : les blocs blancs qui ne mènent nulle part sont éclairés en permanence (contour vert léger + petite lueur) ;
   ceux qui mènent à une autre page grossissent au survol avec la lueur (voir plus haut) */
.clair .bloc :is(.groupe,.jalon .corps,.encart.vide,.partenaire:not(.majeur),.coord,.carte-fiche,.infos){border-color:rgba(85,192,173,.38);box-shadow:0 0 28px 4px rgba(85,192,173,.14),0 8px 22px rgba(28,52,62,.06)}
/* Services : animation des étapes plus visible (titre qui apparaît, blocs qui glissent de plus loin, plus lentement) */
.frise.anime .jalon .corps{transform:translateX(90px);transition:opacity .9s ease .15s,transform 1.1s cubic-bezier(.2,.8,.2,1) .15s}
.frise.anime .jalon .rond{transition:opacity .6s ease,transform .8s cubic-bezier(.34,1.56,.64,1),box-shadow .8s ease}
.titre-etapes{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.titre-etapes.vu{opacity:1;transform:none}
.frise.anime .jalon.vu .corps{transform:none}
/* Services : Interfaçage seul dans « Et à tout moment » (la formation est devenue l'étape 05) */
.duo.duo-seul{grid-template-columns:minmax(0,1fr)}
.duo.duo-seul .encart .coches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
@media (max-width:760px){.duo.duo-seul .encart .coches{grid-template-columns:minmax(0,1fr)}}
/* ==== Services : étapes qui s'allument quand la ligne arrive ==== */
.frise.anime{--x:28px;--b:28px;background:linear-gradient(var(--filet-fort),var(--filet-fort)) no-repeat calc(var(--x) - 1px) var(--b)/2px calc(100% - 2 * var(--b))}
.frise.anime::before{left:calc(var(--x) - 1px);top:var(--b);bottom:var(--b);background:#55C0AD;box-shadow:0 0 12px rgba(85,192,173,.65);transform-origin:top;transform:scaleY(var(--trace,0));transition:none}
.frise.anime::after{content:"";position:absolute;z-index:2;left:var(--x);top:calc(var(--b) + (100% - 2 * var(--b)) * var(--trace,0));width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 0 4px #55C0AD,0 0 18px 8px rgba(85,192,173,.7);opacity:var(--pointe,0);transition:opacity .3s;pointer-events:none}
@media (max-width:860px){.frise.anime{--x:22px;--b:22px}}
/* étape éteinte (la ligne n'est pas encore arrivée) */
.clair .bloc .frise.anime .jalon .corps{opacity:.4;transform:translateX(50px) scale(.97);filter:saturate(.2);border-color:var(--filet);box-shadow:0 1px 2px rgba(28,52,62,.05);
  position:relative;overflow:hidden;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .7s ease,border-color .6s ease,box-shadow .8s ease}
.frise.anime .jalon .rond{opacity:1;transform:scale(.82);background:#FFFFFF;border-color:var(--filet-fort);color:var(--texte-3);box-shadow:none;transition:transform .6s cubic-bezier(.34,1.56,.64,1),background-color .4s,border-color .4s,color .4s,box-shadow .6s}
.frise.anime .jalon .coches li{opacity:.5;transform:none}
/* étape allumée */
.clair .bloc .frise.anime .jalon.vu .corps{opacity:1;transform:none;filter:none;border-color:rgba(85,192,173,.38);box-shadow:0 0 28px 4px rgba(85,192,173,.14),0 8px 22px rgba(28,52,62,.06)}
.frise.anime .jalon.vu .rond{transform:scale(1);background:#55C0AD;border-color:#55C0AD;color:#FFFFFF;box-shadow:0 0 0 6px rgba(85,192,173,.18),0 0 22px 4px rgba(85,192,173,.45)}
.frise.anime .jalon.vu .coches li{opacity:1;transform:none}
/* onde qui part du rond au moment où il s'allume */
.frise.anime .jalon .rond::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #55C0AD;opacity:0;pointer-events:none}
.frise.anime .jalon.vu .rond::after{animation:rond-onde 1s ease-out}
@keyframes rond-onde{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion: reduce){.frise.anime::after{display:none}}

/* Références : chaque élément apparaît à son tour, au moment où il arrive à l'écran en descendant
   (photo dévoilée, puis le texte ligne après ligne, les chiffres qui comptent, les missions une par une).
   Une fois apparu, rien ne bouge si on remonte */
:is(.etudes.anime,.etudes-cachees .etudes) .etude-photo{clip-path:inset(0 100% 0 0 round 18px);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-inverse .etude-photo{clip-path:inset(0 0 0 100% round 18px)}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-photo img{transform:scale(1.18);transition:transform 1.9s cubic-bezier(.2,.7,.2,1)}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-photo.vu{clip-path:inset(0 0 0 0 round 18px)}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-photo.vu img{transform:none}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-txt>*{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-txt>.vu{opacity:1;transform:none}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-accroche{border-left-color:transparent;transition-property:opacity,transform,border-color}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-accroche.vu{border-left-color:var(--sarcelle);transition-delay:0s,0s,.45s}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-missions .puces li{opacity:0;transform:scale(.85);transition:opacity .45s ease,transform .5s cubic-bezier(.3,1.5,.5,1),border-color .6s ease,box-shadow .6s ease;transition-delay:calc(.25s + var(--j,0)*.1s)}
:is(.etudes.anime,.etudes-cachees .etudes) .etude-missions.vu .puces li{opacity:1;transform:none;border-color:rgba(85,192,173,.55);box-shadow:0 0 14px rgba(85,192,173,.18)}
/* Références : la photo reste à sa place (elle ne suit plus le défilement) */
.etude-photo{position:relative;top:auto}

/* Chiffres (Références) : à l'arrivée, les deux filets se tracent en vert de gauche à droite,
   puis chaque chiffre monte à son tour et compte jusqu'à sa valeur, avec une petite lueur verte ; une seule fois */
.chiffres.anime{position:relative;border-block-color:transparent}
.chiffres.anime::before,.chiffres.anime::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,#55C0AD 0%,rgba(85,192,173,.5) 45%,var(--filet) 100%);transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.7,0,.2,1);pointer-events:none}
.chiffres.anime::before{top:-1px}
.chiffres.anime::after{bottom:-1px;transition-delay:.15s}
.chiffres.anime.vu::before,.chiffres.anime.vu::after{transform:scaleX(1)}
.chiffres.anime .chiffre{opacity:0;transform:translateY(20px);border-left-color:transparent;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1),border-color .8s ease;transition-delay:calc(.4s + var(--i,0)*.2s)}
.chiffres.anime.vu .chiffre{opacity:1;transform:none;border-left-color:var(--filet)}
.chiffres.anime.vu .chiffre b{animation:chiffre-lueur 1.6s ease calc(.6s + var(--i,0)*.2s) both}
@keyframes chiffre-lueur{0%{text-shadow:0 0 0 rgba(85,192,173,0)}45%{text-shadow:0 0 22px rgba(85,192,173,.55)}100%{text-shadow:0 0 0 rgba(85,192,173,0)}}

/* Services : les 3 engagements apparaissent l'un après l'autre en arrivant à l'écran (une seule fois) */
.constantes.anime .atout{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.18s)}
.constantes.anime.vu .atout{opacity:1;transform:none}
.constantes .atout .accent-vert{color:#55C0AD;font-weight:700}

/* Mentions légales : sommaire à gauche, informations rangées en cartes lisibles */
.legal{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.legal-nav{position:sticky;top:110px;display:grid;gap:2px}
.legal-nav p{margin:0 0 10px;font:700 13px var(--f-titre);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3)}
.legal-nav a{padding:8px 14px;border-left:2px solid var(--filet);color:var(--texte-2);text-decoration:none;font-size:15.5px;transition:color .2s,border-color .2s}
.legal-nav a:hover,.legal-nav a.actif{border-left-color:#55C0AD;color:var(--texte)}
.legal-corps{display:grid;gap:20px}
.legal-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.clair .legal-carte{background:var(--surface);border:1px solid rgba(85,192,173,.38);border-radius:16px;padding:28px;display:grid;gap:14px;align-content:start;scroll-margin-top:104px;box-shadow:0 0 28px 4px rgba(85,192,173,.14),0 8px 22px rgba(28,52,62,.06)}
.legal-carte h2{margin:0;font-size:1.3rem;display:flex;align-items:center;gap:12px}
.legal-carte h2 .ico{width:26px;height:26px;color:var(--sarcelle);flex:none}
.legal-carte p{margin:0;color:var(--texte-2)}
.legal-carte p b{color:var(--texte)}
.legal-carte a{color:var(--sarcelle)}
.legal-carte .accent-vert{color:#55C0AD;font-weight:700}
.legal-carte dl{margin:0}
.legal-carte dl>div{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--filet)}
.legal-carte dl>div:first-child{border-top:0;padding-top:2px}
.legal-carte dt{color:var(--texte-3);font-size:14.5px}
.legal-carte dd{margin:0;color:var(--texte);font-size:15.5px}
.legal-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:4px}
.legal-points>div{background:var(--fond-2);border:1px solid var(--filet);border-radius:12px;padding:18px 20px;display:grid;gap:8px;align-content:start}
.legal-points h3{margin:0;font-size:1.05rem}
.legal-points p{font-size:15.5px}
@media (max-width:960px){.legal{grid-template-columns:minmax(0,1fr)}.legal-nav{display:none}}
@media (max-width:760px){.legal-duo,.legal-points{grid-template-columns:minmax(0,1fr)}.clair .legal-carte{padding:22px}.legal-carte dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* Mentions légales : en-tête foncé sur chaque carte, comme les blocs verts du site */
.clair .legal-carte{padding:0;overflow:hidden;gap:0}
.legal-carte>h2{padding:18px 28px;background:radial-gradient(120% 160% at 0% 0%,#24434E 0%,#1C343E 55%,#12242E 100%);color:#fff;font-size:1.2rem}
.legal-carte>h2 .ico{color:#55C0AD}
.legal-carte>:not(h2){margin:0 28px}
.legal-carte>h2+*{margin-top:22px}
.legal-carte>:last-child{margin-bottom:26px}
.legal-carte>p+p,.legal-carte>p+.legal-points{margin-top:14px}
.legal-carte>dl{margin-top:16px}
@media (max-width:760px){.legal-carte>h2{padding:16px 22px}.legal-carte>:not(h2){margin-left:22px;margin-right:22px}}

/* Catalogue : bouton de retour au catalogue en haut de chaque gamme */
.retour-cat{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:10px 18px 10px 14px;border:1px solid rgba(85,192,173,.45);border-radius:999px;background:var(--surface);color:var(--texte);font-weight:700;font-size:15.5px;text-decoration:none;transition:box-shadow .25s,transform .25s,border-color .25s}
.retour-cat .ico{width:20px;height:20px;color:#55C0AD;transform:rotate(180deg);transition:transform .25s}
.retour-cat:hover{border-color:#55C0AD;box-shadow:0 0 0 1px rgba(85,192,173,.5),0 0 18px 3px rgba(85,192,173,.3);transform:translateY(-1px)}
.retour-cat:hover .ico{transform:rotate(180deg) translateX(4px)}

/* Devis : « Vider le panier » demande une confirmation dans le bouton lui-même */
.vider.confirmer{color:var(--erreur);text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:0 14px}

/* Solutions : captures de supervision (une grande, deux en dessous), agrandissables au clic */
.captures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.capture{margin:0;display:grid;gap:10px;align-content:start}
.capture.grande{grid-column:1/-1}
.capture-zoom{display:block;width:100%;padding:0;border:1px solid rgba(85,192,173,.38);border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:0 0 28px 4px rgba(85,192,173,.12),0 8px 22px rgba(28,52,62,.06);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.capture-zoom img{display:block;width:100%;height:auto}
.capture-zoom:hover{transform:scale(1.02);box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.25)}
.capture figcaption{font-size:15.5px;color:var(--texte-2)}
.capture figcaption b{color:var(--texte)}
.loupe{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:4vmin;background:rgba(6,20,22,.86);cursor:zoom-out;opacity:0;transition:opacity .25s}
.loupe.ouverte{opacity:1}
.loupe img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.loupe button{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer}
@media (max-width:760px){.captures{grid-template-columns:minmax(0,1fr)}}
.capture:not(.grande) .capture-zoom{aspect-ratio:2/1}
.capture:not(.grande) .capture-zoom img{height:100%;object-fit:contain}

/* Solutions : photo terrain d'un coffret câblé, photo à gauche et points clés à droite */
.terrain{margin:34px 0 0;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;padding:22px;border-radius:18px;background:var(--surface);border:1px solid rgba(85,192,173,.38);box-shadow:0 0 28px 4px rgba(85,192,173,.12),0 8px 22px rgba(28,52,62,.06)}
.terrain .capture-zoom{box-shadow:none}
.terrain figcaption{display:grid;gap:16px}
.terrain h3{margin:0;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.3}
.terrain .accent-vert{color:#55C0AD}
@media (max-width:760px){.terrain{grid-template-columns:minmax(0,1fr)}.terrain .capture-zoom{max-width:340px}}
/* photo terrain avec une capture plus large que haute : colonne image plus large */
.terrain.terrain-capture{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
@media (max-width:760px){.terrain.terrain-capture{grid-template-columns:minmax(0,1fr)}}
.captures+.captures,.terrain+.captures{margin-top:18px}

/* Services : une image sur le côté de chaque étape (sans agrandissement) */
.jalon-visuel{margin:0;align-self:center;border-radius:12px;overflow:hidden;border:1px solid var(--filet);background:#fff;aspect-ratio:4/3}
.jalon-visuel img{display:block;width:100%;height:100%;object-fit:cover}
.jalon-visuel.v-coffret-cable img{object-position:50% 20%}
.jalon-visuel.v-legende-controle-acces img,.jalon-visuel.v-vue-materiels img{object-fit:contain;background:#fff}
.jalon-visuel.v-infobulle-porte,.jalon-visuel.v-infobulle-detecteur{background:#4a4a4a}
.jalon-visuel.v-infobulle-porte img,.jalon-visuel.v-infobulle-detecteur img{object-fit:contain}
@media (min-width:1080px){.jalon .corps:has(.jalon-visuel){grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3.4fr);align-items:center}}
@media (min-width:861px) and (max-width:1079px){.jalon-visuel{grid-column:1/-1;aspect-ratio:16/7}}
@media (max-width:860px){.jalon-visuel{aspect-ratio:16/9}}
.jalon-visuel.v-academie-formation img{object-position:0 0}

/* Services : vue éclatée des réalisations, sur fond foncé.
   À l'arrivée, les images partent du centre et se posent chacune à sa place ; au survol, l'image se redresse,
   grossit un peu et s'entoure de la lueur verte, avec son étiquette. Pas d'agrandissement au clic. */
.eclate-bloc{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 10%,#24434E 0%,#1C343E 45%,#12242E 100%);color:#fff}
.eclate-bloc>.anneaux-fond{position:absolute;width:560px;height:560px;right:-160px;bottom:-200px;opacity:.16;pointer-events:none}
.eclate-bloc .bloc-tete h2{color:#fff}
.eclate-bloc .bloc-tete p{color:rgba(255,255,255,.78)}
.eclate-bloc .accent-vert{color:#55C0AD}
.eclate{position:relative;height:760px;margin-top:20px}
.piece{position:absolute;left:var(--l);top:var(--t);width:var(--w);margin:0;padding:6px;border-radius:14px;background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.38);transform:rotate(var(--r));transform-origin:50% 50%;z-index:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .35s}
.piece img{display:block;width:100%;height:auto;border-radius:9px}
.piece figcaption{position:absolute;left:50%;bottom:-14px;transform:translate(-50%,6px);white-space:nowrap;padding:5px 12px;border-radius:999px;
  background:#55C0AD;color:#12242E;font:700 13px var(--f-titre);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.piece:hover{z-index:20;transform:rotate(0deg) scale(1.08);box-shadow:0 0 0 2px rgba(85,192,173,.85),0 0 34px 8px rgba(85,192,173,.45),0 18px 40px rgba(0,0,0,.45)}
.piece:hover figcaption{opacity:1;transform:translate(-50%,0)}
/* l'explosion : avant l'arrivée, toutes les images sont empilées au centre */
.eclate.anime .piece{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(0deg) scale(.42)}
.eclate.anime.vu .piece{opacity:1;transform:rotate(var(--r));transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .5s ease;transition-delay:calc(.15s + var(--i)*.09s)}
.eclate.anime.vu.fini .piece{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .35s;transition-delay:0s}
.eclate.anime.vu .piece:hover{transform:rotate(0deg) scale(1.08)}
@media (max-width:980px){
  .eclate{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .piece{position:relative;left:auto;top:auto;width:auto;align-self:start;transform:rotate(calc(var(--r)*.4))}
  .piece:nth-child(1){grid-column:1/-1}
  .eclate.anime .piece{transform:translateY(24px)}
  .eclate.anime.vu .piece{transform:rotate(calc(var(--r)*.4))}
  .piece figcaption{position:static;transform:none;opacity:1;display:inline-block;margin-top:8px;white-space:normal}
}

/* Services : carrousel des réalisations. L'image du centre est en avant, ses voisines en retrait sur les côtés ;
   flèches, points, clavier ou glisser du doigt. Au survol, l'image du centre grossit un peu avec la lueur verte. */
.carrousel{position:relative;margin-top:26px;outline:none}
.car-piste{position:relative;height:clamp(260px,40vw,470px);perspective:1400px}
.car-slide{position:absolute;top:0;left:50%;width:min(64%,760px);height:100%;margin:0;padding:6px;border-radius:16px;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.4);cursor:pointer;
  transform:translateX(calc(-50% + var(--o,0) * 58%)) scale(calc(1 - var(--a,0) * .2)) rotateY(calc(var(--o,0) * -10deg));
  opacity:calc(1 - var(--a,0) * .45);z-index:calc(10 - var(--a,0));filter:saturate(calc(1 - var(--a,0) * .35));
  transition:transform .7s cubic-bezier(.22,.8,.2,1),opacity .7s,filter .7s,box-shadow .35s}
.car-slide img{display:block;width:100%;height:100%;object-fit:contain;border-radius:11px;background:#fff}
.car-slide.cache{opacity:0;pointer-events:none}
.car-slide.actif{cursor:default}
.car-slide.actif:hover{transform:translateX(-50%) scale(1.04);box-shadow:0 0 0 2px rgba(85,192,173,.85),0 0 36px 8px rgba(85,192,173,.45),0 20px 44px rgba(0,0,0,.45)}
.car-fleche{position:absolute;top:calc(clamp(260px,40vw,470px) / 2);transform:translateY(-50%);z-index:20;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(85,192,173,.6);background:rgba(11,42,46,.75);color:#fff;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .25s,box-shadow .25s,transform .25s}
.car-fleche .ico{width:22px;height:22px}
.car-prec{left:0}.car-prec .ico{transform:rotate(180deg)}
.car-suiv{right:0}
.car-fleche:hover{background:#55C0AD;color:#12242E;box-shadow:0 0 22px 4px rgba(85,192,173,.45)}
.car-legende{margin:26px auto 0;text-align:center;display:grid;gap:6px;min-height:58px}
.car-legende b{font:700 1.25rem var(--f-titre);color:#55C0AD}
.car-legende span{color:rgba(255,255,255,.82);font-size:16.5px}
.car-legende.change{animation:car-texte .5s ease}
@keyframes car-texte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.car-points{display:flex;justify-content:center;gap:8px;margin-top:14px}
.car-points button{width:9px;height:9px;padding:0;border-radius:999px;border:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .3s,background .3s}
.car-points button[aria-current="true"]{width:28px;background:#55C0AD}
@media (max-width:760px){
  .car-slide{width:82%;transform:translateX(calc(-50% + var(--o,0) * 92%)) scale(calc(1 - var(--a,0) * .15))}
  .car-fleche{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){.car-slide{transition:none}}
.car-piste{perspective:none}
.car-slide{transform:translateX(calc(-50% + var(--o,0) * 62%)) scale(calc(1 - var(--a,0) * .24))}
@media (max-width:760px){.car-piste{height:250px}.car-slide{transform:translateX(calc(-50% + var(--o,0) * 92%)) scale(calc(1 - var(--a,0) * .15))}}
/* carrousel : sans flèches, on glisse (le défilement vertical de la page reste possible au doigt) */
.carrousel{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.car-slide img{-webkit-user-drag:none;pointer-events:none}
.carrousel .car-piste{cursor:grab}
.carrousel .car-piste:active{cursor:grabbing}
/* carrousel v3 : piste à défilement natif (doigt, pavé tactile) avec aimantation au centre */
.carrousel .car-piste{display:flex;align-items:center;gap:22px;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:24px calc(50% - min(32%,380px));cursor:grab}
.carrousel .car-piste::-webkit-scrollbar{display:none}
.carrousel .car-piste.saisi{scroll-snap-type:none;cursor:grabbing}
.carrousel .car-slide{position:relative;left:auto;top:auto;flex:0 0 min(64%,760px);height:clamp(260px,40vw,470px);scroll-snap-align:center;scroll-snap-stop:always;
  transform:scale(var(--s,1));opacity:var(--op,1);filter:none;z-index:auto;transition:box-shadow .35s,transform .12s linear}
.carrousel .car-slide.actif:hover{transform:scale(1.04)}
.carrousel{touch-action:auto}
@media (max-width:760px){.carrousel .car-piste{gap:14px;padding:18px 9%}.carrousel .car-slide{flex-basis:82%;height:250px}}


/* TEST couleur : le bleu nuit de la plaquette remplace le vert foncé ; petit dégradé du haut (plus clair) vers le bas */
.clair .pied,.tiroir{background:linear-gradient(180deg,#1D363F 0%,#172C36 50%,#101E26 100%)}
.site{background:linear-gradient(180deg,#14262F 0%,#101E26 100%)}
.clair .ouverture,.clair .sombre,.eclate-bloc{background:linear-gradient(180deg,#1D363F 0%,#172C36 55%,#101E26 100%)}
.appel,.sensible{background:linear-gradient(160deg,#24434E 0%,#1C343E 45%,#12242E 100%)}
.encart.plein,.partenaire.majeur,.tuile-accent{background:linear-gradient(160deg,#284A56 0%,#1C343E 70%)}
.intro-fond{background:linear-gradient(180deg,#1D363F 0%,#172C36 55%,#101E26 100%)}

/* Carrousel : au survol, l'image du centre grossit deux fois plus qu'avant, avec la lueur verte */
.carrousel .car-slide.actif:hover{transform:scale(1.16);z-index:5}
.carrousel .car-slide{transition:box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.carrousel .car-piste{padding-top:48px;padding-bottom:48px}
/* Carrousel plus grand : il prend toute la largeur de l'écran et les images sont plus grandes, pour lire les captures en entier */
.carrousel .car-piste{margin-inline:calc(50% - 50vw);width:100vw}
.carrousel .car-slide{height:clamp(260px,36vw,560px)}
@media (max-width:760px){.carrousel .car-slide{height:clamp(220px,62vw,420px)}}

/* Téléphone : bouton d'appel toujours visible en bas à droite (au-dessus du panier sur le catalogue) */
.appel-fixe{display:none}
@media (max-width:960px){
  .appel-fixe{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;display:grid;place-items:center;
    width:58px;height:58px;border-radius:50%;background:#55C0AD;color:#101E26;text-decoration:none;
    box-shadow:0 0 0 1px rgba(85,192,173,.7),0 0 22px 4px rgba(85,192,173,.38),0 10px 24px rgba(4,10,15,.35);transition:transform .25s}
  .appel-fixe .ico{width:26px;height:26px}
  .appel-fixe:active{transform:scale(.94)}
  .appel-fixe::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #55C0AD;opacity:0;animation:appel-onde 3.2s ease-out 1.5s infinite}
  body:has(.panier-flottant) .appel-fixe{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:has(.barre-devis:not([hidden])) .appel-fixe{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body:has(#tiroir:not([hidden])) .appel-fixe,.form-visible .appel-fixe{display:none}
}
@keyframes appel-onde{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.45)}}
@media (prefers-reduced-motion:reduce){.appel-fixe::after{animation:none}}

/* Frise : changement d'année rapide et propre.
   Première ouverture : la colonne s'ouvre et le texte apparaît presque tout de suite.
   D'une année à l'autre (.bascule) : l'ancien texte s'efface très vite (0,12 s), les colonnes glissent, le nouveau texte apparaît. */
@media (min-width:861px){
  .pc-txt{grid-template-columns:minmax(0,1fr)}
  .parcours .pc-plus{min-width:0}
  .parcours .pc-plus>div{width:var(--larg-actif,auto)}
  .parcours.touche{transition:grid-template-columns .45s cubic-bezier(.4,0,.2,1)}
  .parcours.bascule{transition-delay:.12s}
  .pc-etape:not(.actif) .pc-plus{transition:opacity .12s ease,grid-template-rows 0s linear .12s}
  .pc-etape:not(.actif) .pc-plus>div{transform:translateY(-6px);transition:transform .12s ease;animation:none}
  .pc-etape.actif .pc-plus{transition:grid-template-rows 0s,opacity .35s ease .15s}
  .pc-etape.actif .pc-plus>div{transform:none;transition:transform .4s cubic-bezier(.2,.7,.2,1) .15s;animation:none}
  .parcours.bascule .pc-etape.actif .pc-plus{transition:grid-template-rows 0s linear .12s,opacity .35s ease .35s}
  .parcours.bascule .pc-etape.actif .pc-plus>div{transition-delay:.35s}
}
.parcours.touche .pc-etape:not(.actif) .pc-court{animation:pc-court-revient .3s ease .3s both}
@keyframes pc-court-revient{from{opacity:0}to{opacity:1}}

/* Catalogue pas encore en ligne : liens grisés avec la mention « Bientôt disponible » */
a.bientot{opacity:.5;cursor:not-allowed;filter:saturate(.3)}
a.bientot:hover,a.bientot:focus{transform:none!important;box-shadow:none!important;color:inherit;text-shadow:none!important}
.nav a.bientot::after,.tiroir a.bientot::after{display:none}
.badge-bientot{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;border:1px solid currentColor;font:700 10.5px/1.4 var(--f-texte);letter-spacing:.04em;text-transform:none;vertical-align:middle;white-space:nowrap}
.nav .badge-bientot{margin-left:6px;font-size:10px;padding:1px 7px}
.passerelle.bientot .suite{font-weight:700}
/* catalogue retiré : on cache aussi les liens dès le chargement, avant le script (pas de clignotement) */
a[href^="catalogue/"],a[href^="../catalogue/"]{display:none!important}
.catalogue a[href*="catalogue/"]{display:revert!important}

/* Contact : coordonnées regroupées dans une seule carte sobre (lignes séparées par un trait fin, sans lueur) */
.clair .bloc .coordonnees{gap:0;background:#FFFFFF;border:1px solid var(--filet);border-radius:16px;padding:6px 20px;box-shadow:0 8px 22px rgba(28,52,62,.06)}
.clair .bloc .coordonnees .coord{grid-template-columns:24px minmax(0,1fr) auto;gap:14px;padding:14px 0;border:0;border-top:1px solid rgba(28,52,62,.09);border-radius:0;background:none;box-shadow:none}
.clair .bloc .coordonnees .coord:first-child{border-top:0}
.coordonnees .coord .pictos{width:24px;height:24px;background:none;border-radius:0}
.coordonnees .coord .pictos .ico{width:20px;height:20px}
.coordonnees .coord .val{font-size:16px}
.coordonnees .coord:first-child .val{font-size:16px}
.coordonnees .coord small{font-size:13.5px;margin-top:2px}
@media (hover:hover) and (pointer:fine){
  .coordonnees .copier{opacity:0;transition:opacity .2s}
  .coordonnees .coord:hover .copier,.coordonnees .copier:focus-visible{opacity:1}
}

/* Bouton « Contactez-nous » de l'en-tête : sur la page Contact il reste affiché, avec un anneau pour montrer qu'on y est */
/* la carte des coordonnées garde la lueur verte des autres cartes */
.clair .bloc .coordonnees{border-color:rgba(85,192,173,.38);box-shadow:0 0 28px 4px rgba(85,192,173,.14),0 8px 22px rgba(28,52,62,.06)}
/* frise, « Demain » : un seul vert, « on l'écrit avec vous » ; le lien passe en couleur de texte */
.pc-demain .pc-plus .lien-fleche{color:var(--texte)}
.pc-demain .pc-plus .lien-fleche:hover{text-decoration-color:var(--sarcelle);text-decoration-thickness:2px}


/* ================================================================ Retouches de mise en ligne (ajoutées par fabriquer_prod.py)
   Même design que la copie de relecture ; seulement des défauts corrigés. À reporter dans la copie si on la retouche encore. */

/* En-tête : le dernier bouton dépassait la marge droite du contenu (24 px sur l'accueil, 130 px dans le catalogue).
   Espacements un peu resserrés et libellé court « Mon devis » à toutes les largeurs (il l'était déjà sous 1320 px). */
@media (min-width:961px){
  .entete .wrap{gap:18px}
  .nav,.catalogue .nav{gap:16px}
  .btn-devis>span{display:none}
  .btn-devis::after{content:"Mon devis"}
}
@media (min-width:961px) and (max-width:1100px){
  .entete .wrap{gap:10px}
  .nav,.catalogue .nav{gap:9px}
}

/* Accueil, téléphone et tablette : les anneaux du coin remontaient derrière le texte et barraient « Voir nos références »
   (une position haute imposée annulait « collés en bas »). Ils reviennent dans le coin bas droit, sous les boutons. */
@media (max-width:960px){
  .accueil .hero .anneaux-coin{top:auto!important;bottom:-90px;right:-95px;width:300px}
}

/* Haut des pages intérieures, tablette : les grands anneaux passaient sous le texte d'introduction à pleine intensité.
   Même atténuation que sur téléphone (la copie la faisait déjà sous 760 px). */
@media (min-width:761px) and (max-width:1100px){
  .ouverture .anneaux-fond{opacity:.3}
}

/* Haut des pages intérieures, téléphone : l'en-tête est désormais transparent sur le bandeau, et les anneaux,
   placés dans le coin haut droit, passaient derrière le bouton « Menu ». Ils descendent dans le coin bas droit du bandeau. */
@media (max-width:760px){
  .ouverture .arcs{top:auto;bottom:-56px;right:-56px;width:190px;height:190px;margin-top:0}
}

/* Bouton rond fixe du téléphone : le grand halo flou paraissait coupé net sur certains fonds (MDV, 26/10).
   Ombre courte et nette à la place ; le filet et l'onde restent. */
@media (max-width:960px){
  .appel-fixe{box-shadow:0 0 0 1px rgba(85,192,173,.7),0 4px 12px rgba(4,10,15,.28)}
}

/* Frise « Notre parcours », téléphone : la phrase « Cliquez sur une année… » restait collée en bas de l'écran,
   sans fond, par-dessus les années (MDV, 26/10). Elle reste sous la frise ; seule une barre de flèches (année ouverte),
   si la copie en a une, suit l'écran. */
@media (max-width:860px){
  .pc-bas:has(.pc-nav[hidden]),.pc-bas:not(:has(.pc-nav)){position:static}
}

/* Services, téléphone : les étapes du projet arrivent en glissant depuis la droite ; pendant ce temps la page était
   plus large que l'écran (environ 30 px), elle bougeait de côté et le bouton « Menu » était coupé. On rogne ce qui dépasse. */
main{overflow-x:clip}

/* Page Contact : le bouton enveloppe (raccourci vers le formulaire) n'y sert à rien et cachait le bouton « Copier »
   et les champs du formulaire en bas de l'écran. */
body:has(#form) .appel-fixe{display:none}