/* Ensemble & Solidaire, version retenue.
   Grands panneaux de couleur aux coins arrondis qui se chevauchent, titre géant centré,
   cartes blanches flottantes le long d'un chemin, personnages du logo animés, palette de la charte. */
:root {
  --sable: #efe6cc;
  --creme: #faf6ec;
  --blanc: #ffffff;
  --marine: #004072;
  --marine-fonce: #002b4d;
  --marine-voile: #eef3f8;
  --orange: #f0ad41;
  --orange-voile: #fdf3e2;
  --orange-texte: #8a5300;
  --dore: #cabe97;
  --dore-texte: #6f6236;
  --encre: #12263a;
  --gris: #56606b;
  --blanc-75: rgb(255 255 255 / .75);
  --ombre: 0 1px 2px rgb(0 64 114 / .06), 0 24px 48px -24px rgb(0 64 114 / .30);

  --f-titre: "Outfit", "Trebuchet MS", system-ui, sans-serif;
  --f-texte: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --large: 76rem;
  --arrondi-panneau: clamp(28px, 4vw, 56px);

  /* Mouvement (Apple / Emil Kowalski) : sorties franches, jamais d'ease-in, UI sous 300 ms */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-feuille: cubic-bezier(0.32, 0.72, 0, 1);
  --d-appui: 160ms;
  --d-ui: 220ms;
  --d-feuille: 420ms;
  --verre: rgb(255 255 255 / .72);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--creme); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--f-texte); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
img, svg { max-width: 100%; }
p { text-wrap: pretty; }
a, button, summary, label { touch-action: manipulation; }
button, .pilule, .pilule-appel, .rond { -webkit-user-select: none; user-select: none; }
.titre-geant, .titre-pied, .heros h1 { font-feature-settings: "kern", "liga", "ss01"; font-optical-sizing: auto; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--f-titre); margin: 0; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.etoile { width: .9rem; height: .9rem; fill: var(--dore); }
.lien-evitement { position: absolute; left: -999px; }
.lien-evitement:focus { left: 16px; top: 12px; z-index: 50; background: var(--blanc); padding: .6rem 1rem; border-radius: 10px; }
.cadre { max-width: var(--large); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- Boutons pilules à rond fléché ---------- */
.rond { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; transition: transform var(--d-ui) var(--ease-out); }
.rond-orange { background: var(--orange); color: var(--marine-fonce); }
.rond-marine { background: var(--marine); color: var(--blanc); }
.pilule {
  display: inline-flex; align-items: center; gap: .9rem; width: fit-content; min-height: 52px;
  padding: .4rem .45rem .4rem 1.2rem; border-radius: 14px; background: var(--blanc); color: var(--encre);
  font-family: var(--f-titre); font-weight: 600; font-size: 1.05rem; text-decoration: none; box-shadow: var(--ombre);
  transition: transform var(--d-appui) var(--ease-out), box-shadow var(--d-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .pilule:hover .rond, .pilule-appel:hover .rond { transform: translateX(3px) rotate(-8deg); }
  .pilule:hover { box-shadow: 0 1px 2px rgb(0 64 114 / .08), 0 30px 50px -22px rgb(0 64 114 / .38); }
}
.pilule:active, .pilule-appel:active, .bouton-menu:active { transform: scale(.97); }
.pilule-orange { background: var(--orange); color: var(--marine-fonce); box-shadow: none; }

/* ---------- En-tête flottant ---------- */
.entete {
  position: fixed; z-index: 30; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 12px);
  display: flex; justify-content: center; gap: .6rem; align-items: stretch;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  pointer-events: none;
}
.entete > * { pointer-events: auto; }
.barre {
  position: relative; flex: 1; max-width: 58rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  background: var(--blanc); border-radius: 14px; padding: .45rem .5rem .45rem 1rem; box-shadow: var(--ombre);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .barre, .pilule-appel { background: var(--verre); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0 0 1px rgb(255 255 255 / .5) inset, var(--ombre); }
}
.marque { display: flex; align-items: center; min-height: 44px; }
.marque img { width: 150px; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; }
.menu a { display: flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: 10px; text-decoration: none; font-weight: 700; color: var(--encre); transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--marine-voile); } }
.menu a:active { background: var(--marine-voile); }
.bouton-menu { border: 0; cursor: pointer; width: 44px; height: 44px; transition: transform var(--d-appui) var(--ease-out); }
.pilule-appel { transition: transform var(--d-appui) var(--ease-out); display: flex; align-items: center; gap: .75rem; background: var(--blanc); border-radius: 14px; padding: .45rem .5rem .45rem 1.1rem; box-shadow: var(--ombre); text-decoration: none; font-family: var(--f-titre); font-weight: 600; color: var(--encre); }
@media (min-width: 900px) { .bouton-menu { display: none; } }
@media (max-width: 899px) {
  .menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + .5rem); flex-direction: column; background: var(--blanc); border-radius: 14px; padding: .5rem; box-shadow: var(--ombre); }
  .menu.ouvert { display: flex; }
  .js .menu { display: flex; opacity: 0; visibility: hidden; transform: scale(.96) translateY(-4px); transform-origin: top right;
    transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out), visibility 0s linear var(--d-ui); }
  .js .menu.ouvert { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .pilule-appel span:first-child { display: none; }
  .pilule-appel { padding: .45rem; }
}

