/* =========================================================================
   BEIng-Sécurité, feuille de style du site.
   Partie 1 : jetons du design system (copie de _ds/…/tokens, source de vérité).
   Partie 2 : composants ds-* et comportements propres au site.
   ========================================================================= */

/* ---- tokens/fonts.css ---- */
/* Archivo (variable) — substitute for DIN Pro. Google Fonts, SIL OFL 1.1. See readme.md → Typography. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('../fonts/archivo-latin-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('../fonts/archivo-latin-ext-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('../fonts/archivo-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('../fonts/archivo-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ---- tokens/colors.css ---- */
/* BEING Sécurité — brand palette.
   Source: "BEING securite - livret d'identité visuelle" p.3 ("gamme colorielle").
   Hex values are the ones printed in the livret (they differ marginally from the
   RVB values also printed there; the livret's "Hexadécimal" line is canonical here). */
:root{
  /* ---- Brand ramp (livret order) ---- */
  --being-violet:#434283;        /* Pantone 7672C — CMJN 87-81-16-3  — RVB 68-66-132 */
  --being-teal-deep:#316474;     /* Pantone 7699C — CMJN 80-44-39-26 — RVB 50-99-115 */
  --being-teal:#4c868f;          /* Pantone 5483C — CMJN 73-31-32-11 — RVB 67-133-150 */
  --being-cyan:#37b0c9;          /* Pantone 631C  — CMJN 69-9-27-0   — RVB 66-174-188 */
  --being-ice:#eaf2f5;           /* Pantone 656C  — CMJN 10-2-4-0    — RVB 234-243-246 */
  --being-orange:#d64123;        /* Pantone 7597C — CMJN 14-86-96-0  — RVB 209-63-31 */

  /* ---- Tints & shades, derived in oklch from the six brand colours ---- */
  --violet-900:oklch(28% .105 285);
  --violet-700:oklch(36% .125 285);
  --violet-600:#434283;
  --violet-400:oklch(56% .105 285);
  --violet-200:oklch(80% .055 285);
  --violet-050:oklch(95% .018 285);

  --teal-900:oklch(32% .045 222);
  --teal-800:#316474;
  --teal-600:#4c868f;
  --teal-400:oklch(72% .072 215);
  --teal-200:oklch(88% .038 215);
  --teal-050:oklch(96% .014 215);

  --cyan-600:oklch(62% .098 216);
  --cyan-500:#37b0c9;
  --cyan-300:oklch(83% .065 216);
  --cyan-100:oklch(93% .030 216);

  --orange-700:oklch(45% .150 36);
  --orange-600:#d64123;
  --orange-300:oklch(78% .090 36);
  --orange-100:oklch(94% .034 36);

  /* ---- Neutrals: cool, pulled toward the ice tone, never pure grey ---- */
  --neutral-000:#ffffff;
  --neutral-025:#f6f9fb;
  --neutral-050:#eaf2f5;   /* = --being-ice */
  --neutral-100:#dde7ec;
  --neutral-200:#c6d5dd;
  --neutral-300:#a5b9c3;
  --neutral-400:#7e939e;
  --neutral-500:#5e727c;
  --neutral-600:#45565f;
  --neutral-700:#313f47;
  --neutral-800:#202b31;
  --neutral-900:#131b1f;

  /* ---- Semantic: text ---- */
  --text-strong:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-brand:var(--being-violet);
  --text-accent:var(--being-teal-deep);
  --text-on-dark:var(--neutral-000);
  --text-on-dark-muted:rgb(255 255 255 / .72);
  --text-on-dark-accent:var(--cyan-300); /* turquoise lisible sur violet (5,4:1) */
  --text-danger:var(--orange-700);
  --text-link:var(--being-teal-deep);
  --text-link-hover:var(--being-violet);

  /* ---- Semantic: surfaces ---- */
  --surface-page:var(--neutral-000);
  --surface-subtle:var(--being-ice);
  --surface-card:var(--neutral-000);
  --surface-raised:var(--neutral-000);
  --surface-inverse:var(--being-violet);
  --surface-inverse-alt:var(--teal-900);
  --surface-accent:var(--being-cyan);
  --surface-overlay:rgb(19 27 31 / .58);

  /* ---- Semantic: borders ---- */
  --border-subtle:var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-brand:var(--being-violet);
  --border-focus:var(--being-cyan);

  /* ---- Semantic: interactive ---- */
  --action-primary:var(--being-violet);
  --action-primary-hover:var(--violet-700);
  --action-primary-active:var(--violet-900);
  --action-secondary:var(--being-teal-deep);
  --action-secondary-hover:var(--teal-900);
  --action-accent:var(--being-orange);
  --action-accent-hover:var(--orange-700);
  --action-disabled-bg:var(--neutral-100);
  --action-disabled-fg:var(--neutral-400);

  /* ---- Semantic: status ---- */
  --status-ok:#2a7053;
  --status-ok-bg:#e6f3ed;
  --status-info:var(--being-teal-deep);
  --status-info-bg:var(--being-ice);
  --status-warn:#945a0e;
  --status-warn-bg:#fdf1df;
  --status-alert:var(--being-orange);
  --status-alert-bg:var(--orange-100);
}

