/* =========================================================================
   Métapédagogue — Isabelle Debever
   Feuille de style principale
   Palette & typographie reprises du site d'origine (Elementor)
   ========================================================================= */

/* ----------------------------- Polices (auto-hébergées) ----------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-300.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Sacramento";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/sacramento-400.woff2") format("woff2");
}

/* ----------------------------- Tokens de design ------------------------- */
:root {
  /* Couleurs (globales Elementor d'origine) */
  --color-primary: #0e4660;   /* bleu canard foncé — titres, sections sombres */
  --color-secondary: #44a4a2; /* turquoise — accents, sous-titres */
  --color-text: #324a6d;      /* bleu-gris — corps de texte */
  --color-accent: #ce913b;    /* ocre/or — survols, détails */
  --color-white: #ffffff;
  --color-light: #f9fafd;     /* fond très clair */
  --color-pale: #c8d5dc;      /* bleu-gris pâle */
  --color-cream: #f4efe6;     /* crème chaud (sections douces) */

  /* Typographies */
  --font-heading: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-sub: "Poppins", system-ui, sans-serif;
  --font-script: "Sacramento", "Brush Script MT", cursive;

  /* Échelle fluide (clamp : mobile → desktop) */
  --fs-h1: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  --fs-script: clamp(2.2rem, 1.6rem + 3vw, 3.4rem);
  --fs-body: 1.05rem;
  --fs-lead: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);

  /* Espacements & formes */
  --container: 1180px;
  --container-narrow: 820px;
  --space-section: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --radius: 14px;
  --radius-lg: 26px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(14, 70, 96, 0.08);
  --shadow-md: 0 14px 40px rgba(14, 70, 96, 0.12);
  --shadow-lg: 0 24px 60px rgba(14, 70, 96, 0.16);
  /* Ombre des éléments « flottants » (pilule de nav, carte du hero) — cf. Figma */
  --shadow-float: 0 0 3px rgba(0, 0, 0, 0.08), 0 12px 10px rgba(0, 0, 0, 0.08);
  --transition: 0.25s ease;

  --header-h: 88px;
}

/* ----------------------------- Reset & base ----------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
  /* Hérité par tout le document : un mot trop long pour sa colonne est coupé au
     lieu de déborder (cas des écrans étroits avec agrandissement de texte). */
  overflow-wrap: break-word;
  color: var(--color-text);
  background: var(--color-cream); /* beige unique du Figma, plus d'alternance */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Le décor de survol des cartes déborde volontairement de 58px de chaque côté ;
   sur écran étroit il dépasse alors la fenêtre et provoque un défilement
   horizontal. On le rogne ici — `clip` et non `hidden`, pour ne pas créer de
   conteneur de défilement (qui casserait le positionnement sticky). */
main {
  overflow-x: clip;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-accent);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.18;
  margin: 0 0 0.6em;
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}

p {
  margin: 0 0 1.1em;
}

/* Le gras ressort nettement : vraie graisse 700 + couleur primaire (corps en 300). */
strong,
b {
  font-weight: 700;
  color: var(--color-primary);
}
/* Sur fonds sombres, le gras garde la couleur du texte (sinon illisible). */
.section--primary strong,
.section--primary b {
  color: inherit;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------------------------- Utilitaires ------------------------------ */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container.narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-section);
}
/* --------------------------- Entête de page ------------------------------
   Chaque page ouvre sur la même bande : l'aquarelle glisse sous la nav et
   s'étire pour englober la carte crème, toujours posée à la même hauteur
   (Figma « pour claude »). */
