/* Replann — site vitrine. Aucune dépendance, aucun style en ligne (CSP stricte). */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/polices/manrope-latin-wght-normal.a30ddcd349.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/polices/manrope-latin-ext-wght-normal.3911b66d9f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --nuit: #101935;
  --nuit-2: #1B2650;
  --bleu: #4C6FFF;
  --bleu-texte: #3352E0;
  --papier: #F4F6FB;
  --blanc: #FFFFFF;
  --ligne: #DADFEB;
  --encre-2: #48516E;
  --brume: #B8C2DC;
  --alerte: #C93A33;
  --alerte-fond: #FDEDEC;

  --police: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rayon-petit: 6px;
  --rayon: 10px;
  --cadre: 76rem;
  --marge: clamp(1.25rem, 4vw, 2.5rem);
  --sortie: cubic-bezier(.2, .7, .2, 1);
  --glisse: cubic-bezier(.65, 0, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--nuit);
  background: var(--papier);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: var(--bleu-texte); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2 { margin: 0; text-wrap: balance; font-weight: 750; }
p { margin: 0; text-wrap: pretty; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cycle-anneau { stroke: currentColor; }
.cycle-segment { stroke: var(--bleu); }
.cycle-centre { fill: currentColor; }

.cadre { width: 100%; max-width: var(--cadre); margin-inline: auto; padding-inline: var(--marge); }

.evitement {
  position: absolute; left: var(--marge); top: -4rem; z-index: 10;
  padding: .6rem 1rem; background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-petit);
}
.evitement:focus { top: 1rem; }

/* Marque ------------------------------------------------------------------ */
.marque { display: inline-flex; align-items: center; gap: .55rem; color: var(--nuit); text-decoration: none; }
.marque-symbole { width: 2.1rem; height: 2.1rem; }
.marque-nom { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.marque-petite .marque-symbole { width: 1.6rem; height: 1.6rem; }
.marque-petite .marque-nom { font-size: 1.1rem; }

/* Boutons ----------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .75rem 1.4rem;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  color: var(--blanc); background: var(--nuit);
  border: 0; border-radius: var(--rayon-petit);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--sortie), transform .2s var(--sortie);
}
.bouton:hover { background: var(--nuit-2); }
.bouton:active { transform: translateY(1px); }
.bouton-discret { min-height: 2.5rem; padding: .5rem 1rem; color: var(--nuit); background: transparent; box-shadow: inset 0 0 0 1.5px var(--nuit); }
.bouton-discret:hover { background: var(--nuit); color: var(--blanc); }
.bouton-clair { color: var(--nuit); background: var(--blanc); }
.bouton-clair:hover { background: #E4E9FF; }
.bouton[disabled] { opacity: .6; cursor: progress; }

/* En-tête ----------------------------------------------------------------- */
.entete { padding-block: 1.25rem; }
.entete-cadre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Ouverture --------------------------------------------------------------- */
.ouverture { overflow-x: clip; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem); }
.ouverture-cadre {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); align-items: center;
}
h1 {
  font-size: clamp(2.5rem, 4.8vw, 4.1rem);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 800;
  max-width: 12ch;
}
.chapo { margin-top: 1.5rem; max-width: 34rem; font-size: 1.15rem; color: var(--encre-2); }
.ouverture .bouton { margin-top: 2rem; }

