/* Page d'accueil, issue de la démo 1 « éditoriale minimale », thème clair. Jetons de la DA relevée sur le site vivant
   (photobook-creator-school/docs/da-creator-school.md § 2 et § 6). Structure : cadre à filets de superx. */
@font-face { font-family: Geist; src: url(/accueil/fonts/Geist-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Geist; src: url(/accueil/fonts/Geist-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Geist; src: url(/accueil/fonts/Geist-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Police de repli aux mesures de Geist (largeurs mesurées avec fontTools) : aucun décalage quand Geist arrive. */
@font-face { font-family: "Geist Repli"; src: local("Arial"), local("Liberation Sans"), local("ArialMT"); font-weight: 400; size-adjust: 104.25%; ascent-override: 96.4%; descent-override: 28.3%; line-gap-override: 0%; }
@font-face { font-family: "Geist Repli"; src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 102.6%; ascent-override: 98%; descent-override: 28.8%; line-gap-override: 0%; }

:root {
  --_typography---font--primary: Geist, "Geist Repli", sans-serif;
  --crimson: #e30040; --orange: #f34e27; --dark: #101010; --gray-dk: #424242;
  --antiflash: #f4f4f4; --light: #fcfcfc; --filet: #e2e2e2;
  --degrade: linear-gradient(90deg, var(--orange) 0%, var(--crimson) 100%);
  --courbe: cubic-bezier(0.32, 0.72, 0, 1);
  --marge: 20px; --section: 64px; --rayon: 12px;
  /* Échelle des titres : h1 43 à 96 px, h2 32 à 56 px, h3 20 à 24 px, corps 16 à 17 px (375 puis 1 440). */
  --h2: clamp(32px, calc(2.2535vw + 23.55px), 56px); --h3: clamp(20px, calc(0.3756vw + 18.59px), 24px);
}
@media (min-width: 700px) { :root { --marge: 32px; --section: 96px; } }
@media (min-width: 1024px) { :root { --marge: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--light); color: var(--dark); font: 400 17px/1.6 Geist, "Geist Repli", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; border-radius: 6px; }
.grad { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: 0.04em; }

/* Cadre à filets : une colonne bordée dès 1 024 px (1 320 px de contenu à 1 440 px, filets à 60 et 1 379). */
.cadre { width: 100%; margin: 0 auto; }
@media (min-width: 1024px) {
  .cadre { width: min(1320px, calc(100% - 64px)); border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); }
}
.bloc { padding: var(--section) var(--marge); border-top: 1px solid var(--filet); }

/* Navigation. */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 var(--marge); }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; }
.nav-logo img { width: 104px; height: 40px; }

/* Bouton principal : un libellé, une destination. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 12px;
  background: var(--degrade); color: #fff; text-decoration: none; font: 700 19px/1.2 Geist, "Geist Repli", sans-serif; letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -14px rgba(227, 0, 64, .7);
  transition: transform 200ms var(--courbe); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 14px 28px -14px rgba(227, 0, 64, .8); opacity: 0; transition: opacity 200ms var(--courbe); }
.btn:hover { transform: translateY(-1px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); }
.btn-petit { min-height: 44px; padding: 0 18px; border-radius: 11px; }

/* Héros. */
.heros { padding-top: 32px; }
@media (min-width: 700px) { .heros { padding-top: 40px; } }
.pastille { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 5px; border-radius: 999px;
  border: 1px solid var(--filet); background: var(--antiflash); font-size: 16px; line-height: 1.5; color: var(--gray-dk); }
.pastille-jeton { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: var(--light); border: 1px solid var(--filet); }
.pastille-jeton i { width: 8px; height: 8px; border-radius: 999px; background: var(--degrade); box-shadow: 0 0 8px 1px rgba(227, 0, 64, .45); }
.heros h1 { margin-top: 20px; font: 600 clamp(40px, 11.6vw, 96px)/1 Geist, "Geist Repli", sans-serif; letter-spacing: -0.04em; }
.heros h1 .ligne { display: block; }
@media (min-width: 1024px) and (max-height: 900px) { .heros h1 { font-size: 80px; } }
.sous-titre { margin-top: 20px; max-width: 22.67em; font-size: 18px; line-height: 1.5; color: var(--gray-dk); }
@media (min-width: 700px) { .sous-titre { margin-top: 24px; font-size: 21px; } }
.heros-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
@media (min-width: 700px) { .heros-appel { margin-top: 32px; } }
.preuve { font-size: 16px; line-height: 1.4; color: var(--gray-dk); }
.preuve strong { font-weight: 600; color: var(--dark); }
/* Assemblage des logos sous la ligne de preuve. */
.heros-preuve { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.heros-logos { display: flex; align-items: center; gap: 14px; font: 500 20px/1 Geist, "Geist Repli", sans-serif; color: var(--gray-dk); }
.heros-logos img { display: block; height: 48px; width: auto; }
/* Mur de photos du héros (variante mur3d) : 24 photos des quatre événements posées sur un plan incliné en 3D.
   Ordinateur (1 024 px et plus) : texte à gauche, mur à droite sur toute la hauteur du premier écran ; trois copies de la
   grille, la piste glisse sans fin en diagonale, bouton Pause en bas à droite.
   Téléphone et tablette : le mur forme le haut du héros, sous la navigation ; une seule copie (12 photos en téléphone),
   qui glisse 4,6 s puis se pose : aucun bouton, aucun mouvement au-delà de 5 s (WCAG 2.2.2).
   Sans script ou en mouvement réduit : le mur reste incliné et fixe. */
.mur { --tuile: 198px; --ecart: 15px; --haut-case: calc(var(--tuile) * 1.25);
  position: relative; height: 300px; overflow: hidden; background: #f1efee; }
.mur-scene { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 0%; }
.mur-plan { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(46deg) rotateZ(-34deg) scale(.6667); }
.mur-piste { display: flex; flex-direction: column; will-change: transform; }
.mur-grille { display: grid; grid-template-columns: repeat(6, var(--tuile)); gap: var(--ecart); padding-bottom: var(--ecart); }
.mur-case { position: relative; height: var(--haut-case); border-radius: 15px; overflow: hidden; background: #dedad8;
  box-shadow: 0 28px 44px -26px rgba(16, 16, 16, .6); }
.mur-case:nth-child(even) { transform: translateY(calc((var(--haut-case) + var(--ecart)) / 2)); }
.mur-case picture, .mur-case img { display: block; width: 100%; height: 100%; }
.mur-case img { object-fit: cover; object-position: 50% 35%; }
/* Voile : les bords du mur se fondent dans le fond de la page, le centre reste net. */
.mur::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--light) 0, rgba(252, 252, 252, 0) 14%, rgba(252, 252, 252, 0) 86%, var(--light) 100%); }
.js .mur-piste { animation: mur-glisse 48s linear infinite; animation-play-state: paused; }
.mur[data-actif="1"] .mur-piste { animation-play-state: running; }
@keyframes mur-glisse { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -33.3333%, 0); } }
@keyframes mur-pose { from { transform: translate3d(0, 14%, 0); } to { transform: translate3d(0, 0, 0); } }
.mur .mur-pause { position: absolute; z-index: 3; bottom: 20px; right: 20px; box-shadow: 0 6px 18px -8px rgba(16, 16, 16, .5); }
@media (prefers-reduced-motion: reduce) { .js .mur-piste { animation: none !important; } }