.hero,
main > .section:first-of-type {
  margin-top: calc(-1 * var(--header-h)); /* remonte sous la nav flottante */
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 2.5vw, 3rem));
  padding-bottom: var(--space-section);
  background: url("/images/entete-aquarelle.jpg") center bottom / cover no-repeat;
}
.hero__inner,
main > .section:first-of-type > .container {
  min-height: 420px;
  background: var(--color-cream);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  padding: clamp(1.8rem, 1.2rem + 2.5vw, 2.5rem);
}
/* Desktop : toutes les cartes d'entête à la hauteur du hero de l'accueil. */
@media (min-width: 981px) {
  .hero__inner,
  main > .section:first-of-type > .container {
    min-height: 650px;
  }
}
main > .section:first-of-type > .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* `width` explicite : les blocs à `margin-inline: auto` (comme .prose) perdent
   l'étirement flex et reprendraient sinon leur taille de contenu, débordant de
   la carte sur écran étroit. `min-width` lève le plancher min-content. */
main > .section:first-of-type > .container > * {
  min-width: 0;
  width: 100%;
}

/* Plus d'alternance de fonds : tout repose sur le beige du body. */
.section--light {
  background: transparent;
}
.section--cream {
  background: transparent;
}
.section--primary {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.92);
}
.section--primary h1,
.section--primary h2,
.section--primary h3 {
  color: var(--color-white);
}

/* Titre script (façon "Sacramento" du site d'origine) */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--color-secondary);
  font-size: var(--fs-script);
  line-height: 1.1;
  margin: 0 0 0.2em;
}
.eyebrow {
  font-family: var(--font-sub);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--color-accent);
  margin: 0 0 1rem;
}

.section-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--color-text);
}

.text-center {
  text-align: center;
}

/* ----------------------------- Boutons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  white-space: nowrap;
  max-width: 100%; /* jamais plus large que son conteneur */
}
/* Sur écran étroit, un libellé long passe à la ligne au lieu de déborder. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
  }
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Sur la carte contact (fond turquoise), le survol bascule sur l'ocre pour rester visible. */
.contact-card .btn--primary:hover {
  background: var(--color-accent);
}
.btn--accent {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--accent:hover {
  background: #b87d2c;
  color: var(--color-white);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--color-primary);
}
.btn--ghost:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.section--primary .btn--ghost {
  color: var(--color-white);
}
.section--primary .btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-primary);
}
/* Bouton verrouillé (envoi en cours) : le survol reste actif sur un bouton désactivé,
   d'où la seconde règle qui neutralise le soulèvement et l'ombre des variantes. */
.btn:disabled,
.btn:disabled:hover {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* ----------------------------- Cartes ----------------------------------- */
.grid {
  display: grid;
  gap: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}

/* Un élément de grille refuse par défaut de descendre sous sa taille min-content :
   un mot long (« compétences ») ou un texte agrandi par le visiteur élargit alors
   la colonne, qui déborde de sa carte. `min-width: 0` lève ce plancher — la
   coupure des mots est assurée par `overflow-wrap` hérité du body. */
.grid > *,
.split > *,
.hero__inner > *,
.footer-grid > *,
.contact-grid > *,
.contact-id > *,
.contact-lines > *,
.contact-lines li > *,
.contact-form > *,
.field > * {
  min-width: 0;
  max-width: 100%;
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  position: relative;
  z-index: 0; /* contexte d'empilement : le décor ::before reste derrière le contenu */
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 70, 96, 0.06);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
}
.card:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
}

/* Décor aquarelle au survol (node « hover effect » du Figma) : le motif dépasse
   de derrière la carte — bulle bleue en haut à gauche, éclat marine en bas à
   droite. Le survol applique un scale, qui crée un contexte d'empilement : le
   décor repasserait donc au-dessus du fond de la carte. On l'évide via un masque
   « border-box moins padding-box » — la bordure transparente dessine la zone
   visible, et le trou hérite du border-radius de la carte (angles arrondis). */
