/* ==========================================================================
   Business Speed Dating – ISM Fénelon
   Feuille unique, mobile d'abord. Aucune dépendance, aucune étape de build.

   Sommaire
     1. Jetons de marque
     2. Base et utilitaires
     3. Boutons, icônes, révélation au défilement
     4. Hero : scène, enveloppe, cachet
     5. Hero : carte d'invitation ouverte
     6. Sections 2 à 6
     7. Pied de page
     8. Points de rupture
     9. Mouvement réduit, appareils modestes
   ========================================================================== */

/* 1. Jetons de marque ---------------------------------------------------- */
:root {
  /* Relevées dans les fichiers officiels (voir README, « Couleurs ») :
     - #d92124 : unique remplissage de ISMF-logo-horizontal.svg (.cls-1),
                 aussi « --gcid-primary-color » du site ism-fenelon.com ;
     - #212121 : couleur de texte du site ism-fenelon.com (le logo n'a pas
                 de seconde couleur, le site déclare #000 en secondaire) ;
     - #a90039 : remplissage de IF-logo-coul-rgb.svg, couleur primaire du
                 site institut-fenelon.org — l'accent fuchsia de l'Institut. */
  --color-primary: #d92124;
  --color-secondary: #212121;
  /* Fuchsia de l'Institut Fénelon : réservé à la mention « Un établissement de
     l'Institut Fénelon ». Toute l'interface est dans le rouge ISM. */
  --color-accent: #a90039;
  --color-paper: #FAF8F4;

  /* Déclinaisons du rouge ISM */
  --color-primary-fonce: #b51a1d;      /* survol, et texte sur fond rouge pâle : 5,9:1 */
  --color-primary-doux: #fcecec;       /* fond rouge très pâle (pastilles, icônes) */
  --color-primary-rgb: 217, 33, 36;
  --color-texte: #212121;
  --color-texte-doux: #4d4a46;         /* 8,4:1 sur blanc, 7,9:1 sur papier */
  --color-filet: rgba(33, 33, 33, .09);
  --color-nuit: #1b1a19;

  /* Papier d'enveloppe */
  --env-clair: #f6f0e6;
  --env-moyen: #ede4d5;
  --env-fonce: #e2d6c3;

  --police-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --police-texte: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rayon: 18px;
  --ombre-douce: 0 1px 2px rgba(40, 25, 10, .05), 0 12px 32px -16px rgba(40, 25, 10, .22);
  --conteneur: 72rem;
  --marge: clamp(1.25rem, 5vw, 2.5rem);

  /* Grain de papier : bruit SVG en ligne, calculé une fois puis mis en cache par le navigateur. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Motif de la doublure : points et filets croisés rouge ISM, très discrets. */
  --doublure:
    radial-gradient(circle at 50% 50%, rgba(217, 33, 36, .20) 0 1.1px, transparent 1.6px) 0 0 / 12px 12px,
    repeating-linear-gradient(45deg, rgba(217, 33, 36, .07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(217, 33, 36, .07) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #fbf1ef, #f3e0dc);
}

/* 2. Base et utilitaires ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1rem;              /* jamais sous 16 px pour le corps de texte */
  line-height: 1.6;
  color: var(--color-texte);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Défilement bloqué pendant la séquence d'ouverture */
html.est-verrouille,
html.est-verrouille body { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, address { margin: 0; }
ul[role="list"], ol { list-style: none; padding: 0; }
address { font-style: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Sprite : ni display:none ni visibility:hidden, sinon dégradés et filtres
   du cachet ne se rendent plus dans Chrome et Firefox. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

/* Sections qui reçoivent le focus après un lien interne : pas de cadre autour. */
.section[tabindex="-1"]:focus { outline: none; }

.lien-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: 8px;
  background: var(--color-secondary); color: #fff; font-weight: 600;
  transition: top .2s;
}
.lien-evitement:focus { top: calc(env(safe-area-inset-top) + 1rem); }

.sans-js {
  padding: 1.25rem var(--marge); text-align: center;
  background: var(--color-primary-doux);
}

.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: max(var(--marge), env(safe-area-inset-left)) max(var(--marge), env(safe-area-inset-right));
}
.conteneur--etroit { max-width: calc(52rem + 2 * var(--marge)); }

/* 3. Boutons, icônes, révélation -------------------------------------- */
.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .75rem 1.6rem;
  border: 1.5px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
  touch-action: manipulation;
}
.bouton:active { transform: translateY(1px); }
.bouton--plein { background: var(--color-primary); color: #fff; }
.bouton--plein:hover { background: var(--color-primary-fonce); }
.bouton--contour { background: transparent; border-color: var(--color-secondary); color: var(--color-secondary); }
.bouton--contour:hover { background: var(--color-secondary); color: #fff; }
.bouton--discret {
  background: transparent; color: var(--color-texte-doux);
  padding-inline: 1rem; font-weight: 500;
}
.bouton--discret:hover { color: var(--color-secondary); background: rgba(33, 33, 33, .05); }
.bouton--large { width: 100%; }
.bouton:focus-visible { outline-offset: 3px; border-radius: 999px; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--color-primary); font-weight: 600; text-decoration: none;
  text-underline-offset: .2em;
}
.lien-fleche:hover { text-decoration: underline; }

/* Révélation au défilement : masqué seulement si JS est là pour le révéler. */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal].est-visible { opacity: 1; transform: none; }

/* 4. Hero : scène et enveloppe ------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;                 /* repli */
  min-height: 100dvh;                /* la barre d'adresse mobile ne coupe plus l'enveloppe */
  display: grid;
  grid-template-areas: "centre";
  place-items: center;
  padding:
    calc(env(safe-area-inset-top) + 3.75rem)
    max(1rem, env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 3.75rem)
    max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(217, 33, 36, .07), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(217, 33, 36, .06), transparent 70%),
    var(--color-paper);
  isolation: isolate;
}