/* ---- tokens/typography.css ---- */
/* BEING Sécurité — typography.
   Livret p.4 "univers typographique": DIN Pro regular / bold / italic, with the note
   "Pour la bureautique et le web, la police peut être remplacée par de l'Arial".
   No DIN Pro binaries were supplied, so the shipped webfont is Archivo (closest free
   DIN-family grotesque). Arial stays in the stack as the livret's own office fallback. */
:root{
  --font-core:'Archivo','DIN Pro','DINPro','DIN Next',Arial,Helvetica,sans-serif;
  --font-display:var(--font-core);
  --font-body:var(--font-core);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Type scale — 1.25 major third off a 16px body */
  --size-3xs:11px;
  --size-2xs:12px;
  --size-xs:13px;
  --size-sm:14px;
  --size-md:16px;
  --size-lg:18px;
  --size-xl:20px;
  --size-2xl:25px;
  --size-3xl:31px;
  --size-4xl:39px;
  --size-5xl:49px;
  --size-6xl:61px;

  --leading-tight:1.08;
  --leading-snug:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  /* The livret sets SÉCURITÉ in wide-tracked caps — that is the brand's eyebrow voice. */
  --tracking-wide:.18em;
  --tracking-caps:.08em;
  --tracking-normal:0;
  --tracking-tight:-.015em;
  --tracking-display:-.025em;

  /* Semantic roles */
  --type-display:var(--weight-bold) var(--size-5xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--size-4xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-bold) var(--size-3xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-semibold) var(--size-2xl)/var(--leading-snug) var(--font-display);
  --type-h4:var(--weight-semibold) var(--size-xl)/var(--leading-snug) var(--font-display);
  --type-lead:var(--weight-regular) var(--size-lg)/var(--leading-relaxed) var(--font-body);
  --type-body:var(--weight-regular) var(--size-md)/var(--leading-normal) var(--font-body);
  --type-body-sm:var(--weight-regular) var(--size-sm)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-semibold) var(--size-sm)/1.3 var(--font-body);
  --type-eyebrow:var(--weight-bold) var(--size-2xs)/1.2 var(--font-display);
  --type-caption:var(--weight-regular) var(--size-2xs)/1.4 var(--font-body);
}

/* ---- tokens/spacing.css ---- */
/* BEING Sécurité — spacing & layout. 4px base grid. */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  --gutter-inline:24px;
  --gutter-inline-lg:48px;
  --section-y:80px;
  --section-y-lg:120px;

  --container-sm:640px;
  --container-md:880px;
  --container-lg:1120px;
  --container-xl:1320px;

  --control-h-sm:32px;
  --control-h-md:40px;
  --control-h-lg:48px;

  --header-h:76px;
}

/* ---- tokens/elevation.css ---- */
/* BEING Sécurité — radii, borders, elevation.
   The livret's mark is built from rounded-rectangle strokes and a soft-cornered "BE";
   the system mirrors that with generous but never pill-shaped corners on containers. */