/* Téléphone et tablette : le mur ouvre le héros, puis pastille, titre, sous-titre, bouton, preuve et logos. */
@media (max-width: 1023.98px) {
  .heros { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0; }
  .mur { order: 0; align-self: stretch; margin: 0 calc(-1 * var(--marge)); height: 300px; }
  .mur .mur-pause { display: none; }
  .mur-grille:not(:nth-child(2)) { display: none; }
  .mur-grille { padding-bottom: 0; }
  .js .mur-piste { animation: mur-pose 4.6s cubic-bezier(.16, .84, .3, 1) both; animation-play-state: paused; }
  .mur::after { background:
    linear-gradient(180deg, rgba(252, 252, 252, .35) 0, rgba(252, 252, 252, 0) 12%, rgba(252, 252, 252, 0) 64%, var(--light) 100%),
    linear-gradient(90deg, var(--light) 0, rgba(252, 252, 252, 0) 9%, rgba(252, 252, 252, 0) 91%, var(--light) 100%); }
  .heros .pastille { order: 1; position: relative; z-index: 2; margin-top: -18px; }
  .heros h1 { order: 2; } .heros .sous-titre { order: 3; }
  .heros-appel { display: contents; }
  .heros-appel .btn { order: 4; margin-top: 20px; }
  .heros-preuve { order: 6; margin-top: 18px; }
}
@media (max-width: 699.98px) {
  .heros { padding-bottom: 44px; }
  .mur { --tuile: 216px; --ecart: 15px; height: 184px; }
  .mur-grille { grid-template-columns: repeat(4, var(--tuile)); }
  .mur-case:nth-child(n+13) { display: none; }
  .mur-plan { transform: translate(-50%, -50%) rotateX(38deg) rotateZ(-28deg) scale(.6667); }
  .heros .pastille { font-size: 14px; padding: 2px 12px 2px 4px; gap: 8px; margin-top: -16px; }
  .heros h1 { margin-top: 12px; font-size: clamp(38px, 10.6vw, 64px); }
  .heros .sous-titre { margin-top: 8px; font-size: 16px; line-height: 1.4; }
  .heros-appel .btn { min-height: 50px; margin-top: 14px; }
  .heros-preuve { margin-top: 12px; gap: 8px; }
  .preuve { font-size: 15px; }
  .heros-logos { gap: 12px; font-size: 18px; }
  .heros-logos img { height: 36px; }
}
@media (min-width: 700px) and (max-width: 1023.98px) {
  .mur { --tuile: 230px; --ecart: 18px; height: 340px; }
  .heros .pastille { margin-top: -18px; }
}

