/*
  ConformeDz — site public · socle.

  Le site hérite du monde de l'application : vert institutionnel en aplats de
  région, papier vert-blanc, encre verte-noire. Trois couleurs échappent au
  vert et chacune garde son rôle unique :
    · l'ambre #EA9010   → l'action (encre sombre dessus, jamais du blanc)
    · l'or              → le sceau, le numéro de récépissé, la marque
    · le bleu de l'agent → l'agent qui écrit, et rien d'autre
*/

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/manrope-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/public-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/public-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/public-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  /* Encres */
  --ink: #0D1F16;  --ink-2: #2F443A;  --ink-3: #55685C;

  /* Vert institutionnel (le jeton garde son nom historique --navy) */
  --navy: #14432E;  --navy-deep: #0B2E1E;  --navy-soft: #1F5C41;  --navy-vif: #276B4C;

  /* Ambre : l'action */
  --accent: #EA9010;  --accent-clair: #F8A93A;  --accent-vif: #FFBC55;
  --accent-fonce: #C67A0A;  --accent-ink: #7A4708;
  --vert-ink: #145436;
  --enfonce: rgba(0,0,0,.22);

  /* L'agent au travail. Nulle part ailleurs. */
  --agent: #2E8FD6;  --agent-wash: #E9F3FB;

  /* L'or : sceau, récépissé, marque */
  --or: #96570A;  --or-vif: #C68A21;  --or-clair: #E2B558;
  --or-wash: #FCF5E8;  --or-wash-haut: #FEFAF1;  --or-line: #E6D3AE;

  /* Surfaces */
  --paper: #F2F6F3;  --surface: #FFFFFF;  --retrait: #EFF5F1;  --retrait-2: #F8FBF9;  --neutre: #E4EDE7;
  --line: #D7E3DA;  --line-soft: #E8F0EB;  --line-fort: #BDCFC4;

  /* Textes sur le vert, mesurés contre --navy-soft (le pire cas) */
  --sur-navy: #C9E2D4;  --sur-navy-2: #B4D0C0;  --sur-navy-3: #B0CEBD;

  /* Régimes et états */
  --decl-wash: #E5F0EA;  --auth: #7A3E9B;  --auth-wash: #F5ECFA;
  --ok: #17724A;  --ok-wash: #E7F5EE;
  --wait: #8A5800;  --wait-wash: #FCF4E6;
  --gap: #B02418;  --gap-wash: #FCEEEC;  --gap-line: #F0CFC9;  --gap-ink: #8A1C12;
  --selection: #C3E0CE;

  /* Formes */
  --r-sm: 5px;  --r: 8px;  --r-lg: 14px;

  /* Élévation : toujours teintée de l'encre verte */
  --e1: 0 1px 2px rgba(13,31,22,.06), 0 1px 3px rgba(13,31,22,.08);
  --e2: 0 1px 2px rgba(13,31,22,.06), 0 4px 10px rgba(13,31,22,.07), 0 8px 20px rgba(13,31,22,.05);
  --e3: 0 2px 4px rgba(13,31,22,.07), 0 10px 24px rgba(13,31,22,.09), 0 22px 48px rgba(13,31,22,.09);
  --e4: 0 3px 6px rgba(13,31,22,.08), 0 16px 36px rgba(13,31,22,.12), 0 36px 72px rgba(13,31,22,.14);
  /* Posé sur le vert : même encre, plus de densité, sinon l'objet flotte sans ombre */
  --e-vert: 0 2px 4px rgba(4,16,10,.18), 0 18px 40px rgba(4,16,10,.30), 0 40px 80px rgba(4,16,10,.26);
  --lueur: inset 0 1px 0 rgba(255,255,255,.9);

  /* Rythme */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;
  --s9: 64px;
  --section: clamp(76px, 9vw, 128px);
  --gouttiere: clamp(16px, 4vw, 44px);
  --largeur: 1216px;
  --barre-h: 72px;

  /* Échelle éditoriale du site */
  --fs-display: clamp(2.55rem, 1.5rem + 3.5vw, 4.15rem);
  --fs-h2: clamp(1.95rem, 1.4rem + 1.85vw, 2.9rem);
  --fs-h3: clamp(1.28rem, 1.14rem + .5vw, 1.55rem);
  --fs-lead: clamp(1.06rem, 1rem + .28vw, 1.2rem);

  /* Mouvement : « se poser » */
  --pose: cubic-bezier(0.16, 1, 0.3, 1);
  --sortie: cubic-bezier(0.4, 0, 1, 1);
  --t-retour: 120ms;  --t-etat: 200ms;  --t-vue: 340ms;  --t-focal: 620ms;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barre-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--ink);
  text-wrap: balance;
}
h3 { letter-spacing: -0.026em; line-height: 1.16; }
h4 { margin: 0; font-weight: 600; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--accent); }