:root{
  --radius-none:0;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-sm);

  --border-hairline:1px; /* @kind spacing */
  --border-thick:2px; /* @kind spacing */
  --rule-accent:3px; /* @kind spacing */

  /* Shadows are cool-tinted (derived from --neutral-900), never neutral black. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgb(19 27 31 / .06);
  --shadow-sm:0 1px 3px rgb(19 27 31 / .08), 0 1px 2px rgb(19 27 31 / .04);
  --shadow-md:0 4px 12px rgb(19 27 31 / .08), 0 1px 3px rgb(19 27 31 / .05);
  --shadow-lg:0 12px 32px rgb(19 27 31 / .10), 0 2px 6px rgb(19 27 31 / .05);
  --shadow-xl:0 24px 60px rgb(19 27 31 / .14);
  --shadow-inset:inset 0 1px 2px rgb(19 27 31 / .07);
  --shadow-focus:0 0 0 3px rgb(55 176 201 / .38);

  --blur-glass:12px; /* @kind other */
  --overlay-scrim:linear-gradient(to top, rgb(19 27 31 / .78) 0%, rgb(19 27 31 / .35) 45%, rgb(19 27 31 / 0) 100%); /* @kind other */
}

/* ---- tokens/motion.css ---- */
/* BEING Sécurité — motion. Calm, short, no bounce: the brand is reassurance, not play. */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --duration-reveal:480ms; /* @kind other */

  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,1,1); /* @kind other */
  --ease-inout:cubic-bezier(.65,0,.35,1); /* @kind other */

  --transition-control:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); /* @kind other */
  --transition-surface:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); /* @kind other */

  --lift-hover:translateY(-2px); /* @kind other */
  --press-scale:.985; /* @kind other */
}

/* ---- tokens/base.css ---- */
/* BEING Sécurité — base element defaults applied on top of the tokens. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong);letter-spacing:var(--tracking-display);text-wrap:balance}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration-color:color-mix(in oklab,var(--text-link) 35%,transparent);text-underline-offset:3px;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
img,svg{display:block;max-width:100%}
button{font:inherit}
hr{border:0;border-top:var(--border-hairline) solid var(--border-subtle);margin:var(--space-6) 0}
::selection{background:var(--being-cyan);color:var(--neutral-900)}
:root{accent-color:var(--being-violet)}
input,textarea{caret-color:var(--being-violet)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
@keyframes being-spin{to{transform:rotate(360deg)}}
@keyframes being-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* =========================================================================
   Partie 2 : site
   ========================================================================= */

html { scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--type-body); -webkit-font-smoothing: antialiased; }
a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--text-link-hover); }
h1, h2, h3, h4, p, ul, ol, figure, dl { margin: 0; }
ul, ol { padding: 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
img { height: auto; }

@keyframes being-apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes being-fondu { 0%, 33.4% { opacity: 0; } 3%, 30% { opacity: 1; } 100% { opacity: 0; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--being-violet); color: #fff; padding: var(--space-3) var(--space-5); font: var(--type-label); }
/* :focus-visible et non :focus : le bouton « Haut de page » y ramène le focus, le lien ne doit
   apparaître que pour la navigation au clavier, pas après un clic ou un toucher. */
.lien-evitement:focus-visible { left: var(--space-4); top: var(--space-4); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 60; min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-2) var(--gutter-inline-lg);
  background: rgb(255 255 255 / .88); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.entete.est-defile { background: rgb(255 255 255 / .94); box-shadow: var(--shadow-sm); }
.entete__logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.entete__logo img { width: 116px; height: auto; }
.entete__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }

/* ---------- Menu hamburger (tous écrans) ---------- */
.menu-bouton {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-control);
  background: var(--surface-card); color: var(--being-violet); cursor: pointer; transition: var(--transition-control);
}
.menu-bouton:hover { background: var(--violet-050); border-color: var(--violet-200); }
.menu-bouton__barres { position: relative; display: block; width: 18px; height: 14px; }
.menu-bouton__barres > span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.menu-bouton__barres > span:nth-child(1) { top: 0; }
.menu-bouton__barres > span:nth-child(2) { top: 6px; }
.menu-bouton__barres > span:nth-child(3) { top: 12px; }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres > span:nth-child(2) { opacity: 0; }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panneau : carte alignée sur le bouton, pleine largeur sur téléphone. */
.menu {
  position: absolute; top: calc(100% + var(--space-2)); right: var(--gutter-inline-lg);
  width: min(320px, calc(100vw - 2 * var(--gutter-inline))); display: grid; padding: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.entete[data-menu="ouvert"] .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu .ds-navlink { height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-sm); font-size: var(--size-md); }