/* Ordinateur : texte à plat devant, mur incliné à droite, sur toute la hauteur du premier écran (le titre de la
   section suivante n'est jamais coupé au bas de l'écran). */
@media (min-width: 1024px) {
  .heros { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    min-height: clamp(640px, calc(100vh - 73px), 980px); min-height: clamp(640px, calc(100svh - 73px), 980px);
    padding-top: 40px; padding-bottom: 56px; overflow: hidden; }
  .heros > :not(.mur) { position: relative; z-index: 2; }
  .heros .sous-titre { max-width: 20em; }
  .heros-preuve { max-width: 16em; }
  .mur { --tuile: 354px; --ecart: 27px; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 47%; height: auto; margin: 0;
    background: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 10%, #000 36%); mask-image: linear-gradient(90deg, transparent 0, transparent 10%, #000 36%); }
  .mur-scene { perspective: 1300px; perspective-origin: 40% 0%; }
  .mur-plan { transform: translate(-46%, -50%) rotateX(42deg) rotateZ(-34deg) scale(.6667); }
  .mur::after { background: linear-gradient(180deg, var(--light) 0, rgba(252, 252, 252, 0) 10%, rgba(252, 252, 252, 0) 90%, var(--light) 100%); }
}

/* Bloc 2 : la phrase, puis les cinq mots en liste typographique. */
.phrase { font: 600 var(--h2)/1.1 Geist, "Geist Repli", sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
.mots { margin-top: 24px; padding-top: 24px; border-top: 2px solid transparent; border-image: var(--degrade) 1;
  font: 600 clamp(22px, 2.6vw, 36px)/1.3 Geist, "Geist Repli", sans-serif; letter-spacing: -0.025em; color: var(--gray-dk); }
.mots span:not(.barre) { white-space: nowrap; }
.mots .barre { color: var(--crimson); }

/* Bloc 3 : un carrousel de 6 photos par événement, feuilleté par le visiteur, comme sur Instagram. Défilement natif à
   aimantation : la photo suit le doigt, une photo à la fois, un geste vertical fait toujours défiler la page. Flèches
   et points sous la photo. Avec une souris (survol possible) : photos superposées, feuilletées par la position du
   pointeur, sans flèches ni points. Aucun fondu automatique. Sans JavaScript : la rangée défile quand même, la photo
   suivante dépasse au bord. */
.titre-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.titre-bloc { font: 600 var(--h2)/1.05 Geist, "Geist Repli", sans-serif; letter-spacing: -0.035em; }
.pause { flex: none; position: relative; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--filet);
  background: var(--light); color: var(--dark); cursor: pointer; display: grid; place-items: center; }
.pause:hover { border-color: var(--dark); }
.pause-icone { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.pause[aria-pressed="true"] .pause-icone { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor; }
html:not(.js) .pause { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .pause { visibility: hidden; } }

.cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 48px; }
@media (min-width: 560px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; } }
@media (min-width: 1024px) { .cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; } }
.planche { position: relative; }
.cadre-photos { display: flex; gap: 8px; aspect-ratio: 4 / 5; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; border-radius: var(--rayon); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cadre-photos::-webkit-scrollbar { display: none; }
.cadre-photos noscript { display: contents; }
.ph { display: block; flex: 0 0 88%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  border-radius: var(--rayon); background: #ececec; }
.ph img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.js .cadre-photos { gap: 0; background: #ececec; cursor: zoom-in; }
.js .ph { flex-basis: 100%; border-radius: 0; }
.ph img[data-src] { opacity: 0; }
.ph img { transition: opacity 300ms var(--courbe); }
@media (hover: hover) and (pointer: fine) {
  .js .cadre-photos { position: relative; overflow: hidden; scroll-snap-type: none; }
  .js .ph { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms var(--courbe); }
  .js .ph.vue { opacity: 1; }
  .js .defile { display: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .js .ph { transition: none; }
}
.cadre-photos:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
/* Agrandir : bouton du clavier et de la souris ; au doigt, un toucher sur la photo ouvre la visionneuse. */
.agrandir { position: absolute; z-index: 4; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(16, 16, 16, .55); color: #fff; cursor: zoom-in;
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--courbe); }
.agrandir svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agrandir:focus-visible { opacity: 1; pointer-events: auto; outline-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .planche:hover .agrandir { opacity: 1; pointer-events: auto; }
  .agrandir:hover { background: rgba(16, 16, 16, .8); }
}
/* Au doigt, comme Instagram : flèches sur la photo, une à chaque bord, centrées en hauteur (cadre en 4/5 : son milieu
   est à 62,5 % de la largeur, d'où la marge haute en pourcentage) ; points seuls, centrés sous la photo. */
.defile { display: flex; align-items: center; justify-content: center; min-height: 20px; margin-top: 10px; }
html:not(.js) .defile { display: none; }
.fleche { position: absolute; z-index: 3; top: 0; margin-top: calc(62.5% - 22px); display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); color: var(--dark); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .16); transition: opacity 200ms var(--courbe); }
.fleche[data-prec] { left: 8px; }
.fleche[data-suiv] { right: 8px; }
.fleche svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fleche:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.fleche[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.a-devoiler:not(.devoilee) .fleche { opacity: 0; }
.points { display: flex; align-items: center; justify-content: center; gap: 6px; }
.points i { width: 6px; height: 6px; border-radius: 999px; background: #c9c9c9; transition: transform 200ms var(--courbe), background-color 200ms var(--courbe); }
.points i.actuel { background: var(--crimson); transform: scale(1.33); }
/* Dévoilement au défilement, du bas vers le haut, une seule fois (jamais au premier écran, rien en mouvement réduit). */
.a-devoiler .cadre-photos { clip-path: inset(100% 0 0 0); }
.a-devoiler.devoilee .cadre-photos { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--courbe); }
@media (min-width: 1024px) {
  .carte:nth-child(2) .devoilee .cadre-photos { transition-delay: 80ms; }
  .carte:nth-child(3) .devoilee .cadre-photos { transition-delay: 160ms; }
  .carte:nth-child(4) .devoilee .cadre-photos { transition-delay: 240ms; }
}
.carte h3 { margin-top: 12px; font: 600 var(--h3)/1.15 Geist, "Geist Repli", sans-serif; letter-spacing: -0.03em; }
.carte-logo { display: flex; align-items: center; gap: 12px; min-height: 72px; }
.carte h3.carte-logo { margin-top: 16px; font-size: clamp(28px, 2.4vw, 32px); }
.pour-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.carte-logo img { flex: none; width: 56px; height: 56px; }
.carte-logo img.logo-mot { width: min(216px, 100%); height: auto; aspect-ratio: 3 / 1; }
.carte p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--gray-dk); }