/* La semaine animée ------------------------------------------------------- */
.semaine { margin: 0; }
.semaine-grille {
  --rang-cours: 6.4rem;
  display: grid;
  grid-template-columns: 3.6rem repeat(5, minmax(0, 1fr));
  grid-template-rows: auto var(--rang-cours) var(--rang-cours);
  gap: .5rem;
  padding: clamp(.9rem, 2vw, 1.4rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(16, 25, 53, .04), 0 24px 48px -28px rgba(16, 25, 53, .35);
}
.jour, .heure { font-size: .78rem; font-weight: 650; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.jour { grid-row: 1; padding-bottom: .15rem; }
.heure { grid-column: 1; padding-top: .55rem; white-space: nowrap; display: flex; flex-direction: column; gap: .15rem; }
.heure small { font-size: .7rem; font-weight: 600; color: #6B7594; }

[data-col="2"] { grid-column: 2; } [data-col="3"] { grid-column: 3; } [data-col="4"] { grid-column: 4; }
[data-col="5"] { grid-column: 5; } [data-col="6"] { grid-column: 6; }
[data-row="2"] { grid-row: 2; } [data-row="3"] { grid-row: 3; } [data-row="4"] { grid-row: 4; }

.seance, .creneau-libre { border-radius: var(--rayon-petit); min-width: 0; }
.seance {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: .3rem;
  padding: .55rem .6rem;
  font-size: .8rem; font-weight: 650; line-height: 1.2; letter-spacing: -.005em;
  color: var(--nuit);
  background: var(--papier);
  border: 1px solid var(--ligne);
  hyphens: manual; overflow: hidden;
}
.nom { font-weight: inherit; }
/* Dans un petit cadre, les libellés courts prennent le relais (requêtes de conteneur). */
.scene-zone { container: scene / inline-size; }
@container scene (max-width: 34rem) {
  .scene-zone .nom, .scene-zone .seance-etat, .scene-zone .colonne-fermee { font-size: 0; }
  .scene-zone .nom::after { content: attr(data-court); font-size: .7rem; }
  .scene-zone .seance-etat::after { content: attr(data-court); font-size: .6rem; }
  .scene-zone .colonne-fermee::after { content: attr(data-court); font-size: .58rem; }
  .scene-zone .scene-phase { bottom: auto; top: calc(100% + .6rem); white-space: normal; text-align: center; border-radius: 1rem; width: max-content; line-height: 1.3; }
  .scene-zone .seance { padding: .4rem .3rem; }
}

.seance-langue { justify-content: center; background: #EEF1FF; border-color: #D5DCFF; padding-block: .35rem; }
.seance-alternance {
  color: var(--encre-2); font-weight: 600;
  background: repeating-linear-gradient(-45deg, var(--papier) 0 6px, #E9ECF4 6px 7px);
}
.creneau-libre { border: 1.5px dashed var(--ligne); }

.seance-etat { display: block; font-style: normal; font-size: .68rem; font-weight: 700; line-height: 1.2; opacity: 0; transition: opacity .25s; }
.seance { transition: background-color .35s var(--sortie), border-color .35s var(--sortie), color .35s var(--sortie), box-shadow .35s var(--sortie); }
.seance.est-active { z-index: 2; }
.seance.est-indisponible { background: var(--alerte-fond); border-color: var(--alerte); color: var(--alerte); }
.seance.est-souleve { box-shadow: 0 16px 30px -12px rgba(16, 25, 53, .5); }
.seance.est-replacee { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.seance.est-indisponible .seance-etat, .seance.est-replacee .seance-etat { opacity: 1; }
.creneau-libre.est-vise { border-color: var(--bleu); background: rgba(76, 111, 255, .06); transition: border-color .3s, background-color .3s; }
.creneau-libre.est-ancien { border-color: var(--alerte); background: var(--alerte-fond); opacity: .55; }

/* Choix de l'école d'exemple */
.ecole-choix { display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: 1rem; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 999px; }
.ecole { font: inherit; font-size: .88rem; font-weight: 700; color: var(--encre-2); background: none; border: 0; border-radius: 999px; padding: .5rem 1rem; min-height: 2.5rem; cursor: pointer; transition: background-color .25s var(--sortie), color .25s var(--sortie); }
.ecole:hover { color: var(--nuit); }
.ecole[aria-pressed="true"] { background: var(--nuit); color: var(--blanc); }

/* Demandes : le visiteur sollicite le planning */
.demandes { margin-top: 2.1rem; }
.demandes-titre { font-size: .92rem; font-weight: 650; color: var(--encre-2); }
.demandes-boutons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.demande {
  font: inherit; font-size: .88rem; font-weight: 650; color: var(--nuit);
  min-height: 2.5rem; padding: .45rem .9rem;
  background: var(--blanc); border: 1.5px solid var(--ligne); border-radius: 999px; cursor: pointer;
  transition: border-color .2s var(--sortie), background-color .2s var(--sortie), color .2s var(--sortie);
}
.demande:hover { border-color: var(--bleu); }
.demande[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Scène d'ouverture : outils dispersés, cycle, planning */
.scene { margin: 0; }
.scene-zone { position: relative; isolation: isolate; }
.outils, .scene-cycle, .scene-phase { pointer-events: none; }
.outils { position: absolute; inset: 0; z-index: 3; }
.outil {
  position: absolute; left: var(--x); top: var(--y);
  padding: .5rem .8rem; font-size: .82rem; font-weight: 650; white-space: nowrap;
  color: var(--nuit); background: var(--blanc);
  border: 1px solid var(--ligne); border-radius: 8px;
  box-shadow: 0 10px 24px -14px rgba(16, 25, 53, .4);
  opacity: 0; translate: -50% -50%; rotate: var(--r);
}
.outil[data-outil="1"] { --x: 22%; --y: 18%; --r: -4deg; }
.outil[data-outil="2"] { --x: 70%; --y: 12%; --r: 3deg; }
.outil[data-outil="3"] { --x: 88%; --y: 44%; --r: -2deg; }
.outil[data-outil="4"] { --x: 14%; --y: 52%; --r: 5deg; }
.outil[data-outil="5"] { --x: 52%; --y: 36%; --r: -3deg; }
.outil[data-outil="6"] { --x: 74%; --y: 76%; --r: 4deg; }
.outil[data-outil="7"] { --x: 30%; --y: 84%; --r: -5deg; }
.outil[data-outil="8"] { --x: 52%; --y: 64%; --r: 2deg; }
.scene-cycle { position: absolute; z-index: 4; left: 50%; top: 50%; width: 6.5rem; height: 6.5rem; margin: -3.25rem 0 0 -3.25rem; color: var(--nuit); opacity: 0; }
.scene-phase {
  position: absolute; z-index: 5; left: 50%; bottom: -1.1rem; translate: -50% 0;
  max-width: calc(100% - 2rem); padding: .45rem .9rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--blanc); background: var(--nuit); opacity: 0;
}
.scene-phase.est-satisfaite { background: var(--bleu); }
.colonne-fermee {
  z-index: 1; grid-row: 2 / 4; border-radius: var(--rayon-petit);
  background: repeating-linear-gradient(-45deg, rgba(201, 58, 51, .10) 0 6px, transparent 6px 12px);
  outline: 1.5px solid var(--alerte); outline-offset: -1px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: .35rem;
  font-size: .66rem; font-weight: 750; color: var(--alerte);
}
.seance.est-echange { background: #E5F6EE; border-color: #1E8A5E; color: #136443; }
.seance.est-echange .seance-etat { opacity: 1; }

/* Sans JavaScript, ou si le script échoue : le planning apparaît quand même. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .scene-zone:not(.est-pilotee) .seance { opacity: 0; animation: secours .4s 2.5s forwards; }
}
@keyframes secours { to { opacity: 1; } }

/* Titre d'ouverture révélé mot à mot */
.mot { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mot > span { display: inline-block; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.titre-pret) h1#titre, html:not(.titre-pret) .ouverture .chapo, html:not(.titre-pret) .ouverture-actions { opacity: 0; animation: secours .4s 1.6s forwards; }
}

/* Halo d'ambiance derrière la scène : il tourne sur le compositeur, sans repeindre la page. */
.scene { position: relative; }
.scene::before {
  content: ""; position: absolute; inset: -12% -8% -18%; z-index: -1; border-radius: 50%;
  background: conic-gradient( rgba(76, 111, 255, .22), rgba(76, 111, 255, 0) 30%, rgba(122, 92, 255, .14) 55%, rgba(76, 111, 255, 0) 75%, rgba(76, 111, 255, .22));
  filter: blur(48px); pointer-events: none; will-change: rotate;
}
@media (prefers-reduced-motion: no-preference) {
  .scene::before { animation: aurore 18s linear infinite; }
}
@keyframes aurore { to { rotate: 1turn; } }
.scene-zone { transform-style: preserve-3d; will-change: transform; }

/* Révélations liées au défilement : sans JavaScript, sans coût sur le fil principal. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plateforme h2, .idees h2, .methode h2, .hebergement h2, .contact h2 {
      animation: titre-entre linear both; animation-timeline: view(); animation-range: entry 10% cover 30%;
    }
    .section-tete p, .au-dela, .contact-intro p {
      animation: monte linear both; animation-timeline: view(); animation-range: entry 10% cover 35%;
    }
    .idees-liste li, .liste-capacites > div, .faits li {
      animation: monte-net linear both; animation-timeline: view(); animation-range: entry 5% cover 30%;
    }
    .idees-liste li:nth-child(3n+2) { animation-range: entry 15% cover 36%; }
    .idees-liste li:nth-child(3n) { animation-range: entry 25% cover 42%; }
    .liste-capacites > div:nth-child(2n) { animation-range: entry 15% cover 36%; }

    .integration .liens use { stroke-dasharray: 1 0; animation: trace linear both; animation-timeline: --schema; animation-range: entry 20% cover 45%; }
    .integration { view-timeline: --schema block; }
    .plateforme-corps { timeline-scope: --schema; }
    .noeud { animation: noeud linear both; animation-timeline: --schema; animation-range: entry 10% cover 35%; }
    .noeud[data-n="2"] { animation-range: entry 14% cover 38%; }
    .noeud[data-n="3"] { animation-range: entry 18% cover 41%; }
    .noeud[data-n="4"] { animation-range: entry 22% cover 44%; }
    .noeud[data-n="5"] { animation-range: entry 26% cover 47%; }
    .coeur { animation: coeur linear both; animation-timeline: --schema; animation-range: entry 25% cover 50%; }
  }
}
@keyframes titre-entre { from { opacity: 0; transform: translateY(.6em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); } }
@keyframes monte { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@keyframes monte-net { from { opacity: 0; transform: translateY(1.5rem) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes trace { from { stroke-dasharray: 0 1; stroke: var(--ligne); } to { stroke-dasharray: 1 0; stroke: #AFBCF7; } }
@keyframes noeud { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes coeur { from { opacity: 0; transform: scale(.4) rotate(-120deg); } to { opacity: 1; transform: none; } }

/* Sections ---------------------------------------------------------------- */
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; max-width: 22ch; }
h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; font-weight: 750; letter-spacing: -.01em; }
.section-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(1.5rem, 5vw, 4.5rem); align-items: end; }
.section-tete p { color: var(--encre-2); max-width: 40rem; }

.plateforme, .methode { padding-block: clamp(4rem, 9vw, 7rem); background: var(--blanc); border-block: 1px solid var(--ligne); }
.plateforme-corps { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.liste-capacites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 2.5rem); row-gap: 2rem; margin: 0; }
.liste-capacites > div:last-child { grid-column: 1 / -1; }

/* Schéma d'intégration : liens qui se tracent, données qui circulent vers le cœur. */
.integration { width: 100%; height: auto; overflow: visible; }
.liens use { fill: none; stroke: #AFBCF7; stroke-width: 2; stroke-linecap: round; }
.flux circle { fill: var(--bleu); }
.noeud rect { fill: var(--blanc); stroke: var(--ligne); stroke-width: 1.5; }
.noeud text { font: 700 16px var(--police); fill: var(--nuit); text-anchor: middle; letter-spacing: -.01em; }
.noeud { transform-box: fill-box; transform-origin: center; }
.coeur-fond { fill: var(--nuit); }
.coeur-halo { fill: var(--bleu); opacity: .12; transform-box: fill-box; transform-origin: center; }
.coeur { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .coeur-halo { animation: halo 3.2s ease-in-out infinite; }
}
@keyframes halo { 0%, 100% { transform: scale(.9); opacity: .16; } 50% { transform: scale(1.12); opacity: .05; } }
.liste-capacites > div { padding-top: 1.1rem; border-top: 2px solid var(--nuit); }
.liste-capacites dt { font-size: 1.15rem; font-weight: 750; letter-spacing: -.01em; }
.liste-capacites dd { margin: .5rem 0 0; color: var(--encre-2); }

.idees { padding-block: clamp(4rem, 9vw, 7rem); }
.idees-liste {
  list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--ligne); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden;
}
.idees-liste li { padding: clamp(1.25rem, 2.5vw, 1.9rem); background: var(--papier); }
.idees-liste p { margin-top: .5rem; color: var(--encre-2); }
.au-dela { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 48rem; font-size: 1.15rem; color: var(--encre-2); }
.au-dela strong { color: var(--nuit); }

.methode-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); align-items: start; }
.methode-anneau { position: sticky; top: 18vh; width: min(16rem, 70%); height: auto; justify-self: center; }
.anneau-tour { rotate: -90deg; transform-origin: 60px 60px; }
.anneau-fond, .anneau-trace { fill: none; stroke-width: 12; stroke-dasharray: 21 79; }
.anneau-fond { stroke: var(--ligne); }
.anneau-trace { stroke: var(--nuit); }
[data-seg="1"] { stroke-dashoffset: -2; } [data-seg="2"] { stroke-dashoffset: -27; }
[data-seg="3"] { stroke-dashoffset: -52; } [data-seg="4"] { stroke-dashoffset: -77; }
.anneau-trace[data-seg="4"] { stroke: var(--bleu); }
.anneau-centre { fill: var(--nuit); }
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 6vw, 4.5rem); }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; }
.etapes li::before {
  content: counter(etape); grid-row: 1 / 3;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 1rem; color: var(--blanc); background: var(--nuit);
}
.etapes p { margin-top: .35rem; color: var(--encre-2); max-width: 34rem; }

