/* D2S SECURE — feuille de style unique. Charte alignée sur CAPILOG (voir CLAUDE.md, section 3). */

/* ---------- Polices auto-hébergées (woff2 dans /assets/fonts/) ---------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/oswald-500.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/oswald-600.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }

/* ---------- Jetons ---------- */
:root {
  /* Charte */
  --rouge: #B8121F;        /* rouge officiel CAPILOG : 6,68:1 sur blanc */
  --rouge-clair: #ED4552;  /* même teinte éclaircie : texte sur fond noir uniquement, 5,16:1 sur #0D0D0D, ≥ 4:1 sur le poster du héros */
  --gris-logo: #9A9DA3;    /* décor (tirets, filets) et texte sur fond noir uniquement : 2,72:1 sur blanc */
  --gris-texte: #6C6E72;   /* même teinte assombrie : petit texte gris sur fond clair, 5,11:1 sur blanc, 4,64:1 sur #F4F4F4 */
  --noir: #0D0D0D;
  --gris-fond: #F4F4F4;
  --filet: #D0D0D0;
  --blanc: #FFFFFF;

  /* Usages */
  --texte: #111111;
  --texte-2: #404040;
  --sur-noir: #D9D9D9;
  --noir-2: #1A1A1A;
  --champ: #767676;        /* bordure des champs de formulaire : 3:1 minimum requis */
  --rouge-survol: color-mix(in srgb, var(--rouge) 75%, #000);


  --font-title: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-text: "Barlow", "Segoe UI", Arial, sans-serif;

  --gutter: 20px;
  --section-y: 72px;
  --max: 1200px;
}
@media (min-width: 768px)  { :root { --gutter: 40px; --section-y: 96px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; --section-y: 120px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--blanc); color: var(--texte); font-family: var(--font-text); font-size: 17px; line-height: 1.6; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--rouge); }
a:hover { color: var(--rouge-survol); }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .cta-band :focus-visible { outline-color: var(--blanc); }
h1, h2, h3 { font-family: var(--font-title); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: .01em; }
h1, h2 { text-transform: uppercase; }
h1 { font-size: clamp(34px, 4.2vw, 48px); }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
h3, .h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; text-transform: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--gris { background: var(--gris-fond); }
.section + .section:not(.section--gris) { border-top: 1px solid var(--filet); }
.section--gris + .section, .section + .section--gris { border-top: 0; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack--sm { gap: 12px; }
.stack--lg { gap: 48px; }

/* Surtitre, filet rouge, chapô */
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gris-texte); }
.filet-rouge { width: 64px; height: 2px; background: var(--rouge); border: 0; margin: 0; }
.lead { font-size: 19px; color: var(--texte-2); max-width: 62ch; }
.muted { color: var(--gris-texte); }
.small { font-size: 14px; }
.section-head { display: flex; flex-direction: column; gap: 14px; }
.placeholder { background: #FFF3CD; color: #5C4700; padding: 0 4px; font-style: normal; font-weight: inherit; }
.hero .placeholder, .site-footer .placeholder, .cta-band .placeholder { background: #3A3000; color: #FFE58A; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--blanc); color: var(--noir); padding: 12px 16px; font-weight: 600; }
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; font-family: var(--font-text); font-size: 17px; font-weight: 600; text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer; line-height: 1.2; }
.btn--rouge { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }
.btn--rouge:hover { background: var(--rouge-survol); border-color: var(--rouge-survol); color: var(--blanc); }
.btn--contour { border-color: var(--blanc); color: var(--blanc); background: transparent; }
.btn--contour:hover { background: var(--blanc); color: var(--noir); }
.btn--blanc { background: var(--blanc); color: var(--texte); border-color: var(--blanc); }
.btn--blanc:hover { background: var(--gris-fond); color: var(--texte); }
.btn--noir { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.btn--noir:hover { background: var(--noir-2); color: var(--blanc); }
.btn--contour-noir { border-color: var(--noir); color: var(--noir); background: transparent; }
.btn--contour-noir:hover { background: var(--noir); color: var(--blanc); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }
@media (max-width: 599px) { .btn-row .btn { width: 100%; } }

/* ---------- Barre de navigation noire ---------- */
.site-header { background: var(--noir); color: var(--blanc); border-bottom: 2px solid var(--rouge); position: sticky; top: 0; z-index: 50; }
.site-header__inner { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 10px 12px 10px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; min-height: 48px; }
.brand__logo { height: 44px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.btn-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; color: var(--blanc); cursor: pointer; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.main-nav { width: 100%; }
.main-nav ul { list-style: none; display: flex; flex-direction: column; padding: 8px 0 16px; }
.main-nav a { display: flex; align-items: center; min-height: 48px; color: var(--blanc); text-decoration: none; font-size: 17px; font-weight: 500; border-bottom: 1px solid #333333; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--rouge-clair); }
.main-nav a.btn { justify-content: center; margin-top: 16px; border-bottom: 0; font-weight: 600; }
.main-nav a.btn:hover, .main-nav a.btn[aria-current="page"] { color: var(--blanc); }
/* Menu mobile fermé par défaut, ouvert par le bouton burger (main.js, chargé en defer).
   Sans JavaScript, assets/css/sans-js.css (chargée dans <noscript>) l'affiche ouvert. */
.main-nav { display: none; }
.main-nav.is-open { display: block; }
/* Téléphone du menu : discret, pas de couleur */
.main-nav a.main-nav__tel { color: var(--gris-logo); font-weight: 500; }
.main-nav a.main-nav__tel:hover { color: var(--blanc); }

/* Menu complet à partir de 1200 px (logo + 5 rubriques + téléphone + bouton) ; en dessous : burger */
@media (min-width: 1200px) {
  .site-header__inner { padding: 14px var(--gutter); flex-wrap: nowrap; }
  .brand__logo { height: 56px; }
  .header-actions { display: none; }
  .main-nav { display: block; width: auto; }
  .main-nav ul { flex-direction: row; align-items: center; gap: 26px; padding: 0; }
  .main-nav a { border-bottom: 0; font-size: 16px; }
  .main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rouge-clair); color: var(--blanc); }
  .main-nav a.main-nav__tel { font-size: 15px; padding-left: 26px; border-left: 1px solid #333333; }
  .main-nav a.btn { margin-top: 0; padding: 10px 20px; box-shadow: none; }
}

/* ---------- Barre fixe en bas d'écran (mobile et tablette) ---------- */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--rouge); padding-bottom: env(safe-area-inset-bottom); background: var(--noir); }
.barre-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-size: 17px; font-weight: 600; text-decoration: none; color: var(--blanc); }
.barre-mobile__appel { background: var(--noir); }
.barre-mobile__devis { background: var(--rouge); }
.barre-mobile a:hover { color: var(--blanc); text-decoration: underline; }
body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
@media (min-width: 1200px) { .barre-mobile { display: none; } body { padding-bottom: 0; } }

