/* ==========================================================================
   LES PAGES ACCOMPAGNEMENT
   Crescere SB, 16 septembre 2026.

   Style commun a la page pivot et aux quatre pages de detail. Le systeme,
   couleurs, titres, plaques de verre, boutons, vient de la-lueur.css : ce
   fichier n'ecrit que les composants propres a ces cinq pages.

   Les tailles de texte reprennent les marches deja presentes sur le site,
   sans en inventer de nouvelles : 0,6875 ; 0,75 ; 0,8125 ; 0,9375 ; 1 ;
   1,0625 et 1,125 rem.

   TOUTE PLAQUE QU'UNE LUEUR TRAVERSE porte position: relative et
   overflow: hidden. Sans les deux, la lueur sort du document et l'elargit.
   ========================================================================== */

/* Un element masque par hidden le reste, quelle que soit la regle de mise en
   page qui le vise. */
[data-simulateur] [hidden],
[data-ligne][hidden] { display: none !important; }

.zone--serree { padding-block: clamp(1rem, 2.5vh, 1.75rem); }

/* Les cibles d'ancre gardent une marge sous la barre fixe. Le script de
   mouvement vise a la main, mais le saut natif du navigateur a la fin du
   chargement passe parfois apres lui. */
.zone[id], .carte[id], .suivi[id] { scroll-margin-top: 8rem; }

.haut__rassurance { margin: 1rem 0 0; font-size: 0.9375rem; color: rgba(var(--creme-rvb), 0.76); }
.mention-tva { margin: 0.9rem 0 0; font-size: 0.8125rem; color: rgba(var(--creme-rvb), 0.72); }

/* LES TEXTES PRENNENT LA LARGEUR DE LA PAGE
   Demande de Sam le 17 septembre 2026, sur le chapeau du haut : trois
   lignes pour une phrase qui tient en deux, parce que la regle commune
   .texte plafonne a 52 caracteres. Sur ces cinq pages, tout bloc de texte
   seul dans sa plaque prend la largeur disponible ; les paragraphes qui
   vivent dans une colonne gardent leur plafond, la colonne le donne deja.

   text-wrap: balance repartit les deux lignes a egalite au lieu de
   laisser un mot seul en bas. */
.haut__chapeau { max-width: none; text-wrap: balance; }

/* Le titre reprend toute la ligne quand l'entete n'a pas de texte a sa
   droite. Sans cela, le titre du simulateur se coupait en deux a 1440 px,
   pour 807 px de colonne et 1339 px de page. */
.zone__entete--seul { grid-template-columns: minmax(0, 1fr); }

/* Le titre du simulateur descend d'un cran sous display--grand. La phrase
   que Sam a choisie le 18 septembre 2026 est plus longue que les autres
   titres de section : a la taille commune elle demandait 1760 px pour
   1339 px de page. Elle tient sur une ligne jusque vers 1000 px de large. */
.titre-simulateur { font-size: clamp(1.55rem, 2.65vw, 2.4rem); }
.or-fonce { color: var(--or-fonce); }


/* --------------------------------------------------------------------------
   LE SIMULATEUR
   -------------------------------------------------------------------------- */

.simulateur {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  background-color: rgba(23, 21, 15, 0.45);
}
@media (max-width: 860px) { .simulateur { grid-template-columns: minmax(0, 1fr); } }

.simulateur__champs { display: grid; gap: 1.6rem; align-content: start; }
.simulateur__libelle { display: block; margin-bottom: 0.65rem; font-size: 0.9375rem; font-weight: 600; color: var(--creme); }
.simulateur__saisie { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 1rem; align-items: center; }
/* LE CURSEUR, dessine a la main le 25 septembre 2026. Le curseur natif
   mesurait 16 px de haut : trop fin pour le pouce, et bleu ou gris selon
   le navigateur. La zone de prise monte a 28 px, la pastille a 22, et la
   part deja parcourue passe a l'or. Cette part est lue dans --plein, tenue
   a jour par assets/js/simulateur-temps-perdu.js. Sans script, la piste
   reste simplement vide, et le simulateur ne calcule de toute facon pas. */
.simulateur__curseur {
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.simulateur__curseur::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--or-clair) var(--plein, 0%), rgba(var(--creme-rvb), 0.16) var(--plein, 0%));
}
.simulateur__curseur::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(var(--creme-rvb), 0.16); }
.simulateur__curseur::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--or-clair); }
.simulateur__curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 3px solid var(--nuit);
  border-radius: 50%;
  background: var(--or-clair);
  box-shadow: 0 0 0 1px rgba(var(--or-rvb), 0.7), 0 0 18px rgba(232, 168, 26, 0.45);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.simulateur__curseur::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--nuit);
  border-radius: 50%;
  background: var(--or-clair);
  box-shadow: 0 0 0 1px rgba(var(--or-rvb), 0.7), 0 0 18px rgba(232, 168, 26, 0.45);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.simulateur__curseur:hover::-webkit-slider-thumb,
