/* ============================================================
   SECU-R SA — système de styles (direction 2a)
   Référence : design_handoff_secur_site/README.md
   ============================================================ */

:root{
  --c-bg:#FFFFFF;
  --c-surface:#F4F4F2;
  --c-text:#1A1A1A;
  --c-text-body:#55554F;
  --c-text-muted:#6B6B68;
  --c-text-faint:#8A8A85;
  --c-border:#E3E3DF;
  --c-border-strong:#D5D5D0;
  --c-accent:#43D7B5;                    /* turquoise officiel SECU-R, charte p.06, CMJN 62/0/41/0 */
  --c-accent-hover:#1A1A1A;              /* noir charte, Pantone Black C */
  --c-accent-light:#43D7B5;              /* turquoise officiel */
  --c-accent-soft:rgba(67,215,181,.10);  /* turquoise officiel a 10% */
  --c-ink:#1A1A1A;
  --c-error:#B3261E;

  --max:1280px;
  --gutter:40px;

  --t-color:120ms ease;
  --t-transform:300ms cubic-bezier(.2,.6,.2,1);
  --t-fade:400ms ease;
}

@media (max-width:767px){ :root{ --gutter:24px; } }

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-synthesis-weight:none;
}

img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.015em; line-height:1.2; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--c-accent); color:var(--c-ink); }

:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-ink); color:#fff; padding:12px 20px; font-size:14px;
}
.skip:focus{ left:0; }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.wrap-flush{ max-width:var(--max); margin:0 auto; }
.text-col{ max-width:720px; }

/* ---------- surtitres & liens ---------- */
.eyebrow{
  font-size:13px; font-weight:400; line-height:1.2;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-accent); margin:0 0 10px;
}
.eyebrow-accent{ color:var(--c-accent); }

.link-u{
  display:inline-block; font-size:15px; color:var(--c-accent);
  border-bottom:1px solid var(--c-accent); padding-bottom:2px;
  transition:color var(--t-color),border-color var(--t-color);
}
.link-u:hover{ color:var(--c-accent-hover); border-color:var(--c-accent-hover); }

.btn{
  display:inline-block; background:var(--c-ink); color:#fff;
  font-size:15px; font-weight:600; padding:13px 26px; border:1px solid var(--c-ink);
  transition:background var(--t-color),color var(--t-color);
}
.btn:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--c-text); border-color:var(--c-border-strong); }
.btn-ghost:hover{ background:var(--c-surface); color:var(--c-text); }

/* ============================================================ En-tête */
.utility{ background:var(--c-surface); font-size:12px; color:var(--c-text-muted); border-top:3px solid var(--c-accent); }
.utility .wrap{ display:flex; justify-content:flex-end; align-items:center; gap:22px; padding-top:8px; padding-bottom:8px; }
.utility a{ transition:color var(--t-color); }
.utility a:hover{ color:var(--c-accent); }
.utility .lang{ display:flex; gap:10px; }
.utility .lang a[aria-current]{ color:var(--c-text); font-weight:600; }
@media (max-width:899px){ .utility .util-link{ display:none; } }

.masthead{ position:sticky; top:0; z-index:60; background:var(--c-bg); border-bottom:1px solid var(--c-border); }
.masthead.is-stuck{ box-shadow:0 1px 0 var(--c-border); }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px; }

.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:36px; width:auto; }
@media (max-width:767px){ .brand img{ height:30px; } }

.nav-list{ display:flex; align-items:center; gap:30px; margin:0; padding:0; list-style:none; }
.nav-list > li{ list-style:none; position:relative; }
.nav-link{
  display:inline-block; font-size:15px; color:#333; padding:6px 0; white-space:nowrap;
  border-bottom:1px solid transparent; transition:color var(--t-color),border-color var(--t-color);
}
.nav-link:hover,.nav-link[aria-expanded="true"]{ color:var(--c-accent); border-color:var(--c-accent); }
.nav-link[aria-current="page"]{ color:var(--c-text); border-color:var(--c-text); }