.passer {
  position: absolute; z-index: 20;
  top: calc(env(safe-area-inset-top) + .75rem);
  right: max(1rem, env(safe-area-inset-right));
  min-height: 2.75rem; padding: .5rem .9rem;
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-texte-doux); font-size: 1rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: .25em;
}
.passer:hover { color: var(--color-secondary); }

.scene {
  grid-area: centre;
  position: relative;
  /* Largeur de l'enveloppe : 85 % de l'écran en portrait, bornée par la hauteur
     en paysage. Le facteur 0,62 garde de la place au-dessus pour le rabat ouvert
     et la carte qui sort. Hauteur = largeur / 1,6. */
  --l: max(13rem, min(85vw, 36rem, calc((100vh - 9rem) * 1.6 * .62)));
  display: flex; flex-direction: column; align-items: center;
  perspective: 1400px;               /* conteneur de perspective : pas d'overflow ici */
  z-index: 1;
}
@supports (height: 100dvh) {
  .scene { --l: max(13rem, min(85vw, 36rem, calc((100dvh - 9rem) * 1.6 * .62))); }
}

.env-flotte {
  order: 1;
  transform-style: preserve-3d;
  animation: flotter 4s ease-in-out infinite alternate;
}
.env-incline { transform-style: preserve-3d; }

@keyframes flotter {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -7px, 0); }
}

/* Ombre au sol qui « respire » avec le flottement : opacité et échelle seulement. */
.env-ombre {
  order: 2;
  width: calc(var(--l) * .82); height: calc(var(--l) * .05);
  margin-top: calc(var(--l) * .05);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 35, 15, .32), transparent);
  animation: respirer 4s ease-in-out infinite alternate;
}
@keyframes respirer {
  from { transform: scaleX(1); opacity: .9; }
  to   { transform: scaleX(.88); opacity: .55; }
}

.indice {
  order: 3;
  margin-top: 1.1rem;
  font-size: 1rem; letter-spacing: .02em; color: var(--color-texte-doux);
}
.indice--tactile { display: none; }