.simulateur__curseur:active::-webkit-slider-thumb { transform: scale(1.15); }
.simulateur__curseur:hover::-moz-range-thumb,
.simulateur__curseur:active::-moz-range-thumb { transform: scale(1.15); }
.simulateur__case {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: 600 1.125rem/1 var(--sans);
  color: var(--creme);
  text-align: right;
  background: rgba(232, 228, 220, 0.06);
  border: 1px solid var(--bord);
  border-radius: 10px;
}
.simulateur__case:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }
.simulateur__case[aria-invalid="true"] { border-color: var(--braise); }

.simulateur__sortie { display: grid; gap: 1.1rem; align-content: center; }
.simulateur__resultat { margin: 0; font-size: 1.125rem; color: rgba(var(--creme-rvb), 0.76); }
.simulateur__montant {
  display: block;
  margin: 0.35rem 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 80, 'wght' 800;
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--or-clair);
}
.simulateur__vide { margin: 0; font-size: 1.125rem; color: var(--creme); }
.simulateur__comparaison { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(var(--creme-rvb), 0.82); max-width: 44ch; }
.simulateur__comparaison [data-pourcentage] { color: var(--or-clair); font-weight: 600; }
.simulateur__sortie .bouton { justify-self: start; }


/* --------------------------------------------------------------------------
   L'ENCADRE : la loi, le sujet au choix, la maquette, la transparence
   -------------------------------------------------------------------------- */

.encadre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
  /* Un contour dore discret sur tout l encadre, et non une barre epaisse a
     gauche : ce trait est un tic d interface generique, et le chevron porte
     deja la signature. Retire le 17 septembre 2026. */
  border-color: rgba(var(--or-rvb), 0.34);
}
.encadre + .encadre { margin-top: 0.9rem; }
.encadre > *:not(svg) { grid-column: 2; }
.encadre .chevron-puce { width: 18px; margin-top: 0.45rem; }
.encadre p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: rgba(var(--creme-rvb), 0.82); }
.encadre p + p { margin-top: 0.95rem; }
.encadre strong { color: var(--creme); font-weight: 600; }


/* --------------------------------------------------------------------------
   LES TROIS CHIFFRES
   Demande de Sam le 17 septembre 2026 : reprendre la bande de preuve de
   l'ancienne page prestations, avec les etoiles qui se remplissent, et
   n'ecrire les trois chiffres qu'une seule fois par page, sous le bouton
   de prise de rendez-vous. La bande plate posee sous le simulateur et la
   ligne resumee en bas de page ont disparu avec cette demande.

   Les valeurs sont ecrites en clair dans la page : sans JavaScript, ou en
   mouvement reduit, elles sont deja la. Jamais un zero fige.
   -------------------------------------------------------------------------- */

.preuves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.15rem, 2.2vw, 1.85rem);
  background-color: rgba(23, 21, 15, 0.58);
  border: 1px solid var(--bord);
  border-radius: 16px;
}
@media (max-width: 760px) { .preuves { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } }

.preuve { display: flex; align-items: baseline; gap: 0.7rem; margin: 0; }
@media (max-width: 760px) { .preuve { justify-content: space-between; } }

.preuve__valeur {
  flex: none;
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 800;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--or-clair);
}
.preuve__unite { font-size: 0.55em; }
.preuve__libelle { font-size: 0.875rem; line-height: 1.35; color: rgba(var(--creme-rvb), 0.78); }

/* Les etoiles se remplissent par un masque en largeur et non par cinq
   images differentes : le 4,7 reste exact au dixieme pres. Meme geste que
   sur l'accueil, memes valeurs. */
.preuve__etoiles { position: relative; display: inline-block; line-height: 1; font-size: 0.95rem; letter-spacing: 0.08em; flex: none; }
.preuve__etoiles-vide { color: rgba(var(--creme-rvb), 0.28); }
.preuve__etoiles-pleine { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--or-clair); width: 94%; }

/* Dans la plaque de demarrage, les chiffres suivent le bouton dans une
   colonne etroite : ils s'empilent, sans fond ni contour, la plaque de
   verre les porte deja. */
.demarrage__actions .preuves {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
}


/* --------------------------------------------------------------------------
   LES QUATRE CARTES
   -------------------------------------------------------------------------- */

.cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
@media (max-width: 1200px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cartes { grid-template-columns: minmax(0, 1fr); } }

.carte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background-color: rgba(23, 21, 15, 0.4);
  transition: border-color 0.45s ease;
}
.carte:hover, .carte:focus-within { border-color: rgba(var(--or-rvb), 0.6); }
.picto-carte { width: 32px; height: 32px; fill: none; stroke: var(--or-clair); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.picto-carte--sombre { stroke: var(--or-fonce); }
.carte__titre { margin: 1.1rem 0 0; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 0.95; word-spacing: 0.1em; }
.carte__resultat { margin: 0.9rem 0 1.25rem; font-size: 0.9375rem; line-height: 1.6; color: rgba(var(--creme-rvb), 0.8); }
/* Le prix est pousse en bas de la carte : les quatre prix s'alignent, meme
   quand la carte Former porte sa mention OPCO en plus. */
.carte__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--bord); }
.carte__a-partir { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--creme-rvb), 0.72); }
.carte__montant {
  font-family: var(--display);
  font-variation-settings: 'wdth' 80, 'wght' 800;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--creme);
}
/* L'ETIQUETTE OPCO, a la place du paragraphe dore qui vivait ici.
   Demande de Sam le 17 septembre 2026 : les quatre cartes doivent avoir le
   meme format. Elle porte la duree minimale, comme toute mention d'OPCO sur
   le site : les sessions plus courtes que la demi-journee ne sont pas
   finançables, et la carte affiche un prix de depart qui en vient. */