a { color: var(--vert-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--accent-fonce); }

::selection { background: var(--selection); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: 3px; border-radius: var(--r-sm); }
/* Sur le vert, l'ambre foncé tombe sous 3.5:1 : l'anneau passe à l'ambre clair. */
.sur-vert :focus-visible { outline-color: var(--accent-clair); }

html { scrollbar-width: thin; scrollbar-color: var(--line-fort) var(--paper); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-fort); border-radius: var(--r-sm); border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

/* Un composant qui déclare son propre display ne doit jamais battre [hidden]. */
[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: var(--r);
  box-shadow: var(--e3); font-weight: 600; text-decoration: none;
}
.evitement:focus { top: 12px; }

/* ============================================================
   BOUTONS — un bouton plein est un objet qu'on enfonce : dégradé
   court, anneau de 1 px, liseré de lumière en haut, arête basse
   plus sombre. Il se soulève d'un pixel au survol ; à la pression,
   il descend de deux et son arête s'écrase.
   Le libellé se centre sur la face, au-dessus de l'arête : d'où
   les 3 px de rembourrage bas.
   ============================================================ */
.btn {
  --arete: var(--line-fort);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px 3px;
  border: 0; border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface) 0%, var(--retrait) 100%);
  color: var(--ink);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line-fort), inset 0 -3px 0 var(--arete), var(--e1);
  transition: background var(--t-retour) var(--pose), box-shadow var(--t-retour) var(--pose),
              transform 90ms var(--sortie), color var(--t-retour) var(--pose);
}
.btn svg { flex: none; width: 18px; height: 18px; }
.btn:hover {
  background: linear-gradient(180deg, var(--surface) 0%, var(--neutre) 100%);
  box-shadow: 0 0 0 1px var(--ink-3), inset 0 -3px 0 var(--arete), var(--e2);
  transform: translateY(-1px); text-decoration: none;
}
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 1px var(--ink-3), inset 0 -1px 0 var(--arete), var(--e1); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn--grand { min-height: 56px; padding: 0 28px 3px; font-size: 1.0625rem; }
.btn--grand svg { width: 20px; height: 20px; }
.btn--petit { min-height: 42px; padding: 0 var(--s4) 3px; font-size: .9375rem; }

/* Ambre : l'action. Encre sombre, 6.9:1 ; l'arête est l'ambre d'encre voilé. */
.btn--action {
  --arete: rgba(122,71,8,.42);
  background: linear-gradient(180deg, var(--accent-clair) 0%, var(--accent) 100%);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--accent-ink), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -3px 0 var(--arete), var(--e2);
}
.btn--action:hover {
  background: linear-gradient(180deg, var(--accent-vif) 0%, var(--accent-clair) 100%);
  box-shadow: 0 0 0 1px var(--accent-ink), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -3px 0 var(--arete), var(--e3);
}
.btn--action:active {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-fonce) 100%);
  box-shadow: 0 0 0 1px var(--accent-ink), inset 0 1px 2px var(--enfonce), inset 0 -1px 0 var(--arete);
}

