/*
Theme Name: Agamix Maroc
Theme URI: https://agamixmaroc.com/
Author: Agamix Maroc
Description: Thème du site Agamix Maroc — enduits et mortiers-colles. Classique, léger, sans constructeur de pages, mode clair/sombre. Nécessite le plugin « Agamix — Contenus ».
Version: 1.4.5
Requires at least: 6.4
Requires PHP: 8.0
License: Propriétaire — tous droits réservés
Text Domain: agamix
*/
/* Les styles reprennent la maquette V38 (maquette/index.html). Les ajouts propres
   à WordPress sont regroupés en fin de fichier. */
:root{
  --fs-mono:12px;     /* petites capitales mono : étiquettes, en-têtes de tableau, pied de page */
  --fs-mono-s:11px;   /* même style dans les zones serrées : chiffres clés, cartes, étapes */
  --ground:#FBFBF9;
  --surface:#FFFFFF;
  --surface-2:#F0F2ED;
  --ink:#0F1310;
  --ink-soft:#5B625B;
  --ink-faint:#666C65;
  --line:#E3E5DF;
  --line-strong:#C8CCC3;
  --brand:#74A854;
  --brand-deep:#4C7A32;
  --brand-wash:#EDF4E7;
  --on-brand:#0B1407;
  --void:#0D1210;
  --void-2:#161D18;
  --on-void:#F2F4EF;
  --on-void-soft:#9AA399;
  --note:#B07D1F;
  --note-wash:#FBF2DF;
  --ff-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-b:"Manrope","Helvetica Neue",Arial,sans-serif;
  --ff-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --w:1240px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0C100D;--surface:#141A16;--surface-2:#1C231E;--ink:#F0F2EC;--ink-soft:#9BA399;
  --ink-faint:#8C948B;--line:#242C26;--line-strong:#3A443C;--brand:#8CC06C;--brand-deep:#A5D189;
  --brand-wash:#19241420;--on-brand:#0B1407;--void:#070A08;--void-2:#101612;--on-void:#F0F2EC;
  --on-void-soft:#8E968C;--note:#D4A147;--note-wash:#241C0C;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#0C100D;--surface:#141A16;--surface-2:#1C231E;--ink:#F0F2EC;--ink-soft:#9BA399;
  --ink-faint:#8C948B;--line:#242C26;--line-strong:#3A443C;--brand:#8CC06C;--brand-deep:#A5D189;
  --brand-wash:#19241420;--on-brand:#0B1407;--void:#070A08;--void-2:#101612;--on-void:#F0F2EC;
  --on-void-soft:#8E968C;--note:#D4A147;--note-wash:#241C0C;color-scheme:dark;
}
*{box-sizing:border-box}
/* Liens stylés comme les boutons de la maquette */
a{color:inherit}
.metier,.gsac,.pp-chip,.pp-v,.cat-pp,a.tag,nav.main a,footer.site li a,.flinks a,.ariane a,.bm,.catf,.cta-mob,.lnk,.btn{text-decoration:none}
nav.main a,.catf{display:inline-flex;align-items:center}

body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ff-b);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:24px}
@media(max-width:600px){.wrap{padding-inline:18px}}
h1,h2,h3,h4{margin:0;font-family:var(--ff-d);font-weight:600;letter-spacing:-.025em;line-height:1.06;text-wrap:balance;font-stretch:112%}
p{margin:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.mono{font-family:var(--ff-m);font-variant-numeric:tabular-nums}

header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:20px;padding-block:15px}
.bm{display:flex;align-items:center;flex:0 0 auto;cursor:pointer;background:none;border:0;padding:0}
.bm img{height:38px;width:auto}
footer.site .bm img{height:46px}
@media(max-width:600px){.bm img{height:32px}}
nav.main{display:flex;gap:1px;flex-wrap:wrap;margin-left:auto;align-items:center}
nav.main a{background:none;border:0;padding:8px 12px;cursor:pointer;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--surface-2);font-weight:600}
nav.main .cta{background:var(--brand);color:var(--on-brand);font-weight:600;padding:9px 17px;margin-left:8px}
nav.main .cta:hover{background:var(--brand);filter:brightness(1.07);color:var(--on-brand)}
/* Outils d'en-tête : thème et menu. Le burger ne sort qu'en petite largeur. */
.htools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cta-mob{display:none;align-items:center;white-space:nowrap;border:0;cursor:pointer;
 background:var(--brand);color:var(--on-brand);font-weight:600;font-size:14px;
 min-height:44px;padding:0 16px;border-radius:999px;font-family:inherit}
.cta-mob:hover{filter:brightness(1.07)}
/* Le sélecteur de thème se tient près du logo : à droite, il entrait en
   concurrence avec le bouton de devis. */
