/* ==========================================================================
   Éducatrice & Coco : la corde à linge des œuvres (direction choisie par Mathieu, 12 novembre 2026)

   La base vient du gabarit site normal. Les couleurs, les polices et les formes du site sont dans
   les jetons ci-dessous et dans le bloc « Éducatrice & Coco », en bas de cette feuille.

   Échelle des z-index (ne pas improviser d'autres valeurs) :
     38   bouton d'action collant (téléphone et tablette)
     39   menu mobile plein écran
     40   barre de navigation collante
     55   traînée derrière le curseur (module trainee)
     60   grain fixe (si utilisé)
     100  lien d'évitement
     (les <dialog> vivent dans la couche supérieure du navigateur)
   ========================================================================== */

/* ---------- Jetons ---------- */
:root {
  /* Clair seulement : l'aquarelle pastel sur papier est l'image du site. En sombre, elle se perdait. */
  color-scheme: light;

  --bg: #F2F7F6;              /* fond de page : blanc d'eau, un rien de vert */
  --bg-2: #E4EEEC;            /* fond de section teintée */
  --surface: #FDFEFE;         /* cartes */
  --ink: #22344F;             /* texte principal : bleu d'encre */
  --ink-2: #3A4C68;           /* texte secondaire */
  --ink-3: #52637D;           /* aides, légendes (min. 4,5:1 sur --surface) */
  --line: rgba(34, 52, 79, 0.12);
  --line-strong: rgba(34, 52, 79, 0.24);
  --field-border: rgba(34, 52, 79, 0.62);   /* contour des champs : au moins 3:1 contre la carte */
  --tint: rgba(34, 52, 79, 0.07);
  --tint-strong: rgba(34, 52, 79, 0.13);

  --brand: #22344F;
  --brand-soft: #F3B9C2;      /* version claire pour texte et focus sur fond profond */
  --deep: #22344F;            /* blocs de fond profond */
  --deep-2: #16233A;
  --on-green: #F2F7F6;        /* texte sur fond profond */
  --on-green-2: rgba(242, 247, 246, 0.8);
  --accent-text: #22344F;

  --btn-bg: var(--brand);
  --btn-bg-hover: #16233A;
  --btn-fg: #FDFEFE;
  --focus: var(--brand);

  --error: #A3303F;
  --error-bg: #FBE9EC;
  --shadow-rgb: 34, 52, 79;

  /* Ses pastels, relevés sur les cadres de ses cartes des nombres : les seules couleurs du site */
  --rose: #F3B9C2;
  --peche: #F8D9A8;
  --jaune: #F7E08E;
  --vert: #BFE0B8;
  --bleu: #B4D6EC;
  --lilas: #D0BCE3;
  --ficelle: #B89A72;
  /* Le papier des feuilles reste blanc et son encre foncée, en clair comme en sombre */
  --papier: #FDFEFE;
  --papier-encre: #22344F;
  --papier-encre-2: #3A4C68;

  --r-lg: 6px;   /* feuilles de papier : petits coins */
  --r-md: 6px;
  --r-sm: 8px;   /* champs */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Durées : un seul langage de mouvement */
  --t-fast: 180ms;   /* retours de survol et de focus */
  --t-base: 280ms;   /* changements d'état (cartes, menu, fiche) */
  --t-slow: 700ms;   /* zooms de photos, grandes apparitions */

  --font-display: "Gabarito", system-ui, "Segoe UI", sans-serif;
  --font-body: "Gabarito", system-ui, "Segoe UI", sans-serif;
  --font-main: "Gochi Hand", "Segoe Print", cursive;   /* étiquettes écrites à la main, sous les feuilles */

  /* Petites tailles de texte, nommées par usage : jamais une taille écrite à la main entre les deux */
  --text-fine: .85rem;    /* petits caractères : aide et erreurs des champs, consentement, bas de page */
  --text-label: .9rem;    /* étiquettes : puces, badges, méta, indices, numéros d'étape */
  --text-small: .95rem;   /* texte secondaire : liens de la barre, libellés, petits boutons, légendes */

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --nav-h: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--brand) var(--bg-2);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
/* Un lien avec une icône : seul le texte est souligné, jamais l'icône. Le soulignement d'un lien ne
   descend pas dans une boîte en ligne (inline-block) : c'est ce qui l'arrête sous le dessin. */