.carte__etiquette {
  align-self: start;
  margin: -0.25rem 0 1.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(var(--or-rvb), 0.5);
  border-radius: 9px;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--or-clair);
}
.carte__lien { align-self: flex-start; margin-top: 1.1rem; }
/* Toute la carte est cliquable, sans imbriquer un lien dans un autre. */
.carte__lien::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* LA LUEUR DU RECALCUL. Posee par mouvement-accompagnement.js quand la
   saisie du simulateur se pose. Elle traversait les cartes tant qu'elles
   portaient un pourcentage ; depuis le 17 septembre 2026 les pourcentages
   ne sont plus que dans le simulateur, et la lueur le traverse lui. */
.simulateur::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(var(--or-rvb), 0.22) 50%, transparent 65%);
  transform: translateX(-110%);
}
.simulateur.est-recalculee::before { animation: lueur-recalcul 0.9s ease-out; }
@keyframes lueur-recalcul { from { transform: translateX(-110%); } to { transform: translateX(110%); } }


/* --------------------------------------------------------------------------
   LE BANDEAU « ET DANS SIX MOIS ? », sur la plaque claire
   -------------------------------------------------------------------------- */

.suivi { position: relative; overflow: hidden; display: grid; gap: 1rem; }
.suivi__tete { display: flex; align-items: center; gap: 1rem; }
/* LE TITRE ET LE TEXTE A LA TAILLE DES QUATRE CARTES. Demande de Sam le 17
   septembre 2026 : l'abonnement est la suite d'une prestation, pas une
   prestation plus grosse que les autres. Le titre etait en display--grand,
   trois fois la taille des titres de cartes. */
.suivi__titre { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 0.95; }
.suivi__texte { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: #2A2724; }
.suivi .mention-tva { color: #4A453F; }


/* --------------------------------------------------------------------------
   LES VOLETS : abonnement et questions. Des details du navigateur, qui
   s'ouvrent sans script.
   -------------------------------------------------------------------------- */

.volet { border-top: 1px solid var(--bord); }
.volet__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--creme);
  transition: color 0.35s ease;
}
.volet__resume::-webkit-details-marker { display: none; }
.volet__resume::marker { content: ''; }
.volet__resume:hover { color: var(--or-clair); }
.volet__resume:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 4px; border-radius: 4px; }
.volet__chevron { width: 14px; height: auto; flex: none; transform: rotate(180deg); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.volet__chevron path { fill: none; stroke: currentColor; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.volet[open] .volet__chevron { transform: rotate(0deg); }
.volet__contenu { padding-bottom: 1.25rem; }
.volet__contenu > p:not(.badge) { margin: 0; font-size: 1rem; line-height: 1.7; color: rgba(var(--creme-rvb), 0.8); }


/* LES DEUX FORMULES, OUVERTES. Elles vivaient dans un volet a ouvrir.
   Demande de Sam le 17 septembre 2026 : ce que couvre un abonnement se lit
   tout de suite, ligne par ligne, chaque ligne avec son picto. Le texte de
   la grille tarifaire est decoupe, pas reecrit. */
/* Les deux plaques font la meme hauteur. Depuis que le referent IA a perdu
   la ligne directe et son delai d'intervention, il compte quatre lignes
   contre six : posee en haut, la plaque recommandee flottait, plus courte
   que l'autre. */
.formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 760px) { .formules { grid-template-columns: minmax(0, 1fr); } }
.formule { padding: 1.4rem 1.5rem; border: 1px solid rgba(42, 39, 36, 0.18); border-radius: 14px; background: rgba(255, 255, 255, 0.35); }
.formule--recommandee { border-color: var(--or-fonce); box-shadow: inset 0 0 0 1px var(--or-fonce); }
/* LE BADGE SUR LA LIGNE DU NOM, et non au-dessus : les deux formules
   commencent alors a la meme hauteur, comme les quatre cartes. */
.formule__tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.formule__nom { margin: 0; color: #2A2724; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 0.95; }
.formule strong { color: #2A2724; font-weight: 700; }

.formule__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; margin: 0; font-size: 0.9375rem; color: #4A453F; }
.formule__montant {
  font-family: var(--display);
  font-variation-settings: 'wdth' 80, 'wght' 800;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #2A2724;
}
/* LE PRIX PAR MOIS SOUS LE PRIX PAR AN. Demande de Sam le 18 septembre
   2026. Le total annuel du paiement mensuel reste ecrit : il est plus
   eleve que le forfait paye en une fois, et la grille le dit. */
.formule__mensuel { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.5; color: #4A453F; }
.formule__points { display: grid; gap: 0.7rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.formule__points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #2A2724;
}
.formule__picto {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--or-fonce);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--or-clair);
  color: var(--nuit);
}


/* --------------------------------------------------------------------------
   LA FRISE DES PROJETS
   Pleine largeur, hors de l'enveloppe. Sans script, elle defile quand
   meme. En mouvement reduit, elle s'arrete et se lit en entier.
   -------------------------------------------------------------------------- */

.frise-projets {
  overflow: hidden;
  padding-block: 0.5rem 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* 130 s et non plus 70 : la frise est passee de neuf a dix-sept projets
   le 26 septembre 2026. A duree egale, elle aurait defile deux fois plus
   vite, trop pour lire un titre au passage. */
.frise-projets__piste { display: flex; width: max-content; animation: defile-projets 130s linear infinite; }
.frise-projets:hover .frise-projets__piste { animation-play-state: paused; }
.frise-projets__serie { display: flex; gap: 0.6rem; margin: 0; padding: 0 0.6rem 0 0; list-style: none; }
.frise-projets__serie li {
  display: flex;
  align-items: center;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--bord);
  border-radius: 100px;
  background: var(--verre);
  font-size: 0.9375rem;
  color: rgba(var(--creme-rvb), 0.82);
  white-space: nowrap;
}
@keyframes defile-projets { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.333%, 0, 0); } }