/* L'anneau se complète au fil de la lecture (animations liées au défilement). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Chaque étape lue trace son segment de l'anneau, comme le cycle du logo. */
    .methode { timeline-scope: --e1, --e2, --e3, --e4; }
    .etapes li:nth-child(1) { view-timeline: --e1 block; }
    .etapes li:nth-child(2) { view-timeline: --e2 block; }
    .etapes li:nth-child(3) { view-timeline: --e3 block; }
    .etapes li:nth-child(4) { view-timeline: --e4 block; }
    .anneau-trace { animation: segment linear both; animation-range: entry 80% cover 45%; }
    .anneau-trace[data-seg="1"] { animation-timeline: --e1; }
    .anneau-trace[data-seg="2"] { animation-timeline: --e2; }
    .anneau-trace[data-seg="3"] { animation-timeline: --e3; }
    .anneau-trace[data-seg="4"] { animation-timeline: --e4; }
    .etapes li::before { animation: etape-allumee linear both; animation-timeline: view(); animation-range: entry 80% cover 45%; }
  }
}
@keyframes segment { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 21 79; } }
@keyframes etape-allumee { from { background: var(--ligne); color: var(--encre-2); } to { background: var(--nuit); color: var(--blanc); } }

.hebergement { padding-block: clamp(4rem, 9vw, 6.5rem); }
.hebergement-cadre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.faits { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.faits li { position: relative; padding-left: 1.6rem; font-size: 1.08rem; color: var(--encre-2); }
.faits li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; border-radius: 50%; border: 2.5px solid var(--bleu); }

