/* @import Google Fonts retiré le 2 oct. 2026 (audit RGPD) : polices servies par assets/css/fonts.css, lié par views/layout.php. */
/* 25 sept. 2026 : Poppins = police du contenu dans la maquette Claude Design de l'accueil. Chargée ici seulement (layout.php n'a qu'un jeu de polices commun). */
:root{
    --ink:#0f161b;--ink-soft:#3d4a52;--bone:#eef1f3;--cream:#f7f8fa;--paper:#fff;
    --line:rgba(15,22,27,.13);--line-soft:rgba(15,22,27,.07);
    --accent:#17a3ec;--accent-deep:#0d77bd;--accent-soft:#e3f1fb;
    --grad:linear-gradient(180deg,#46b6f0,#1488cc);--glow:0 0 44px rgba(23,163,236,.45);
    --dark:#0a1116;--dark2:#070d11;--shadow:0 24px 60px -28px rgba(12,40,58,.5);--r:14px;--maxw:1360px;
    /* 24 sept. 2026, Jeremy : « agrandis un peu plus la largeur du site […]
       juste la home pour l'instant ». 1200 -> 1360 px. Cette feuille n'est
       chargée que par l'accueil : les autres pages restent à 1200 (base.css). */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Hanken Grotesk",-apple-system,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,.display{font-family:"Jost",-apple-system,sans-serif;font-weight:400;line-height:1.08;letter-spacing:-.005em}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{font-family:"Jost",sans-serif;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;color:var(--accent-deep);display:inline-flex;align-items:center;gap:11px}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}
  .pad{padding:clamp(72px,9vw,128px) 0}
  .sec-head h1,.sec-head h2{font-size:clamp(2rem,4.2vw,3.3rem);margin:14px 0 0;letter-spacing:-.02em}
  .sec-head h1 em,.sec-head h2 em{font-style:normal;font-weight:300;color:var(--accent)}
  .sec-head p{font-size:1.12rem;color:var(--ink-soft);margin-top:18px;max-width:56ch}
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:100px;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
  .btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -8px rgba(23,163,236,.6)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(23,163,236,.78),var(--glow)}
  .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(4px)}
  .btn-ghost:hover{background:rgba(255,255,255,.22)}
  .btn-lg{padding:17px 34px;font-size:1.02rem}

  /* header */
  header{position:fixed;top:0;left:0;right:0;z-index:50;transition:box-shadow .35s ease;background:rgba(247,248,250,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
  header.scrolled{box-shadow:0 6px 24px -18px rgba(0,0,0,.35)}
  /* 1er oct. 2026 (Jeremy : « mets le top bar en bleu foncé du logo ») : #001d6d comme menu.css
     (cette feuille, chargée après, remettait var(--dark) sur la home). */
  .topbar{background:#001d6d;color:rgba(255,255,255,.9);font-family:"Jost",sans-serif;font-size:.82rem;letter-spacing:.02em;line-height:1.3;padding:9px 20px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}
  .topbar svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;flex:none}
  .topbar .hl{color:#5cc4f2;font-weight:600}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
  header.scrolled .nav{padding:8px 24px}
  .brand{display:flex;align-items:center;gap:18px}
  /* 28 oct. 2026 (Jeremy : « grossis le logo ») : +20 % — 92 -> 110 px, sticky 76 -> 90 px, mobile 66 -> 78 px. */
  .brand img{height:110px;width:auto;transition:height .35s}
  header.scrolled .brand img{height:90px}
  .brand-tag{font-family:"Jost",sans-serif;font-size:.8rem;line-height:1.5;letter-spacing:.03em;color:var(--ink-soft);padding-left:18px;border-left:1px solid var(--line);white-space:nowrap}
  .brand-tag b{color:var(--accent-deep);font-weight:600}
  @media(max-width:880px){.brand-tag{display:none}}
  .nav-cta{display:flex;align-items:center;gap:18px}
  .nav-tel{color:var(--ink);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:7px}
  .nav-tel svg{width:16px;height:16px}
  @media(max-width:560px){.topbar{font-size:.71rem;padding:8px 12px;gap:7px}.topbar svg{width:14px;height:14px}.brand img,header.scrolled .brand img{height:78px}.nav-tel{display:none}}

/* --- Règles conservées pour les sections désactivées par interrupteur ($sections dans la vue) --- */
  /* reassurance */
  .assur{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px}
  .acard{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);padding:38px 30px;text-align:center;transition:transform .4s ease,box-shadow .4s ease}
  .acard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .aicon{width:60px;height:60px;border-radius:15px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
  .aicon svg{width:30px;height:30px;stroke:var(--accent-deep);fill:none;stroke-width:1.7}
  .acard h3{font-size:1.3rem;margin-bottom:10px}
  .acard p{color:var(--ink-soft);font-size:1rem;margin:0}
  @media(max-width:880px){.assur{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
  .btn-outline{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
  .btn-outline:hover{border-color:var(--ink-soft)}
  /* footer */
  footer{background:var(--dark2);color:rgba(255,255,255,.72);padding:64px 0 30px;font-size:.92rem}
  .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-col h4{color:#fff;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
  .foot-col a,.foot-col p{display:block;margin-bottom:7px;color:rgba(255,255,255,.72)}
  .foot-col a:hover{color:#7fcdee}
  .foot-bottom{padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:.8rem;color:rgba(255,255,255,.5)}
  .foot-bottom a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:2px}
  .foot-bottom a:hover{color:#7fcdee}

  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:11px 14px;background:rgba(247,248,250,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mobile-cta .btn{flex:1}
  .mobile-cta .btn-tel{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
  @media(max-width:720px){.mobile-cta{display:flex}body{padding-bottom:66px}}

  /* ---------- intro « porte vitrée opale » (accueil) ---------- */
  #glass-intro{position:fixed;inset:0;z-index:9999;overflow:hidden}
  #glass-intro.gi-open{pointer-events:none}
  #glass-intro .gi-pane{position:absolute;top:0;bottom:0;width:calc(50% + 1px);
    background:linear-gradient(115deg,rgba(255,255,255,.60),rgba(228,242,250,.34) 42%,rgba(255,255,255,.52) 70%,rgba(220,236,247,.34));
    -webkit-backdrop-filter:blur(17px) saturate(1.28) brightness(1.06);backdrop-filter:blur(17px) saturate(1.28) brightness(1.06);
    transition:transform 1.15s cubic-bezier(.77,0,.22,1);will-change:transform}
  #glass-intro .gi-left{left:0}
  #glass-intro .gi-right{right:0}
  #glass-intro .gi-pane::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(125deg,rgba(255,255,255,0) 0 26px,rgba(255,255,255,.05) 26px 27px);opacity:.6}
  #glass-intro .gi-center{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:18px;text-align:center;padding:0 24px;pointer-events:none;transition:opacity .6s ease,transform .7s ease}
  #glass-intro .gi-sub{font-family:"Jost",sans-serif;font-weight:400;font-size:clamp(.85rem,2.4vw,1.02rem);line-height:1.55;letter-spacing:.02em;color:#3d4a52;max-width:36ch}
  #glass-intro .gi-sub b{color:#0d77bd;font-weight:600}
  #glass-intro .gi-logo{width:clamp(190px,29vw,300px);height:auto;filter:drop-shadow(0 8px 22px rgba(9,30,45,.18))}
  #glass-intro .gi-hint{margin-top:24px}
  #glass-intro .gi-mouse{width:24px;height:40px;border:1.6px solid rgba(13,59,86,.55);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
  #glass-intro .gi-mouse::before{content:"";width:4px;height:8px;background:#0d3b56;border-radius:3px;animation:giScroll 1.8s ease-in-out infinite}
  @keyframes giScroll{0%,100%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(12px)}}
  #glass-intro.gi-open .gi-left{transform:translateX(-101%)}
  #glass-intro.gi-open .gi-right{transform:translateX(101%)}
  #glass-intro.gi-open .gi-center{opacity:0;transform:scale(1.05)}
  #glass-intro.gi-done{display:none}
  html.gi-lock,html.gi-lock body{overflow:hidden!important;height:100%;touch-action:none}
  @media(prefers-reduced-motion:reduce){#glass-intro{display:none}}

#glass-intro{display:none!important}html.gi-lock,html.gi-lock body{overflow:auto!important;height:auto!important}

/* L'accueil n'ouvre pas sur un visuel sombre : son header est clair des le
   chargement. Le logo clair y serait invisible — on force la version sombre,
   sans attendre le defilement. */
.page-accueil .brand .logo-light{display:none}
.page-accueil .brand .logo-dark{display:block}

/* Temoignages — repris mot pour mot de l'ancienne accueil. Ce sont de vrais
   avis d'installateurs partenaires, donc la preuve exactement adressee a
   l'audience du site, qui est B2B. La maquette les avait supprimes. */
.temoins{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:26px 0 24px}
.temoin{margin:0;display:flex;flex-direction:column;gap:14px;padding:24px;
  border:1px solid var(--line);border-radius:3px;background:var(--surface)}
.temoin img{height:34px;width:auto;object-fit:contain;align-self:flex-start;filter:grayscale(1);opacity:.75}
.temoin blockquote{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink)}
.temoin blockquote::before{content:"« "}
.temoin blockquote::after{content:" »"}
.temoin figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto;
  font-size:.78rem;color:var(--ink-soft)}
.temoin figcaption b{font-weight:500;color:var(--ink)}
.temoins-plus{margin:0}

body.page-accueil header.scrolled{
  background:rgba(247,248,250,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
body.page-accueil header.scrolled .brand-tag{color:var(--ink-soft);border-color:var(--line)}
body.page-accueil header.scrolled .brand-tag b{color:var(--accent-deep)}

/* « MENU » etait blanc sur blanc, donc illisible.
   layout.css est genere depuis la maquette seeglass, ou le header se pose sur
   un grand visuel sombre : .nav-burger y vaut color:#fff. Sur l'accueil le
   header est clair des le repos. La maquette de l'accueil ne declare pas
   .nav-burger — elle n'en avait pas besoin, son burger heritait de la couleur
   du texte — mais chez nous la regle globale s'applique et il faut la corriger.
   Meme cause exactement que .nav-tel, que la maquette de l'accueil corrige. */
body.page-accueil .nav-burger{color:var(--ink)}

body.page-accueil header:not(.scrolled){background:transparent;backdrop-filter:none;border-bottom:none}
body.page-accueil header:not(.scrolled) .nav-tel,
body.page-accueil header:not(.scrolled) .nav-burger{color:#fff}
body.page-accueil header:not(.scrolled) .brand-tag{color:rgba(255,255,255,.85);border-left-color:rgba(255,255,255,.35)}
body.page-accueil header:not(.scrolled) .brand .logo-light{display:block}
body.page-accueil header:not(.scrolled) .brand .logo-dark{display:none}

/* #btob — visuel bureau, titre blanc, trois engagements en bandeau accent */
.acc-btob{background:var(--cream);padding-bottom:clamp(56px,7vw,96px)}
.acc-btob-visuel{position:relative;min-height:clamp(380px,38vw,600px);display:flex;align-items:center;overflow:hidden;background:#1d2530}
.acc-btob-visuel picture,.acc-btob-visuel>picture img{position:absolute;inset:0;width:100%;height:100%}
.acc-btob-visuel>picture img{object-fit:cover}
.acc-btob-visuel::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,16,20,.72) 0%,rgba(8,16,20,.35) 55%,rgba(8,16,20,.1) 100%)}
.acc-btob-txt{position:relative;z-index:2;width:100%;padding-top:56px;padding-bottom:120px;color:#fff}
.acc-btob-txt h2{font-size:clamp(1.8rem,4vw,3.2rem);letter-spacing:-.02em;margin-bottom:28px;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.acc-btob-txt h2 em{font-style:normal;font-weight:300;color:#86d3f6}
.acc-btob-points{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin:-84px 0 0 auto;max-width:1000px;position:relative;z-index:3;padding:34px 36px;
  border-radius:var(--r);background:var(--grad);color:#fff;box-shadow:0 30px 60px -30px rgba(13,119,189,.7)}
.acc-btob-points svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.acc-btob-points h3{font-size:1.2rem;margin-bottom:8px}
.acc-btob-points p{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.9)}
@media(max-width:880px){.acc-btob-points{grid-template-columns:1fr;gap:22px;margin-top:-60px}}

/* #s-equiper — reprend les cartes .acard de #reassurance */
.acc-equiper{background:var(--paper)}
.acc-equip{display:flex;flex-direction:column;align-items:center;gap:14px}
.acc-equip p{flex:1}
.acc-equip .btn{white-space:normal;text-align:center}

/* ==================================================================
   25 sept. 2026 — REFONTE D'APRÈS LA MAQUETTE CLAUDE DESIGN
   (`claude design/Accueil Glass Systems.dc.html`). Valeurs reprises
   telles quelles de la maquette : conteneur 1400 px, Poppins pour le
   contenu, boutons à rayon 8 px, fonds et couleurs de chaque section.
   Tout est préfixé `dc-` et limité au <main> : header et footer, communs
   au site, ne changent pas (décision de Jeremy).
   L'ancienne feuille est entière dans
   `_backup-ftp/2026-09-25-avant-accueil-maquette-dc/`.
   ================================================================== */
body.page-accueil{background:#f7f8fa}
body.page-accueil main{font-family:"Poppins",-apple-system,sans-serif;color:#0f161b}
body.page-accueil main :is(h1,h2,h3){font-family:"Poppins",-apple-system,sans-serif}
/* 1er oct. 2026 (Jeremy : « mets le même écartement du site sur la home que sur
   les pages gammes ») : mêmes marges que gamme.css (.gm .wrap et header) —
   pleine largeur, 11 % de l'écran entre 56 et 220 px, 24 px sous 860 px.
   Avant : conteneur de 1400 px, marges 24 px. */
.dc-wrap,body.page-accueil main .wrap{max-width:none;margin:0 auto;padding:0 clamp(56px,11vw,220px)}
body.page-accueil #head .nav{max-width:none;padding-left:clamp(56px,11vw,220px);padding-right:clamp(56px,11vw,220px)}
@media (max-width:860px){
  .dc-wrap,body.page-accueil main .wrap{padding:0 24px}
  body.page-accueil #head .nav{padding-left:24px;padding-right:24px}
}
main em{font-style:normal}

/* Apparition au défilement : l'opacité n'est posée que par accueil.js.
   Sans script, tout reste visible (règle du projet : jamais de .reveal
   à opacity:0 dans la feuille). */
[data-rv].dc-rv-cache{opacity:0;transform:translateY(26px)}
[data-rv].dc-rv-anim{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

/* ---------- boutons ---------- */
.dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:"Poppins",sans-serif;
  font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:8px;border:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.dc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.dc-btn-lg{padding:16px 30px}
.dc-btn-plein{width:100%;white-space:normal;text-align:center}
.dc-btn-bleu{background:linear-gradient(180deg,#46b6f0,#1488cc);color:#fff;box-shadow:0 10px 30px -8px rgba(23,163,236,.6)}
.dc-btn-bleu:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(23,163,236,.78);color:#fff}
.dc-btn-verre{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(8px)}
.dc-btn-verre:hover{background:rgba(255,255,255,.22);color:#fff}
.dc-btn-trait{border:1.5px solid #0f161b;color:#0f161b;background:transparent}
.dc-btn-trait:hover{background:#0f161b;color:#fff}
.dc-btn-doux{background:#e3f1fb;color:#0d77bd}
.dc-btn-doux:hover{background:#d1e8f8;color:#0d77bd}
.dc-btn-contour{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.dc-btn-contour:hover{background:rgba(255,255,255,.12);color:#fff}
.dc-btn-blanc{background:#fff;border:1.5px solid rgba(15,22,27,.13);color:#0f161b}
.dc-btn-blanc:hover{background:#eef1f3}
.dc-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.dc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.dc-actions-centre{justify-content:center;gap:14px;margin-top:34px}

/* ---------- têtes de section ---------- */
.dc-tete h2{font-weight:500;line-height:1.1;letter-spacing:-.02em;font-size:clamp(1.8rem,3.4vw,2.6rem);text-wrap:balance}
.dc-tete h2 em{font-weight:400;color:#17a3ec}
.dc-tete p{font-size:1.12rem;color:#3d4a52;margin-top:16px;text-wrap:pretty}
.dc-tete-centre{max-width:82ch;margin:0 auto;text-align:center}
.dc-tete-centre h2 em{font-weight:300}
.dc-tete-centre p{margin-top:18px}
.dc-h2-grand{font-size:clamp(2rem,4.2vw,3.2rem)!important;margin-top:14px}
.dc-tete-ligne{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.dc-tete-ligne h2{font-weight:500;line-height:1.1;letter-spacing:-.02em;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.dc-tete-ligne > .dc-btn{flex:none}
.dc-tete-bas{align-items:flex-end;flex-wrap:wrap}
.dc-tete-bas .dc-tete{max-width:70ch}
.dc-surtitre{font-family:"Jost",sans-serif;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;
  color:#0d77bd;display:inline-flex;align-items:center;gap:11px}
.dc-surtitre::before{content:"";width:26px;height:1px;background:#17a3ec;display:inline-block}

/* ---------- hero ---------- */
.dc-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;background:#0c1417;color:#fff;overflow:hidden}
.dc-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 12 oct. 2026 : l'image PC a sa marge à gauche (maison décalée à droite) — on rogne à gauche, pas à droite */
/* 27 oct. 2026 : pavillon de piscine, centré un peu à droite (x 270-1385 sur 1586) — 85 % rognait son début à gauche */
/* Puis « pousse l'image un peu sur la droite et remonte-la un peu » : sur écran large la photo (1,6:1)
   remplit déjà la largeur, object-position seul n'y change rien — zoom de 6 % ancré en bas à gauche,
   qui décale la photo vers la droite et vers le haut ; cadrage vertical 50 % → 65 %. */
/* Puis photo fermeture-en-verre-glass-systems-home (2,16:1, pool house de x 17 % à 93 %) : zoom retiré
   (il coupait l'angle vitré à droite), rognage surtout à gauche pour garder l'angle sur écran étroit. */
/* Puis fermeture-en-verre-glass-systems-accueil (même pool house, de x 15 % à 82 %, maison à droite) : recentré. */
/* Puis « agrandis à partir d'en bas à droite, que l'on voie moins les chaises longues et plus le vitrage » :
   zoom de 10 % ancré en haut à gauche — le coin bas droit (chaises, marches) sort du cadre, le vitrage grandit ;
   object-position 58 % pour garder l'angle vitré sur écran étroit. */
/* Puis « descends un tout petit peu l'image » : zoom ancré tout en haut (0 0 au lieu de 0 20 %) — la photo
   descend de 2 % de la hauteur du hero (~20 px), le haut n'est plus rogné ; on ne peut pas descendre plus
   sans laisser une bande vide en haut. */
@media (min-width:761px){.dc-hero-img{object-position:58% 50%;transform:scale(1.1);transform-origin:0 0}}
.dc-hero-voile{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,16,20,.55) 0%,rgba(8,16,20,.1) 30%,rgba(8,16,20,.2) 55%,rgba(8,16,20,.85) 100%),
             linear-gradient(90deg,rgba(8,16,20,.45) 0%,transparent 60%)}
/* 2 oct. 2026 (Jeremy : « fais en sorte que le filtre noir sur l'image de la home soit
   moins opaque, plus léger ») : environ 40 % de noir en moins partout. Le bas gauche
   reste le plus sombre : c'est là qu'est le titre blanc. Avant : règle ci-dessus. */
.dc-hero-voile{
  background:linear-gradient(180deg,rgba(8,16,20,.32) 0%,rgba(8,16,20,.04) 30%,rgba(8,16,20,.1) 55%,rgba(8,16,20,.55) 100%),
             linear-gradient(90deg,rgba(8,16,20,.28) 0%,transparent 60%)}
/* 2 oct. 2026 (Jeremy : « enlève un peu de noir sous le menu ») : le dégradé noir sous
   la barre vient de menu.css (header::before, .80 -> .64 à 150 px -> 0 à 250 px, réglé
   pour les visuels les plus clairs du site). Sur l'accueil seulement : .55 -> .38 -> 0.
   Le haut de la photo d'accueil (ciel, oliviers) est assez sombre pour garder le menu
   blanc lisible (vérifié à l'écran). */
body.page-accueil header::before{
  background:linear-gradient(180deg,rgba(8,16,20,.55) 0,rgba(8,16,20,.38) 150px,rgba(8,16,20,0) 250px)}
@media(max-width:720px){
  body.page-accueil header::before{
    background:linear-gradient(180deg,rgba(8,16,20,.55) 0,rgba(8,16,20,.38) 96px,rgba(8,16,20,0) 180px)}
}
/* Même jour (Jeremy : « encore un peu moins ») : encore environ 30 % de noir en moins. */
.dc-hero-voile{
  background:linear-gradient(180deg,rgba(8,16,20,.22) 0%,rgba(8,16,20,.02) 30%,rgba(8,16,20,.06) 55%,rgba(8,16,20,.4) 100%),
             linear-gradient(90deg,rgba(8,16,20,.2) 0%,transparent 60%)}
/* 13 oct. 2026 (Jeremy : « mets un peu moins d'opacité sur le filtre noir du hero, c'est trop
   noir ») : environ 30 % de noir en moins sur le voile de la photo ET sur le dégradé sous le menu
   (accueil seulement). Valeurs précédentes juste au-dessus (.22/.02/.06/.4 + .2 ; .55/.38). */
.dc-hero-voile{
  background:linear-gradient(180deg,rgba(8,16,20,.15) 0%,rgba(8,16,20,.01) 30%,rgba(8,16,20,.04) 55%,rgba(8,16,20,.28) 100%),
             linear-gradient(90deg,rgba(8,16,20,.14) 0%,transparent 60%)}
body.page-accueil header::before{
  background:linear-gradient(180deg,rgba(8,16,20,.38) 0,rgba(8,16,20,.26) 150px,rgba(8,16,20,0) 250px)}
@media(max-width:720px){
  body.page-accueil header::before{
    background:linear-gradient(180deg,rgba(8,16,20,.38) 0,rgba(8,16,20,.26) 96px,rgba(8,16,20,0) 180px)}
}
.dc-hero-in{position:relative;width:100%;padding:170px 0 clamp(56px,8vh,96px)}
.dc-hero h1{font-weight:400;line-height:1.08;letter-spacing:-.02em;font-size:clamp(1.9rem,3.8vw,3.1rem);
  text-wrap:balance;max-width:22ch;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.dc-hero h1 em{font-weight:400;color:#5cc4f2}
/* 27 oct. 2026 (Jeremy : « mets sur mesure en blanc et en gras et le reste en non gras ») :
   titre en Poppins 400, « sur-mesure » en blanc 700. !important et `main` : menu.css impose
   500 aux titres et 300 à leur <em> (main :is(h1,h2) em, !important). */
main .dc-hero h1{font-weight:400!important}
main .dc-hero h1 em{font-weight:700!important;color:#fff}
.dc-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* ---------- gammes ---------- */
.dc-solutions{scroll-margin-top:110px;background:#f7f8fa;padding:clamp(40px,5vw,64px) 0 clamp(72px,9vw,120px)}
.dc-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}
.dc-tuile{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,22,27,.07);border-radius:16px;
  overflow:hidden;color:inherit;transition:transform .35s ease,box-shadow .35s ease}
a.dc-tuile:hover{transform:translateY(-6px);box-shadow:0 24px 60px -28px rgba(12,40,58,.5);color:inherit}
.dc-tuile-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#eef1f3}
.dc-tuile-img img{width:100%;height:100%;object-fit:cover}
/* 5 oct. 2026 (Jeremy : « dans les images des catégories, les textes sont coupés à gauche ») :
   visuels de 1,93:1 à 2,15:1 avec le nom du produit écrit à gauche, affichés en 16/9 ->
   le rognage centré mangeait 4 à 9 % à gauche. Calage à gauche : seule la photo (à droite)
   est rognée (8 à 17 %). */
.dc-tuile-img img{object-position:left center}
/* vidéo de survol (remise le 25 sept.) : invisible au repos, fondu au survol */
.dc-tuile-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
a.dc-tuile:hover .dc-tuile-vid{opacity:1}
.dc-tuile-txt{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.dc-tuile-t{font-weight:600;font-size:1.12rem;letter-spacing:.04em;text-transform:uppercase;color:#0d77bd}
.dc-tuile-d{color:#3d4a52;font-size:.92rem;text-wrap:pretty;margin-top:-6px}
.dc-tuile-bientot .dc-tuile-img img{filter:grayscale(.5)}
.dc-tuile-bientot .dc-tuile-d{margin-top:0;font-size:.98rem}
.dc-tuile-pro{margin-top:auto;font-weight:600;font-size:.92rem;color:#6b7a84}
.dc-badge{position:absolute;top:14px;left:14px;background:#0f161b;color:#fff;font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:8px}
.dc-tuile-toutes{align-self:start;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  background:linear-gradient(160deg,#1488cc 0%,#0d5f96 100%);border-radius:16px;padding:clamp(22px,2.6vw,34px);color:#fff;
  transition:transform .35s ease,box-shadow .35s ease}
.dc-tuile-toutes:hover{transform:translateY(-6px);box-shadow:0 24px 60px -28px rgba(13,95,150,.7);color:#fff}
.dc-tuile-toutes > span:first-child{font-weight:500;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.15;letter-spacing:-.01em;
  text-wrap:balance;max-width:14ch}
.dc-rond{align-self:flex-end;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center}
.dc-rond svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dc-guide{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  background:#0f161b;color:#fff;border-radius:16px;padding:clamp(26px,3vw,38px) clamp(26px,4vw,48px);
  transition:transform .35s ease,box-shadow .35s ease}
.dc-guide:hover{transform:translateY(-3px);box-shadow:0 24px 60px -28px rgba(12,40,58,.7);color:#fff}
.dc-guide-txt{display:flex;flex-direction:column;gap:8px;max-width:64ch}
.dc-guide-t{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:500}
.dc-guide-d{color:rgba(255,255,255,.8);font-size:1rem}
.dc-guide .dc-btn{flex:none;font-size:1rem;padding:15px 28px}
@media(max-width:760px){.dc-tuiles{grid-template-columns:1fr}.dc-guide .dc-btn{width:100%}}

/* ---------- projets (carrousel) ---------- */
.dc-projets{scroll-margin-top:110px;background:#fff;padding:clamp(40px,4.5vw,64px) 0 0;overflow:hidden}
.dc-projets-in{position:relative}
.dc-projets-fond{position:absolute;left:clamp(24px,12vw,220px);right:0;bottom:0;height:58%;background:#f7f8fa;border-radius:6px 0 0 0}
.dc-projets .dc-tete-ligne{position:relative}
.dc-projets .dc-tete-ligne > div{flex:1 1 auto;min-width:0}
.dc-projets .dc-tete-ligne h2 em{font-weight:300;color:#17a3ec}
.dc-projets .dc-tete-ligne p{font-size:1rem;color:#3d4a52;margin:12px 0 24px}
.dc-projets .dc-tete-ligne .dc-btn{margin-top:6px}
.dc-carrousel{position:relative;--l-grand:56%;--l-petit:42%;--ecart:2%;--pas:44%;--decale:clamp(40px,5vw,90px)}
.dc-car-fenetre{padding:0 0 60px}
.dc-car-piste{display:flex;align-items:flex-start;gap:var(--ecart);transition:transform .7s cubic-bezier(.65,0,.25,1)}
.dc-projet{flex:none;display:block;width:var(--l-petit);margin-top:var(--decale);color:#0f161b;opacity:.35;
  transition:width .7s cubic-bezier(.65,0,.25,1),margin-top .7s cubic-bezier(.65,0,.25,1),opacity .7s cubic-bezier(.65,0,.25,1)}
.dc-projet.est-grand{width:var(--l-grand);margin-top:0}
.dc-projet.est-grand,.dc-projet.est-grand + .dc-projet{opacity:1}
.dc-projet:hover{color:#0f161b}
/* saut invisible de la boucle (accueil.js) : aucune transition pendant le recalage */
.dc-car-piste.sans-anim,.dc-car-piste.sans-anim .dc-projet{transition:none}
.dc-projet-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef1f3;border-radius:16px}
.dc-projet-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.dc-projet:hover .dc-projet-img img{transform:scale(1.05)}
.dc-projet-k{display:block;font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#0d77bd;margin-top:22px}
.dc-projet-t{display:block;font-size:clamp(1.05rem,1.4vw,1.3rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;margin-top:10px;text-wrap:balance}
.dc-projet-trait{display:block;width:36px;height:2px;background:#17a3ec;margin-top:16px;transition:width .35s ease}
.dc-projet:hover .dc-projet-trait{width:64px}
.dc-fl{position:absolute;top:clamp(120px,13vw,230px);z-index:2;width:44px;height:44px;border-radius:50%;border:none;background:#fff;
  box-shadow:0 12px 30px -12px rgba(12,40,58,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease}
.dc-fl[hidden]{display:none}
.dc-fl:hover{background:#17a3ec;transform:scale(1.06)}
.dc-fl svg{width:20px;height:20px;fill:none;stroke:#0f161b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dc-fl-g{left:clamp(-26px,-1.6vw,-14px)}
.dc-fl-d{right:clamp(-26px,-1.6vw,-14px)}
@media(max-width:760px){
  .dc-projets .dc-tete-ligne{flex-direction:column;gap:0}
  .dc-projets .dc-tete-ligne .dc-btn{margin:0 0 24px}
  .dc-carrousel{--l-grand:84%;--l-petit:84%;--ecart:4%;--pas:88%;--decale:0px}
  .dc-fl{top:28%}.dc-fl-g{left:-8px}.dc-fl-d{right:-8px}
}

/* ---------- vidéo plein écran ---------- */
.dc-video{position:relative;overflow:hidden;width:100%;height:100vh;height:100svh;min-height:520px;background:#0c1417}
.dc-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.dc-video-btn{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,40px);z-index:2;width:56px;height:56px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);background:rgba(0,0,0,.18);color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .25s ease}
.dc-video-btn[hidden]{display:none}
.dc-video-btn:hover{background:rgba(0,0,0,.4)}
.dc-video-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dc-video-btn .dc-ico-lire{margin-left:3px;display:none}
.dc-video-btn.est-pause .dc-ico-lire{display:block}
.dc-video-btn.est-pause .dc-ico-pause{display:none}

/* ---------- configurateur (repris de coulissant-panoramique.css) ---------- */
.dc-config{scroll-margin-top:120px;padding:clamp(40px,4.5vw,64px) 0 clamp(72px,9vw,128px);background:#fff}
.cp-cfg{display:grid;grid-template-columns:1.08fr 1fr;gap:34px;margin-top:54px;align-items:stretch}
.cp-cfg-vue{display:flex;flex-direction:column;min-height:100%}
.cp-cfg-rendu{position:relative;flex:1;min-height:420px;border-radius:6px;overflow:hidden;background:#fff;
  border:1px solid rgba(15,22,27,.07);box-shadow:0 24px 60px -28px rgba(12,40,58,.5)}
.cp-cfg-rendu img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:24px}
/* 6 oct. 2026 : rendu fixe remplacé par la 3D du configurateur (iframe, vue seule) ; l'étiquette
   passe en haut à gauche (en bas à gauche, elle couvrait la barre de lecture de la 3D). */
.cp-cfg-rendu .cp-cfg-3d{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cp-cfg-rendu .cp-cfg-tag{top:14px;bottom:auto;pointer-events:none;z-index:1}
@media(max-width:980px){.cp-cfg-rendu:has(.cp-cfg-3d){min-height:380px}}
/* Puis (Jeremy : « réduis la partie de droite et augmente la partie de gauche ; enlève le dessin
   dans la partie de droite ») : 3D ~62 % / réglages ~38 % (avant 52 / 48) ; schéma SVG retiré
   de accueil.php (schema() d'accueil.js s'arrête seul sans ses éléments). */
.cp-cfg{grid-template-columns:1.65fr 1fr}

/* 6 oct. 2026 — cartes « Vous le concevez / Configurez / Commencez » (configurateur retiré de
   la home) : photo en portrait, texte blanc en haut sur un voile, bouton blanc en bas. */
.dc-confs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(32px,4vw,52px)}
.dc-conf{position:relative;display:block;aspect-ratio:7/10;border-radius:var(--r,14px);overflow:hidden;color:#fff;text-decoration:none;
  background:#d9d3cc;box-shadow:0 24px 60px -28px rgba(12,40,58,.5);isolation:isolate}
.dc-conf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:-2}
.dc-conf::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,16,20,.7) 0%,rgba(8,16,20,.3) 38%,rgba(8,16,20,0) 60%,rgba(8,16,20,.28) 100%)}
.dc-conf-haut{position:absolute;left:clamp(18px,2vw,26px);right:18px;top:clamp(20px,2.2vw,28px);display:flex;flex-direction:column}
.dc-conf-sur{font-family:"Jost",sans-serif;font-weight:600;font-size:.92rem}
.dc-conf-titre{font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(2rem,3.1vw,2.9rem);line-height:1.05;letter-spacing:-.02em;margin-top:4px}
.dc-conf-nom{font-family:"Jost",sans-serif;font-size:.98rem;margin-top:6px;opacity:.92}
.dc-conf-btn{position:absolute;left:50%;bottom:clamp(18px,2.2vw,28px);transform:translateX(-50%);background:#fff;color:#0f161b;
  font-family:"Jost",sans-serif;font-weight:500;font-size:.98rem;padding:13px 28px;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45);transition:background .25s,color .25s}
.dc-conf:hover img{transform:scale(1.04)}
.dc-conf:hover .dc-conf-btn{background:#17a3ec;color:#fff}
.dc-conf:focus-visible{outline:3px solid #0b6aa8;outline-offset:3px}
/* Puis (Jeremy : « non, une seule image pour dire configurez vos produits ») : carte unique, centrée. */
.dc-confs{grid-template-columns:minmax(0,440px);justify-content:center}
/* Puis (Jeremy : « mets l'image sur toute la largeur comme l'image de la marquise plus bas ») :
   même gabarit que .dc-marquise-carte — largeur du contenu, 2/1, carré sous 760 px, arrondi 16 px. */
.dc-confs{grid-template-columns:minmax(0,1fr)}
.dc-conf{aspect-ratio:2/1;border-radius:16px}
.dc-conf img{object-position:center 60%}
.dc-conf-titre{font-size:clamp(2.4rem,4.6vw,4rem)}
.dc-conf-sur{font-size:clamp(.92rem,1.2vw,1.05rem)}
.dc-conf-nom{font-size:clamp(1rem,1.5vw,1.2rem)}
.dc-conf-haut{left:clamp(20px,3vw,44px);top:clamp(22px,3vw,44px)}
.dc-conf-btn{bottom:clamp(20px,3vw,40px)}
@media(max-width:760px){.dc-conf{aspect-ratio:1/1}}
/* Puis (Jeremy : « montre un motion de ce que l'on peut paramétrer ») : vidéo en fond de carte. */
.dc-conf .dc-conf-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:#dcd5cc}
.dc-conf::before{background:linear-gradient(180deg,rgba(8,16,20,.62) 0%,rgba(8,16,20,.3) 34%,rgba(8,16,20,0) 55%)}
/* mobile : vidéo carrée calée en haut d'une carte 4/5 ; le bouton tombe dans la bande beige
   du bas (même teinte que le fond de la vidéo) et ne couvre plus l'étiquette du réglage. */
@media(max-width:760px){.dc-conf:has(.dc-conf-vid){aspect-ratio:4/5}}
/* Puis (décor terrasse) : la vidéo mobile est exportée en 4/5, elle remplit la carte. */
.dc-conf .dc-conf-vid{background:#7fb3da}
/* 13 oct. 2026 (Jeremy : « grossis vos produits ») : avant clamp(1rem,1.5vw,1.2rem). Le titre du
   produit incrusté dans la vidéo est calé dessous (38,5 % en grand format, 28,4 % en mobile). */
.dc-conf-nom{font-size:clamp(1.1rem,2.2vw,1.75rem);opacity:1}
/* Puis (« remonte vos produits aussi ») : collé sous « Configurez » (avant margin-top 6px, interligne normal). */
.dc-conf-nom{margin-top:-2px;line-height:1.1}
@media(prefers-reduced-motion:reduce){.dc-conf img{transition:none}.dc-conf:hover img{transform:none}}
@media(min-width:981px){.cp-cfg-rendu:has(.cp-cfg-3d){min-height:520px}}
.cp-cfg-tag{position:absolute;left:14px;bottom:14px;background:rgba(8,16,20,.72);backdrop-filter:blur(6px);color:#fff;
  font-family:"Jost",sans-serif;font-size:.78rem;letter-spacing:.07em;padding:7px 15px;border-radius:8px}
.cp-cfg-panneau{background:#f7f8fa;border:1px solid rgba(15,22,27,.07);border-radius:8px;
  box-shadow:0 30px 70px -45px rgba(12,40,58,.45);overflow:hidden;display:flex;flex-direction:column}
.cp-cfg-onglets{display:flex;border-bottom:1px solid rgba(15,22,27,.07);background:#fff}
.cp-cfg-onglet{flex:1;min-width:0;background:none;border:none;cursor:pointer;font-family:"Jost",sans-serif;font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;font-weight:500;padding:13px 4px;display:flex;align-items:center;justify-content:center;
  gap:7px;color:#3d4a52;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.cp-cfg-onglet span:first-child{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.66rem;flex:none;box-sizing:border-box;border:1.5px solid rgba(15,22,27,.13);color:#3d4a52;transition:all .25s}
.cp-cfg-onglet[aria-selected=true]{color:#0d77bd;border-bottom-color:#17a3ec}
.cp-cfg-onglet[aria-selected=true] span:first-child{background:#17a3ec;border-color:#17a3ec;color:#fff}
.cp-cfg-onglet.est-fait span:first-child{background:#e3f1fb;border-color:#17a3ec;color:#0d77bd}
.cp-cfg-schema{background:#fff;border-bottom:1px solid rgba(15,22,27,.07);padding:14px 16px 8px}
.cp-cfg-schema svg{width:100%;height:auto;display:block}
.cp-cfg-corps{padding:22px 26px;min-height:280px;flex:1}
.cp-cfg-pied{display:flex;gap:12px;justify-content:space-between;padding:16px 26px 22px;border-top:1px solid rgba(15,22,27,.07)}
.cp-champ{font-family:"Jost",sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:#3d4a52;margin:20px 0 10px;display:block}
.cp-cfg-corps > div > .cp-champ:first-child{margin-top:0}
.cp-curseur{display:flex;gap:16px;align-items:center}
.cp-curseur input[type=range]{flex:1;accent-color:#17a3ec;cursor:pointer}
.cp-curseur-val{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;color:#3d4a52}
.cp-curseur-val input{width:82px;padding:9px 8px;border:1.5px solid rgba(15,22,27,.13);border-radius:4px;font-family:inherit;
  font-size:.95rem;font-weight:600;text-align:center;background:#fff;color:#0f161b}
.cp-chips{display:flex;gap:10px;flex-wrap:wrap}
.cp-chip{background:#fff;border:1.5px solid rgba(15,22,27,.13);color:#0f161b;border-radius:8px;padding:10px 20px;font-weight:600;
  font-size:.9rem;cursor:pointer;font-family:inherit;transition:border-color .25s,background .25s,color .25s}
.cp-chip[aria-pressed=true]{background:#e3f1fb;border-color:#17a3ec;color:#0d77bd}
.cp-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-choix button{text-align:left;background:#fff;border:1.5px solid rgba(15,22,27,.13);border-radius:6px;padding:14px 16px;cursor:pointer;
  font-family:inherit;display:flex;flex-direction:column;gap:4px;transition:border-color .25s,background .25s,box-shadow .25s}
.cp-choix button[aria-pressed=true]{background:#e3f1fb;border-color:#17a3ec;box-shadow:0 0 0 3px rgba(23,163,236,.12)}
.cp-choix b{font-size:.96rem;color:#0f161b}
.cp-choix span{font-size:.8rem;color:#3d4a52;line-height:1.45}
.cp-swatches{display:flex;gap:11px;flex-wrap:wrap}
.cp-swatch{width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;box-sizing:border-box;border:2px solid rgba(15,22,27,.13);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.cp-swatch[aria-pressed=true]{border-color:#17a3ec;box-shadow:0 0 0 3px #e3f1fb}
.cp-swatch-libre{border:2px dashed rgba(15,22,27,.3)}
.cp-aide{font-size:.85rem;color:#3d4a52;margin-top:14px}
.cp-alerte{display:flex;gap:9px;align-items:flex-start;font-size:.83rem;line-height:1.5;color:#7a4d00;background:#fff6e4;
  border:1px solid #f0c36d;border-radius:5px;padding:11px 14px;margin-top:12px}
.cp-alerte[hidden]{display:none}
.cp-alerte svg{flex:none;margin-top:2px;width:17px;height:17px;fill:none;stroke:#c07a00;stroke-width:2}
.cp-recap{list-style:none;border:1px solid rgba(15,22,27,.07);border-radius:6px;background:#fff;padding:6px 18px;margin:0 0 18px}
.cp-recap li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(15,22,27,.07);font-size:.94rem}
.cp-recap li:last-child{border-bottom:none}
.cp-recap span{color:#3d4a52}
.cp-recap b{color:#0f161b;font-weight:600;text-align:right}
@media(max-width:980px){.cp-cfg{grid-template-columns:1fr}.cp-cfg-rendu{min-height:300px}}
@media(max-width:760px){.cp-choix{grid-template-columns:1fr}}
@media(max-width:560px){
  .cp-cfg-onglet{font-size:.6rem;padding:11px 2px;gap:5px}
  .cp-cfg-onglet span:last-child{display:none}
  .cp-cfg-corps{padding:18px}
  .cp-cfg-pied{padding:14px 18px 18px}
}

/* ---------- bloc Marquise « Configurez-la » (25 sept. 2026) ----------
   Dans le conteneur (pas pleine largeur), bords arrondis comme les tuiles.
   Voile en bas à gauche : le texte blanc reste lisible sur le ciel clair. */
.dc-marquise{padding:clamp(56px,7vw,96px) 0 0}
.dc-marquise + .dc-actus{padding-top:clamp(48px,5.5vw,80px)}
.dc-marquise-carte{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:2/1;background:#0c1417;color:#fff;
  box-shadow:0 24px 60px -28px rgba(12,40,58,.5)}
/* 2/1 calé à 25 % du haut : la marquise (haut de l'image) et la personne sur
   le transat restent entières. En 21/9 centré, la marquise était coupée. */
.dc-marquise-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.dc-marquise-carte::after{content:"";position:absolute;inset:0;
  /* 25 sept., Jeremy : ombre sur le BAS seulement. Le voile horizontal (gauche)
     qui assombrissait aussi le haut est retiré ; dégradé bas → transparent à 55 %. */
  background:linear-gradient(0deg,rgba(8,16,20,.78) 0%,rgba(8,16,20,.45) 25%,rgba(8,16,20,0) 55%)}
.dc-marquise-carte:hover{color:#fff}
.dc-marquise-carte:hover img{transform:scale(1.04)}
.dc-marquise-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(22px,3.4vw,48px)}
.dc-marquise-t{font-weight:500;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.dc-marquise-d{font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(255,255,255,.92);margin-top:10px;text-shadow:0 1px 20px rgba(0,0,0,.4)}
.dc-marquise-txt .dc-btn{margin-top:22px}
.dc-btn-blanc-plein{background:#fff;color:#0f161b;box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.dc-marquise-carte:hover .dc-btn-blanc-plein{transform:translateY(-2px);background:#fff;color:#0d77bd}
.dc-marquise-badge{position:absolute;top:clamp(16px,2.4vw,28px);left:clamp(16px,2.4vw,28px);z-index:1;background:#fff;color:#0d77bd;
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:8px}
/* mobile : carré, pour loger badge + titre + phrase + bouton sans chevauchement */
@media(max-width:760px){.dc-marquise-carte{aspect-ratio:1/1}.dc-marquise-carte img{object-position:30% 25%}
  /* sur mobile le texte occupe ~60 % de la hauteur : le dégradé monte plus haut */
  .dc-marquise-carte::after{background:linear-gradient(0deg,rgba(8,16,20,.8) 0%,rgba(8,16,20,.5) 40%,rgba(8,16,20,0) 75%)}}

/* ---------- actualités ---------- */
.dc-actus{scroll-margin-top:110px;padding:clamp(72px,9vw,120px) 0 clamp(28px,3vw,44px)}
.dc-actus-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px}
.dc-actu{display:flex;flex-direction:column;align-items:flex-start;color:#0f161b;min-width:0}
.dc-actu:hover{color:#0f161b}
.dc-actu-img{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#eef1f3}
.dc-actu-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.dc-actu:hover .dc-actu-img img{transform:scale(1.06)}
.dc-actu-cat{font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#0d77bd;margin-top:20px}
.dc-actu-t{font-weight:500;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.2;letter-spacing:-.01em;margin-top:10px;text-wrap:balance}
.dc-actu-t span{color:#17a3ec}
.dc-actu-l{margin-top:16px;display:inline-flex;align-items:center;font-weight:700;font-size:.82rem;padding:5px 16px;border-radius:8px;
  background:#17a3ec;color:#fff;transition:background .25s ease}
.dc-actu:hover .dc-actu-l{background:#0d77bd}
@media(max-width:760px){.dc-actus-liste{grid-template-columns:1fr;max-width:460px}.dc-tete-ligne{flex-wrap:wrap}}

/* ---------- avis Google (section masquée par la maquette) ---------- */
.dc-avis{scroll-margin-top:110px;background:#fff;padding:clamp(72px,9vw,120px) 0}
.dc-avis-liste{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;margin-top:44px;padding-bottom:8px}
.dc-avis-carte{flex:none;width:clamp(280px,30vw,360px);scroll-snap-align:start;margin:0;background:#f7f8fa;border:1px solid rgba(15,22,27,.07);
  border-radius:6px;padding:26px;display:flex;flex-direction:column;gap:16px}
.dc-avis-carte figcaption{display:flex;align-items:center;gap:14px}
.dc-avis-carte figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.dc-avis-carte figcaption > span{display:flex;flex-direction:column;gap:2px}
.dc-etoiles{font-size:.98rem;letter-spacing:2px;color:#f5b301}
.dc-avis-carte blockquote{margin:0;font-size:.98rem;line-height:1.65;flex:1}
.dc-avis-g{width:50px;height:auto}

/* ---------- conseils ---------- */
.dc-conseils{scroll-margin-top:110px;background:#f5f5f5;padding:clamp(56px,6vw,84px) 0 clamp(72px,9vw,120px)}
.dc-conseils-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px}
.dc-conseil{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,22,27,.07);border-radius:6px;overflow:hidden;color:#0f161b;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.dc-conseil:hover{border-color:#17a3ec;transform:translateY(-4px);box-shadow:0 20px 50px -30px rgba(12,40,58,.5);color:#0f161b}
.dc-conseil-img{display:block;aspect-ratio:4/4.6;overflow:hidden;background:#eef1f3}
.dc-conseil-img img{width:100%;height:100%;object-fit:cover}
.dc-conseil-txt{display:flex;flex-direction:column;justify-content:space-between;gap:20px;flex:1;padding:22px 24px 24px}
.dc-conseil-t{font-family:"Jost",sans-serif;font-size:1.18rem;font-weight:500;line-height:1.3;text-wrap:balance}
.dc-conseil-d{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.88rem;color:#3d4a52}
.dc-conseil-d span{color:#0d77bd;font-size:1.1rem}

/* ---------- pourquoi Glass Systems ---------- */
.dc-confiance{scroll-margin-top:110px;background:#001a6c;color:#fff;padding:clamp(72px,9vw,120px) 0}
.dc-confiance .dc-tete{max-width:70ch}
.dc-confiance .dc-surtitre{color:#7fcdee}
.dc-confiance .dc-tete h2 em{color:#5cc4f2}
.dc-confiance-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:clamp(36px,4vw,52px)}
.dc-confiance-carte{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,36px);text-align:center;display:flex;flex-direction:column;align-items:center}
.dc-ico{width:60px;height:60px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#7fcdee}
.dc-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dc-confiance-carte h3{font-weight:500;font-size:1.3rem;color:#fff;margin-top:26px}
.dc-confiance-carte p{color:rgba(255,255,255,.82);font-size:.98rem;line-height:1.7;margin-top:12px;text-wrap:pretty}
.dc-confiance-carte strong{color:#fff;font-weight:600}
.dc-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:28px;padding:clamp(24px,3vw,34px) 0;
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.dc-chiffres div{text-align:center}
.dc-chiffres b{display:block;font-weight:400;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.1;color:#7fcdee}
.dc-chiffres span{display:block;color:rgba(255,255,255,.82);font-size:.86rem;margin-top:8px;text-wrap:pretty}
.dc-showroom{scroll-margin-top:110px;margin-top:clamp(56px,7vw,96px);display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:center}
.dc-showroom-img{flex:1.5 1 480px;min-width:0;position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#07206f}
.dc-showroom-img img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.dc-showroom-txt{flex:1 1 320px;min-width:0}
.dc-showroom-txt .dc-surtitre{color:#7fcdee}
.dc-showroom-txt h3{font-weight:500;line-height:1.15;letter-spacing:-.01em;font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:14px;text-wrap:balance}
.dc-showroom-txt p{color:rgba(255,255,255,.85);font-size:1.06rem;margin-top:16px;text-wrap:pretty}
.dc-showroom-txt ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:22px}
.dc-showroom-txt li{display:flex;gap:12px;color:#fff;font-size:.98rem}
.dc-showroom-txt li svg{flex:none;width:18px;height:18px;margin-top:3px;fill:none;stroke:#5cc4f2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.dc-showroom-img{flex-basis:100%}}

/* ---------- catalogues ---------- */
.dc-catalogues{scroll-margin-top:110px;background:#fff;padding:clamp(56px,7vw,96px) 0 clamp(72px,9vw,120px)}
.dc-catalogues-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(36px,5vw,80px);align-items:center}
.dc-catalogues-in h2{font-weight:500;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.dc-catalogues-in h2 em{font-weight:400;color:#17a3ec}
.dc-catalogues-in > div > p{font-size:1.12rem;color:#3d4a52;margin-top:18px;max-width:52ch;text-wrap:pretty}
.dc-catalogues-in > div > .dc-btn{margin-top:30px}
.dc-cat-boite{background:#f5f5f5;border-radius:6px;padding:clamp(28px,3.5vw,44px)}
.dc-form{display:flex;flex-direction:column;gap:18px}
.dc-form h3{font-size:1.34rem;font-weight:500}
.dc-form-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.dc-form label > span{display:block;font-size:.82rem;font-weight:600;color:#0f161b;margin-bottom:7px}
.dc-form input[type=text],.dc-form input[type=email],.dc-form select{width:100%;font-family:"Poppins",sans-serif;font-size:.95rem;color:#0f161b;
  background:#fff;border:1px solid rgba(15,22,27,.15);border-radius:6px;padding:13px 14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.dc-form select{cursor:pointer}
.dc-form input:focus,.dc-form select:focus{border-color:#17a3ec;box-shadow:0 0 0 3px rgba(23,163,236,.18)}
.dc-case{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;color:#3d4a52;cursor:pointer}
.dc-case input{margin-top:3px;accent-color:#1488cc;flex:none}
.dc-form .dc-btn{align-self:flex-start;padding:13px 26px}

/* ---------- un projet en tête ---------- */
.dc-contact{scroll-margin-top:110px;background:#0a1116;color:#fff;padding:clamp(72px,9vw,120px) 0;text-align:center}
.dc-contact h2{font-weight:500;line-height:1.1;letter-spacing:-.02em;font-size:clamp(2.2rem,4.6vw,3.6rem)}
.dc-contact h2 em{font-weight:400;color:#5cc4f2}
.dc-contact p{color:rgba(255,255,255,.82);font-size:1.12rem;max-width:58ch;margin:18px auto 0;text-wrap:pretty}
.dc-contact .dc-btn{font-size:1.04rem}
.dc-contact .dc-btn-contour{border-color:rgba(255,255,255,.5)}

/* ---------- newsletter ---------- */
.dc-news{background:#f7f8fa;padding:clamp(72px,9vw,120px) 0}
.dc-news-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.dc-news-sur{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#3d4a52}
.dc-news h2{font-weight:500;line-height:1.15;letter-spacing:-.02em;font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:18px;text-wrap:balance}
.dc-news h2 em{font-weight:500;color:#17a3ec}
.dc-news-in > p{color:#3d4a52;font-size:1.02rem;margin-top:12px}
.dc-news-form{display:flex;width:100%;max-width:760px;margin-top:34px}
.dc-news-form input{flex:1;min-width:0;height:56px;padding:0 18px;border:1px solid rgba(15,22,27,.25);border-right:none;border-radius:8px 0 0 8px;
  background:#fff;font-family:"Poppins",sans-serif;font-size:.98rem;color:#0f161b;outline:none}
.dc-news-form input:focus{border-color:#17a3ec}
.dc-news-form button{flex:none;height:56px;padding:0 30px;border:none;border-radius:0 8px 8px 0;background:linear-gradient(180deg,#46b6f0,#1488cc);
  color:#fff;font-family:"Poppins",sans-serif;font-weight:600;font-size:.98rem;cursor:pointer;transition:filter .25s ease}
.dc-news-form button:hover{filter:brightness(1.08)}
.dc-news-in > p.dc-news-rgpd{max-width:760px;margin-top:16px;font-size:.74rem;line-height:1.55;color:#3d4a52;text-align:left}
.dc-news-rgpd a{color:#0f161b;font-weight:600;text-decoration:underline}
@media(max-width:480px){.dc-news-form input{padding:0 12px;font-size:.88rem}.dc-news-form button{padding:0 18px}}

@media(prefers-reduced-motion:reduce){
  .dc-car-piste,.dc-projet{transition:none}
  [data-rv].dc-rv-cache{opacity:1;transform:none}
}