/* =========================================================================
   IDEA CONSEIL — feuille de style unique.

   Les couleurs sont celles du logo, relevées à la pipette. Le parti pris :
   l'aubergine porte le sérieux, le rose ne sert que d'accent ponctuel.
   Titres épais et serrés, textes de description fins et posés.

   Tout se règle dans le bloc :root ci-dessous.
   ========================================================================= */

/* -------------------------------------------------------------------------
   POLICE — Plus Jakarta Sans

   Police variable, livrée avec le site et servie depuis le serveur : aucune
   requête vers un serveur tiers, donc rien à déclarer côté RGPD (les polices
   chargées depuis les serveurs de Google posent justement ce problème).

   Un seul fichier de 60 Ko couvre toutes les graisses de 200 à 800, ce qui
   permet d'écrire des titres épais et des textes de description très fins
   sans charger quoi que ce soit de plus.

   Licence SIL Open Font 1.1 — voir LICENCE-OFL.txt dans le même dossier.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("polices/plus-jakarta-sans.woff2") format("woff2-variations"),
       url("polices/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Les couleurs du logo ------------------------------------------- */
  --aubergine:    #4E3166;   /* légèrement assombri : plus sobre à l'écran */
  --aubergine-f:  #3A2450;
  --mauve:        #7E4B84;
  --rose:         #B0679E;
  --bleu:         #2C4E8B;
  --ardoise:      #6888A0;
  --lilas:        #E0D6E6;

  /* --- Neutres : un gris très légèrement violacé ---------------------- */
  --encre:        #1F1726;
  --gris:         #6E6779;
  /* Assombri de #918B9B à #75707E : l'ancienne valeur donnait 3,3 pour 1 de
     contraste sur blanc, sous le minimum de 4,5 exigé par le RGAA/WCAG pour
     du texte courant — et elle servait justement aux textes les plus petits
     et les plus fins (mentions discrètes, fil d'Ariane, formations citées
     sous les avis). À 4,6 pour 1, la nuance à l'œil est infime, la règle
     est tenue. */
  --gris-clair:   #75707E;
  --trait:        #EBE7EF;
  --trait-fort:   #DCD5E2;
  --fond:         #FFFFFF;
  --creme:        #FBF9FC;

  /* --- Dégradé : réservé à deux ou trois éléments seulement ----------- */
  /* La fin du dégradé est passée de #A85F94 à #94507F. Motif : c'est sur
     cette extrémité, la plus claire, que tombent les textes en blanc —
     le libellé du quatrième chiffre, le texte des blocs d'appel. À
     #A85F94, même en blanc pur, le contraste plafonnait à 4,4 pour 1,
     juste sous le minimum de 4,5. Un ton plus profond le porte à 4,9 sans
     rien changer à la teinte. */
  --degrade:      linear-gradient(120deg, #4E3166 0%, #7E4B84 55%, #94507F 100%);

  /* --- Formes : arrondies, mais sans excès ---------------------------- */
  --r-petit:      10px;
  --r-moyen:      16px;
  --r-grand:      24px;
  --r-pilule:     999px;

  /* --- Ombres : discrètes --------------------------------------------- */
  --ombre:        0 1px 2px rgba(31,23,38,.04), 0 6px 20px rgba(31,23,38,.05);
  --ombre-forte:  0 2px 6px rgba(31,23,38,.05), 0 14px 38px rgba(31,23,38,.09);

  /* --- Pictogrammes, dessinés en SVG pour rester nets partout --------- */
  --picto-doc:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 21'%3E%3Cpath d='M10.5 0H2.5A2.5 2.5 0 0 0 0 2.5v16A2.5 2.5 0 0 0 2.5 21h12a2.5 2.5 0 0 0 2.5-2.5V6.5L10.5 0zm0 2.2L14.8 6.5H10.5V2.2zM3.6 11h9.8v1.5H3.6V11zm0 3.5h9.8V16H3.6v-1.5z'/%3E%3C/svg%3E");
  --picto-plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234E3166' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E");
  --picto-moins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234E3166' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 6h10'/%3E%3C/svg%3E");

  --large:        1160px;
  --texte:        760px;   /* largeur de lecture confortable */
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16.5px;
  line-height: 1.68;
  font-weight: 400;
  color: var(--encre);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
  overflow-x: hidden;
}

/* --- Titres : épais et serrés. Le contraste avec le texte fin fait tout - */
h1, h2, h3, h4 {
  margin: 0 0 .55em;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -.032em;
  text-wrap: balance;
  color: var(--encre);
}
h1 { font-size: clamp(2rem, 1.25rem + 2.9vw, 3.1rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2rem); margin-top: 2em; }
h3 { font-size: clamp(1.1rem, 1.02rem + .38vw, 1.28rem); font-weight: 700; letter-spacing: -.02em; }
h4 { font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.25em; padding-left: 1.35em; }
li { margin-bottom: .45em; }

a { color: var(--aubergine); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rose); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

/* --- Structure ---------------------------------------------------------- */
.conteneur { max-width: var(--large); margin: 0 auto; padding: 0 24px; }
.section   { padding: 76px 24px 84px; position: relative; }
.section--doux { background: var(--creme); border-block: 1px solid var(--trait); }
.section--texte { max-width: calc(var(--texte) + 48px); }

/* Les pages de rubrique : le bloc occupe toute la largeur de la page, comme
   les cartes qui le suivent, mais les paragraphes gardent une longueur de
   ligne confortable. Sans cela, le texte était centré sur 760 px et
   démarrait 176 px plus à droite que tout le reste. */
.section--rubrique > p,
.section--rubrique > ul,
.section--rubrique > ol,
.section--rubrique > h2,
.section--rubrique > h3 { max-width: 74ch; }
.section--rubrique > .depliant,
.section--rubrique > .autres-domaines { max-width: none; }

/* L'OUVERTURE DE « SUR MESURE » — la devise en regard du texte.

   Le bloc flottait seul dans la largeur : une petite ligne mauve et trois
   paragraphes, beaucoup de blanc autour de peu de chose. La devise n'est
   pourtant pas une ligne parmi d'autres — c'est la promesse de la page, et
   ce sont les trois mots qu'on retrouve en bas dans les étapes.

   Posée en grand d'un côté, elle devient le titre de ce que le texte
   explique de l'autre : la largeur est occupée, et l'œil a enfin un point
   d'accroche. Rien n'est ajouté ni retiré, c'est le même texte remis en
   regard. */
.section--intro > * { max-width: none; }

.intro-deux {
  display: grid; gap: 30px 64px; align-items: start;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}
.intro-deux__devise .devise {
  display: block; margin: -.12em 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem);
  font-weight: 700; line-height: 1.16; letter-spacing: -.035em;
  color: var(--aubergine);
}
/* Un filet sous la devise, comme sous les intertitres d'offres : il ancre
   le bloc et rappelle le rose du reste de la page. */
.intro-deux__devise .devise::after {
  content: ""; display: block; width: 46px; height: 3px;
  margin-top: .7em; border-radius: 2px; background: var(--rose);
}
.intro-deux__texte > *:first-child { margin-top: 0; }
.intro-deux__texte > *:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
  .intro-deux { grid-template-columns: 1fr; gap: 22px; }
  .intro-deux__devise .devise::after { margin-inline: auto; }
}

/* LE point de la refonte : la description est fine, posée, pas criarde. */
.chapo {
  font-size: clamp(1.02rem, .98rem + .22vw, 1.14rem);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: -.004em;
  color: var(--gris);
  max-width: 62ch;
}
.discret { color: var(--gris-clair); font-weight: 300; font-size: .92em; }

.section > *:first-child,
.section > .conteneur > *:first-child,
.conteneur.section > *:first-child { margin-top: 0; }

/* --- Lien d'évitement (accessibilité clavier) --------------------------- */
.saut {
  position: absolute; left: -9999px; z-index: 50;
  background: var(--aubergine); color: #fff;
  padding: 13px 22px; border-radius: var(--r-petit); font-weight: 600;
}
.saut:focus { left: 16px; top: 16px; }


/* =========================================================================
   EN-TÊTE
   ========================================================================= */
.entete {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 30;
}
/* « position: relative » : c'est cette barre, et non l'entrée de menu, qui
   sert de repère au panneau des formations, lequel s'étend sur toute la
   largeur (voir .menu__tiroir--mega). */
.entete__inner { display: flex; align-items: center; gap: 24px; padding-block: 14px; position: relative; }

/* Le logo est remplaçable depuis l'espace de gestion : il faut donc que
   l'en-tête tienne quelle que soit sa forme.

   « height » fixe la hauteur, « max-width » empêche un logo très allongé
   de pousser le menu hors de l'écran, et « object-fit: contain » fait le
   reste : si le logo bute sur l'une des deux limites, il rapetisse en
   gardant ses proportions au lieu de s'étirer. Un logo large, carré ou
   haut se place tout seul, sans rien avoir à régler. */
.logo { display: block; text-decoration: none; line-height: 0; }
.logo img {
  height: 58px; width: auto; max-width: 250px;
  object-fit: contain; object-position: left center;
}

.menu { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.menu a {
  text-decoration: none; color: var(--gris); font-weight: 500; font-size: .94rem;
  letter-spacing: -.008em; padding: 9px 14px; border-radius: var(--r-petit);
  transition: color .15s ease, background .15s ease;
}
.menu a:hover { color: var(--encre); background: var(--creme); }
.menu a[aria-current="page"] { color: var(--aubergine); font-weight: 650; }

/* Sur ordinateur, ni le bouton de menu ni sa case n'ont de raison d'être :
   le menu est déjà entièrement visible. La case est donc retirée pour de
   bon — y compris de la tabulation, où elle n'ouvrirait rien. Sur
   téléphone, la règle est inversée plus bas : la case y est seulement
   rangée hors de l'écran, pour rester atteignable au clavier. */
.menu-bouton, .menu-bascule { display: none; }


/* =========================================================================
   FIL D'ARIANE
   ========================================================================= */
.fil {
  font-size: .85rem; padding-block: 13px; color: var(--gris-clair);
  border-bottom: 1px solid var(--trait); font-weight: 400;
}
.fil a { color: var(--gris-clair); text-decoration: none; }
.fil a:hover { color: var(--aubergine); }


/* =========================================================================
   BOUTONS — aplats nets, pas de dégradé ni d'ombre colorée
   ========================================================================= */
.bouton {
  display: inline-block; padding: 13px 26px; margin: 0 8px 8px 0;
  background: var(--aubergine); color: #fff; text-decoration: none;
  border: 0; border-radius: var(--r-pilule);
  font-weight: 650; font-size: .96rem; letter-spacing: -.01em; cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.bouton:hover { color: #fff; background: var(--aubergine-f); transform: translateY(-1px); }
.bouton:active { transform: none; }

.bouton--clair {
  background: transparent; color: var(--aubergine);
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
}
.bouton--clair:hover {
  background: var(--creme); color: var(--aubergine-f);
  box-shadow: inset 0 0 0 1.5px var(--lilas);
}
.bouton--tel { margin: 0; white-space: nowrap; padding: 11px 20px; font-size: .92rem; }


/* =========================================================================
   BANDEAU D'ACCUEIL
   ========================================================================= */
.bandeau { position: relative; padding: 84px 0 92px; overflow: hidden; }
/* Une seule nappe très douce, au lieu des halos colorés d'avant */
.bandeau::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle 620px at 86% 4%,  rgba(176,103,158,.15), transparent 100%),
    radial-gradient(circle 520px at 2%  96%, rgba(44,78,139,.09),  transparent 100%),
    var(--creme);
}
.bandeau > .conteneur { position: relative; z-index: 1; }
.bandeau h1 { margin-bottom: .45em; }

.bandeau__grille {
  display: grid; gap: 52px; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
/* L'image passe à gauche, le texte à droite. D'une page de formation à
   l'autre, le côté alterne : la lecture reste la même, l'œil ne s'ennuie pas.
   Sur téléphone (voir plus bas), l'image repasse toujours au-dessus. */
.bandeau__grille--inverse { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.bandeau__grille--inverse .bandeau__image { order: -1; }

/* L'ACCUEIL, ET LUI SEUL, range ses trois blocs par zones nommées plutôt
   que par ordre d'écriture.

   Sur ordinateur le résultat est identique à toutes les autres pages :
   texte en haut à gauche, boutons juste en dessous, photo à droite sur
   toute la hauteur. L'intérêt est plus bas, sur téléphone : comme chaque
   bloc est posé par son nom, il suffit de redessiner le plan pour obtenir
   l'ordre voulu, sans toucher au HTML ni dupliquer les boutons. */
.bandeau__grille--accueil {
  grid-template-areas: "texte image" "actions image";
  row-gap: 0;              /* l'écart vient de la marge du paragraphe */
}
.bandeau__grille--accueil .bandeau__texte   { grid-area: texte; }
.bandeau__grille--accueil .bandeau__actions { grid-area: actions; }
.bandeau__grille--accueil .bandeau__image   { grid-area: image; align-self: center; }

.bandeau__image img {
  width: 100%; border-radius: var(--r-grand);
  box-shadow: var(--ombre-forte); object-fit: cover; aspect-ratio: 4 / 3;
}

.surtitre {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 1.5em;
  padding: 7px 16px 7px 12px; border-radius: var(--r-pilule);
  background: #fff; box-shadow: inset 0 0 0 1px var(--trait-fort);
  font-size: .76rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--aubergine);
}
.surtitre::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rose);
}