/* Le sélecteur de thème vit en pied de page, sous les coordonnées. */
.ftheme{display:flex;align-items:center;gap:7px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ftheme span{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.ftheme .theme{margin-left:-4px}
.burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
 background:none;cursor:pointer;align-items:center;justify-content:center;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:13px;width:18px;height:2px;
 background:var(--ink-soft);border-radius:2px;transition:transform .2s,opacity .2s}
.burger::before{transform:translateY(-6px)}
.burger::after{transform:translateY(6px)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::before{transform:rotate(45deg)}
.burger[aria-expanded="true"]::after{transform:rotate(-45deg)}
/* Sous 900 px la navigation devient un panneau déroulant sous la barre. */
@media(max-width:900px){
  header.site .wrap{flex-wrap:wrap;gap:12px;padding-block:11px}
  .burger{display:flex}
  .htools{margin-left:auto}
  nav.main{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;
   margin-left:0;padding:8px 0 4px;border-top:1px solid var(--line)}
  header.site.ouvert nav.main{display:flex}
  nav.main a{text-align:left;padding:13px 14px;font-size:15px;border-radius:6px}
  nav.main .cta{display:none}
  /* Sur téléphone le devis reste dans la barre, toujours visible : le menu
     replié ne garde que la navigation. */
  .cta-mob{display:inline-flex}
}
@media(max-width:360px){.cta-mob{padding:0 12px;font-size:13px}}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:filter .18s,background .18s,border-color .18s}
.btn-p{background:var(--brand);color:var(--on-brand)}
.btn-p:hover{filter:brightness(1.08)}
.btn-o{border-color:var(--line-strong);background:none;color:var(--ink)}
.btn-o:hover{border-color:var(--ink);background:var(--surface-2)}
.btn-g{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
.btn-g:hover{border-color:var(--ink);background:var(--surface-2)}
.ar{font-family:var(--ff-m);font-weight:400;transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}

section{padding-block:clamp(56px,7.5vw,104px)}
.eyebrow{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brand-deep);font-weight:500;display:flex;align-items:center;gap:11px;margin-bottom:22px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brand);flex:0 0 auto}
.h2{font-size:clamp(30px,4.6vw,52px);max-width:17ch}
.lead{color:var(--ink-soft);font-size:17.5px;max-width:60ch;margin-top:18px;line-height:1.6}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ground);color:var(--ink);overflow:hidden;padding:0}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(98deg,var(--ground) 6%,color-mix(in srgb,var(--ground) 92%,transparent) 38%,color-mix(in srgb,var(--ground) 45%,transparent) 68%,color-mix(in srgb,var(--ground) 8%,transparent) 100%)}
.hero .wrap{position:relative;padding-block:clamp(72px,11vw,142px)}
.hero .eyebrow{color:var(--brand-deep)}
@media(max-width:620px){.hero .eyebrow{font-size:12.5px;letter-spacing:.14em;line-height:1.5}}
.hero .eyebrow::before{background:var(--brand-deep)}
.hero h1{font-size:clamp(38px,7.2vw,86px);font-weight:700;font-stretch:118%;letter-spacing:-.04em;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--brand-deep)}
.hero p.lead{color:var(--ink-soft);max-width:46ch;font-size:clamp(16px,2vw,19.5px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-credit{position:relative;font-family:var(--ff-m);font-size:var(--fs-mono-s);color:var(--ink-faint);letter-spacing:.08em;padding-bottom:16px}
/* Sur téléphone le texte occupe toute la largeur : le dégradé horizontal, calé
   pour un écran large, laissait le titre sur la partie chargée de la photo. */
@media(max-width:900px){
  .hero-bg::after{background:
    linear-gradient(0deg,color-mix(in srgb,var(--ground) 88%,transparent) 0%,
      color-mix(in srgb,var(--ground) 40%,transparent) 16%,transparent 30%),
    linear-gradient(176deg,
      color-mix(in srgb,var(--ground) 94%,transparent) 0%,
      color-mix(in srgb,var(--ground) 88%,transparent) 46%,
      color-mix(in srgb,var(--ground) 62%,transparent) 78%,
      color-mix(in srgb,var(--ground) 34%,transparent) 100%)}
  .hero .wrap{padding-block:clamp(44px,9vw,72px)}
  .hero h1{max-width:none}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
}

/* figures */
.figs{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figs .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-inline:0}
.fig{padding:28px 26px 30px;border-left:1px solid var(--line)}
.fig:first-child{border-left:0;padding-left:24px}
.fig .v{font-family:var(--ff-d);font-weight:700;font-stretch:115%;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.fig .v small{font-size:.44em;font-weight:600;color:var(--brand-deep);margin-left:4px;letter-spacing:0}
.fig .k{font-family:var(--ff-m);font-size:var(--fs-mono-s);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:11px}
@media(max-width:780px){.figs .wrap{grid-template-columns:repeat(2,1fr)}.fig:nth-child(3){border-left:0;padding-left:24px}.fig:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:380px){.fig,.fig:first-child,.fig:nth-child(3){padding:24px 16px 26px}}

/* ---------- placeholder ---------- */
.ph{position:relative;background:var(--surface-2);border:1px dashed var(--line-strong);display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;overflow:hidden;min-height:120px}
.ph::before{content:"";position:absolute;inset:0;opacity:.45;background:repeating-linear-gradient(135deg,transparent 0 12px,var(--line) 12px 13px)}
.ph span{position:relative;font-family:var(--ff-m);font-size:var(--fs-mono-s);line-height:1.65;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;max-width:32ch}
.ph span b{display:block;color:var(--note);font-weight:500;margin-bottom:6px}
.r16{aspect-ratio:16/10}.r43{aspect-ratio:4/3}.r11{aspect-ratio:1}.r21{aspect-ratio:2/1}

/* ---------- métiers ---------- */
.metiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:38px;border-radius:4px;overflow:hidden}
@media(max-width:980px){.metiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.metiers{grid-template-columns:1fr}}
.metier{background:var(--surface);padding:30px 24px 26px;display:flex;flex-direction:column;gap:13px;text-align:left;border:0;cursor:pointer;min-width:0;transition:background .2s}
.metier:hover{background:var(--brand-wash)}
.metier .num{font-family:var(--ff-m);font-size:var(--fs-mono-s);letter-spacing:.16em;color:var(--brand-deep)}
.metier h3{font-size:20px;font-weight:600}
.metier p{font-size:14px;color:var(--ink-soft);line-height:1.55;flex:1}
.metier .go{font-family:var(--ff-m);font-size:11px;color:var(--brand-deep);display:flex;gap:7px;align-items:center}
.metier:hover .go .ar{transform:translateX(3px)}

/* ---------- gammes ---------- */
.gamme{border-top:1px solid var(--line);padding-block:38px}
.gamme:last-of-type{border-bottom:1px solid var(--line)}
.ghead{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:baseline}
@media(max-width:600px){.ghead{grid-template-columns:1fr;gap:6px}.ghead p{grid-column:1!important}}
.ghead .code{font-family:var(--ff-m);font-size:11px;color:var(--brand-deep);letter-spacing:.12em}
.ghead h3{font-size:clamp(22px,3vw,30px)}
.ghead p{grid-column:2;color:var(--ink-soft);font-size:15px;max-width:60ch;margin-top:10px}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
/* Page 404 : photo des silos en fond, voile sombre dans les deux thèmes */
.e404{position:relative;overflow:hidden;color:#fff}
.e404-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.e404::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,11,.72),rgba(10,14,11,.86))}
.e404 .wrap{position:relative;z-index:2}
.e404 h1{color:#fff}
.e404-k{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 10px}
.e404-t{color:rgba(255,255,255,.82);margin:0 0 28px}
.e404 .btn-o{color:#fff;border-color:rgba(255,255,255,.5)}
.e404 .btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* Savoir-faire : parcours de fabrication en cinq étapes. Sous 900 px, on fait
   défiler horizontalement plutôt que de laisser une vignette orpheline. */
.parcours{margin-top:38px}
.parcours ol{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:none}
.parcours li{min-width:0}
.parcours img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
.parcours .pn{display:inline-block;font-family:var(--ff-m);font-size:var(--fs-mono);color:var(--brand-deep);letter-spacing:.08em;margin:10px 8px 0 0}
.parcours .pl{font-size:13.5px;font-weight:600;color:var(--ink)}
@media(max-width:900px){
  .parcours ol{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .parcours li{flex:0 0 62%;scroll-snap-align:start}
}
@media(max-width:540px){.parcours li{flex-basis:78%}}
@media(max-width:900px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.prods{grid-template-columns:1fr}}
.gammevis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end}
@media(max-width:520px){.gammevis{grid-template-columns:repeat(3,1fr)}}
.gammevis .gsac{position:relative;isolation:isolate;background:#1A1A18;border:1px solid var(--line);border-radius:4px;padding:14px 11px;cursor:pointer;display:block;aspect-ratio:3/4;overflow:hidden;transition:border-color .18s}
/* Accueil : photo de mise en œuvre en fond, voile sombre pour détacher le sac */
.gammevis .gsac img.gfond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;filter:none;transition:transform .5s}
.gammevis .gsac::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,18,15,.15) 0%,rgba(14,18,15,.55) 100%)}
.gammevis .gsac:hover img.gfond{transform:scale(1.05)}
.gammevis .gsac:hover{border-color:var(--brand)}
/* Sac positionné dans la carte (pas de hauteur en % : Safari la résout mal dans une boîte à aspect-ratio) */
.gammevis .gsac img:not(.gfond){position:absolute;top:14px;right:11px;bottom:14px;left:11px;width:calc(100% - 22px);height:calc(100% - 28px);max-width:none;max-height:none;object-fit:contain;object-position:center;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}