/* Le CTA principal respire : un anneau qui se propage, jamais le bouton
   lui-même, pour ne jamais gêner le survol ou l'appui. */
.btn--attire { position: relative; }
.btn--attire::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--accent-clair);
  animation: attire-pouls 2.4s cubic-bezier(0,0,.2,1) infinite;
  pointer-events: none;
}
.btn--attire:hover::after, .btn--attire:focus-visible::after { animation-play-state: paused; opacity: 0; }
@keyframes attire-pouls {
  0%       { transform: scale(1); opacity: .65; }
  70%, 100% { transform: scale(1.16); opacity: 0; }
}

/* Vert profond : l'action qui engage (soumettre). */
.btn--primaire {
  --arete: var(--navy-deep);
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 100%);
  color: #fff;
  box-shadow: 0 0 0 1px var(--navy-deep), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 0 var(--arete), var(--e2);
}
.btn--primaire:hover {
  background: linear-gradient(180deg, var(--navy-vif) 0%, var(--navy-soft) 100%);
  box-shadow: 0 0 0 1px var(--navy-deep), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 0 var(--arete), var(--e3);
}
.btn--primaire:active {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: 0 0 0 1px var(--navy-deep), inset 0 1px 2px var(--enfonce), inset 0 -1px 0 var(--arete);
}

/* Secondaire posé sur le vert : contour clair affirmé, sans aplat ni arête. */
.btn--sur-vert {
  padding-bottom: 0;
  background: rgba(255,255,255,.05); color: #fff;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.52), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn--sur-vert:hover {
  background: rgba(255,255,255,.11);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.8), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn--sur-vert:active { transform: translateY(1px); background: rgba(255,255,255,.15); box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }

/* ============================================================
   BARRE DE NAVIGATION — posée sur le vert du héros, elle prend
   sa matière pleine dès que la page défile.
   ============================================================ */
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--barre-h);
  color: #fff;
  transition: background var(--t-etat) var(--pose), box-shadow var(--t-etat) var(--pose);
}
.barre--pleine {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(4,16,10,.22);
}
.barre__interieur { height: 100%; display: flex; align-items: center; gap: var(--s7); }

.marque {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; flex: none;
}
.marque:hover { text-decoration: none; }
.marque svg { width: 30px; height: 30px; color: var(--or-vif); }
.marque__nom {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.32rem; font-weight: 800; letter-spacing: -0.032em; line-height: 1;
}

.barre__liens { display: flex; align-items: center; gap: var(--s1); margin-left: auto; list-style: none; }
.barre__liens a {
  display: block; padding: 8px 12px; border-radius: var(--r);
  color: var(--sur-navy); font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: color var(--t-retour) var(--pose), background var(--t-retour) var(--pose);
}
.barre__liens a:hover { color: #fff; background: rgba(255,255,255,.07); }

.barre__menu {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r); background: rgba(255,255,255,.06); color: #fff; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
.barre__menu svg { width: 22px; height: 22px; }
.barre__menu .icone-fermer { display: none; }
.barre--ouverte .barre__menu .icone-ouvrir { display: none; }
.barre--ouverte .barre__menu .icone-fermer { display: block; }

.barre__panneau { display: none; }

@media (max-width: 880px) {
  .barre__liens, .barre__cta { display: none; }
  .barre__menu { display: inline-flex; }
  .barre--ouverte { background: var(--navy-deep); }
  .barre--ouverte .barre__panneau {
    display: grid; gap: var(--s1);
    position: absolute; inset: var(--barre-h) 0 auto 0;
    padding: var(--s2) var(--gouttiere) var(--s6);
    background: var(--navy-deep);
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 40px rgba(4,16,10,.35);
  }
  .barre__panneau a:not(.btn) {
    padding: 12px 4px; color: var(--sur-navy); text-decoration: none; font-size: 1.05rem; font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .barre__panneau .btn { margin-top: var(--s4); }
}

/* Mouvement réduit : on retire le déplacement, on garde le retour. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-property: background-color, border-color, color, opacity, box-shadow !important;
  }
}