/* En-tête : navigation */
.entete-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.entete-nav a:not(.bouton) { color: var(--nuit); font-weight: 650; font-size: .95rem; text-decoration: none; }
.entete-nav a:not(.bouton):hover { text-decoration: underline; }
.ouverture-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.ouverture-actions .bouton { margin-top: 0; }
.lien-fort { font-weight: 700; color: var(--nuit); }

/* Contact ----------------------------------------------------------------- */
.contact { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--nuit); color: var(--blanc); }
.contact-cadre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-intro p { margin-top: 1.1rem; color: var(--brume); max-width: 28rem; }
.contact a { color: #C9D3FF; }

.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; }
.champ { display: grid; gap: .4rem; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-size: .95rem; font-weight: 650; }
.facultatif { font-weight: 500; color: var(--brume); }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--blanc);
  background: var(--nuit-2); border: 1.5px solid #34406C; border-radius: var(--rayon-petit);
  padding: .75rem .9rem; transition: border-color .2s;
}
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.champ input:hover, .champ textarea:hover { border-color: #56628F; }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.champ [aria-invalid="true"] { border-color: #FF8A84; }
.champ-erreur { font-size: .88rem; font-weight: 600; color: #FFB3AE; }
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-info, .formulaire-noscript { grid-column: 1 / -1; font-size: .9rem; color: var(--brume); }
.formulaire-noscript { color: #FFD9A8; }
.formulaire-pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.formulaire-statut { font-weight: 650; }
.formulaire-statut.est-ok { color: #9FE3C1; }
.formulaire-statut.est-erreur { color: #FFB3AE; }

/* Pied -------------------------------------------------------------------- */
.pied { padding-block: 2rem; font-size: .92rem; color: var(--encre-2); }
.pied-cadre { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.pied-cadre > p { margin-left: auto; }

/* Page de texte (mentions légales, 404) ----------------------------------- */
.texte { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }
.texte .cadre { max-width: 46rem; }
.texte h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); max-width: none; margin-bottom: 2rem; }
.texte h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; max-width: none; }
.texte p, .texte li { color: var(--encre-2); }
.texte p + p { margin-top: .9rem; }
.texte ul { padding-left: 1.2rem; }
.a-completer { background: #FFF1C2; color: var(--nuit); padding: 0 .25em; border-radius: 3px; }

/* Adaptations ------------------------------------------------------------- */
@media (max-width: 64rem) {
  .idees-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .ouverture-cadre, .hebergement-cadre, .contact-cadre, .section-tete, .methode-corps, .plateforme-corps { grid-template-columns: minmax(0, 1fr); }
  h1 { max-width: 14ch; }
  .methode-anneau { display: none; }
  .entete-nav a:not(.bouton) { display: none; }
}
@media (max-width: 40rem) {
  .liste-capacites, .idees-liste { grid-template-columns: minmax(0, 1fr); }
  .demandes { margin-top: 5rem; }
  .outil { font-size: .7rem; padding: .35rem .55rem; }
  .formulaire { grid-template-columns: minmax(0, 1fr); }
  .champ { grid-column: 1 / -1; }
  .semaine-grille { grid-template-columns: 2.4rem repeat(5, minmax(0, 1fr)); gap: .3rem; padding: .7rem; --rang-cours: 5rem; }
  .seance { padding: .4rem .35rem; }
  .heure { font-size: .66rem; }

}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .seance, .creneau-libre { border: 1px solid CanvasText; }
  .cycle-segment { stroke: Highlight; }
}
@media print {
  .entete-nav, .demandes, .contact, .outils, .scene-cycle, .scene-phase { display: none; }
}