/* =========================================================
   PRO 5 — CONTRASTE VERT ET BLEU
   Le vert prend la main, le marine lui répond. Chacun possède
   des régions entières : le vert tient « Qui sommes-nous » et
   « Pourquoi nous », le marine tient « Comment ça se passe »,
   et le bleu très pâle porte les services et le contact.
   Le mouvement passe par la couleur : les aplats se déploient
   à l'arrivée, les pictogrammes bougent, les cartes se lèvent.
   ========================================================= */

@font-face { font-family:'Figtree'; src:url('../fonts/figtree-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('../fonts/figtree-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --navy: #012263; --navy-2: #011a4d;
  /* Aplats adoucis : mêmes teintes, moins de saturation et de profondeur. */
  --navy-aplat: #123a7a;      /* le marine des pleines sections, éclairci */
  --vert: #3c9f35; --vert-encre: #2a7a23;
  --vert-profond: #2f6b28;    /* le vert des pleines sections, éclairci */
  --vert-pale: #f2f8f1;
  --bleu-pale: #f1f4fb; --bleu-trait: #e2e8f3;
  --fond: #ffffff; --texte: #14211a; --doux: #55645b; --trait: #e6ebe4;
  --font-title: 'Figtree', system-ui, sans-serif;
  --radius-sm: 10px; --radius: 16px; --radius-lg: 22px;
  --section-y: clamp(48px, 5vw, 80px);
  --line: var(--trait);
  --sortie: cubic-bezier(.16,1,.3,1);
}

body { background: var(--fond); color: var(--texte); }
h1,h2,h3,h4 { font-family: var(--font-title); font-weight: 800; color: var(--navy); letter-spacing: -.032em; }
h1 { font-size: clamp(2.2rem, 1.4rem + 2.9vw, 3.5rem); line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem); }
h3 { font-size: 1.05rem; }

/* Le vert possède deux sections entières */
.section--vert { background: linear-gradient(165deg, var(--vert-profond), #285c22); }
.section--methode { background: linear-gradient(165deg, var(--navy-aplat), #0d2f65); }
.band { background: linear-gradient(165deg, var(--vert-profond), #285c22); }
.section--vert h2, .section--vert h3,
.section--methode h2, .section--methode h3 { color: #fff; }
.section--vert .section-head p, .section--vert .about-text p,
.section--methode .section-head p, .section--methode .etape p { color: rgba(255,255,255,.84); }
.section--alt { background: var(--bleu-pale); }
.section--sable { background: var(--fond); }

.eyebrow {
  background: var(--navy); border: 0; color: #fff; border-radius: 999px;
  font-family: var(--font-title); font-weight: 800; font-size: .74rem; letter-spacing: .12em;
  padding: .34rem .85rem; margin-bottom: .9rem;
}
.eyebrow::before { background: #8fd98a; }
.section-head p.eyebrow, .about-text p.eyebrow, .band .section-head p.eyebrow,
.section--vert .section-head p.eyebrow, .section--vert .about-text p.eyebrow,
.section--methode .section-head p.eyebrow { color: #fff; }
.section--vert .eyebrow, .section--methode .eyebrow { background: rgba(255,255,255,.16); }
/* Page 404 : « .error-page p » impose la couleur du texte discret, plus
   spécifique que « .eyebrow ». Sur la pastille marine, le libellé tombait à un
   contraste de 2,5 pour 1, sous le minimum de 4,5 exigé. */
.error-page p.eyebrow { color: #fff; }
.section-head p { color: var(--doux); }

/* ---------- Accueil ---------- */
.hero { background:
  radial-gradient(46rem 28rem at 88% -12%, rgba(60,159,53,.11), transparent 58%),
  radial-gradient(40rem 26rem at -4% 6%, rgba(1,34,99,.07), transparent 60%),
  var(--fond);
  padding-block: clamp(38px,4.2vw,66px) clamp(42px,4.6vw,72px); }
.hero-lead, .hero-visite-note { color: var(--doux); }
.hero-visual img { border-radius: var(--radius-lg); box-shadow: none; }
.hero-visual picture { box-shadow: 0 24px 48px -28px rgba(20,33,26,.45); }
.hero-badge { border-radius: var(--radius); border-color: var(--trait); box-shadow: 0 14px 30px -20px rgba(20,33,26,.35); }
.hero-points { border-top: 2px solid var(--navy); }
.hero-points svg { color: var(--vert-encre); }

.site-header { background: rgba(255,255,255,.9); }
.site-header.is-stuck { border-bottom-color: var(--trait); box-shadow: 0 8px 24px -22px rgba(20,33,26,.5); }
.nav-list a:hover, .nav-list a.is-active { border-bottom-color: var(--vert); }

/* ---------- Cartes ---------- */
.value-card, .service-card, .contact-card, .faq details, .form-card {
  border-radius: var(--radius); border-color: var(--bleu-trait);
  box-shadow: 0 1px 2px rgba(20,33,26,.04), 0 12px 26px -22px rgba(20,33,26,.42);
  transition: transform .3s var(--sortie), box-shadow .3s var(--sortie), border-color .25s;
}
.section--vert .value-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); box-shadow: none; }
.section--vert .value-card h3 { color: #fff; }
.section--vert .value-card p { color: rgba(255,255,255,.8); }
.section--vert .value-card .ico { background: rgba(255,255,255,.14); color: #8fd98a; }
.section--vert .value-card:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); }
.value-card:hover, .service-card:hover, a.contact-card:hover {
  transform: translateY(-5px); box-shadow: 0 2px 4px rgba(20,33,26,.05), 0 24px 44px -28px rgba(20,33,26,.5);
  border-color: rgba(60,159,53,.45);
}
.service-icon { background: var(--navy); border-radius: 12px; transition: transform .35s var(--sortie); }
.service-card:hover .service-icon { transform: rotate(-6deg) scale(1.06); }
.value-card .ico { background: var(--vert-pale); color: var(--vert-encre); border-radius: 12px; }
.contact-card .ico { background: var(--navy); border-radius: 12px; }
.badge--live { background: var(--vert-encre); }
.service-link { color: var(--vert-encre); }
.service-link svg { transition: transform .3s var(--sortie); }
.service-link:hover svg { transform: translateX(5px); }
.value-card p, .service-card > p, .contact-card p, .faq .faq-body, .etape p { color: var(--doux); }

/* ---------- Les étapes ---------- */
.etape { border-top: 2px solid rgba(255,255,255,.3); }
.etape h3 { color: #fff; }
.etape-num { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- FAQ, contact, pied ---------- */
.faq details[open] { border-color: rgba(60,159,53,.5); }
.faq details[open] summary { color: var(--vert-encre); }
.field input, .field select, .field textarea { border-radius: 12px; border-color: var(--trait); background: #fbfdfb; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--vert); box-shadow: 0 0 0 4px rgba(60,159,53,.16); background: #fff; }
.hours { background: var(--navy); border-radius: var(--radius); }
.cta-final, .cta-final--panneau { background: linear-gradient(140deg, var(--vert-encre), var(--vert-profond)); border-radius: var(--radius); }
.btn { border-radius: 999px; font-family: var(--font-title); font-weight: 800;
  transition: background-color .22s, box-shadow .3s var(--sortie), transform .22s var(--sortie); }
.btn--primary { background: var(--vert-encre); box-shadow: 0 10px 22px -14px rgba(42,122,35,.75); }
.btn--primary:hover { background: #24571e; transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(42,122,35,.8); }
.btn--white { background: #fff; color: #24571e; }
.site-footer { background: var(--navy-2); }

/* ---------- Surfaces du navigateur ---------- */
::selection { background: #bde5b9; color: var(--vert-profond); }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }
* { scrollbar-color: var(--navy) var(--bleu-pale); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bleu-pale); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 99px; border: 3px solid var(--bleu-pale); }
.hours dl, .hours-visite dl, .etape-num { font-variant-numeric: tabular-nums; }

.guide { border-radius: var(--radius); }
.guide-choix button { border-radius: 999px; transition: transform .2s var(--sortie), background-color .2s; }
.guide-choix button:hover { transform: translateY(-2px); }
.est-guidee::before { border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce) {
  .value-card:hover, .service-card:hover, a.contact-card:hover, .btn--primary:hover, .guide-choix button:hover { transform: none; }
  .service-card:hover .service-icon { transform: none; }
}

/* =================================================================
   MOUVEMENT
   Une seule courbe pour tout le site, qui démarre franchement et se pose
   en douceur : c'est elle qui donne l'impression d'un ensemble. Les
   distances restent courtes — on accompagne l'œil, on ne le promène pas.
   ================================================================= */
:root { --entree: cubic-bezier(.22, 1, .36, 1); }

/* ---------- D'une page à l'autre ----------
   L'en-tête reste en place ; seule la page glisse. Les navigateurs qui ne
   connaissent pas ces transitions changent de page comme avant. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: entete; }
::view-transition-old(root) { animation: page-sort .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: page-entre .55s var(--entree) both; }
@keyframes page-sort { to { opacity: 0; transform: translateY(-12px); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(28px); } }

/* ---------- À l'arrivée sur la page ----------
   Le texte d'ouverture monte ligne à ligne. L'image, elle, est peinte dès
   la première image : c'est un volet posé devant qui se retire, pour ne
   rien retarder de ce que mesure la vitesse d'affichage. */
@keyframes leve { from { opacity: 0; transform: translate3d(0, 30px, 0); } }
@keyframes volet { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes recul { from { transform: scale(1.09); } }

.hero-content > *, .guide-entete-texte > *, .fil-ariane { animation: leve .9s var(--entree) both; }
.hero-content > :nth-child(2), .guide-entete-texte > :nth-child(2) { animation-delay: .08s; }
.hero-content > :nth-child(3), .guide-entete-texte > :nth-child(3) { animation-delay: .16s; }
.hero-content > :nth-child(4), .guide-entete-texte > :nth-child(4) { animation-delay: .24s; }
.hero-content > :nth-child(5) { animation-delay: .32s; }
.hero-content > :nth-child(6) { animation-delay: .4s; }

.hero-visual picture, .guide-couverture {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
}
.guide-couverture { border-radius: var(--radius); box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .6); }
.guide-couverture img { display: block; box-shadow: none; }
.hero-visual picture img, .guide-couverture img { animation: recul 1.6s var(--entree) both; }
.hero-visual picture::after, .guide-couverture::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, var(--navy), var(--vert-encre));
  transform-origin: right center;
  animation: volet 1s cubic-bezier(.76, 0, .24, 1) .15s both;
  pointer-events: none;
}
.hero-badge { animation: leve .8s var(--entree) .75s both; }

/* ---------- Au défilement ----------
   L'état « à venir » n'existe que posé par le script, sous la ligne de
   flottaison. Chaque effet part d'un endroit différent et revient à sa
   place ; le rang, fixé par le script, décale les éléments d'une liste. */
.a-venir { opacity: 0; transform: translate3d(0, 38px, 0); }
.a-venir[data-effet="gauche"] { transform: translate3d(-44px, 0, 0); }
.a-venir[data-effet="droite"] { transform: translate3d(44px, 0, 0); }
.a-venir[data-effet="zoom"] { transform: scale(.94); }
/* Sur un écran étroit, rien n'arrive de côté : un élément décalé hors du
   bord ferait apparaître une barre de défilement horizontale. */
@media (max-width: 940px) {
  .a-venir[data-effet="gauche"], .a-venir[data-effet="droite"] { transform: translate3d(0, 38px, 0); }
}
main > .section, .site-footer { overflow-x: clip; }
.a-venir[data-effet="etape"] { transform: translate3d(0, 18px, 0); }
.a-venir.est-la {
  opacity: 1; transform: none;
  transition: opacity .7s var(--entree), transform 1s var(--entree);
  transition-delay: calc(var(--rang, 0) * 90ms);
}
.a-venir.est-la[data-effet="etape"] { transition-delay: calc(var(--rang, 0) * 180ms); }

/* Le schéma de la chaîne se trace d'une étape à l'autre. */
.circuit-etape.a-venir::before { transform: scaleX(0); transform-origin: left center; }
.circuit-etape.a-venir::after { opacity: 0; }
.circuit-etape.a-venir.est-la::before {
  transform: scaleX(1);
  transition: transform .6s var(--entree) calc(var(--rang, 0) * 180ms - 120ms);
}
.circuit-etape.a-venir.est-la::after { opacity: 1; transition: opacity .3s calc(var(--rang, 0) * 180ms + 300ms); }
@media (max-width: 720px) {
  .circuit-etape.a-venir::before { transform: scaleY(0); transform-origin: center top; }
  .circuit-etape.a-venir.est-la::before { transform: scaleY(1); }
}

/* ---------- Progression de lecture des fiches ---------- */
.progression { display: none; }
@supports (animation-timeline: scroll()) {
  .progression {
    display: block; position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px;
    background: linear-gradient(to right, var(--vert), #8fd98a);
    transform-origin: left center;
    animation: progression linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Menus et questions qui s'ouvrent ---------- */
@keyframes panneau { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
.nav-groupe[open] > .nav-panneau { animation: panneau .28s var(--entree); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .4s var(--entree), content-visibility .4s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Au survol ----------
   Les cartes se soulèvent, les flèches avancent : un retour immédiat, sans
   rien déplacer autour. */
.ressource { transition: transform .35s var(--entree), box-shadow .35s var(--entree), border-color .25s; }
.ressource:hover { transform: translateY(-4px); }
.ressource:hover .ressource-visuel img { transform: scale(1.04); }
.ressource-visuel img { transition: transform .8s var(--entree); }
.renvois a svg { transition: transform .3s var(--entree); }
.renvois a:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero-content > *, .guide-entete-texte > *, .fil-ariane, .hero-badge,
  .hero-visual picture img, .guide-couverture img { animation: none; }
  .hero-visual picture::after, .guide-couverture::after { display: none; }
  .progression { display: none; }
  .nav-groupe[open] > .nav-panneau { animation: none; }
  .ressource:hover, .ressource:hover .ressource-visuel img { transform: none; }
}