/* CHAQUE PROJET S'OUVRE SUR SA FICHE, voir assets/js/projets.js. La
   pastille recoit un vrai bouton, qui prend toute sa surface, et un petit
   « + » dore qui dit qu'il y a plus a lire. */
.frise-projets__serie li.porte-fiche { padding: 0; transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease; }
.frise-projets__serie li.porte-fiche:hover { border-color: rgba(var(--or-rvb), 0.55); color: var(--creme); background: rgba(232, 228, 220, 0.08); }
.frise-projets__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem 0.7rem 1.2rem;
  border: 0;
  border-radius: 100px;
  background: none;
  font: inherit;
  color: inherit;
  white-space: inherit;
  text-align: left;
  cursor: pointer;
}
.frise-projets__plus { width: 14px; height: 14px; flex: none; }
.frise-projets__plus path { fill: none; stroke: var(--or-clair); stroke-width: 1.8; stroke-linecap: round; }
/* Le bouton pause de la frise, voir data-defilement dans la-lueur.js. Il
   se pose dans le bas de la zone : on retire au rembourrage de la zone sa
   propre hauteur pour qu'il reste colle sous les pastilles. */
.zone:has(> .frise-projets) { --pause-bas: calc(clamp(2.5rem, 5.4vh, 3.5rem) - 2.1rem); }


/* --------------------------------------------------------------------------
   LA FAQ, COMMENT ON DEMARRE, LE PIED TARIFAIRE, LE RETOUR
   -------------------------------------------------------------------------- */

/* Les questions prennent la largeur de la page, comme les autres blocs.
   A 60 rem elles laissaient un tiers de la ligne vide a leur droite, et la
   page perdait son alignement d'un bloc a l'autre. */
.faq { max-width: none; }
.faq .volet:last-child { border-bottom: 1px solid var(--bord); }
.faq .volet__resume { font-size: 1.0625rem; }

.demarrage__etapes { counter-reset: etape; display: grid; gap: 0.9rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.demarrage__etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: baseline;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(var(--creme-rvb), 0.82);
}
.demarrage__etapes li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--display);
  font-variation-settings: 'wdth' 80, 'wght' 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--or-clair);
}
.demarrage__etapes .chevron-puce { transform: rotate(90deg); align-self: start; margin-top: 0.45rem; }
.demarrage__actions { flex-direction: column; align-items: flex-start; }

.pied-tarifaire {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bord);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(var(--creme-rvb), 0.72);
}

.retour { display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; text-decoration: none; }
.retour:hover { color: var(--creme); }
.retour .chevron-puce { transform: rotate(-90deg); }

/* LE FIL D'ARIANE des quatre pages de detail, pose le 20 septembre 2026.
   Il remplace le simple lien de retour. Les memes capitales que l'etiquette,
   le chevron du site en separateur, et la page courante en clair.

   Il est aussi declare en donnees structurees dans l'en-tete de la page :
   Google affiche alors ce chemin a la place de l'adresse dans ses
   resultats. Les deux doivent rester d'accord. */
.fil-ariane { flex-wrap: wrap; gap: 0.55rem; }
.fil-ariane a { color: inherit; text-decoration: none; transition: color 0.35s ease; }
.fil-ariane a:hover { color: var(--creme); }
.fil-ariane [aria-current] { color: var(--creme); }
.fil-ariane__separateur { width: 7px; height: auto; flex: none; transform: rotate(90deg); opacity: 0.5; }
.fil-ariane__separateur path { fill: none; stroke: currentColor; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }


/* --------------------------------------------------------------------------
   LES GRILLES DE PRIX, des plaques et jamais des tableaux qui defilent de
   cote sur telephone
   -------------------------------------------------------------------------- */

.grille { display: grid; gap: clamp(0.8rem, 1.4vw, 1.15rem); margin: 0; padding: 0; list-style: none; }
.grille__entete,
.grille__lien {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding-inline: clamp(1.1rem, 2.5vw, 1.75rem);
}
.grille--trois .grille__entete,
.grille--trois .grille__lien { grid-template-columns: minmax(0, 1fr) 9rem 8rem; }
.grille__entete {
  margin-bottom: 0.9rem;
  line-height: 1.35;
  align-items: end;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--creme-rvb), 0.72);
}
.grille__entete span:last-child { text-align: right; }
.grille__lien { padding-block: 1.1rem; color: inherit; text-decoration: none; border-radius: 16px; }
a.grille__lien:hover .grille__nom { color: var(--or-clair); }
a.grille__lien:focus-visible { outline: 2px solid var(--or-clair); outline-offset: -2px; }
.grille__nom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 1.0625rem; font-weight: 600; color: var(--creme); transition: color 0.35s ease; }
.grille__duree { font-size: 0.9375rem; color: rgba(var(--creme-rvb), 0.76); }
.grille__prix {
  font-family: var(--display);
  font-variation-settings: 'wdth' 80, 'wght' 800;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: right;
  white-space: nowrap;
  color: var(--creme);
}
.grille__precision {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--sans);
  font-variation-settings: normal;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  color: rgba(var(--creme-rvb), 0.72);
}
.grille__ligne--recommandee { border-color: rgba(var(--or-rvb), 0.7); box-shadow: 0 0 0 1px rgba(var(--or-rvb), 0.55); }
.grille__ligne--recommandee.est-allumee { animation: allumage 1.6s ease-out; }
@keyframes allumage {
  0%   { box-shadow: 0 0 0 1px rgba(var(--or-rvb), 0.2); }
  35%  { box-shadow: 0 0 0 1px rgba(var(--or-rvb), 0.95), 0 0 38px rgba(var(--or-rvb), 0.35); }
  100% { box-shadow: 0 0 0 1px rgba(var(--or-rvb), 0.55); }
}
@media (max-width: 640px) {
  .grille__entete { display: none; }
  .grille__lien,
  .grille--trois .grille__lien { grid-template-columns: minmax(0, 1fr); }
  .grille__prix { text-align: left; }
}


/* --------------------------------------------------------------------------
   LES DESCRIPTIONS, LES BLOCS D'OFFRE, LES BRIQUES, LE MODULE
   -------------------------------------------------------------------------- */

/* align-items: start. Sans lui, la description courte s'etire a la hauteur
   de sa voisine : la charte gardait un grand vide a cote de l'installation
   complete et de ses briques. */
.missions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(1.4rem, 2.4vw, 2rem); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (max-width: 860px) { .missions { grid-template-columns: minmax(0, 1fr); } }
.mission { padding: clamp(1.4rem, 2.6vw, 2rem); scroll-margin-top: 8rem; }
.mission--large { grid-column: 1 / -1; }
/* word-spacing : meme reglage que .display--petit, voir la-lueur.css. A
   cette taille, l'espace d'Archivo serre collait les mots entre eux. */
.mission__titre { margin: 0 0 1.15rem; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1; word-spacing: 0.1em; }
.mission__prix { color: var(--or-clair); }
.mission p { margin: 0; font-size: 1rem; line-height: 1.7; color: rgba(var(--creme-rvb), 0.8); }

.bloc-offre { margin-top: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 8rem; }
.bloc-offre:first-child { margin-top: 0; }
.bloc-offre__titre { margin: 0 0 clamp(1rem, 1.8vw, 1.5rem); }
.bloc-offre__intro { margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(var(--creme-rvb), 0.8); }
.prix-decompose { margin: 1rem 0 0; font-size: 1rem; font-style: italic; color: var(--creme); }