/* ---------- Héros ---------- */
.heros { background: var(--sable); padding-top: clamp(7.5rem, 14vw, 10rem); padding-bottom: calc(var(--arrondi-panneau) + 1rem); overflow: hidden; position: relative; }
.heros-texte { text-align: center; display: grid; justify-items: center; gap: 1.4rem; position: relative; z-index: 2; }
.surtitre { display: inline-flex; align-items: center; gap: .5rem; background: var(--blanc-75); border-radius: 999px; padding: .35rem 1rem; font-weight: 700; color: var(--dore-texte); font-size: .95rem; }
.heros h1 { font-size: calc(clamp(3rem, 10.5vw, 8.6rem) * var(--echelle-titres, 1)); font-weight: 700; color: var(--marine-fonce); line-height: .95; letter-spacing: -.045em; max-width: 12ch; }
.souligne { position: relative; white-space: nowrap; color: var(--marine); }
.souligne::after { content: ""; position: absolute; left: -.02em; right: -.02em; bottom: .02em; height: .18em; background: var(--orange); border-radius: 999px; z-index: -1; transform-origin: left; transform: scaleX(var(--trait, 1)); }
.horaires-ligne { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.horaires-ligne li { background: var(--blanc); border-radius: 12px; padding: .55rem 1rem; box-shadow: var(--ombre); }
.horaires-ligne strong { color: var(--marine); margin-right: .35rem; }
.horaires-ligne .adresse { background: var(--marine); color: var(--blanc); }
.heros-scene { position: relative; width: min(100%, 44rem); margin: clamp(1rem, 3vw, 2rem) auto 0; padding-inline: 16px; }
.blob { position: absolute; inset: 14% 10% 0; background: var(--orange-voile); border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; }
.scene { position: relative; aspect-ratio: 6 / 5; max-width: 100%; }
.scene > img, .scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-heros { z-index: 1; }

/* Confettis */
.deco { position: absolute; display: block; }
.deco-etoile { width: 34px; height: 34px; background: var(--dore); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.deco-trait { width: 70px; height: 14px; border-radius: 999px; background: var(--orange); }
.deco-rond { width: 16px; height: 16px; border-radius: 50%; background: var(--marine); }
/* Parallaxe : décalage vertical piloté par --py (propriété translate, indépendante des animations d'entrée) */
[data-px] { translate: 0 var(--py, 0px); will-change: translate; }
.px-a1 { left: 4%; top: 9rem; width: 22px; height: 22px; } .px-a2 { right: 6%; top: 40%; width: 46px; height: 46px; } .px-a3 { left: 3%; top: 68%; transform: rotate(24deg); }
.px-r1 { right: 7%; top: 5rem; width: 40px; height: 40px; } .px-r2 { left: 46%; top: 42%; width: 20px; height: 20px; } .px-r3 { right: 10%; bottom: 22%; transform: rotate(-18deg); }
@media (max-width: 599px) { .px-a2, .px-r2 { display: none; } }
.d1 { left: 6%; top: 18%; } .d2 { right: 4%; top: 30%; transform: rotate(-28deg); } .d3 { left: 14%; bottom: 18%; } .d4 { right: 12%; bottom: 14%; width: 22px; height: 22px; }

/* ---------- Panneaux arrondis qui se chevauchent ---------- */
.panneau { position: relative; border-radius: var(--arrondi-panneau) var(--arrondi-panneau) 0 0; margin-top: calc(var(--arrondi-panneau) * -1); padding-block: clamp(4rem, 8vw, 7rem); z-index: 1; }
.panneau-creme { background: var(--creme); }
.panneau-marine { background: var(--marine); color: var(--blanc); }
.panneau-orange { background: var(--orange); color: var(--marine-fonce); }

.intro { display: grid; gap: 1.5rem; justify-items: start; max-width: 50rem; }
.intro-texte { font-family: var(--f-titre); font-weight: 500; font-size: calc(clamp(1.4rem, 2.8vw, 2.1rem) * var(--echelle-titres, 1)); line-height: 1.25; letter-spacing: -.02em; color: var(--marine-fonce); }

/* Frise : cartes qui alternent le long d'un chemin */
.frise { position: relative; margin-top: clamp(3rem, 7vw, 5.5rem); display: grid; gap: clamp(3rem, 8vw, 6rem); }
.chemin { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.chemin path { fill: none; stroke: var(--dore); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.etape-frise { position: relative; z-index: 1; display: grid; gap: 1rem; align-items: center; }
.etape-frise .scene { width: min(100%, 30rem); justify-self: center; }
.carte { background: var(--blanc); border-radius: var(--arrondi-carte, 22px); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--ombre); display: grid; gap: 1rem; align-content: start; max-width: 32rem; }
.carte h2 { font-size: calc(clamp(1.6rem, 3vw, 2.2rem) * var(--echelle-titres, 1)); color: var(--marine-fonce); }
.carte p { color: var(--gris); }
.puces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.puces li { background: var(--marine-voile); color: var(--marine); border-radius: 999px; padding: .3rem .8rem; font-weight: 700; font-size: .92rem; }
.prix { display: grid; gap: .2rem; background: var(--orange-voile); border-radius: 14px; padding: 1rem 1.2rem; }
.prix strong { font-family: var(--f-titre); font-size: 1.5rem; color: var(--marine); letter-spacing: -.02em; }
.prix s { color: var(--gris); }
.a-completer { border: 2px dashed var(--orange); background: var(--orange-voile); border-radius: 14px; padding: .8rem 1rem; color: var(--encre) !important; font-size: .95rem; }
.a-completer strong { color: var(--orange-texte); }
@media (min-width: 900px) {
  .etape-frise { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .etape-frise.inverse .scene { order: 2; }
  .etape-frise:nth-child(odd) .carte { transform: translateY(2.5rem); }
}
@media (max-width: 899px) { .chemin { display: none; } }

/* ---------- Inscription (panneau marine) ---------- */
.inscription-tete { display: grid; gap: 1.5rem; align-items: center; }
.titre-geant { font-size: calc(clamp(2.8rem, 7.5vw, 6.2rem) * var(--echelle-titres, 1)); letter-spacing: -.045em; line-height: .95; }
.scene-ronde { width: min(100%, 22rem); justify-self: center; background: var(--blanc); border-radius: 50%; aspect-ratio: 1; }
.scene-ronde > img, .scene-ronde > svg { inset: 12% 6% 8%; width: 88%; height: 80%; }
.etapes { list-style: none; padding: 0; margin: clamp(2.5rem, 6vw, 4rem) 0 0; display: grid; gap: 1rem; counter-reset: e; }
.etapes li { background: var(--blanc); color: var(--encre); border-radius: var(--arrondi-carte, 22px); padding: 1.6rem; display: grid; gap: .6rem; align-content: start; }
.etapes .num { font-family: var(--f-titre); font-weight: 700; font-size: 4rem; line-height: .9; color: var(--orange); letter-spacing: -.04em; }
.etapes h3 { font-size: 1.45rem; color: var(--marine-fonce); }
.etapes p { color: var(--gris); }
.etapes a { color: var(--marine); font-weight: 700; overflow-wrap: anywhere; }
.listes { display: grid; gap: 1rem; margin-top: 1rem; }
.liste { border-radius: var(--arrondi-carte, 22px); padding: 1.6rem; color: var(--encre); display: grid; gap: .8rem; align-content: start; }
.liste-bleue { background: var(--marine-voile); }
.liste-orange { background: var(--orange-voile); }
.liste h3 { font-size: 1.35rem; color: var(--marine-fonce); }
.liste ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.liste li { padding-left: 1.6rem; position: relative; }
.liste li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8rem; height: .8rem; border-radius: 50%; background: var(--orange); }
.liste-bleue li::before { background: var(--marine); }
@media (min-width: 760px) {
  .inscription-tete { grid-template-columns: 1.5fr 1fr; }
  .etapes { grid-template-columns: repeat(3, 1fr); }
  .etapes li:nth-child(2) { transform: translateY(1.5rem); }
  .listes { grid-template-columns: 1fr 1fr; margin-top: 2.5rem; }
}

/* ---------- Photo et ruban ---------- */
.ruban { position: relative; margin-top: calc(var(--arrondi-panneau) * -1); border-radius: var(--arrondi-panneau) var(--arrondi-panneau) 0 0; overflow: hidden; z-index: 1; height: clamp(22rem, 52vw, 44rem); background: var(--sable); }
.ruban > img { position: absolute; left: 0; top: -16%; width: 100%; height: 132%; object-fit: cover; object-position: 40% 35%; display: block; }
.ruban-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ruban-fond { stroke: var(--orange); stroke-width: 84; fill: none; stroke-linecap: round; }
.ruban-texte { font-family: var(--f-titre); font-weight: 700; font-size: 44px; fill: var(--marine-fonce); letter-spacing: .02em; dominant-baseline: middle; }

/* ---------- Repères ---------- */
.reperes { display: grid; gap: 2.5rem; }
.reperes-tete { display: grid; gap: 1.2rem; align-content: start; }
.reperes-tete p { color: var(--gris); font-size: 1.15rem; max-width: 28rem; }
.reperes-tete .scene { width: min(100%, 24rem); }
.titre-grand { font-size: calc(clamp(2.4rem, 5.5vw, 4.4rem) * var(--echelle-titres, 1)); color: var(--marine-fonce); letter-spacing: -.04em; line-height: 1; }
.vague { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6' fill='none' stroke='%23F0AD41' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 40px 12px; padding-bottom: .12em; }
.vague-marine { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6' fill='none' stroke='%23004072' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cartes-chiffres { display: grid; gap: 1.2rem; justify-items: end; }
.chiffre { width: min(100%, 24rem); min-height: 15rem; border-radius: calc(var(--arrondi-carte, 22px) + 4px); padding: 1.6rem 1.8rem; display: grid; align-content: space-between; gap: 1.5rem; box-shadow: var(--ombre); }
.chiffre strong { font-family: var(--f-titre); font-weight: 600; font-size: calc(clamp(3.2rem, 7vw, 4.8rem) * var(--echelle-titres, 1)); line-height: .95; letter-spacing: -.045em; }
.chiffre span { font-size: 1.05rem; max-width: 18rem; }
.c-orange { background: var(--orange); color: var(--marine-fonce); transform: rotate(3deg); }
.c-marine { background: var(--marine); color: var(--blanc); transform: rotate(-4deg); justify-self: start; }
.c-dore { background: var(--dore); color: var(--marine-fonce); transform: rotate(2deg); }
.c-blanc { background: var(--blanc); color: var(--marine); transform: rotate(-3deg); justify-self: start; }
@media (min-width: 900px) {
  .reperes { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .reperes-tete { position: sticky; top: 8rem; }
}

.defile { margin-top: clamp(3rem, 7vw, 5rem); overflow: hidden; padding-block: .5rem; }
.defile-ligne { list-style: none; margin: 0; padding: 0; display: flex; gap: .7rem; width: max-content; animation: defile 38s linear infinite; }
.defile-ligne li { background: var(--blanc); border-radius: 999px; padding: .8rem 1.4rem; font-family: var(--f-titre); font-weight: 600; font-size: 1.25rem; color: var(--marine); box-shadow: var(--ombre); white-space: nowrap; }
.defile-ligne li:nth-child(3n+2) { background: var(--orange-voile); }
.defile-ligne li:nth-child(3n) { background: var(--marine-voile); }
.sans-defile .defile-ligne { animation: none; flex-wrap: wrap; width: auto; }
.sans-defile .defile-ligne li[aria-hidden="true"] { display: none; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Pied de page orange ---------- */
.pied { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px)); }
.pied-grille { display: grid; gap: 2.5rem; }
.pied-intro { display: grid; gap: 1.2rem; max-width: 28rem; align-content: start; font-size: 1.1rem; }
.pied-infos { display: grid; gap: 1.5rem; }
.pied-infos h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.pied-infos p + p { margin-top: .3rem; }
.pied-infos a { font-weight: 700; overflow-wrap: anywhere; display: inline-flex; min-height: 32px; align-items: center; }
.pied-fin { display: grid; gap: 1.5rem; align-items: end; }
.titre-pied { font-family: var(--f-titre); font-weight: 700; font-size: calc(clamp(3.2rem, 11vw, 9rem) * var(--echelle-titres, 1)); line-height: .92; letter-spacing: -.05em; }
.pied .scene-ronde { width: 15rem; max-width: 100%; }
.mentions { font-size: .9rem; opacity: .85; }
@media (min-width: 760px) {
  .pied-grille { grid-template-columns: 1fr 1.3fr; }
  .pied-infos { grid-template-columns: repeat(3, 1fr); }
  .pied-fin { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
  .mentions { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .defile-ligne { animation: none; flex-wrap: wrap; width: auto; }
  .js .menu { transform: none; }
  .pilule:active, .pilule-appel:active, .bouton-menu:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .defile-ligne li[aria-hidden="true"] { display: none; } }

/* ---------- Apple Design (skill apple-design, 2026-10-16) ---------- */
/* Typographie : approche (tracking) propre à chaque taille, taille optique de Nunito Sans */
body { font-optical-sizing: auto; }
h3 { letter-spacing: -.015em; }
.etapes h3, .liste h3 { letter-spacing: -.01em; }
.puces li, .surtitre, .mentions, .tc-aide { letter-spacing: .01em; }
.intro-texte { line-height: 1.22; }

/* Appui : on enfonce vite (90 ms), on relâche plus doucement */
.pilule:active, .pilule-appel:active, .bouton-menu:active { transition-duration: 90ms; }

/* Matériau de l'en-tête : léger tout en haut, plus dense et plus détaché quand le contenu passe dessous */
.barre, .pilule-appel { transition: transform var(--d-appui) var(--ease-out), box-shadow 300ms ease, background-color 300ms ease; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .entete:not(.sur-contenu) .barre, .entete:not(.sur-contenu) .pilule-appel { box-shadow: 0 0 0 1px rgb(255 255 255 / .55) inset, 0 1px 2px rgb(0 64 114 / .05); }
  .entete.sur-contenu .barre, .entete.sur-contenu .pilule-appel { background: rgb(255 255 255 / .8); }
}

/* Où suis-je : la section en cours est marquée dans le menu */
.menu a[aria-current] { background: var(--marine-voile); color: var(--marine); }
.menu a { position: relative; }
@media (min-width: 900px) {
  .menu a::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 7px; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transition: transform var(--d-ui) var(--ease-out); }
  .menu a[aria-current] { background: transparent; }
  .menu a[aria-current]::after { transform: scaleX(1); }
}

/* Menu mobile : il se matérialise (flou + échelle ensemble) depuis le bouton, et repart par le même chemin */
@media (max-width: 899px) {
  .js .menu { filter: blur(4px); transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out), filter var(--d-ui) var(--ease-out), visibility 0s linear var(--d-ui); }
  .js .menu.ouvert { filter: none; }
}

/* Bandeau piloté au doigt (js/fluide.js) : le défilement vertical reste natif */
.defile-js { cursor: grab; touch-action: pan-y; }
.defile-js.saisi { cursor: grabbing; }
.defile-js .defile-ligne { animation: none; will-change: transform; }
.defile-js .defile-ligne li { -webkit-user-select: none; user-select: none; }

/* Accessibilité des matériaux */
@media (prefers-reduced-transparency: reduce) {
  .barre, .pilule-appel, .entete.sur-contenu .barre, .entete.sur-contenu .pilule-appel { background: var(--blanc); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .menu { filter: none; }
}
@media (prefers-contrast: more) {
  .barre, .pilule-appel, .carte, .etapes li, .horaires-ligne li { background: var(--blanc); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 2px var(--marine); }
  .carte p, .etapes p, .reperes-tete p { color: var(--encre); }
}
@media (prefers-reduced-motion: reduce) { .js .menu { filter: none; } }

/* ---------- Retours de Lorenzo (2026-10-16) ---------- */
/* Héros : une photo en plein cadre à la place de l'illustration animée, texte posé dessus */
.heros { min-height: min(100svh, 60rem); display: grid; align-items: end; background: var(--marine-fonce); padding-top: clamp(8rem, 16vw, 11rem); padding-bottom: calc(var(--arrondi-panneau) + clamp(2.5rem, 6vw, 4.5rem)); }
.heros-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; display: block; will-change: transform; }
.heros::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(0 30 55 / .25) 0%, transparent 28%, transparent 42%, rgb(0 30 55 / .72) 100%); }
.heros .heros-texte { z-index: 2; }
.heros h1 { color: var(--blanc); text-shadow: 0 2px 30px rgb(0 30 55 / .35); }
.heros .souligne { color: var(--blanc); }
.surtitre { background: rgb(255 255 255 / .9); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .surtitre { background: rgb(255 255 255 / .72); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }
}

/* Inscription : les trois blocs alignés sur la même hauteur */
@media (min-width: 760px) { .etapes li:nth-child(2) { transform: none; } }
.etapes { align-items: stretch; }

/* Bulles : chaque illustration est centrée au milieu de son rond (cadrage calculé sur toute l'animation) */
.scene-ronde > img, .scene-ronde > svg { right: auto; bottom: auto; }
.scene-ronde[data-scene="accueil"] > img, .scene-ronde[data-scene="accueil"] > svg { left: 10.54%; top: 13.80%; width: 82.07%; height: 68.39%; }
.scene-ronde[data-scene="famille"] > img, .scene-ronde[data-scene="famille"] > svg { left: -3.22%; top: -3.14%; width: 110.82%; height: 92.35%; }

/* Retours de Lorenzo, 2e passe (2026-10-16) */
.souligne::after { bottom: -.1em; }                                  /* trait orange décollé du titre */
.chiffre { align-content: end; gap: .55rem; }                        /* chiffre rapproché de sa phrase */
.defile-ligne li { box-shadow: none; }                               /* étiquettes du bandeau sans ombre */
.scene-ronde[data-scene="famille"] > img, .scene-ronde[data-scene="famille"] > svg { left: .3%; top: -6.6%; } /* recentrage optique */
.mentions { margin-top: clamp(1.5rem, 3vw, 2.5rem); }                /* copyright éloigné de « mardi » */
.horaires-ligne { margin-top: 1.1rem; }                              /* place sous le trait orange */

/* Retours de Lorenzo, 3e passe (2026-10-16) */
.heros h1 { font-size: calc(clamp(2.6rem, 8.2vw, 6.6rem) * var(--echelle-titres, 1)); }   /* titre du héros un peu plus petit */
.heros { padding-bottom: calc(var(--arrondi-panneau) + clamp(7rem, 15vw, 13rem)); padding-top: clamp(6.5rem, 9vw, 7.5rem); }      /* texte du héros remonté */
.c-blanc { align-content: center; }                                                         /* « 2 jours » remonté dans sa carte */
.scene-ronde[data-scene="accueil"] > img, .scene-ronde[data-scene="accueil"] > svg { top: 10.3%; } /* bulle « S'inscrire » recentrée */
.horaires-ligne { margin-top: 2rem; }                                /* 4e passe : titre plus détaché des horaires */

/* Recette du 2026-10-16 (skill création-site-web) */
.etapes .num { color: var(--marine); }                               /* contraste AA : l'orange reste aux boutons */
.chiffre { align-content: center; }                                  /* les quatre cartes alignées pareil */
@media (max-width: 599px) { .chiffre { min-height: 0; padding-block: 2rem; } }  /* plus de vide au-dessus du chiffre */

/* Points bloquants de la recette complète (2026-10-16) */
.etape-frise > *, .reperes > *, .reperes-tete { min-width: 0; }          /* un mot long n'élargit plus la page */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.chiffre strong { overflow-wrap: break-word; }
@media (max-width: 599px) { .px-a1 { display: none; } }                 /* la pastille ne couvre plus l'intro */
.surtitre { background: rgb(255 255 255 / .9); }                         /* lisible sur la photo, même sur téléphone */
@media (min-width: 760px) and (max-width: 1099px) { .pied-infos { grid-template-columns: repeat(2, 1fr); } }
.bouton-pause { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 24px; }
.bouton-pause:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .bouton-pause { display: none; } }   /* tout est déjà immobile */

/* Le petit texte du héros fait partie du H1 (mot-clé pour le référencement), sans changer le rendu */
.heros h1 { display: grid; justify-items: center; gap: 1.4rem; max-width: none; }
.heros h1 .titre-principal { display: block; max-width: 12ch; }
.heros h1 .surtitre { font-family: var(--f-texte); font-size: .95rem; font-weight: 700; line-height: 1.6; letter-spacing: .01em; text-shadow: none; hyphens: manual; }

/* Page mentions légales et confidentialité */
.mentions a { color: inherit; text-underline-offset: .2em; }
.page-legale { padding: clamp(7rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 5rem); }
.page-legale .cadre { max-width: 46rem; }
.page-legale h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--marine-fonce); margin-bottom: 2rem; }
.page-legale h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--marine-fonce); margin: 2.4rem 0 .8rem; }
.page-legale h3 { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--marine-fonce); margin: 1.6rem 0 .6rem; }
.page-legale p + p { margin-top: .8rem; }
.page-legale a { color: var(--marine); font-weight: 700; text-underline-offset: .2em; }
.page-legale .a-completer { background: var(--blanc); border-left: 4px solid var(--orange); border-radius: 0 12px 12px 0; padding: .8rem 1rem; }
.page-legale .retour { display: inline-block; margin-top: 3rem; }