/* ---------- Héros de l'accueil : une seule zone sombre, travelling de nuit en canvas (scenes.js) ---------- */
.hero { position: relative; background: var(--noir); color: var(--blanc); min-height: 80vh; min-height: min(80svh, 880px); display: flex; align-items: center; overflow: hidden; }
.hero__fond { position: absolute; inset: 0; }
.hero__fond img, .hero__fond canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__canvas { opacity: 0; transition: opacity .6s ease; }
.hero__canvas.est-pret { opacity: 1; }
/* Voile : dégradé sombre depuis la gauche. Opaque à 90 % sur toute la largeur du bloc de texte
   (bord gauche du conteneur + 700 px), puis léger vers la droite (25 %). Sur mobile, le texte occupe
   toute la largeur : le point d'arrêt dépasse l'écran et le voile reste à 90 % partout.
   Contrastes mesurés sur le travelling avec dev/mesure-travelling.html. */
.hero__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 13, 13, var(--voile-opacite)) 0, rgba(13, 13, 13, var(--voile-opacite)) var(--voile-arret), rgba(13, 13, 13, var(--voile-droite)) 100%); --voile-opacite: .9; --voile-droite: .25; --voile-arret: calc(max(var(--gutter), (100% - var(--max)) / 2) + 700px); }
/* Légende de la scène en cours (décorative, non cliquable) */
/* Fond sombre léger : la légende reste lisible même quand un agent, un chien ou une barrière passe dessous */
.hero__scene { position: absolute; right: calc(var(--gutter) - 10px); bottom: 14px; padding: 6px 10px; background: rgba(13, 13, 13, .85); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .8); pointer-events: none; user-select: none; }
.hero__contenu { position: relative; display: flex; flex-direction: column; gap: 20px; padding-top: 48px; padding-bottom: 48px; }
.hero__surtitre { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hero h1 { font-size: clamp(26px, 3.2vw, 45px); line-height: 1.15; max-width: 24ch; }
.hero__accent { display: block; color: var(--rouge-clair); }
.hero__lead { font-size: 18px; color: var(--sur-noir); max-width: 60ch; }
@media (min-width: 768px) { .hero h1 { max-width: none; } }
/* Mobile : le texte commence en haut (plus de vide noir au-dessus), hauteur selon le contenu.
   L'image fixe (scène en bande dans le bas de l'image) apparaît sous les boutons : voile à 90 % derrière le texte,
   puis plus léger sur les 170 px du bas, où il n'y a aucun texte. Contraste mesuré par dev/mesure-hero-mobile.html. */
@media (max-width: 767px) {
  .hero { min-height: 0; align-items: flex-start; }
  .hero__contenu { padding-top: 32px; padding-bottom: 200px; }
  .hero__fond img { object-position: center bottom; }
  .hero__voile { background: linear-gradient(180deg, rgba(13, 13, 13, .9) 0, rgba(13, 13, 13, .9) calc(100% - 190px), rgba(13, 13, 13, .35) calc(100% - 40px), rgba(13, 13, 13, .35) 100%); }
}
/* Bouton téléphone du héros masqué tant que la barre fixe « Appeler | Devis » est affichée (moins de 1200 px) */
@media (max-width: 1199px) { .hero .btn--contour { display: none; } }

/* ---------- Bandeau clair de réassurance ---------- */
.reassurance { padding: 32px 0; border-bottom: 1px solid var(--filet); }
@media (min-width: 900px) { .kv.kv--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; } }
.reassurance dd { font-size: 16px; }