/* Zone de clic plate, au-dessus de l'enveloppe et de l'indication, avec une
   marge autour : on n'a pas à viser le bord du papier. */
.env-cible {
  position: absolute; z-index: 10;
  inset: calc(var(--l) * -.08) calc(var(--l) * -.06) -.5rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hero.en-ouverture .env-cible { pointer-events: none; cursor: default; }

/* Adresse de l'expéditeur, sur le rabat */
.env-exp {
  position: absolute; left: 0; right: 0; top: 10%;
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(11px, calc(var(--l) * .029), 16px);
  line-height: 1.32;
  color: var(--color-texte-doux);
  text-align: center;
  pointer-events: none;
}
.env-exp__ligne { white-space: nowrap; }
.env-exp__mention { font-family: var(--police-titre); font-style: italic; color: var(--color-primary); }
.env-exp__nom { font-family: var(--police-titre); font-weight: 700; color: var(--color-secondary); letter-spacing: .02em; }
@media (hover: none) and (pointer: coarse) {
  .indice--souris { display: none; }
  .indice--tactile { display: inline; }
}

.enveloppe {
  position: relative;
  width: var(--l);
  aspect-ratio: 1.6 / 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Perspective propre au rabat. L'enveloppe reste « plate » (pas de
     preserve-3d) : c'est ce qui garde les z-index fiables entre ses couches,
     Safari triant sinon les plans coplanaires à sa façon. */
  perspective: 1100px;
  border-radius: 6px;
}
.enveloppe:focus-visible { outline-offset: 12px; border-radius: 10px; }

.env-dos, .env-doublure, .env-carte, .env-poche, .env-rabat, .env-rabat-ombre, .cachet {
  position: absolute;
}

.env-dos {
  inset: 0; z-index: 0;
  border-radius: 6px;
  background: var(--grain), linear-gradient(180deg, var(--env-moyen), var(--env-fonce));
  box-shadow:
    0 1px 1px rgba(60, 35, 15, .08),
    0 10px 20px -8px rgba(60, 35, 15, .22),
    0 30px 50px -28px rgba(60, 35, 15, .35);
}

/* Doublure visible dans le « V » une fois le rabat levé */
.env-doublure {
  inset: 3% 3.5% 40% 3.5%; z-index: 1;
  border-radius: 3px;
  background: var(--doublure);
}