/* ---------- méga-menu ---------- */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--c-bg); border-top:2px solid var(--c-accent); border-bottom:1px solid var(--c-border);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  display:none; z-index:59;
}
.mega.is-open{ display:block; }
/* spécificité relevée : .masthead .wrap impose sinon display:flex au panneau */
.masthead .mega-inner{
  display:grid; grid-template-columns:repeat(4,1fr) 320px; gap:32px;
  align-items:start; justify-content:initial;
  padding-top:32px; padding-bottom:36px;
}
.mega-col h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-accent); font-weight:400; margin-bottom:12px; }
.mega-col ul{ margin:0; padding:0; list-style:none; }
.mega-col li + li{ margin-top:9px; }
.mega-col a{ font-size:15px; color:#333; transition:color var(--t-color); }
.mega-col a:hover{ color:var(--c-accent); }
.mega-visual figcaption{ font-size:13px; color:var(--c-text-muted); margin-top:10px; }
.mega-visual img{ width:100%; height:170px; object-fit:cover; }
.mega-promo{ display:block; background:var(--c-ink); color:#fff; text-decoration:none; overflow:hidden; }
.mega-promo img{ display:block; width:100%; height:150px; object-fit:cover; object-position:50% 40%; transition:transform .4s ease; }
.mega-promo:hover img{ transform:scale(1.03); }
.mega-promo-body{ display:block; padding:16px 18px 18px; }
.mega-promo-eyebrow{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-accent); margin-bottom:6px; }
.mega-promo strong{ display:block; font-size:19px; font-weight:600; color:#fff; margin-bottom:6px; }
.mega-promo-text{ display:block; font-size:13px; line-height:1.45; color:rgba(255,255,255,.78); }
.mega-promo-cta{ display:inline-block; margin-top:12px; font-size:14px; color:var(--c-accent); border-bottom:1px solid transparent; transition:border-color var(--t-color); }
.mega-promo:hover .mega-promo-cta{ border-bottom-color:var(--c-accent); }
@media (max-width:1100px){ .masthead .mega-inner{ grid-template-columns:repeat(3,1fr); } .mega-visual, .mega-promo{ display:none; } }

/* ---------- navigation mobile ---------- */
.nav-toggle{
  display:none; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  font:inherit; font-size:15px; color:var(--c-text); padding:6px 0;
}
.nav-toggle .bars{ display:inline-block; width:20px; height:12px; position:relative; }
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars span{
  content:""; position:absolute; left:0; right:0; height:1.5px; background:var(--c-text);
}
.nav-toggle .bars::before{ top:0; } .nav-toggle .bars span{ top:5px; } .nav-toggle .bars::after{ bottom:0; }

.nav-mobile{ display:none; }
.nav-mobile ul{ list-style:none; margin:0; padding:0; }

/* Menu déroulant sous 1180 px : avec le logo à 36 px, la navigation allemande ne tient plus sur une ligne en dessous. */
@media (max-width:1179px){
  .nav-toggle{ display:inline-flex; }
  .nav-desktop{ display:none; }
  .nav-mobile{
    display:none; position:fixed; inset:0; top:0; z-index:80;
    background:var(--c-bg); overflow-y:auto; padding:0 var(--gutter) 48px;
  }
  .nav-mobile.is-open{ display:block; }
  .nav-mobile-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--c-border); }
  .nav-mobile-close{ background:none; border:0; font:inherit; font-size:15px; cursor:pointer; color:var(--c-text); }
  .nav-mobile ul{ margin:0; padding:0; list-style:none; }
  .nav-mobile > ul > li{ border-bottom:1px solid var(--c-border); }
  .nav-mobile > ul > li > a,.nav-mobile .acc-btn{
    display:flex; width:100%; align-items:center; justify-content:space-between;
    padding:16px 0; font-size:17px; color:var(--c-text); background:none; border:0; font:inherit; text-align:left; cursor:pointer;
  }
  .nav-mobile .acc-panel{ display:none; padding:0 0 14px 14px; }
  .nav-mobile .acc-panel.is-open{ display:block; }
  .nav-mobile .acc-panel a{ display:block; padding:9px 0; font-size:15px; color:var(--c-text-body); }
  .nav-mobile .acc-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .chev{ transition:transform var(--t-color); font-size:13px; color:var(--c-text-muted); }
}