/* Le surtitre annonce le titre qui suit : les deux forment un seul bloc.
   Sans cette règle, la marge haute du h2 (2em) s'ajoutait à la marge basse
   du surtitre et creusait un trou entre l'étiquette et son titre. */
.surtitre { margin-bottom: .9em; }
.surtitre + h1, .surtitre + h2, .surtitre + h3 { margin-top: 0; }
/* =========================================================================
   CHIFFRES CLÉS — le seul endroit où le dégradé s'exprime pleinement
   ========================================================================= */
/* Le bandeau remonte de 48 px dans la section du dessus, au lieu d'être
   posé entre les deux. Il enjambe la limite, ce qui lui donne du relief et
   raccroche le haut de page au catalogue — un seul geste, deux sections
   reliées. Le « z-index » le maintient au-dessus du fond dégradé du
   bandeau d'accueil. */
.chiffres { padding: 0 24px; margin-top: -48px; position: relative; z-index: 2; }
.chiffres__grille {
  display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--degrade); border-radius: var(--r-grand);
  padding: 46px 34px; text-align: center; color: #fff;
  max-width: var(--large); margin: 0 auto;
}
.chiffre__valeur {
  font-size: clamp(1.9rem, 1.35rem + 1.6vw, 2.5rem);
  font-weight: 750; letter-spacing: -.04em; margin: 0 0 .2em; line-height: 1;
}
.chiffre__libelle { margin: 0; font-size: .92rem; font-weight: 300; opacity: .92; }

/* Un filet entre les chiffres : sans lui, les quatre valeurs se lisent
   comme une phrase qui court d'un bord à l'autre. Séparées, ce sont quatre
   affirmations distinctes. Le filet ne se pose pas avant le premier —
   d'où le sélecteur « + », qui ne vise que les suivants. */
.chiffre + .chiffre { border-left: 1px solid rgba(255,255,255,.22); }

@media (max-width: 720px) {
  /* En colonne, un filet vertical n'a plus de sens : il passe à l'horizontale. */
  .chiffre + .chiffre {
    border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding-top: 26px;
  }
}


/* =========================================================================
   CARTES
   ========================================================================= */
.grille { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 52px; }

.carte {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-moyen); padding: 26px; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.carte:hover { border-color: var(--trait-fort); box-shadow: var(--ombre); transform: translateY(-2px); }
.carte h3 { margin-top: 0; }
.carte h3 a, .carte__titre a { text-decoration: none; color: var(--encre); }
.carte:hover h3 a { color: var(--aubergine); }
.carte p { font-weight: 300; color: var(--gris); font-size: .96rem; }
.carte p:last-child { margin-bottom: 0; margin-top: auto; padding-top: .6em; }
.carte p:last-child a { font-weight: 600; text-decoration: none; font-size: .93rem; }

/* Carte avec image en tête */
.carte--image { padding: 0; }

/* -------------------------------------------------------------------------
   LES QUATRE RUBRIQUES DE L'ACCUEIL
   ------------------------------------------------------------------------- */

/* Deux par deux dès qu'il y a la place, et non « autant que ça rentre » :
   c'est ce qui évitait la quatrième carte isolée sur une deuxième ligne. */
@media (min-width: 900px) {
  .grille--rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

/* L'UNITÉ DES IMAGES.

   Les quatre photos viennent de banques différentes : un visage flou et
   chaud, une scène clinique bleutée, un mannequin de secourisme, des mains
   beiges. Côte à côte, elles n'appartenaient pas au même monde.

   Deux réglages suffisent à les réunir sans retoucher un seul fichier :
   la saturation est ramenée d'un cran, et un voile aubergine passe
   par-dessus en « color » — un mode qui ne touche QUE la teinte et la
   saturation, en laissant intactes les lumières et les ombres. Les
   photos gardent donc leur sujet, leur netteté et leur relief ; elles
   perdent seulement leur accent d'origine, le chaud et le froid tirant
   vers la même couleur.

   « multiply » avait été essayé d'abord : il assombrit au lieu de teinter,
   et l'écart entre une photo chaude et une photo bleutée restait entier.

   Au survol, le voile retombe presque à rien : la photo reprend ses
   couleurs sous le curseur. C'est ce qui donne à la carte l'air de
   répondre, sans animation ajoutée. */
.carte__image {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-grand) var(--r-grand) 0 0;
}
.carte__image::after {
  content: ""; position: absolute; inset: 0;
  background: var(--aubergine); opacity: .48; mix-blend-mode: color;
  transition: opacity .3s ease;
}
.carte__image img {
  filter: saturate(.85);
  transition: transform .35s ease;
}
.carte--lien:hover .carte__image::after { opacity: .08; }
.carte--lien:hover .carte__image img { transform: scale(1.035); }

/* LA CARTE CLIQUABLE EN ENTIER.

   Le lien du titre est étiré par-dessus toute la carte. Rien ne change
   pour le clavier ni pour un lecteur d'écran — il n'y a toujours qu'un
   seul lien, correctement nommé par le titre — mais la souris n'a plus
   besoin de viser. Le « Découvrir → » n'est donc plus un lien : c'est un
   repère visuel, masqué aux lecteurs d'écran qui annonceraient un second
   lien fantôme. */
.carte--lien { position: relative; }
.carte--lien h3 a::after { content: ""; position: absolute; inset: 0; }
.carte--lien:focus-within { outline: 2px solid var(--aubergine); outline-offset: 3px; }
.carte--lien h3 a:focus-visible { outline: none; }
.carte__aller {
  margin-top: auto; padding-top: .4em;
  color: var(--aubergine); font-weight: 600; font-size: .94rem;
}
.carte--lien:hover .carte__aller { text-decoration: underline; }

/* Un soulèvement d'un cheveu au survol : assez pour que la carte réponde,
   trop peu pour qu'on le remarque consciemment. */