a .ph::before { display: inline-block; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--ink); }
input, textarea, select { caret-color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur un fond foncé, un site passe l'anneau en version claire (--brand-soft) */


.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  padding: .6rem 1rem;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .75rem; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }   /* taste-skill-ignore : repère invisible, pas un filet */

/* ---------- Boutons ---------- */
/* Le fonctionnement seulement : la forme du bouton se décide par site */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .6rem 1.25rem;
  border-radius: var(--r-sm); border: 0;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn__label { line-height: 1.2; text-align: start; }
.btn__icon { flex: none; display: grid; place-items: center; font-size: 1.1rem; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
@media (hover: hover) { .btn--primary:hover { background: var(--btn-bg-hover); } }
.btn--sm { min-height: 44px; padding: .4rem 1rem; font-size: var(--text-small); }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .72; cursor: progress; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  transition: background var(--t-base) var(--ease);
}
.nav.is-scrolled { background: var(--bg); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1;
}
.brand picture { display: contents; }
.brand__mark { width: 44px; height: 44px; object-fit: contain; flex: none; }
.nav__links { display: flex; gap: .15rem; }
.nav__links a {
  text-decoration: none; padding: .7rem .95rem;
  color: var(--ink-2); font-weight: 500; font-size: var(--text-small); line-height: 1.4;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__links a.is-active { color: var(--ink); background: var(--tint); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); background: var(--tint); } }
.nav__toggle {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px;
  border: 0; background: var(--tint); cursor: pointer;
}
.nav__burger { position: relative; display: block; width: 18px; height: 12px; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform var(--t-base) var(--ease-soft);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
/* Seuil du menu. Avec le contenu d'exemple, la barre complète (nom, liens, bouton) demande 1 008 px.
   À remesurer avec le nom et les liens du client, et à reporter dans js/main.js (même valeur plus 1). */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
}

/* Menu mobile plein écran : il défile quand il dépasse l'écran (zoom 200 %, téléphone couché) */
.menu {
  position: fixed; inset: 0; z-index: 39;
  padding-top: var(--nav-h);
  overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__inner { display: grid; gap: .25rem; padding-block: 2rem; }
.menu__inner > a:not(.btn) {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600;
  text-decoration: none; padding: .8rem 0;
}
.menu__inner > a {
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(60ms + var(--i, 0) * 50ms);
}
.menu.is-open .menu__inner > a { opacity: 1; transform: none; }
.menu__inner .btn { margin-top: 1.75rem; justify-self: start; }
body.menu-open { overflow: hidden; }
/* Menu ouvert : la barre devient opaque, sinon les liens qui défilent passent derrière le nom */
body.menu-open .nav { background: var(--bg); }

/* ---------- Contact (base du gabarit) ---------- */
.contact { padding-block: clamp(3rem, 8vw, 6rem); }
.contact__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); line-height: 1.15; }
.contact__texte > p { margin-top: 1rem; max-width: 46ch; color: var(--ink-2); }
.direct { margin-top: 1.5rem; display: grid; gap: .25rem; }
.direct p { color: var(--ink-2); }
.direct a { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.direct a i { font-size: 1.15rem; }
@media (max-width: 900px) { .contact__grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .45rem; align-content: start; }
.field label { font-weight: 600; font-size: var(--text-small); }
.field .optional { font-weight: 400; color: var(--ink-3); }
.field .hint { font-size: var(--text-fine); color: var(--ink-3); }
.field .error { display: none; font-size: var(--text-fine); font-weight: 500; color: var(--error); }
.field.is-invalid .error { display: block; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  border-radius: var(--r-sm); border: 1px solid var(--field-border);
  background: var(--bg); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
/* Un vrai contour plutôt qu'une ombre : le contraste élevé de Windows efface les ombres */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select select:invalid { color: var(--ink-3); }
.select i { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); font-size: 1.05rem; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* taste-skill-ignore : piège à robots invisible, pas un filet */
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form__alert {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--r-sm);
  background: var(--error-bg); color: var(--error); font-size: var(--text-small); font-weight: 500;
  overflow-wrap: anywhere;   /* une adresse courriel longue ne déborde pas sur un écran étroit */
  animation: rise-in var(--t-base) var(--ease);
}
.form__alert i { font-size: 1.2rem; flex: none; }
.form__consent { font-size: var(--text-fine); color: var(--ink-3); text-align: center; }
.form__success { display: grid; gap: .75rem; padding: 1rem 0; animation: rise-in .45s var(--ease); }
.form__success-icon { width: 52px; height: 52px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.5rem; background: var(--tint-strong); color: var(--accent-text); }
.form__success h3 { font-size: 1.7rem; line-height: 1.1; }
.form__success p { color: var(--ink-2); }

/* ---------- Pied de page ---------- */
.footer { padding-block: 2rem; background: var(--bg-2); font-size: var(--text-small); }
.footer__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 2rem; }
.footer__ligne p { margin-right: auto; }
.footer__ligne a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* ---------- Bouton d'action collant (téléphone et tablette) ----------
   Seulement sous le seuil du menu, là où la barre perd son bouton. Caché par défaut : le module
   « bouton mobile » de js/main.js le montre (.is-shown) quand le bouton du héros est sorti de
   l'écran, et le cache devant le formulaire et le pied de page. visibility le retire aussi du
   parcours au clavier et des lecteurs d'écran quand il est caché. */