/* Carte décorative dans l'enveloppe */
.env-carte {
  left: 7%; right: 7%; top: 6%; height: 86%;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 7%;
  gap: 5%;
  border-radius: 4px;
  background: var(--grain), var(--color-paper);
  box-shadow: 0 1px 2px rgba(60, 35, 15, .12), inset 0 0 0 1px rgba(217, 33, 36, .12);
  transform: rotate(-1.6deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.env-carte img { width: 46%; }
.env-carte__filet { width: 18%; height: 1px; background: var(--color-primary); opacity: .5; }
.env-carte__mot {
  font-family: var(--police-titre); font-style: italic;
  font-size: calc(var(--l) * .045); color: var(--color-texte-doux);
}

/* Poche avant : trois plis découpés en clip-path */
.env-poche {
  inset: 0; z-index: 4;
  border-radius: 6px;
  overflow: hidden;      /* sans risque : la poche n'est pas un conteneur 3D */
  pointer-events: none;
}
.pli { position: absolute; inset: 0; }
.pli--gauche {
  clip-path: polygon(0 0, 52% 55%, 0 100%);
  background: var(--grain), linear-gradient(95deg, var(--env-clair) 10%, var(--env-moyen));
}
.pli--droite {
  clip-path: polygon(100% 0, 48% 55%, 100% 100%);
  background: var(--grain), linear-gradient(265deg, var(--env-clair) 10%, var(--env-moyen));
}
.pli--bas {
  clip-path: polygon(0 100%, 50% 44%, 100% 100%);
  background: var(--grain), linear-gradient(0deg, var(--env-clair) 30%, #efe7da);
  /* léger liseré qui dessine la pliure sur les plis latéraux (statique) */
  filter: drop-shadow(0 -1px 0 rgba(120, 90, 60, .16));
}

/* Ombre portée du rabat fermé sur la poche */
.env-rabat-ombre {
  left: 0; right: 0; top: 0; height: 60%;
  z-index: 5;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, rgba(90, 60, 30, 0), rgba(90, 60, 30, .14));
  pointer-events: none;
}

/* Rabat : c'est le seul élément réellement en 3D. */
.env-rabat {
  left: 0; right: 0; top: 0; height: 57%;
  z-index: 6;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.rabat-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.rabat-face--dehors {
  clip-path: polygon(0 0, 100% 0, 53% 95%, 50% 100%, 47% 95%);
  background: var(--grain), linear-gradient(180deg, #f8f3eb, var(--env-moyen) 92%);
  border-top-left-radius: 6px; border-top-right-radius: 6px;
}
/* Face intérieure : pointe tracée vers le haut car la face est déjà
   retournée sur elle-même ; une fois le rabat ouvert, elle pointe au ciel. */
.rabat-face--dedans {
  clip-path: polygon(0 100%, 100% 100%, 53% 5%, 50% 0, 47% 5%);
  background: var(--doublure);
  transform: rotateX(180deg);
}

/* Cachet de cire, posé sur la pointe du rabat */
.cachet {
  left: 50%; top: 57%;
  width: 17%; aspect-ratio: 1;
  z-index: 7;
  transform: translate(-50%, -58%);
  pointer-events: none;
}
/* Ombre du cachet en dégradé, pas en filter : un filtre sur le parent se
   recalculerait à chaque image pendant que les moitiés s'écartent. */
.cachet::before {
  content: ""; position: absolute; inset: 8% 4% -6% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 0, 20, .35), transparent);
  transform: translateY(6%);
}
.cachet__moitie { position: absolute; inset: 0; }
.cachet__moitie svg { width: 100%; height: 100%; }
.cachet__moitie--g { clip-path: inset(0 50% 0 0); }
.cachet__moitie--d { clip-path: inset(0 0 0 50%); }

.cachet__reflet {
  position: absolute; inset: 7%;
  border-radius: 50%;
  overflow: hidden;
}
.cachet__reflet::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translate3d(-160%, 0, 0) skewX(-18deg);
  animation: reflet 5.5s ease-in-out infinite 1.5s;
}
@keyframes reflet {
  0%, 72% { transform: translate3d(-160%, 0, 0) skewX(-18deg); }
  90%, 100% { transform: translate3d(330%, 0, 0) skewX(-18deg); }
}

/* Pendant la séquence, plus de boucle d'inactivité. */
.hero.en-ouverture .env-flotte,
.hero.en-ouverture .env-ombre { animation-play-state: paused; }
.hero.en-ouverture .cachet__reflet { display: none; }
.hero.en-ouverture .indice { opacity: 0; transition: opacity .3s; }
.hero.en-ouverture .enveloppe { cursor: default; }

/* Particules */
.particules {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* 5. Hero : carte d'invitation ouverte --------------------------------- */
.carte-hero {
  grid-area: centre;
  position: relative; z-index: 2;
  width: min(100%, 40rem);
  border-radius: 14px;
  background: var(--grain), var(--color-paper);
  box-shadow:
    0 1px 2px rgba(60, 35, 15, .06),
    0 24px 60px -28px rgba(60, 35, 15, .4);
  text-align: center;
  transform-origin: 50% 50%;
}
/* Tant que l'enveloppe est fermée, la carte n'est ni visible ni atteignable. */
html.js .hero:not(.est-ouverte):not(.en-ouverture) .carte-hero,
html.js .hero.en-ouverture:not(.carte-sortie) .carte-hero {
  visibility: hidden; opacity: 0; pointer-events: none;
}
html.js .hero.est-ouverte .scene { display: none; }
html:not(.js) .scene, html:not(.js) .passer, html:not(.js) #rejouer { display: none; }
.hero.est-ouverte .passer { display: none; }

.carte-hero__cadre {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.7rem, 2.2vw, 1.05rem);
  padding: clamp(2rem, 6vw, 3.4rem) clamp(1.35rem, 5vw, 3rem);
}
/* Double filet intérieur, façon carton gravé */
.carte-hero__cadre::before,
.carte-hero__cadre::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 8px;
}
.carte-hero__cadre::before { inset: 10px; border: 1px solid rgba(217, 33, 36, .32); }
.carte-hero__cadre::after  { inset: 14px; border: 1px solid rgba(217, 33, 36, .12); }