.carte--lien { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.carte--lien:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.carte--image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte--image .carte__corps { padding: 24px; display: flex; flex-direction: column; flex: 1; }




/* =========================================================================
   EXPLORER LES AUTRES DOMAINES

   Ces liens arrivaient en quatre boutons empilés, un par ligne, sur toute
   la largeur. Quatre appels à l'action de même poids alors que ce ne sont
   que des renvois : le visiteur ne savait plus ce qui comptait sur la page.
   Et la page se citait elle-même — sur « Formations RPS et QVCT », le
   premier bouton menait à « Formations RPS et QVCT ».

   Ils deviennent des cartes courtes, posées côte à côte, avec une phrase
   qui dit ce qu'on va trouver. On lit une piste, pas une commande.
   ========================================================================= */
.autres-domaines { margin-top: 64px; }
.autres-domaines h2 { margin-bottom: 1.1em; }
.autres-domaines__grille {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
}
.autre-domaine {
  display: flex; flex-direction: column; gap: 7px;
  padding: 22px 24px 24px;
  border: 1px solid var(--trait); border-radius: var(--r-moyen);
  background: #fff; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.autre-domaine:hover {
  border-color: var(--trait-fort); box-shadow: var(--ombre);
  transform: translateY(-2px);
}
.autre-domaine__titre {
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.022em;
  color: var(--aubergine); line-height: 1.25;
}
/* La flèche est décorative : posée en CSS, elle n'est jamais lue à voix
   haute, et le libellé du lien reste le nom de la rubrique. */
.autre-domaine__titre::after { content: "\00a0→"; opacity: .5; }
.autre-domaine:hover .autre-domaine__titre::after { opacity: 1; }
.autre-domaine__phrase {
  font-size: .92rem; font-weight: 300; line-height: 1.55; color: var(--gris);
}

@media (max-width: 720px) {
  .autres-domaines { margin-top: 48px; }
  .autre-domaine { align-items: center; text-align: center; }
}

/* =========================================================================
   PAGE DE RUBRIQUE — texte d'un côté, volets de l'autre

   La page déroulait tout à la verticale : présentation, puis la pile de
   volets, puis la navigation. Sur un écran large, la moitié droite restait
   vide pendant tout ce défilement.

   Les volets passent donc à côté — du côté où se trouvait la photo du
   bandeau juste au-dessus, de sorte que le texte reste sous le texte et
   que la colonne qui changeait déjà de nature continue de changer. Sur
   téléphone, une seule colonne : le texte, puis les volets.
   ========================================================================= */
.rubrique-deux {
  display: grid; gap: 48px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.rubrique-deux--inverse { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.rubrique-deux--inverse .rubrique-deux__volets { order: -1; }

/* La colonne de texte garde une longueur de ligne confortable. */
.rubrique-deux__texte > p { max-width: 56ch; }
.rubrique-deux__texte > *:first-child { margin-top: 0; }
.rubrique-deux__volets > *:first-child { margin-top: 0; }

/* Les volets, en colonne, n'ont plus besoin de la largeur de lecture. */
.rubrique-deux__volets .depliant { max-width: none; }

@media (max-width: 880px) {
  .rubrique-deux,
  .rubrique-deux--inverse { grid-template-columns: 1fr; gap: 30px; }
  /* Quel que soit le côté sur grand écran, le texte passe toujours en
     premier sur téléphone : c'est lui qui présente la rubrique. */
  .rubrique-deux--inverse .rubrique-deux__volets { order: 0; }
  .rubrique-deux__texte > p { max-width: none; }
}

/* =========================================================================
   LE CATALOGUE — une carte par domaine

   C'était cinq grandes rangées façon bannière, avec la liste des
   formations posée dessous, détachée de son domaine et en gris : rien
   n'avait l'air cliquable, et il fallait près de six mille pixels de
   défilement pour parcourir ce qui est, au fond, un annuaire.

   Or la liste EST le contenu de cette page. Elle occupe donc le centre de
   la carte, en lignes cliquables, et le texte de présentation se replie
   derrière « En savoir plus » — il n'existe que sur cette page, il n'est
   donc pas question de le perdre, seulement de le ranger.
   ========================================================================= */
/* Des colonnes, pas une grille.

   En grille, les quatre cartes s'alignent sur des rangées de même hauteur :
   avec 3, 5 et 12 formations, la rangée prend la hauteur de la plus grande
   et laisse un trou béant sous les autres. En colonnes, chaque carte se
   place à la suite de la précédente et les colonnes se remplissent. */
.cartes-domaines {
  columns: 2 400px; column-gap: 26px; margin-top: 46px;
}

.carte-domaine {
  break-inside: avoid; margin-bottom: 26px;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  transition: border-color .18s ease, transform .18s ease;
}
.carte-domaine:hover { border-color: var(--trait-fort); transform: translateY(-2px); }

/* Une bande d'image plutôt qu'une photo pleine : elle situe le domaine
   sans manger la moitié de la carte. */
.carte-domaine__image { display: block; line-height: 0; }
.carte-domaine__image img {
  width: 100%; height: 150px; object-fit: cover; object-position: center 40%;
}

.carte-domaine__corps { padding: 24px 26px 22px; display: flex; flex-direction: column; }
.carte-domaine h2 {
  margin: 0 0 .5em; font-size: 1.22rem; line-height: 1.25;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
}
.carte-domaine h2 a { color: var(--encre); text-decoration: none; }
.carte-domaine h2 a:hover { color: var(--aubergine); }
.carte-domaine__compte {
  font-size: .76rem; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gris-clair);
}
.carte-domaine__tete {
  margin: 0 0 14px; font-size: .95rem; font-weight: 300;
  line-height: 1.6; color: var(--gris);
}

/* Le complément de texte, replié. */
.carte-domaine__plus { margin: -4px 0 16px; }
.carte-domaine__plus > summary {
  cursor: pointer; list-style: none;
  font-size: .86rem; font-weight: 650; color: var(--aubergine);
  display: inline-flex; align-items: center; gap: 7px;
}
.carte-domaine__plus > summary::-webkit-details-marker { display: none; }
.carte-domaine__plus > summary::after { content: "+"; font-weight: 400; opacity: .6; }
.carte-domaine__plus[open] > summary::after { content: "–"; }
.carte-domaine__plus p {
  margin: 12px 0 0; font-size: .92rem; font-weight: 300;
  line-height: 1.6; color: var(--gris);
}

/* La liste des formations : le cœur de la carte. */
.carte-domaine .catalogue-domaine {
  columns: 1; margin: 0 0 20px; padding-top: 16px;
  border-top: 1px solid var(--trait);
}
.carte-domaine .catalogue-domaine li { margin-bottom: 10px; }
.carte-domaine .catalogue-domaine a { color: var(--encre); font-weight: 550; }
.carte-domaine__pied { margin: auto 0 0; }

/* =========================================================================
   SUR MESURE — la bande qui ferme le catalogue

   Ce n'est pas un domaine de plus : c'est ce qu'on propose quand aucun des
   quatre ne répond. D'où la pleine largeur et la couleur.
   ========================================================================= */
.sur-mesure-bande {
  display: grid; gap: 0; margin-top: 30px; overflow: hidden;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: stretch;
  border-radius: var(--r-grand); background: var(--degrade); color: #fff;
}
.sur-mesure-bande__image { line-height: 0; }
.sur-mesure-bande__image img { width: 100%; height: 100%; object-fit: cover; }
.sur-mesure-bande__texte { padding: 40px 44px; }
.sur-mesure-bande h2 { margin-bottom: .5em; }
.sur-mesure-bande h2 a { color: #fff; text-decoration: none; }
.sur-mesure-bande h2 a:hover { text-decoration: underline; }
.sur-mesure-bande p { color: rgba(255,255,255,.88); font-weight: 300; }
.sur-mesure-bande .bouton {
  background: #fff; color: var(--aubergine); box-shadow: none; margin-top: .6em;
}
.sur-mesure-bande .bouton:hover { background: var(--lilas); color: var(--aubergine-f); }

@media (max-width: 720px) {
  .cartes-domaines { columns: 1; margin-top: 34px; }
  .carte-domaine { margin-bottom: 20px; }
  .carte-domaine__image img { height: 130px; }
  .sur-mesure-bande { grid-template-columns: 1fr; margin-top: 24px; }
  .sur-mesure-bande__image img { height: 180px; }
  .sur-mesure-bande__texte { padding: 28px 24px 32px; }
}

/* =========================================================================
   L'APPEL « SUR MESURE »

   Il y avait ici une phrase seule sous la grille de cartes — « Un besoin
   spécifique ? Découvrir les solutions sur mesure » — en texte gris avec un
   lien souligné. Après quatre cartes illustrées, ça tombait à plat, et sur
   téléphone ça pendait à gauche sous la dernière carte.

   C'est pourtant une vraie offre : elle mérite un bloc à elle. Texte à
   gauche, bouton à droite sur grand écran ; empilé et centré sur téléphone,
   où l'alignement à gauche donnait ce déséquilibre.
   ========================================================================= */
.appel {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 28px;
  margin-top: 40px; padding: 32px 40px;
  border-radius: var(--r-grand);
  background: var(--degrade); color: #fff;
}
.appel__texte { max-width: 60ch; }
.appel__titre {
  margin: 0 0 .25em; font-size: 1.22rem; font-weight: 750;
  letter-spacing: -.025em; color: #fff; line-height: 1.25;
}
.appel p { margin: 0; color: rgba(255,255,255,.92); font-weight: 300; }
.appel .bouton {
  background: #fff; color: var(--aubergine); box-shadow: none; flex-shrink: 0;
}
.appel .bouton:hover { background: var(--lilas); color: var(--aubergine-f); }

/* =========================================================================
   TÉLÉPHONE — TOUT AU CENTRE

   Sur un écran étroit, la colonne est si courte que l'alignement à gauche
   ne structure plus rien : il laisse surtout des bouts de ligne dans le
   vide. Centrer donne une page posée, qui se tient.

   Deux exceptions, et elles ne sont pas de la coquetterie :

   - Les listes à puces. Une puce centrée se décolle de son texte et la
     liste n'a plus de colonne : on ne voit plus où commence chaque point.
     Elles restent donc alignées à gauche — mais le bloc entier est centré
     dans la page, ce qui donne l'impression d'ensemble recherchée.

   - Le contenu des accordéons, qui sont de longs programmes de formation.
     Au-delà de quelques lignes, l'œil doit rechercher le début de chaque
     ligne à un endroit différent, et la lecture accroche.

   Le pied de page non plus : ses colonnes de liens s'empilent en listes,
   et il passe déjà bien tel quel.

   Tout le reste — titres, chapôs, paragraphes, boutons, cartes, avis —
   est centré.
   ========================================================================= */
@media (max-width: 720px) {
  .section, .section .conteneur, .conteneur.section,
  .bandeau, .bandeau .conteneur,
  .carte, .carte__corps, .domaine, .domaine-rangee__texte,
  .avis__carte, .formation {
    text-align: center;
  }

  /* Le pied de page garde son alignement à gauche : ses colonnes de liens
     s'empilent en listes, et une liste de liens centrée perd sa colonne. */
  .pied, .pied * { text-align: left; }

  h1, h2, h3, h4, p, .chapo, .fait, .note, .discret, .devise, .surtitre {
    text-align: center;
  }
  .pied h1, .pied h2, .pied h3, .pied h4, .pied p { text-align: left; }

  /* Mais PAS les paragraphes de contenu.
     Un titre centré pose une section ; trois paragraphes centrés d'affilée
     se lisent mal — à chaque retour à la ligne, l'œil doit rechercher où
     commence la suivante, parce que le bord gauche bouge. Les titres, les
     chapôs, les cartes, les boutons restent centrés : c'est court, et c'est
     ce qui donne l'allure. Le texte suivi, lui, retrouve son bord. */
  .domaine-rangee__texte p,
  .section--rubrique > p,
  .section--texte p,
  .formation p,
  .depliant__corps p,
  .mentions p {
    /* Alignés à gauche, pas justifiés. Justifier sur 35 caractères de
       large — la largeur d'un téléphone — laisse trop peu d'espaces pour
       absorber le rattrapage : les mots s'écartent et des « rivières »
       blanches descendent dans le paragraphe. La césure automatique
       atténue le défaut sans le supprimer. Le bord gauche fixe reste ce
       qui se lit le mieux. */
    text-align: left;
  }
  /* Le chapô sous un titre reste centré : c'est une accroche, pas un
     paragraphe de lecture, et il est court par construction. */
  .section--rubrique > .chapo,
  .section--texte .chapo { text-align: center; }

  /* Un chapô centré doit aussi être centré DANS la page, pas collé à
     gauche par son max-width. */
  .chapo { margin-inline: auto; }

  /* Les rangées de boutons et d'étiquettes se regroupent au centre. */
  .boutons, .etiquettes, .entete-fiche__actions,
  .domaine-rangee__texte > p:last-of-type {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  }

  /* Les listes : alignées à gauche pour garder leur colonne de puces,
     mais le bloc lui-même est centré dans la page. */
  ul:not(.valeurs):not(.clients):not(.menu):not(.pied__liens),
  ol {
    text-align: left;
    width: fit-content; max-width: 100%;
    margin-inline: auto;
  }

  /* Page contact : la photo, les coordonnées et le bouton d'envoi se
     centrent comme le reste. Chaque ligne de coordonnée garde son
     pictogramme accolé au texte, le tout regroupé au milieu. */
  .portrait--rond { margin-inline: auto; }
  .coordonnees li { justify-content: center; text-align: left; }
  .coordonnees { width: fit-content; max-width: 100%; margin-inline: auto; }
  form .bouton, form button[type="submit"], .formulaire__envoi {
    display: block; margin-inline: auto;
  }

  /* Le corps d'un accordéon reste aligné à gauche : c'est du texte long. */
  .depliant__corps, .depliant__corps p, .depliant__corps li { text-align: left; }
  .depliant summary { text-align: left; }

}

@media (max-width: 720px) {
  .appel {
    flex-direction: column; align-items: center; text-align: center;
    padding: 30px 24px; gap: 22px;
  }
  .appel .bouton { width: 100%; justify-content: center; }
}

/* =========================================================================
   VALEURS
   ========================================================================= */
/* Les valeurs étaient des pastilles posées les unes après les autres : de
   largeurs inégales, elles se cassaient en 4 puis 2, avec un bord droit en
   dents de scie, et restaient collées à gauche sur téléphone.

   Une grille règle les deux : chaque cellule fait la même largeur, donc les
   rangées s'alignent, et le texte centré dans chaque case tient aussi bien
   sur une colonne que sur trois. Six valeurs donnent 3 × 2 sur ordinateur,
   2 × 3 sur téléphone — toujours des rangées pleines. */
.valeurs {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  /* 132 px et non 148 : sur un téléphone de 390 px, la place disponible
     est de 294 px. À 148, deux pastilles réclamaient 296 px — deux de
     trop — et elles tombaient une par ligne, six lignes de suite. À 132,
     elles repassent deux par rangée. Sur ordinateur rien ne change : il y
     a six valeurs, donc six colonnes, quelle que soit la borne basse. */
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.valeurs li {
  margin: 0; padding: 12px 14px; border-radius: var(--r-moyen);
  text-align: center;
  font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  color: var(--aubergine); background: #fff;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  transition: box-shadow .18s ease, transform .18s ease;
}
.valeurs li:hover {
  box-shadow: inset 0 0 0 1.5px var(--lilas), var(--ombre);
  transform: translateY(-1px);
}

/* Sur les écrans les plus étroits, deux colonnes imposées : la borne de
   132 px n'y tient plus, et les six valeurs se mettaient l'une sous
   l'autre sur six lignes. Deux par rangée reste plus lisible, quitte à ce
   que « Professionnalisme » passe sur deux lignes dans sa pastille. */
@media (max-width: 380px) {
  .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   LES TROIS OFFRES DE LA PAGE « SUR MESURE »

   Même langage que les autres cartes du site — fond blanc, filet fin,
   angles arrondis — mais posées sur trois colonnes de largeur égale, avec
   assez de blanc autour du texte pour qu'une offre se lise comme une
   proposition et non comme une case de tableau.
   ========================================================================= */
/* L'en-tête du site reste collé en haut : sans cette marge de défilement,
   le bouton « Ce que je propose » amenait le titre pile dessous, caché. */
#formations { scroll-margin-top: 96px; }

/* L'offre à gauche, la méthode à droite. Deux colonnes légèrement
   inégales : les trois offres portent le texte, la méthode l'accompagne. */
.sur-mesure-deux {
  display: grid; gap: 54px; align-items: start;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
/* Les deux titres partent de la même ligne : le panneau teinté ne contient
   que le chemin, pas son titre. Sinon la marge du panneau décalait
   « Comment ça se passe » d'une quarantaine de pixels vers le bas, et les
   deux colonnes paraissaient mal calées. */
.sur-mesure-deux > div > h2 { margin-top: 0; }

/* Les trois offres : une liste numérotée, séparée par des filets. Des
   cadres auraient fait trois boîtes dans une colonne déjà étroite ; le
   filet suffit à les distinguer et laisse le texte respirer. */
.offres {
  list-style: none; padding: 0; margin: 30px 0 0;
  counter-reset: offre;
}
.offre {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 20px;
  align-items: start;
  padding: 26px 0; border-top: 1px solid var(--trait);
}
.offre:first-child { border-top: 0; padding-top: 4px; }
.offre::before {
  counter-increment: offre; content: counter(offre, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 2.1rem; font-weight: 750; letter-spacing: -.04em;
  line-height: .95; color: var(--lilas);
}

/* Le panneau de la méthode : teinté, pour dire que ce n'est pas une
   quatrième offre mais le mode d'emploi des trois autres. */
.methode {
  display: block; margin-top: 26px; padding: 32px 34px 34px;
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: var(--r-grand);
}
.offre h3 {
  margin: 0 0 .35em; font-size: 1.12rem; letter-spacing: -.025em;
  color: var(--encre);
}
/* Un filet court sous le titre : il sépare le nom de l'offre de sa
   description sans ajouter une ligne de plus. */

.offre p {
  margin: 0; font-weight: 300; font-size: .96rem; line-height: 1.62;
  color: var(--gris);
}

@media (max-width: 880px) {
  /* Sur téléphone, les deux colonnes s'empilent : l'offre, puis la
     méthode. Le panneau teinté garde son fond, il sépare les deux. */
  .sur-mesure-deux { grid-template-columns: 1fr; gap: 34px; }
  .methode { padding: 26px 22px 30px; }
  /* Le numéro passe au-dessus et se centre avec le reste : en gouttière
     à gauche d'un texte centré, il paraissait oublié là. */
  .offre {
    grid-template-columns: 1fr; gap: 0;
    padding: 24px 0; text-align: center;
  }
  .offre::before {
    grid-row: auto; font-size: 1.7rem; margin-bottom: .2em;
  }
}

/* =========================================================================
   LA NOTE SOUS LE CATALOGUE

   Elle explique pourquoi certains intitulés sont en gris. En simple texte
   gris sous les cartes, elle se confondait avec elles et passait
   inaperçue — or c'est précisément la phrase qui évite au visiteur de
   croire qu'une formation n'existe plus.

   Un bandeau clair la détache sans crier : le même crème que les sections
   douces, un filet à peine visible, et le texte centré parce que la note
   se rapporte à toute la grille, pas à sa première colonne.
   ========================================================================= */
.note-catalogue {
  /* Le bandeau s'arrête où s'arrête la phrase, et se centre. Étiré sur
     toute la largeur des cartes, il faisait une bande vide de part et
     d'autre d'une seule ligne de texte. */
  width: fit-content; max-width: 100%;
  margin: 30px auto 0; padding: 14px 30px;
  border: 1px solid var(--trait); border-radius: var(--r-moyen);
  /* Un lilas très dilué. Le crème des sections douces, posé sur le blanc
     de celle-ci, ne se distinguait pas : le bandeau ne se voyait qu'à son
     filet. Celui-ci se lit comme un fond, sans peser. */
  background: #F7F3FA;
  text-align: center; font-size: .92rem; font-weight: 300;
  line-height: 1.55; color: var(--gris);
}

@media (max-width: 720px) {
  .note-catalogue { padding: 14px 18px; font-size: .88rem; }
}

/* --- Le bloc « La mission » : les valeurs en bandeau, puis trois colonnes -- */
.mission-valeurs { margin-top: 2.8em; }
.mission-valeurs h3 { margin-top: 0; }

/* Les colonnes ne sont pas tout à fait égales : elles sont taillées pour
   que les trois textes fassent à peu près le même nombre de lignes. « Le
   public » est court, « Accessibilité » est long — à largeur égale, l'un
   tombait à quatre lignes et l'autre à sept. Ajustées, c'est cinq, cinq
   et six : le bas du bloc ne part plus en escalier. */
.mission-trois {
  display: grid; gap: 40px 44px; margin-top: 3em;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr) minmax(0, 1.16fr);
}
/* Chaque colonne commence par son intertitre : sans ça, la marge haute du
   h3 décalerait la première ligne des trois colonnes d'autant. */
.mission-trois > div > :first-child { margin-top: 0; }
.mission-trois p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
  /* Trois colonnes dans une largeur de téléphone donneraient des colonnes
     de six caractères : les blocs s'empilent. */
  .mission-trois { grid-template-columns: 1fr; gap: 34px; margin-top: 2.4em; }
}


/* =========================================================================
   FICHES FORMATION
   ========================================================================= */
.formations { display: grid; gap: 26px; margin-top: 36px; }

.formation {
  position: relative; background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-moyen); padding: 30px 32px 24px;
  scroll-margin-top: 96px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.formation:hover { border-color: var(--trait-fort); box-shadow: var(--ombre); }
.formation__titre { font-size: clamp(1.18rem, 1.06rem + .5vw, 1.38rem); margin-bottom: .8em; }
.formation__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.5em; }
.formation__accroche { font-weight: 300; color: var(--gris); }
.formation__ligne { font-size: .95rem; margin-bottom: .4em; font-weight: 300; color: var(--gris); }
.formation__ligne strong { font-weight: 650; color: var(--encre); }
.formation__acces { color: var(--gris-clair); font-size: .9rem; margin-top: 1.4em; }
.formation h4 { margin: 1.8em 0 .7em; color: var(--aubergine); }
.formation__action { margin-top: 1.8em; margin-bottom: 0; }

/* --- Étiquettes --------------------------------------------------------- */
.etiquette {
  display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: -.005em;
  padding: 6px 14px; border-radius: var(--r-pilule);
  background: var(--creme); color: var(--gris);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
}
.etiquette--duree { background: #F4EFF7; color: var(--aubergine); box-shadow: inset 0 0 0 1px #E2D7E9; }
.etiquette--tarif { background: #FBF0F6; color: #96487E;        box-shadow: inset 0 0 0 1px #EFD3E3; }

/* --- Listes : puce ronde discrète --------------------------------------- */
.objectifs, .formation ul, .section--texte ul, .catalogue {
  list-style: none; padding-left: 0;
}
.objectifs li, .formation ul li, .section--texte ul li {
  position: relative; padding-left: 26px; margin-bottom: .5em;
  font-weight: 300; color: var(--gris);
}
.objectifs li::before, .formation ul li::before, .section--texte ul li::before {
  content: ""; position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
}

/* --- Programme détaillé (replié, mais présent pour Google) -------------- */
.programme { margin-top: 1.8em; border-top: 1px solid var(--trait); padding-top: 4px; }
.programme summary {
  cursor: pointer; padding: 15px 0; font-weight: 650; color: var(--aubergine);
  list-style: none; display: flex; align-items: center; gap: 11px; font-size: .96rem;
}
.programme summary::-webkit-details-marker { display: none; }
.programme summary::before {
  content: "›"; display: grid; place-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--creme); color: var(--aubergine);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  font-size: 1rem; line-height: 1; padding-bottom: 2px;
  transition: transform .2s ease;
}
.programme[open] summary::before { transform: rotate(90deg); }
.programme ul { margin-top: .5em; }
.programme li { font-size: .95rem; }


/* =========================================================================
   CATALOGUE COMPLET (liste de toutes les formations)
   ========================================================================= */
.catalogue {
  columns: 2; column-gap: 44px; margin-top: 1.5em;
}
.catalogue li {
  break-inside: avoid; margin-bottom: .6em; padding-left: 22px;
  position: relative; font-weight: 300; color: var(--gris); font-size: .96rem;
}
.catalogue li::before {
  content: ""; position: absolute; left: 2px; top: .66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--lilas);
}
.catalogue li a { font-weight: 500; color: var(--encre); text-decoration: none; }
.catalogue li a:hover { color: var(--aubergine); text-decoration: underline; }
.catalogue li:has(a)::before { background: var(--rose); }
@media (max-width: 720px) { .catalogue { columns: 1; } }




/* =========================================================================
   LOGOS CLIENTS ET CERTIFICATIONS
   ========================================================================= */
.logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 34px 46px; margin-top: 36px;
}
.logos img {
  max-height: 54px; width: auto; opacity: .62;
  filter: grayscale(100%); transition: opacity .2s ease, filter .2s ease;
}
.logos img:hover { opacity: 1; filter: none; }

/* Le titre reste aligné à gauche comme partout ailleurs ; les logos, eux,
   se centrent : une rangée de pictos calée à gauche laisse un vide à droite
   qui donne l'impression qu'il en manque. */
.certifications {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: 18px; margin-top: 34px;
}
/* Chaque logo est posé sur sa propre carte blanche. Les fichiers viennent
   de quatre organismes différents : l'un a un fond blanc plus grand que le
   dessin, l'autre un liseré. Sur la page nue, ces écarts se voyaient — une
   vignette paraissait encadrée, les autres non. Le même cadre pour tous
   remet la rangée d'aplomb, et la zone claire réservée au logo lui laisse
   la place de respirer. */
.certification {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 0; width: 176px; padding: 24px 18px 20px;
  border: 1px solid var(--trait); border-radius: var(--r-moyen);
  background: #fff;
}
.certification img {
  height: 62px; width: auto; max-width: 100%;
  object-fit: contain; mix-blend-mode: multiply;
}
.certification figcaption {
  margin-top: auto; font-size: .82rem; font-weight: 500;
  line-height: 1.4; color: var(--gris); text-align: center;
}

/* Une section dont tout l'intérieur est centré — titre compris. Le bloc
   des certifications alignait son titre à gauche pendant que les logos,
   le bouton et la légende se centraient : quatre alignements, un seul
   bloc. */
.section--centree { text-align: center; }
.section--centree > h2 { margin-left: auto; margin-right: auto; }

@media (max-width: 720px) {
  /* Quatre cartes de 176 px ne tiennent pas deux par deux dans une colonne
     de téléphone : elles s'empilaient une par une, et le bloc prenait un
     écran entier pour dire quatre mots. Deux par rangée, il tient d'un
     coup d'œil. */
  .certifications { gap: 14px; }
  .certification { width: calc(50% - 7px); padding: 20px 12px 16px; }
  .certification img { height: 52px; }
  .certification figcaption { font-size: .78rem; }
}


/* =========================================================================
   GALERIE
   ========================================================================= */
.galerie {
  display: grid; gap: 14px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.galerie__vignette {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-moyen); cursor: zoom-in; line-height: 0;
}
.galerie__vignette img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.galerie__vignette:hover img,
.galerie__vignette:focus-visible img { transform: scale(1.05); }

/* Une loupe discrète, qui ne se montre qu'au survol : sans indice visuel,
   personne ne devine qu'une photo s'agrandit. */
.galerie__vignette::after {
  content: ""; position: absolute; inset: auto 10px 10px auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E3166' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 20 20M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--ombre);
}
.galerie__vignette:hover::after,
.galerie__vignette:focus-visible::after { opacity: 1; transform: none; }


/* =========================================================================
   VISIONNEUSE — la photo en grand

   Couvre l'écran, s'adapte à sa taille, et laisse toujours voir qu'on peut
   fermer. Sans JavaScript, elle ne s'ouvre jamais : le clic ouvre alors
   simplement le fichier image, ce qui reste utilisable.
   ========================================================================= */
.visionneuse {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  background: rgba(24,17,30,.93);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: apparait .18s ease;
}
.visionneuse[hidden] { display: none; }
@keyframes apparait { from { opacity: 0 } to { opacity: 1 } }

.visionneuse__cadre {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 100%; max-height: 100%;
}
.visionneuse__cadre img {
  max-width: min(1100px, 92vw); max-height: 82vh; width: auto; height: auto;
  border-radius: var(--r-moyen); box-shadow: 0 24px 70px rgba(0,0,0,.5);
  animation: monte .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes monte { from { transform: translateY(10px) scale(.985); opacity: .4 } to { transform: none; opacity: 1 } }
.visionneuse__cadre figcaption {
  color: rgba(255,255,255,.72); font-size: .88rem; font-variant-numeric: tabular-nums;
}

.visionneuse__fermer, .visionneuse__nav {
  flex: none; border: 0; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  transition: background .15s ease, transform .15s ease;
}
.visionneuse__fermer:hover, .visionneuse__nav:hover { background: rgba(255,255,255,.24); }
.visionneuse__nav { width: 52px; height: 52px; font-size: 2rem; padding-bottom: 5px; }
.visionneuse__fermer {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 44px; height: 44px; font-size: 1.8rem; padding-bottom: 4px;
}
.visionneuse__fermer:focus-visible, .visionneuse__nav:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}

/* La page ne doit pas défiler derrière la photo */
body.sans-defilement { overflow: hidden; }

@media (max-width: 700px) {
  /* Les flèches passent en bas, sous la photo : au milieu des bords, elles
     tombent pile là où le pouce tient le téléphone. */
  .visionneuse { flex-wrap: wrap; align-content: center; }
  .visionneuse__cadre { order: 1; width: 100%; }
  .visionneuse__cadre img { max-height: 68vh; }
  .visionneuse__nav { order: 2; width: 58px; height: 58px; }
}


/* =========================================================================
   QUESTIONS FRÉQUENTES
   ========================================================================= */
.faq details {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-moyen);
  padding: 0 24px; margin-bottom: 10px;
  transition: border-color .18s ease;
}
.faq details[open] { border-color: var(--trait-fort); }
.faq summary {
  cursor: pointer; padding: 19px 0; font-weight: 650; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-size: .99rem; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--creme); color: var(--aubergine);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  font-size: 1.1rem; font-weight: 400; line-height: 25px; text-align: center;
  transition: .18s ease;
}
.faq details[open] summary::after {
  content: "–"; background: var(--aubergine); color: #fff; box-shadow: none;
}
.faq details p { font-weight: 300; color: var(--gris); }
.faq details > *:last-child { padding-bottom: 16px; }


/* =========================================================================
   ENCADRÉS ET CITATIONS
   ========================================================================= */

blockquote {
  margin: 1.7em 0; padding: 20px 26px;
  background: var(--creme); border-radius: var(--r-moyen);
  border-left: 3px solid var(--rose);
  font-weight: 300; font-size: 1.02rem;
}
blockquote p:last-child { margin-bottom: 0; }


/* =========================================================================
   TABLEAU
   ========================================================================= */
.tableau { width: 100%; border-collapse: collapse; min-width: 420px; background: #fff; }
.tableau th, .tableau td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--trait); }
.tableau th { background: var(--creme); font-size: .88rem; font-weight: 650; color: var(--aubergine); }
.tableau td { font-weight: 300; color: var(--gris); }
.tableau tr:last-child td { border-bottom: 0; }