/* ============================================================ Hero */
.hero{ position:relative; }
.hero-media{ height:420px; overflow:hidden; background:var(--c-surface); }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* ---------- hero video (accueil) ---------- */
.hero-media-video{ position:relative; background:var(--c-ink); }
/* Le film est monte en 1920x660 : on lui donne son propre ratio plutot que la
   hauteur fixe des heros photo, pour qu'aucun plan ne soit rogne par le navigateur. */
.hero-media-video{ height:auto; aspect-ratio:1920/660; max-height:660px; }
.hero-video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; background:var(--c-surface); }
/* animation desactivee : on retombe sur l'image d'attente du film */
@media (prefers-reduced-motion:reduce){
  .hero-video{ display:none; }
  .hero-media-video{ background:url("../video/secur-maquette-poster.jpg") center/cover no-repeat; }
}
.hero-panels{ position:absolute; inset:0; display:flex; align-items:flex-end; pointer-events:none; }
.hero-panels .wrap-flush{ width:100%; padding-left:var(--gutter); }
.hero-card{
  background:var(--c-bg); padding:30px 36px; max-width:560px; pointer-events:auto;
  position:relative; border-top:3px solid var(--c-accent);
}
.hero-slide{ display:none; }
.hero-slide.is-active{ display:block; }
.hero-card h1{ font-size:36px; line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; }
.hero-card p{ font-size:16px; line-height:1.6; color:var(--c-text-body); margin:0 0 18px; }
/* .hero-card p l'emportait sur .eyebrow : le surtitre du hero perdait son accent */
.hero-card p.eyebrow{ font-size:13px; line-height:1.2; margin:0 0 10px; color:var(--c-accent); }
.hero-dots{ position:absolute; right:20px; bottom:14px; display:flex; gap:7px; }
.hero-dots button{
  width:7px; height:7px; padding:0; border:0; cursor:pointer; border-radius:50%;
  background:var(--c-border-strong); transition:background var(--t-color);
}
.hero-dots button[aria-current="true"]{ background:var(--c-accent); }

.hero-card .hero-title{ font-size:36px; line-height:1.15; letter-spacing:-.02em; font-weight:600; color:var(--c-text); margin:0 0 12px; }
@media (max-width:1023px){ .hero-card .hero-title{ font-size:30px; } }
@media (max-width:767px){ .hero-card .hero-title{ font-size:26px; } }

.hero-sub .hero-media{ height:320px; }
.hero-sub .hero-card h1{ font-size:32px; }

@media (max-width:1023px){
  .hero-media{ height:360px; }
  .hero-card h1{ font-size:30px; }
  .hero-sub .hero-media{ height:280px; }
}
@media (max-width:767px){
  .hero-media{ height:280px; }
  .hero-sub .hero-media{ height:220px; }
  .hero-panels{ position:static; display:block; }
  .hero-panels .wrap-flush{ padding:0; }
  .hero-card{ max-width:none; padding:26px var(--gutter) 30px; }
  .hero-card h1{ font-size:26px; }
  .hero-dots{ right:var(--gutter); bottom:8px; }
}

/* Hauteur du hero video : le ratio 2,91:1 du film prime tant que l'ecran est large.
   Sous 1024 px on lui garde un plancher, et sur mobile une bande de 2,91:1 serait trop
   fine : on revient a une hauteur fixe, quitte a rogner. */