.card::before,
.tile::before {
  --deco-spread: 58px;
  --deco-cut: calc(var(--deco-spread) - 2px); /* trou 1px plus grand que la carte : pas de liseré */
  content: "";
  position: absolute;
  inset: calc(-1 * var(--deco-spread));
  border: var(--deco-cut) solid transparent;
  border-radius: calc(var(--radius-lg) + var(--deco-cut));
  background: url("/images/hover-effect.png") border-box center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  z-index: -1;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.card:hover::before,
.tile:hover::before {
  opacity: 1;
}
/* Carte-lien : toute la carte est cliquable (pas de bouton « En savoir plus ») */
a.card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  padding-bottom: 3rem;
  cursor: pointer;
}
a.card:hover {
  color: var(--color-text);
}
a.card::after {
  content: "›";
  position: absolute;
  right: 1.5rem;
  bottom: 1.1rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--transition);
}
a.card:hover::after {
  transform: translateX(4px);
}
.card__icon {
  height: 120px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 1.2rem;
}
.card h3 {
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}
.card p:last-child {
  margin-bottom: 0;
}

/* Carte à lien étiré : toute la carte reste cliquable, mais les liens internes
   (Upbraining®, CCTI®) restent indépendants — évite un <a> imbriqué (HTML invalide). */
.card--stretch {
  padding-bottom: 3rem;
  cursor: pointer;
}
.card--stretch .card__link,
.card--stretch .card__link:hover {
  color: var(--color-secondary);
  text-decoration: none;
}
/* le lien du titre s'étire pour couvrir toute la carte */
.card--stretch .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* chevron (la carte n'est plus un <a>, on le replace ici) */
.card--stretch::after {
  content: "›";
  position: absolute;
  right: 1.5rem;
  bottom: 1.1rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-accent);
  pointer-events: none;
  transition: transform var(--transition);
}
.card--stretch:hover::after {
  transform: translateX(4px);
}
/* liens internes : au-dessus de la zone cliquable, clairement identifiables */
.card--stretch p a {
  position: relative;
  z-index: 1;
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.card--stretch p a:hover {
  color: var(--color-accent);
}

/* ----------------------------- En-tête / Nav ---------------------------- */
/* Pilule blanche flottante sur l'aquarelle (Figma « pour claude ») */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
  padding-inline: 0.5rem;
  background: var(--color-white);
  border: 1px solid rgba(14, 70, 96, 0.08);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}
.brand img {
  height: 56px;
  width: auto;
}
.brand__name {
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: var(--color-primary);
  line-height: 1;
}
/* Onglet courant rappelé dans la pilule : réservé au mobile (cf. media query).
   Même typo que les liens de navigation. Les titres longs sont tronqués plutôt
   que de pousser le burger hors de la pilule. */
.brand__tagline {
  display: none;
  min-width: 0;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.15rem);
  line-height: 1.2;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: 0.98rem;
  color: var(--color-primary);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  position: relative;
}
.nav__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.nav a:hover,
.nav a.is-active {
  color: var(--color-secondary);
}
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}
.nav .btn {
  padding: 0.65rem 1.4rem;
  color: var(--color-white);
  margin-left: 0.4rem;
}
/* Le fond doit être réaffirmé ici : `.nav a:hover` (plus bas) l'emporterait sinon sur
   `.btn--primary:hover`, laissant un bouton blanc sur la pilule blanche de l'en-tête. */
.nav .btn:hover {
  color: var(--color-white);
  background: var(--color-secondary);
}

/* Burger (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 46px;
  height: 46px;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  position: relative;
}
.nav-toggle span::before {
  position: absolute;
  top: -8px;
}
.nav-toggle span::after {
  position: absolute;
  top: 8px;
}
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* ----------------------------- Hero ------------------------------------- */
/* La carte crème du hero : mêmes fondations que l'entête des autres pages
   (règle partagée « Entête de page » ci-dessus). */
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
.hero__content h1 {
  margin-bottom: 0.2em;
}
.hero__subtitle {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  color: var(--color-secondary);
  line-height: 1.05;
  margin-bottom: 0.6em;
}
.hero__media {
  position: relative;
  display: flex;
  flex-direction: column; /* le crédit photo se place sous l'image */
  align-items: center;
  justify-content: center;
}
.hero__media img {
  max-height: 500px;
  width: auto;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.8rem;
}