/* Visionneuse plein écran : fond #050505, barre du dégradé, boutons neutres de 44 px. */
.vis { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #050505; color: #fcfcfc; overflow: hidden; overscroll-behavior: contain; }
.vis::backdrop { background: transparent; }
.vis[open] { display: block; }
html.vis-ouverte { overflow: hidden; }
.vis-haut { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 12px 12px 20px; padding-top: max(12px, env(safe-area-inset-top)); }
.vis-titre { font: 600 16px/1.3 Geist, "Geist Repli", sans-serif; color: #fcfcfc; font-variant-numeric: tabular-nums; }
.vis-sep, .vis-num { color: #b3b3b3; }
.vis-barre { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, .12); }
.vis-barre i { position: absolute; inset: 0; background: var(--degrade); transform-origin: left; transform: scaleX(0); transition: transform 300ms var(--courbe); }
.vis-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(16, 16, 16, .72); color: #fcfcfc; cursor: pointer; }
.vis-btn:hover { border-color: rgba(255, 255, 255, .6); }
.vis-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vis :focus-visible { outline-color: #fcfcfc; }
.vis-prec, .vis-suiv { position: absolute; z-index: 3; top: 50%; margin-top: -22px; }
.vis-prec { left: 16px; } .vis-suiv { right: 16px; }
@media (max-width: 699.98px) { .vis-prec, .vis-suiv { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); margin-top: 0; } .vis-prec { left: calc(50% - 56px); } .vis-suiv { right: calc(50% - 56px); } }
.vis-scene { position: absolute; inset: 68px 0 80px; touch-action: none; user-select: none; -webkit-user-select: none; }
@media (min-width: 700px) { .vis-scene { inset: 68px 80px 32px; } }
.vis-diapo { position: absolute; inset: 0; display: grid; place-items: center; }
.vis-diapo img { max-width: min(100%, 1200px); max-height: 100%; width: auto; height: auto; border-radius: 6px; background: #161616;
  -webkit-user-drag: none; }
.vis-diapo img.attend { opacity: 0; }
.vis-diapo img.prete { opacity: 1; transition: opacity 200ms var(--courbe); }

/* Bloc 4 : bande de clôture à halo. */
.cloture { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 20px; border-radius: var(--rayon); background: var(--antiflash); border: 1px solid var(--filet); }
@media (min-width: 700px) { .cloture { padding: 96px 48px; } }
.cloture::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--degrade); }
.cloture-halo { position: absolute; z-index: -1; inset: 30% -10% -60%; pointer-events: none;
  background: radial-gradient(closest-side at 35% 50%, rgba(243, 78, 39, .14), transparent 70%), radial-gradient(closest-side at 65% 50%, rgba(227, 0, 64, .11), transparent 70%); }
.cloture h2 { font: 600 var(--h2)/1.05 Geist, "Geist Repli", sans-serif; letter-spacing: -0.04em; }
.cloture p { margin-top: 16px; max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--gray-dk); }
@media (min-width: 700px) { .cloture p { font-size: 20px; } }
.cloture .btn { margin-top: 32px; }

/* Pied de page commun. */
.pied { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 48px var(--marge) calc(48px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--filet); font-size: 16px; line-height: 1.5; color: var(--gray-dk); }
.pied-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; }
.pied-logo img { width: 104px; height: 40px; }
.pied-liens { display: flex; flex-direction: column; align-items: center; gap: 0; }
@media (min-width: 700px) { .pied-liens { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 24px; } }
.pied-liens a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--gray-dk); text-decoration: underline;
  text-decoration-color: var(--filet); text-underline-offset: 4px; }
.pied-liens a:hover { color: var(--dark); text-decoration-color: currentColor; }

/* Apparition douce des blocs 2 à 4 : jamais sur le premier écran, rien sans JavaScript ni en animations réduites. */
@media (prefers-reduced-motion: no-preference) {
  .anime .apparait { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--courbe), transform 600ms var(--courbe); }
  .anime .apparait.vu { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
.insecable { white-space: nowrap; }