.briques { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--bord); }
.briques__pile { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.briques__brique {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: rgba(232, 228, 220, 0.04);
  font-size: 0.9375rem;
  color: rgba(var(--creme-rvb), 0.82);
}
.briques__total,
.briques__ensemble { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; margin: 0.8rem 0 0; font-size: 0.9375rem; color: rgba(var(--creme-rvb), 0.82); }
.briques__ensemble { padding-top: 0.8rem; border-top: 1px solid rgba(var(--or-rvb), 0.45); font-weight: 600; color: var(--creme); }
.briques__montant { font-family: var(--display); font-variation-settings: 'wdth' 80, 'wght' 800; font-size: 1.75rem; line-height: 1; color: var(--or-clair); }
.briques__economie { flex-basis: 100%; font-size: 0.8125rem; font-weight: 400; color: var(--or-clair); }

.module__titre { margin: 0; }
.module { display: grid; gap: 0.9rem; justify-items: start; padding: clamp(1.4rem, 3vw, 2.25rem); }
/* :not(.badge) : sans lui, le badge Bientot disponible prenait la couleur
   creme et la taille des paragraphes, texte clair sur fond or. */
.module p:not(.badge) { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: rgba(var(--creme-rvb), 0.82); }


/* --------------------------------------------------------------------------
   LES FICHES PRODUIT, ouvertes au clic
   Document fiches-produits v19 de Sam, 24 septembre 2026. Chaque prestation
   porte maintenant six rubriques au lieu d'un paragraphe. Tout afficher
   donnerait soixante lignes d'un bloc, et le brief mesure la chute de
   conversion au-dela de quarante elements listes : le detail se replie donc.

   CONDITION POSEE PAR SAM : volet ferme, on voit quand meme le prix et la
   phrase qui resume la prestation. Ce sont les deux seules choses qu'un
   dirigeant compare avant d'ouvrir quoi que ce soit.

   La classe volet est conservee : c'est elle que mouvement-accompagnement.js
   attrape pour animer l'ouverture. Le trait du haut qu'elle pose est retire
   ici, une fiche etant une plaque et non une ligne de FAQ.
   -------------------------------------------------------------------------- */

.fiches { display: grid; gap: clamp(1.4rem, 2.4vw, 2rem); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.fiche { border-top: none; scroll-margin-top: 8rem; }
.fiche--recommandee { border-color: rgba(var(--or-rvb), 0.6); box-shadow: 0 0 0 1px rgba(var(--or-rvb), 0.45); }

.fiche__resume {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem 1.75rem;
  align-items: start;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  cursor: pointer;
  list-style: none;
}
.fiche__resume::-webkit-details-marker { display: none; }
.fiche__resume::marker { content: ''; }
.fiche__resume:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 4px; border-radius: 16px; }

.fiche__titre { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1; word-spacing: 0.1em; }
.fiche__resume > .fiche__titre { grid-column: 1; grid-row: 2; }
/* Le prix et sa precision occupent une seule case : autrement la
   precision ouvrait une rangee de grille et laissait un trou a gauche. */
.fiche__tarif { grid-column: 2; grid-row: 1 / span 3; justify-self: end; display: grid; gap: 0.3rem; justify-items: end; align-content: start; }
.fiche__prix { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; text-align: right; }
.fiche__a-partir { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--creme-rvb), 0.72); }
.fiche__montant {
  font-family: var(--display);
  font-variation-settings: 'wdth' 80, 'wght' 800;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1;
  color: var(--or-clair);
}
.fiche__note { margin: 0; font-size: 0.8125rem; line-height: 1.45; text-align: right; color: rgba(var(--creme-rvb), 0.72); max-width: 20ch; }
.fiche__phrase { grid-column: 1; grid-row: 3; margin-top: 0.15rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(var(--creme-rvb), 0.84); }

/* Le cacheton : meme etiquette or que celle des quatre cartes, en serie. */
.cachetons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; }
.cacheton {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(var(--or-rvb), 0.45);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--or-clair);
}

/* Le pack : une offre couplee, affichee volet ferme. */
.fiche__pack {
  grid-column: 1 / -1;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(var(--or-rvb), 0.45);
  border-radius: 10px;
  background: rgba(var(--or-rvb), 0.08);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--creme);
}
.fiche__pack strong { color: var(--or-clair); font-weight: 600; }

.fiche__ouvrir { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; font-weight: 600; color: var(--or-clair); }
.fiche__ouvrir .volet__chevron { width: 12px; }
.fiche[open] .fiche__ouvrir .fiche__ouvrir-ferme { display: none; }
.fiche:not([open]) .fiche__ouvrir .fiche__ouvrir-ouvert { display: none; }

/* Le corps. Deux colonnes des qu'il y a la place, les rubriques en prose
   prenant la largeur entiere.

   LE SELECTEUR PORTE [open] A DESSEIN. Un display pose sans condition sur le
   contenu d un details ecrase la regle du navigateur qui le masque tant que
   le volet est ferme : la fiche s affichait deja ouverte. */