/* ----------------------------- Split (image + texte) -------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.split--reverse .split__media {
  order: 2;
}
.split__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-inline: auto;
}
.split__media.plain img {
  box-shadow: none;
  border-radius: 0;
}
/* Plusieurs photos empilées dans une même colonne (.split) */
.split__media--stack {
  display: grid;
  gap: 1.2rem;
}
/* Crédit discret sous une photo ou un groupe de photos. */
.media-note {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}
/* Dans une pile, l'espacement vient déjà du `gap` de la grille. */
.split__media--stack .media-note {
  margin: 0;
}
/* Portrait + crédit dans la carte de contact (colonne de la grille .contact-id). */
.contact-photo-fig {
  margin: 0;
}

/* Diplômes (section « Mon parcours ») */
.diplomas {
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
}
.diploma {
  margin: 0;
}
.diploma img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.diploma figcaption {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--color-text);
  text-align: center;
}

/* Presse / médias (section « Mon univers ») */
.press-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 70, 96, 0.06);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.press-card:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
.press-card__media {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-light);
}
.press-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.press-card__caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem 1.1rem;
}
.press-card__title {
  font-family: var(--font-sub);
  font-weight: 600;
  color: var(--color-primary);
}
.press-card__type {
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.75;
}
.press-note {
  text-align: center;
  margin: 1.6rem 0 0;
  font-size: 0.9rem;
  opacity: 0.7;
}
/* « Logos » texte pour les sources en ligne */
.wm {
  display: grid;
  gap: 0.1rem;
  line-height: 1.05;
  padding: 1rem;
  text-align: center;
}
.wm--figaro .wm__1 {
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: #1a1a1a;
}
.wm--figaro .wm__2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 1.45rem;
  color: #1a1a1a;
}

/* Flèche / picto en bas à droite des panels presse (façon tuiles métapédagogie) */
.press-card::after {
  content: "›";
  position: absolute;
  right: 1.1rem;
  bottom: 0.8rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-accent);
  pointer-events: none;
  transition: transform var(--transition);
}
.press-card:hover::after {
  transform: translateX(4px);
}
/* Source en ligne : picto « lien externe » à la place du chevron */
.press-card--external::after {
  content: none;
}
.press-card__ext {
  position: absolute;
  right: 1rem;
  bottom: 0.95rem;
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  pointer-events: none;
  transition: transform var(--transition);
}
.press-card--external:hover .press-card__ext {
  transform: translate(2px, -2px);
}

/* Lightbox image (scans d'articles) — réutilise le <dialog> .modal, son fond (::backdrop) et son JS.
   L'image garde son ratio (seule la largeur est contrainte) et défile verticalement si elle
   dépasse la hauteur de l'écran. La croix, hors du conteneur scrollable, reste fixée au coin. */
.modal.modal--image {
  width: fit-content;
  max-width: 96vw;
  height: auto;
  max-height: 94vh;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.modal.modal--image[open] {
  display: block;
}
.modal__scroll {
  max-width: 96vw;
  max-height: 94vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.modal.modal--image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius);
}

/* ----------------------------- Public / cible --------------------------- */
.audience {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
}
.audience li {
  background: var(--color-white);
  border-left: 4px solid var(--color-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem;
}

/* « Pour qui » : intro + tuiles (illustration en haut, texte dessous) */
.audience-grid {
  align-items: stretch;
}
.audience-intro {
  max-width: 920px;
  margin: 0 auto clamp(2rem, 1rem + 3vw, 3rem);
  text-align: center;
  font-size: var(--fs-lead);
}
/* Panneau informatif : ni lien ni modale — donc ni ombre portée ni survol. */
.audience-tile {
  display: flex;
  flex-direction: column;
  background: var(--color-white); /* cartes blanches sur le beige (Figma) */
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem;
  border: 1px solid rgba(14, 70, 96, 0.06);
}
.audience-tile__icon {
  height: 160px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 1.3rem;
}
.audience-tile p {
  text-align: left;
  margin: 0 0 1rem;
}
.audience-tile p:last-child {
  margin-bottom: 0;
}
.audience-tile strong {
  color: var(--color-primary);
}

/* ----------------------------- Témoignages ------------------------------ */
.quote {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quote::before {
  content: "“";
  font-family: var(--font-script);
  font-size: 4rem;
  color: var(--color-pale);
  line-height: 0.5;
  display: block;
  margin-bottom: 0.5rem;
}
.quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-primary);
}