@media (max-width:1023px){ .hero-media-video{ min-height:320px; } }
@media (max-width:767px){ .hero-media-video{ aspect-ratio:auto; height:280px; } }

/* ============================================================ Sections */
.section{ padding-top:56px; padding-bottom:56px; }
.section-tight{ padding-top:40px; padding-bottom:40px; }
.section-intro{ padding-top:56px; padding-bottom:20px; }
.section h2,.section-intro h2,.section-tight h2{ font-size:28px; letter-spacing:-.015em; margin:0 0 14px; }
.section h3,.section-intro h3,.section-tight h3{ font-size:26px; letter-spacing:normal; margin:0 0 12px; }
.lead{ font-size:16px; line-height:1.65; color:var(--c-text-body); }

.prose{ max-width:720px; font-size:16px; line-height:1.65; color:var(--c-text-body); }
.prose h2{ font-size:22px; color:var(--c-text); margin:36px 0 12px; letter-spacing:-.01em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:18px; color:var(--c-text); margin:28px 0 10px; }
.prose ul{ margin:0 0 1em; padding-left:0; list-style:none; }
.prose li{ position:relative; padding-left:20px; margin-bottom:8px; }
.prose li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:1px; background:var(--c-accent); }
.prose b,.prose strong{ font-weight:600; color:var(--c-text); }
.prose a{ color:var(--c-accent); border-bottom:1px solid var(--c-accent); }
.prose a:hover{ color:var(--c-accent-hover); }