/* ---------- Arguments « Pourquoi D2S » ---------- */
.arguments { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { .arguments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.argument { border-top: 2px solid var(--rouge); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.argument p { color: var(--texte-2); }

/* ---------- Bandeau final court (aplat sombre) ---------- */
.cta-band { background: var(--noir); color: var(--blanc); padding: 48px 0; border-bottom: 1px solid #333333; }
.cta-band__inner { display: flex; flex-direction: column; gap: 20px; }
.cta-band h2 { font-size: clamp(24px, 2.6vw, 34px); }
@media (min-width: 1024px) { .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } .cta-band .btn-row { flex-shrink: 0; } }

/* ---------- Zone de titre des pages intérieures (blanche) ---------- */
.page-hero { padding: 56px 0 48px; border-bottom: 1px solid var(--filet); }
.page-hero .stack { gap: 16px; }
@media (min-width: 768px) { .page-hero { padding: 80px 0 64px; } }

/* ---------- Formes décoratives des zones de titre (pages intérieures) ---------- */
/* Position : moitié droite de la zone, hors du bloc de texte. main.js masque en plus toute forme
   qui toucherait du texte, et gère le mouvement « carrés et ronds » (ordinateur uniquement). */
.page-hero--deco { position: relative; overflow: hidden; }
.page-hero--deco .container { position: relative; z-index: 1; }
.deco { position: absolute; pointer-events: none; z-index: 0; }
.forme { position: absolute; display: block; pointer-events: none; }
.forme__in { display: block; width: 100%; height: 100%; box-sizing: border-box; transform: rotate(var(--rot-fin, 0deg));
  animation: forme-entree 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes forme-entree {
  from { opacity: 0; transform: translate3d(0, var(--glisse, 24px), 0) rotate(var(--rot-depart, 0deg)); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--rot-fin, 0deg)); }
}
/* Décalage de 0,12 s d'une forme à l'autre, glissement de 20 à 30 px */
.deco > :nth-child(1) .forme__in { animation-delay: 0s;   --glisse: 26px; }
.deco > :nth-child(2) .forme__in { animation-delay: .12s; --glisse: 22px; }
.deco > :nth-child(3) .forme__in { animation-delay: .24s; --glisse: 28px; }
.deco > :nth-child(4) .forme__in { animation-delay: .36s; --glisse: 20px; }
.deco > .forme--s .forme__in { animation-delay: .6s; --glisse: 16px; }
/* Motif du logo CAPILOG : contours uniquement (aucune forme pleine). Traits épais pour les 4 formes principales. */
.forme--carre-rouge .forme__in  { border: 7px solid var(--rouge); --rot-depart: 20deg; --rot-fin: 38deg; }
.forme--cercle .forme__in       { border: 6px solid var(--gris-logo); border-radius: 50%; }
.forme--petit-cercle .forme__in { border: 4px solid var(--gris-logo); border-radius: 50%; }
.forme--carre-noir .forme__in   { border: 5px solid var(--noir); --rot-depart: -20deg; --rot-fin: -38deg; }
/* Formes secondaires : petites, trait fin, 12 à 40 % d'opacité, en complément (jamais à la place des principales) */
.forme--s .forme__in { border: 1.5px solid var(--gris-logo); }
.forme--s1 .forme__in, .forme--s3 .forme__in, .forme--s5 .forme__in, .forme--s7 .forme__in, .forme--s9 .forme__in { --rot-fin: 38deg; }
.forme--s2 .forme__in, .forme--s4 .forme__in, .forme--s6 .forme__in, .forme--s8 .forme__in { border-radius: 50%; }
.forme--s1 .forme__in, .forme--s7 .forme__in { border-color: var(--rouge); }
.forme--s3 .forme__in, .forme--s9 .forme__in { border-color: var(--noir); --rot-fin: -38deg; }
.forme--s1 { opacity: .35; } .forme--s2 { opacity: .25; } .forme--s3 { opacity: .2; }  .forme--s4 { opacity: .15; } .forme--s5 { opacity: .3; }
.forme--s6 { opacity: .4; }  .forme--s7 { opacity: .2; }  .forme--s8 { opacity: .12; } .forme--s9 { opacity: .28; }
.deco .forme.forme--masquee { display: none; }

/* Mobile et tablette : 2 petites formes dans le coin haut droit (au-dessus du surtitre),
   animation d'ouverture seulement */
.deco { top: 10px; right: var(--gutter); width: 96px; height: 44px; }
.deco .forme { display: none; }
.deco .forme--carre-rouge  { display: block; width: 22px; height: 22px; top: 11px; right: 8px; }
.deco .forme--petit-cercle { display: block; width: 24px; height: 24px; top: 10px; right: 52px; }
.deco .forme--carre-rouge .forme__in { border-width: 3px; }
.deco .forme--petit-cercle .forme__in { border-width: 3px; }

/* Ordinateur : 4 formes principales + 9 secondaires dans toute la moitié droite, du haut au bas du bloc de texte */
@media (min-width: 1024px) {
  .page-hero--deco:not(.page-hero--badge) .stack > * { max-width: 640px; }
  .deco { width: auto; height: auto; top: 24px; bottom: 24px;
    left: max(55%, calc(max(var(--gutter), (100% - var(--max)) / 2) + 680px));
    right: max(var(--gutter), calc((100% - var(--max)) / 2)); }
  .deco .forme { display: block; right: auto; }
  /* Hauteur minimale de la zone de titre (titre seul, ex. Mentions légales) pour que les formes ne se chevauchent pas */
  .page-hero--deco { min-height: 300px; }
  /* Dispositions en miroir (gauche-droite, haut-bas) : une disposition différente par page, même répartition */
  .deco--h { transform: scaleX(-1); }
  .deco--v { transform: scaleY(-1); }
  .deco--h.deco--v { transform: scale(-1, -1); }
  /* Tailles ordinateur */
  .deco .forme--carre-rouge  { width: 140px; height: 140px; }
  .deco .forme--cercle       { width: 170px; height: 170px; }
  .deco .forme--petit-cercle { width: 58px;  height: 58px; }
  .deco .forme--carre-noir   { width: 64px;  height: 64px; }
  .deco .forme--carre-rouge .forme__in { border-width: 7px; }
  .deco .forme--petit-cercle .forme__in { border-width: 4px; }
  .deco .forme--s1 { width: 22px; height: 22px; } .deco .forme--s2 { width: 18px; height: 18px; } .deco .forme--s3 { width: 16px; height: 16px; }
  .deco .forme--s4 { width: 32px; height: 32px; } .deco .forme--s5 { width: 26px; height: 26px; } .deco .forme--s6 { width: 14px; height: 14px; }
  .deco .forme--s7 { width: 18px; height: 18px; } .deco .forme--s8 { width: 24px; height: 24px; } .deco .forme--s9 { width: 20px; height: 20px; }
  /* 3 dispositions fixes (en % de la zone décorée), attribuées selon la page ; principales bien espacées */
  .deco--a .forme--carre-rouge { top: 6%; left: 4%; }   .deco--a .forme--cercle { top: 34%; left: 52%; } .deco--a .forme--petit-cercle { top: 72%; left: 20%; } .deco--a .forme--carre-noir { top: 8%; left: 76%; }
  .deco--a .forme--s1 { top: 12%; left: 40%; } .deco--a .forme--s2 { top: 4%; left: 62%; }  .deco--a .forme--s3 { top: 44%; left: 94%; } .deco--a .forme--s4 { top: 58%; left: 36%; } .deco--a .forme--s5 { top: 64%; left: 6%; }
  .deco--a .forme--s6 { top: 92%; left: 46%; } .deco--a .forme--s7 { top: 90%; left: 90%; } .deco--a .forme--s8 { top: 50%; left: 26%; } .deco--a .forme--s9 { top: 24%; left: 60%; }
  .deco--b .forme--carre-rouge { top: 42%; left: 58%; } .deco--b .forme--cercle { top: 4%; left: 8%; }   .deco--b .forme--petit-cercle { top: 10%; left: 72%; } .deco--b .forme--carre-noir { top: 70%; left: 30%; }
  .deco--b .forme--s1 { top: 8%; left: 50%; }  .deco--b .forme--s2 { top: 30%; left: 92%; } .deco--b .forme--s3 { top: 72%; left: 6%; }  .deco--b .forme--s4 { top: 50%; left: 44%; } .deco--b .forme--s5 { top: 88%; left: 88%; }
  .deco--b .forme--s6 { top: 64%; left: 20%; } .deco--b .forme--s7 { top: 90%; left: 54%; } .deco--b .forme--s8 { top: 26%; left: 64%; } .deco--b .forme--s9 { top: 4%; left: 92%; }
  .deco--c .forme--carre-rouge { top: 8%; left: 48%; }  .deco--c .forme--cercle { top: 38%; left: 4%; }  .deco--c .forme--petit-cercle { top: 74%; left: 72%; } .deco--c .forme--carre-noir { top: 62%; left: 42%; }
  .deco--c .forme--s1 { top: 10%; left: 14%; } .deco--c .forme--s2 { top: 18%; left: 34%; } .deco--c .forme--s3 { top: 14%; left: 88%; } .deco--c .forme--s4 { top: 44%; left: 84%; } .deco--c .forme--s5 { top: 64%; left: 60%; }
  .deco--c .forme--s6 { top: 22%; left: 4%; }  .deco--c .forme--s7 { top: 86%; left: 92%; } .deco--c .forme--s8 { top: 6%; left: 30%; }  .deco--c .forme--s9 { top: 90%; left: 58%; }
  /* Pages avec badge (prestations) : mêmes formes, mêmes tailles. Le badge occupe le milieu droit de la zone :
     petites formes dans la bande du haut (repère : haut de zone), grandes dans la bande du bas (repère : bas de
     zone), zone de titre plus haute pour leur faire place. p4 à p6 : p1 à p3 en miroir gauche-droite. */
  .page-hero--badge { padding-bottom: 144px; }
  .deco--p4 { transform: scaleX(-1); }
  .deco--p5 { transform: scaleX(-1); }
  .deco--p6 { transform: scaleX(-1); }
  .deco--badge .forme { top: auto; }
  .deco--p1 .forme--carre-noir, .deco--p4 .forme--carre-noir { top: 3px; left: 6%; }     .deco--p1 .forme--petit-cercle, .deco--p4 .forme--petit-cercle { top: 2px; left: 40%; }
  .deco--p1 .forme--carre-rouge, .deco--p4 .forme--carre-rouge { bottom: 14px; left: 8%; } .deco--p1 .forme--cercle, .deco--p4 .forme--cercle { bottom: -8px; left: 52%; }
  .deco--p1 .forme--s1, .deco--p4 .forme--s1 { top: 10px; left: 24%; }     .deco--p1 .forme--s2, .deco--p4 .forme--s2 { top: 30px; left: 62%; }
  .deco--p1 .forme--s3, .deco--p4 .forme--s3 { top: 4px; left: 80%; }      .deco--p1 .forme--s4, .deco--p4 .forme--s4 { bottom: 40px; left: 38%; }
  .deco--p1 .forme--s5, .deco--p4 .forme--s5 { bottom: 120px; left: 94%; } .deco--p1 .forme--s6, .deco--p4 .forme--s6 { bottom: 20px; left: 44%; }
  .deco--p1 .forme--s7, .deco--p4 .forme--s7 { top: 44px; left: 90%; }     .deco--p1 .forme--s8, .deco--p4 .forme--s8 { bottom: 80px; left: 88%; }
  .deco--p1 .forme--s9, .deco--p4 .forme--s9 { bottom: 140px; left: 2%; }
  .deco--p2 .forme--carre-noir, .deco--p5 .forme--carre-noir { top: 8px; left: 64%; }  .deco--p2 .forme--petit-cercle, .deco--p5 .forme--petit-cercle { top: 0; left: 14%; }
  .deco--p2 .forme--cercle, .deco--p5 .forme--cercle { bottom: -10px; left: 4%; }       .deco--p2 .forme--carre-rouge, .deco--p5 .forme--carre-rouge { bottom: 12px; left: 58%; }
  .deco--p2 .forme--s1, .deco--p5 .forme--s1 { top: 20px; left: 40%; }    .deco--p2 .forme--s2, .deco--p5 .forme--s2 { top: 6px; left: 88%; }
  .deco--p2 .forme--s3, .deco--p5 .forme--s3 { bottom: 30px; left: 44%; } .deco--p2 .forme--s4, .deco--p5 .forme--s4 { bottom: 110px; left: 92%; }
  .deco--p2 .forme--s5, .deco--p5 .forme--s5 { top: 36px; left: 2%; }     .deco--p2 .forme--s6, .deco--p5 .forme--s6 { bottom: 150px; left: 50%; }
  .deco--p2 .forme--s7, .deco--p5 .forme--s7 { bottom: 16px; left: 92%; } .deco--p2 .forme--s8, .deco--p5 .forme--s8 { top: 40px; left: 30%; }
  .deco--p2 .forme--s9, .deco--p5 .forme--s9 { bottom: 60px; left: 40%; }
  .deco--p3 .forme--cercle, .deco--p6 .forme--cercle { bottom: -12px; left: 30%; }      .deco--p3 .forme--carre-rouge, .deco--p6 .forme--carre-rouge { bottom: 16px; left: 72%; }
  .deco--p3 .forme--carre-noir, .deco--p6 .forme--carre-noir { bottom: 40px; left: 4%; } .deco--p3 .forme--petit-cercle, .deco--p6 .forme--petit-cercle { top: 0; left: 60%; }
  .deco--p3 .forme--s1, .deco--p6 .forme--s1 { top: 8px; left: 10%; }    .deco--p3 .forme--s2, .deco--p6 .forme--s2 { top: 24px; left: 36%; }
  .deco--p3 .forme--s3, .deco--p6 .forme--s3 { top: 2px; left: 86%; }    .deco--p3 .forme--s4, .deco--p6 .forme--s4 { bottom: 130px; left: 10%; }
  .deco--p3 .forme--s5, .deco--p6 .forme--s5 { bottom: 6px; left: 20%; } .deco--p3 .forme--s6, .deco--p6 .forme--s6 { top: 50px; left: 76%; }
  .deco--p3 .forme--s7, .deco--p6 .forme--s7 { bottom: 140px; left: 90%; } .deco--p3 .forme--s8, .deco--p6 .forme--s8 { top: 30px; left: 48%; }
  .deco--p3 .forme--s9, .deco--p6 .forme--s9 { bottom: 16px; left: 64%; }
}
/* Pas d'animation ni de mouvement si l'utilisateur limite les animations : formes immobiles */
@media (prefers-reduced-motion: reduce) {
  .forme__in { animation: none; }
}

/* ---------- Tuiles CAPILOG : cadre fin, gros chiffre, petit libellé ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.tile { background: var(--blanc); border: 1px solid var(--filet); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.tile__value { font-family: var(--font-title); font-weight: 600; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; }
.tile__value .placeholder { display: inline-block; font-size: 20px; line-height: 1.3; }
.tile__label { font-size: 14px; line-height: 1.35; color: var(--gris-texte); }
@media (min-width: 960px) { .tile { padding: 24px 26px; } }

/* ---------- Badges de qualification (avec parcimonie) ---------- */
.badge { flex-shrink: 0; }
.titre-badge { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .titre-badge { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } }
.qualif { display: flex; align-items: center; gap: 14px; max-width: 460px; }
.qualif__badges { display: flex; gap: 8px; flex-shrink: 0; }
/* Téléphone : badges sur une ligne, intitulé en dessous (évite un texte écrasé à côté de 3 badges) */
@media (max-width: 767px) { .qualif { flex-wrap: wrap; max-width: none; } .qualif__texte { flex-basis: 100%; } }
.qualif__texte { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.35; color: var(--texte-2); }
.qualif__texte strong { font-family: var(--font-title); font-weight: 600; font-size: 18px; color: var(--texte); letter-spacing: .02em; }
.qualif__texte .placeholder { align-self: flex-start; margin-top: 4px; font-size: 14px; }
.badges-titre { margin: 48px 0 16px; font-family: var(--font-text); }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 28px; padding-top: 20px; border-top: 1px solid var(--filet); }
.badges li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; text-align: center; }
.badges__sigle { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.badges .placeholder { font-size: 12px; line-height: 1.3; }

/* ---------- Page À propos : sections sobres séparées par des filets ---------- */
.section--sobre { padding: 48px 0; }
.section--sobre + .section--sobre { border-top: 1px solid var(--filet); }
@media (min-width: 768px) { .section--sobre { padding: 64px 0; } }
.section--sobre .container > p, .section--sobre .stack > p { max-width: 75ch; }
.h2-sobre { font-size: clamp(22px, 2.4vw, 30px); }
/* Logo CAPILOG (section « Notre méthode » d'À propos uniquement) */
.capilog-logo { display: block; width: 220px; max-width: 100%; height: auto; }
.qualifs { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--filet); max-width: 860px; }
.qualifs li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.qualifs__badges { display: flex; gap: 6px; flex-shrink: 0; width: 156px; }
/* Blocs partenaires d'À propos (AP2, formation), séparés des qualifications des agents par un filet noir.
   Même composition pour tous : titre, puis logo et texte côte à côte, centrés verticalement ; le texte passe
   sous le logo quand la place manque (mobile, logo large). */