/* ----------------------------- Avis Google ------------------------------ */
.reviews__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.8rem;
  font-size: 1.05rem;
  color: var(--color-text);
}
.reviews__summary strong {
  color: var(--color-primary);
  font-size: 1.3rem;
}
.g-logo {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 0;
  vertical-align: middle;
}
.reviews__stars,
.review-stars {
  color: #fbbc04;
  letter-spacing: 2px;
}
.reviews__summary a {
  font-family: var(--font-sub);
  font-weight: 500;
}

.reviews__carousel {
  position: relative;
}
.reviews__track {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.25rem 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 70, 96, 0.25) transparent;
}
.reviews__track::-webkit-scrollbar {
  height: 8px;
}
.reviews__track::-webkit-scrollbar-thumb {
  background: rgba(14, 70, 96, 0.2);
  border-radius: 4px;
}
.review-card {
  flex: 0 0 clamp(270px, 80vw, 330px);
  scroll-snap-align: start;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(14, 70, 96, 0.06);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.review-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.review-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 1.15rem;
}
.review-card__id {
  min-width: 0;
}
.review-author {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.2;
}
.review-date {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.7;
}
.g-logo--badge {
  margin-left: auto;
  width: 20px;
  height: 20px;
}
.review-stars {
  font-size: 1.05rem;
}
.review-text {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}
.review-more {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.92rem;
  align-self: flex-start;
  margin-top: auto;
}

.reviews__nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(14, 70, 96, 0.12);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition);
  z-index: 2;
  display: grid;
  place-items: center;
}
.reviews__nav svg {
  width: 20px;
  height: 20px;
}
.reviews__nav:hover {
  background: var(--color-secondary);
  color: #fff;
}
.reviews__nav--prev {
  left: -6px;
}
.reviews__nav--next {
  right: -6px;
}
@media (max-width: 760px) {
  .reviews__nav {
    display: none;
  }
}
.lazy-loading {
  text-align: center;
  color: var(--color-text);
  opacity: 0.7;
  padding: 2rem 0;
  margin: 0;
}
.feed__live {
  min-height: 120px;
}

/* ----------------------------- Fonctions cognitives --------------------- */
.cognitive-cats {
  align-items: start;
}
.cognitive-cat {
  margin: 0;
  text-align: center;
}
.cognitive-cat img {
  max-width: 170px;
  width: 100%;
  height: auto;
  margin: 0 auto 0.9rem;
}
.cognitive-cat figcaption {
  color: var(--color-text);
  font-size: 1.05rem;
}
.cognitive-figure {
  margin: 0 auto 2rem;
  max-width: 460px;
  text-align: center;
}
.cognitive-figure img {
  width: 100%;
  height: auto;
}