.menu .ds-navlink:hover { background: var(--being-ice); }
.menu .ds-navlink[aria-current] { background: var(--violet-050); }
.menu .ds-navlink__trait { display: none; }

@media (max-width: 720px) {
  .menu { top: 100%; left: 0; right: 0; width: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-inline: 0; padding: var(--space-2) var(--gutter-inline) var(--space-4); }
}

/* Sans JavaScript, les liens restent affichés sous le logo. */
.entete:not(.menu-pret) { flex-wrap: wrap; }
.entete:not(.menu-pret) .menu-bouton { display: none; }
.entete:not(.menu-pret) .menu { position: static; order: 3; width: 100%; display: flex; flex-wrap: wrap; padding: 0; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; }

/* ---------- NavLink ---------- */
.ds-navlink {
  position: relative; display: flex; flex: 0 0 auto; align-items: center; height: 44px; padding: 0 4px;
  font-family: var(--font-core); font-size: var(--size-sm); font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none; white-space: nowrap; transition: var(--transition-control);
}
.ds-navlink:hover { color: var(--being-violet); }
.ds-navlink[aria-current] { color: var(--being-violet); font-weight: var(--weight-semibold); }
.ds-navlink__trait {
  position: absolute; left: 0; right: 0; bottom: 2px; height: var(--rule-accent); border-radius: 2px;
  background: var(--being-violet); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out);
}
.ds-navlink[aria-current] .ds-navlink__trait { opacity: 1; }