/* ---------- grilles de cartes ---------- */
.grid{ display:grid; gap:24px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1023px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{ display:flex; flex-direction:column; gap:12px; }
.card-media{ overflow:hidden; background:var(--c-surface); }
.card-media img{ width:100%; height:150px; object-fit:cover; transition:transform var(--t-transform); }
.card:hover .card-media img{ transform:scale(1.03); }
.card strong{ font-size:16px; font-weight:600; transition:color var(--t-color); }
.card:hover strong{ color:var(--c-accent); }
.card span{ font-size:14px; line-height:1.5; color:var(--c-text-muted); }
.card-lg .card-media img{ height:220px; }

/* ---------- bande deux colonnes ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; background:var(--c-accent-soft); }
.split-body{ padding:48px var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.split-body > *{ max-width:520px; }
.split-media{ min-height:240px; background:var(--c-border); }
.split-media img{ width:100%; height:100%; min-height:240px; object-fit:cover; }
@media (max-width:767px){ .split{ grid-template-columns:1fr; } .split-media img{ min-height:220px; } }

/* ---------- chiffres clés ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ border-top:2px solid var(--c-accent); padding-top:14px; }
.stat b{ display:block; font-size:32px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.stat > span{ display:block; font-size:14px; color:var(--c-text-muted); margin-top:6px; }
.stat-pre{ font-style:normal; }
.stat-ico{ display:none; }
@media (max-width:767px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- chiffres clés en bandeau sombre : odomètre, trait qui court, icônes dessinées ---------- */
.stats-band{ position:relative; overflow:hidden; background:var(--c-ink); color:#fff; isolation:isolate; }
.stats-band::before{ content:""; position:absolute; inset:-40%; z-index:-1;
  background:radial-gradient(closest-side, rgba(67,215,181,.22), transparent 70%) 0 0/45% 45% no-repeat;
  animation:stats-glow 16s ease-in-out infinite alternate; }
.stats-band::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px; mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
@keyframes stats-glow{ 0%{ background-position:0% 30%; } 50%{ background-position:80% 70%; } 100%{ background-position:30% 100%; } }
.stats-band .eyebrow{ color:var(--c-accent); }
.stats-band .stats{ gap:32px; }
.stats-band .stat{ position:relative; border-top:1px solid rgba(255,255,255,.16); padding-top:26px; }
.stats-band .stat::before{ content:""; position:absolute; left:0; top:-1px; width:100%; height:2px; background:var(--c-accent);
  transform-origin:left; transition:transform 1.8s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 160ms); }
.stats-band .stat b{ font-size:clamp(44px, 5.4vw, 76px); line-height:1; letter-spacing:-.035em; color:#fff; font-variant-numeric:tabular-nums; }
.stats-band .stat-pre{ color:var(--c-accent); display:inline-block; margin-right:.04em;
  transition:transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s; }
.stats-band .stat > span{ color:rgba(255,255,255,.72); font-size:15px; margin-top:12px; max-width:22ch; }
.stats-band .stat-ico{ display:block; width:34px; height:34px; margin-bottom:18px; fill:none; stroke:var(--c-accent);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.stats-band .stat-ico path{ stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.4s ease calc(var(--i) * 160ms + 200ms); }
@media (max-width:767px){ .stats-band .stats{ gap:40px 20px; } }

/* état armé par secur.js, avant l'entrée à l'écran */
.stats.is-armed .stat{ opacity:0; transform:translateY(28px); transition:opacity .7s ease calc(var(--i) * 160ms), transform .9s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 160ms); }
.stats.is-armed .stat::before{ transform:scaleX(0); }
.stats.is-armed .stat-ico path{ stroke-dashoffset:1; }
.stats.is-armed .stat-pre{ transform:scale(0); opacity:0; }
.stats.is-in .stat{ opacity:1; transform:none; }
.stats.is-in .stat::before{ transform:scaleX(1); }
.stats.is-in .stat-ico path{ stroke-dashoffset:0; }
.stats .stat.is-done .stat-pre{ transform:none; opacity:1; }
.stats .stat.is-done b{ animation:stat-flash .9s ease; }
@keyframes stat-flash{ 0%{ text-shadow:0 0 0 rgba(67,215,181,0); } 30%{ text-shadow:0 0 28px rgba(67,215,181,.65); } 100%{ text-shadow:0 0 0 rgba(67,215,181,0); } }

/* odomètre : une colonne par chiffre, chaque rouleau tourne plusieurs tours avant de se poser */
.odo{ display:inline-flex; align-items:flex-start; }
.odo-col{ display:inline-block; height:1em; overflow:hidden; }
.odo-strip{ display:flex; flex-direction:column; will-change:transform;
}
.odo-strip > span{ display:block; height:1em; line-height:1; }
.odo-sep{ display:inline-block; line-height:1; }
@media (prefers-reduced-motion:reduce){ .stats-band::before{ animation:none; } }

/* ---------- bandeau partenaires ---------- */
.partners{ border-top:1px solid var(--c-border); }
.partners .wrap{ display:flex; align-items:center; flex-wrap:wrap; gap:34px; padding-top:22px; padding-bottom:22px; min-height:64px; }
.partners a{ display:inline-flex; align-items:center; }
.partners .eyebrow{ margin:0; }
.partners img{ width:auto; max-width:150px; object-fit:contain; opacity:.6; filter:grayscale(1); transition:opacity var(--t-color),filter var(--t-color); }
.partners a:hover img{ opacity:1; filter:grayscale(0); }
@media (max-width:767px){ .partners .wrap{ gap:22px; } .partners img{ max-width:104px; } }

/* ============================================================ Étapes services */
.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:grid; grid-template-columns:96px 1fr 300px; border-top:1px solid var(--c-border); }
.step:last-child{ border-bottom:1px solid var(--c-border); }
.step-num{ padding:32px 0; font-size:13px; letter-spacing:.1em; color:var(--c-accent); }
.step-body{ padding:32px 32px 32px 0; }
.step-body h3{ font-size:20px; margin:0 0 10px; }
.step-body p{ font-size:16px; line-height:1.6; color:var(--c-text-body); }
.step-media{ overflow:hidden; }
.step-media img{ width:100%; height:100%; min-height:200px; object-fit:cover; }
@media (max-width:1023px){ .step{ grid-template-columns:70px 1fr; } .step-media{ display:none; } .step-body{ padding-right:0; } }

/* ============================================================ Références */
.filters{ display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:end; }
.filters label{ display:block; font-size:13px; color:var(--c-text-muted); margin-bottom:6px; }
.filters select,.filters input{
  width:100%; font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--c-border-strong); border-radius:2px; background:#fff; color:var(--c-text);
}
.filters select:focus,.filters input:focus{ outline:2px solid var(--c-accent); outline-offset:1px; border-color:var(--c-accent); }
@media (max-width:1023px){ .filters{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .filters{ grid-template-columns:1fr; } }

.ref-count{ font-size:14px; color:var(--c-text-muted); margin-top:18px; }

.ref-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:24px; }
@media (max-width:1023px){ .ref-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ref-grid{ grid-template-columns:1fr; } }