/* =========================================================================
   FORMULAIRE
   ========================================================================= */
/* Le formulaire dans une carte.

   Posé à même le fond de page, c'était une pile de champs qui flottait à
   droite d'une colonne portrait, et le grand vide sous le bouton faisait
   pencher la page. Dans une carte, il devient un objet : il a un bord, un
   poids, et le bouton s'y termine proprement. La page de contact reçoit en
   échange le fond crème, pour que la carte blanche s'en détache. */
.formulaire {
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-grand); padding: 30px 30px 26px;
  box-shadow: var(--ombre);
}
@media (max-width: 620px) {
  .formulaire { padding: 22px 20px 20px; }
}

.formulaire label { display: block; margin-bottom: 18px; font-weight: 650; font-size: .92rem; }
.formulaire input, .formulaire textarea, .formulaire select {
  display: block; width: 100%; margin-top: 7px; padding: 13px 16px;
  font: inherit; font-weight: 400; font-size: .98rem; color: var(--encre);
  background: #fff; border: 1.5px solid var(--trait-fort);
  border-radius: var(--r-petit); transition: .15s ease;
}
.formulaire input:hover, .formulaire textarea:hover { border-color: var(--lilas); }
.formulaire input:focus, .formulaire textarea:focus {
  outline: none; border-color: var(--mauve);
  box-shadow: 0 0 0 3px rgba(126,75,132,.11);
}
.formulaire textarea { resize: vertical; }
.formulaire__duo { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
.piege { position: absolute; left: -9999px; }

.message { padding: 16px 20px; border-radius: var(--r-moyen); margin-bottom: 1.2em; font-size: .96rem; }
.message--ok   { background: #EDF6F1; box-shadow: inset 0 0 0 1px #BFDECC; }
.message--ko   { background: #FCEDEF; box-shadow: inset 0 0 0 1px #EFBDC5; }
.message--info { background: var(--creme); box-shadow: inset 0 0 0 1px var(--lilas); }

/* Coordonnées avec pictogramme */
.coordonnees { list-style: none; padding: 0; margin: 0 0 1.6em; }
.coordonnees li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
/* Le pictogramme est dessiné dans la page, pas chargé : il prend la couleur
   du texte, adoucie, et reste net quel que soit l'écran. */
.coordonnees .picto {
  width: 22px; height: 22px; margin-top: 3px; flex: none;
  color: var(--mauve); opacity: .8;
}
.coordonnees a { text-decoration: none; }
.coordonnees a:hover { text-decoration: underline; }


/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.pied {
  margin-top: 92px; padding-top: 66px;
  background: var(--encre); color: #B5ADBE;
}
.pied__grille { display: grid; gap: 42px; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.pied__titre {
  font-weight: 700; margin-bottom: 1em; color: #fff; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase;
}
.pied p { margin: 0 0 .5em; font-size: .93rem; font-weight: 300; color: #A79EB1; }
.pied a { color: #C9C0D2; text-decoration: none; }
.pied a:hover { color: #fff; }
.pied strong { color: #fff; font-weight: 600; }
.pied__reseaux { margin-top: 1.3em !important; display: flex; gap: 16px; flex-wrap: wrap; }
.pied__bas { margin-top: 54px; padding-block: 24px 30px; border-top: 1px solid rgba(255,255,255,.09); }
.pied__bas p { margin: 0; font-size: .84rem; color: #8B8296; }
/* La signature du concepteur se lit comme le reste de la ligne : discrète,
   et elle ne s'éclaire qu'au survol. Elle est là pour qui la cherche, pas
   pour concurrencer les mentions légales à côté.

   Le sélecteur reprend « .pied » : sans lui, la règle générale des liens
   du pied, plus précise, rendait la signature plus claire que les mentions
   légales à côté — c'était la ligne la plus lumineuse du bas de page. */
.pied .pied__signature { color: inherit; text-decoration: none; }
.pied .pied__signature:hover { color: #C9C0D2; text-decoration: underline; }


/* =========================================================================
   BANDEAU D'ANNONCE
   Congés, fermeture, information ponctuelle. Le texte se règle dans
   _inc/config.php ; le bandeau disparaît si le texte est vide.
   ========================================================================= */
.annonce {
  margin: 0; padding: 11px 24px; text-align: center;
  background: var(--aubergine); color: #fff;
  font-size: .88rem; font-weight: 500; line-height: 1.45;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: center; justify-content: center;
}
.annonce__texte { font-weight: 500; }
.annonce a {
  color: #fff; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.annonce a:hover { color: #F0D9E8; }
@media print { .annonce { display: none; } }


/* =========================================================================
   TÉLÉPHONE ET TABLETTE
   ========================================================================= */
@media (max-width: 900px) {
  .bandeau__grille,
  .bandeau__grille--inverse { grid-template-columns: 1fr; gap: 36px; }
  .bandeau__image { order: -1; }   /* image au-dessus, textes en dessous */
  .bandeau__image img { aspect-ratio: 16 / 10; }

  /* Sauf sur l'accueil : le texte d'abord, la photo ensuite, les boutons
     pour finir — donc en bas du bloc, là où le pouce les attend. */
  .bandeau__grille--accueil {
    grid-template-areas: "texte" "image" "actions";
  }
  .bandeau__grille--accueil .bandeau__actions { margin: 0; }
  /* Le chapô garde sa marge basse, qui s'ajouterait à l'écart de la
     grille : la photo se retrouverait plus loin du texte qu'elle ne l'est
     des boutons. Les trois blocs respirent pareil. */
  .bandeau__grille--accueil .bandeau__texte > *:last-child { margin-bottom: 0; }
}

@media (max-width: 880px) {
  /* Sur téléphone, l'en-tête ne porte que le logo et le bouton de menu.
     L'appel et l'écriture sont descendus dans la barre fixée en bas
     d'écran : c'est la zone que le pouce atteint le plus facilement, et
     l'en-tête reste dégagé. */
  .entete__inner { flex-wrap: wrap; gap: 10px; padding-block: 11px; }
  .logo { margin-right: auto; order: 1; }
  /* Sur téléphone, le bouton de menu prend sa place : le logo se contente
     de ce qui reste, sans jamais le repousser. */
  .logo img { height: 48px; max-width: min(190px, 52vw); }

  /* La case à cocher qui ouvre le menu : invisible, mais présente.

     display:none ou visibility:hidden la sortiraient de la tabulation, et
     le menu ne s'ouvrirait plus qu'à la souris. On la réduit donc à un
     point rogné, hors du flux : elle ne se voit pas, ne décale rien, et
     reste atteignable au clavier. */
  .menu-bascule {
    display: block; position: absolute;
    width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .menu-bouton {
    display: block; position: relative;
    width: 44px; height: 40px; order: 2; cursor: pointer;
    border-radius: var(--r-petit); background: var(--creme);
  }

  /* Le focus se pose sur la case, qui ne se voit pas : c'est donc le bouton
     dessiné à côté qui doit le montrer, sans quoi la personne qui tabule ne
     sait pas où elle est. Le cadre reprend celui des autres éléments. */
  .menu-bascule:focus-visible ~ .menu-bouton {
    outline: 2px solid var(--aubergine); outline-offset: 3px;
  }
  .menu-bouton span {
    position: absolute; left: 12px; width: 20px; height: 2px;
    background: var(--aubergine); border-radius: 2px;
    transition: transform .22s ease, opacity .12s ease;
  }
  .menu-bouton span:nth-child(1) { top: 13px; }
  .menu-bouton span:nth-child(2) { top: 19px; }
  .menu-bouton span:nth-child(3) { top: 25px; }
  .menu-bascule:checked ~ .menu-bouton span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-bascule:checked ~ .menu-bouton span:nth-child(2) { opacity: 0; }
  .menu-bascule:checked ~ .menu-bouton span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Le numéro quitte l'en-tête : il est repris par la bulle flottante */
  .bouton--tel { display: none !important; }

  .menu {
    order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin-left: 0; display: none;
    padding-top: 8px; border-top: 1px solid var(--trait);
  }
  .menu-bascule:checked ~ .menu { display: flex; }

  /* Le point rose de l'étiquette « Organisme de formation certifié
     Qualiopi » : sur deux lignes de texte centré, il se retrouvait seul,
     collé à gauche, sans rien à annoncer. Il disparaît en dessous de cette
     largeur — l'étiquette reste, le point n'avait qu'un rôle décoratif. */
  .surtitre::before { display: none; }
  .surtitre { padding-left: 16px; }
  .menu a { padding: 13px 14px; }

  .bandeau { padding: 52px 0 60px; }
  .section { padding: 54px 24px 60px; }
  .chiffres__grille { padding: 34px 24px; gap: 28px; }
  .formation { padding: 24px 22px 20px; }
  .carte { padding: 22px; }
  .bouton { display: block; text-align: center; margin-right: 0; }
  .menu .bouton { display: inline-block; }
  .formulaire__duo { grid-template-columns: 1fr; }
  .pied { margin-top: 60px; }
  .logos { gap: 24px 30px; }
  .logos img { max-height: 42px; }
}


/* =========================================================================
   BULLE D'APPEL (téléphone uniquement)
   Invisible sur ordinateur : le numéro y est déjà dans l'en-tête, et la
   souris atteint tout sans effort.
   ========================================================================= */
.bulle-tel { display: none; }

@media (max-width: 880px) {
  .bulle-tel {
    display: grid; place-content: center;
    position: fixed; z-index: 35;
    right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--aubergine); color: #fff;
    box-shadow: 0 4px 14px rgba(31,23,38,.22), 0 10px 32px rgba(78,49,102,.32);
    transition: transform .18s cubic-bezier(.34,1.3,.64,1), background .18s ease;
  }
  .bulle-tel:active { transform: scale(.93); background: var(--aubergine-f); }

  /* Un peu d'air en bas pour que la bulle ne masque pas la dernière ligne */
  body { padding-bottom: 20px; }
}

/* =========================================================================
   IMPRESSION
   ========================================================================= */
@media print {
  .entete, .fil, .bouton, .saut, .formulaire, .pied__reseaux,
  .chiffres, .galerie, .logos, .annonce, .bulle-tel { display: none; }
  body { padding-bottom: 0; }
  body { font-size: 11pt; color: #000; }
  .formation, .carte, .temoignage { border: 1px solid #CCC; break-inside: avoid; }
  .pied { background: none; color: #000; margin-top: 30px; }
  .pied p, .pied a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* =========================================================================
   LES AVIS — présentation inspirée des fiches d'avis Google
   ========================================================================= */
.avis__entete {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: flex-end; justify-content: space-between;
}
.avis__entete h2 { margin: 0 0 .3em; }
.avis__entete p { margin: 0; }

.avis__note { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.avis__note strong { font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; }

.etoiles { display: inline-flex; gap: 2px; vertical-align: middle; }
.etoiles svg { width: 17px; height: 17px; fill: #F5A623; flex: none; }
.etoile--vide { fill: var(--trait-fort); }

.avis {
  display: grid; gap: 20px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* -------------------------------------------------------------------------
   L'AVIS MIS EN AVANT

   Une citation, pas une fiche : pas de cadre, pas de fond, juste un filet
   à gauche et un corps de texte plus grand. C'est la seule fois où le site
   fait grandir du texte courant, donc l'œil s'y arrête.
   ------------------------------------------------------------------------- */
.avis__vedette {
  margin: 34px 0 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--rose);
  max-width: 78ch;
}
/* Le style général des citations pose déjà un fond et un filet à gauche.
   Ici, le filet est porté par la figure entière : on remet donc la
   citation à zéro, sans quoi deux traits roses se superposent. */
.avis__vedette blockquote {
  margin: 0 0 16px; padding: 0; background: none; border: 0; border-radius: 0;
}
.avis__vedette blockquote p {
  margin: 0; font-size: clamp(1.1rem, 1rem + .55vw, 1.42rem);
  font-weight: 300; line-height: 1.5; letter-spacing: -.015em; color: var(--encre);
}
.avis__vedette figcaption { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avis__vedette-qui { display: flex; flex-direction: column; line-height: 1.3; }
.avis__vedette-qui strong { font-weight: 650; font-size: .97rem; }

/* -------------------------------------------------------------------------
   LA PISTE DES AUTRES AVIS

   Une seule rangée qui se fait glisser, au lieu de trois rangées empilées.
   « scroll-snap » cale chaque fiche en bout de course : le défilement
   s'arrête toujours sur une fiche entière, jamais au milieu de deux.

   La piste reste à l'intérieur du conteneur, sans marge négative pour
   déborder jusqu'aux bords de l'écran : un essai dans ce sens ajoutait
   onze pixels de largeur à la page autour de 1 024 px, et donc une barre
   de défilement horizontale sur tout le site. La dernière fiche est de
   toute façon coupée par le bord du conteneur — ce qui suffit à annoncer
   qu'il y en a d'autres, et c'est le seul rôle de ce débordement.
   ------------------------------------------------------------------------- */
.avis--piste {
  display: flex; gap: 16px; margin-top: 30px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 0 16px;
  scrollbar-width: thin;
}
.avis--piste .avis__fiche {
  flex: 0 0 clamp(268px, 30%, 340px);
  scroll-snap-align: start;
}
.avis--piste:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }

/* La barre de défilement, discrète mais présente : c'est elle qui dit
   qu'il reste quelque chose à droite. */
.avis--piste::-webkit-scrollbar { height: 6px; }
.avis--piste::-webkit-scrollbar-track { background: var(--trait); border-radius: 3px; }
.avis--piste::-webkit-scrollbar-thumb { background: var(--trait-fort); border-radius: 3px; }
.avis--piste::-webkit-scrollbar-thumb:hover { background: var(--gris-clair); }
.avis__fiche {
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-moyen); padding: 24px 26px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
/* Une carte d'avis se lit centrée, comme une citation.

   Les cartes portaient une pastille ronde avec l'initiale du prénom. Elle
   n'apprenait rien — le prénom est juste à côté — et sur écran étroit elle
   poussait le nom hors de l'axe pendant que les étoiles et le texte
   restaient centrés : trois alignements dans le même cadre. Retirée, la
   carte tient sur un seul axe, et c'est plus juste : ce qu'on vient y
   chercher, c'est la parole, pas une vignette de profil. */
.avis__fiche { text-align: center; }
.avis__tete {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; margin-bottom: 2px;
}

/* La carte est un conteneur flex en colonne : ses enfants sont des éléments
   flex, étirés sur toute la largeur. Les étoiles, elles, sont une petite
   boîte flex — étirée, elle range ses étoiles à partir de son bord gauche,
   et le « text-align: center » de la carte ne peut rien pour elle. C'est
   au niveau flex qu'il faut le dire. */
.avis__fiche .etoiles { align-self: center; }
.avis__qui { display: flex; flex-direction: column; align-items: center; line-height: 1.32; min-width: 0; }
.avis__qui strong { font-weight: 650; font-size: .98rem; }
.avis__formation { font-size: .82rem; color: var(--gris-clair); font-weight: 300; }
/* Le badge Google se centre comme le reste de la carte : « margin-left:
   auto », hérité de la mise en page précédente, le renvoyait à droite. */
.avis__source {
  display: flex; align-items: center; justify-content: center;
  margin-left: 0; flex: none;
}

.avis__fiche blockquote {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  font-size: .96rem; font-weight: 300; line-height: 1.62; color: var(--encre);
}
.avis__fiche blockquote p { margin: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================================
   LES ÉTABLISSEMENTS CLIENTS, en texte
   ========================================================================= */
/* =========================================================================
   LES RÉFÉRENCES CLIENTES, DANS LE PIED DE PAGE

   Elles avaient une section à elles sur l'accueil, tout en bas, après les
   témoignages — 450 pixels là où presque personne ne descend. Or ce qui
   porte, dans dix-huit références, c'est le nombre : il est passé dans les
   chiffres clés du haut de page, là où se joue la décision.

   Les noms restent utiles à qui les cherche — un responsable formation
   regarde si un établissement comparable au sien y figure. Ils sont donc
   ici, repliés, et présents sur toutes les pages au lieu d'une seule.
   ========================================================================= */
.pied__references { padding-bottom: 28px; }
.pied__references details { border-top: 1px solid rgba(255,255,255,.09); padding-top: 22px; }
.pied__references summary {
  cursor: pointer; list-style: none; position: relative; padding-right: 26px;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  display: inline-block;
}
.pied__references summary::-webkit-details-marker { display: none; }
.pied__references summary::after {
  content: "+"; position: absolute; right: 0; top: -1px;
  font-weight: 400; opacity: .55;
}
.pied__references details[open] summary::after { content: "–"; }
.pied__references summary:hover::after { opacity: 1; }
.pied__references ul {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 7px 28px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.pied__references li { margin: 0; font-size: .92rem; color: #B5ADBE; }


/* =========================================================================
   SOUS-MENU DÉROULANT
   Il s'ouvre au survol ET au clavier (focus-within), sans JavaScript.
   ========================================================================= */
.menu__groupe { position: relative; display: inline-flex; }
.menu__groupe > a { display: inline-flex; align-items: center; gap: 6px; }
.menu__fleche { font-size: .7em; opacity: .55; transition: transform .18s ease; }
.menu__groupe:hover .menu__fleche,
.menu__groupe:focus-within .menu__fleche { transform: rotate(180deg); opacity: 1; }

.menu__tiroir {
  position: absolute; top: 100%; left: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 268px;
  padding: 8px; margin-top: 4px;
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-moyen); box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  /* Délai de fermeture : le menu ne disparaît pas au premier frémissement
     de la souris. À l'ouverture, ce délai est annulé (règle suivante), le
     menu reste donc instantané. */
  transition-delay: .3s;
}

/* Le pont invisible.
   Le tiroir est décollé de 4 px du lien, et ces 4 px n'appartiennent à
   personne : dès que la souris les traverse pour descendre vers le tiroir,
   le survol est perdu et le menu se referme avant qu'on ait pu cliquer.
   Ce rectangle transparent recouvre l'écart. Il fait partie du tiroir,
   donc du groupe : le survol ne se rompt plus. Il déborde aussi de 12 px
   sur les côtés, pour la souris qui descend en diagonale. */
.menu__tiroir::before {
  content: ""; position: absolute;
  top: -12px; left: -12px; right: -12px; height: 16px;
}

.menu__groupe:hover .menu__tiroir,
.menu__groupe:focus-within .menu__tiroir {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.menu__tiroir a {
  padding: 10px 14px; border-radius: var(--r-petit);
  font-size: .93rem; font-weight: 500; color: var(--encre); white-space: nowrap;
}
.menu__tiroir a:hover { background: var(--creme); color: var(--aubergine); }
.menu__tout {
  margin-top: 4px; padding-top: 12px !important;
  border-top: 1px solid var(--trait);
  color: var(--aubergine) !important; font-weight: 650 !important;
  border-radius: 0 !important;
}


/* -------------------------------------------------------------------------
   LE PANNEAU DES FORMATIONS

   Un tiroir étroit suffisait pour quatre rubriques ; il ne suffit plus pour
   les treize formations. Le panneau prend donc toute la largeur de
   l'en-tête et s'organise en colonnes.

   Pour qu'il puisse s'étendre ainsi, il ne doit plus se positionner par
   rapport à son entrée de menu — trop à droite, il déborderait de l'écran —
   mais par rapport à la barre entière : d'où le « position: static » sur le
   groupe, qui renvoie le calage à .entete__inner.
   ------------------------------------------------------------------------- */
.menu__groupe--large { position: static; }

/* Le « pont » invisible du tiroir étroit déborde de 12 px de chaque côté,
   pour rattraper une souris qui descend en diagonale. Sur le panneau large,
   qui occupe déjà toute la barre, ces 12 px sortent de l'écran et ajoutent
   une barre de défilement horizontale à tout le site entre 880 et 1 100 px
   de large. Le pont est donc ramené à l'aplomb du panneau : la diagonale
   n'a plus lieu d'être, le panneau commence sous le lien. */
.menu__tiroir--mega::before { left: 0; right: 0; }

.menu__tiroir--mega {
  left: 0; right: 0; min-width: 0;
  padding: 26px 28px 20px;
  margin-top: 0;
  border-radius: 0 0 var(--r-grand) var(--r-grand);
  border-top: 0;
}

.megamenu {
  display: grid; gap: 10px 26px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.megamenu__colonne { display: flex; flex-direction: column; min-width: 0; }

/* Le titre de colonne : c'est un lien comme les autres, mais il porte la
   rubrique. Il se distingue par la graisse et le filet, pas par une
   couleur de plus. */
.megamenu__rubrique {
  font-weight: 700 !important; color: var(--aubergine) !important;
  white-space: normal !important; line-height: 1.3;
  margin-bottom: 4px; padding-bottom: 10px !important;
  border-bottom: 1px solid var(--trait);
  border-radius: var(--r-petit) var(--r-petit) 0 0 !important;
}
.megamenu__fiche {
  white-space: normal !important; line-height: 1.35;
  font-size: .875rem !important; font-weight: 400 !important;
  color: var(--gris) !important; padding: 8px 14px !important;
}
.megamenu__fiche:hover { color: var(--aubergine) !important; }

/* « margin-top: auto » : quelle que soit la hauteur de la colonne, ce lien
   se colle en bas. Les quatre colonnes se terminent donc sur la même
   ligne, et le panneau paraît réglé au lieu de tomber en escalier. */
.megamenu__rubrique-lien {
  margin-top: auto; padding: 10px 14px 4px !important;
  font-size: .83rem !important; font-weight: 600 !important;
  color: var(--aubergine) !important; white-space: nowrap !important;
}
.megamenu__rubrique-lien:hover { background: none !important; text-decoration: underline; }

.megamenu__pied {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--trait);
}
.megamenu__pied .menu__tout {
  margin-top: 0; padding-top: 10px !important; border-top: 0;
  border-radius: var(--r-petit) !important;
}
.menu__tout--second { color: var(--gris) !important; font-weight: 500 !important; }

/* Sur téléphone, le tiroir est simplement déplié dans la liste */
@media (max-width: 880px) {
  .menu__groupe { display: block; }
  .menu__groupe > a { justify-content: space-between; }
  .menu__fleche { display: none; }
  .menu__tiroir {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: flex; min-width: 0; margin: 0 0 6px 14px; padding: 0;
    border: 0; border-left: 2px solid var(--trait); border-radius: 0;
    box-shadow: none; background: none;
  }
  .menu__tiroir a { padding: 11px 14px; font-size: .9rem; white-space: normal; }
  .menu__tout { display: none; }

  /* Le panneau des formations redevient une simple liste dépliée : les
     quatre colonnes se rangent les unes sous les autres, et les formations
     restent en retrait sous leur rubrique.

     Sur téléphone, le catalogue entier tiendrait mal dans le menu — treize
     formations à faire défiler avant d'atteindre « Me contacter ». Seules
     les rubriques restent donc visibles ; le détail est à un clic, sur la
     page de la rubrique, qui est faite pour ça. */
  .menu__tiroir--mega {
    padding: 0; border-radius: 0; border-top: 0; border-left: 2px solid var(--trait);
  }
  .megamenu { display: flex; flex-direction: column; gap: 0; }
  .megamenu__rubrique {
    font-weight: 500 !important; color: var(--encre) !important;
    border-bottom: 0; margin-bottom: 0; padding-bottom: 11px !important;
  }
  .megamenu__fiche { display: none; }
  .megamenu__pied { display: none; }
}

/* =========================================================================
   LA SUITE — bloc de fin des fiches et des rubriques

   Il ferme la page sur une proposition plutôt que sur le pied de page. Le
   fond crème le détache du corps de la page sans introduire de couleur
   nouvelle : c'est le même fond que les sections « douces ».
   ========================================================================= */
.suite {
  background: var(--creme); border-top: 1px solid var(--trait);
  padding: 54px 24px 58px;
  /* Pas de marge haute : la section qui précède porte déjà son propre
     rembourrage bas. En ajouter une creusait un vide de deux cents pixels
     entre la fin du texte et le bloc. */
  margin-top: 0;
}

/* L'appel à l'action. Le dégradé est déjà celui du bloc « sur mesure » de
   l'accueil : le visiteur reconnaît la forme, et le site garde ses deux ou
   trois usages du dégradé, pas davantage. */
.suite__action {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  max-width: var(--large); margin: 0 auto;
  padding: 30px 38px; border-radius: var(--r-grand);
  background: var(--degrade); color: #fff;
}
.suite__titre {
  margin: 0 0 .3em; font-size: 1.2rem; font-weight: 750;
  letter-spacing: -.025em; line-height: 1.25;
}
.suite__texte { margin: 0; font-weight: 300; color: rgba(255,255,255,.92); }
/* Sans cette base de 380 px, le bloc de texte prend toute la largeur
   disponible et renvoie les boutons à la ligne, alignés à gauche sous le
   texte — alors qu'ils doivent rester à droite, en vis-à-vis. */
.suite__action > div { flex: 1 1 380px; min-width: 0; max-width: 62ch; }
.suite__boutons { margin: 0; flex: 0 0 auto; }
.suite__boutons .bouton { background: #fff; color: var(--aubergine); box-shadow: none; }
.suite__boutons .bouton:hover { background: var(--lilas); color: var(--aubergine-f); }
.suite__boutons .bouton--clair {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.suite__boutons .bouton--clair:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Les pages voisines. Deux lignes par entrée — le nom, puis de quoi la
   reconnaître — pour qu'on choisisse sans avoir à ouvrir. */
.suite__voisines { max-width: var(--large); margin: 40px auto 0; }
.suite__sous-titre {
  margin: 0 0 18px; font-size: .78rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.suite__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.suite__liste a {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  padding: 16px 18px; text-decoration: none;
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.suite__liste a:hover {
  border-color: var(--trait-fort); transform: translateY(-2px);
  box-shadow: var(--ombre);
}
.suite__nom { font-weight: 650; color: var(--encre); line-height: 1.3; }
.suite__liste a:hover .suite__nom { color: var(--aubergine); }
.suite__resume { font-size: .86rem; font-weight: 300; color: var(--gris); line-height: 1.5; }

.suite__retour { max-width: var(--large); margin: 30px auto 0; }
.suite__retour a { font-weight: 500; text-decoration: none; }
.suite__retour a:hover { text-decoration: underline; }

@media (max-width: 880px) {
  .suite { padding: 42px 22px 46px; margin-top: 54px; }
  .suite__action {
    flex-direction: column; align-items: flex-start;
    padding: 26px 24px; gap: 20px;
  }
  .suite__boutons { width: 100%; }
  .suite__boutons .bouton { width: 100%; text-align: center; }
}


/* =========================================================================
   LA LISTE DES FORMATIONS D'UN DOMAINE

   Dix-huit lignes les unes sous les autres ne se parcourent pas ; réparties
   en colonnes, elles se balaient. La liste sert dans la carte « domaine »
   de la page « Toutes les formations ».
   ========================================================================= */
.catalogue-domaine {
  columns: 3 240px; column-gap: 34px;
  list-style: none; margin: 0; padding: 0;
}
.catalogue-domaine li {
  break-inside: avoid; margin: 0 0 8px;
  padding-left: 16px; position: relative;
  font-size: .95rem; line-height: 1.5;
  /* Le trait de séparation vient de la carte « domaine », où la liste est
     une colonne unique. Réparti sur plusieurs colonnes de hauteurs
     inégales, il ne s'aligne plus et brouille la lecture. */
  border-top: 0; padding-top: 0; display: block;
}
.catalogue-domaine li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose);
}
.catalogue-domaine .domaine__sans { color: var(--gris); }
.carte-domaine .catalogue-domaine .domaine__sans { color: var(--gris); }
.catalogue-domaine .domaine__sans::before { background: var(--trait-fort); }

@media (max-width: 880px) {
  .catalogue-domaine { columns: 1; }
}


/* =========================================================================
   PAGE SUR MESURE — pictogrammes et étapes numérotées
   ========================================================================= */

/* Les trois étapes se lisent en ligne, comme un parcours.

   Empilées, elles occupaient une demi-largeur et laissaient l'autre moitié
   vide sur toute la hauteur du bloc ; surtout, trois étapes l'une sous
   l'autre se lisent comme une liste de courses, alors que c'est une
   progression : on les met côte à côte, dans l'ordre où elles arrivent. */
.etapes {
  list-style: none; padding: 0; margin: 0;
  counter-reset: etape;
  display: grid; gap: 26px;
}
.etapes li {
  position: relative; padding-left: 54px; margin: 0;
  font-weight: 300; color: var(--gris); max-width: none;
}
/* Un fil descend d'un numéro au suivant : on lit un chemin, pas trois
   paragraphes empilés. Il s'arrête à la dernière étape. */
.etapes li::after {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: -26px;
  width: 1px; background: var(--trait-fort);
}
.etapes li:last-child::after { display: none; }
.etapes li strong { font-weight: 700; color: var(--encre); }
.etapes li::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 0; display: grid; place-content: center;
  width: 39px; height: 39px; border-radius: 50%;
  background: var(--degrade); color: #fff;
  font-size: .9rem; font-weight: 750; letter-spacing: -.01em;
}
/* Le nom de l'étape prend la ligne : « Cibler » puis sa phrase, plutôt
   qu'un mot en gras noyé au début d'un paragraphe. */
.etapes li strong {
  display: block; margin-bottom: .25em; color: var(--encre);
  font-size: 1.02rem; letter-spacing: -.02em;
}

/* --- Le surtitre d'une fiche formation est un lien vers sa rubrique ----- */
.surtitre a { color: inherit; text-decoration: none; }
.surtitre a:hover { text-decoration: underline; }

@media (max-width: 880px) {
  /* Sur téléphone, les étapes redeviennent une colonne : trois colonnes
     dans cette largeur donneraient des mots coupés. */
  /* Le chemin numéroté reste vertical et aligné à gauche, y compris ici :
     centrer les numéros casserait le fil qui les relie. */
  .etapes li { padding-left: 48px; text-align: left; }
  .etapes li::before { width: 35px; height: 35px; }
  .etapes li::after { left: 17px; top: 40px; bottom: -26px; }
  .etapes li::before { width: 34px; height: 34px; }
}


/* =========================================================================
   RESPIRATION DANS LES PAGES DE TEXTE

   Les pages de formation sont longues et denses. Sans relief, elles se
   lisent comme un document administratif : l'œil ne sait pas où se poser.
   Trois marqueurs suffisent à structurer, sans surcharger.
   ========================================================================= */

/* --- Un chiffre qui doit se voir --------------------------------------- */
.fait {
  position: relative;
  margin: 2em 0; padding: 22px 26px 22px 30px;
  background: linear-gradient(180deg, #FDF8FB, var(--creme));
  border: 1px solid var(--trait); border-left: 0;
  border-radius: var(--r-moyen);
  font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem);
  font-weight: 450; line-height: 1.5; color: var(--aubergine);
  letter-spacing: -.012em;
}
.fait::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--r-moyen) 0 0 var(--r-moyen);
  background: var(--degrade);
}

/* --- La source d'un chiffre : présente, mais discrète ------------------- */
.note {
  margin-top: -1.2em; font-size: .84rem; font-weight: 300;
  color: var(--gris-clair); font-style: italic;
}

/* --- Les intertitres portent une petite marque ------------------------- */
.section--texte h3, .formation h3 {
  position: relative; padding-left: 20px; margin-top: 2.4em;
}
.section--texte h3::before, .formation h3::before {
  content: ""; position: absolute; left: 0; top: .36em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 4px #FBF0F6;
}

/* Sur téléphone, les titres sont centrés. Cette marque, posée en absolu au
   bord gauche, restait plantée là pendant que le texte se centrait — le
   titre avait l'air cassé. Elle redevient un élément de la ligne et suit le
   texte. Cette règle doit rester ICI, après celle qu'elle corrige : plus
   haut dans la feuille, à spécificité égale, c'est l'autre qui gagnait. */
@media (max-width: 720px) {
  .section--texte h3, .formation h3 {
    position: static; padding-left: 0;
    display: flex; align-items: center; justify-content: center; gap: 11px;
  }
  .section--texte h3::before, .formation h3::before {
    position: static; flex-shrink: 0;
  }
}

/* --- Une liste qui suit un intertitre devient un panneau ---------------- */
.section--texte h3 + ul, .section--texte h3 + p + ul {
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  padding: 20px 26px 20px 28px; margin-top: 1.1em;
}
.section--texte h3 + ul li:last-child,
.section--texte h3 + p + ul li:last-child { margin-bottom: 0; }

/* --- La devise d'ouverture : posée, pas criarde ------------------------ */
.devise {
  display: inline-block; margin-bottom: 1.6em;
  font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; color: var(--mauve);
}

@media (max-width: 640px) {
  .fait { padding: 18px 20px 18px 24px; }
  .section--texte h3 + ul, .section--texte h3 + p + ul { padding: 16px 18px 16px 22px; }
}

/* --- Pages de formation : les intertitres sont des h2 ---------------------
   Le titre de la page est le h1 ; Objectifs, Contenu, Public cible, Tarif… sont des h2, sans saut de niveau (avant : des h3
   directement sous le h1). Ils reprennent EXACTEMENT le rendu qu'avaient ces intertitres en h3 (règles ci-dessus). Limité aux
   pages de formation (.section--formation) : les mentions légales et la politique de confidentialité ont aussi des h2 dans
   .section--texte, et ne doivent pas changer. */
.section--formation h2 {
  font-size: clamp(1.1rem, 1.02rem + .38vw, 1.28rem); font-weight: 700; letter-spacing: -.02em;
  position: relative; padding-left: 20px; margin-top: 2.4em;
}
.section--formation h2::before {
  content: ""; position: absolute; left: 0; top: .36em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 4px #FBF0F6;
}
@media (max-width: 720px) {
  .section--formation h2 {
    position: static; padding-left: 0;
    display: flex; align-items: center; justify-content: center; gap: 11px;
  }
  .section--formation h2::before { position: static; flex-shrink: 0; }
}
.section--formation h2 + ul, .section--formation h2 + p + ul {
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  padding: 20px 26px 20px 28px; margin-top: 1.1em;
}
.section--formation h2 + ul li:last-child,
.section--formation h2 + p + ul li:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .section--formation h2 + ul, .section--formation h2 + p + ul { padding: 16px 18px 16px 22px; }
}


/* =========================================================================
   LE PORTRAIT

   La photo est cadrée par le CSS, jamais recoupée dans le fichier : une
   photo remplacée depuis l'espace de gestion s'affiche correctement aux
   deux endroits sans qu'on ait touché à l'original.

   Le cadrage vise le haut plutôt que le centre : sur un portrait, c'est là
   que se trouve le visage.
   ========================================================================= */
.portrait { aspect-ratio: 1; object-fit: cover; object-position: center 22%; }
.portrait--grand { border-radius: var(--r-grand); max-width: 340px; width: 100%; }
.portrait--rond  { width: 168px; border-radius: 50%; margin-bottom: 1.15em; }


/* =========================================================================
   LES TROIS FAMILLES DE LIENS

   Un visiteur doit savoir ce qui va se passer AVANT de cliquer. D'où trois
   habillages constants sur tout le site :
     - un lien d'action        → un bouton
     - un document à ouvrir    → un bouton portant la mention PDF
     - un lien vers un autre site → une flèche sortante
   ========================================================================= */

/* --- Document ----------------------------------------------------------- */
.bouton--doc, .lien-doc {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.bouton--doc::before, .lien-doc::before {
  content: ""; flex: none; width: 17px; height: 21px;
  background: currentColor;
  -webkit-mask: var(--picto-doc) center / contain no-repeat;
          mask: var(--picto-doc) center / contain no-repeat;
}
.lien-doc {
  color: var(--aubergine); font-weight: 600;
  border-bottom: 1px solid var(--trait-fort); padding-bottom: 2px;
}
.lien-doc:hover { color: var(--rose); border-color: var(--rose); }

.lien-doc__type {
  font-size: .68rem; font-weight: 750; letter-spacing: .07em;
  padding: 2px 7px; border-radius: var(--r-pilule);
  background: rgba(255,255,255,.22); line-height: 1.5;
}
.lien-doc .lien-doc__type {
  background: var(--lilas); color: var(--aubergine);
}

/* --- Lien externe ------------------------------------------------------- */
.lien-externe { font-weight: 550; }
.lien-externe__fleche {
  display: inline-block; margin-left: .28em; font-size: .86em;
  transform: translateY(-1px); opacity: .7;
}
.lien-externe:hover .lien-externe__fleche { opacity: 1; }


/* =========================================================================
   LES DÉPLIANTS

   Sur la page santé, douze formations se suivent. Déroulées, elles font un
   mur de texte que personne ne lit ; repliées, chacune se choisit d'un
   coup d'œil. C'est la présentation du site d'origine, refaite proprement.
   ========================================================================= */
.depliant {
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-moyen); margin-bottom: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.depliant:hover { border-color: var(--trait-fort); }
.depliant[open] {
  border-color: var(--lilas); box-shadow: var(--ombre);
}

.depliant > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; cursor: pointer;
  font-weight: 650; letter-spacing: -.015em; color: var(--encre);
  list-style: none;                 /* on remplace la flèche du navigateur */
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary:hover { color: var(--aubergine); }
.depliant[open] > summary { color: var(--aubergine); }

/* Le signe + qui devient − : le repère le plus universel qui soit. */
.depliant > summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--creme) var(--picto-plus) center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  transition: transform .22s ease, background-color .18s ease;
}
.depliant[open] > summary::after {
  background: var(--lilas) var(--picto-moins) center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px var(--lilas);
}

.depliant__corps {
  padding: 2px 20px 20px; border-top: 1px solid var(--trait);
  margin-top: -1px;
}
.depliant__corps > *:first-child { margin-top: 1.1em; }
.depliant__corps > *:last-child  { margin-bottom: 0; }
.depliant__corps p { color: var(--gris); font-weight: 300; }
.depliant__corps .bouton { margin-top: .3em; }

/* Deux dépliants qui se suivent forment une pile, pas deux blocs isolés */
.depliant + .depliant { margin-top: -2px; }

@media (max-width: 640px) {
  .depliant > summary { padding: 15px 16px; gap: 10px; font-size: .97rem; }
  .depliant__corps { padding: 2px 16px 18px; }
}


/* =========================================================================
   LE CATALOGUE COMPLET, PAR DOMAINE

   Vingt-six formations à la file ne se lisent pas : on perd son domaine et
   on ne voit pas la fin. Quatre blocs, un par domaine, et chacun se parcourt
   d'un coup d'œil. L'intitulé du domaine est cliquable : c'est le raccourci
   le plus court vers la page qui détaille ses formations.
   ========================================================================= */
.domaines {
  display: grid; gap: 18px; margin-top: 34px;
  /* Deux colonnes, comme sur le site d'origine : à trois, le domaine santé
     et ses douze formations écrase les autres blocs. */
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  align-items: start;
}

.domaine {
  background: #fff; border: 1px solid var(--trait);
  border-radius: var(--r-grand); padding: 20px 22px 22px;
  box-shadow: var(--ombre);
}

.domaine__titre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin-bottom: 18px;
  border-radius: var(--r-pilule);
  background: var(--creme); box-shadow: inset 0 0 0 1px var(--trait-fort);
  color: var(--aubergine); text-decoration: none;
  font-weight: 700; font-size: .92rem; letter-spacing: -.012em;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.domaine__titre::after {
  content: "→"; font-weight: 500; opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.domaine__titre:hover {
  background: var(--aubergine); color: #fff;
  box-shadow: inset 0 0 0 1px var(--aubergine);
}
.domaine__titre:hover::after { opacity: 1; transform: translateX(3px); }

.domaine__liste { list-style: none; padding: 0; margin: 0; }
.domaine__liste li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; margin: 0;
  border-top: 1px solid var(--trait);
  font-size: .95rem; line-height: 1.5;
}
.domaine__liste li:first-child { border-top: 0; padding-top: 0; }
.domaine__liste li::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rose); transform: translateY(-2px);
}
.domaine__liste a { text-decoration: none; font-weight: 550; color: var(--encre); }
.domaine__liste a:hover { color: var(--rose); text-decoration: underline; }
.domaine__liste span { color: var(--gris); font-weight: 300; }

/* Une formation sans fiche : en gris, et sa puce s'efface. Rien de plus —
   la note sous les blocs dit déjà qu'il suffit de demander le programme. */
.domaine__sans { color: var(--gris-clair); font-weight: 300; }
.domaine__sans::before { background: var(--trait-fort); }

@media (max-width: 640px) {
  .domaines { grid-template-columns: 1fr; gap: 14px; }
  .domaine { padding: 18px 18px 20px; }
}

/* ===== Avis Google ===== */
/* Boutons de l'en-tête des avis, quand il y a des avis Google : « Déposer votre avis Google » et « Voir tous les avis » */
.avis__liens { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.avis__liens .bouton { margin: 0; text-align: center; }
@media (max-width: 640px) { .avis__liens { width: 100%; } .avis__liens .bouton { flex: 1 1 100%; } }

/* Le nom d'un avis Google mène à l'avis lui-même, sur Google : un lien discret, qui ne change pas l'allure de la carte */
.avis__qui a, .avis__vedette-qui a { color: inherit; text-decoration: none; }
.avis__qui a:hover, .avis__vedette-qui a:hover { color: var(--aubergine); text-decoration: underline; }
.avis__qui a:focus-visible, .avis__vedette-qui a:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; border-radius: 2px; }
/* Le texte réservé aux lecteurs d'écran (« Avis Google ») est positionné : sans repère, il se placerait hors de la piste qui défile
   et ferait déborder la page à droite sur téléphone. Son repère est le logo : il reste dans la piste, donc coupé avec elle. */
.avis__source { position: relative; }