/* ----------------------------- FAQ -------------------------------------- */
.faq {
  display: grid;
  gap: 0.9rem;
}
.faq-item {
  background: var(--color-white);
  border: 1px solid rgba(14, 70, 96, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--color-secondary);
  line-height: 1;
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-item summary:hover {
  color: var(--color-secondary);
}
.faq-answer {
  padding: 0 1.4rem 1.3rem;
  color: var(--color-text);
}
.faq-answer p {
  margin: 0;
}

/* ----------------------------- Tuiles (métapédagogie) ------------------- */
.tiles {
  align-items: stretch;
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem 2.6rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 70, 96, 0.06);
  position: relative;
  z-index: 0;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.tile:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
}
.tile:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
.tile::after {
  content: "›";
  position: absolute;
  bottom: 1rem;
  right: 1.4rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--transition);
}
.tile:hover::after {
  transform: translateX(4px);
}
.tile__icon {
  height: 150px;
  width: auto;
  max-width: 85%;
  object-fit: contain;
  margin: 0 auto 1.4rem;
}
.tile__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-secondary);
  font-size: var(--fs-h3);
  line-height: 1.18;
  text-align: left;
  margin: 0 0 0.6rem;
}
.tile__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
/* Texte des tuiles aligné à gauche (icône + titre + bouton restent centrés) */
.tile p,
.tile__points {
  text-align: left;
}
.tile p:last-of-type,
.tile__points {
  margin-bottom: 0;
}

/* Modale « En savoir plus » (élément natif <dialog>) */
dialog.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1rem + 3vw, 2.6rem);
  /* Taille fixe commune aux 3 fiches ; le corps défile si le contenu dépasse. */
  width: min(94vw, 680px);
  height: min(90vh, 720px);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  position: relative;
  overflow: hidden;
}
dialog.modal[open] {
  display: flex;
  flex-direction: column;
}
dialog.modal::backdrop {
  background: rgba(14, 70, 96, 0.55);
}
.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modal__close:hover {
  background: var(--color-secondary);
}
.modal__icon {
  flex-shrink: 0;
  height: 110px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 0.8rem;
  display: block;
}
.modal__title {
  flex-shrink: 0;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--color-secondary);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  text-align: center;
  margin: 0 0 1.1rem;
}
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  text-align: left;
}
.modal__body p:last-child,
.modal__body ul:last-child {
  margin-bottom: 0;
}
dialog.modal[open] {
  animation: modal-in 0.22s ease;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal__nav {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(14, 70, 96, 0.1);
}
.modal__nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-secondary);
  padding: 0.3rem 0.2rem;
  transition: color var(--transition);
}
.modal__nav-btn:hover:not(:disabled) {
  color: var(--color-primary);
}
.modal__nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ----------------------------- CTA bandeau ------------------------------ */
.cta-band {
  text-align: center;
}
.cta-band h2 {
  margin-bottom: 0.5rem;
}
.cta-band p {
  max-width: 560px;
  margin-inline: auto;
}

/* ----------------------------- Pied de page ----------------------------- */
.site-footer {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 1.5rem;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
}
.site-footer a:hover {
  color: var(--color-accent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.site-footer h4 {
  color: var(--color-white);
  font-family: var(--font-sub);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.1rem;
}
.site-footer .brand__name {
  color: var(--color-white);
}
.footer-contact p {
  margin-bottom: 0.4rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
}
.footer-bottom .legal-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.footer-credits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  opacity: 0.7;
}
/* Séparateur accroché à l'élément précédent : il ne peut pas commencer une ligne. */
.footer-credit:not(:last-child)::after {
  content: "·";
  margin-left: 1rem;
}

/* ----------------------------- Page contenu (légal) --------------------- */
.prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.prose h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  margin-top: 2.2rem;
}
.prose h2:first-child {
  margin-top: 0;
}