/* Titre lu par les lecteurs d'écran, invisible à l'écran */
.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Contenus de l'association (2026-10-20) : nouvelles sections ---------- */
.panneau-blanc { background: var(--blanc); }
.intro-surtitre { font-weight: 800; color: var(--orange-texte); letter-spacing: .01em; }
.intro-suite { color: var(--gris); font-size: 1.15rem; max-width: 40rem; }

/* Ateliers : trois lignes nettes dans la carte */
.ateliers { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.ateliers li { display: grid; gap: .1rem; background: var(--marine-voile); border-radius: 14px; padding: .8rem 1rem; }
.ateliers strong { font-family: var(--f-titre); font-weight: 600; font-size: 1.15rem; color: var(--marine-fonce); }
.ateliers span { color: var(--gris); font-size: .95rem; }

/* Journée d'accueil solidaire : la date en très grand */
.journee { display: grid; gap: 2.5rem; align-items: center; }
.journee-texte { display: grid; gap: 1.1rem; justify-items: start; max-width: 36rem; }
.journee-texte > p { color: var(--gris); font-size: 1.15rem; }
.etiquette { background: var(--orange-voile); color: var(--orange-texte) !important; font-weight: 800; font-size: .95rem !important; border-radius: 999px; padding: .3rem .9rem; letter-spacing: .02em; }
.calendrier { justify-self: center; width: min(100%, 20rem); background: var(--blanc); border-radius: 28px; box-shadow: var(--ombre), 0 0 0 1px var(--marine-voile); overflow: hidden; text-align: center; transform: rotate(-3deg); }
.calendrier-mois { background: var(--marine); color: var(--blanc); font-family: var(--f-titre); font-weight: 600; font-size: 1.2rem; padding: .9rem 1rem; }
.calendrier-jour { font-family: var(--f-titre); font-weight: 700; font-size: clamp(6rem, 18vw, 9rem); line-height: 1; letter-spacing: -.05em; color: var(--marine-fonce); padding-top: 1.4rem; }
.calendrier-detail { color: var(--gris); font-weight: 700; padding: .4rem 1rem 1.6rem; }
@media (min-width: 900px) { .journee { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }

/* Inscription : chapô, créneaux et question finale */
.inscription-titre { display: grid; gap: 1.2rem; }
.inscription-chapo { font-size: 1.2rem; color: var(--blanc-75); max-width: 34rem; }
.inscription-bas { display: grid; gap: 1rem; margin-top: 1rem; }
.creneaux { background: var(--orange); color: var(--marine-fonce); border-radius: var(--arrondi-carte, 22px); padding: 1.4rem 1.6rem; display: grid; gap: .4rem; }
.creneaux h3 { font-size: 1.35rem; letter-spacing: -.01em; }
.creneaux p { font-size: 1.15rem; }
.question { font-size: 1.1rem; color: var(--blanc); align-self: center; }
.question a { font-weight: 800; }
@media (min-width: 760px) { .inscription-bas { grid-template-columns: auto 1fr; gap: 2rem; align-items: center; margin-top: 2rem; } }

/* Chiffres : six cartes qui alternent à droite et à gauche */
.cartes-chiffres .chiffre:nth-child(odd) { justify-self: end; }
.cartes-chiffres .chiffre:nth-child(even) { justify-self: start; }
.chiffre-a-completer { outline: 3px dashed var(--orange); outline-offset: 4px; }
.chiffre-a-completer em { display: block; font-style: normal; font-weight: 800; color: var(--orange); margin-top: .3rem; }

/* Dons */
.dons { display: grid; gap: 2.5rem; }
.dons-tete { display: grid; gap: 1.2rem; align-content: start; }
.dons-tete .titre-grand { color: var(--blanc); }
.dons-tete > p { color: var(--blanc-75); font-size: 1.15rem; max-width: 28rem; }
.dons-tete .scene-ronde { width: min(100%, 18rem); justify-self: start; }
.dons-cartes { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.don-carte { background: var(--blanc); color: var(--encre); border-radius: var(--arrondi-carte, 22px); padding: 1.6rem; display: grid; gap: .6rem; width: 100%; }
.don-carte h3 { font-size: 1.45rem; color: var(--marine-fonce); letter-spacing: -.01em; }
.don-carte p { color: var(--gris); }
.dons-cartes .pilule { margin-top: .5rem; }
@media (min-width: 900px) { .dons { grid-template-columns: 1fr 1.2fr; gap: 4rem; } }

/* Partenaires : tuiles cliquables */
.partenaires-chapo { color: var(--gris); font-size: 1.15rem; margin-top: 1rem; }
.partenaires { list-style: none; padding: 0; margin: clamp(2rem, 5vw, 3rem) 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.partenaires a { display: grid; gap: .25rem; height: 100%; min-height: 7.5rem; align-content: center; padding: 1.4rem 1.6rem; border-radius: var(--arrondi-carte, 22px); background: var(--creme); text-decoration: none; color: var(--marine-fonce); box-shadow: 0 0 0 1px var(--marine-voile); transition: transform var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out); }
.partenaires strong { font-family: var(--f-titre); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.partenaires span { color: var(--gris); }
.partenaires li:nth-child(3n+2) a { background: var(--orange-voile); }
.partenaires li:nth-child(3n) a { background: var(--marine-voile); }
@media (hover: hover) and (pointer: fine) { .partenaires a:hover { transform: translateY(-3px); box-shadow: var(--ombre); } }
.partenaires a:active { transform: scale(.98); transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) { .partenaires a:hover, .partenaires a:active { transform: none; } }
@media (min-width: 760px) { .partenaires { grid-template-columns: repeat(3, 1fr); } }
/* Quatre jours d'ouverture : sur téléphone, deux horaires par ligne au lieu d'une colonne */
@media (max-width: 599px) {
  .horaires-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; font-size: .9rem; width: 100%; max-width: 22rem; margin-inline: auto; }
  .horaires-ligne li { padding: .5rem .6rem; text-align: center; }
  .horaires-ligne strong { display: block; margin-right: 0; }
  .horaires-ligne .adresse { grid-column: 1 / -1; }
}

/* Retours de Lorenzo (2026-10-20, 2) */
/* Plus d'air sous la dernière carte de la frise et sous les dons : le panneau suivant mord de --arrondi-panneau */
#association, #dons { padding-bottom: calc(clamp(4rem, 8vw, 7rem) + var(--arrondi-panneau) + clamp(1.5rem, 4vw, 3.5rem)); }
/* Horaires des inscriptions rangés sous « Ici, on se respecte » */
.listes-colonne { display: grid; gap: 1rem; align-content: start; }
.creneaux ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: 1.15rem; }
.creneaux strong { display: inline-block; min-width: 6.5rem; }
.inscription-bas { grid-template-columns: 1fr !important; }
/* Illustrations dans les ronds : contenu centré (boîte englobante mesurée dans le SVG) */
.dons-tete .scene-ronde { justify-self: center; }
.scene-ronde[data-scene="don"] > img, .scene-ronde[data-scene="don"] > svg { left: 3.3%; top: 5.7%; width: 100%; height: 83.33%; }
.scene-ronde[data-scene="famille"] > img, .scene-ronde[data-scene="famille"] > svg { left: -.1%; top: 2.5%; } /* centré et un peu plus bas */

/* Retours de Lorenzo (2026-10-20, 3) */
/* Héros : l'adresse rejoint le surtitre, et ce bandeau monte, plus détaché du titre */
.heros h1 { gap: clamp(2rem, 4vw, 3rem); }
.surtitres { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.heros h1 .surtitre-adresse { background: var(--marine); color: var(--blanc); }
/* « Faire un don » : le rond s'aligne à gauche sur le titre et le texte */
.dons-tete .scene-ronde { justify-self: start; }
/* Chiffres : l'illustration s'aligne à gauche sur le titre et le texte ; la dernière carte ne touche plus la précédente */
.reperes-tete .scene { justify-self: start; margin-left: calc(min(100%, 24rem) * -.19); } /* le dessin commence à 19 % du cadre */
 /* « 6 partenaires » rapproché de « 6 mois » (Lorenzo, 2026-10-23) */
/* S'inscrire : plus d'air entre la dernière phrase et la photo qui suit */
#inscription { padding-bottom: calc(clamp(4rem, 8vw, 7rem) + var(--arrondi-panneau) + clamp(2.5rem, 6vw, 5rem) - 30px); } /* -30 px (Lorenzo, 20/10) */
#journee { padding-bottom: calc(clamp(4rem, 8vw, 7rem) + 60px); } /* +60 px sous la journée d'accueil (Lorenzo, 20/10 : +40 puis +20) */
/* Ruban : photo des bénévoles (Lorenzo, 20/10), visages au centre */
.ruban > img { object-position: 55% 50%; }
/* Don : dessin recentré dans le rond (boîte englobante de toute la boucle mesurée, 20/10) */
.scene-ronde[data-scene="don"] > img, .scene-ronde[data-scene="don"] > svg { left: -.1%; }
/* Partenaires : vague plus détachée du titre, chapô plus détaché de la vague */
#partenaires .vague { padding-bottom: .3em; }
#partenaires .partenaires-chapo { margin-top: 3rem; } /* la vague déborde de la ligne : la marge doit la contenir */
/* ---------- Recette du 20/10 : corrections ---------- */
/* Focus visible sur les panneaux marine (le contour marine y était invisible) */
/* Double anneau sur les panneaux marine : blanc visible sur le marine, marine visible dans les cartes blanches */
.panneau-marine :focus-visible { outline-color: var(--blanc); box-shadow: 0 0 0 7px var(--marine); }
/* Pastille déco : masquée tant qu'elle peut couvrir le texte de l'intro */
@media (max-width: 899px) { .px-a1 { display: none; } }
/* Titre du héros lisible sur la partie claire de la photo : voile plus dense au centre */
.heros::after { background: linear-gradient(180deg, rgb(0 30 55 / .3) 0%, rgb(0 30 55 / .38) 30%, rgb(0 30 55 / .42) 55%, rgb(0 30 55 / .75) 100%); }
/* Cartes chiffres sur téléphone : moins penchées, plus espacées, contour pointillé à l'intérieur */
@media (max-width: 599px) {
  .cartes-chiffres { gap: 1.6rem; }
  .cartes-chiffres .chiffre:nth-child(odd) { transform: rotate(1.5deg); }
  .cartes-chiffres .chiffre:nth-child(even) { transform: rotate(-1.5deg); }
  .chiffre-a-completer { outline-offset: -6px; }
}
/* Cibles tactiles du pied de page : 44 px */
.pied-infos a, .mentions a, .bouton-pause { min-height: 44px; display: inline-flex; align-items: center; }
/* Bouton pause dans l'en-tête */
.bouton-pause-entete { border: 0; cursor: pointer; width: 44px; height: 44px; background: var(--marine-voile); color: var(--marine); transition: transform var(--d-appui) var(--ease-out); }
.bouton-pause-entete:active { transform: scale(.94); }
@media (min-width: 900px) { .menu { margin-left: auto; } .barre { justify-content: flex-start; } }
@media (max-width: 899px) { .bouton-pause-entete { margin-left: auto; } .bouton-menu { order: 3; } }
@media (prefers-reduced-motion: reduce) { .bouton-pause-entete { display: none; } }
/* Bouton « Retour à l'accueil » des pages annexes : centré, sans rond */
.page-legale .retour { display: inline-flex; padding-inline: 1.4rem; }
#partenaires { padding-bottom: calc(clamp(4rem, 8vw, 7rem) + 30px); } /* +30 px sous les partenaires (Lorenzo, 20/10) */

/* Retours de Lorenzo (2026-10-23) */
.ateliers em { font-style: normal; font-weight: 800; font-size: .9rem; color: var(--orange-texte); margin-top: .2rem; }
.ateliers-inscription { color: var(--encre) !important; font-weight: 600; }
.ateliers-inscription a { color: var(--marine); font-weight: 800; overflow-wrap: anywhere; }
.services { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.services li { position: relative; padding-left: 1.6rem; font-weight: 600; color: var(--marine-fonce); }
.services li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8rem; height: .8rem; border-radius: 50%; background: var(--orange); }
.journee-texte .services { width: 100%; }

/* Partenaires : bandeau de logos qui défile de gauche à droite (Lorenzo, 2026-10-23) */
.logos-defile { margin-top: clamp(2rem, 5vw, 3rem); overflow: hidden; padding-block: .6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos-ligne { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; width: max-content; animation: logos-defile 18s linear infinite; }
.logos-ligne li { flex: none; }
.logos-ligne a { display: grid; place-items: center; width: clamp(9.5rem, 22vw, 15rem); height: clamp(5.75rem, 11vw, 8rem); padding: 1rem 1.2rem; border-radius: var(--arrondi-carte, 22px); background: var(--blanc); box-shadow: 0 0 0 1px var(--marine-voile); transition: transform var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out); }
.logos-ligne img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logos-defile:hover .logos-ligne, .logos-defile:focus-within .logos-ligne { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .logos-ligne a:hover { transform: translateY(-3px); box-shadow: var(--ombre); } }
.logos-ligne a:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; }
@keyframes logos-defile { from { transform: translateX(calc(-50% - .5rem)); } to { transform: translateX(0); } } /* -50 % - demi-gouttière = une série pile */
.sans-defile .logos-defile, .anim-pause .logos-defile { -webkit-mask-image: none; mask-image: none; }
.sans-defile .logos-ligne, .anim-pause .logos-ligne { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
.sans-defile .logos-ligne li[aria-hidden="true"], .anim-pause .logos-ligne li[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .logos-defile { -webkit-mask-image: none; mask-image: none; }
  .logos-ligne { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .logos-ligne li[aria-hidden="true"] { display: none; }
  .logos-ligne a:hover { transform: none; }
}

/* Retours de Lorenzo (2026-10-23, 2) */
.services { grid-template-columns: 1fr; }
.services li { white-space: nowrap; }
@media (max-width: 599px) { .services li { font-size: clamp(.72rem, 3.2vw, 1rem); padding-left: 1.2rem; } .services li::before { width: .65rem; height: .65rem; } }
.calendrier-jour { position: relative; perspective: 700px; font-variant-numeric: tabular-nums; }
.feuilles { position: absolute; inset: 0; }
.feuille { position: absolute; inset: 0; padding-top: inherit; background: var(--blanc); transform-origin: 50% 0; backface-visibility: hidden; box-shadow: 0 1px 0 var(--marine-voile), 0 6px 10px -8px rgba(0, 40, 80, .25); }
.calendrier-detail { transition: opacity .4s var(--ease-out); }
.calendrier-detail.detail-cache { opacity: 0; }
/* Logos : pleine largeur, sans fondu sur les bords, logos plus petits dans leur carte */
.logos-defile { -webkit-mask-image: none; mask-image: none; }
.logos-ligne a { padding: 1.6rem 2.2rem; }
@media (max-width: 599px) { .logos-ligne a { padding: 1.2rem 1.5rem; } }
.logos-ligne img { max-height: clamp(2.4rem, 4.5vw, 3.4rem); max-width: 100%; }

/* Titres découpés en mots par test.js : chaque mot sort d'un masque (marge pour les jambages) */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
.mot-in { display: inline-block; will-change: transform; }
.don-carte .don-paypal { margin-top: .4rem; }

/* Retours de Lorenzo (2026-10-24) */
.cartes-chiffres { gap: 0 !important; }
.cartes-chiffres .chiffre + .chiffre { margin-top: -.9rem; }           /* les cartes se chevauchent très légèrement */
.listes-colonne .inscription-bas { margin-top: .4rem; padding-inline: .2rem; }
.journee-texte > .etiquette + .titre-grand { margin-top: .5rem; }       /* un peu d'air sous « Une fois par mois » */
.journee-texte > .services { margin-top: .6rem; }                       /* liste décollée du titre et du texte */
.journee-texte > .titre-grand + p { margin-top: .3rem; }
/* Calendrier : la pile de feuilles couvre tout le bloc sous l'en-tête (plus de coupure au milieu) */
.calendrier { position: relative; }
.calendrier .feuilles { position: absolute; left: 0; right: 0; bottom: 0; perspective: 900px; }
.calendrier .feuille { display: grid; grid-template-rows: auto auto; align-content: start; }
.feuille-jour { font-family: var(--f-titre); font-weight: 700; font-size: clamp(6rem, 18vw, 9rem); line-height: 1; letter-spacing: -.05em; color: var(--marine-fonce); padding-top: 1.4rem; font-variant-numeric: tabular-nums; }
.feuille-mois { color: var(--gris); font-weight: 700; padding: .4rem 1rem 1.6rem; }
.calendrier .feuille { padding-top: 0; }
.calendrier-detail.detail-cache { opacity: 1; }

/* Ruban (Lorenzo, 2026-10-24) : plus de photo, aplat bleu et courbe blanche */
.ruban { background: var(--marine); }
.ruban-fond { stroke: var(--blanc); }
.ruban-texte { fill: var(--marine); }
.ruban { height: clamp(11rem, 34vw, 29rem); }                         /* moins d'espace sous la courbe (Lorenzo, 2026-10-24) */
.ruban-etoile { fill: var(--orange); }
/* Courbe : 15 px plus haut, 50 px d'air en plus dessous (Lorenzo, 2026-10-24) */
.ruban { --h-courbe: clamp(11rem, 34vw, 29rem); height: calc(var(--h-courbe) + 115 * min(1px, 100vw / 1280)); } /* valeurs réglées à 1280 px, réduites en proportion sur mobile */
.ruban-svg { top: calc(-35 * min(1px, 100vw / 1280)); bottom: auto; height: var(--h-courbe); }
#dons { padding-top: calc(clamp(4rem, 8vw, 7rem) + 30px); }          /* +30 px en haut de « Faire un don » (Lorenzo, 2026-10-24) */
/* « S'inscrire, en trois étapes » un peu plus aéré (Lorenzo, 2026-10-24) */
#inscription { padding-top: calc(clamp(4rem, 8vw, 7rem) + 30px); }
#inscription .etapes { margin-top: calc(clamp(2.5rem, 6vw, 4rem) + 20px); gap: 1.4rem; }
#inscription .listes { gap: 1.4rem; margin-top: 1.4rem; }
#inscription .listes-colonne { gap: 1.4rem; }
@media (min-width: 760px) { #inscription .listes { margin-top: calc(2.5rem + 20px); } }
#inscription .inscription-chapo { margin-top: 1.2rem; }
#inscription .etapes .num { color: var(--orange); }                  /* chiffres en jaune (Lorenzo, 2026-10-24) */
.liste-bleue li::before { background: var(--orange); }                 /* points jaunes dans « Les documents à fournir » (Lorenzo, 2026-10-24) */
.defile { margin-top: calc(clamp(3rem, 7vw, 5rem) + 40px); }              /* plus d'air sous « 6 mois » (Lorenzo, 2026-10-24) */
#inscription { padding-bottom: calc(clamp(4rem, 8vw, 7rem) + var(--arrondi-panneau) + clamp(2.5rem, 6vw, 5rem) - 70px); } /* -40 px de plus : courbe plus proche des listes (Lorenzo, 2026-10-24) */

/* Photo du héros : lent zoom en boucle (Lorenzo, 2026-10-25).
   Propriétés scale et translate, indépendantes du transform piloté par GSAP (zoom d'entrée et parallaxe). */
.heros-fond { animation: heros-respire 26s ease-in-out infinite alternate; }
@keyframes heros-respire {
  from { scale: 1; translate: 0 0; }
  to   { scale: 1.09; translate: -1.5% -1%; }
}
.anim-pause .heros-fond { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .heros-fond { animation: none; } }

/* Soulignement « ensemble » : s'allonge de gauche à droite, reste, puis se rétracte vers la droite, en boucle (Lorenzo, 2026-10-25).
   scaleX plutôt que clip-path : interpolé partout, y compris Safari iOS. */
.souligne::after { transform-origin: left center; animation: heros-trait 6s var(--ease-in-out) 1.2s infinite both; }
@keyframes heros-trait {
  0%        { transform: scaleX(0); transform-origin: left center; }
  18%, 70% { transform: scaleX(1); transform-origin: left center; }
  70.1%     { transform: scaleX(1); transform-origin: right center; } /* trait plein : changer d'appui ne se voit pas */
  88%, 100% { transform: scaleX(0); transform-origin: right center; }
}
.anim-pause .souligne::after { animation: none; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .souligne::after { animation: none; transform: scaleX(1); } }

/* Vidéo du haut de page (administration) : pas d'effet de zoom lent, la vidéo bouge déjà */
.heros-video { animation: none; }