/* mode catalogue */
/* Calques de teinte, calés comme object-fit:cover pour coïncider avec la photo. */
.fl{position:absolute;inset:0;pointer-events:none;z-index:1;
 -webkit-mask-image:var(--masque);mask-image:var(--masque);
 -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fl-c{mix-blend-mode:color}
.cat-vis{isolation:isolate}
.nuan-note{margin:14px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.nuan-note .flag{margin-left:8px}
.simu{margin-top:24px;max-width:860px}
.simu-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;flex-wrap:wrap}
@media(max-width:620px){.simu-nom b{font-size:15.5px}.simu-bar .lnk{margin-top:0}}
/* Sans min-width:0 le libellé pousse « Réinitialiser » hors cadre en petite largeur. */
.simu-nom{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.simu-nom i{width:22px;height:22px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.simu-nom b{font-family:var(--ff-d);font-size:17px;font-weight:600;letter-spacing:-.01em}
.simu-nom span{font-family:var(--ff-m);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.rail-wrap{display:flex;align-items:center;gap:10px;margin-top:18px}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
 padding:7px 2px;flex:1;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rnav{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);
 cursor:pointer;color:var(--ink-soft);font-size:14px;line-height:1}
.rnav:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:620px){.rnav{display:none}}
.simu-v{position:relative;isolation:isolate;border-radius:5px;overflow:hidden;background:var(--surface-2);aspect-ratio:1300/781}
.simu-v img{width:100%;height:100%;object-fit:cover;display:block}
.simu-lab{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:9px;
 background:rgba(255,255,255,.93);border-radius:999px;padding:6px 14px 6px 7px;
 font-family:var(--ff-m);font-size:11px;letter-spacing:.04em;color:#1A1A18;backdrop-filter:blur(4px)}
.simu-lab i{width:17px;height:17px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.simu-p .eyebrow{margin-bottom:10px}
/* Mot du directeur : photo en fond, voile sombre, texte en réserve. */
.mot{position:relative;isolation:isolate;border-radius:6px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end}
.mot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(104deg,rgba(12,16,13,.92) 0%,rgba(12,16,13,.78) 42%,rgba(12,16,13,.38) 78%,rgba(12,16,13,.22) 100%)}
.mot-in{position:relative;z-index:2;padding:clamp(28px,4vw,52px);max-width:700px}
.mot-in .eyebrow{color:var(--brand-deep)}
.mot-txt{margin:14px 0 0;padding:0;border:0;font-family:var(--ff-d);font-size:clamp(18px,2.1vw,23px);
 line-height:1.5;font-weight:500;letter-spacing:-.01em;color:#F0F2EC}
.mot-vide{display:inline-block;font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;
 color:var(--note);border:1px dashed var(--note);border-radius:3px;padding:4px 10px;margin-bottom:14px}
.mot-txt p{margin:0 0 14px;font-size:clamp(16px,1.55vw,19px);line-height:1.55}
.mot-txt p:last-child{margin-bottom:0}
.mot-txt em{display:block;font-family:var(--ff-b);font-style:normal;font-size:14.5px;font-weight:400;
 line-height:1.6;color:rgba(240,242,236,.72)}
.mot-sig{margin-top:26px;padding-top:18px;border-top:1px solid rgba(240,242,236,.22)}
.mot-sig b{display:block;font-family:var(--ff-d);font-size:17px;font-weight:600;color:#F0F2EC}
.mot-sig span{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(240,242,236,.6)}
@media(max-width:620px){.mot{min-height:320px}.mot::after{background:linear-gradient(180deg,rgba(12,16,13,.55) 0%,rgba(12,16,13,.9) 55%)}}
.avis{border:1px dashed var(--note);background:var(--note-wash);border-radius:5px;padding:16px 18px;margin-bottom:30px}
.avis b{display:block;font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--note);margin-bottom:6px}
.avis p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.doc h3{font-family:var(--ff-d);font-size:19px;font-weight:600;letter-spacing:-.01em;margin:30px 0 8px}
.doc h3:first-of-type{margin-top:0}
.doc p{color:var(--ink-soft);font-size:15.5px;line-height:1.65;margin:0 0 12px}
.doc strong{color:var(--ink);font-weight:600}
.afaire{background:var(--note-wash);color:var(--note);border-radius:3px;padding:1px 6px;
 font-family:var(--ff-m);font-size:12.5px;white-space:nowrap}
.mention-cndp{font-size:12px;line-height:1.55;color:var(--ink-faint);margin-top:14px;max-width:70ch}
.consent span i,label i{font-style:normal;color:var(--brand-deep)}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:22px;padding:16px 18px;
 background:var(--surface-2);border:1px solid var(--line);border-radius:5px;cursor:pointer}
.consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.consent span{font-family:var(--ff-b);font-size:14px;line-height:1.55;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.consent .cl{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--ink);
 border-bottom:1px solid var(--line-strong)}
.flinks{display:flex;gap:18px;flex-wrap:wrap}
.flinks a{background:none;border:0;padding:0;cursor:pointer;color:inherit;font-size:inherit;
 border-bottom:1px solid transparent}
.flinks a:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* L'en-tête est collant : on garde de la marge pour que les filtres ne passent pas dessous. */
.catbar{scroll-margin-top:calc(96px + 0px)}
.catbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.catf{background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:9px 17px;cursor:pointer;font-size:13.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px}
.catf:hover{border-color:var(--ink);color:var(--ink)}
.catf.on{background:var(--ink);color:var(--ground);border-color:var(--ink);font-weight:600}
.catf span{font-family:var(--ff-m);font-size:var(--fs-mono);opacity:.6}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;align-items:start}
@media(max-width:940px){.catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.catgrid{grid-template-columns:1fr}}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.cat:hover{border-color:color-mix(in srgb,var(--a) 45%,transparent);box-shadow:0 10px 28px -18px var(--a)}
.cat.ouv{grid-column:1/-1;border-color:var(--a);box-shadow:0 0 0 1px var(--a);display:grid;grid-template-columns:320px 1fr;align-items:stretch}
@media(max-width:820px){.cat.ouv{grid-template-columns:1fr}}
.cat-vis{position:relative;background:var(--surface-2);display:flex;align-items:center;justify-content:center;padding:26px 18px 20px;min-height:212px}
/* Scène d'usage au trait, teintée par la couleur du produit. Calée en bas pour que
   le sac se tienne sur la ligne de sol du dessin. */
.cat-vis::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:.3;
 -webkit-mask-image:var(--sc);mask-image:var(--sc);
 -webkit-mask-size:92% auto;mask-size:92% auto;
 -webkit-mask-position:center bottom;mask-position:center bottom;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none}
/* Voile léger derrière le sac : il décolle le packshot du dessin sans l'effacer. */
.cat-vis::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse 34% 44% at 50% 54%,color-mix(in srgb,var(--surface) 86%,transparent) 0%,color-mix(in srgb,var(--surface) 52%,transparent) 52%,transparent 78%)}
.cat-shot{position:absolute;inset:0;z-index:0}
.cat-shot:empty{display:none}
.cat-pack{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.cat-vis img.sac,.cat-pack img,.cat-g{position:relative;z-index:2}
.cat-vis img.cat-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;max-height:none;filter:none}
/* Avec photo : le geste occupe la zone, le sac se décale à droite pour ne pas le masquer. */
.cat-vis:has(.cat-ph){background:#1A1A18;justify-content:flex-end;padding:22px 24px 18px}
.cat-vis:has(.cat-ph)::before{display:none}
.cat-vis:has(.cat-ph)::after{z-index:1;background:linear-gradient(104deg,
  rgba(16,16,14,.34) 0%,rgba(16,16,14,.04) 38%,rgba(16,16,14,.20) 66%,rgba(16,16,14,.52) 100%)}
.cat-vis:has(.cat-ph) img:not(.cat-ph){max-height:154px;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))}
.cat-vis:has(.cat-ph) .cat-g{background:rgba(255,255,255,.92);color:#1A1A18;border-color:transparent;backdrop-filter:blur(3px)}
/* Carte dépliée : la photo occupe le haut, le sac se pose dessous sur fond neutre.
   Les deux ne se chevauchent plus — chacun a sa zone. */
.cat.ouv .cat-vis{min-height:260px}
.cat.ouv .cat-vis:has(.cat-ph){display:grid;grid-template-rows:230px 1fr;
 align-items:stretch;justify-content:stretch;padding:0;min-height:300px;background:var(--surface-2)}
.cat.ouv .cat-vis:has(.cat-ph)::after{display:none}
.cat.ouv .cat-vis:has(.cat-ph) .cat-shot{position:relative;inset:auto;grid-row:1;overflow:hidden}
.cat.ouv .cat-vis:has(.cat-ph) .cat-pack{grid-row:2;padding:18px 16px 20px;
 border-top:1px solid var(--line)}
.cat.ouv .cat-vis:has(.cat-ph) img:not(.cat-ph){max-height:140px;
 filter:drop-shadow(0 10px 18px rgba(0,0,0,.16))}
.cat-g{position:absolute;top:13px;left:14px;font-family:var(--ff-m);font-size:var(--fs-mono-s);letter-spacing:.11em;text-transform:uppercase;color:var(--a);background:var(--surface);border:1px solid color-mix(in srgb,var(--a) 30%,transparent);padding:4px 9px;border-radius:999px}
.cat-txt{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);flex:1}
.cat.ouv .cat-txt{border-top:none;border-left:1px solid var(--line);padding:26px 28px 28px}
@media(max-width:820px){.cat.ouv .cat-txt{border-left:none;border-top:1px solid var(--line)}}
.cat-ref{font-family:var(--ff-m);font-size:13px;letter-spacing:.1em;color:var(--a);font-weight:600}
.pp-txt .cat-ref{font-size:15px}
:root[data-theme="dark"] .cat-ref{color:color-mix(in srgb,var(--a) 50%,#fff)}
.cat-txt h3{font-family:var(--ff-d);font-size:19px;font-weight:600;letter-spacing:-.02em}
.cat-u{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.cat-sp{list-style:none;padding:0;margin:3px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.cat-sp li{font-family:var(--ff-m);font-size:var(--fs-mono-s);letter-spacing:.04em;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);padding:5px 9px;border-radius:3px}
.cat-plus{align-self:flex-start;margin-top:6px;background:none;border:1px solid var(--line-strong);border-radius:999px;padding:9px 17px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink)}
.cat-plus:hover{border-color:var(--a);color:var(--a)}
.cat-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.cat-acts .cat-plus{margin-top:0}
.cat-pp{background:none;border:0;padding:9px 4px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-soft)}
.cat-pp:hover{color:var(--a)}
/* Page produit */
.pp{padding-top:28px}
.ariane{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--ink-faint);margin-bottom:22px}
.ariane a{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-soft);font-size:13px}
.ariane a:hover{color:var(--ink);text-decoration:underline}
.ariane b{font-weight:600;color:var(--ink)}
.pp-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center}
.pp-vis{border-radius:6px;overflow:hidden;min-height:clamp(260px,34vw,420px)}
.pp-vis.cat-vis:has(.cat-ph) img:not(.cat-ph){max-height:clamp(170px,22vw,250px)}
.pp-txt h1{font-size:clamp(30px,4.6vw,52px);margin-top:10px}
.pp-txt .lead{margin-top:14px}
.pp-txt .cat-sp{margin-top:18px}
.pp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pp-det{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.pp-det .cat-b span{font-size:14.5px}
.pp-fiche{display:grid;gap:14px;max-width:820px;margin-top:22px}
.pp-fiche img{width:100%;height:auto;border:1px solid var(--line);border-radius:4px;background:#fff;display:block}
.pp-ch{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pp-chip{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 15px;cursor:pointer;color:var(--ink)}
.pp-chip b{font-size:14px;font-weight:600}
.pp-chip span{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.05em;color:var(--ink-faint)}
.pp-chip:hover{border-color:var(--ink-soft)}
.pp-voisins{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:22px}
.pp-v{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--a);border-radius:6px;padding:18px;cursor:pointer;color:var(--ink)}
.pp-v b{font-size:16px;font-weight:600}
.pp-vu{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.pp-va{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--a)}
.pp-v:hover{border-color:var(--ink-soft);border-top-color:var(--a)}
/* Même gamme : texte à gauche, sac à droite (le nom du produit est déjà écrit : image décorative). */
.pp-vt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;min-width:0;align-self:stretch}
.pp-v.avec-sac{flex-direction:row;align-items:center;gap:14px}
.pp-vs{flex:none;width:clamp(84px,32%,120px);height:auto;max-height:160px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));transition:transform .3s}
.pp-v:hover .pp-vs{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.pp-vs{transition:none}.pp-v:hover .pp-vs{transform:none}}
.pp-s .h2{font-size:clamp(24px,3vw,34px)}
:root[data-theme="dark"] .pp .cat-ref,:root[data-theme="dark"] .pp .cat-b b,:root[data-theme="dark"] .pp-v .cat-ref,:root[data-theme="dark"] .pp-va{color:color-mix(in srgb,var(--a) 45%,#fff)}
@media(max-width:900px){.pp-head{grid-template-columns:1fr}.pp-det{grid-template-columns:1fr;gap:18px}}
.cat-det{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:720px){.cat-det{grid-template-columns:1fr}}
.cat-b b{display:block;font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--a);font-weight:500}
.cat-b span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:5px}
.cat-b .miss{color:var(--note)}
.cat-cta{grid-column:1/-1}
.nuancier{display:block;margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}