.carte-hero__logo { width: clamp(9.5rem, 38vw, 13rem); }
.carte-hero__invite {
  font-size: .875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-primary);
}
.carte-hero__titre {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(2.1rem, 9vw, 3.9rem);
  line-height: 1.05; letter-spacing: -.01em;
  color: var(--color-secondary);
  text-wrap: balance;
}
.carte-hero__titre:focus { outline: none; }
.carte-hero__titre em {
  display: block;
  font-style: italic; font-weight: 600;
  color: var(--color-primary);
}
.carte-hero__sous-titre {
  max-width: 34ch;
  text-wrap: balance;
  font-family: var(--police-titre); font-style: italic;
  font-size: clamp(1.125rem, 3.6vw, 1.4rem); line-height: 1.35;
  color: var(--color-texte-doux);
}
.carte-hero__infos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: .6rem; row-gap: .15rem;
  padding-top: .8rem;
  border-top: 1px solid var(--color-filet);
  font-size: 1rem; font-weight: 500; color: var(--color-texte);
}
.carte-hero__infos .puce { color: var(--color-primary); }
.carte-hero__infos > span:not(.puce) { white-space: nowrap; }
.infos__lieu { flex-basis: 100%; white-space: normal !important; text-wrap: balance; color: var(--color-texte-doux); }
/* Écran étroit : date, heure et lieu empilés, sans puce. */
@media (max-width: 479px) {
  .carte-hero__infos { flex-direction: column; }
  .carte-hero__infos .puce { display: none; }
}
.carte-hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .75rem;
  margin-top: .35rem;
}

/* Contenu de la carte : masqué pour l'échelonnement, sauf état final */
html.js .hero:not(.carte-revelee) [data-etape] { opacity: 0; }

.defiler {
  position: absolute; left: 50%; z-index: 4;
  bottom: calc(env(safe-area-inset-bottom) + .75rem);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-left: -1.375rem;
  border-radius: 50%;
  color: var(--color-primary);
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.defiler .ico { width: 1.6rem; height: 1.6rem; }
.hero.carte-revelee .defiler { opacity: 1; pointer-events: auto; animation: rebond 2.2s ease-in-out infinite; }
html:not(.js) .defiler { opacity: 1; pointer-events: auto; }
@keyframes rebond {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 6px, 0); }
}

/* 6. Sections ------------------------------------------------------------ */
.section {
  padding-block: clamp(4rem, 11vw, 7.5rem);
  scroll-margin-top: 1rem;
}
.section--papier { background: var(--color-paper); }

.surtitre {
  margin-bottom: .75rem;
  font-size: .875rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
}
.titre-section {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}
.chapo {
  max-width: 44rem; margin: 1.25rem auto 0;
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  color: var(--color-texte-doux);
  text-align: center;
}
.chapo--gauche { margin-inline: 0; text-align: left; }
.texte { margin-top: 1rem; color: var(--color-texte-doux); }
.titre-bloc {
  margin: clamp(3rem, 7vw, 4.5rem) 0 1.5rem;
  font-family: var(--police-titre); font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  text-align: center;
}