.mobile-cta { display: none; }
@media (max-width: 1080px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg-2);
    visibility: hidden; transform: translateY(110%);
    transition: transform var(--t-base) var(--ease-soft), visibility 0s linear var(--t-base);
  }
  .mobile-cta.is-shown { visibility: visible; transform: none; transition: transform var(--t-base) var(--ease-soft), visibility 0s; }
  body.menu-open .mobile-cta { visibility: hidden; transform: translateY(110%); }
}
.mobile-cta__main { flex: 1; justify-content: space-between; }

/* ---------- Défilement amorti ----------
   js/defilement.js pose .amorti : une barre collée partirait avec la page, elle devient fixée, et le
   contenu garde sa place en dessous. Un élément collé dans la page passe par data-epingle. */
html.amorti { scroll-behavior: auto; }
html.amorti .nav { position: fixed; left: 0; right: 0; }
html.amorti #smooth-content { padding-top: var(--nav-h); }
html.amorti body [data-epingle] { position: relative; top: auto; }

/* ---------- Apparition au défilement ----------
   Animation (et non transition) : une fois jouée, elle ne laisse rien dans la cascade et
   l'élément retrouve ses propres transitions de survol. La classe .js est posée avant le premier
   affichage par js/avant-affichage.js ; sans JavaScript, ou si main.js ne démarre pas les
   apparitions dans les 3 s, tout reste visible. */
@keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .reveal:not(.is-visible) { opacity: 0; }
.js .reveal.is-visible { animation: reveal-in .8s var(--ease) calc(var(--i, 0) * 80ms) backwards; }

/* ---------- Utilitaires ---------- */
[hidden] { display: none !important; }

/* ---------- Mouvement réduit ----------
   On retire les animations décoratives mais on garde les changements d'état courts (couleur au
   survol, focus), utiles comme retour d'information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; animation: none; }
  .form__alert, .form__success { animation: none; }
  .menu, .menu__inner > a { transition: none; }
  .mobile-cta, .mobile-cta.is-shown { transform: none; transition: none; }
  .btn { transition: none; }
}

/* ---------- Impression : toute la page, une seule fois ---------- */
@media print {
  html.amorti #smooth-wrapper { position: static !important; overflow: visible !important; height: auto !important; inset: auto !important; }
  html.amorti #smooth-content { transform: none !important; padding-top: 0 !important; }
  html.amorti body { height: auto !important; }
  .nav { position: static !important; }
}

/* ==========================================================================
   Éducatrice & Coco : la corde à linge des œuvres

   Formes : celles de l'esquisse (choix de Mathieu, 12 novembre 2026). Feuilles blanches aux petits
   coins pendues un peu de travers, pinces dans ses pastels, boutons pilule foncés avec la flèche
   dans un rond rose. Un seul lavis d'aquarelle derrière l'accroche, un arc-en-ciel dans le coin.
   ========================================================================== */

body { font-size: 1.125rem; line-height: 1.55; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem); line-height: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* taste-skill-ignore : texte pour lecteurs d'écran, pas un filet */
.aquarelle-filtre { position: absolute; }

