/* =========================================================================
   ESDI : pages intérieures.

   Complète accueil.css (jetons, boutons, en-tête, pied, sections « contact »,
   « manager » et « travaux » réemployées telles quelles). Ici, seulement ce
   que l'accueil n'a pas : le bandeau d'ouverture d'une page, la gamme de
   prestations, les étapes d'un projet, la journée type d'ESDI Manager, la
   galerie des réalisations, le formulaire de contact et la colonne de lecture
   des pages légales, avec son sommaire.

   Mêmes partis pris : des filets plutôt que des cartes, un seul aplat bleu par
   page au plus, une seule animation d'entrée (le bandeau), et sur chaque page
   un unique moment de mouvement propre à son contenu.
   Chargée APRÈS accueil.css : ses règles l'emportent.
   ========================================================================= */

/* La feuille de base ne neutralise que les <ul>. Les listes ordonnées de ces
   pages portent leur propre numérotation (pastilles des étapes, heures de la
   journée, entrées du sommaire) : celle du navigateur doublerait la leur. */
.etapes, .journee, .sommaire ol { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------ Bandeau */
/* L'ouverture d'une page intérieure : un titre un cran sous celui de
   l'accueil, une phrase, deux actions, et à droite le visuel propre à la
   page. Même entrée décalée que le hero, depuis un état visible. */
.bandeau { padding-block: clamp(3.25rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.bandeau-grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .bandeau-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.bandeau h1 { font-size: clamp(2.25rem, 5.2vw, 3.875rem); margin-bottom: 1.5rem; }
.bandeau h1 em { font-style: normal; color: var(--bleu); }
html.esdi-sombre .bandeau h1 em { color: #6fcfdc; }
.bandeau .prose { margin-bottom: 2rem; }
.bandeau-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.bandeau-note { margin-top: 1.5rem; font-size: .875rem; color: var(--encre-2); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.bandeau-note span { display: inline-flex; align-items: center; gap: .45rem; }
.bandeau-note .ic { width: 16px; height: 16px; }
/* Sans visuel : le bandeau se resserre et le texte garde sa mesure. */
.bandeau-seul { max-width: 46rem; }
.bandeau-seul .prose { max-width: 40rem; margin-bottom: 0; }
.serre { padding-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .bandeau [data-m], .contact-page [data-m] { animation: monte .7s var(--sortie) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .bandeau-visuel img { animation: pose .9s var(--sortie) both; animation-delay: .3s; }
  .bandeau-visuel img:nth-child(2) { animation-delay: .42s; }
}

/* Deux captures : la grande à droite, la petite qui la recouvre en bas à
   gauche, comme deux tirages posés l'un sur l'autre. Différent de la pile
   en éventail de l'accueil, même famille. */
.vitrine { position: relative; padding-bottom: 12%; }
.vitrine img, .duo img {
  aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 12px; border: 1px solid var(--filet); box-shadow: var(--ombre-2); background: var(--surface);
}
.vitrine img:nth-child(1) { width: 86%; margin-left: auto; }
.vitrine img:nth-child(2) { position: absolute; left: 0; bottom: 0; width: 54%; }
/* Deux captures côte à côte, la première un peu plus haute. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; padding-top: 6%; }
.duo img:nth-child(1) { transform: translateY(-7%); }

/* ------------------------------------------------------------ Journée type */
/* Le visuel de la page IA n'est pas une capture : c'est une journée. Quatre
   heures, quatre choses faites pendant que le dirigeant travaille. Le trait
   vertical se trace au fil du défilement (CSS pur, hors du fil principal) ;
   sans prise en charge, il est là d'emblée. */
.journee { position: relative; padding-left: 5.25rem; display: grid; }
.journee::before {
  content: ""; position: absolute; left: 3.95rem; top: .6rem; bottom: .6rem; width: 2px;
  background: var(--turquoise); border-radius: 1px; transform-origin: top;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .journee::before { animation: tracer linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    @keyframes tracer { from { transform: scaleY(0); } }
  }
}
.journee li { position: relative; padding: .7rem 0 1.1rem; }
.journee li + li { border-top: 1px solid var(--filet); }
.journee li::before {
  content: ""; position: absolute; left: -1.62rem; top: 1.05rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--fond); border: 2px solid var(--turquoise);
}
.journee time {
  position: absolute; left: -5.25rem; top: .85rem; width: 3rem; text-align: right;
  font-size: .8125rem; font-weight: 700; color: var(--encre-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.journee b { display: block; font-weight: 600; color: var(--encre); font-size: 1.0625rem; letter-spacing: -.01em; }
.journee span { display: block; margin-top: .2rem; color: var(--encre-2); font-size: .9375rem; line-height: 1.5; }
.journee-legende { margin-top: 1.25rem; padding-left: 5.25rem; font-size: .8125rem; color: var(--encre-3); }

/* ------------------------------------------------------------ Têtes de section */
/* Titre à gauche, phrase à droite : deux colonnes sur grand écran. */
.tete-2 { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .tete-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tete-2 .prose { font-size: 1rem; }
.surface { background: var(--surface); }

/* ------------------------------------------------------------ Gamme */
/* Les prestations forment une gamme, pas quatre cartes égales : une grille
   de deux colonnes séparées par des filets, l'icône en tête, la phrase en
   dessous. Le survol ne bouge rien. */
.gamme { display: grid; gap: 0 3.5rem; }
@media (min-width: 720px) { .gamme { grid-template-columns: 1fr 1fr; } }
.gamme > div { padding-block: 1.75rem 2rem; border-top: 1px solid var(--filet); }
.gamme .ic { width: 26px; height: 26px; margin-bottom: 1rem; }
.gamme h3 { font-size: 1.25rem; }
.gamme p { margin-top: .6rem; color: var(--encre-2); line-height: 1.55; max-width: 34rem; }

/* ------------------------------------------------------------ Étapes */
/* Un vrai déroulé, donc des numéros. Ils chevauchent le filet du haut :
   le trait relie les étapes, le chiffre marque le passage. Les étapes
   arrivent l'une après l'autre au défilement (60 ms d'écart), une fois. */
.etapes { display: grid; gap: 2.75rem 2rem; counter-reset: etape; }
@media (min-width: 640px) { .etapes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .etapes { grid-template-columns: repeat(4, 1fr); } .etapes-3 { grid-template-columns: repeat(3, 1fr); } }
.etapes li { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--filet-fort); counter-increment: etape; }
.etapes li::before {
  content: counter(etape); position: absolute; top: -16px; left: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bleu); color: #fff; font: 700 .8125rem/32px Inter, sans-serif; text-align: center;
  font-variant-numeric: tabular-nums;
}
.etapes h3 { font-size: 1.125rem; }
.etapes p { margin-top: .5rem; color: var(--encre-2); font-size: .9375rem; line-height: 1.55; }
.etapes li:nth-child(2) { transition-delay: 60ms; }
.etapes li:nth-child(3) { transition-delay: 120ms; }
.etapes li:nth-child(4) { transition-delay: 180ms; }

/* ------------------------------------------------------------ Situations */
/* Trois situations à lire, séparées par des filets verticaux sur grand écran. */
.situations { display: grid; gap: 2rem; }
@media (min-width: 900px) { .situations { grid-template-columns: repeat(3, 1fr); gap: 0; } }
@media (min-width: 900px) {
  .situations > div { padding: 0 2.25rem; }
  .situations > div:first-child { padding-left: 0; }
  .situations > div:last-child { padding-right: 0; }
  .situations > div + div { border-left: 1px solid var(--filet); }
}
.situations h3 { font-size: 1.25rem; }
.situations p { margin-top: .75rem; color: var(--encre-2); line-height: 1.55; }
.situations .ic { width: 24px; height: 24px; margin-bottom: .9rem; }

/* ------------------------------------------------------------ Coches */
.coches { display: grid; gap: .8rem 2rem; }
@media (min-width: 640px) { .coches { grid-template-columns: 1fr 1fr; } }
.coches li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: var(--encre-2); }
.coches li .ic { width: 18px; height: 18px; margin-top: .2rem; }
.coches b { color: var(--encre); font-weight: 600; }

/* ------------------------------------------------------------ Note */
/* Une précision qui compte (les données restent en France) : un filet, une
   icône, une phrase. Pas une carte, pas une alerte. */
.note { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.note .ic { width: 24px; height: 24px; margin-top: .1rem; }
.note b { color: var(--encre); font-weight: 600; }
.note p { color: var(--encre-2); line-height: 1.55; max-width: 60ch; }

/* ------------------------------------------------------------ Galerie */
/* Les deux premières réalisations en grand, les suivantes en demi-format :
   la hiérarchie dit ce qui est récent. Les cellules reprennent .travail. */
.galerie { display: grid; gap: 2.25rem 1.5rem; }
@media (min-width: 640px) { .galerie { grid-template-columns: repeat(6, 1fr); } .galerie .travail { grid-column: span 3; } }
@media (min-width: 1024px) { .galerie .travail:nth-child(n+3) { grid-column: span 2; } }
.galerie .travail h3 { font-size: 1.125rem; }
.travaux.trois { grid-template-columns: 1fr; }
@media (min-width: 640px) { .travaux.trois { grid-template-columns: repeat(3, 1fr); } }
.travail .statut { display: inline-block; margin-top: .5rem; font-size: .8125rem; color: var(--encre-3); }
.suite { margin-top: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------ Références par métier */
.groupes { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 640px) { .groupes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .groupes { grid-template-columns: repeat(4, 1fr); } }
.groupe h3 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--filet-fort); margin-bottom: .6rem; }
.groupe h3 .ic { width: 18px; height: 18px; }
.groupe li { padding: .38rem 0; font-size: .9375rem; color: var(--encre-2); line-height: 1.4; }
.groupe li i { font-style: normal; color: var(--encre-3); font-size: .8125rem; margin-left: .3rem; white-space: nowrap; }
.groupes-note { margin-top: 2rem; font-size: .875rem; color: var(--encre-3); }

/* Liste courte en ligne : les logiciels livrés, séparés par des filets. */
.enligne-intro { margin-top: clamp(2.5rem, 5vw, 3.5rem); color: var(--encre-2); }
.enligne { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: 1rem; }
.enligne li { font-size: .9375rem; color: var(--encre-2); padding: .3rem .85rem; border: 1px solid var(--filet); border-radius: 999px; }
.enligne li i { font-style: normal; color: var(--encre-3); font-size: .8125rem; margin-left: .25rem; }

/* ------------------------------------------------------------ Contact */
.contact-page { padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(3rem, 6vw, 5rem); }
.contact-page-grille { display: grid; gap: 3rem 4rem; align-items: start; }
@media (min-width: 960px) { .contact-page-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.contact-page h1 { font-size: clamp(2.25rem, 5.2vw, 3.875rem); }
.contact-page .tel { margin-top: 2rem; }
.coordonnees { margin-top: 2rem; display: grid; gap: 1rem; }
.coordonnees li { display: flex; gap: .75rem; align-items: flex-start; color: var(--encre-2); line-height: 1.5; }
.coordonnees .ic { color: var(--turquoise); margin-top: .2rem; }
.coordonnees a { color: var(--encre); text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .coordonnees a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--turquoise); } }
.coordonnees .lien { margin-top: .35rem; font-size: .875rem; }
.contact-page .garanties { margin-top: 2rem; }

/* Le formulaire est le seul objet posé de la page : une surface, un filet,
   des coins de 16 px. À l'intérieur, les champs de FluentForm reprennent la
   grammaire des boutons du site (hauteur 3 rem, rayon 10 px, focus turquoise). */
.formulaire { background: var(--surface); border: 1px solid var(--filet); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2.25rem); }
.formulaire h2 { font-size: 1.375rem; letter-spacing: -.02em; }
.formulaire > p { margin-top: .5rem; color: var(--encre-2); font-size: .9375rem; }
.formulaire .frm-fluent-form { margin-top: 1.5rem; }
.formulaire .frm-fluent-form .ff-el-group { margin-bottom: 1.1rem; }
.formulaire .ff-el-input--label { margin-bottom: .4rem; }
.formulaire .ff-el-input--label label { font-weight: 600; font-size: .9375rem; color: var(--encre); }
.formulaire .ff-el-is-required.asterisk-right label::after,
.formulaire .ff-el-is-required.asterisk-right label:after { color: var(--turquoise) !important; }
.formulaire .ff-el-form-control {
  display: block; width: 100%; height: 3rem; padding: 0 .9rem;
  border: 1px solid var(--filet-fort); border-radius: 10px;
  background: var(--fond); color: var(--encre);
  font: 400 1rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
  box-shadow: none;
  transition: border-color .15s var(--sortie), box-shadow .15s var(--sortie);
}
.formulaire textarea.ff-el-form-control { height: auto; min-height: 8.5rem; padding: .8rem .9rem; resize: vertical; line-height: 1.5; }
.formulaire select.ff-el-form-control {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a6079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
html.esdi-sombre .formulaire select.ff-el-form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239fb1c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.formulaire .ff-el-form-control::placeholder { color: var(--encre-3); opacity: 1; }
.formulaire .ff-el-form-control:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px rgb(63 190 204 / .28); }
/* Erreur : le champ et le message, en rouge lisible sur les deux fonds. */
.formulaire .ff-el-is-error .ff-el-form-control { border-color: #c2412f; }
.formulaire .ff-el-is-error .text-danger, .formulaire .error.text-danger { color: #b23a2a; font-size: .875rem; margin-top: .35rem; }
html.esdi-sombre .formulaire .ff-el-is-error .text-danger, html.esdi-sombre .formulaire .error.text-danger { color: #ff9a8b; }
/* Le bouton d'envoi est un .btn-plein. */
.formulaire .ff-btn-submit, .formulaire .ff_btn_style {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .55rem;
  height: 3rem !important; padding: 0 1.5rem !important; border-radius: 999px !important; border: 1px solid transparent !important;
  background: var(--bleu) !important; color: #fff !important;
  font: 600 .9375rem/1 Inter, sans-serif !important; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgb(27 90 168 / .3) !important;
  transition: background-color .18s var(--sortie), transform .16s var(--sortie), box-shadow .18s var(--sortie);
}
.formulaire .ff-btn-submit:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .formulaire .ff-btn-submit:hover { background: var(--bleu-fonce) !important; transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgb(27 90 168 / .5) !important; }
}
.formulaire .ff-btn-submit:disabled { opacity: .6; cursor: progress; transform: none; }
.formulaire .ff_submit_btn_wrapper { margin-top: .5rem; margin-bottom: 0; }
/* Envoyé : un message posé sur un fond turquoise très pâle, pas une bannière. */
.formulaire .ff-message-success {
  margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: 10px;
  background: rgb(63 190 204 / .12); border: 1px solid rgb(63 190 204 / .4); color: var(--encre);
}
.formulaire .ff-message-success p { margin: 0; }
.formulaire-note { margin-top: 1rem; font-size: .8125rem; color: var(--encre-3); }
.formulaire-note a { color: inherit; text-underline-offset: 3px; }

/* ------------------------------------------------------------ Lecture */
/* Mentions légales et politique de confidentialité : de la lecture. Un
   sommaire à gauche, collé au défilement, qui indique où l'on est ; à droite
   la mesure d'un livre. Les titres sont numérotés parce que le document
   l'est : on s'y réfère par article. */
.lecture { padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.lecture-tete { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lecture-tete h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.lecture-tete .maj { margin-top: 1rem; font-size: .875rem; color: var(--encre-3); display: inline-flex; align-items: center; gap: .45rem; }
.lecture-tete .maj .ic { width: 16px; height: 16px; }
.lecture-tete .prose { margin-top: 1.5rem; }
.lecture-grille { display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 960px) { .lecture-grille { grid-template-columns: 15rem minmax(0, 1fr); } }
.sommaire { font-size: .9375rem; }
@media (min-width: 960px) { .sommaire { position: sticky; top: 6rem; } }
.sommaire p { font-size: .8125rem; font-weight: 700; color: var(--encre); margin-bottom: .6rem; }
.sommaire ol { display: grid; }
@media (max-width: 959px) { .sommaire ol { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; } }
.sommaire a {
  display: block; padding: .38rem 0 .38rem .85rem; border-left: 1px solid var(--filet);
  color: var(--encre-2); text-decoration: none; line-height: 1.4;
  transition: color .15s var(--sortie), border-color .15s var(--sortie);
}
.sommaire a[aria-current] { border-left-color: var(--bleu); color: var(--encre); font-weight: 600; }
html.esdi-sombre .sommaire a[aria-current] { border-left-color: #6fcfdc; }
@media (hover: hover) and (pointer: fine) { .sommaire a:hover { color: var(--encre); border-left-color: var(--filet-fort); } }
.texte { max-width: 68ch; }
.texte h2 { font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.25; margin-top: 2.75rem; scroll-margin-top: 6.5rem; }
.texte h2:first-child { margin-top: 0; }
.texte p, .texte li { color: var(--encre-2); line-height: 1.7; }
.texte h2 + p, .texte p + p, .texte ul, .texte p + ul, .texte ul + p, .texte dl + p { margin-top: .9rem; }
.texte ul { list-style: disc; padding-left: 1.25rem; }
.texte li + li { margin-top: .4rem; }
.texte li::marker { color: var(--turquoise); }
.texte strong { color: var(--encre); font-weight: 600; }
.texte a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(27 90 168 / .4); }
html.esdi-sombre .texte a { color: #6fcfdc; text-decoration-color: rgb(111 207 220 / .4); }
.texte dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin-top: .9rem; }
.texte dt { color: var(--encre); font-weight: 600; }
.texte dd { margin: 0; color: var(--encre-2); }
@media (max-width: 480px) { .texte dl { grid-template-columns: 1fr; gap: .1rem; } .texte dd { margin-bottom: .6rem; } }
.lecture-retour { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.lecture-retour .lien { margin-top: 0; }

/* ------------------------------------------------------------ Navigation */
/* La page courante est marquée dans le menu (esdi.js pose aria-current). */
.nav a[aria-current="page"] { color: var(--encre); font-weight: 600; }
.menu-panneau li a[aria-current="page"] { color: var(--bleu); }
html.esdi-sombre .menu-panneau li a[aria-current="page"] { color: #6fcfdc; }

/* ------------------------------------------------------------ Raccourcis */
/* En bas de la page contact : les trois métiers, pour qui est arrivé ici
   sans savoir lequel le concerne. */
.raccourcis { display: grid; border-top: 1px solid var(--filet); }
@media (min-width: 720px) { .raccourcis { grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; } }
.raccourcis a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--filet); color: var(--encre); text-decoration: none; font-weight: 600; }
.raccourcis a span { display: flex; align-items: center; gap: .75rem; }
.raccourcis a .ic-fleche { color: var(--encre-3); }
@media (hover: hover) and (pointer: fine) { .raccourcis a:hover .ic-fleche { transform: translateX(3px); color: var(--encre); } }

/* ------------------------------------------------------------ Formulaire guidé */
/* Trois temps. Les deux premiers sont des tuiles à choisir, sans rien à
   taper : un loueur de ski n'a pas à décrire son besoin en termes de métier,
   il le reconnaît. Le troisième demande le strict nécessaire pour rappeler.
   esdi.js découpe le formulaire FluentForm en panneaux à partir des classes
   etape-1, etape-2, etape-3 ; sans script, tout s'affiche à la suite. */
.formulaire-tete h2 { font-size: 1.5rem; }
.formulaire-guide .frm-fluent-form { margin-top: 1.25rem; }

/* Progression : trois barres, celle en cours en bleu, les faites en turquoise. */
.progression { margin-top: 1.5rem; }
.progression[hidden] { display: none; }
.progression-compte { font-size: .8125rem; color: var(--encre-3); margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.progression ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.progression li { display: grid; gap: .5rem; font-size: .8125rem; color: var(--encre-3); }
.progression .barre { height: 4px; border-radius: 2px; background: var(--filet-fort); transition: background-color .25s var(--sortie); }
.progression li.faite .barre { background: var(--turquoise); }
.progression li.active .barre { background: var(--bleu); }
.progression li.active { color: var(--encre); font-weight: 600; }
.progression li.faite { color: var(--encre-2); }
html.esdi-sombre .progression li.active .barre { background: #6fcfdc; }

/* Tuiles : la question en titre, les réponses en cases larges, l'icône à
   gauche, la coche qui apparaît à droite quand la case est choisie. Le bouton
   radio natif reste dans la page pour le clavier et les lecteurs d'écran ;
   il est seulement invisible. */
.tuiles .ff-el-input--label { margin-bottom: 1rem; }
.tuiles .ff-el-input--label label { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--encre); }
.tuiles .ff-el-input--content { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 440px) { .tuiles .ff-el-input--content { grid-template-columns: 1fr; } }
/* La question porte déjà son obligation : pas d'astérisque sur les tuiles. */
.formulaire .tuiles .ff-el-input--label label::after { display: none; }
/* Les cases d'une même rangée font la même hauteur : l'enveloppe de chaque
   case s'efface, les étiquettes deviennent elles-mêmes les cellules de la
   grille et s'étirent sur la rangée. */
.formulaire .tuiles .ff-el-form-check { margin: 0; padding: 0; display: contents; }
.formulaire .tuiles .ff-el-form-check-label {
  position: relative; display: flex; align-items: center; gap: .75rem; min-height: 3.5rem;
  /* FluentForm pose 7 px sous chaque étiquette sauf la dernière, en force :
     sans ce zéro, deux cases d'une même rangée n'ont pas la même hauteur. */
  margin: 0 !important;
  padding: .8rem 2.6rem .8rem 1rem; border: 1px solid var(--filet-fort); border-radius: 12px;
  background: var(--fond); color: var(--encre); font-weight: 600; font-size: .9375rem; line-height: 1.3; cursor: pointer;
  transition: border-color .15s var(--sortie), background-color .15s var(--sortie), transform .16s var(--sortie), box-shadow .15s var(--sortie);
}
.formulaire .tuiles .ff-el-form-check-label .ic { width: 22px; height: 22px; color: var(--turquoise); flex: none; }
.formulaire .tuiles .ff-el-form-check-label span { flex: 1; }
.formulaire .tuiles .ff-el-form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.formulaire .tuiles .ff-el-form-check-label:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .formulaire .tuiles .ff-el-form-check-label:hover { border-color: var(--encre); } }
.formulaire .tuiles .ff-el-form-check-label:has(input:checked),
.formulaire .tuiles .ff-el-form-check.choisie .ff-el-form-check-label {
  border-color: var(--turquoise); box-shadow: inset 0 0 0 1px var(--turquoise); background: rgb(63 190 204 / .08);
}
.formulaire .tuiles .ff-el-form-check-label:has(input:focus-visible) { outline: 2px solid var(--turquoise); outline-offset: 3px; }
.formulaire .tuiles .ff-el-form-check-label::after {
  content: ""; position: absolute; right: .9rem; top: 50%; width: 20px; height: 20px;
  transform: translateY(-50%) scale(.6); opacity: 0; border-radius: 50%;
  background: var(--turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: opacity .15s var(--sortie), transform .2s var(--sortie);
}
.formulaire .tuiles .ff-el-form-check-label:has(input:checked)::after,
.formulaire .tuiles .ff-el-form-check.choisie .ff-el-form-check-label::after { opacity: 1; transform: translateY(-50%) scale(1); }
/* L'erreur d'un choix manquant s'écrit sous la grille, pas dans une bulle. */
.formulaire .tuiles .ff-el-is-error .text-danger { grid-column: 1 / -1; }

/* Panneaux : un seul visible, il arrive de la droite en 240 ms. */
.etape-panneau { display: grid; gap: 1.1rem; }
.etape-panneau[hidden] { display: none; }
.etape-panneau[data-etape="3"] { grid-template-columns: 1fr 1fr; }
.etape-panneau[data-etape="3"] > .pleine, .etape-panneau[data-etape="3"] > .etape-nav,
.etape-panneau[data-etape="3"] > .recap, .etape-panneau[data-etape="3"] > .etape-message { grid-column: 1 / -1; }
@media (max-width: 520px) { .etape-panneau[data-etape="3"] { grid-template-columns: 1fr; } }
.formulaire-guide .frm-fluent-form .ff-el-group { margin-bottom: 0; }
.formulaire-guide .ff-el-help-message { font-size: .8125rem; font-style: normal; color: var(--encre-3); margin-top: .35rem; }
/* La note de confidentialité n'a de sens qu'au moment d'envoyer. */
.formulaire-guide[data-etape]:not([data-etape="3"]) .formulaire-note { display: none; }
/* Quand le script ramène le formulaire sous les yeux, l'en-tête collant ne doit pas le couvrir. */
.formulaire-guide { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: no-preference) {
  .etape-panneau.arrive { animation: glisser .24s var(--sortie); }
  @keyframes glisser { from { opacity: 0; transform: translateX(14px); } }
}
.etape-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.etape-nav .ff_submit_btn_wrapper, .etape-nav .etape-suivant { margin: 0 0 0 auto; }
.etape-retour {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .25rem; margin: 0;
  background: none; border: 0; color: var(--encre-2); font: 500 .9375rem/1 Inter, sans-serif; cursor: pointer;
  transition: color .15s var(--sortie);
}
.etape-retour .ic { width: 16px; height: 16px; }
.etape-retour[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .etape-retour:hover { color: var(--encre); } }
.etape-message { color: #b23a2a; font-size: .875rem; margin: 0; }
html.esdi-sombre .etape-message { color: #ff9a8b; }

/* Le récapitulatif reprend les deux choix en une phrase, avant les coordonnées. */
.recap { display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 10px; background: rgb(63 190 204 / .10); color: var(--encre); font-size: .9375rem; line-height: 1.45; }
.recap .ic { color: var(--turquoise); flex: none; margin-top: .1rem; }
.recap b { font-weight: 600; }

/* Envoyé : une coche, deux lignes. */
.formulaire .ff-message-success { display: flex; gap: .9rem; align-items: flex-start; padding: 1.25rem; font-size: 1rem; line-height: 1.5; }
.formulaire .ff-message-success .ic { width: 28px; height: 28px; color: var(--turquoise); flex: none; }
.formulaire .ff-message-success p + p { margin-top: .3rem; color: var(--encre-2); }
@media (prefers-reduced-motion: no-preference) {
  .formulaire .ff-message-success.arrive { animation: monte .5s var(--sortie); }
}

/* ------------------------------------------------------------ Questions fréquentes */
/* Des réponses directes, écrites pour être lues telles quelles, par un
   visiteur comme par un assistant. Le titre à gauche, les questions à droite
   en accordéon natif : rien de masqué au repos, la question reste visible,
   la réponse se déplie sans script. */
.faq-grille { display: grid; gap: 2rem 4rem; align-items: start; }
@media (min-width: 900px) { .faq-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .faq-tete { position: sticky; top: 6rem; } }
.faq-tete .prose { margin-top: 1rem; }
.faq-q { border-top: 1px solid var(--filet); }
.faq-q:last-child { border-bottom: 1px solid var(--filet); }
.faq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--encre);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary .ic { flex: none; color: var(--encre-3); transition: transform .2s var(--sortie), color .15s var(--sortie); }
.faq-q[open] summary .ic { transform: rotate(180deg); color: var(--turquoise); }
@media (hover: hover) and (pointer: fine) { .faq-q summary:hover .ic { color: var(--encre); } }
.faq-q summary:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; border-radius: 4px; }
.faq-r { padding: 0 2.5rem 1.25rem 0; color: var(--encre-2); line-height: 1.6; max-width: 60ch; }
@media (prefers-reduced-motion: no-preference) { .faq-q[open] .faq-r { animation: monte .3s var(--sortie); } }

/* ------------------------------------------------------------ Actualités */
/* La liste : les deux articles les plus récents en grand, les suivants en
   demi-format, comme la galerie des réalisations. Chaque carte est une
   image, une ligne de repères (rubrique, date), un titre, un extrait. */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filtres .wp-block-categories-list { display: contents; }
.filtres .wp-block-categories-list li { list-style: none; margin: 0; }
.filtre, .filtres .wp-block-categories-list a {
  display: inline-flex; align-items: center; padding: .45rem .95rem; border-radius: 999px;
  border: 1px solid var(--filet-fort); color: var(--encre-2); font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: border-color .15s var(--sortie), color .15s var(--sortie), background-color .15s var(--sortie);
}
@media (hover: hover) and (pointer: fine) { .filtre:hover, .filtres .wp-block-categories-list a:hover { border-color: var(--encre); color: var(--encre); } }
.filtre-actif, .filtres .wp-block-categories-list .current-cat > a { background: var(--bleu); border-color: var(--bleu); color: #fff; }
html.esdi-sombre .filtre-actif, html.esdi-sombre .filtres .wp-block-categories-list .current-cat > a { color: #fff; }
.actus-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 1.5rem; }
/* WordPress espace les enfants d une mise en page en flux par une marge haute :
   dans une grille, elle decalait les cartes d une meme rangee. */
.actus-grille > li, .actus-grille > li > .actu > * { margin-block-start: 0 !important; }
.actu > * + * { margin-block-start: 0 !important; }
@media (min-width: 640px) { .actus-grille { grid-template-columns: repeat(6, 1fr); } .actus-grille > li { grid-column: span 3; } }
@media (min-width: 1024px) { .actus-grille > li:nth-child(n+3) { grid-column: span 2; } }
.actu .wp-block-post-featured-image { margin: 0; }
.actu .wp-block-post-featured-image img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--filet); box-shadow: var(--ombre-1); background: var(--surface);
  transition: transform .25s var(--sortie), box-shadow .25s var(--sortie);
}
@media (hover: hover) and (pointer: fine) { .actu:hover .wp-block-post-featured-image img { transform: translateY(-4px); box-shadow: var(--ombre-2); } }
.actu-meta { display: flex; flex-wrap: wrap; gap: .35rem .85rem; align-items: center; margin-top: 1rem; font-size: .8125rem; color: var(--encre-3); }
.actu-meta .wp-block-post-date, .actu-meta .wp-block-post-author-name { font-variant-numeric: tabular-nums; }
.actu-meta .wp-block-post-terms a { color: var(--bleu); font-weight: 600; text-decoration: none; }
html.esdi-sombre .actu-meta .wp-block-post-terms a { color: #6fcfdc; }
.actu .wp-block-post-title { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; margin-top: .5rem; }
.actus-grille > li:nth-child(-n+2) .wp-block-post-title { font-size: clamp(1.375rem, 2vw, 1.625rem); }
.actu .wp-block-post-title a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .actu .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--turquoise); } }
.actu .wp-block-post-excerpt__excerpt { margin-top: .5rem; color: var(--encre-2); font-size: .9375rem; line-height: 1.55; }
.actu .wp-block-post-excerpt__more-text { margin-top: .5rem; }
.actu .wp-block-post-excerpt__more-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; font-weight: 600; color: var(--bleu); text-decoration: none; }
html.esdi-sombre .actu .wp-block-post-excerpt__more-link { color: #6fcfdc; }
.pagination { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--filet); font-size: .9375rem; }
.pagination a, .pagination .page-numbers { color: var(--encre-2); text-decoration: none; padding: .4rem .6rem; border-radius: 8px; }
.pagination .page-numbers.current { color: var(--encre); font-weight: 600; background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .pagination a:hover { color: var(--encre); } }

/* L'article : la mesure d'un livre, un chapeau, une image pleine largeur de
   colonne, l'auteur nommé en fin. Les dates sont visibles : c'est un
   article, on doit savoir quand il a été écrit. */
.article { padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.article-tete { max-width: 46rem; }
.article-tete .retour { margin-bottom: 1.25rem; }
.article-tete .retour .lien { margin-top: 0; font-size: .875rem; }
.article-tete .wp-block-post-title { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.article-meta { margin-top: 1.25rem; font-size: .875rem; color: var(--encre-2); }
.article-meta .wp-block-post-author-name { font-weight: 600; color: var(--encre); }
.article-chapo p, .article-chapo .wp-block-post-excerpt__excerpt { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--encre-2); }
.article-chapo .wp-block-post-excerpt__more-text { display: none; }
.article-image { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 60rem; }
.article-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--filet); box-shadow: var(--ombre-1); }
.article-corps { max-width: 68ch; margin-top: clamp(2rem, 4vw, 3rem); font-size: 1.0625rem; line-height: 1.7; color: var(--encre-2); }
.article-corps .wp-block-post-content > p, .article-corps .wp-block-post-content > ul, .article-corps .wp-block-post-content > ol { max-width: none; }
.article-corps h2 { font-size: 1.5rem; color: var(--encre); margin-top: 2.5rem; letter-spacing: -.02em; line-height: 1.25; }
.article-corps h3 { font-size: 1.2rem; color: var(--encre); margin-top: 1.75rem; letter-spacing: -.01em; line-height: 1.3; }
.article-corps h2 + p, .article-corps h3 + p, .article-corps p + p, .article-corps ul, .article-corps ol, .article-corps figure, .article-corps blockquote { margin-top: 1rem; }
.article-corps ul { list-style: disc; padding-left: 1.25rem; }
.article-corps ol { list-style: decimal; padding-left: 1.25rem; }
.article-corps li + li { margin-top: .35rem; }
.article-corps li::marker { color: var(--turquoise); }
.article-corps strong { color: var(--encre); font-weight: 600; }
.article-corps a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(27 90 168 / .4); }
html.esdi-sombre .article-corps a { color: #6fcfdc; text-decoration-color: rgb(111 207 220 / .4); }
.article-corps blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 1px solid var(--filet-fort); color: var(--encre); font-size: 1.125rem; line-height: 1.55; }
.article-corps blockquote p { margin: 0; }
.article-corps blockquote cite { display: block; margin-top: .5rem; font-size: .875rem; font-style: normal; color: var(--encre-3); }
.article-corps figure img { border-radius: 10px; border: 1px solid var(--filet); }
.article-corps figcaption { margin-top: .5rem; font-size: .8125rem; color: var(--encre-3); }
.auteur { max-width: 68ch; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.auteur-etiquette { font-size: .8125rem; color: var(--encre-3); margin-bottom: .35rem; }
.auteur .wp-block-post-author-name { font-weight: 600; color: var(--encre); }
.auteur .wp-block-post-author-biography { margin-top: .25rem; color: var(--encre-2); font-size: .9375rem; line-height: 1.55; }
.article-nav { max-width: 68ch; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); gap: 1rem 2rem; font-size: .9375rem; }
.article-nav .wp-block-post-navigation-link a { color: var(--encre); font-weight: 600; text-decoration: none; }
.article-nav .post-navigation-link__label { display: block; font-size: .8125rem; color: var(--encre-3); font-weight: 400; margin-bottom: .2rem; }
.article-nav .post-navigation-link-next { text-align: right; margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .article-nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--turquoise); } }

@media (prefers-reduced-motion: reduce) {
  .bandeau [data-m], .contact-page [data-m], .bandeau-visuel img { animation: none !important; }
  .etapes li { transition-delay: 0s !important; }
  .etape-panneau.arrive, .formulaire .ff-message-success.arrive, .faq-q[open] .faq-r { animation: none !important; }
  .actu:hover .wp-block-post-featured-image img { transform: none; }
}