.partenaire { max-width: 860px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--noir); display: flex; flex-direction: column; gap: 12px; }
.partenaire__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.partenaire__ligne > p { flex: 1 1 260px; }
.partenaire__logo { display: block; flex-shrink: 0; max-width: 100%; }
.partenaire__logo img { display: block; }
/* Logo de partenaire tel que fourni : 240 px au plus, proportions conservées */
.partenaire__logo-large { width: 240px; max-width: 100%; height: auto; }
/* Mentions du partenaire : plus petit, gris des libellés (5,11:1 sur blanc) */
.partenaire__mentions { font-size: 14px; line-height: 1.55; color: var(--gris-texte); }

/* Page Recrutement : profils recherchés en badges */
.profils { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 40px; padding: 20px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.profils li { display: flex; align-items: center; gap: 14px; }
.profils__badges { display: flex; gap: 6px; flex-shrink: 0; }
.profils__texte { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.35; color: var(--texte-2); }
.profils__texte strong { font-family: var(--font-title); font-weight: 600; font-size: 18px; color: var(--texte); letter-spacing: .02em; }
@media (max-width: 479px) { .profils li { flex-wrap: wrap; } .profils__texte { flex-basis: 100%; } }
.note--president { padding: 28px 24px; gap: 20px; }
.note--president .note__titre { font-family: var(--font-title); font-size: clamp(20px, 2vw, 24px); text-transform: uppercase; letter-spacing: .02em; }
@media (min-width: 768px) { .note--president { padding: 40px; } }
.president { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .president { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; } .president--sans-photo { grid-template-columns: minmax(0, 1fr); } }
img.president__photo { padding: 0; object-fit: cover; height: auto; }
.president__photo { width: 160px; aspect-ratio: 4 / 5; border: 1px solid var(--filet); background: var(--blanc); display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 14px; }
@media (min-width: 768px) { .president__photo { width: 200px; } }
.president__texte { margin: 0; display: flex; flex-direction: column; gap: 16px; max-width: 70ch; }
.president__texte blockquote { margin: 0; display: flex; flex-direction: column; gap: 14px; color: var(--texte); }
.president__texte figcaption { font-weight: 600; }

/* ---------- Précisions de prestation, délai, étapes de mission ---------- */
.prestation-point { font-size: 18px; max-width: 65ch; }
.cta-band__delai { color: var(--sur-noir); }
.cta-band__delai a { color: var(--blanc); }
.steps--mission li { font-size: 17px; }
.steps--mission li::before { font-size: 20px; }
.form-urgence { color: var(--texte-2); }

/* ---------- Références par catégorie (texte seul) ---------- */
.ref-groupe { display: flex; flex-direction: column; gap: 14px; }
.ref-liste { list-style: none; border-top: 1px solid var(--filet); display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
@media (min-width: 700px) { .ref-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref-liste li { padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 18px; }

/* ---------- Libellé gris au-dessus de la valeur ---------- */
.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; }
@media (min-width: 700px) { .kv--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; } }
.kv > div { display: flex; flex-direction: column; gap: 4px; }
.kv dt { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris-texte); }
.kv dd { margin: 0; font-size: 18px; }