/* ---------- Boutons : pilule, la flèche dans un rond rose ---------- */
.btn { border-radius: 999px; gap: .9rem; padding: .4rem .45rem .4rem 1.5rem; min-height: 54px; font-size: 1.0625rem; }
.btn__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--rose); color: var(--papier-encre); transition: transform var(--t-fast) var(--ease-soft); }
.btn--sm { min-height: 46px; padding: .3rem .35rem .3rem 1.2rem; }
.btn--sm .btn__icon { width: 36px; height: 36px; }
@media (hover: hover) {
  .btn:hover .btn__icon { transform: translateY(2px); }
  .btn:hover .btn__icon:has(.ph-arrow-right) { transform: translateX(2px); }
}
/* ---------- Barre ---------- */
.brand { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; }
.brand__rond { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--papier); display: grid; place-items: center; }
.brand__mark { width: 40px; height: 40px; }
.nav__links a { border-radius: 999px; font-size: 1rem; }
.nav__toggle { border-radius: 50%; }

/* ---------- Accroche ---------- */
.accroche {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: calc(-1 * var(--nav-h)); padding-top: calc(var(--nav-h) + clamp(.5rem, 2vw, 1.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.lavis { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .8; }
.lavis__bleu { fill: #D7E8F2; }
.lavis__vert { fill: #E3EEDD; }
.lavis__blanc { fill: #FDFEFE; opacity: .7; }
.corde { --corde-h: clamp(48px, 8.4vw, 124px); position: relative; max-width: 1240px; margin-inline: auto; }
.corde__fil { position: absolute; top: 0; left: 0; width: 100%; height: var(--corde-h); overflow: visible; }
.corde__fil path { fill: none; stroke: var(--ficelle); stroke-width: 4; stroke-linecap: round; }
/* Au-delà de 1240 px, la corde continue tout droit jusqu'aux bords de l'écran */
.corde::before, .corde::after {
  content: ""; position: absolute; top: calc(var(--corde-h) * .2 - 2px); width: 50vw; height: 4px;
  background: var(--ficelle); border-radius: 2px;
}
.corde::before { right: 100%; }
.corde::after { left: 100%; }
.corde__rang { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; justify-items: center; }
/* Chaque feuille dit sa place sur la corde (--y) et sa largeur (--l) dans la page ; le téléphone donne les siennes */
.corde__place { --y: var(--y-large, .5); --l: var(--l-large, 100%); width: var(--l); margin-top: calc(var(--corde-h) * var(--y) + 6px); }

.feuille {
  position: relative; display: block;
  background: var(--papier); color: var(--papier-encre);
  padding: .55rem .55rem .3rem; border-radius: var(--r-lg);
  text-align: center; text-decoration: none;
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 0;
  transition: transform var(--t-base) var(--ease-soft);
}
.feuille img { width: 100%; height: auto; border-radius: 3px; }
.feuille__nom { display: block; font-family: var(--font-main); font-size: clamp(.95rem, .55rem + 1.1vw, 1.5rem); line-height: 1.25; padding: .45rem .2rem .25rem; }
.pince {
  position: absolute; left: 50%; top: -22px; z-index: 1; width: 16px; height: 46px; margin-left: -8px;
  border-radius: 4px; background: var(--p, var(--rose));
}
.pince::after { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 5px; background: rgb(34 52 79 / .28); }
@media (hover: hover) { a.feuille:hover { transform: rotate(calc(var(--r, 0deg) * -.6)); } }
a.feuille:focus-visible { outline-color: var(--focus); outline-offset: 5px; }

.accroche__bas { margin-top: clamp(3rem, 4vw, 3.25rem); }
/* Sur petit écran, le titre s'éloigne des feuilles : leur étiquette ne doit pas se lire comme une amorce du titre */
@media (max-width: 860px) { .accroche__bas { margin-top: 5.25rem; } }
/* 8,4vw : la seconde ligne du titre tient dans la largeur à toutes les tailles d'écran */
.accroche h1 { font-size: clamp(1.6rem, 8.4vw, 5.25rem); line-height: .98; letter-spacing: -0.035em; text-wrap: nowrap; }
.accroche__cote {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: min(60rem, 100% - 26vw);
}
.accroche__cote p { flex: 1 1 22rem; max-width: 31rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.45; }
.arc-en-ciel g { opacity: .8; mix-blend-mode: multiply; }
/* Leur propre calque : le filtre d'aquarelle n'est pas recalculé pendant que les feuilles se balancent */
.lavis, .arc-en-ciel, .tache { transform: translateZ(0); }
.accroche__arc { position: absolute; right: 0; bottom: 0; z-index: -1; width: clamp(150px, 25vw, 360px); height: auto; pointer-events: none; }

@media (max-width: 700px) {
  .accroche__cote { max-width: none; padding-bottom: clamp(2.5rem, 14vw, 5rem); }
  .corde { --corde-h: 15vw; }
  .corde__rang { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .corde__place--bord { display: none; }
  .corde__place { --y: .42; --l: 88%; }
  .corde__place:nth-child(3) { --y: .6; --l: 100%; }
  .feuille { padding: .35rem .35rem .15rem; }
  .pince { top: -18px; width: 13px; height: 38px; margin-left: -6.5px; }
  .pince::after { top: 14px; height: 4px; }
}

/* ---------- Les PDF : la pièce ---------- */
.pile { padding-block: var(--section); }
.pile__tete { display: grid; gap: 1rem; }
.pile__tete p { max-width: 40rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--ink-2); }
.tri { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
html:not(.corde-active) .tri, html:not(.corde-active) .tri__compte { display: none; }
.tri__bulle {
  min-height: 46px; padding: .5rem 1.15rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 1rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.tri__bulle:active { transform: scale(.97); }
.tri__bulle[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
@media (hover: hover) { .tri__bulle:not([aria-pressed="true"]):hover { background: var(--tint-strong); } }
.tri__compte { margin-top: .9rem; min-height: 1.5em; font-size: var(--text-small); color: var(--ink-3); }

.cordee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.25rem; margin-top: 2.25rem; align-items: start; }
@media (min-width: 700px) { .cordee { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 2rem; } }
@media (min-width: 1040px) { .cordee { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4rem 2.5rem; } }
.fiche { position: relative; padding-top: 26px; }
/* La corde : chaque fiche en porte un bout, qui rejoint celui de sa voisine */
.fiche::before {
  content: ""; position: absolute; top: 12px; left: -1.25rem; right: -1.25rem; height: 4px;
  background: var(--ficelle); border-radius: 2px;
}
.cordee .feuille__nom { font-size: clamp(1.1rem, .9rem + .7vw, 1.45rem); }
.feuille__info { display: flex; align-items: center; justify-content: center; gap: .45rem; padding-bottom: .35rem; font-size: var(--text-small); font-weight: 500; color: var(--papier-encre-2); }
.feuille__info i { font-size: 1.15rem; }
.feuille--bientot img { opacity: .55; }
.feuille.est-prise .pince { background: var(--papier-encre); }
.feuille.est-prise .pince::after { background: rgb(255 255 255 / .5); }
@keyframes petit-saut { 0% { transform: rotate(var(--r, 0deg)) translateY(0); } 40% { transform: rotate(var(--r, 0deg)) translateY(10px); } 100% { transform: rotate(var(--r, 0deg)) translateY(0); } }
.feuille.vient-d-etre-prise { animation: petit-saut .5s var(--ease-soft); }

/* ---------- À propos ---------- */
.apropos { padding-block: var(--section); background: var(--bg-2); }
.apropos__grille { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.apropos__rond { position: sticky; top: calc(var(--nav-h) + 2rem); aspect-ratio: 1; border-radius: 50%; background: var(--papier); display: grid; place-items: center; }
.apropos__rond img { width: 82%; height: auto; }
.apropos__texte { display: grid; gap: 1.75rem; max-width: 56rem; }
.apropos__texte p { font-size: clamp(1.3rem, 1rem + 1.3vw, 2.1rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 800px) {
  .apropos__grille { grid-template-columns: minmax(0, 1fr); }
  .apropos__rond { position: static; width: 9rem; }
}

/* ---------- Merci ---------- */
.merci { padding-block: var(--section); }
.merci h2 { font-size: clamp(3rem, 1rem + 9vw, 9rem); line-height: .92; letter-spacing: -0.045em; }
.merci__phrase { margin-top: 1.75rem; max-width: 34rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.35; }
.merci__avis { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 40rem; padding: 1.5rem 1.75rem; border-radius: var(--r-lg); background: var(--jaune); color: var(--papier-encre); rotate: -1deg; }
.merci__avis blockquote { margin: 0; }
.merci__avis blockquote p { font-family: var(--font-main); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.25; }
.merci__avis figcaption { margin-top: .9rem; font-size: var(--text-small); font-weight: 500; }
.merci__grille { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
@media (min-width: 900px) {
  .merci__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); }
  .merci__grille h2 { grid-column: 1 / -1; }
  .merci__avis { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 1.75rem; }
}
.lien-fleche { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; margin-top: 2rem; font-weight: 600; }
.lien-fleche i { font-size: 1.35rem; }

/* ---------- Boutique : un champ rose, une feuille « Bientôt » ---------- */
.boutique { padding-block: var(--section); background: #F9DDE2; color: var(--papier-encre); }
.boutique__grille { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.boutique__feuille { padding-top: 26px; }
.boutique__feuille .feuille { aspect-ratio: 3 / 4; display: grid; place-items: center; }
.boutique__mot { font-family: var(--font-main); font-size: clamp(2.6rem, 2rem + 2.5vw, 4.2rem); line-height: 1; transform: rotate(-4deg); }
.boutique__texte { display: grid; gap: 1.25rem; justify-items: start; max-width: 36rem; }
.boutique__texte p { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.boutique .btn--primary { background: var(--papier-encre); color: var(--papier); }
.boutique .btn__icon { background: var(--papier); color: var(--papier-encre); }
.boutique :focus-visible { outline-color: var(--papier-encre); }
@media (hover: hover) { .boutique .btn--primary:hover { background: #16233A; } }
@media (max-width: 800px) {
  .boutique__grille { grid-template-columns: minmax(0, 1fr); }
  .boutique__feuille { width: 11rem; }
}

/* ---------- Contact ---------- */
.contact { padding-block: var(--section); }
.contact h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem); line-height: 1; }
.contact__texte > p { margin-top: 1.25rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--ink-2); }
.contact__formulaire { background: var(--surface); padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--r-lg); }
.field label { font-size: 1rem; }
.form__success-icon { border-radius: 50%; background: var(--vert); color: var(--papier-encre); }

/* ---------- Pied de page : le nom revient en grand, sous son arc-en-ciel ---------- */
.footer { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3rem, 7vw, 6rem) 1.5rem; }
.footer__nom { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 9.4vw, 9.5rem); line-height: .95; letter-spacing: -0.045em; white-space: nowrap; }
.footer__ligne { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: calc(100% - clamp(110px, 19vw, 290px)); }
.footer__ligne p { margin-right: 0; }
.footer__arc { position: absolute; right: 0; bottom: 0; z-index: -1; width: clamp(120px, 19vw, 290px); height: auto; pointer-events: none; }
.mobile-cta__main { justify-content: space-between; }

/* ---------- Le fond : le lavis continue, les volutes de vent ----------
   Derrière chaque section, une grande tache d'aquarelle très pâle dans un de ses pastels, et à trois
   endroits les volutes de vent de son calendrier. Rien ne bouge. Tout reste derrière le texte. */
.pile, .apropos, .merci, .boutique, .contact { position: relative; isolation: isolate; overflow: clip; }
.tache { position: absolute; z-index: -1; width: clamp(300px, 58vw, 860px); height: auto; pointer-events: none; }
.tache ellipse { fill: var(--c); opacity: .38; }
.tache ellipse + ellipse { opacity: .3; }
.tache--haut-droite { top: -3rem; right: -8vw; }
.tache--droite { top: 50%; right: -10vw; translate: 0 -50%; }
.tache--bas-gauche { bottom: -2rem; left: -12vw; }
.apropos .tache ellipse { opacity: .44; }
.boutique .tache ellipse { opacity: .34; }

.volute { position: absolute; z-index: -1; width: clamp(110px, 15vw, 220px); height: auto; overflow: visible; pointer-events: none; }
.volute path { fill: none; stroke: #7FA3CC; stroke-width: 2.4; stroke-linecap: round; opacity: .75; }
.volute--haut-droite { top: clamp(1.25rem, 3vw, 3rem); right: clamp(1rem, 5vw, 5rem); }
.volute--bas-gauche { bottom: clamp(.75rem, 2.5vw, 2.5rem); left: clamp(1rem, 5vw, 5rem); }
.volute.miroir { scale: -1 1; }

/* ---------- Mouvement : les feuilles se balancent une fois, à l'arrivée ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes balance {
    0% { transform: rotate(calc(var(--r, 0deg) + 7deg)); }
    28% { transform: rotate(calc(var(--r, 0deg) - 4.5deg)); }
    52% { transform: rotate(calc(var(--r, 0deg) + 2.5deg)); }
    76% { transform: rotate(calc(var(--r, 0deg) - 1deg)); }
    100% { transform: rotate(var(--r, 0deg)); }
  }
  .corde .feuille { animation: balance 2.6s var(--ease-soft) calc(var(--i, 0) * 110ms) backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .feuille, .btn__icon, .tri__bulle { transition: none; }
  .feuille.vient-d-etre-prise { animation: none; }
}