.fiche[open] .volet__contenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.8vw, 2.25rem);
  padding: 0 clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid var(--bord);
  padding-top: clamp(1.2rem, 2.2vw, 1.6rem);
  margin-top: 0;
}
.fiche__bloc--large { grid-column: 1 / -1; }
.fiche__sous-titre {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.fiche__bloc > p { margin: 0; font-size: 1rem; line-height: 1.7; color: rgba(var(--creme-rvb), 0.82); }
.fiche__bloc > p + p { margin-top: 0.7rem; }
.fiche__points { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.fiche__points li { display: flex; gap: 0.65rem; font-size: 1rem; line-height: 1.6; color: rgba(var(--creme-rvb), 0.82); }
/* align-self: start est indispensable. Sans lui le chevron s etire sur la
   hauteur de la ligne, et sur un point qui passe a la ligne il se retrouve
   au milieu du texte au lieu d etre en face de la premiere ligne. */
.fiche__points .chevron-puce { width: 11px; height: auto; flex: none; align-self: start; margin-top: 0.5rem; transform: rotate(90deg); }
.fiche__points .chevron-puce path { fill: none; stroke: var(--or-clair); stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .fiche__resume { grid-template-columns: minmax(0, 1fr); }
  .fiche__bandeau, .fiche__titre, .fiche__phrase, .fiche__tarif { grid-column: 1; grid-row: auto; }
  .fiche__tarif { justify-self: start; justify-items: start; }
  .fiche__phrase { grid-column: 1 / -1; }
  .fiche__prix, .fiche__note { text-align: left; justify-content: flex-start; }
  .fiche__note { max-width: none; }
  .fiche[open] .volet__contenu { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   LES CONDITIONS COMMUNES
   Elles remplacent le pied tarifaire d'une seule phrase. Le document v19 en
   compte sept, et precise qu'un seul encadre par page suffit : elles ne sont
   donc jamais repetees fiche par fiche.
   -------------------------------------------------------------------------- */

.conditions { padding: clamp(1.4rem, 2.6vw, 2rem); }
.conditions__titre { margin: 0 0 1.1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--creme-rvb), 0.72); }
.conditions__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem clamp(1.5rem, 3vw, 2.5rem); margin: 0; }
.conditions__ligne { display: grid; gap: 0.25rem; }
.conditions__ligne--large { grid-column: 1 / -1; }
.conditions__liste dt { font-size: 0.875rem; font-weight: 600; color: var(--creme); }
.conditions__liste dd { margin: 0; font-size: 0.875rem; line-height: 1.65; color: rgba(var(--creme-rvb), 0.74); }

@media (max-width: 760px) { .conditions__liste { grid-template-columns: minmax(0, 1fr); } }


/* --------------------------------------------------------------------------
   LES COMPLEMENTS DU DOCUMENT V19
   Trois grilles nouvelles et deux listes cote a cote.
   -------------------------------------------------------------------------- */

/* La colonne « Financable OPCO » de la grille des durees. Le document v19
   distingue les formats courts, qui ne sont pas conventionnes, de la
   demi-journee et au-dela, qui le sont. C'est la seule facon de dire la
   regle sans la repeter sous chaque ligne. */
.grille--opco .grille__entete,
.grille--opco .grille__lien { grid-template-columns: minmax(0, 1fr) 9rem 12rem; }
.grille__opco { font-size: 0.9375rem; text-align: right; color: rgba(var(--creme-rvb), 0.6); }
.grille__opco--oui { color: var(--or-clair); font-weight: 600; }

/* La grille « quelle solution pour quel besoin » : on part de la situation
   du visiteur, pas du nom du produit. */
.grille--besoins .grille__entete,
.grille--besoins .grille__lien { grid-template-columns: minmax(0, 1fr) 19rem 8rem; }
.grille__situation { font-size: 1rem; line-height: 1.5; color: rgba(var(--creme-rvb), 0.84); }
.grille__solution { font-size: 1rem; font-weight: 700; color: var(--or-clair); }

@media (max-width: 860px) {
  .grille--opco .grille__entete,
  .grille--besoins .grille__entete { display: none; }
  .grille--opco .grille__lien,
  .grille--besoins .grille__lien { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .grille--opco .grille__prix,
  .grille--besoins .grille__prix,
  .grille__opco,
  .grille__solution { text-align: left; }
}

/* Ce qui est remis et les axes de personnalisation, cote a cote. */
.deux-listes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2rem); }
.deux-listes__bloc { padding: clamp(1.4rem, 2.6vw, 2rem); }
@media (max-width: 860px) { .deux-listes { grid-template-columns: minmax(0, 1fr); } }

/* Le numero du theme, au-dessus de son titre. */
.mission__rang { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-clair); }
.mission p.mission__intro-acquis { margin: 1.15rem 0 0.8rem; font-size: 0.9375rem; color: var(--creme); }
.mission .fiche__points li { font-size: 0.9375rem; }


/* --------------------------------------------------------------------------
   LES PICTOGRAMMES
   Relecture de Sam du 24 septembre 2026, sur l'apercu : « ca manque de
   pictogrammes pour que ce soit un peu plus sexy et visuel ».

   Meme facture partout : boite de 24, trait seul, or clair, bouts arrondis.
   Quatre tailles selon le role, et jamais plus. Le chevron de la marque
   garde ses cinq emplois et ne sert pas d'icone decorative.
   -------------------------------------------------------------------------- */