.ref{ display:flex; flex-direction:column; }
.ref-media{ overflow:hidden; background:var(--c-surface); }
.ref-media img{ width:100%; height:190px; object-fit:cover; transition:transform var(--t-transform); }
.ref:hover .ref-media img{ transform:scale(1.03); }
.ref-body{ padding:16px 0 0; }
.ref-body h3{ font-size:16px; margin:0 0 6px; }
.ref-meta{ font-size:13px; color:var(--c-text-muted); line-height:1.5; }
.ref-toggle{
  margin-top:10px; background:none; border:0; padding:0; font:inherit; font-size:14px; cursor:pointer;
  color:var(--c-accent); border-bottom:1px solid var(--c-accent); align-self:flex-start;
  transition:color var(--t-color);
}
.ref-toggle:hover{ color:var(--c-accent-hover); }
.ref-detail{ display:none; margin-top:12px; font-size:15px; line-height:1.6; color:var(--c-text-body); }
.ref-detail.is-open{ display:block; }
.ref-credit{ display:block; margin-top:8px; font-size:12px; color:var(--c-text-faint); }

/* ============================================================ Équipe */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:1023px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:767px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.member img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--c-surface); }
.member h3{ font-size:16px; margin:14px 0 2px; }
.member p{ font-size:14px; color:var(--c-text-muted); margin:0; }

/* ============================================================ Contact */
/* auto-fit plutôt qu'un nombre fixe : 5 sites depuis Eysins, la grille suit l'ajout d'un site */
.sites-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
@media (max-width:767px){ .sites-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sites-grid{ grid-template-columns:1fr; } }
.site-card{ border-top:2px solid var(--c-accent); padding-top:18px; }
.site-card h3{ font-size:16px; margin:0 0 10px; }
.site-card address{ font-style:normal; font-size:15px; line-height:1.65; color:var(--c-text-body); }
.site-card a{ color:var(--c-accent); }
.site-card a:hover{ color:var(--c-accent-hover); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; max-width:760px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-full{ grid-column:1/-1; }
.field label{ font-size:14px; color:var(--c-text); }
.field .req{ color:var(--c-accent); }
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; padding:11px 12px; border:1px solid var(--c-border-strong);
  border-radius:2px; background:#fff; color:var(--c-text); width:100%;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--c-accent); outline-offset:1px; border-color:var(--c-accent); }
.field .hint{ font-size:13px; color:var(--c-text-muted); }
.field .err{ font-size:14px; color:var(--c-error); display:none; }
.field.is-invalid .err{ display:block; }
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:var(--c-error); }
.check{ display:flex; gap:10px; align-items:flex-start; grid-column:1/-1; }
.check input{ width:auto; margin-top:4px; }
.check label{ font-size:14px; color:var(--c-text-body); line-height:1.5; }
.form-status{ grid-column:1/-1; font-size:15px; padding:14px 16px; display:none; }
.form-status.is-ok{ display:block; background:var(--c-surface); border-left:3px solid var(--c-accent); }
.form-status.is-err{ display:block; background:#fdf3f2; border-left:3px solid var(--c-error); color:var(--c-error); }
.hp{ position:absolute; left:-9999px; }
@media (max-width:767px){ .form-grid{ grid-template-columns:1fr; } }

/* ============================================================ Fil LinkedIn */
.li-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.li-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:28px; }
@media (max-width:1023px){ .li-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .li-grid{ grid-template-columns:1fr; } }
.li-post{ display:flex; flex-direction:column; border:1px solid var(--c-border); background:#fff; transition:border-color var(--t-color); }
.li-post:hover{ border-color:var(--c-accent); }
.li-media{ overflow:hidden; background:var(--c-surface); position:relative; }
.li-media img{ width:100%; height:200px; object-fit:cover; transition:transform var(--t-transform); }
.li-post:hover .li-media img{ transform:scale(1.03); }
.li-badge{
  position:absolute; left:0; bottom:0; background:var(--c-accent); color:var(--c-ink);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px;
}
.li-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.li-date{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-faint); }
.li-text{ font-size:15px; line-height:1.55; color:var(--c-text-body); margin:0; flex:1; }
.li-cta{ font-size:14px; color:var(--c-accent); }
.li-post:hover .li-cta{ color:var(--c-accent-hover); }
.li-empty{ font-size:15px; color:var(--c-text-muted); border:1px solid var(--c-border); padding:22px; }