/* Concept */
.grille-3 {
  display: grid; gap: 1.25rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.carte-concept {
  position: relative;
  padding: 2rem 1.75rem 1.9rem;
  border: 1px solid var(--color-filet);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre-douce);
}
.carte-concept__icone {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary-doux); color: var(--color-primary-fonce);
}
.carte-concept__icone .ico { width: 1.6rem; height: 1.6rem; }
.carte-concept__titre {
  font-family: var(--police-titre); font-weight: 700;
  font-size: 1.375rem; line-height: 1.25;
}
.carte-concept__texte { margin-top: .6rem; color: var(--color-texte-doux); }
.carte-concept__numero {
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-family: var(--police-titre); font-size: 2.5rem; line-height: 1;
  color: rgba(217, 33, 36, .12);
}

/* Pourquoi */
.pourquoi { display: grid; gap: 2rem; align-items: center; }
.pourquoi .surtitre, .pourquoi .titre-section { text-align: left; }
.chiffre {
  padding: 2rem 1.75rem;
  border-radius: var(--rayon);
  background: #fff;
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--ombre-douce);
}
.chiffre__valeur {
  font-family: var(--police-titre); font-size: 1.5rem; color: var(--color-texte-doux);
}
.chiffre__valeur strong {
  display: block;
  font-size: clamp(3.6rem, 12vw, 5.25rem); line-height: 1;
  color: var(--color-primary);
}
.chiffre__legende { margin-top: .6rem; font-weight: 500; }