/* ---------- Encadré d'information / élément important ---------- */
.note { background: var(--gris-fond); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.note__titre { font-family: var(--font-text); font-size: 15px; font-weight: 600; color: var(--rouge); text-transform: none; letter-spacing: 0; }
.important { border: 1px solid var(--noir); background: var(--blanc); padding: 20px 24px; font-weight: 600; font-size: 18px; }

/* ---------- Cartes légères (prestations de l'accueil) ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--filet); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1100px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; } }
.card { border-bottom: 1px solid var(--filet); padding: 28px 0; display: flex; flex-direction: column; gap: 10px; }
.card__num { font-family: var(--font-title); font-weight: 600; font-size: 20px; color: var(--rouge); line-height: 1; }
.card h3 { font-size: 22px; }
.card p { color: var(--texte-2); }
.card__link { margin-top: auto; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }

/* ---------- Sommaire (liste à filets) ---------- */
.sommaire { list-style: none; border-top: 1px solid var(--filet); }
.sommaire li { border-bottom: 1px solid var(--filet); }
.sommaire a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 4px 16px; align-items: baseline; padding: 22px 0; min-height: 44px; color: var(--texte); text-decoration: none; }
.sommaire a:hover .sommaire__titre { color: var(--rouge); text-decoration: underline; }
.sommaire__num { font-family: var(--font-title); font-weight: 600; color: var(--rouge); font-size: 18px; grid-row: span 2; }
.sommaire__titre { font-family: var(--font-title); font-weight: 600; font-size: 22px; }
.sommaire__texte { grid-column: 2; color: var(--texte-2); }
.sommaire__fleche { grid-column: 3; grid-row: 1; color: var(--rouge); font-weight: 600; }
.sommaire--compact a { grid-template-columns: minmax(0, 1fr) 24px; padding: 10px 0; }
.sommaire--compact .sommaire__titre { font-family: var(--font-text); font-size: 17px; }
.sommaire--compact .sommaire__fleche { grid-column: 2; }