/* ---------- Boutons ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h-md); padding: 0 20px;
  font-family: var(--font-core); font-size: var(--size-sm); font-weight: var(--weight-semibold);
  line-height: 1; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer;
  transition: var(--transition-control), transform var(--duration-instant) var(--ease-out);
}
.ds-btn:active { transform: scale(var(--press-scale)); }
.ds-btn--sm { height: var(--control-h-sm); padding: 0 14px; }
.ds-btn--lg { height: var(--control-h-lg); padding: 0 28px; font-size: var(--size-md); }
.ds-btn--plein { display: flex; width: 100%; }

.ds-btn--primary { background: var(--action-primary); color: #fff; }
.ds-btn--primary:hover { background: var(--action-primary-hover); color: #fff; }
.ds-btn--primary:active { background: var(--action-primary-active); }
.ds-btn--secondary { background: var(--action-secondary); color: #fff; }
.ds-btn--secondary:hover { background: var(--action-secondary-hover); color: #fff; }
.ds-btn--accent { background: var(--action-accent); color: #fff; }
.ds-btn--accent:hover { background: var(--action-accent-hover); color: #fff; }
.ds-btn--outline { background: transparent; color: var(--action-primary); border-color: var(--border-default); }
.ds-btn--outline:hover { background: var(--violet-050); color: var(--action-primary); }
.ds-btn--outline:active { background: var(--violet-200); }
.ds-btn--ghost { background: transparent; color: var(--text-accent); }
.ds-btn--ghost:hover { background: var(--being-ice); color: var(--text-accent); }
.ds-btn--ghost:active { background: var(--neutral-100); }
.ds-btn--inverse { background: #fff; color: var(--being-violet); }
.ds-btn--inverse:hover { background: var(--being-ice); color: var(--being-violet); }
.ds-btn--inverse:active { background: var(--neutral-100); }
.ds-btn--sur-fonce:hover { background: rgb(255 255 255 / .12); color: #fff; }
.ds-btn--sur-fonce:active { background: rgb(255 255 255 / .2); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { background: var(--action-disabled-bg); color: var(--action-disabled-fg); cursor: not-allowed; transform: none; }

/* ---------- Cartes ---------- */
.ds-card {
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  transition: var(--transition-surface), border-color var(--duration-fast) var(--ease-out);
}
.ds-card--featured { background: var(--being-violet); color: #fff; border: 0; box-shadow: var(--shadow-md); }
.ds-card--interactive:hover { transform: var(--lift-hover); box-shadow: var(--shadow-md); border-color: var(--border-default); }
.ds-card--featured.ds-card--interactive:hover { border-color: transparent; }
a:focus-visible > .ds-card { box-shadow: var(--shadow-focus); }

/* ---------- Titres de section ---------- */
.ds-section-heading { display: grid; gap: var(--space-3); justify-items: start; max-width: 720px; }
.ds-section-heading__sur { display: grid; gap: var(--space-2); justify-items: start; }
.ds-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--being-teal-deep); }
.ds-rule { width: 40px; height: var(--rule-accent); border-radius: 2px; background: var(--being-cyan); }
.ds-section-heading h2 { font: var(--type-h2); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.ds-lead { font: var(--type-lead); color: var(--text-muted); }

/* ---------- Chiffres ---------- */
.ds-stat {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm); padding: var(--space-5); display: grid; gap: var(--space-2);
}
.ds-stat__valeur { font: var(--type-h2); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.ds-stat__libelle { font: var(--type-body-sm); color: var(--text-muted); }

/* ---------- Badges, étiquettes, alertes ---------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-core); font-size: var(--size-2xs); font-weight: var(--weight-semibold); line-height: 1.5; white-space: nowrap;
}
.ds-badge--caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.ds-badge__point { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.ds-tag {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--being-ice); color: var(--being-teal-deep);
  border: 1px solid var(--border-default); font-family: var(--font-core); font-size: var(--size-xs); font-weight: var(--weight-semibold);
}
.ds-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); }

/* ---------- Formulaires ---------- */
.ds-field { display: grid; gap: var(--space-2); align-content: start; }
.ds-label { font: var(--type-label); color: var(--text-strong); }
.ds-aide { font: var(--type-caption); color: var(--text-muted); }
.ds-input {
  width: 100%; height: var(--control-h-md); padding: 0 12px;
  font-family: var(--font-core); font-size: var(--size-sm); color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-control);
  box-shadow: var(--shadow-inset); outline: none; transition: var(--transition-control);
}
.ds-input:focus, .ds-input:focus-visible { border-color: var(--being-cyan); box-shadow: var(--shadow-focus); outline: none; }
.ds-input[aria-invalid="true"] { border-color: var(--being-orange); }
.ds-input::placeholder { color: var(--text-muted); }
.ds-textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: var(--leading-normal); }
.ds-select { position: relative; width: 100%; }
.ds-select select { padding-right: 36px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ds-erreur { display: inline-flex; align-items: center; gap: 6px; font: var(--type-caption); color: var(--text-danger); }

/* ---------- FAQ ---------- */
/* La question occupe toute la carte : zone cliquable large, signe + qui pivote à l'ouverture. */
.faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin: calc(-1 * var(--space-5)); padding: var(--space-5); border-radius: inherit;
}
.faq > summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; color: var(--being-violet);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform var(--duration-base) var(--ease-out);
}
.faq[open] > summary::after { transform: rotate(45deg); }
.faq > summary:hover { color: var(--being-violet); }
summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ---------- Photos animées : puces et bouton pause ---------- */
.puce-diapo { display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.puce-diapo::before { content: ""; width: 100%; height: 4px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .34); transition: background var(--duration-fast) var(--ease-out); }
.puce-diapo:hover::before { background: rgb(255 255 255 / .6); }
.puce-diapo[aria-pressed="true"]::before { background: rgb(255 255 255 / .92); }
.bouton-pause {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-right: var(--space-2);
  border: 1px solid rgb(255 255 255 / .45); border-radius: var(--radius-pill);
  background: rgb(19 27 31 / .32); color: #fff; cursor: pointer; transition: var(--transition-control);
}
.bouton-pause:hover { background: rgb(19 27 31 / .55); }
.bouton-pause--coin { position: absolute; right: var(--space-3); bottom: var(--space-3); margin: 0; }
.bouton-pause__lecture, .bouton-pause[aria-pressed="true"] .bouton-pause__pause { display: none; }
.bouton-pause[aria-pressed="true"] .bouton-pause__lecture { display: block; }
[data-en-pause] > img { animation-play-state: paused !important; }
.bouton-pause--clair { margin: 0; border-color: var(--border-default); background: var(--surface-card); color: var(--action-primary); }
.bouton-pause--clair:hover { background: var(--violet-050); }