/* teintes */
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 3px var(--ground),0 0 0 5px var(--ink)}
.sw:hover{transform:scale(1.09)}
.sw{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--c);scroll-snap-align:center;cursor:pointer;transition:transform .14s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.sw:hover{transform:scale(1.09);z-index:2}
.tnote{display:flex;gap:16px;align-items:center;margin-top:20px;flex-wrap:wrap}

/* ---------- projets ---------- */
.city-tabs{display:flex;gap:8px;margin-top:34px;flex-wrap:wrap}
.city-tabs button{background:none;border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.city-tabs button:hover{border-color:var(--ink)}
.city-tabs button[aria-selected="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink);font-weight:600}
.city-tabs .ct{font-family:var(--ff-m);font-size:11px;opacity:.6;margin-left:5px}
.projets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.cscroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:28px;padding-bottom:10px;scroll-padding-left:2px}
.cscroll>.projet{flex:0 0 min(330px,80%);scroll-snap-align:start}
.cscroll::-webkit-scrollbar{height:7px}
.cscroll::-webkit-scrollbar-track{background:var(--surface-2);border-radius:99px}
.cscroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.cscroll::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}
.cnav{display:flex;gap:9px;align-items:center;margin-top:16px}
.cnav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-family:var(--ff-m);font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.cnav button:hover{border-color:var(--ink);background:var(--surface-2)}
.cnav .chint{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.08em;color:var(--ink-faint);margin-left:6px}
@media(max-width:920px){.projets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.projets{grid-template-columns:1fr}}
.projet{background:var(--surface);border:1px solid var(--line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column}
.projet .shot{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.projet .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.projet:hover .shot img{transform:scale(1.045)}
.projet .ph{border:0;border-bottom:1px solid var(--line)}
.projet .body{padding:18px 19px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.projet .h4{font-size:17.5px;line-height:1.22}
.projet .loc{font-family:var(--ff-m);font-size:var(--fs-mono-s);color:var(--ink-faint);letter-spacing:.11em;text-transform:uppercase}
.projet .desc{font-size:13.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.tag{font-family:var(--ff-m);font-size:var(--fs-mono-s);letter-spacing:.06em;background:var(--brand-wash);color:var(--brand-deep);padding:4px 8px;border-radius:3px;border:1px solid color-mix(in srgb,var(--brand) 25%,transparent)}
.flag{display:inline-block;font-family:var(--ff-m);font-size:var(--fs-mono-s);letter-spacing:.06em;background:var(--note-wash);color:var(--note);padding:4px 8px;border-radius:3px;align-self:flex-start}
a.tag{cursor:pointer;font-family:var(--ff-m)}
a.tag:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.lnk{background:none;border:0;padding:0;margin-top:7px;cursor:pointer;font-family:var(--ff-m);font-size:var(--fs-mono);color:var(--ink-faint);letter-spacing:.05em}
.lnk:hover{color:var(--brand-deep)}
/* Fiche technique : le lien se distingue du texte « à fournir » qui l'entoure. */
.lnk-pdf{margin-top:0;color:var(--a,var(--brand-deep));font-weight:500;text-decoration:underline;text-underline-offset:3px}
.lnk-pdf:hover{color:var(--brand-deep)}
/* Aperçu PDF en surcouche : le document s'ouvre dans la page, sans téléchargement. */
.pdfov{position:fixed;inset:0;z-index:200;background:rgba(16,16,14,.72);backdrop-filter:blur(3px);
 display:flex;align-items:center;justify-content:center;padding:24px}
.pdfbox{background:var(--surface);border-radius:8px;width:min(1180px,100%);height:min(88vh,900px);
 display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.pdfhead{display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:14px 16px 14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pdfhead b{display:block;font-family:var(--ff-d);font-size:16px;font-weight:600}
.pdfhead span{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.pdfact{display:flex;align-items:center;gap:8px}
.pdfact .btn{padding:7px 13px;font-size:12.5px}
.pdfx{background:none;border:1px solid var(--line);border-radius:999px;width:32px;height:32px;
 cursor:pointer;color:var(--ink-soft);font-size:13px;line-height:1}
.pdfx:hover{border-color:var(--ink-soft);color:var(--ink)}
.pdfbody{flex:1;min-height:0;background:var(--surface-2);display:flex;flex-direction:column}
/* Les pages sont affichées en image : un cadre PDF intégré est refusé par
   beaucoup de contextes — environnement de prévisualisation, navigateurs mobiles. */
.pdfpages{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px;
 align-items:center;-webkit-overflow-scrolling:touch}
.pdfpages img{width:100%;max-width:1000px;height:auto;display:block;border:1px solid var(--line);
 border-radius:3px;background:#fff;box-shadow:0 6px 20px -12px rgba(0,0,0,.5)}
@media(max-width:620px){.pdfpages{padding:10px;gap:10px}}
/* Repli visible en permanence : certains navigateurs — mobiles surtout — n'affichent
   pas les PDF en ligne et laissent le cadre vide. La sortie de secours reste là. */
.pdffb{flex:none;margin:0;padding:9px 16px;text-align:center;font-size:12px;color:var(--ink-faint);
 border-top:1px solid var(--line);background:var(--surface)}
.pdffb a{color:var(--brand-deep)}
@media(max-width:620px){.pdfov{padding:0}.pdfbox{height:100%;width:100%;border-radius:0}
 .pdfhead{padding:12px 14px}.pdfact .btn{padding:6px 10px;font-size:11.5px}}

/* sélecteur */
.wiz{margin-top:34px;display:flex;flex-direction:column;gap:22px}
#devis{scroll-margin-top:calc(96px + 0px)}   /* au changement d'étape, les étapes restent sous l'en-tête collant */
.wizstep{display:flex;flex-direction:column;gap:12px}
.wizn{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-deep)}
.wizopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.wizopt{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:15px 17px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.wizopt:hover{border-color:var(--line-strong)}
.wizopt.on{border-color:var(--brand);background:var(--brand-wash);box-shadow:inset 0 0 0 1px var(--brand)}
.wizopt b{font-family:var(--ff-d);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.wizopt span{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.wizres{background:var(--surface);border:1px solid var(--brand);border-left:4px solid var(--brand);border-radius:4px;padding:24px 26px}
.wizrn{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-deep)}
.wizres h4{font-family:var(--ff-d);font-size:23px;font-weight:600;margin-top:9px;letter-spacing:-.02em}
.wizres p{font-size:14.5px;color:var(--ink-soft);margin-top:10px;line-height:1.55;max-width:62ch}
.wizn em{font-style:normal;color:var(--ink-faint);text-transform:none;letter-spacing:.04em}
.wizlist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:14px}
.wizitem{background:var(--surface);padding:18px 20px}
.wizctx{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep)}
.wizitem h4{font-family:var(--ff-d);font-size:19px;font-weight:600;margin-top:7px;letter-spacing:-.02em}
.wizitem p{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.55;max-width:60ch}
.wizitem .btn{margin-top:13px;padding:9px 16px;font-size:13px}
.wizalt{padding-top:11px;border-top:1px solid var(--line);font-size:13.5px!important}
.wizalt b{color:var(--ink)}
.wizcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* gros appel au devis */
.bigcta{background:var(--brand-wash);border:1px solid color-mix(in srgb,var(--brand) 38%,transparent);border-radius:5px;margin-top:14px;padding:clamp(22px,3vw,30px) clamp(20px,2.6vw,30px);display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bigcta h3{font-size:clamp(19px,2.4vw,24px);font-weight:600;max-width:24ch}
.bigcta p{margin-top:8px;font-size:14.5px;max-width:50ch;color:var(--ink-soft)}
.bigcta .btn{background:var(--brand);color:var(--on-brand);padding:14px 26px;font-size:15px;flex:0 0 auto}
/* Même encart vert clair dans les deux thèmes : en sombre on fige les couleurs
   du thème clair, texte compris, sinon l'écriture claire disparaîtrait sur le vert. */
:root[data-theme="dark"] .bigcta{background:var(--brand-deep);border-color:var(--brand-deep);color:#0F1310}
:root[data-theme="dark"] .bigcta h3{color:#0F1310}
:root[data-theme="dark"] .bigcta p{color:#26301F}
/* Sur ce vert, un bouton vert se fondrait : il passe en sombre, écriture verte. */
:root[data-theme="dark"] .bigcta .btn{background:#0F1310;color:var(--brand-deep)}

/* devis */
.dvsteps{list-style:none;padding:0;margin:0 0 30px;display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;flex-wrap:wrap}
.dvsteps li{background:var(--surface);flex:1;min-width:120px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.dvsteps li b{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.1em;color:var(--ink-faint);font-weight:400}
.dvsteps li span{font-size:13px;color:var(--ink-faint)}
.dvsteps li.ok b,.dvsteps li.ok span{color:var(--brand-deep)}
.dvsteps li.on{background:var(--brand);}
.dvsteps li.on b{color:color-mix(in srgb,var(--on-brand) 70%,transparent)}
.dvsteps li.on span{color:var(--on-brand);font-weight:600}
.dvform{display:flex;flex-direction:column;gap:18px;margin-top:0}
.dvh{font-family:var(--ff-d);font-size:22px;font-weight:600;letter-spacing:-.02em}
label i{color:var(--brand-deep);font-style:normal}
.dvopts{display:flex;gap:9px;flex-wrap:wrap}
.dvchip{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:10px 17px;cursor:pointer;font-size:14px;margin:0;text-transform:none;letter-spacing:0;color:var(--ink);font-family:var(--ff-b)}
.dvchip:hover{border-color:var(--ink)}
.dvchip.on,.dvchip:has(input:checked){background:var(--brand-wash);border-color:var(--brand);font-weight:600}
.dvchip input{width:auto;margin:0;accent-color:var(--brand)}
.dvgamme{border-top:1px solid var(--line);padding-top:15px}
.dvgn{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:10px}
.dvaide{border-top:1px solid var(--line);padding-top:14px}
.dverr{background:var(--note-wash);border:1px solid var(--note);border-radius:4px;padding:13px 16px;font-size:14px;color:var(--ink)}
.dvnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.dvnav .btn[type="submit"]{margin-left:auto}
.dvok{background:var(--surface);border:1px solid var(--brand);border-radius:5px;padding:clamp(28px,4vw,44px);text-align:center}
.dvokic{width:54px;height:54px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px}
.dvok h2{font-size:28px;font-weight:700}
.dvok p{margin-top:12px;color:var(--ink-soft);font-size:15.5px}
.dvok .wizcta{justify-content:center}
.mo{font-family:var(--ff-m);font-size:var(--fs-mono);color:var(--ink-faint);letter-spacing:.05em}

/* ---------- band ---------- */
.band{background:var(--surface-2);border-block:1px solid var(--line)}
/* Accueil, « Notre fabrication » : photo de l'usine en fond, voile sombre dans les deux thèmes */
.band-photo{position:relative;isolation:isolate;overflow:hidden;background:#0E120F}
.band-photo .band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2}
.band-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,11,.78) 0%,rgba(10,14,11,.62) 45%,rgba(10,14,11,.82) 100%)}
.band-photo .h2{color:#F3F5EF}
.band-photo .lead{color:rgba(243,245,239,.8)}
.band-photo .eyebrow{color:#A5D189}
.band-photo .eyebrow::before{background:#A5D189}
.band-photo .steps{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:38px;border-radius:4px;overflow:hidden}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);padding:30px 26px}
.step .n{font-family:var(--ff-m);font-size:var(--fs-mono-s);letter-spacing:.17em;color:var(--brand-deep)}
.step h3{font-size:19px;margin-top:14px}
.step p{font-size:14px;color:var(--ink-soft);margin-top:10px;line-height:1.56}

/* ---------- segment ---------- */
.seg-hero{background:var(--surface-2);border-bottom:1px solid var(--line)}
.seg-hero .wrap{padding-block:clamp(40px,5.5vw,64px)}
.seg-hero h1,.seg-hero h2{font-size:clamp(28px,4.4vw,46px);max-width:17ch}
.segnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.cols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,56px);align-items:start}
/* Sans min-width:0, le tableau à 480 px force la colonne et pousse la page entière. */
.cols>*{min-width:0}
@media(max-width:860px){.cols{grid-template-columns:1fr}}
.needs{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.needs li{background:var(--surface);padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start}
.needs .ic{font-family:var(--ff-m);font-size:var(--fs-mono);color:var(--brand-deep);padding-top:3px}
.needs b{display:block;font-family:var(--ff-d);font-size:16px;font-weight:600;letter-spacing:-.01em}
.needs .d{display:block;font-size:14px;color:var(--ink-soft);margin-top:5px;line-height:1.52}

.tablewrap{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
@media(max-width:560px){table{min-width:360px;font-size:13px}
 .tablewrap{position:relative}}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)}
th{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;background:var(--surface-2)}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--ff-m);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.acc{border-top:1px solid var(--line);margin-top:32px}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;background:none;border:0;padding:19px 0;cursor:pointer;text-align:left;display:flex;gap:18px;align-items:center;font-family:var(--ff-d);font-size:17px;font-weight:600;letter-spacing:-.015em}
.acc-q .pm{margin-left:auto;font-family:var(--ff-m);color:var(--brand-deep);font-size:18px;flex:0 0 auto}
.acc-a{padding:0 0 20px;color:var(--ink-soft);font-size:15px;max-width:70ch}

/* contact */
form{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
label{display:block;font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;padding:13px 15px;font-family:var(--ff-b);font-size:15px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
textarea{resize:vertical;min-height:120px}
.formnote{font-size:12.5px;color:var(--ink-faint)}
.coord{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:26px}
.coord dl{margin:0;display:flex;flex-direction:column;gap:19px}
.coord dt{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.coord dd{margin:6px 0 0;font-size:15px;line-height:1.5}
.cl{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--brand) 45%,transparent);transition:color .15s,border-color .15s}
.cl:hover{color:var(--brand-deep);border-bottom-color:var(--brand)}
.clh{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.08em;color:var(--ink-faint)}
footer.site .cl{border-bottom-color:color-mix(in srgb,var(--ink-faint) 50%,transparent)}
footer.site .cl:hover{color:var(--ink);border-bottom-color:var(--ink)}
.sent{background:var(--brand-wash);border:1px solid var(--brand);border-radius:4px;padding:15px 17px;font-size:14.5px;margin-top:18px}

/* Bandeau de logos défilant : une bande fine plutôt qu'une grille de cartes.
   Les logos sont détourés ; le ruban reste clair dans les deux thèmes, sans quoi
   les marques sombres deviendraient illisibles en mode nuit. */
.logorail{position:relative;margin-top:26px;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.09) 2%,rgba(0,0,0,.28) 4.5%,rgba(0,0,0,.55) 7%,rgba(0,0,0,.80) 9.5%,rgba(0,0,0,.94) 11.5%,#000 14%,#000 86%,rgba(0,0,0,.94) 88.5%,rgba(0,0,0,.80) 90.5%,rgba(0,0,0,.55) 93%,rgba(0,0,0,.28) 95.5%,rgba(0,0,0,.09) 98%,transparent 100%);
         mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.09) 2%,rgba(0,0,0,.28) 4.5%,rgba(0,0,0,.55) 7%,rgba(0,0,0,.80) 9.5%,rgba(0,0,0,.94) 11.5%,#000 14%,#000 86%,rgba(0,0,0,.94) 88.5%,rgba(0,0,0,.80) 90.5%,rgba(0,0,0,.55) 93%,rgba(0,0,0,.28) 95.5%,rgba(0,0,0,.09) 98%,transparent 100%)}
.logotrack{display:flex;width:max-content;animation:defile 46s linear infinite}
.logorail:hover .logotrack,.logorail:focus-within .logotrack{animation-play-state:paused}
.logoset{display:flex;align-items:center;gap:56px;padding:17px 28px}
.logoset img{height:38px;width:auto;flex:none;display:block}
.logoset img.fond{border-radius:3px}
.logoset img.haut{height:56px}
/* En thème clair, les logos se posent à même la page, sans cadre. En thème
   sombre un ruban clair passe dessous : les marques sont presque toutes noires
   ou bleu marine et disparaîtraient sinon. Les bords du ruban s'estompent avec
   le masque, il ne forme pas un bloc. */
.logorail{--ruban:transparent;background:var(--ruban)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logorail{--ruban:rgba(255,255,255,.94)}}
:root[data-theme="dark"] .logorail{--ruban:rgba(255,255,255,.94)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .logorail{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .logotrack{animation:none}
  .logoset:last-child{display:none}}
.logonote{font-family:var(--ff-m);font-size:var(--fs-mono);color:var(--ink-faint);letter-spacing:.07em;margin-top:10px}

.cta-band{background:var(--brand)}
.cta-band .wrap{padding-block:clamp(44px,5.5vw,68px);display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:var(--on-brand)}
.cta-band h2{font-size:clamp(25px,3.6vw,38px);max-width:19ch}
.cta-band p{margin-top:12px;max-width:44ch;font-size:15.5px;color:color-mix(in srgb,var(--on-brand) 72%,transparent)}
.cta-band .btn{background:var(--on-brand);color:var(--brand)}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center}
@media(max-width:820px){.feature{grid-template-columns:1fr}}
.feature img{width:100%;height:auto;border-radius:5px;aspect-ratio:4/3;object-fit:cover}
/* Savoir-faire : chiffres clés en vignettes, photo à hauteur du texte */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:38px}
.kpis>div{background:var(--surface);padding:20px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpis b{font-family:var(--ff-d);font-weight:700;font-size:clamp(22px,2.3vw,30px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.kpis b small{font-size:.6em;font-weight:600;color:var(--ink-soft)}
.kpis span:not(.afaire){font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);line-height:1.45}
.kpis .afaire{align-self:flex-start;font-size:var(--fs-mono-s)}
.sf-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);margin-top:38px;align-items:start}
.sf-img{position:relative;aspect-ratio:4/3}
.sf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px}
.sf-txt p+p{margin-top:16px}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.sf-cols{grid-template-columns:1fr}.sf-img{min-height:0;aspect-ratio:4/3}}
@media(max-width:540px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis>div{padding:16px 14px}}
.fq-lien{font-weight:600;color:var(--brand-deep)!important}
/* Chantier atteint depuis une page produit : brève mise en évidence */
.projet{scroll-margin-top:calc(110px + 0px)}
.projet.projet-vise{outline:2px solid var(--brand);outline-offset:3px;transition:outline-color .6s}
.statline{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.statline div .v{font-family:var(--ff-d);font-weight:700;font-size:27px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.statline div .v small{font-size:.62em;font-weight:600;margin-left:1px;color:var(--ink-soft)}
.statline div .k{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}

/* couverture */
.mapwrap{display:grid;grid-template-columns:1fr .9fr;gap:clamp(24px,4vw,52px);align-items:center;margin-top:34px}
@media(max-width:860px){.mapwrap{grid-template-columns:1fr}}
.mapsvg{width:100%;height:auto;max-height:520px;display:block}
.mapsvg text{font-family:var(--ff-m)}
.zones{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.zone{background:var(--surface);padding:15px 18px;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:baseline}
@media(max-width:480px){.zone{grid-template-columns:1fr;gap:4px}}
.zone .zn{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep)}
.zone .zv{font-size:14px;color:var(--ink-soft);line-height:1.5}
.poles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
@media(max-width:560px){.poles{grid-template-columns:1fr}}
.pole{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:4px;padding:16px 18px}
.pole .pn{font-family:var(--ff-d);font-weight:600;font-size:17px}
.pole .pd{font-size:13px;color:var(--ink-soft);margin-top:5px;line-height:1.5}
.maplegend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-family:var(--ff-m);font-size:var(--fs-mono-s);color:var(--ink-faint);letter-spacing:.06em}
.maplegend span{display:flex;align-items:center;gap:7px}
.maplegend i{width:10px;height:10px;border-radius:50%;background:var(--ink-faint);display:inline-block}
.maplegend i.p{width:13px;height:13px;background:var(--brand)}

footer.site{background:var(--surface-2);color:var(--ink);border-top:1px solid var(--line);padding-block:60px 28px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
@media(max-width:880px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fgrid{grid-template-columns:1fr}}
footer.site .fh{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--brand-deep);margin:0 0 16px;font-weight:500}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-soft)}
footer.site li a{background:none;border:0;padding:0;cursor:pointer;color:inherit;font-size:14px;text-align:left}
footer.site li a:hover{color:var(--ink)}
.fbottom{border-top:1px solid var(--line);margin-top:46px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--ff-m);font-size:var(--fs-mono);color:var(--ink-faint)}
/* Réseaux sociaux en pied de page */
.fsoc{margin-top:22px}
.fsoc-t{display:block;font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:10px}
.fsoc-l{display:flex;flex-wrap:wrap;gap:8px}
.soc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--ink-soft);border:1px solid var(--line);border-radius:50%;text-decoration:none;transition:border-color .18s,color .18s,background .18s}
a.soc:hover{color:var(--ink);border-color:var(--ink-soft)}
a.soc:hover{background:var(--surface-2)}
.soc.vide{opacity:.7}
.fsoc-n{margin-top:9px;font-size:11px}
.fsoc-n .afaire{white-space:normal}
.fgrid>*{min-width:0}
.fblurb{font-size:14px;color:var(--ink-soft);max-width:33ch;margin-top:16px;line-height:1.6}
/* Bascule clair / sombre. Le pictogramme est dessiné en CSS : un disque plein
   en thème clair, un croissant obtenu par une ombre portée en thème sombre. */