/* ---------- Deux colonnes ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 960px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: start; } .split--center { align-items: center; } }

/* ---------- Étapes ---------- */
.steps { list-style: none; counter-reset: step; border-top: 1px solid var(--filet); }
.steps li { counter-increment: step; display: flex; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--filet); font-size: 18px; line-height: 1.45; }
.steps li::before { content: counter(step); font-family: var(--font-title); font-weight: 600; font-size: 22px; color: var(--rouge); width: 28px; flex-shrink: 0; }

/* ---------- Puces en tiret gris ---------- */
.bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 12px; align-items: baseline; font-size: 18px; line-height: 1.5; }
.bullets li::before { content: "–"; color: var(--gris-logo); flex-shrink: 0; font-weight: 600; }

/* ---------- Tableau style devis CAPILOG ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 17px; }
.table th { background: var(--noir); color: var(--blanc); font-weight: 600; text-align: left; padding: 12px 16px; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.table tbody tr:nth-child(even) td { background: var(--gris-fond); }
.table td:first-child { font-family: var(--font-title); font-weight: 600; color: var(--rouge); width: 72px; }

/* ---------- Illustration CAPILOG (schéma, aucune donnée réelle) ---------- */
.capilog { display: flex; border: 1px solid var(--filet); background: var(--blanc); min-height: 220px; }
.capilog__side { width: 34%; max-width: 170px; border-right: 1px solid var(--filet); padding: 18px 14px; display: flex; flex-direction: column; gap: 16px; }
.capilog__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-weight: 600; font-size: 16px; }
.capilog__brand::before { content: ""; width: 18px; height: 18px; background: var(--rouge); flex-shrink: 0; }
.capilog__bar { height: 6px; width: 70%; background: var(--filet); }
.capilog__main { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.capilog__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.capilog__tile { border: 1px solid var(--filet); height: 56px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.capilog__tile::before { content: ""; width: 60%; height: 5px; background: var(--filet); }
.capilog__tile::after { content: ""; width: 40%; height: 14px; background: var(--texte-2); }
.capilog__tile:first-child::after { background: var(--rouge); }
.capilog__head { height: 14px; background: var(--noir); }
.capilog__row { height: 14px; background: var(--blanc); }
.capilog__row:nth-child(odd) { background: var(--gris-fond); }
.capilog__note { font-size: 12px; color: var(--gris-texte); margin-top: auto; }
@media (min-width: 960px) { .capilog { min-height: 400px; } .capilog__main { padding: 28px; gap: 16px; } .capilog__tile { height: 72px; } }

/* ---------- Références ---------- */
.logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
@media (min-width: 900px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.logos li { min-height: 80px; border: 1px solid var(--filet); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-size: 16px; font-weight: 600; color: var(--texte-2); }
@media (min-width: 900px) { .logos li { min-height: 96px; } }
.quote { border-top: 2px solid var(--rouge); padding: 24px 0 0; display: flex; flex-direction: column; gap: 10px; margin: 0; max-width: 60ch; }
.quote blockquote { margin: 0; font-family: var(--font-title); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; }
.quote figcaption { font-size: 15px; color: var(--gris-texte); }

/* ---------- Texte long ---------- */
.prose { max-width: 75ch; display: flex; flex-direction: column; gap: 16px; }
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 28px; }
.prose h3 { margin-top: 8px; }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.prose dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0 0 8px; }
@media (min-width: 700px) { .prose dl { grid-template-columns: 240px minmax(0, 1fr); } .prose dd { margin: 0; } }

/* ---------- Formulaire ---------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 860px; }
@media (min-width: 700px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; }
.field .hint { font-size: 14px; color: var(--gris-texte); }
.field input, .field select, .field textarea { font: inherit; font-size: 17px; color: var(--texte); background: var(--blanc); border: 1px solid var(--champ); border-radius: 0; padding: 11px 12px; min-height: 48px; width: 100%; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--rouge); outline-offset: 0; border-color: var(--noir); }
.field [aria-invalid="true"] { border: 2px solid var(--rouge); }
.field .error { color: var(--rouge); font-weight: 600; font-size: 15px; }
.req { color: var(--rouge); }
.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input { width: 24px; height: 24px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--rouge); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { border: 1px solid var(--noir); border-top: 2px solid var(--rouge); background: var(--blanc); padding: 16px 20px; }

/* ---------- Contact ---------- */
.map-box { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---------- Pied de page (aplat noir autorisé) ---------- */
.site-footer { background: var(--noir); color: #BFBFBF; border-top: 2px solid var(--rouge); padding: 48px 0 32px; font-size: 15px; }
.site-footer a { color: var(--sur-noir); }
.site-footer a:hover { color: var(--blanc); }
.site-footer__logo { height: 44px; width: auto; margin-bottom: 14px; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .site-footer { padding: 64px 0 40px; } .site-footer__grid { grid-template-columns: 1fr 1fr 1.4fr 1fr; gap: 48px; } }
.site-footer__label { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gris-logo); margin-bottom: 8px; }
.site-footer p { line-height: 1.6; }
.nowrap { white-space: nowrap; }
.site-footer__agrements { line-height: 1.6; }
.site-footer__agrements dd { margin: 0 0 6px; white-space: nowrap; color: var(--blanc); font-variant-numeric: tabular-nums; }
.site-footer__agrements dd:last-child { margin-bottom: 0; }
.site-footer__links { list-style: none; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__legal { margin-top: 32px; padding-top: 22px; border-top: 1px solid #333333; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--gris-logo); }
.site-footer__legal a { display: inline-block; padding: 12px 0; }

/* ---------- Textes de référence : /deontologie, /cgv ---------- */
/* Bandeau de nuit (image fixe d'une scène de scenes.js) avec le même voile que le héros de l'accueil */
.page-nuit { position: relative; background: var(--noir); color: var(--blanc); overflow: hidden; }
.page-nuit__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
.page-nuit__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 13, 13, .9) 0, rgba(13, 13, 13, .9) calc(max(var(--gutter), (100% - var(--max)) / 2) + 700px), rgba(13, 13, 13, .25) 100%); }
.page-nuit__contenu { position: relative; display: flex; flex-direction: column; gap: 16px; padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) { .page-nuit__contenu { padding-top: 88px; padding-bottom: 80px; } }
.page-nuit__surtitre { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.page-nuit__lead { font-size: 19px; color: var(--sur-noir); max-width: 62ch; }
.page-nuit :focus-visible { outline-color: var(--blanc); }

.section--texte { padding-top: 48px; }
.texte-ref { display: flex; flex-direction: column; gap: 40px; }
.texte-ref__outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px 24px; background: var(--gris-fond); }
.texte-ref__version { font-size: 16px; max-width: 70ch; }
.no-js [data-imprimer] { display: none; }
/* ---------- Réseaux sociaux (« Suivez-nous ») et actualités ---------- */
.reseaux { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.reseau { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid currentColor; text-decoration: none; font-weight: 600; font-size: 15px; }
.reseau__icone { flex-shrink: 0; }
.reseaux--clair .reseau { color: var(--texte); border-color: var(--noir); background: var(--blanc); }
.reseaux--clair .reseau:hover { background: var(--noir); color: var(--blanc); }
/* Pied de page (barre noire) : logos seuls, blancs, couleur du réseau au survol (contraste ≥ 3:1 sur #0D0D0D) */
.reseaux--icones { gap: 8px; }
.reseaux--icones .reseau { justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--blanc); }
.reseaux--icones .reseau:hover, .reseaux--icones .reseau:focus-visible { color: var(--couleur-reseau, var(--blanc)); }
.reseaux--icones .reseau--facebook  { --couleur-reseau: #1877F2; }
.reseaux--icones .reseau--instagram { --couleur-reseau: #E1306C; }
.reseaux--icones .reseau--tiktok    { --couleur-reseau: #25F4EE; }
/* Pages claires : logo + texte, couleur du réseau au survol (contraste ≥ 3:1 sur blanc) */
.reseaux--clair .reseau--facebook:hover  { background: #0866FF; border-color: #0866FF; color: var(--blanc); }
.reseaux--clair .reseau--instagram:hover { background: #C13584; border-color: #C13584; color: var(--blanc); }
.reseaux--clair .reseau--tiktok:hover    { background: var(--noir); border-color: var(--noir); color: #25F4EE; }
.site-footer__label--suite { margin-top: 20px; }
.suivez-nous { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtres a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--champ); color: var(--texte); text-decoration: none; font-weight: 600; }
.filtres a:hover { border-color: var(--noir); }
.filtres a[aria-current="page"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.actu { display: flex; flex-direction: column; gap: 12px; max-width: 820px; padding-bottom: 32px; border-bottom: 1px solid var(--filet); }
.actu__titre { font-size: clamp(22px, 2.2vw, 28px); text-transform: none; }
.actu__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: var(--gris-texte); }
.actu__etiquettes { list-style: none; display: flex; gap: 8px; }
.actu__etiquettes li { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--rouge); color: var(--rouge); }
.actu__texte { display: flex; flex-direction: column; gap: 12px; }
.actu__source { font-size: 15px; }

/* Bloc « L'essentiel » (résumé non officiel) */
.essentiel { display: flex; flex-direction: column; gap: 12px; }
.essentiel__avertissement { font-size: 15px; font-weight: 600; color: var(--texte-2); }
.essentiel__cartes { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
@media (min-width: 700px) { .essentiel__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .essentiel__cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.essentiel__carte { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--filet); border-top: 2px solid var(--rouge); background: var(--blanc); }
.essentiel__carte h3 { font-size: 20px; }
.essentiel__carte p { font-size: 16px; line-height: 1.55; }
.essentiel__carte .essentiel__articles { margin-top: auto; font-size: 14px; color: var(--gris-texte); }
@media print { .essentiel__carte { break-inside: avoid; } }
.sommaire-texte { border-top: 2px solid var(--rouge); padding-top: 20px; max-width: 820px; }
.sommaire-texte ol { list-style: none; margin-top: 12px; }
.sommaire-texte li { padding: 10px 0; border-bottom: 1px solid var(--filet); }
.sommaire-texte li.sommaire-texte__niveau3 { padding-left: 24px; }
.sommaire-texte li > a { font-weight: 600; color: var(--texte); }
.sommaire-texte li > a:hover { color: var(--rouge); }
.sommaire-texte__articles { font-size: 15px; margin-top: 4px; line-height: 2; }
.sommaire-texte__articles a { display: inline-block; min-width: 24px; min-height: 24px; }
.texte-officiel { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.texte-officiel__source { font-size: 15px; color: var(--gris-texte); }
.texte-officiel__section { margin-top: 32px; padding-top: 16px; border-top: 2px solid var(--rouge); font-size: clamp(20px, 2vw, 26px); text-transform: none; scroll-margin-top: 96px; }
h3.texte-officiel__section { margin-top: 16px; border-top-width: 1px; font-size: 20px; }
.texte-officiel__article { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--filet); scroll-margin-top: 96px; }
.texte-officiel__num { font-size: 20px; color: var(--rouge); text-transform: none; }
.texte-officiel__mod { font-size: 13px; color: var(--gris-texte); }
.texte-officiel .bullets li { font-size: 17px; }

/* Impression et « Enregistrer en PDF » : le texte seul, noir sur blanc */
@media print {
  .site-header, .barre-mobile, .skip-link, .site-footer__grid, .sommaire-texte, .texte-ref__outils, .deco, .page-nuit__fond, .page-nuit__voile, .cta-band { display: none !important; }
  body { padding-bottom: 0; font-size: 11pt; color: #000; background: #fff; }
  .page-nuit, .site-footer { background: #fff; color: #000; border: 0; }
  .page-nuit__surtitre, .page-nuit__lead, .site-footer__legal { color: #000; }
  .page-nuit__contenu, .page-hero { padding: 0 0 12pt; border: 0; }
  .section { padding: 12pt 0; }
  .texte-officiel { max-width: none; }
  .texte-officiel__article { break-inside: avoid; padding: 8pt 0; }
  .texte-officiel__section { break-after: avoid; }
  a { color: #000; }
  .site-footer { padding: 12pt 0 0; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }