/* Charte SOSCC v1.0 — jetons générés depuis charte/jetons.json le 2026-10-10. Ne pas modifier à la main. */
:root {
  --f-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-poids-titre: 700;
  --f-titre-esp: -0.014em;
  --t-base: 15.5px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 30px;
  --r-bouton: 14px;
  --r-rond: 999px;
  --verre: blur(24px) saturate(190%);
  --trait-l: 1px;
  --u: 8px;
  --cible: 48px;
  --cible-atelier: 80px;
  --mvt: .28s cubic-bezier(.2,.8,.2,1);
  --livree: linear-gradient(180deg, var(--deco-1) 0 30%, transparent 30% 42%, var(--deco-2) 42% 64%, transparent 64% 76%, var(--deco-3) 76% 100%);
  --livree-h: 20px;
  --p-accent: #1F5F88;
  --cible-compacte: 44px;
  --puce-h: 32px;
  --pastille-h: 24px;
  --t-titre-page: 24px;
  --t-titre-section: 20px;
  --t-titre-carte: 16px;
  --t-commande: 15px;
  --t-commande-compacte: 14px;
  --t-petit: 13px;
  --t-etiquette: 12px;
  --onglet-trait: 3px;
  --anneau: 3px;
  --sur-orange: #1A1000;
  --fenetre-largeur: 660px;
  --entete-h: 64px;
  --logo-clair: url("/charte/logos/sos-camping-car-symbole.svg");
  --logo-sombre: url("/charte/logos/sos-camping-car-symbole-sombre.svg");
  --logo-horizontal-clair: url("/charte/logos/sos-camping-car-horizontal.svg");
  --logo-horizontal-sombre: url("/charte/logos/sos-camping-car-horizontal-sombre.svg");
  --logo-horizontal-ratio: 342 / 52;
  --schema: dark;
  --c-fond: #060A10;
  --c-ambiance: radial-gradient(70% 45% at 50% -8%, rgba(80,125,255,.26), transparent 70%), radial-gradient(45% 40% at 0% 60%, rgba(45,110,90,.18), transparent 70%), radial-gradient(45% 40% at 100% 100%, rgba(201,160,100,.14), transparent 70%), linear-gradient(rgba(150,180,255,.045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(150,180,255,.045) 1px, transparent 1px) 0 0 / 28px 28px;
  --c-surface: rgba(22,30,44,.5);
  --c-surface-forte: rgba(26,36,52,.84);
  --c-surface-pleine: #0F1622;
  --c-bord: rgba(165,195,255,.16);
  --c-trait: rgba(165,195,255,.1);
  --c-texte: #E8EEF5;
  --c-texte-2: #A3B1C2;
  --c-texte-3: #7A899B;
  --c-accent: #8EC2FF;
  --c-sur-accent: #04182E;
  --c-accent-doux: rgba(142,194,255,.15);
  --c-focus: #C4DEFF;
  --c-nav: rgba(9,14,24,.62);
  --c-sur-nav: #E8EEF5;
  --c-nav-actif: rgba(142,194,255,.15);
  --c-cadre: #000000;
  --o-1: inset 0 1px 0 rgba(180,205,255,.08), 0 12px 40px rgba(0,0,0,.5);
  --o-2: 0 0 0 1px rgba(165,195,255,.12), 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(90,140,255,.08);
  --n-vert: #34D399;
  --n-vert-fond: rgba(52,211,153,.15);
  --n-vert-encre: #86EBC6;
  --n-orange: #FFA21F;
  --n-orange-fond: rgba(255,162,31,.15);
  --n-orange-encre: #FFC772;
  --n-rouge: #FF5D5D;
  --n-rouge-fond: rgba(255,93,93,.15);
  --n-rouge-encre: #FF9E9E;
  --n-noir-fond: #000000;
  --n-noir-encre: #FFFFFF;
  --n-rayure: #FFD23F;
  --deco-1: #2F7AAB;
  --deco-2: #5E9DC2;
  --deco-3: #A88B55;
  --logo: var(--logo-sombre);
  --logo-horizontal: var(--logo-horizontal-sombre);
}
:root[data-mode="clair"] {
  --schema: light;
  --c-fond: #EDF1EE;
  --c-ambiance: radial-gradient(55% 45% at 6% 0%, rgba(120,180,235,.5), transparent 70%), radial-gradient(45% 40% at 96% 10%, rgba(120,200,170,.38), transparent 70%), radial-gradient(55% 45% at 70% 100%, rgba(232,196,140,.4), transparent 70%), linear-gradient(180deg, #D6E7EF 0, rgba(214,231,239,0) 460px);
  --c-surface: rgba(255,255,255,.58);
  --c-surface-forte: rgba(255,255,255,.86);
  --c-surface-pleine: #FFFFFF;
  --c-bord: rgba(255,255,255,.9);
  --c-trait: rgba(20,36,40,.1);
  --c-texte: #122027;
  --c-texte-2: #44555C;
  --c-texte-3: #63737A;
  --c-accent: #1F5F88;
  --c-sur-accent: #FFFFFF;
  --c-accent-doux: rgba(31,95,136,.12);
  --c-focus: #1F5F88;
  --c-nav: rgba(255,255,255,.55);
  --c-sur-nav: #122027;
  --c-nav-actif: rgba(31,95,136,.12);
  --c-cadre: #1B2328;
  --o-1: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(20,36,40,.06), 0 10px 30px rgba(20,36,40,.09);
  --o-2: 0 2px 6px rgba(20,36,40,.08), 0 26px 64px rgba(20,36,40,.2);
  --n-vert: #16A34A;
  --n-vert-fond: rgba(22,163,74,.14);
  --n-vert-encre: #0B6A30;
  --n-orange: #F29200;
  --n-orange-fond: rgba(242,146,0,.18);
  --n-orange-encre: #7A4200;
  --n-rouge: #DC2626;
  --n-rouge-fond: rgba(220,38,38,.13);
  --n-rouge-encre: #961219;
  --n-noir-fond: #0B0D10;
  --n-noir-encre: #FFFFFF;
  --n-rayure: #FFD23F;
  --deco-1: #1F5F88;
  --deco-2: #5E9DC2;
  --deco-3: #C9A86A;
  --logo: var(--logo-clair);
  --logo-horizontal: var(--logo-horizontal-clair);
}
[data-contexte="client"] {
  --schema: light;
  --c-fond: #EDF1EE;
  --c-ambiance: radial-gradient(55% 45% at 6% 0%, rgba(120,180,235,.5), transparent 70%), radial-gradient(45% 40% at 96% 10%, rgba(120,200,170,.38), transparent 70%), radial-gradient(55% 45% at 70% 100%, rgba(232,196,140,.4), transparent 70%), linear-gradient(180deg, #D6E7EF 0, rgba(214,231,239,0) 460px);
  --c-surface: rgba(255,255,255,.58);
  --c-surface-forte: rgba(255,255,255,.86);
  --c-surface-pleine: #FFFFFF;
  --c-bord: rgba(255,255,255,.9);
  --c-trait: rgba(20,36,40,.1);
  --c-texte: #122027;
  --c-texte-2: #44555C;
  --c-texte-3: #63737A;
  --c-accent: #1F5F88;
  --c-sur-accent: #FFFFFF;
  --c-accent-doux: rgba(31,95,136,.12);
  --c-focus: #1F5F88;
  --c-nav: rgba(255,255,255,.55);
  --c-sur-nav: #122027;
  --c-nav-actif: rgba(31,95,136,.12);
  --c-cadre: #1B2328;
  --o-1: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(20,36,40,.06), 0 10px 30px rgba(20,36,40,.09);
  --o-2: 0 2px 6px rgba(20,36,40,.08), 0 26px 64px rgba(20,36,40,.2);
  --n-vert: #16A34A;
  --n-vert-fond: rgba(22,163,74,.14);
  --n-vert-encre: #0B6A30;
  --n-orange: #F29200;
  --n-orange-fond: rgba(242,146,0,.18);
  --n-orange-encre: #7A4200;
  --n-rouge: #DC2626;
  --n-rouge-fond: rgba(220,38,38,.13);
  --n-rouge-encre: #961219;
  --n-noir-fond: #0B0D10;
  --n-noir-encre: #FFFFFF;
  --n-rayure: #FFD23F;
  --deco-1: #1F5F88;
  --deco-2: #5E9DC2;
  --deco-3: #C9A86A;
  --logo: var(--logo-clair);
  --logo-horizontal: var(--logo-horizontal-clair);
}
@media (prefers-color-scheme: dark) {
  :root[data-contexte="client"]:not([data-mode="clair"]),
  :root:not([data-mode="clair"]) [data-contexte="client"] {
    --schema: dark;
    --c-fond: #060A10;
    --c-ambiance: radial-gradient(70% 45% at 50% -8%, rgba(80,125,255,.26), transparent 70%), radial-gradient(45% 40% at 0% 60%, rgba(45,110,90,.18), transparent 70%), radial-gradient(45% 40% at 100% 100%, rgba(201,160,100,.14), transparent 70%), linear-gradient(rgba(150,180,255,.045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(150,180,255,.045) 1px, transparent 1px) 0 0 / 28px 28px;
    --c-surface: rgba(22,30,44,.5);
    --c-surface-forte: rgba(26,36,52,.84);
    --c-surface-pleine: #0F1622;
    --c-bord: rgba(165,195,255,.16);
    --c-trait: rgba(165,195,255,.1);
    --c-texte: #E8EEF5;
    --c-texte-2: #A3B1C2;
    --c-texte-3: #7A899B;
    --c-accent: #8EC2FF;
    --c-sur-accent: #04182E;
    --c-accent-doux: rgba(142,194,255,.15);
    --c-focus: #C4DEFF;
    --c-nav: rgba(9,14,24,.62);
    --c-sur-nav: #E8EEF5;
    --c-nav-actif: rgba(142,194,255,.15);
    --c-cadre: #000000;
    --o-1: inset 0 1px 0 rgba(180,205,255,.08), 0 12px 40px rgba(0,0,0,.5);
    --o-2: 0 0 0 1px rgba(165,195,255,.12), 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(90,140,255,.08);
    --n-vert: #34D399;
    --n-vert-fond: rgba(52,211,153,.15);
    --n-vert-encre: #86EBC6;
    --n-orange: #FFA21F;
    --n-orange-fond: rgba(255,162,31,.15);
    --n-orange-encre: #FFC772;
    --n-rouge: #FF5D5D;
    --n-rouge-fond: rgba(255,93,93,.15);
    --n-rouge-encre: #FF9E9E;
    --n-noir-fond: #000000;
    --n-noir-encre: #FFFFFF;
    --n-rayure: #FFD23F;
    --deco-1: #2F7AAB;
    --deco-2: #5E9DC2;
    --deco-3: #A88B55;
    --logo: var(--logo-sombre);
    --logo-horizontal: var(--logo-horizontal-sombre);
  }
  }
:root[data-mode="sombre"][data-contexte="client"],
:root[data-mode="sombre"] [data-contexte="client"] {
  --schema: dark;
  --c-fond: #060A10;
  --c-ambiance: radial-gradient(70% 45% at 50% -8%, rgba(80,125,255,.26), transparent 70%), radial-gradient(45% 40% at 0% 60%, rgba(45,110,90,.18), transparent 70%), radial-gradient(45% 40% at 100% 100%, rgba(201,160,100,.14), transparent 70%), linear-gradient(rgba(150,180,255,.045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(150,180,255,.045) 1px, transparent 1px) 0 0 / 28px 28px;
  --c-surface: rgba(22,30,44,.5);
  --c-surface-forte: rgba(26,36,52,.84);
  --c-surface-pleine: #0F1622;
  --c-bord: rgba(165,195,255,.16);
  --c-trait: rgba(165,195,255,.1);
  --c-texte: #E8EEF5;
  --c-texte-2: #A3B1C2;
  --c-texte-3: #7A899B;
  --c-accent: #8EC2FF;
  --c-sur-accent: #04182E;
  --c-accent-doux: rgba(142,194,255,.15);
  --c-focus: #C4DEFF;
  --c-nav: rgba(9,14,24,.62);
  --c-sur-nav: #E8EEF5;
  --c-nav-actif: rgba(142,194,255,.15);
  --c-cadre: #000000;
  --o-1: inset 0 1px 0 rgba(180,205,255,.08), 0 12px 40px rgba(0,0,0,.5);
  --o-2: 0 0 0 1px rgba(165,195,255,.12), 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(90,140,255,.08);
  --n-vert: #34D399;
  --n-vert-fond: rgba(52,211,153,.15);
  --n-vert-encre: #86EBC6;
  --n-orange: #FFA21F;
  --n-orange-fond: rgba(255,162,31,.15);
  --n-orange-encre: #FFC772;
  --n-rouge: #FF5D5D;
  --n-rouge-fond: rgba(255,93,93,.15);
  --n-rouge-encre: #FF9E9E;
  --n-noir-fond: #000000;
  --n-noir-encre: #FFFFFF;
  --n-rayure: #FFD23F;
  --deco-1: #2F7AAB;
  --deco-2: #5E9DC2;
  --deco-3: #A88B55;
  --logo: var(--logo-sombre);
  --logo-horizontal: var(--logo-horizontal-sombre);
}
[data-contexte="atelier"] {
  --f-texte: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
  --t-base: 17px;
  --cible: 56px;
  --cible-atelier: 88px;
}
@media (pointer: coarse) {
  :root {
    --cible-compacte: 48px;
    --puce-h: 48px;
  }
  }
[data-marque="sos-camping-car"] {
  --logo-clair: url("/charte/logos/sos-camping-car-symbole.svg");
  --logo-sombre: url("/charte/logos/sos-camping-car-symbole-sombre.svg");
  --logo-horizontal-clair: url("/charte/logos/sos-camping-car-horizontal.svg");
  --logo-horizontal-sombre: url("/charte/logos/sos-camping-car-horizontal-sombre.svg");
  --logo-horizontal-ratio: 342 / 52;
}
[data-marque="capucine"] {
  --logo-clair: url("/charte/logos/capucine-symbole.png");
  --logo-sombre: url("/charte/logos/capucine-symbole-sombre.png");
  --logo-horizontal-clair: url("/charte/logos/capucine-nom.svg");
  --logo-horizontal-sombre: url("/charte/logos/capucine-nom-sombre.svg");
  --logo-horizontal-ratio: 411 / 138;
}
[data-marque="flex-services"] {
  --logo-clair: url("/charte/logos/flex-services-symbole.svg");
  --logo-sombre: url("/charte/logos/flex-services-symbole-sombre.svg");
  --logo-horizontal-clair: url("/charte/logos/flex-services-horizontal.svg");
  --logo-horizontal-sombre: url("/charte/logos/flex-services-horizontal-sombre.svg");
  --logo-horizontal-ratio: 277 / 52;
}
/* Couleurs de marque : capucine */
:root[data-marque="capucine"] {
  --c-fond: #211C2B;
  --c-ambiance: radial-gradient(62% 44% at 8% -4%, rgba(166,48,201,.62), transparent 70%), radial-gradient(40% 38% at 88% 22%, rgba(222,30,89,.42), transparent 70%), radial-gradient(52% 46% at 100% 100%, rgba(24,118,242,.6), transparent 70%), radial-gradient(40% 36% at 4% 96%, rgba(111,168,255,.3), transparent 70%);
  --c-surface: rgba(20,16,28,.6);
  --c-reflet: rgba(255,255,255,.5);
  --c-reflet-fond: rgba(255,255,255,.12);
  --c-surface-forte: rgba(43,36,55,.8);
  --c-surface-pleine: #2B2437;
  --c-trait: rgba(255,247,239,.14);
  --c-bord: rgba(255,247,239,.16);
  --c-texte: #FFF7EF;
  --c-texte-2: #D8C7D4;
  --c-texte-3: #B9A8B6;
  --c-accent: #6FA8FF;
  --c-sur-accent: #211C2B;
  --c-accent-doux: rgba(111,168,255,.08);
  --c-focus: #FFF7EF;
  --c-nav: rgba(33,28,43,.66);
  --c-sur-nav: #FFF7EF;
  --c-nav-actif: rgba(111,168,255,.08);
  --c-signature: #FF6B93;
}
:root[data-marque="capucine"][data-mode="clair"] {
  --c-fond: #FFF7EF;
  --c-ambiance: radial-gradient(50% 42% at 4% 2%, rgba(255,107,147,.62), transparent 70%), radial-gradient(40% 36% at 94% 14%, rgba(255,199,114,.6), transparent 70%), radial-gradient(48% 44% at 98% 100%, rgba(111,168,255,.6), transparent 70%), radial-gradient(40% 36% at 6% 92%, rgba(166,48,201,.26), transparent 70%);
  --c-surface: rgba(255,255,255,.5);
  --c-reflet: rgba(255,255,255,.95);
  --c-reflet-fond: rgba(255,255,255,.4);
  --c-surface-forte: rgba(255,255,255,.78);
  --c-surface-pleine: #FFFFFF;
  --c-trait: rgba(36,33,42,.12);
  --c-texte: #24212A;
  --c-texte-2: #645865;
  --c-texte-3: #655966;
  --c-accent: #1251A7;
  --c-sur-accent: #FFFFFF;
  --c-accent-doux: rgba(18,81,167,.10);
  --c-focus: #49243F;
  --c-nav: rgba(255,255,255,.6);
  --c-sur-nav: #24212A;
  --c-nav-actif: rgba(18,81,167,.10);
  --c-signature: #B61648;
}
:root[data-marque="capucine"][data-contexte="client"],
:root[data-marque="capucine"] [data-contexte="client"] {
  --c-fond: #FFF7EF;
  --c-ambiance: radial-gradient(50% 42% at 4% 2%, rgba(255,107,147,.62), transparent 70%), radial-gradient(40% 36% at 94% 14%, rgba(255,199,114,.6), transparent 70%), radial-gradient(48% 44% at 98% 100%, rgba(111,168,255,.6), transparent 70%), radial-gradient(40% 36% at 6% 92%, rgba(166,48,201,.26), transparent 70%);
  --c-surface: rgba(255,255,255,.5);
  --c-reflet: rgba(255,255,255,.95);
  --c-reflet-fond: rgba(255,255,255,.4);
  --c-surface-forte: rgba(255,255,255,.78);
  --c-surface-pleine: #FFFFFF;
  --c-trait: rgba(36,33,42,.12);
  --c-texte: #24212A;
  --c-texte-2: #645865;
  --c-texte-3: #655966;
  --c-accent: #1251A7;
  --c-sur-accent: #FFFFFF;
  --c-accent-doux: rgba(18,81,167,.10);
  --c-focus: #49243F;
  --c-nav: rgba(255,255,255,.6);
  --c-sur-nav: #24212A;
  --c-nav-actif: rgba(18,81,167,.10);
  --c-signature: #B61648;
}
@media (prefers-color-scheme: dark) {
  :root[data-marque="capucine"][data-contexte="client"]:not([data-mode="clair"]),
  :root[data-marque="capucine"]:not([data-mode="clair"]) [data-contexte="client"] {
    --c-fond: #211C2B;
    --c-ambiance: radial-gradient(62% 44% at 8% -4%, rgba(166,48,201,.62), transparent 70%), radial-gradient(40% 38% at 88% 22%, rgba(222,30,89,.42), transparent 70%), radial-gradient(52% 46% at 100% 100%, rgba(24,118,242,.6), transparent 70%), radial-gradient(40% 36% at 4% 96%, rgba(111,168,255,.3), transparent 70%);
    --c-surface: rgba(20,16,28,.6);
    --c-reflet: rgba(255,255,255,.5);
    --c-reflet-fond: rgba(255,255,255,.12);
    --c-surface-forte: rgba(43,36,55,.8);
    --c-surface-pleine: #2B2437;
    --c-trait: rgba(255,247,239,.14);
    --c-bord: rgba(255,247,239,.16);
    --c-texte: #FFF7EF;
    --c-texte-2: #D8C7D4;
    --c-texte-3: #B9A8B6;
    --c-accent: #6FA8FF;
    --c-sur-accent: #211C2B;
    --c-accent-doux: rgba(111,168,255,.08);
    --c-focus: #FFF7EF;
    --c-nav: rgba(33,28,43,.66);
    --c-sur-nav: #FFF7EF;
    --c-nav-actif: rgba(111,168,255,.08);
    --c-signature: #FF6B93;
  }
  }
:root[data-marque="capucine"][data-mode="sombre"][data-contexte="client"],
:root[data-marque="capucine"][data-mode="sombre"] [data-contexte="client"] {
  --c-fond: #211C2B;
  --c-ambiance: radial-gradient(62% 44% at 8% -4%, rgba(166,48,201,.62), transparent 70%), radial-gradient(40% 38% at 88% 22%, rgba(222,30,89,.42), transparent 70%), radial-gradient(52% 46% at 100% 100%, rgba(24,118,242,.6), transparent 70%), radial-gradient(40% 36% at 4% 96%, rgba(111,168,255,.3), transparent 70%);
  --c-surface: rgba(20,16,28,.6);
  --c-reflet: rgba(255,255,255,.5);
  --c-reflet-fond: rgba(255,255,255,.12);
  --c-surface-forte: rgba(43,36,55,.8);
  --c-surface-pleine: #2B2437;
  --c-trait: rgba(255,247,239,.14);
  --c-bord: rgba(255,247,239,.16);
  --c-texte: #FFF7EF;
  --c-texte-2: #D8C7D4;
  --c-texte-3: #B9A8B6;
  --c-accent: #6FA8FF;
  --c-sur-accent: #211C2B;
  --c-accent-doux: rgba(111,168,255,.08);
  --c-focus: #FFF7EF;
  --c-nav: rgba(33,28,43,.66);
  --c-sur-nav: #FFF7EF;
  --c-nav-actif: rgba(111,168,255,.08);
  --c-signature: #FF6B93;
}
[data-marque="capucine"] .logo-marque { width: auto; height: 3.4em; aspect-ratio: var(--logo-horizontal-ratio); background: var(--logo-horizontal) left center / contain no-repeat; }
[data-marque="capucine"] .logo-horizontal { height: 3.4em; }
[data-marque="capucine"] .cc-entete .logo-horizontal, [data-marque="capucine"] [data-surface="demo"] .barre-marque .logo-horizontal { height: 54px; }
@media (max-width: 720px) {
  [data-marque="capucine"] .cc-entete .logo-horizontal, [data-marque="capucine"] [data-surface="demo"] .barre-marque .logo-horizontal { height: 42px; }
  }
[data-marque="capucine"] .cc-carte h3 { color: var(--c-signature); }
@media print {
  :root, [data-contexte] {
    --schema: light;
    --c-fond: #EDF1EE;
    --c-ambiance: radial-gradient(55% 45% at 6% 0%, rgba(120,180,235,.5), transparent 70%), radial-gradient(45% 40% at 96% 10%, rgba(120,200,170,.38), transparent 70%), radial-gradient(55% 45% at 70% 100%, rgba(232,196,140,.4), transparent 70%), linear-gradient(180deg, #D6E7EF 0, rgba(214,231,239,0) 460px);
    --c-surface: rgba(255,255,255,.58);
    --c-surface-forte: rgba(255,255,255,.86);
    --c-surface-pleine: #FFFFFF;
    --c-bord: rgba(255,255,255,.9);
    --c-trait: rgba(20,36,40,.1);
    --c-texte: #122027;
    --c-texte-2: #44555C;
    --c-texte-3: #63737A;
    --c-accent: #1F5F88;
    --c-sur-accent: #FFFFFF;
    --c-accent-doux: rgba(31,95,136,.12);
    --c-focus: #1F5F88;
    --c-nav: rgba(255,255,255,.55);
    --c-sur-nav: #122027;
    --c-nav-actif: rgba(31,95,136,.12);
    --c-cadre: #1B2328;
    --o-1: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(20,36,40,.06), 0 10px 30px rgba(20,36,40,.09);
    --o-2: 0 2px 6px rgba(20,36,40,.08), 0 26px 64px rgba(20,36,40,.2);
    --n-vert: #16A34A;
    --n-vert-fond: rgba(22,163,74,.14);
    --n-vert-encre: #0B6A30;
    --n-orange: #F29200;
    --n-orange-fond: rgba(242,146,0,.18);
    --n-orange-encre: #7A4200;
    --n-rouge: #DC2626;
    --n-rouge-fond: rgba(220,38,38,.13);
    --n-rouge-encre: #961219;
    --n-noir-fond: #0B0D10;
    --n-noir-encre: #FFFFFF;
    --n-rayure: #FFD23F;
    --deco-1: #1F5F88;
    --deco-2: #5E9DC2;
    --deco-3: #C9A86A;
    --logo: var(--logo-clair);
    --logo-horizontal: var(--logo-horizontal-clair);
  }
  }

/* ==========================================================================
   Charte SOSCC v1.0 — base commune (toutes les surfaces)
   Ne contient aucune couleur de marque en dur : tout vient de jetons.json.
   Contextes : <html> sans attribut = outil interne (sombre) ;
               data-contexte="client"  = suit le réglage clair/sombre de l'appareil ;
               data-contexte="atelier" = gros boutons, police lisible.
   ========================================================================== */
:root {
  --e-1: calc(var(--u) * .5);
  --e-2: var(--u);
  --e-3: calc(var(--u) * 1.5);
  --e-4: calc(var(--u) * 2);
  --e-5: calc(var(--u) * 3);
  --e-6: calc(var(--u) * 4);
  --e-7: calc(var(--u) * 6);
  --e-8: calc(var(--u) * 9);
  --largeur: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: var(--schema); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-ambiance), var(--c-fond);
  background-attachment: fixed;
  color: var(--c-texte);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 760px) { body { background-attachment: scroll; } }
[data-contexte] { color: var(--c-texte); color-scheme: var(--schema); font-family: var(--f-texte); }
h1, h2, h3, h4, h5 {
  font-family: var(--f-titre);
  font-weight: var(--f-poids-titre);
  letter-spacing: var(--f-titre-esp);
  line-height: 1.12;
  text-wrap: balance;
  color: var(--c-texte);
}
a { color: var(--c-accent); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
::selection { background: var(--c-accent-doux); }
.chiffres, table { font-variant-numeric: tabular-nums; }
.discret { color: var(--c-texte-2); }
.tres-discret { color: var(--c-texte-3); font-size: .875em; }
.sr-only, .visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Surfaces */
.verre {
  background: var(--c-surface);
  border: var(--trait-l) solid var(--c-bord);
  -webkit-backdrop-filter: var(--verre); backdrop-filter: var(--verre);
  border-radius: var(--r-l);
  background-image: linear-gradient(155deg, var(--c-reflet-fond, transparent), transparent 45%);
  box-shadow: var(--o-1), inset 0 1.5px 0 var(--c-reflet, transparent);
}
.verre-fort { background: var(--c-surface-forte); }

/* Boutons */
.btn {
  min-height: var(--cible);
  padding: 0 var(--e-5);
  border-radius: var(--r-bouton);
  border: var(--trait-l) solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font: inherit; font-weight: 700; line-height: 1.15; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform var(--mvt), background-color var(--mvt), box-shadow var(--mvt), filter var(--mvt);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(1.06); }
.btn-principal, .btn.primary, .btn.primaire { background: var(--c-accent); color: var(--c-sur-accent); }
.btn-second, .btn.secondary, .btn.secondaire { background: var(--c-accent-doux); color: var(--c-accent); }
.btn-neutre { background: var(--c-surface-forte); color: var(--c-texte); border-color: var(--c-trait); }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Niveaux : couleur + icône + mot, jamais la couleur seule */
.niv {
  --niv: var(--n-vert); --niv-fond: var(--n-vert-fond); --niv-encre: var(--n-vert-encre);
  position: relative; display: inline-flex; align-items: center; gap: .45em;
  padding: .28em .8em .28em .32em; border-radius: var(--r-bouton);
  background: var(--niv-fond); color: var(--niv-encre);
  font-weight: 700; font-size: .875em; line-height: 1.2; white-space: nowrap;
}
.niv-orange { --niv: var(--n-orange); --niv-fond: var(--n-orange-fond); --niv-encre: var(--n-orange-encre); }
.niv-rouge { --niv: var(--n-rouge); --niv-fond: var(--n-rouge-fond); --niv-encre: var(--n-rouge-encre); }
.niv-noir { --niv: var(--n-rayure); --niv-fond: var(--n-noir-fond); --niv-encre: var(--n-noir-encre); padding-left: .9em; overflow: hidden; }
.niv-noir::before, .rayure-danger::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: .5em;
  background: repeating-linear-gradient(-45deg, var(--n-rayure) 0 4px, #000 4px 8px);
}

/* Logo-monogramme (marque blanche) */
.logo-mono {
  display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; flex: none;
  border-radius: calc(var(--r-m) * .75);
  background: var(--c-accent); color: var(--c-sur-accent);
  font-family: var(--f-titre); font-weight: 800; letter-spacing: -.02em;
}

/* Logo de la marque : un seul jeton (--logo), jamais de SVG recopié dans les pages */
.logo-marque { display: inline-block; flex: none; width: 2.4em; aspect-ratio: 1; background: var(--logo) center / contain no-repeat; vertical-align: middle; }
.brand-mark > .logo-marque, .admin-brand-mark > .logo-marque, .brand-logo > .logo-marque { width: 100%; height: 100%; }

/* Logo horizontal (symbole + nom) de la marque : jeton --logo-horizontal */
.logo-horizontal { display: inline-block; flex: none; height: 2.2em; aspect-ratio: var(--logo-horizontal-ratio); background: var(--logo-horizontal) left center / contain no-repeat; vertical-align: middle; }

.logo-horizontal + .module { margin-left: .7em; padding-left: .7em; border-left: var(--trait-l) solid var(--c-trait); font-family: var(--f-titre); font-weight: 700; letter-spacing: -.01em; }

/* Champs de formulaire */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select, textarea {
  font: inherit; color: var(--c-texte);
  background: var(--c-surface-forte);
  border: var(--trait-l) solid var(--c-trait);
  border-radius: var(--r-m);
  min-height: var(--cible);
  padding: .6em .9em;
}
textarea { min-height: 7em; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: transparent; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-accent); width: 1.25em; height: 1.25em; }
::placeholder { color: var(--c-texte-3); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: #fff !important; color: #111 !important; }
}