/* Commande discrète : pas de cercle au repos, juste le pictogramme. */
.theme{width:36px;height:36px;border-radius:999px;border:0;background:none;
 cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;
 transition:background .18s}
.theme:hover{background:var(--surface-2)}
.theme svg{width:14px;height:14px;color:var(--ink-faint);fill:currentColor}
.theme:hover svg{color:var(--ink)}
.theme .i-soleil{display:none}
.theme[data-on="dark"] .i-lune{display:none}
.theme[data-on="dark"] .i-soleil{display:block}
/* Mouvement réduit : durées quasi nulles plutôt que « none », pour que la FAQ
   et le menu arrivent bien à leur état final, sans animation visible. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =====================================================================
   Ajouts du thème WordPress
   ===================================================================== */
[hidden]{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:fixed!important;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:100;background:var(--brand);color:var(--on-brand);padding:10px 16px;border-radius:999px;font-weight:600}
footer.site .fh{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--brand-deep);margin:0 0 16px;font-weight:500;font-stretch:normal;line-height:1.4}
h2.eyebrow{line-height:1.4;font-stretch:normal}
.acc-h{margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;font-stretch:normal}
.projet .h4,h2.h4{font-size:17.5px;line-height:1.22}
.projet .h4 a,.cat-txt h3 a{color:inherit;text-decoration:none}
.projet .h4 a:hover,.cat-txt h3 a:hover{color:var(--brand-deep)}
a.shot{display:block}
.shot-vide{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--surface-2)}
.shot-vide img{width:40%;height:auto;opacity:.25;object-fit:contain}
/* Sacs du bloc « Nos produits » : visibles en entier (correction demandée sur la maquette) */
.gammevis .gsac img:not(.gfond){object-fit:contain;object-position:center}
.cat-pack img{width:auto;height:auto;max-height:170px}
/* Cartes du catalogue dépliées par le script */
.cat.ouv .cat-plus{border-color:var(--a)}
/* Formulaires : champ piège hors écran, état d'envoi */
.agx-piege{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.agx-form{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.agx-form[aria-busy="true"] button[type="submit"]{opacity:.6;pointer-events:none}
.agx-ok .sent{margin-top:26px}
[aria-invalid="true"]{border-color:var(--note)!important}
/* Pagination des actualités */
.pagin{margin-top:34px}
.pagin .nav-links{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--ff-m);font-size:12px}
.pagin .page-numbers{padding:8px 13px;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;color:var(--ink-soft)}
.pagin .page-numbers.current{background:var(--ink);color:var(--ground);border-color:var(--ink)}
/* Contenu éditorial (articles, pages légales) */
.doc h2{font-family:var(--ff-d);font-size:24px;font-weight:600;letter-spacing:-.015em;margin:34px 0 10px}
.doc ul,.doc ol{color:var(--ink-soft);font-size:15.5px;line-height:1.65;padding-left:22px;margin:0 0 12px}
.doc a:not(.btn){color:var(--brand-deep)}
.doc img{height:auto;border-radius:4px}
.article p{font-size:17px}
/* Sélecteur et devis : titres de niveau correct, présentés comme dans la maquette */
.wizres>h3{font-family:var(--ff-d);font-size:23px;font-weight:600;margin-top:9px;letter-spacing:-.02em}
.wizitem h3{font-family:var(--ff-d);font-size:19px;font-weight:600;margin-top:7px;letter-spacing:-.02em}
.dvset{border:0;padding:0;margin:0;min-width:0}
.dvleg{display:block;padding:0;font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.dvleg:empty{display:none}
.dvh:focus{outline:none}
/* SEO : pages de gamme, normes, liens internes */
.gliens{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:30px;font-size:14px;color:var(--ink-soft)}
.gliens span{font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.gtexte h2{margin-top:0}
.pp-normes{margin-top:22px;padding:16px 18px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}
.pp-normes p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}
.pp-normes p+p{margin-top:8px}
.pp-normes b{color:var(--ink);font-family:var(--ff-m);font-size:12px;letter-spacing:.04em}
/* Audit final 27/10 : e-mail du pied de page entier (D-B), cibles tactiles (D-E) */
footer.site .mono a{overflow-wrap:anywhere}
.cat-plus,.cat-pp{min-height:36px}
.lnk{padding-block:6px}
/* Vidéos de présentation : image d'attente, bouton lecture, lecteur 16:9 */
.vid-zone{max-width:900px;margin-top:22px}
.vid{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--void)}
.vid video,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:var(--void)}
.vid-play img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .2s}
.vid-play:hover img,.vid-play:focus-visible img{opacity:1}
.vid-ic{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--brand);box-shadow:0 10px 30px -8px rgba(0,0,0,.6);transition:transform .2s}
.vid-ic::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--on-brand)}
.vid-play:hover .vid-ic{transform:scale(1.08)}
.vid-note{font-size:12px;color:var(--ink-faint);margin-top:10px}
.cat-vid{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--brand-wash);color:var(--brand-deep);font-size:var(--fs-mono-s);letter-spacing:.06em;vertical-align:middle}
.bientot{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--note-wash);color:var(--note);font-family:var(--ff-m);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;font-weight:500}