/* ----------------------------- Formulaire contact ----------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.contact-card {
  background: var(--color-secondary);
  padding: clamp(1.6rem, 1rem + 2.5vw, 2.8rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.contact-card__title {
  color: var(--color-white);
  margin: 0 0 1.3rem;
}
.contact-form {
  display: grid;
  gap: 1.1rem;
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field label {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-primary);
}
.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-pale);
  border-radius: var(--radius);
  background: var(--color-light);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(68, 164, 162, 0.18);
}
.field textarea {
  resize: vertical;
  min-height: 150px;
}
.form__note {
  font-size: 0.82rem;
  color: var(--color-text);
  opacity: 0.75;
}
.alert {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 400;
}
.alert--success {
  background: #e6f4ec;
  color: #1f6b43;
  border: 1px solid #b7e0c7;
}
.alert--error {
  background: #fdeeee;
  color: #a33;
  border: 1px solid #f3c9c9;
}
.contact-info {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.contact-id {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: center;
}
.contact-photo {
  width: 190px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.contact-name {
  font-size: var(--fs-h3);
  color: var(--color-primary);
  margin: 0;
}
.contact-role {
  color: var(--color-accent);
  margin: 0.1rem 0 0.5rem;
}
.contact-rdv {
  color: var(--color-secondary);
  font-weight: 700;
  margin: 0;
}
.contact-lead {
  margin: 0;
}
.contact-lines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}
.contact-lines li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.contact-ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--color-accent);
}
.contact-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
.contact-lines a {
  color: var(--color-text);
}
.contact-lines a:hover {
  color: var(--color-accent);
}
.contact-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}
.contact-map__link {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  background: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-sub);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.contact-map__link:hover {
  color: var(--color-accent);
}

/* Formulaire sur fond turquoise : libellés blancs, champs blancs */
.contact-card .field label,
.contact-card .field--radio legend {
  color: var(--color-white);
}
.contact-card .field input:not([type="radio"]):not([type="checkbox"]),
.contact-card .field textarea {
  background: var(--color-white);
  border-color: var(--color-white);
}
.contact-card .field input:focus,
.contact-card .field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 70, 96, 0.25);
}
.contact-card .form__note {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}
.contact-card .form__note--error {
  color: #ffe1da;
  font-weight: 600;
}
.field--radio {
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
}
.field--radio legend {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0;
  margin-bottom: 0.55rem;
}
.contact-card .radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 1.6rem;
  font-weight: 400;
  color: var(--color-white);
  cursor: pointer;
}
.contact-card .radio input {
  width: auto;
  margin: 0;
  accent-color: var(--color-primary);
}
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
}
.contact-card .field--check label {
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.55;
}
.contact-card .field--check input {
  width: auto;
  margin-top: 0.25rem;
  accent-color: var(--color-primary);
}
.contact-card .btn {
  width: 100%;
  justify-content: center;
}
@media (max-width: 520px) {
  .contact-id {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* ----------------------------- Responsive ------------------------------- */
@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__media {
    order: -1;
  }
  .hero__media img {
    max-height: 320px;
  }
  .hero__cta {
    justify-content: center;
  }
  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: 0;
  }
  .split__media {
    max-width: 520px;
    margin-inline: auto;
  }
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1100px) {
  .nav-toggle {
    display: block;
  }
  .brand__tagline {
    display: block;
  }
  /* Écart resserré : laisse au libellé la place d'afficher les titres longs. */
  .site-header__inner {
    gap: 0.75rem;
  }
  /* Le menu se déplie juste sous la pilule et en épouse exactement la largeur.
     Ancré sur l'en-tête (et non sur la fenêtre) : il ne peut plus déborder à
     droite. Le z-index négatif le fait glisser depuis l'arrière de la pilule. */
  .site-header__inner {
    position: relative;
  }
  .nav {
    position: absolute;
    z-index: -1;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-white);
    padding: 0.9rem 1rem 1.2rem;
    gap: 0.2rem;
    border: 1px solid rgba(14, 70, 96, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    transform: translateY(-135%);
    /* `visibility` évite un flash au chargement : tant que les polices ne sont pas
       posées, la hauteur vaut 0 et le décalage en % ne masque rien. Elle rend aussi
       les liens du menu fermé inatteignables au clavier. */
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    max-height: calc(100vh - var(--header-h) - 1rem);
    overflow-y: auto;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }
  .nav a {
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius);
  }
  .nav a.is-active::after {
    display: none;
  }
  .nav .btn {
    margin-left: 0;
    margin-top: 0.5rem;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .card {
    padding: 1.6rem;
  }
}