/* ============================================================ Pied de page */
.footer{ background:var(--c-ink); color:#C9C9C4; margin-top:0; }
.footer a{ color:#C9C9C4; transition:color var(--t-color); }
.footer a:hover{ color:#fff; }
.footer .wrap{ padding-top:56px; padding-bottom:40px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:32px; }
@media (max-width:1023px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-accent-light); font-weight:400; margin:0 0 14px; }
.footer ul{ margin:0; padding:0; list-style:none; }
.footer li{ margin-bottom:9px; font-size:15px; }
.footer address{ font-style:normal; font-size:15px; line-height:1.65; margin-bottom:18px; }
.footer-brand img{ height:26px; margin-bottom:20px; }
.footer-sites{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
@media (max-width:560px){ .footer-sites{ grid-template-columns:1fr; } }
.footer-bottom{
  border-top:1px solid #333330; margin-top:40px; padding-top:22px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:#8A8A85;
}
.footer-bottom a{ color:#8A8A85; }
.footer-social{ display:flex; gap:14px; align-items:center; }
.footer-social a{ display:inline-flex; }
.footer-social svg{ width:18px; height:18px; fill:#C9C9C4; }
.footer-social a:hover svg{ fill:var(--c-accent-light); }

/* ============================================================ Fil d'Ariane & divers */
.crumbs{ font-size:13px; color:var(--c-text-muted); padding-top:18px; }
.crumbs a{ color:var(--c-text-muted); }
.crumbs a:hover{ color:var(--c-accent); }
.crumbs span{ margin:0 7px; color:var(--c-accent); }

.cta-band{ background:var(--c-accent-soft); }
.cta-band .wrap{ padding-top:48px; padding-bottom:48px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta-band h2{ font-size:24px; margin:0; max-width:640px; }

.divider{ border:0; border-top:1px solid var(--c-border); margin:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================ Ajouts réunion 15.09.2026 */
/* ---------- accueil : case « Voir tous les produits » en fin de grille ---------- */
.card-more{ justify-content:center; align-items:flex-start; padding:24px; border:1px solid var(--c-border); min-height:150px; }
.card-more strong{ color:var(--c-accent); }
.card-more:hover{ border-color:var(--c-accent); }

/* ---------- fiche produit : carte pleine largeur (image à gauche) + crédit ---------- */
.card-wide{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; background:var(--c-surface); }
.card-wide .card-media img{ height:100%; min-height:320px; }
.card-wide .card-body{ padding:28px 32px 28px 0; }
@media (max-width:767px){ .card-wide{ grid-template-columns:1fr; gap:0; } .card-wide .card-media img{ min-height:220px; } .card-wide .card-body{ padding:20px; } }
.card-credit{ font-size:12px; color:var(--c-text-faint); margin-top:10px; }

/* ---------- « Ils nous font confiance » : défilement continu ---------- */
.clients{ border-top:1px solid var(--c-border); padding:28px 0 32px; overflow:hidden; }
.clients .eyebrow{ margin-bottom:18px; }
.clients-viewport{ display:flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.clients-track{ display:flex; align-items:center; gap:64px; margin:0; padding:0 32px; list-style:none; flex-shrink:0;
  animation:clients-scroll 45s linear infinite; }
.clients-viewport:hover .clients-track{ animation-play-state:paused; }
.clients-track li{ display:flex; align-items:center; height:56px; }
.clients-track img{ max-height:44px; max-width:150px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.65; transition:opacity var(--t-color),filter var(--t-color); }
.clients-track img:hover{ filter:grayscale(0); opacity:1; }
@keyframes clients-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){
  .clients-viewport{ -webkit-mask-image:none; mask-image:none; }
  .clients-track{ animation:none; flex-wrap:wrap; justify-content:center; row-gap:20px; flex-shrink:1; }
  .clients-track[aria-hidden]{ display:none; }
}
@media (max-width:767px){ .clients-track{ gap:40px; } .clients-track img{ max-height:34px; max-width:110px; } }

/* ---------- équipe : langue parlée ---------- */
.member .member-lang{ font-size:13px; color:var(--c-text-body); margin-top:4px; padding-left:10px; border-left:2px solid var(--c-accent); }

/* ---------- fiche produit : vidéo intégrée (16:9) ---------- */
.video-embed{ position:relative; width:100%; max-width:960px; aspect-ratio:16/9; background:var(--c-ink); margin-top:14px; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed video{ position:absolute; inset:0; width:100%; height:100%; background:var(--c-ink); }

/* ---------- fiches domaines : texte + produits associés, empilés sur mobile (corrigé le 15.09.2026) ---------- */
.domain-layout{ display:grid; grid-template-columns:minmax(0,720px) 1fr; gap:56px; }
@media (max-width:900px){ .domain-layout{ grid-template-columns:1fr; gap:32px; } }

/* ---------- références : une fiche filtrée doit disparaître (corrigé le 15.09.2026) ----------
   `.ref{display:flex}` l'emportait sur l'attribut `hidden` posé par le filtre : toutes les fiches restaient visibles. */
.ref[hidden]{ display:none; }

/* ---------------------------------------------- bandeau cookies (CookieConsent v2.8, voir _build/tracking.py) */
#cc--main{
  --cc-text:var(--c-text); --cc-block-text:var(--c-text-body);
  --cc-btn-primary-bg:var(--c-ink); --cc-btn-primary-text:#fff; --cc-btn-primary-hover-bg:#000;
  --cc-btn-secondary-bg:var(--c-surface); --cc-btn-secondary-text:var(--c-text); --cc-btn-secondary-hover-bg:var(--c-border);
  --cc-toggle-bg-on:#1FA487; --cc-toggle-bg-off:#8A8A85; --cc-toggle-bg-readonly:#C9EFE5;
  --cc-cookie-category-block-bg:var(--c-surface); --cc-cookie-category-block-bg-hover:var(--c-border);
  --cc-section-border:var(--c-border);
}
#cc--main, #cc--main .c-bn, #cc--main button{ font-family:'Archivo',Helvetica,Arial,sans-serif; }
#cc--main #cm, #cc--main #s-cnt .c-bn, #cc--main .c-bn, #cc--main #s-inr{ border-radius:0; }
#cc--main .cc-link{ color:var(--c-text); border-bottom-color:var(--c-accent); }