.valeurs {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.valeur {
  padding: 1.1rem 1rem;
  border: 1px solid var(--color-filet);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.valeur__nom {
  font-family: var(--police-titre); font-weight: 600; font-size: 1.2rem;
  color: var(--color-secondary);
}
.valeur__nom::before {
  content: ""; display: block;
  width: 1.5rem; height: 2px; margin: 0 auto .55rem;
  background: var(--color-primary);
}
.valeur__texte { margin-top: .25rem; font-size: 1rem; line-height: 1.45; color: var(--color-texte-doux); }

.partenaires {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1.25rem 2.75rem;
  padding: 1.75rem 1rem;
  border-block: 1px solid var(--color-filet);
}
/* Les logos officiels Cnam et Coventry sont fournis en blanc : on les passe
   en encre sur fond clair (filtre statique, jamais animé). */
.partenaires img { height: 2.4rem; width: auto; filter: brightness(0); opacity: .8; }
.partenaire-texte {
  font-family: var(--police-titre); font-weight: 700; font-size: 1.35rem;
  letter-spacing: .06em; color: var(--color-secondary);
}
.partenaire-texte em { font-weight: 600; color: var(--color-primary); }

/* Formations */
.formations {
  display: grid; gap: 1.25rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.formation {
  position: relative;
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.75rem 1.6rem 1.6rem;
  border: 1px solid var(--color-filet);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre-douce);
  transition: transform .25s ease, border-color .25s;
}
.formation:hover { transform: translateY(-3px); border-color: rgba(217, 33, 36, .35); }
.formation:focus-within { border-color: var(--color-primary); }
.formation__niveau {
  align-self: flex-start;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--color-primary-doux); color: var(--color-primary-fonce);
  font-size: .875rem; font-weight: 600;
}
.formation__titre {
  font-family: var(--police-titre); font-weight: 700;
  font-size: 1.3rem; line-height: 1.25;
}
.formation__titre a { text-decoration: none; }
/* Lien étiré : toute la carte est cliquable, le lien reste unique pour les lecteurs d'écran. */
.formation__titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.formation__titre a:focus-visible { outline: none; }
.formation__titre a:focus-visible::after { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.formation__sigle { display: block; margin-bottom: .15rem; font-family: var(--police-texte); font-size: .875rem; font-weight: 600; letter-spacing: .12em; color: var(--color-primary); }
.formation__texte { color: var(--color-texte-doux); }
.formation__plus {
  margin-top: auto; padding-top: .5rem;
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--color-primary); font-weight: 600;
}

.rythme {
  display: grid; gap: 1.25rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: 2rem 1.75rem;
  border-radius: var(--rayon);
  background: var(--color-nuit);
  color: #f2efea;
  text-align: center;
}
.rythme__valeur {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.1;
  color: #fff;
}
.rythme__legende { margin-top: .3rem; color: #d6d0c8; }
.rythme__sep { width: 3rem; height: 1px; margin: 0 auto; background: rgba(255, 255, 255, .25); }
.rythme__note { font-size: 1rem; color: #bdb6ad; }

.liens-duo {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  margin-top: 2rem;
}

/* Programme */
.compte {
  max-width: 40rem; margin: clamp(2rem, 5vw, 3rem) auto 0;
  text-align: center;
}
.compte__titre { font-weight: 600; color: var(--color-texte-doux); }
.compte__cases {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
  margin-top: 1rem;
}
.compte__case {
  padding: .9rem .25rem .75rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--color-filet);
  box-shadow: var(--ombre-douce);
}
.compte__nombre {
  display: block;
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(1.75rem, 7vw, 2.75rem); line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.compte__unite { display: block; margin-top: .2rem; font-size: .875rem; color: var(--color-texte-doux); }
.compte__message {
  grid-column: 1 / -1; padding: 1.1rem;
  border-radius: 14px; background: #fff; border: 1px solid var(--color-filet);
  font-family: var(--police-titre); font-size: 1.3rem;
}
.compte__date { margin-top: .9rem; font-weight: 500; }

.programme {
  display: grid; gap: 2.5rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.frise { position: relative; margin: 0; padding: 0 0 0 1.75rem; }
.frise::before {
  content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem;
  width: 1px; background: var(--color-primary);
  opacity: .45;
}
.etape { position: relative; padding-bottom: 1.75rem; }
.etape:last-child { padding-bottom: 0; }
.etape::before {
  content: ""; position: absolute; left: calc(-1.75rem + .45rem - 6px); top: .45rem;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-primary);
}
.etape__heure {
  font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem;
  color: var(--color-primary);
}
.etape__titre { font-weight: 600; font-size: 1.125rem; }
.etape__texte { margin-top: .15rem; color: var(--color-texte-doux); }

.infos { display: grid; gap: 1rem; align-content: start; }
.info-carte {
  padding: 1.5rem;
  border-radius: var(--rayon);
  background: #fff;
  border: 1px solid var(--color-filet);
}
.info-carte__titre {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: .75rem;
  font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem;
}
.info-carte__titre .ico { color: var(--color-primary); width: 1.35rem; height: 1.35rem; }
.info-carte__texte { margin-bottom: .75rem; }
.coches li { position: relative; padding-left: 1.6rem; }
.coches li + li { margin-top: .45rem; }
.coches li::before {
  content: ""; position: absolute; left: .15rem; top: .55em;
  width: .7rem; height: .38rem;
  border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}

/* Confirmation */
.section--confirmation {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(217, 33, 36, .06), transparent 70%),
    #fff;
}
.typeform { margin-top: 2rem; }
.typeform__integre {
  min-height: 600px;
  border-radius: var(--rayon);
  border: 1px solid var(--color-filet);
  background: var(--color-paper);
  overflow: hidden;
}
.typeform__integre > div, .typeform__integre iframe { min-height: 600px; }
.typeform__bouton {
  width: 100%;
  min-height: 3.75rem;
  font-size: 1.125rem;
}
.typeform__attente {
  padding: 1.5rem; border-radius: var(--rayon);
  background: var(--color-primary-doux); color: var(--color-texte);
  text-align: center;
}
.typeform__secours { margin-top: 1.25rem; text-align: center; }
.typeform__secours a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem;
  color: var(--color-texte-doux); text-underline-offset: .2em;
}

/* 7. Pied de page -------------------------------------------------------- */
.pied {
  padding: clamp(3.5rem, 9vw, 5rem) 0 calc(env(safe-area-inset-bottom) + 2rem);
  background: var(--color-nuit);
  color: #d9d4cc;
}
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: .2em; }
.pied :focus-visible { outline-color: #fff; }
.pied__haut { display: grid; gap: 2.5rem; }
.pied__logo { width: 13.5rem; }
.pied__slogan {
  margin-top: 1rem;
  font-family: var(--police-titre); font-style: italic; font-size: 1.25rem; color: #fff;
}
.pied__if { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.pied__if-logo { padding: .45rem .7rem; border-radius: 8px; background: #fff; }
.pied__if-logo img { height: 2rem; width: auto; }
.pied__titre {
  margin-bottom: .9rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
}
.pied__adresse a, .pied__liens a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.5rem;
}
.pied__equipe { margin-top: 1rem; }
.pied__equipe li + li { margin-top: .5rem; }
.pied__equipe strong { display: block; color: #fff; font-weight: 600; }
/* Courriel toujours sur une seule ligne (demande du client). Il fait environ
   316 px avec son icône : la colonne de contact est dimensionnée pour le tenir,
   voir la grille du pied de page aux points de rupture. */
.pied__equipe-mail {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.5rem;
  white-space: nowrap;
}
.pied__equipe-mail .ico { flex: none; }
/* Très petits écrans (320 px) : on réduit un peu plutôt que de couper l'adresse. */
@media (max-width: 359px) {
  .pied__equipe-mail { font-size: .8125rem; gap: .35rem; }
}
.reseaux { display: flex; gap: .6rem; margin-top: 1.25rem; }
.reseaux a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  transition: background-color .2s, border-color .2s;
}
.reseaux a:hover { background: var(--color-primary); border-color: var(--color-primary); text-decoration: none; }
.reseaux .ico { width: 1.25rem; height: 1.25rem; }
.pied__rgpd {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 1rem; color: #bdb6ad;
}
.pied__rgpd a { text-decoration: underline; text-underline-offset: .2em; }
.pied__bas { margin-top: 1rem; font-size: .875rem; color: #a7a097; }

/* 8. Points de rupture --------------------------------------------------- */
@media (min-width: 600px) {
  .valeurs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rythme { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .rythme__sep { width: 1px; height: 4rem; }
  .rythme__note { grid-column: 1 / -1; }
  .typeform__bouton { width: auto; min-width: 22rem; }
}
@media (min-width: 768px) {
  .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablette : la marque sur toute la largeur, contact et liens côte à côte.
     En trois colonnes, celle du contact tomberait à ~185 px et couperait le courriel. */
  .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .pied__marque { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .pied__haut { grid-template-columns: 1.2fr 1.3fr 1fr; column-gap: 2.5rem; }
  .pied__marque { grid-column: auto; }
}
@media (min-width: 900px) {
  .pourquoi { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
  .programme { grid-template-columns: 1.2fr 1fr; gap: 4rem; }
}
@media (min-width: 1100px) {
  .valeurs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Quatre formations : grille 2 × 2 dès 768 px, qui garde des titres lisibles. */
}

/* Paysage bas (téléphone couché) : hero plus ramassé */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: calc(env(safe-area-inset-top) + 2.75rem); padding-bottom: calc(env(safe-area-inset-bottom) + 2.75rem); }
  .indice { margin-top: .6rem; }
  .carte-hero__cadre { gap: .55rem; padding-block: 1.6rem; }
  .carte-hero__titre { font-size: clamp(1.9rem, 6vh, 2.6rem); }
  .carte-hero__titre em { display: inline; }
}

/* 9. Mouvement réduit, appareils modestes ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .env-flotte, .env-ombre, .cachet__reflet::after,
  .hero.carte-revelee .defiler { animation: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .formation, .bouton { transition: none; }
  #rejouer { display: none; }
}
/* Appareil modeste (≤ 4 cœurs ou Save-Data) : on coupe le décoratif en boucle. */
html.leger .cachet__reflet::after { animation: none; }
html.leger .env-ombre { animation: none; }