/* ============================================================
   POLICES AUTO-HÉBERGÉES
   Poppins et DM Sans étaient chargées depuis fonts.googleapis.com,
   ce qui transmettait l'adresse IP de chaque visiteur à Google aux
   États-Unis — un transfert que la CNIL n'admet qu'avec consentement.
   Les fichiers woff2 sont désormais servis par le site : plus aucun
   tiers, donc plus rien à consentir. Les deux familles sont sous
   licence SIL Open Font 1.1, qui autorise cette redistribution.
   Sous-ensembles latin et latin-ext ; le navigateur ne télécharge
   que les graisses réellement utilisées (unicode-range + swap).
   ============================================================ */
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/dm-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/dm-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/poppins-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/poppins-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;background:#fff;color:#111;overflow-x:hidden;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
a:hover{color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;outline:none;background:none;font-family:inherit}

:root{
  --g:#7DA63F;--gd:#5e7d2e;--g10:rgba(125,166,63,.10);--g20:rgba(125,166,63,.20);
  /* Vert « texte » : jeton branché partout où le vert porte du texte sur
     fond clair, ou reçoit du texte blanc (eyebrows, liens, boutons devis,
     contours de focus…). Il est volontairement réglé sur le vert de marque
     — décision client de septembre 2026, le rendu prime.
     Conséquence assumée : 2,84:1 sur blanc, sous le seuil WCAG AA de 4,5
     pour le texte et de 3 pour les contours de focus.
     Pour repasser conforme sans rien toucher d'autre, remplacer par :
       --gt:#547028;--gt-d:#41571f;   (5,64:1 sur blanc) */
  --gt:#7DA63F;--gt-d:#5e7d2e;
  --k:#111;--w:#fff;--bg:#f5f5f7;--border:#e5e5ea;--muted:#6e6e73;
  --gold:#c9920f;--gold10:rgba(201,146,15,.12);
  --head:'Poppins',sans-serif;
  --max:1200px;--r:10px;--rsm:8px;--rlg:16px;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media(min-width:600px){.wrap{padding:0 40px}}
@media(min-width:1024px){.wrap{padding:0 56px}}

.label{display:inline-block;font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gt);margin-bottom:14px}
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:14px;font-weight:600;border-radius:50px;padding:13px 28px;transition:all .22s;cursor:pointer;white-space:nowrap;text-decoration:none;border:none}
.btn-p{background:var(--gt);color:#fff;box-shadow:0 2px 16px rgba(125,166,63,.28)}
.btn-p:hover{background:var(--gt-d);color:#fff;transform:translateY(-2px);box-shadow:0 8px 28px rgba(125,166,63,.38)}
.btn-g{background:transparent;color:var(--k);border:1.5px solid var(--border)}
.btn-g:hover{border-color:var(--gt);color:var(--gt);background:var(--g10)}
.btn-gw{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-gw:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.btn-w{background:#fff;color:var(--gt);font-weight:700}
.btn-w:hover{background:#f0f0f0;color:var(--gt);transform:translateY(-1px)}
.btn-sm{padding:10px 22px;font-size:13px}

/* PROGRESS */
#prog{position:fixed;top:0;left:0;right:0;height:7px;background:linear-gradient(90deg,var(--g),#a8d55a);transform-origin:left;transform:scaleX(0);z-index:9999;will-change:transform}

/* BOUTON MENU FLOTTANT */
.burger-fab{position:fixed;top:18px;right:18px;z-index:900;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 28px rgba(0,0,0,.14);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:transform .25s,box-shadow .3s,border-color .25s;-webkit-tap-highlight-color:transparent;outline:none}
.burger-fab:hover{transform:scale(1.08);box-shadow:0 12px 34px rgba(0,0,0,.2);border-color:rgba(125,166,63,.5)}
.burger-fab span{display:block;width:20px;height:2px;background:var(--k);border-radius:2px;transition:transform .28s,opacity .28s,background .2s}
.burger-fab:hover span{background:var(--g)}
.burger-fab.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger-fab.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger-fab.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:800;opacity:0;pointer-events:none;transition:opacity .3s}
.mob-overlay.open{opacity:1;pointer-events:all}
.mob-nav{position:fixed;inset:0;z-index:850;display:flex;flex-direction:column;background:linear-gradient(165deg,#fdfefb 0%,#f1f6e8 55%,#e4eed4 100%);opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;overflow-y:auto}
.mob-nav.open{opacity:1;visibility:visible}
@media(min-width:1024px){.mob-nav,.mob-overlay,.burger-fab{display:none!important}}
.mob-links{margin:auto 0;padding:96px 30px 24px;display:flex;flex-direction:column;gap:4px}
.mob-links a{display:flex;align-items:baseline;gap:16px;padding:11px 0;font-family:var(--head);font-size:clamp(25px,7vw,30px);font-weight:800;letter-spacing:-.5px;color:var(--k);opacity:0;transform:translateY(14px);transition:color .16s,opacity .34s ease,transform .34s ease}
.mob-num{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gt)}
.mob-nav.open .mob-links a{opacity:1;transform:none}
.mob-nav.open .mob-links a:nth-child(1){transition-delay:.08s}
.mob-nav.open .mob-links a:nth-child(2){transition-delay:.13s}
.mob-nav.open .mob-links a:nth-child(3){transition-delay:.18s}
.mob-nav.open .mob-links a:nth-child(4){transition-delay:.23s}
.mob-nav.open .mob-links a:nth-child(5){transition-delay:.28s}
.mob-nav.open .mob-links a:nth-child(6){transition-delay:.33s}
.mob-links a:hover,.mob-links a:active{color:var(--gt)}
@media(prefers-reduced-motion:reduce){.mob-nav{transition:none}.mob-links a{opacity:1;transform:none;transition:color .16s}}
.mob-footer{padding:14px 30px calc(30px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:18px}
.mob-footer .btn{flex:1;justify-content:center;border-radius:14px;padding:16px;font-size:15px}

/* HERO */
.pg-hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:#fff}
.hero-wave-bg{position:absolute;inset:0;background:linear-gradient(120deg,#f1f5e9 0%,#dcead0 55%,#cfe3bb 100%)}
.hero-wave-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-wave-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.45) 42%,rgba(255,255,255,.06) 72%)}
.hero-grid{position:relative;z-index:5;width:100%;max-width:1360px;margin:0 auto;padding:clamp(90px,12vh,130px) 24px clamp(56px,8vh,90px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(48px,6vw,110px);align-items:center}
@media(min-width:600px){.hero-grid{padding-left:40px;padding-right:40px}}
@media(min-width:1024px){.hero-grid{padding-left:56px;padding-right:56px}}
.hw-brand{display:inline-block}
/* Logotype PLASTICONCRETE. Graisse 700 (et non 900) : à 900 les fûts épais
   écrasaient l'inclinaison. L'italique est un skew de 7°, angle mesuré sur le
   logo PLASTIFORM officiel (recherche du cisaillement qui redresse ses fûts).

   L'inclinaison est portée par les deux états de `.rv` et non par la règle de
   base : `.rv.in{transform:none}` est plus spécifique que `.hw-title` et
   annulait le skew dès que le titre était révélé. */
.hw-title{font-family:var(--head);font-weight:700;font-size:clamp(30px,5.2vw,76px);line-height:1;letter-spacing:-2px;text-transform:uppercase;white-space:nowrap;transform-origin:left bottom;color:var(--g);margin:0 0 6px}
.hw-title.rv{transform:translateY(24px) skewX(-5.5deg)}
.hw-title.rv.in{transform:skewX(-5.5deg)}
.hw-title span{color:#5b5f58}
.hw-tagline{font-family:var(--head);font-size:clamp(9.5px,1.02vw,14px);font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--k);margin:2px 0 10px;white-space:nowrap}
.hw-by{display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.15vw,16px);font-style:italic;color:#6d7066;margin:0 0 clamp(20px,3.4vh,30px)}
.hw-by::after{content:'';flex:0 1 auto;min-width:0;width:clamp(30px,4vw,58px);height:1px;background:linear-gradient(90deg,var(--g),transparent)}
/* Le logo ne doit jamais être comprimé : `flex` autorise la réduction par
   défaut, et la largeur suivant la hauteur, le lockup se retrouvait écrasé
   dès que la ligne devenait juste. Le filet ci-dessous cède à sa place. */
.hw-by-logo{height:clamp(56px,4.9vw,70px);width:auto;display:block;flex:0 0 auto}
.hw-sub{font-size:clamp(15px,1.6vw,19px);color:#3c3c40;line-height:1.8;max-width:520px;margin:0 0 clamp(26px,4vh,36px)}
.hw-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Bande de labels (France Relance, Fabriqué en France, EcoVadis Platinum) :
   elle occupe le vide laissé sous les boutons du héro et se cale sur la
   largeur du paragraphe au-dessus — d'où le même max-width que .hw-sub. */
.hw-labels{margin-top:clamp(22px,3vh,30px);max-width:520px}
.hw-labels img{display:block;width:100%;height:auto}
.hw-menu{display:flex;flex-direction:column;gap:clamp(10px,2.2vh,22px);justify-self:end;max-width:min(44vw,520px)}
.hw-item{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--head);font-weight:700;font-size:clamp(24px,2.7vw,40px);letter-spacing:-.5px;line-height:1.05;color:var(--k);overflow:hidden;padding:2px 0}
.hw-item svg{width:clamp(22px,2.3vw,34px);height:auto;flex-shrink:0;color:var(--gt);opacity:0;transform:translateX(-110%);transition:transform .3s ease,opacity .3s ease}
.hw-item span{transform:translateX(calc(-12px - clamp(22px,2.3vw,34px)));transition:transform .3s ease,color .3s ease}
.hw-item:hover svg{opacity:1;transform:none}
.hw-item:hover span{transform:none;color:var(--gt)}
/* Grand format : le losange sort du flux et se pose au-dessus du titre.
   Tant qu'il restait dans le flux, il poussait tout le bloc de gauche vers le
   bas et le titre tombait ~100 px sous « Expertise & Domaine » — les deux
   colonnes étant centrées, aucune réduction de sa taille ne pouvait corriger
   ça (elle décalait le bloc autant qu'elle remontait le titre). Hors flux, la
   colonne de gauche retrouve la hauteur du menu et les deux s'alignent ;
   le contenu sous le titre remonte d'autant. La hauteur est bridée en vh pour
   que le losange ne soit pas rogné sur un écran bas (.pg-hero est en
   overflow:hidden). */
@media(min-width:981px){
  .hw-brand{position:relative}
  /* Le héro est centré verticalement : la bande de labels ajoutée en bas
     pousserait le bas de la colonne ~60 px sous « Contact ». Les interlignes
     du bloc se resserrent d'autant pour qu'elle arrive à sa hauteur. */
  .hw-title{margin-bottom:4px}
  .hw-tagline{margin:0 0 6px}
  .hw-by{margin-bottom:clamp(14px,2.2vh,20px)}
  .hw-sub{line-height:1.72;margin-bottom:clamp(18px,2.6vh,26px)}
  /* Le lockup PLASTIFORM s'étend jusqu'au bord droit du paragraphe : même
     max-width que .hw-sub, le logo absorbe la place restante en se laissant
     rétrécir (flex-shrink) depuis sa largeur intrinsèque. Le filet décoratif
     lui cède le pas. */
  .hw-by{max-width:520px}
  .hw-by::after{display:none}
  .hw-by-logo{flex:1 1 auto;min-width:0;width:auto;height:auto;max-width:100%}
  /* La bande de labels se cale sur la fin de « PLASTICONCRETE » : mesurée au
     navigateur, la largeur du titre vaut 8,86 x sa taille de police moins les
     28 px repris par l'interlettrage négatif, la police suivant
     clamp(30px,5.2vw,76px). */
  .hw-labels{width:calc(clamp(265.8px,46.07vw,673.4px) - 28px);max-width:none;margin-top:clamp(34px,4.6vh,46px)}
}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  /* Hero centré sur mobile / tablette */
  .hw-main{text-align:center}
  .hw-sub{margin-left:auto;margin-right:auto;text-align-last:center}
  .hw-by{justify-content:center}
  .hw-by::after{display:none} /* le filet à droite décentrerait la signature */
  .hw-actions{justify-content:center}
  .hw-labels{margin-left:auto;margin-right:auto}
  .hw-menu{flex-direction:row;flex-wrap:wrap;gap:10px;justify-self:center;justify-content:center;max-width:none}
  .hw-item{font-size:14px;font-weight:600;letter-spacing:0;line-height:1.25;padding:10px 18px;background:rgba(255,255,255,.72);border:1px solid rgba(125,166,63,.35);border-radius:50px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .2s,color .2s,background .2s}
  .hw-item svg{display:none}
  .hw-item span{transform:none}
  .hw-item:hover,.hw-item:active{color:var(--gt);border-color:var(--gt);background:#fff}
}
/* Tablette : le hero est déjà passé en une seule colonne, mais le bloc
   d'identité gardait les tailles du desktop deux-colonnes — mesuré au
   navigateur, le titre n'occupait que 46 % de la ligne à 768 comme à 980 px
   (contre 90 % sur téléphone). La largeur libérée lui revient. La baseline
   reste insécable ici : son plafond est calé pour tenir à 601 px, la largeur
   la plus étroite de cette plage. */
@media(min-width:601px) and (max-width:980px){
  .hw-title{font-size:clamp(50px,7.4vw,68px)}
  .hw-tagline{font-size:clamp(10.5px,1.5vw,15px)}
  .hw-by-logo{height:clamp(64px,8.6vw,84px)}
}
@media(max-width:600px){
  /* 20px au lieu de 24 : les 8 px rendus à la ligne servent au titre,
     qui est insécable et bute sur la largeur utile. */
  .hero-grid{padding-top:84px;padding-bottom:48px;padding-left:20px;padding-right:20px}
  .hw-title{font-size:clamp(28px,10.1vw,50px);letter-spacing:-1.5px}.hw-tagline{font-size:12.5px;letter-spacing:.18em;white-space:normal;text-wrap:balance}
  /* logo plus présent sur téléphone, recalé optiquement sur le titre incliné */
  .hw-by-logo{height:64px}
  .hw-sub{font-size:14px}
  .hw-item{font-size:13px;padding:9px 16px}
}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0;justify-content:flex-start}
.tag{background:rgba(125,166,63,.1);color:rgba(125,166,63,.88);border:1px solid rgba(125,166,63,.22);border-radius:50px;padding:5px 14px;font-size:11px;font-weight:600;font-family:var(--head);letter-spacing:.4px}

/* EXPERTISE CARDS */
.xp-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.xp-card{flex:1 1 calc(33.333% - 11px);max-width:calc(33.333% - 11px);background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:24px 22px 26px;transition:box-shadow .32s,transform .32s,border-color .32s;position:relative;overflow:hidden}
/* 5 cartes : les deux dernières occupent la seconde rangée en entier, pas d'orpheline */
.xp-card:nth-last-child(-n+2){flex-basis:calc(50% - 8px);max-width:calc(50% - 8px)}
@media(min-width:1180px){
  .xp-card,.xp-card:nth-last-child(-n+2){flex-basis:calc(20% - 13px);max-width:calc(20% - 13px)}
}
.xp-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),#a8d55a);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.xp-card:hover{box-shadow:0 20px 60px rgba(0,0,0,.09);transform:translateY(-6px);border-color:rgba(125,166,63,.25)}
.xp-card:hover::after{transform:scaleX(1)}
.xp-icon{width:42px;height:42px;border-radius:11px;background:var(--g10);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.xp-icon svg{width:20px;height:20px;stroke:var(--g);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.xp-card h3{font-family:var(--head);font-size:15.5px;font-weight:700;color:var(--k);margin-bottom:9px;line-height:1.3}
.xp-card p{font-size:13.5px;color:var(--muted);line-height:1.65}
@media(max-width:860px){.xp-card,.xp-card:nth-last-child(-n+2){flex-basis:calc(50% - 8px);max-width:calc(50% - 8px)}.xp-card:last-child{flex-basis:100%;max-width:100%}}
@media(max-width:540px){.xp-card,.xp-card:nth-last-child(-n+2),.xp-card:last-child{flex-basis:100%;max-width:100%}}

/* STATS */
.sectors-band{margin-top:clamp(28px,4vw,48px)}
.sectors-intro{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,3vw,32px);flex-wrap:wrap}
.sectors-intro h3{font-family:var(--head);font-size:clamp(20px,2.2vw,28px);font-weight:800;color:var(--k);letter-spacing:-.5px}
.sectors-intro p{font-size:13px;color:var(--muted)}
.hint-touch{display:none}
@media(max-width:600px){.hint-desk{display:none}.hint-touch{display:inline}}
/* Deux groupes de domaines, l'un sous l'autre : les moules texturés et les
   moules lisses ne servent pas les mêmes marchés. Le sous-titre reprend le
   registre des intitulés de section (petites capitales vertes). */
.sectors-groupe + .sectors-groupe{margin-top:clamp(26px,3.4vw,44px)}
.sectors-sous{font-family:var(--head);font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--gt);margin:0 0 14px}
.sector-list{width:100%}
.sector-row{display:grid;grid-template-columns:40px 1fr auto;align-items:start;gap:0 20px;padding:clamp(14px,1.8vw,20px) 0;border-bottom:1px solid var(--border);cursor:default;transition:padding-left .3s ease}
.sector-arr{display:none;color:var(--muted);padding-top:2px;transition:transform .3s ease,color .25s}
.sector-arr svg{width:20px;height:20px;display:block}
.sector-row:first-child{border-top:1px solid var(--border)}
.sector-row:hover{padding-left:10px}
.sector-num{font-family:var(--head);font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px;padding-top:4px;transition:color .25s}
.sector-row:hover .sector-num{color:var(--gt)}
.sector-body{}
.sector-name{font-family:var(--head);font-size:clamp(17px,2vw,26px);font-weight:800;color:var(--k);line-height:1.2;transition:color .25s}
.sector-row:hover .sector-name{color:var(--gt)}
.sector-desc{font-size:13px;color:var(--muted);line-height:1.55;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .35s ease,opacity .3s ease,margin-top .3s ease}
.sector-row:hover .sector-desc,.sector-row.open .sector-desc{max-height:44px;opacity:1;margin-top:6px}
.sector-row.open .sector-num,.sector-row.open .sector-name{color:var(--gt)}
@media(max-width:600px){
  .sector-row{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sector-row:hover{padding-left:0}
  .sector-row:hover .sector-num,.sector-row:hover .sector-name{color:var(--k)}
  .sector-row:hover .sector-desc{max-height:0;opacity:0;margin-top:0}
  .sector-row.open .sector-desc{max-height:220px;opacity:1;margin-top:6px}
  .sector-row.open .sector-num,.sector-row.open .sector-name{color:var(--gt)}
  .sector-arr{display:block}
  .sector-row.open .sector-arr{transform:rotate(180deg);color:var(--gt)}
  .sector-name{font-size:clamp(15px,4.5vw,20px)}
}

/* PROCESS TIMELINE */
.process-sect{padding:40px 0 28px;background:#111;position:relative;overflow:hidden}
.process-sect::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.process-sect .label{color:var(--gt)}
.process-sect .sect-hd h2{color:#fff}
.process-sect .sect-hd p{color:rgba(255,255,255,.75)}
.tl{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
@media(max-width:960px){.tl{grid-template-columns:repeat(3,1fr);row-gap:40px}}
.tl-rail{position:absolute;top:31px;left:calc(8.333% + 20px);right:calc(8.333% + 20px);height:1px;background:rgba(255,255,255,.08);z-index:0;transform:scaleX(0);transform-origin:left center;transition:transform 2.2s cubic-bezier(.4,0,.2,1)}
.tl.in .tl-rail{transform:scaleX(1)}
@media(max-width:960px){.tl-rail{display:none}}
.tl-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px;position:relative;z-index:1}
.tl-dot{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:11px;font-weight:700;color:rgba(255,255,255,.28);margin-bottom:20px;transform:scale(.6);opacity:0;transition:background .5s,border-color .5s,color .5s,box-shadow .5s,transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
.tl-step.in .tl-dot{background:var(--gt);border-color:var(--gt);color:#fff;box-shadow:0 0 32px rgba(125,166,63,.35);transform:scale(1);opacity:1}
.tl-step h4{font-family:var(--head);font-size:13px;font-weight:700;color:rgba(255,255,255,.82);margin-bottom:8px;line-height:1.35}
.tl-step p{font-size:12px;color:rgba(255,255,255,.62);line-height:1.65}

/* RÉALISATIONS */
.real-sect{padding:clamp(56px,7vw,80px) 0;background:#fff}
@media(max-width:599px){.real-sect{padding:34px 0 40px}.real-sect .sect-hd p{font-size:13px}}

/* Galerie de réalisations : grille simple, révélée au scroll */
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);max-width:var(--max);margin:0 auto;padding:0 24px}
/* Tuiles carrées : les photos studio sont en portrait 4/5, un cadre 4/3 amputait la pièce */
.real-tile{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 8px 24px rgba(17,26,12,.14)}
.real-tile img{width:100%;height:100%;object-fit:cover;display:block}
.real-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.real-cap h4{font-family:var(--head);font-size:15px;font-weight:700;color:#fff;margin-bottom:3px;line-height:1.25}
.real-cap p{font-size:12px;color:rgba(255,255,255,.72);line-height:1.4}
/* Deux colonnes dès 900 px : depuis que les légendes comptent trois lignes,
   trois colonnes rendent les tuiles si étroites que la légende recouvre les
   trois quarts de la photo. */
@media(max-width:900px){
  .real-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:0 20px}
  .real-cap{padding:20px 12px 11px}
  .real-cap h4{font-size:13px}
  .real-cap p{font-size:11px}
}
/* Une seule colonne dès 620 px : en deux colonnes plus étroites, chaque ligne
   de légende se replie et le bandeau finit par couvrir la moitié de la photo. */
@media(max-width:620px){
  .real-grid{grid-template-columns:1fr;gap:14px}
  .real-tile{aspect-ratio:4/5}
  .real-cap h4{font-size:15px}
  .real-cap p{font-size:12px}
}

/* SECTIONS */
.pg-sect{padding:clamp(56px,7vw,80px) 0}
.pg-sect-alt{padding:clamp(56px,7vw,80px) 0;background:var(--bg)}

/* Section header centré réutilisable */
.sect-hd{text-align:center;margin-bottom:clamp(32px,4vw,44px)}
.sect-hd .label{display:flex;justify-content:center}
.sect-hd h2{font-family:var(--head);font-size:clamp(32px,4.5vw,56px);font-weight:800;letter-spacing:-1.2px;color:var(--k);margin-bottom:14px;line-height:1.12}
/* Le titre « 5 Bonnes Raisons » met les deux marques en oblique. La police
   d'affichage n'a pas d'italique dessine : on incline, sans alleger. */
.sect-hd p{font-size:18px;color:var(--muted);line-height:1.85;max-width:660px;margin:0 auto}
/* Les chapeaux de section peuvent compter plusieurs paragraphes : sans cette
   regle ils se collent, `margin:0 auto` neutralisant l'espacement vertical. */
.sect-hd p + p{margin-top:14px}
.abs-card p + p,.surm-block p + p{margin-top:12px}

/* Bloc expertise centré (utilisé seulement dans #expertise) */
.pg-main h2{font-family:var(--head);font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.8px;color:var(--k);margin-bottom:16px;line-height:1.15}
.pg-main h3{font-family:var(--head);font-size:17px;font-weight:700;color:var(--k);margin:40px 0 14px;padding-top:14px;border-top:1px solid var(--border)}
.pg-main p{font-size:16px;color:var(--muted);line-height:1.9;margin-bottom:18px}
.pg-main ul{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.pg-main li{display:flex;gap:12px;font-size:15px;color:var(--muted);line-height:1.7}
.pg-main li::before{content:'→';color:var(--gt);font-weight:700;flex-shrink:0}

/* Layout moules pleine largeur */
.mold-content{max-width:980px;margin:0 auto}
.mold-intro{font-size:16px;color:var(--muted);line-height:1.9;margin-bottom:28px;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.mold-content .tags{justify-content:center;margin-top:20px}

/* Barre contact horizontale */
.sect-strip{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--border);border-radius:var(--rlg);padding:22px 32px;margin-top:36px;flex-wrap:wrap;justify-content:space-between}
.pg-sect-alt .sect-strip{background:var(--w)}
.ss-txt strong{font-family:var(--head);font-size:15px;font-weight:700;color:var(--k);display:block;line-height:1.3}
.ss-txt span{font-size:13px;color:var(--muted)}
.ss-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:760px){
  .sect-strip{flex-direction:column;align-items:stretch;text-align:center;padding:20px;gap:16px}
  .ss-actions{flex-direction:column}
  .ss-actions .btn{width:100%;justify-content:center}
}

/* CITATION TYPOGRAPHIQUE */
.expert-quote{position:relative;margin:28px 0;padding:32px 0;text-align:center}
.expert-quote::before,.expert-quote::after{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent,var(--g) 50%,transparent);max-width:180px;margin:0 auto}
.expert-quote::before{margin-bottom:40px}
.expert-quote::after{margin-top:40px}
.eq-mark{font-family:var(--head);font-size:80px;font-weight:800;color:var(--gt);line-height:.55;opacity:.28;margin-bottom:22px;display:block}
.expert-quote p{font-family:var(--head);font-size:clamp(16px,2vw,19px);font-weight:400;font-style:italic;color:var(--k);line-height:1.85;max-width:700px;margin:0 auto}

/* ENCART PROCESS */
.process-bar{display:flex;align-items:center;gap:20px;padding:24px 0;border-top:2px solid var(--g);border-bottom:1px solid var(--border);margin:32px 0}
.pb-icon{width:44px;height:44px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pb-icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pb-text strong{font-family:var(--head);font-size:14px;font-weight:700;color:var(--k);display:block;margin-bottom:3px}
.pb-text span{font-size:13px;color:var(--muted);line-height:1.6}


/* MOLD CARDS — 3 desktop, 2 tablette, scroll horizontal mobile */
.mold-grid{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 8px;justify-content:center}
.mold-card{flex:0 0 calc(33.333% - 14px);max-width:calc(33.333% - 14px);border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:#fff;transition:box-shadow .25s,transform .25s,border-color .25s}
.mold-card:hover{box-shadow:0 16px 48px rgba(0,0,0,.1);transform:translateY(-4px);border-color:rgba(125,166,63,.35)}
@media(max-width:820px){.mold-card{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px)}}
@media(max-width:599px){
  .mold-grid{flex-wrap:wrap;overflow-x:visible;gap:12px;justify-content:center;margin-left:0;padding-left:0;padding-right:0;padding-bottom:0}
  .mold-card{flex:0 0 calc(50% - 6px);max-width:calc(50% - 6px)}
}
.mold-img{aspect-ratio:4/5;background:#ebebeb;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mold-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mold-ph{display:flex;flex-direction:column;align-items:center;gap:12px;color:#c0c0c0}
.mold-ph svg{width:38px;height:38px}
.mold-ph span{font-family:var(--head);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;opacity:.7}
.mold-cap{padding:16px 18px}
.mold-cap h4{font-family:var(--head);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--k);margin-bottom:5px}
.mold-cap p{font-size:12px;color:var(--muted);line-height:1.5;margin:0}

/* Grille moules : 4 cartes alignées */
.mold-grid-4 .mold-card{flex:0 0 calc(25% - 15px);max-width:calc(25% - 15px)}
@media(max-width:980px){.mold-grid-4 .mold-card{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px)}}
@media(max-width:480px){.mold-grid-4 .mold-card{flex:0 0 100%;max-width:100%}}

/* Format table */
.fmt-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.fmt-table th{background:var(--k);color:#fff;font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;text-align:left}
.fmt-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--muted)}
.fmt-table tr:last-child td{border-bottom:none}
.fmt-table tr:hover td{background:var(--bg)}
@media(max-width:599px){.fmt-table{font-size:12px}.fmt-table th,.fmt-table td{padding:9px 12px}}

/* ABS cards */
.abs-grid{display:flex;flex-wrap:wrap;gap:20px;margin:28px 0;justify-content:center}
.abs-card{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px);border-radius:var(--rlg);padding:32px 28px;border:2px solid var(--border);transition:border-color .25s}
@media(max-width:640px){.abs-card{flex:0 0 100%;max-width:100%}}
.abs-card:hover{border-color:var(--gt)}
.abs-card.noir{background:#141414}
.abs-card.blanc{background:#f9f9f9}
.abs-swatch{width:48px;height:48px;border-radius:12px;margin-bottom:18px}
.abs-card.noir .abs-swatch{background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border:2px solid #3a3a3a}
.abs-card.blanc .abs-swatch{background:linear-gradient(135deg,#fff,#e8e8e8);border:2px solid #ddd}
/* L'ABS noble existe dans les deux coloris : la carte porte donc les deux
   pastilles, dans l'ordre du titre — noir puis blanc. */
.abs-swatches{display:flex;gap:10px;margin-bottom:18px}
.abs-swatches .abs-swatch{margin-bottom:0}
.abs-card.blanc .abs-swatch.sw-noir{background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border-color:#3a3a3a}
.abs-card h4{font-family:var(--head);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.abs-card.noir h4{color:rgba(255,255,255,.9)}
.abs-card.blanc h4{color:var(--k)}
.abs-card.noir p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.52);margin:0}
.abs-card.blanc p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}

/* FINITIONS BLOCK */
.finitions-block{margin-top:28px;padding:24px 28px;background:var(--g10);border-radius:var(--r);border-left:4px solid var(--g)}
.finitions-block h3{font-family:var(--head);font-size:16px;font-weight:700;color:var(--k);margin-bottom:10px;border:none;padding:0}
.finitions-block p{font-size:15px;color:var(--muted);line-height:1.75;margin:0}

/* SUR MESURE BLOCK */
/* La section « sur mesure » resserre le rythme vertical de .pg-sect : le
   bandeau gris de #formats, juste au-dessus, apporte déjà de l'air. Les deux
   valeurs sont volontairement identiques — la carte noire doit être centrée
   dans sa bande blanche (elle était collée en haut : 24 px contre 80 px). */
#sur-mesure{padding:clamp(36px,4.5vw,52px) 0}
.surm-block{display:flex;flex-direction:column;align-items:center;gap:32px;background:var(--k);border-radius:var(--rlg);padding:44px 48px}
.surm-inner{display:flex;align-items:flex-start;gap:28px;width:100%}
.surm-icon{width:56px;height:56px;background:rgba(125,166,63,.18);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.surm-icon svg{width:26px;height:26px;stroke:var(--g)}
.surm-block h2{font-family:var(--head);font-size:clamp(20px,2.5vw,30px);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:14px}
.surm-block p{font-size:16px;color:rgba(255,255,255,.6);line-height:1.75;margin:0}
@media(max-width:640px){.surm-inner{flex-direction:column;gap:18px}.surm-block{padding:28px 24px}}

/* DÉVELOPPEMENT DURABLE — fond unifié sur toute la section */
#eco{position:relative;background-image:url('../img/bg-eco.jpg');background-size:cover;background-position:center;padding:clamp(56px,8vw,96px) 0 clamp(44px,6vw,68px);overflow:hidden}
@media(max-width:820px){#eco{background-image:url('../img/bg-eco-mobile.jpg');background-position:center top}}
.eco-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.58) 32%,rgba(255,255,255,.20) 58%,rgba(255,255,255,.06) 80%,transparent 100%)}
.eco-head-grid{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,60px);margin-bottom:clamp(12px,1.4vw,18px)}
.eco-head-left{max-width:580px;flex:1}
.eco-head-right{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:clamp(228px,25vw,320px)}
.eco-ev-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(240px,28vw,320px);height:clamp(240px,28vw,320px)}
.eco-ev-stamp{position:relative;z-index:1;width:clamp(218px,25vw,300px);height:clamp(218px,25vw,300px);object-fit:contain;filter:drop-shadow(0 8px 32px rgba(125,166,63,.28));opacity:0;transform:scale(.7) rotate(-8deg)}
.eco-ev-stamp.stamped{animation:eco-stamp-in .65s .25s cubic-bezier(.16,1,.3,1) forwards}
@keyframes eco-stamp-in{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
.eco-badge{display:inline-flex;align-items:flex-start;gap:9px;background:rgba(201,146,15,.10);border:1px solid rgba(201,146,15,.32);border-radius:10px;padding:10px 16px;font-family:var(--head);font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.2px;margin:10px 0 22px;line-height:1.55}
.eco-badge svg{width:15px;height:15px;fill:var(--gold);flex-shrink:0;margin-top:2px}
.eco-h2{font-family:var(--head);font-size:clamp(27px,3.9vw,48px);font-weight:800;letter-spacing:-1.4px;color:var(--k);margin:0 0 20px;line-height:1.1}
.eco-h2 strong{color:var(--gt);font-weight:800}
/* Marque bicolore, comme le logo : PLASTI en vert, CONCRETE en gris.
   Même inclinaison que le logotype du héro — skew de 5,5°, angle relevé sur le
   logo PLASTIFORM officiel. Le `inline-block` est indispensable : une balise
   en ligne ignore `transform`. La graisse descend à 700 comme dans le héro :
   à 900, les fûts épais écrasent l'inclinaison et le mot ne se lit plus
   comme un logotype. */
.brand-pc{color:var(--g);display:inline-block;font-weight:700;transform:skewX(-5.5deg);transform-origin:left bottom}
.brand-pc span{color:#5b5f58}
.eco-intro-p .nohyp{hyphens:none;-webkit-hyphens:none}
.eco-intro-p{font-size:clamp(14.5px,1.1vw,16px);color:#3d3d42;line-height:1.8;margin:0 0 clamp(40px,5vw,64px);max-width:min(100%,740px);text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
/* Cartes flottant sur le fond */
.eco-cards{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,14px);margin-bottom:clamp(16px,2vw,20px)}
.eco-card{position:relative;overflow:hidden;background:rgba(255,255,255,.90);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.65);border-radius:var(--r);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:12px;transition:border-color .22s,transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s}
.eco-card:hover{border-color:var(--gt);transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.13)}
.eco-card-num{position:absolute;top:clamp(18px,2.4vw,26px);left:clamp(18px,2.4vw,26px);font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--gt)}
.eco-card-ico{width:50px;height:50px;background:var(--g10);border-radius:50%;border:1.5px solid rgba(125,166,63,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 4px}
.eco-card-ico svg{width:24px;height:24px;stroke:var(--g);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eco-card-title{font-family:var(--head);font-size:clamp(13px,1.15vw,15px);font-weight:700;color:var(--k);margin:0;line-height:1.3}
.eco-card-body{font-size:clamp(12px,.95vw,13.5px);color:var(--muted);line-height:1.7;margin:0;flex:1}
.eco-card-ico--txt{font-size:22px;line-height:1;color:var(--gt)}
.eco-card-deco--txt{font-size:18px;line-height:1;color:var(--gt)}
.eco-card-deco{position:absolute;bottom:6px;right:6px;width:32px;height:32px;opacity:.12;pointer-events:none;display:flex;align-items:center;justify-content:center}
.eco-card-deco svg{width:100%;height:100%;stroke:var(--g);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Stats — dashboard exécutif, icônes flottantes fine-line, valeurs charcoal */
.eco-stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r);overflow:hidden;border:1px solid rgba(0,0,0,.06);box-shadow:0 4px 32px rgba(0,0,0,.07)}
.eco-stat{padding:clamp(24px,3.2vw,40px) clamp(14px,1.8vw,24px);text-align:center;border-right:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;gap:12px}
.eco-stat:last-child{border-right:none}
.eco-stat-ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.eco-stat-ico svg{width:28px;height:28px;stroke:var(--g);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.eco-stat-val{font-family:var(--head);font-size:clamp(18px,2.3vw,30px);font-weight:900;color:var(--gt);line-height:1;letter-spacing:-.5px}
.eco-stat-lbl{font-size:clamp(10px,.85vw,12px);color:#6e6e73;line-height:1.5;max-width:120px}
/* Grand écran : le tampon EcoVadis gagne 70 px, mais uniquement vers le haut
   et vers la gauche — les marges négatives de même valeur laissent sa boîte de
   placement inchangée, donc son coin bas-droit ne bouge pas d'un pixel et la
   rangée garde sa hauteur (c'est elle qui commande la position du titre et du
   paragraphe). Réservé à 1200 px et plus : en dessous, le débord de gauche
   viendrait mordre sur le titre. */
@media(min-width:1200px){
  .eco-ev-stamp{flex-shrink:0;max-width:none;width:370px;height:370px;margin-top:-70px;margin-left:-70px}
}
@media(max-width:820px){.eco-head-grid{flex-direction:column;gap:0;margin-bottom:14px}.eco-h2{margin-bottom:2px}.eco-head-right{justify-content:center;min-width:0}.eco-ev-stamp{width:clamp(175px,42vw,235px);height:clamp(175px,42vw,235px)}.eco-intro-p{font-size:15.5px;max-width:100%;margin-bottom:clamp(32px,6vw,44px)}.eco-overlay{background:rgba(255,255,255,.72)}}
@media(max-width:700px){.eco-cards{grid-template-columns:repeat(2,1fr)}.eco-stats{grid-template-columns:repeat(2,1fr)}.eco-stat{border-right:none;border-bottom:1px solid rgba(0,0,0,.07)}.eco-stat:nth-child(odd){border-right:1px solid rgba(0,0,0,.07)}.eco-stat:nth-last-child(-n+2){border-bottom:none}}
@media(max-width:440px){.eco-cards{grid-template-columns:1fr}.eco-stats{grid-template-columns:repeat(2,1fr)}}


/* TICKER BANNER */

/* CTA section */
.cta-sect{background:linear-gradient(135deg,#3e5b18,var(--g) 55%,#5a8428);padding:clamp(56px,7vw,72px) 0;text-align:center;position:relative;overflow:hidden}
.cta-sect::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);background-size:24px 24px}
.cta-sect .wrap{position:relative;z-index:1}
.cta-sect h2{font-family:var(--head);font-size:clamp(28px,4.5vw,48px);font-weight:800;color:#fff;letter-spacing:-1.5px;margin-bottom:14px}
.cta-sect p{font-size:17px;color:rgba(255,255,255,.72);margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:700px){.contact-grid{grid-template-columns:1fr 1.4fr}}
.ci-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:12px;display:flex;align-items:flex-start;gap:14px;transition:border-color .2s}
.ci-card:hover{border-color:var(--gt)}
.ci-ico{width:38px;height:38px;background:var(--g10);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-ico svg{width:18px;height:18px;stroke:var(--g);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ci-label{font-family:var(--head);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ci-val{font-size:14px;font-weight:500;color:var(--k);line-height:1.5}
.cf-wrap{background:var(--bg);border-radius:var(--rlg);padding:36px 28px;border:1px solid var(--border)}
.cf-title{font-family:var(--head);font-size:18px;font-weight:700;color:var(--k);margin-bottom:22px}
.cf-field{margin-bottom:14px}
.cf-field label{display:block;font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--k);margin-bottom:6px}
.cf-field input,.cf-field select,.cf-field textarea{width:100%;padding:12px 16px;background:#fff;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:14px;color:var(--k);outline:none;font-family:inherit;transition:border-color .2s;-webkit-appearance:none}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--gt)}
.cf-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:400px){.cf-2col{grid-template-columns:1fr}}
.cf-submit{width:100%;padding:16px;font-family:var(--head);font-size:15px;font-weight:700;background:var(--gt);color:#fff;border-radius:50px;cursor:pointer;transition:all .22s;border:none;box-shadow:0 2px 16px rgba(125,166,63,.3);margin-top:6px}
.cf-submit:hover{background:var(--gt-d);box-shadow:0 8px 28px rgba(125,166,63,.4);transform:translateY(-1px)}

/* Footer — portage fidèle du gabarit « Footer7 » (shadcnblocks) en CSS natif.
   Les valeurs reprennent l'échelle Tailwind du composant d'origine :
   py-32 = 128px · gap-10 = 40px · gap-6 = 24px · gap-20 = 80px ·
   space-y-3 = 12px · text-sm = 14px · text-xs = 12px · text-xl = 20px.
   « muted-foreground » et « primary » sont transposés sur le fond sombre
   du site : blanc à 55 % pour le texte secondaire, vert Plastiform au survol. */
footer{
  --ft-mut:rgba(255,255,255,.55);
  --ft-line:rgba(255,255,255,.12);
  background:var(--k);color:var(--ft-mut);
  padding:clamp(48px,6vw,84px) 0 0;
}
.ft-top{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
@media(min-width:1024px){.ft-top{flex-direction:row;align-items:flex-start}}
.ft-brand{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
/* Signature de marque : reprise du lockup du héro (.hw-title / .hw-by) —
   même graisse 700, même cisaillement de 5,5°, même interlettrage négatif,
   même filet dégradé après la mention « by ». Deux adaptations imposées par le
   fond noir : le gris #5b5f58 de « CONCRETE » y disparaîtrait, et
   logo-plastiform-complet.png porte « SOLUTIONS THERMOFORMEES » en noir — on
   passe donc sur le mot-symbole vert seul (logo-plastiform.png). */
.ft-brandmark{display:inline-block;max-width:100%}
.ft-title{font-family:var(--head);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-2px;text-transform:uppercase;white-space:nowrap;color:var(--g);margin:0 0 6px;transform:skewX(-5.5deg);transform-origin:left bottom}
.ft-title span{color:#c3c9ba}
.ft-by{display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.15vw,16px);font-style:italic;color:rgba(255,255,255,.5);margin:0}
.ft-by::after{content:'';flex:0 1 auto;min-width:0;width:clamp(30px,4vw,58px);height:1px;background:linear-gradient(90deg,var(--g),transparent)}
/* Comme dans le héro : le logo ne se comprime pas, c'est le filet qui cède.
   On utilise ici logo-plastiform-complet-blanc.png, variante fond sombre du
   logo officiel : seule la ligne « SOLUTIONS THERMOFORMEES », noire dans
   l'original et donc invisible sur le noir du footer, y est repeinte en blanc
   (le vert et le « Pf » du losange sont inchangés). La hauteur est calée pour
   que cette ligne reste lisible — en dessous de ~46 px elle passe sous 7 px. */
.ft-by-logo{height:clamp(46px,4.2vw,60px);width:auto;display:block;flex:0 0 auto}
/* max-w-[70%] du composant : au-delà, la ligne devient trop longue à lire sur
   fond sombre. La contrainte saute une fois la colonne empilée. */
.ft-desc{max-width:70%;font-size:14px;line-height:1.7}
@media(max-width:1023px){.ft-desc{max-width:100%}}
.ft-soc{display:flex;align-items:center;gap:24px}
.ft-soc a{display:flex;color:var(--ft-mut);transition:color .2s}
.ft-soc a:hover{color:var(--g)}
.ft-cols{flex:1;min-width:0;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.ft-cols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.ft-cols{gap:48px}}
.ft-ch{font-family:var(--head);font-size:16px;font-weight:700;color:#fff;margin-bottom:16px}
.ft-links{font-size:14px}
.ft-links li+li{margin-top:12px}
.ft-links a{font-weight:500;color:var(--ft-mut);transition:color .2s}
.ft-links a:hover{color:var(--g)}
.ft-bot{margin-top:24px;padding:24px 0;border-top:1px solid var(--ft-line);display:flex;flex-direction:column;gap:16px;font-size:12px;font-weight:500}
@media(min-width:768px){.ft-bot{flex-direction:row;align-items:center;justify-content:space-between}}
.ft-copy{order:2}
@media(min-width:1024px){.ft-copy{order:1}}
.ft-copy a{transition:color .2s}
.ft-copy a:hover{color:var(--g)}
.ft-legal{order:1;display:flex;flex-direction:column;gap:8px}
@media(min-width:768px){.ft-legal{order:2;flex-direction:row;gap:16px}}
.ft-legal a{transition:color .2s}
.ft-legal a:hover{color:var(--g)}

/* COLLECTION MOULES PREMIUM */
/* Les deux bannières partagent un gabarit de hauteur, faute de quoi chacune se
   cale sur son propre contenu : la lisse en porte davantage — cinq puces contre
   trois — et dépassait la texturée de 100 px. Le format retenu est celui de la
   texturée ; c'est la lisse qui a été resserrée pour y tenir. Toutes les valeurs
   ci-dessous sont relevées au navigateur, de 500 à 1920 px. */
.coll-hero{border-radius:var(--rlg);overflow:hidden;position:relative;min-height:clamp(305px,calc(304px + (100vw - 600px) * .215),375px);display:flex;align-items:center;margin-bottom:40px;transition:transform .5s cubic-bezier(.22,1,.36,1);cursor:default}
.coll-hero:hover{transform:translateY(-3px)}
.coll-bg{position:absolute;inset:0}
.coll-tex-base{background:#1a1917}
.coll-tex-grain{position:absolute;inset:0;opacity:.6;background-image:repeating-linear-gradient(17deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 3px),repeating-linear-gradient(107deg,transparent,transparent 8px,rgba(255,255,255,.010) 8px,rgba(255,255,255,.010) 9px),radial-gradient(ellipse 80% 60% at 30% 40%,rgba(125,166,63,.08) 0%,transparent 60%)}
.coll-lis-base{background:#1c1e24}
.coll-lis-grid{position:absolute;inset:0;opacity:.7;background-image:repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.018) 39px,rgba(255,255,255,.018) 40px),repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.018) 39px,rgba(255,255,255,.018) 40px)}
.coll-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.15) 100%)}
.coll-content{position:relative;z-index:2;width:100%;padding:clamp(22px,3.2vw,38px) clamp(28px,5vw,56px)}
.coll-eyebrow{display:inline-flex;align-items:center;font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#fff;margin-bottom:clamp(14px,2.5vw,22px);padding:5px 14px;background:var(--g);border-radius:4px}
.coll-hero h3{font-family:var(--head);font-size:clamp(22px,3.5vw,44px);font-weight:800;color:#fff;letter-spacing:-.8px;line-height:1.1;margin-bottom:clamp(14px,2.5vw,26px)}
/* une puce par ligne : les deux collections gardent la même silhouette,
   quelle que soit la longueur des libellés */
.coll-benefits{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(18px,3vw,32px)}
/* Au-delà de trois puces, le rythme se resserre : c'est ce qui permet à la
   bannière lisse, qui en porte cinq, de tenir dans le même format que la
   texturée qui en porte trois. */
.coll-benefits:has(> :nth-child(4)){gap:clamp(6px,.9vw,9px);margin-bottom:clamp(12px,2vw,20px)}
.coll-b{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6)}
.coll-b-dot{width:5px;height:5px;border-radius:50%;background:var(--g);flex-shrink:0}
.coll-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s}
.coll-link:hover{color:#fff}
.coll-link svg{width:14px;height:14px;transition:transform .25s}
.coll-link:hover svg{transform:translateX(4px)}
@media(min-width:900px){
  .coll-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;min-height:0;background:#101010}
  .coll-bg{grid-area:1/2;position:relative;inset:auto;min-height:max(408px,calc(428px - (100vw - 900px) * .07))}
  /* Fondu long et progressif entre la colonne de texte et la photo.
     Trois précautions : le départ reste opaque (sinon une arête apparaît à la
     jonction), l'arrivée garde la même couleur en alpha 0 (et non `transparent`,
     qui vaut noir transparent et décale la teinte en cours de route), et les
     paliers intermédiaires suivent une courbe douce pour éviter le banding. */
  .coll-overlay{grid-area:1/2;position:relative;inset:auto;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(16,16,16,1) 0%,rgba(16,16,16,.94) 8%,rgba(16,16,16,.80) 17%,rgba(16,16,16,.58) 26%,rgba(16,16,16,.36) 35%,rgba(16,16,16,.18) 45%,rgba(16,16,16,.06) 54%,rgba(16,16,16,0) 63%)}
  .coll-content{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:36px 52px}
  .coll-eyebrow{margin-bottom:18px}
  .coll-hero h3{font-size:30px;line-height:1.18;margin-bottom:22px;max-width:600px}
  .coll-benefits{flex-direction:column;gap:12px;margin-bottom:28px}
  .coll-benefits:has(> :nth-child(4)){gap:7px;margin-bottom:18px}
  .coll-b{font-size:12.5px;color:rgba(255,255,255,.68)}
}

@media(min-width:1200px){
  .coll-bg{min-height:372px}
}

/* Material selector panel */
.mat-panel{display:flex;align-items:center;gap:clamp(10px,2vw,20px);flex-wrap:wrap;padding:clamp(14px,2vw,20px) clamp(16px,3vw,26px);background:#fff;border:1px solid var(--border);border-radius:var(--rlg);margin-bottom:32px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.mat-panel-label{font-family:var(--head);font-size:9px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:rgba(0,0,0,.3);white-space:nowrap;padding-right:clamp(10px,2vw,20px);border-right:1px solid var(--border);flex-shrink:0}
.mat-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.mat-chip{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border:1.5px solid var(--border);border-radius:50px;font-family:var(--head);font-size:11px;font-weight:600;color:var(--muted);background:#fff;cursor:default;transition:border-color .2s,background .2s,color .2s;white-space:nowrap}
.mat-chip:hover,.mat-chip.active{border-color:var(--gt);background:var(--g10);color:var(--gt)}
.mat-swatch{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:1.5px solid rgba(0,0,0,.08)}
@media(max-width:599px){.mat-panel{flex-direction:column;align-items:flex-start}.mat-panel-label{padding-right:0;border-right:none;border-bottom:1px solid var(--border);padding-bottom:10px;width:100%}}

/* Data sheet industriel luxe */

/* Sélecteur de textures/finitions visuel */
.tex-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.tex-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 14px;border:1.5px solid var(--border);border-radius:14px;background:#fff;cursor:default;transition:border-color .22s,background .22s;flex:1 1 calc(20% - 8px);min-width:100px;text-align:center}
.tex-tile:hover,.tex-tile.active{border-color:var(--gt);background:var(--g10)}
.tex-tile-sw{width:48px;height:48px;border-radius:12px;border:1.5px solid rgba(0,0,0,.09);flex-shrink:0}
.tex-tile-nm{font-family:var(--head);font-size:10px;font-weight:600;color:var(--muted);line-height:1.35}
.tex-tile.active .tex-tile-nm{color:var(--gt)}
@media(max-width:760px){.tex-tile{flex:1 1 calc(33.333% - 7px);min-width:80px}}
@media(max-width:480px){.tex-tile{flex:1 1 calc(50% - 5px)}}
.tex-grid-duo{justify-content:center}
.tex-grid-duo .tex-tile{flex:0 1 200px}
.tex-tile-static{cursor:default!important}
.tex-tile-static:hover{border-color:var(--border);background:#fff}

/* En-tête de tableau industriel */

/* Bloc technique 3 colonnes */
.tech-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:0 0 40px}
.tech-feat{padding:clamp(22px,3.5vw,36px) clamp(20px,3vw,32px);border-right:1px solid var(--border);background:#fff;display:flex;flex-direction:column;gap:10px}
.tech-feat:last-child{border-right:none}
.tf-num{font-family:var(--head);font-size:clamp(36px,4.5vw,56px);font-weight:900;color:var(--gt);line-height:1;letter-spacing:-2px;margin-bottom:4px}
.tf-title{font-family:var(--head);font-size:clamp(14px,1.4vw,17px);font-weight:700;color:var(--k);line-height:1.3;margin:0}
.tf-body{font-size:clamp(13px,1.1vw,15px);color:var(--muted);line-height:1.7;margin:0}
@media(max-width:640px){.tech-feats{grid-template-columns:1fr}.tech-feat{border-right:none;border-bottom:1px solid var(--border);padding:24px 22px}.tech-feat:last-child{border-bottom:none}}

/* Zoom texture au clic — popover premium */
.tex-tile{cursor:zoom-in}
.tex-pop-back{position:fixed;inset:0;z-index:9996;opacity:0;pointer-events:none;transition:opacity .25s}
.tex-pop-back.open{opacity:1;pointer-events:all}
.tex-pop{position:fixed;z-index:9997;width:clamp(220px,28vw,280px);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 20px 70px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06);opacity:0;pointer-events:none;transition:opacity .24s,transform .32s cubic-bezier(.22,1,.36,1)}
.tex-pop.from-top{transform:scale(.88) translateY(10px);transform-origin:top center}
.tex-pop.from-bot{transform:scale(.88) translateY(-10px);transform-origin:bottom center}
.tex-pop.open{opacity:1;transform:scale(1) translateY(0)!important;pointer-events:all}
.tex-pop-img{width:100%;aspect-ratio:1;background-size:cover;background-position:center}
.tex-pop-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid rgba(0,0,0,.07)}
.tex-pop-nm{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--k)}
.tex-pop-x{width:26px;height:26px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;transition:background .18s,color .18s;flex-shrink:0;font-family:sans-serif}
.tex-pop-x:hover{background:var(--k);color:#fff}
@media(max-width:640px){
  .tex-pop-back.open{background:rgba(0,0,0,.45)}
  .tex-pop{position:fixed!important;top:50%!important;left:50%!important;width:min(290px,84vw)!important;transform:translate(-50%,-50%) scale(.88)!important;transform-origin:center!important}
  .tex-pop.open{transform:translate(-50%,-50%) scale(1)!important}
}

/* ─ RESPONSIVE GLOBAL ─ */
@media(max-width:767px){
  .pg-sect,.pg-sect-alt{padding:48px 0}
  .process-sect{padding:28px 0 0}.real-sect{padding:48px 0}
  .sect-hd{margin-bottom:28px}
  .sect-hd p{font-size:16px}
  .sect-hd h2{letter-spacing:-.8px}
  .cta-sect{padding:48px 0}
}
@media(max-width:540px){
  .tl-step p{font-size:11px;color:rgba(255,255,255,.62)}
  .process-sect .sect-hd h2{font-size:clamp(26px,6vw,36px)}
  .xp-card{padding:22px 18px 24px}
  .tl-rail{display:none}
}

.tl-hint{display:none}

/* Sous 700px : la frise horizontale devient une frise verticale compacte —
   la séquence des 6 étapes reste lisible d'un seul coup d'œil */
@media(max-width:700px){
  .process-sect{padding-bottom:26px}
  .tl{display:block;position:relative;padding-left:2px}
  .tl-rail{display:block;top:38px;bottom:22px;left:17px;right:auto;width:1px;height:auto;transform:scaleY(0);transform-origin:top center;transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
  .tl.in .tl-rail{transform:scaleY(1)}
  .tl-step{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start;text-align:left;padding:0 0 20px}
  .tl-step:last-child{padding-bottom:0}
  .tl-dot{grid-column:1;grid-row:1/span 2;width:34px;height:34px;font-size:9.5px;margin:0;align-self:start}
  .tl-step h4{grid-column:2;grid-row:1;font-size:14px;margin-bottom:3px;padding-top:8px}
  .tl-step p{grid-column:2;grid-row:2;font-size:12.5px;line-height:1.55}
}
/* MODAL DEVIS */
.modal-overlay{position:fixed;inset:0;z-index:9990;background:rgba(6,6,6,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s,visibility .28s}
.modal-overlay.open{opacity:1;visibility:visible;pointer-events:all}
.modal-box{background:#fff;border-radius:var(--rlg);width:100%;max-width:520px;max-height:90dvh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.06);transform:translateY(28px) scale(.97);opacity:0;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .28s}
.modal-overlay.open .modal-box{transform:none;opacity:1}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 0}
.modal-hd .cf-title{margin:0;font-size:19px}
.modal-x{width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;transition:background .18s,color .18s;flex-shrink:0;font-family:sans-serif;line-height:1}
.modal-x:hover{background:var(--k);color:#fff}
.modal-body{padding:20px 28px 28px}
@media(max-width:540px){.modal-hd{padding:20px 20px 0}.modal-body{padding:16px 20px 24px}.modal-box{border-radius:18px}}

/* TOAST */
.pf-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);background:var(--g);color:#fff;font-family:var(--head);font-size:14px;font-weight:600;padding:14px 26px;border-radius:50px;box-shadow:0 12px 40px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:10000;max-width:calc(100vw - 32px);text-align:center}
.pf-toast.show{opacity:1;transform:translate(-50%,0)}
.pf-toast.err{background:#9B2020}

/* VALIDATION FORMULAIRE */
.cf-invalid{border-color:#c0392b!important;background:rgba(192,57,43,.05)!important}

/* PAGES LÉGALES */
.legal-page{max-width:760px;margin:0 auto;padding:120px 24px 80px}
.legal-page h1{font-family:var(--head);font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:8px}
.legal-page h2{font-family:var(--head);font-size:20px;font-weight:700;margin:36px 0 10px}
.legal-page p,.legal-page li{color:var(--muted);font-size:15px;line-height:1.8;margin-bottom:10px}
.legal-page ul{padding-left:20px;list-style:disc}
.legal-updated{font-size:13px;color:var(--muted);margin-bottom:32px}
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-family:var(--head);font-size:13px;font-weight:600;color:var(--gt)}
.legal-back:hover{color:var(--gd)}

/* ===== AMÉLIORATIONS UX ===== */

/* Skip link (navigation clavier) */
.skip-link{position:fixed;top:-48px;left:16px;z-index:10001;background:var(--k);color:#fff;font-family:var(--head);font-size:13px;font-weight:600;padding:10px 18px;border-radius:0 0 10px 10px;transition:top .2s}
.skip-link:focus{top:0;color:#fff}

/* Focus visible au clavier */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:4px}

/* Lien actif dans la nav (scrollspy) */

/* Champs obligatoires */
.req{color:#c0392b;font-weight:700}
.cf-rgpd{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 4px}
.cf-rgpd a{color:var(--gt);text-decoration:underline}
.cf-note{font-size:12px;color:var(--muted);margin:-4px 0 14px}

/* Barre CTA mobile */
.mob-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:780;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--border);transform:translateY(110%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
.mob-cta-bar.show{transform:translateY(0)}
@media(min-width:1024px){.mob-cta-bar{display:none}}
.mcb-devis{flex:1;font-family:var(--head);font-size:14px;font-weight:700;color:#fff;background:var(--g);border-radius:12px;padding:13px;box-shadow:0 2px 14px rgba(125,166,63,.3)}
.mcb-devis:active{background:var(--gd)}
@media(max-width:1023px){
  footer{padding-bottom:84px}
  .pf-toast{bottom:88px}
}

/* Bouton retour en haut */
.back-top{position:fixed;right:20px;bottom:20px;z-index:770;width:46px;height:46px;border-radius:50%;background:var(--k);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(0,0,0,.25);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s,transform .25s,background .2s}
.back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-top:hover{background:var(--g)}
.back-top svg{width:18px;height:18px}
@media(max-width:1023px){.back-top{bottom:84px;right:14px;width:42px;height:42px}}

/* ============ CATALOGUE DES FORMATS ============ */
#formats{--cat-line:rgba(0,0,0,.075)}
.cat-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:20px}
.cat-search{position:relative;flex:1 1 300px;min-width:0}
.cat-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none}
.cat-search input{width:100%;font-family:inherit;font-size:14.5px;color:var(--k);background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 16px 12px 42px;transition:border-color .2s,box-shadow .2s}
.cat-search input::placeholder{color:var(--muted)}
.cat-search input:focus{border-color:var(--gt);box-shadow:0 0 0 3px var(--g20)}
.cat-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px}
.cat-chip{font-family:var(--head);font-size:12.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px 14px;transition:color .18s,border-color .18s,background .18s;white-space:nowrap}
.cat-chip:hover{color:var(--gt);border-color:rgba(125,166,63,.5)}
.cat-chip.active{background:var(--gt);border-color:var(--gt);color:#fff}

.cat-tablewrap{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cat-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.cat-table col.c-prod{width:22%}
.cat-table col.c-mat{width:15%}
.cat-table col.c-dim{width:20%}
.cat-table col.c-col{width:15%}
.cat-table col.c-det{width:28%}
.cat-table thead th{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9a9d96;text-align:left;padding:14px 18px;background:#fff;border-bottom:1px solid var(--cat-line);white-space:normal;vertical-align:bottom}
.cat-table th.sortable{cursor:pointer;user-select:none;transition:color .18s}
.cat-table th.sortable:hover{color:var(--gt)}
.cat-table th.sortable span{display:inline-flex;align-items:center;gap:6px}
.cat-arw{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.35;transition:opacity .18s;border-top:5px solid currentColor;display:inline-block}
.cat-table th[aria-sort="ascending"] .cat-arw{opacity:1;border-top:none;border-bottom:5px solid var(--g)}
.cat-table th[aria-sort="descending"] .cat-arw{opacity:1;border-bottom:none;border-top:5px solid var(--g)}
.cat-table tbody tr{border-top:1px solid var(--cat-line);transition:background .16s}
.cat-table tbody tr:hover{background:#fafaf9}
.cat-table td{padding:15px 18px;vertical-align:top;color:#4a4c47;line-height:1.5;overflow-wrap:break-word}
.cat-c-prod{color:var(--k)}
.cat-prod-nm{display:block;font-family:var(--head);font-size:14.5px;font-weight:700;line-height:1.3}
.cat-badge{display:block;margin-top:4px;font-family:var(--head);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a3a69e}
.cat-c-dim{font-weight:600;color:var(--k);font-variant-numeric:tabular-nums}
.cat-c-mat,.cat-c-detail{color:var(--muted)}
.cat-c-detail{font-size:13px}
.cat-c-col{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px}
.cat-sw{display:inline-flex;gap:4px;flex-shrink:0}
.cat-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.22);box-sizing:border-box}
.cat-col-txt{color:var(--muted)}

.cat-table tbody tr[data-extra]{display:none}
.cat-empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:15px}
.cat-reset,.cat-count .cat-reset{color:var(--gt);font-weight:600;text-decoration:underline;font-family:var(--head)}

.cat-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.cat-count{font-size:13.5px;color:var(--muted)}
.cat-count b{color:var(--k);font-weight:600}
#catToggle .cat-toggle-ic{width:16px;height:16px;transition:transform .25s}
#catToggle[aria-expanded="true"] .cat-toggle-ic{transform:rotate(180deg)}
.cat-note{margin-top:14px;font-size:12.5px;color:var(--muted)}
.cat-note a{color:var(--gt);font-weight:600;text-decoration:underline}

@media(max-width:760px){
  .cat-tools{flex-direction:column;align-items:stretch;gap:10px}
  .cat-search{flex:1 1 auto}
  .cat-chip{font-size:12px;padding:8px 12px}

  /* Le tableau devient une pile de fiches, sans code couleur */
  .cat-tablewrap{background:none;border:none;overflow:visible;border-radius:0}
  .cat-table thead{display:none}
  .cat-table,.cat-table tbody,.cat-table tr,.cat-table td{display:block;width:100%}
  .cat-table tbody tr{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;padding:0;overflow:hidden}
  .cat-table tbody tr:hover{background:#fff}
  .cat-c-prod{padding:14px 16px 12px!important;border-bottom:1px solid var(--cat-line)}
  .cat-prod-nm{font-size:15.5px}
  .cat-table td:not(.cat-c-prod){display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:baseline;padding:9px 16px;border-top:1px solid var(--cat-line)}
  .cat-table td:not(.cat-c-prod)::before{content:attr(data-label);font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a3a69e;padding-top:2px}
  .cat-c-detail{font-size:12.5px}
  .cat-c-col .cat-sw{display:none}

  .cat-foot{flex-direction:column-reverse;align-items:stretch;gap:12px}
  #catToggle{width:100%;justify-content:center}
  .cat-count{text-align:center}
}

/* ============ JUSTIFICATION DU TEXTE ============
   Texte courant justifié avec césure française (la page est en lang="fr").
   hyphenate-limit-chars évite de couper les mots trop courts et .nohyp protège
   les noms de marque. Les blocs centrés gardent leur dernière ligne centrée.
   Les colonnes étroites (cartes en grille sur ordinateur) ne sont justifiées
   qu'en dessous de 760px, là où elles occupent toute la largeur : en dessous
   d'une quarantaine de signes par ligne, la justification crée des lézardes. */
.hw-sub,
.sector-desc,
.tf-body,
.abs-card p,
.eco-intro-p,
.surm-block p,
.cat-c-detail,
.mold-cap p{
  text-align:justify;text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;
}
.sect-hd p,
.cta-sect p,
@media(max-width:760px){
  .xp-card p,
  .eco-card-body,
  .tl-step p{
    text-align:justify;text-justify:inter-word;
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;
  }
}
.nohyp{-webkit-hyphens:none;hyphens:none}
/* Fiches du catalogue : en mode carte, la valeur n'occupe qu'une colonne
   étroite à côté de son libellé — on revient au fer à gauche */
@media(max-width:760px){
  .cat-c-detail{text-align:left;-webkit-hyphens:manual;hyphens:manual}
}

/* Préférence : animations réduites */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hw-title.rv,.hw-title.rv.in{transform:skewX(-5.5deg)}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}