.picto-fiche, .picto-rubrique, .picto-ligne, .picto-condition, .picto-encadre, .picto-pack {
  fill: none;
  stroke: var(--or-clair);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.picto-fiche { width: 28px; height: 28px; }
.picto-condition { width: 24px; height: 24px; }
.picto-encadre { width: 21px; height: 21px; margin-top: 0.3rem; }
.picto-ligne { width: 18px; height: 18px; }
.picto-rubrique { width: 15px; height: 15px; }
.picto-pack { width: 17px; height: 17px; margin-top: 0.15rem; }

/* Le bandeau du haut d'une fiche : le picto, et la mention Recommande quand
   elle existe. Sam, 24 septembre 2026 : collee au titre, elle se lisait
   comme un bout du nom de la prestation. */
.fiche__bandeau { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 0.9rem; }

/* Le meme air entre un nom et son badge dans les grilles de prix. */
.grille__nom { gap: 0.9rem; }

.fiche__sous-titre { display: flex; align-items: center; gap: 0.5rem; }
.grille__solution { display: flex; align-items: flex-start; gap: 0.6rem; }
.grille__solution .picto-ligne { margin-top: 0.1rem; }
.grille__solution > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; }
.mission p.mission__rang { margin: 0 0 0.9rem; }
.mission__rang { display: flex; align-items: center; gap: 0.7rem; }
.fiche__pack { display: flex; align-items: flex-start; gap: 0.6rem; }

/* --------------------------------------------------------------------------
   LES CONDITIONS COMMUNES, en cartes de meme hauteur
   Sam, 24 septembre 2026 : « egaliser les textes, pas de decalage ». Une
   liste de definitions sur deux colonnes donnait des rangees dont la hauteur
   suivait le plus long des deux textes, et le regard butait a chaque ligne.
   -------------------------------------------------------------------------- */

.conditions { padding: 0; background: none; border: none; }
.conditions__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2vw, 1.5rem); }
.conditions__ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 0.7rem;
  align-content: start;
  align-items: center;
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 16px;
}
.conditions__ligne > svg { grid-column: 1; grid-row: 1; }
.conditions__ligne dt, .conditions__ligne dd { grid-column: 2; }
.conditions__ligne--large { grid-column: 1 / -1; }
.conditions__liste dt { font-size: 0.9375rem; }
.conditions__liste dd { font-size: 0.875rem; }
.conditions__liste dd strong { color: var(--creme); font-weight: 600; }

@media (max-width: 1100px) { .conditions__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .conditions__liste { grid-template-columns: minmax(0, 1fr); } }


/* --------------------------------------------------------------------------
   L APPEL SUR MESURE
   Sam, 25 septembre 2026 : « il ne faut pas du tout ce fond un peu orange
   comme pour le reste des prestations, il faut que ca ressemble a la page
   d accueil ». La plaque de verre ordinaire laisse passer le degrade du
   fond, et la bande se confondait avec les fiches. Elle pose donc son
   propre fond, plus sombre que tout le reste de la page, et un filet dore.
   -------------------------------------------------------------------------- */

.appel--centre {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  background-color: rgba(16, 14, 10, 0.86);
  border-color: rgba(var(--or-rvb), 0.4);
}
.appel--centre { padding: clamp(1.75rem, 3.2vw, 2.6rem); }
.appel--centre .appel__texte { justify-items: center; gap: 0; }
.appel--centre .display { text-wrap: balance; }
.appel--centre .appel__actions { justify-content: center; }

/* --------------------------------------------------------------------------
   LE SOMMAIRE D UNE PAGE LONGUE
   La page Former porte cinq offres et depasse sept mille pixels. Sans un
   sommaire en haut, le visiteur ne sait pas ce qui l attend plus bas et
   s arrete a la premiere grille. Mesure de Sam le 25 septembre 2026.
   -------------------------------------------------------------------------- */

.sommaire { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: clamp(1rem, 2vw, 1.4rem) 0 0; padding: 0; list-style: none; background: none; border: none; }
.sommaire__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(var(--creme-rvb), 0.84);
  text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.sommaire__lien:hover, .sommaire__lien:focus-visible { color: var(--or-clair); border-color: rgba(var(--or-rvb), 0.55); }
.sommaire__lien .picto-ligne { width: 16px; height: 16px; }


/* --------------------------------------------------------------------------
   LE RYTHME VERTICAL D UN BLOC D OFFRE
   Une grille, un encadre et une paire de listes se suivaient sans une
   marge entre eux : mesure du 25 septembre 2026 sur Automatiser, zero
   pixel entre la grille et l encadre, zero entre l encadre et les listes.
   Chaque element portait sa propre marge du haut ou n en portait aucune,
   selon son histoire. La regle porte desormais sur ce qui suit, une fois
   pour toutes.
   -------------------------------------------------------------------------- */

.bloc-offre > .grille + *,
.bloc-offre > .encadre + *,
.bloc-offre > .prix-decompose + *,
.bloc-offre > .deux-listes + *,
.bloc-offre > .missions + *,
.bloc-offre > .fiches + * { margin-top: clamp(1.6rem, 2.8vw, 2.4rem); }


/* --------------------------------------------------------------------------
   MOUVEMENT REDUIT
   La page reste complete et immobile.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .carte::before, .suivi::before { display: none; }
  .grille__ligne--recommandee.est-allumee { animation: none; }
  .frise-projets { -webkit-mask-image: none; mask-image: none; }
  .frise-projets__piste { animation: none; width: auto; }
  .frise-projets__serie { flex-wrap: wrap; justify-content: center; padding: 0 var(--marge); }
  .frise-projets__serie[aria-hidden="true"] { display: none; }
  .frise-projets__serie li { white-space: normal; }
}