/* ---------- Bandeau de logos clients : deux rangées qui défilent en sens opposé ---------- */
.bandeau-logos { display: grid; gap: var(--space-4); }
.bandeau-logos__rang {
  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);
}
.bandeau-logos__piste { display: flex; width: max-content; animation: defilement-logos 80s linear infinite; }
.bandeau-logos__rang--inverse .bandeau-logos__piste { animation-direction: reverse; animation-duration: 90s; }
/* La marge droite de chaque liste égale l’écart entre tuiles : la boucle se raccorde sans saut. */
.bandeau-logos__liste { display: flex; gap: var(--space-4); margin: 0; padding: var(--space-1) var(--space-4) var(--space-1) 0; list-style: none; }
.bandeau-logos__tuile {
  flex: none; box-sizing: border-box; width: 184px; height: 96px; padding: var(--space-4) var(--space-5);
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.bandeau-logos__tuile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bandeau-logos:hover .bandeau-logos__piste,
.bandeau-logos:focus-within .bandeau-logos__piste,
.bandeau-logos[data-en-pause] .bandeau-logos__piste { animation-play-state: paused; }
.bandeau-logos__commandes { display: flex; justify-content: center; padding-top: var(--space-2); }
@keyframes defilement-logos { to { transform: translateX(-50%); } }

/* ---------- Carte de la zone d'intervention ---------- */
.carte-zone { position: relative; }
.carte-zone svg { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-xs); }
.carte-zone__dep { fill: #fff; stroke: var(--neutral-200); stroke-width: .6; vector-effect: non-scaling-stroke; transition: fill var(--duration-reveal) var(--ease-out); }
.carte-zone__dep--zone { fill: var(--violet-050); stroke: var(--violet-200); }
.carte-zone.est-zoome .carte-zone__dep--zone { fill: var(--violet-200); stroke: #fff; stroke-width: 1.2; }
.carte-zone__anneau { fill: none; stroke: var(--being-violet); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--duration-reveal) var(--ease-out); }
.carte-zone__anneau--1h { fill: rgb(55 176 201 / .12); stroke: var(--cyan-600); }
.carte-zone__texte { opacity: 0; transition: opacity var(--duration-reveal) var(--ease-out); pointer-events: none; }
.carte-zone.est-zoome .carte-zone__anneau, .carte-zone.est-zoome .carte-zone__texte { opacity: 1; }
.carte-zone__point { fill: var(--being-orange); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.carte-zone__rejouer { position: absolute; right: var(--space-4); bottom: var(--space-4); }

/* ---------- Retour en haut ---------- */
#retour-haut {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 70;
  display: inline-flex; align-items: center; gap: 8px; height: var(--control-h-sm); padding: 0 14px 0 12px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .92); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  color: var(--action-primary); font-family: var(--font-core); font-size: var(--size-sm); font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
#retour-haut.est-visible { opacity: 1; transform: none; pointer-events: auto; }
#retour-haut:hover { background: var(--violet-050); }

@media (max-width: 720px) {
  /* Sur téléphone, la grande marge latérale se réduit à la marge standard, partout où elle sert. */
  :root { --gutter-inline-lg: var(--gutter-inline); }
  h1 { font-size: var(--size-4xl) !important; }
  .bandeau-logos__tuile { width: 140px; height: 76px; padding: var(--space-3) var(--space-4); }
  .bandeau-logos__liste { gap: var(--space-3); padding-right: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  [style*="being-fondu"] { animation: none !important; }
  .bouton-pause { display: none; }
  /* Sans animation, les logos s’affichent en grille fixe. */
  .bandeau-logos__rang { -webkit-mask-image: none; mask-image: none; }
  .bandeau-logos__piste { animation: none !important; width: auto; justify-content: center; }
  .bandeau-logos__liste { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter-inline-lg); }
  .bandeau-logos__liste--copie { display: none; }
}

@media print {
  .entete, footer, #retour-haut { display: none !important; }
}

/* Sections de texte : même bord gauche que les sections larges, mesure limitée. */
.colonne-texte { grid-template-columns: minmax(0, 1fr); }
.colonne-texte > * { max-width: var(--container-md); }

/* Laisse la place au bouton « Haut de page » sous les liens du pied de page. */
footer { padding-bottom: var(--space-20) !important; }

/* =========================================================================
   Partie 3 : classes extraites des pages (13/09/2026).
   Les styles récurrents écrits dans le HTML du prototype vivent ici.
   Un style propre à un seul élément peut rester en ligne dans la page.
   ========================================================================= */

/* ---------- Mise en page ---------- */
/* Section de page, marges verticales et latérales du système */
.section { padding: var(--section-y) var(--gutter-inline-lg); }
.section-serree { padding: var(--space-12) var(--gutter-inline-lg); border-bottom: 1px solid var(--border-subtle); }
/* En-tête de page intérieure : fil d’Ariane, titre, chapô */
.bandeau-page { padding: var(--space-16) var(--gutter-inline-lg); border-bottom: 1px solid var(--border-subtle); }
/* Colonne centrée de largeur standard */
.conteneur { max-width: var(--container-lg); margin: 0 auto; display: grid; }
.conteneur-2col { max-width: var(--container-lg); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 320px), 1fr)); gap: var(--space-10); align-items: start; }
/* Bloc centré d’appel à l’action en bas de page */
.appel { max-width: var(--container-md); margin: 0 auto; display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
.appel__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }
.grille-cartes-sm { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 280px), 1fr)); gap: var(--space-5); }
.rangee { display: flex; gap: var(--space-3); align-items: flex-start; }
.etiquettes { display: flex; gap: 8px; flex-wrap: wrap; }
.en-ligne { display: inline-flex; align-items: center; gap: 8px; }
/* Ligne de liste avec icône à gauche */
.puce { display: inline-flex; gap: 10px; align-items: flex-start; }
.entete-carte { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
/* Contenu d’une carte, étiré sur toute la hauteur de la grille */
.carte-corps { display: grid; align-content: start; height: 100%; }
.sous-liste { display: grid; gap: 6px; padding-left: 28px; }

/* ---------- Composants ---------- */
.fil-ariane { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: var(--type-caption); color: var(--text-muted); }
.fil-ariane__lien, .fil-ariane__lien:hover { color: var(--text-muted); text-decoration: none; }
.faq { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-5); }
.faq__reponse { font: var(--type-body-sm); color: var(--text-muted); margin-top: var(--space-3); }
.photo { width: 100%; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
/* Capture d’une page de document (format A4), posée comme une feuille */
.document-apercu { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: contain; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
/* Texte à gauche, captures de documents en colonne étroite à droite */
.texte-et-documents { grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-12); align-items: start; }
.documents-lateraux { display: grid; gap: var(--space-8); align-content: start; }
.texte-et-documents--gauche { grid-template-columns: 220px minmax(0, 1fr); }
.document-seul { width: min(100%, 220px); margin-top: var(--space-4); }
@media (max-width: 860px) {
  .texte-et-documents, .texte-et-documents--gauche { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .texte-et-documents--gauche > .documents-lateraux { order: 1; }
  .documents-lateraux { grid-template-columns: repeat(2, minmax(0, 200px)); gap: var(--space-5); }
}
.encadre { background: var(--being-ice); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-3); }
.carte-a-venir { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.tableau-bord__ligne { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font: var(--type-body-sm); color: var(--text-body); }
/* Note de travail visible : à traiter avant mise en ligne */
.a-fournir { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--status-warn-bg); border: 1px dashed var(--status-warn); font: var(--type-caption); color: var(--status-warn); }
.a-fournir-bloc { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-sm); background: var(--status-warn-bg); border: 1px dashed var(--status-warn); font: var(--type-caption); color: var(--status-warn); }
.a-fournir__titre { letter-spacing: var(--tracking-caps); }
.badge-neutre { background: var(--neutral-100); color: var(--neutral-700); }
.liste-numerotee__item { display: flex; gap: 12px; font: var(--type-body-sm); color: var(--text-body); }
.numero { font-variant-numeric: tabular-nums; color: var(--being-teal-deep); font-weight: var(--weight-semibold); }
.cellule { padding: 14px var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.cellule-entete { text-align: left; padding: 14px var(--space-4); font: var(--type-label); color: var(--text-strong); border-bottom: 1px solid var(--border-default); }

/* ---------- Titres ---------- */
/* Titre principal d’une page intérieure */
.titre-page { font: var(--type-h1); letter-spacing: var(--tracking-display); max-width: 24ch; }
.titre-1 { font: var(--type-h1); letter-spacing: var(--tracking-display); }
.titre-2 { font: var(--type-h2); letter-spacing: var(--tracking-display); }
.titre-3 { font: var(--type-h3); letter-spacing: var(--tracking-display); }
.titre-4 { font: var(--type-h4); }
.titre-label { font: var(--type-label); font-size: var(--size-md); }
.surtitre-etape { font: var(--type-eyebrow); letter-spacing: var(--tracking-wide); color: var(--being-teal-deep); }

/* ---------- Textes ---------- */
.texte { font: var(--type-body); color: var(--text-body); }
.texte-discret { font: var(--type-body); color: var(--text-muted); }
.texte-sm { font: var(--type-body-sm); color: var(--text-body); }
.texte-sm-discret { font: var(--type-body-sm); color: var(--text-muted); }
.texte-sm-sur-fonce { font: var(--type-body-sm); color: var(--text-on-dark-muted); }
.chapo { font: var(--type-lead); color: var(--text-muted); max-width: 68ch; }
.chapo-sur-fonce { font: var(--type-lead); color: var(--text-on-dark-muted); max-width: 62ch; }
.legende { font: var(--type-caption); color: var(--text-muted); }
.legende-aeree { font: var(--type-caption); line-height: var(--leading-normal); color: var(--text-muted); }
/* Invite en bas de carte (« Le détail de la mission ») */
.lien-carte { font: var(--type-label); color: var(--being-teal-deep); }
.libelle { font: var(--type-label); color: var(--text-strong); }
.libelle-violet { font: var(--type-label); color: var(--being-violet); }
.tableau-reg tbody tr:nth-child(even) { background: var(--neutral-025); }
.tableau-reg tbody tr:last-child .cellule { border-bottom: 0; }
.cellule-ref { white-space: nowrap; }
.cellule-ref span { display: block; }
.pied__lien, .pied__lien:hover { font: var(--type-body-sm); color: var(--text-on-dark-muted); text-decoration: none; }
/* Lien qui enveloppe une carte entière */
.lien-bloc, .lien-bloc:hover { text-decoration: none; color: inherit; display: block; }

/* ---------- Icônes ---------- */
.icone { display: inline-block; flex: 0 0 auto; }
.icone-16 { width: 16px; height: 16px; }
.icone-18 { width: 18px; height: 18px; }
.icone-20 { width: 20px; height: 20px; }
.icone-24 { width: 24px; height: 24px; }
.icone-32 { width: 32px; height: 32px; }
/* Aligne l’icône sur la première ligne de texte */
.icone-puce { margin-top: 4px; }

/* ---------- Fonds et couleurs ---------- */
.fond-page { background: var(--surface-page); }
/* Sur fond glacier, le gris secondaire passe un cran plus foncé pour tenir 4,5:1. */
.fond-ice { background: var(--being-ice); --text-muted: var(--neutral-600); }
.fond-violet { background: var(--being-violet); color: #fff; }
.fond-sombre { background: var(--teal-900); color: #fff; }
.texte-fort { color: var(--text-strong); }
.texte-blanc, .texte-blanc:hover { color: #fff; }
.texte-teal { color: var(--being-teal-deep); }
.texte-accent-sur-fonce { color: var(--text-on-dark-accent); }
.obligatoire { color: var(--being-orange); }
.lien-herite, .lien-herite:hover { color: inherit; }

/* ---------- Utilitaires d’espacement ---------- */
.grille { display: grid; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ---------- Ajustements téléphone des classes du site ---------- */
@media (max-width: 720px) {
  .fil-ariane { font-size: var(--size-xs); }
}
/* Très petits écrans (320 px) : les mots longs des titres (« Accompagnement ») doivent tenir sur la ligne. */
@media (max-width: 360px) {
  h1 { font-size: var(--size-3xl) !important; }
}

/* Champ piège du formulaire : invisible pour un visiteur, visible pour un robot */
.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}