/* ----------------------------- Consentement cookies --------------------- */
/* Encart flottant repris du langage des cartes : crème, très arrondi, ombre douce. */
.consent {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 300;
  width: min(100% - 2rem, 640px);
  background: var(--color-cream);
  border: 1px solid rgba(14, 70, 96, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  display: grid;
  gap: 0.7rem;
  animation: consent-in 0.45s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.consent[hidden] {
  display: none;
}
@keyframes consent-in {
  from {
    opacity: 0;
    transform: translate(-50%, 18px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.consent__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0;
}
.consent__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.3rem;
}
.consent__link {
  font-family: var(--font-sub);
  font-size: 0.9rem;
  margin-left: auto;
}

/* Contenu externe remplacé tant que le consentement n'est pas donné. */
.consent-block {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px dashed rgba(14, 70, 96, 0.22);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.6rem) 1.4rem;
}
.consent-block__text {
  margin: 0;
  color: var(--color-text);
}
.consent-block__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
}

/* Bouton présenté comme un lien (« Gérer les cookies » du pied de page). */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--transition);
}
.linkish:hover {
  color: var(--color-accent);
}

/* ----------------------------- Animations d'entrée ---------------------- */
/* Actives uniquement si JS tourne (.js-anim posé dans <head>) : sans lui, le
   contenu reste visible. On utilise des animations plutôt que des transitions,
   pour ne pas confisquer la propriété `transition` réservée au survol. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes float-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* `:where()` annule la spécificité de cette liste. Sans lui, un sélecteur composé
   comme `.audience li` pèse plus lourd que `.anim-done` : l'élément resterait
   alors invisible une fois son animation terminée. */
.js-anim
  :where(
    .section-head,
    .audience-intro,
    .split__content,
    .split__media,
    .prose,
    .card,
    .tile,
    .audience-tile,
    .press-card,
    .diploma,
    .audience li,
    .faq-item,
    .cta-band
  ) {
  opacity: 0;
}
.js-anim .is-in {
  animation: rise 0.7s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
/* L'animation terminée est retirée : le survol récupère `transform` (sinon une
   animation en fill-mode `both` l'emporterait sur `:hover`). */
.js-anim .anim-done {
  animation: none;
  opacity: 1;
}

/* Décalage en cascade dans les grilles et les listes. */
.js-anim .grid > *:nth-child(2),
.js-anim .audience li:nth-child(2),
.js-anim .faq-item:nth-child(2) {
  animation-delay: 0.08s;
}
.js-anim .grid > *:nth-child(3),
.js-anim .audience li:nth-child(3),
.js-anim .faq-item:nth-child(3) {
  animation-delay: 0.16s;
}
.js-anim .grid > *:nth-child(4),
.js-anim .audience li:nth-child(4),
.js-anim .faq-item:nth-child(4) {
  animation-delay: 0.24s;
}
.js-anim .faq-item:nth-child(n + 5) {
  animation-delay: 0.32s;
}

/* Entrée au chargement : la carte d'entête monte (le header, lui, reste fixe). */
.js-anim .hero__inner,
.js-anim main > .section:first-of-type > .container {
  animation: rise 0.8s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.js-anim .hero__content > * {
  animation: rise 0.7s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.js-anim .hero__content > *:nth-child(1) {
  animation-delay: 0.18s;
}
.js-anim .hero__content > *:nth-child(2) {
  animation-delay: 0.26s;
}
.js-anim .hero__content > *:nth-child(3) {
  animation-delay: 0.34s;
}
.js-anim .hero__content > *:nth-child(4) {
  animation-delay: 0.42s;
}
.js-anim .hero__media {
  animation: rise 0.9s cubic-bezier(0.22, 0.7, 0.24, 1) 0.22s both;
}
/* Respiration lente de l'illustration d'entête. */
.js-anim .hero__media img {
  animation: float-soft 7s ease-in-out 1.3s infinite;
}

/* Retours au clic / survol */
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.nav a:hover {
  background: rgba(14, 70, 96, 0.05);
}

/* ----------------------------- Accessibilité ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}