/* Page d'accueil retenue : variante O « Pilule dans les feuilles » + itération 1 (bloc en fin de feuille).
   Menu flottant en pilule détaché des bords, pictos dessinés devant les entrées, printemps par défaut, une photo scotchée dans
   l'ouverture (tirée au sort, échangée de temps en temps), un bloc « Soutenir l'école » avant l'invitation.
   Gochi Hand (titres, menu, prénoms, dates) et Baloo 2 (texte, boutons, sous-menus). Mobile d'abord. */

@font-face { font-family: "Gochi Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/gochi-hand-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../assets/fonts/baloo-2-400-800-normal.woff2") format("woff2"); }

:root {
  --encre: #26241e;
  --encre-2: #57544a;
  --cadre: #fff;
  --fond: #fdfbf7;
  --bloc: var(--teinte);
  --ligne: #e3ddd1;
  /* forêt : vert sapin pour les boutons et liens (AA), sapin sombre pour le pied de page */
  --sapin: #1f4d2e;
  --sapin-fonce: #163a22;
  /* saison : accent (bloc d'invitation, dates), teinte (blocs pâles), deux couleurs de feuilles (f1 foncée, f2 claire) */
  --accent: #3f7320;
  --accent-fonce: #315a18;
  --teinte: #e6eddb;
  --f1: #669900;
  --f2: #b5d64a;
  --gutter: 1.25rem;
  --col: 70rem;
  --header-h: 3.75rem;
  --header-c: 3rem;
  --logo-h: 44px;
  --logo-c: 34px;
  --thumb-h: 4.6rem;
  --trans-h: clamp(2.6rem, 5.5vw, 5rem);
  --font-body: "Baloo 2", "Segoe UI", Arial, sans-serif;
  --font-display: "Gochi Hand", "Comic Sans MS", cursive;
}
html:has(#saison-hiver:checked)     { --accent: #2e5f7a; --accent-fonce: #234a60; --teinte: #e3ebf0; --f1: #5b93b8; --f2: #b4cfe0; }
html:has(#saison-automne:checked)   { --accent: #9a4318; --accent-fonce: #7a3410; --teinte: #f3e6db; --f1: #c8552b; --f2: #e8a33a; }
html:has(#saison-ete:checked)       { --accent: #8a5a05; --accent-fonce: #6e4704; --teinte: #f4ead3; --f1: #7fa83a; --f2: #f2c436; }
html:has(#trans-courbe:checked)    { --trans-h: clamp(2.5rem, 6vw, 5.5rem); }
html:has(#trans-vagues:checked)    { --trans-h: clamp(3rem, 7vw, 6.5rem); }
html:has(#trans-dechire:checked)   { --trans-h: clamp(1.4rem, 2.4vw, 2.2rem); }
html:has(#trans-feuillage:checked) { --trans-h: clamp(2.6rem, 5.5vw, 5rem); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-c) + 1rem); }
html.menu-open { overflow: hidden; }
html.menu-open .demo, html.menu-open .thumb-bar { display: none; }

body { margin: 0; position: relative; padding-top: var(--header-h); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--encre); background: var(--fond); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0 0 .45em; letter-spacing: .01em; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.3rem); }
h3 { font-size: 1.7rem; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: var(--sapin); text-underline-offset: .18em; text-decoration-thickness: .1em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.hero a:focus-visible, .visite a:focus-visible, .footer a:focus-visible { outline-color: #fff; }
input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--encre); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { top: 1rem; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.a-confirmer { color: var(--encre-2); font-style: italic; font-size: .95em; }
.link { font-weight: 700; }
.note { margin: 0; color: var(--encre-2); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 5rem; pointer-events: none; }

/* Mots surlignés au marqueur : un trait de la couleur claire de saison derrière le texte, qui se dessine de gauche à droite */
/* en fond de texte (et non en pseudo-élément) pour suivre chaque ligne quand le titre se replie ; la largeur du fond s'anime */
.marque { --marque-c: color-mix(in srgb, var(--f2) 62%, transparent); background: linear-gradient(transparent 58%, var(--marque-c) 58%, var(--marque-c) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .15em; margin: 0 -.15em; }
/* Pas d'inline-block : sa largeur « au plus juste » est mesurée trop étroite par certains navigateurs (Brave) et le titre se replie */
.titre { display: block; }
.section-head .titre { flex: 1 1 auto; }

/* Boutons : pilule vert sapin, soulèvement au survol */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.6rem; background: var(--sapin); color: #fff; text-decoration: none; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 1.08rem; line-height: 1.2; box-shadow: 0 1px 0 rgba(38,36,30,.15); transition: transform .2s, box-shadow .2s, background-color .2s; }
.btn:hover { background: var(--sapin-fonce); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(38,36,30,.22); }
.btn--big { font-size: 1.18rem; padding: .9rem 2rem; }
.btn--inverse { background: var(--cadre); color: var(--sapin); }
.btn--inverse:hover { background: #fff; color: var(--encre); }

/* Transitions entre les blocs (round 3) ; feuillage par défaut */
.trans { position: absolute; left: 0; right: 0; height: var(--trans-h); overflow: hidden; pointer-events: none; }
.trans--haut { bottom: calc(100% - 1px); }
.trans--bas { top: calc(100% - 1px); transform: scaleY(-1); }
.trans--hero { bottom: -1px; height: calc(var(--trans-h) + 1px); color: var(--fond); z-index: 4; }
.trans svg { display: none; position: absolute; left: 0; bottom: 0; height: 100%; }
html:has(#trans-courbe:checked)    .trans svg.t-courbe    { display: block; width: 100%; }
html:has(#trans-vagues:checked)    .trans svg.t-vagues    { display: block; width: max(100%, 1000px); }
html:has(#trans-dechire:checked)   .trans svg.t-dechire   { display: block; width: max(100%, 1920px); }
html:has(#trans-feuillage:checked) .trans svg.t-feuillage { display: block; width: max(100%, 1920px); }

/* En-tête fixe */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--fond); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.header.is-compact { border-bottom-color: var(--ligne); box-shadow: 0 2px 14px rgba(38,36,30,.1); }
.header__in { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: height .25s; }
.header.is-compact .header__in { height: var(--header-c); }
.logo { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.logo img { height: var(--logo-h); width: auto; transition: height .25s; }
.header.is-compact .logo img { height: var(--logo-c); }
.menu-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; min-width: 44px; padding: .4rem .9rem; background: transparent; border: 2px solid var(--encre); border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--encre); cursor: pointer; }
.menu-btn .ico-close { display: none; }
.menu-btn[aria-expanded="true"] .ico-open { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: block; }
.logo, .menu-btn { position: relative; z-index: 41; }

/* Menu mobile : items au marqueur, grands ; sous-items en Baloo */
.nav { display: none; }
.nav.is-open { display: block; position: fixed; inset: 0; z-index: 39; overflow-y: auto; background: var(--fond); padding: calc(var(--header-h) + 1rem) var(--gutter) 3rem; }
.nav__list, .nav__list ul { list-style: none; margin: 0; padding: 0; }
.nav__list > li { border-bottom: 2px solid var(--ligne); }
.nav__list a { display: flex; align-items: center; min-height: 52px; text-decoration: none; color: var(--encre); font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .01em; }
.nav__list li ul { padding-bottom: .5rem; }
.nav__list li ul a { padding-left: 1.5rem; min-height: 44px; font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; }
.nav__cta { border: 0 !important; padding-top: 1.25rem; }
.nav__cta .btn { color: #fff; width: 100%; font-family: var(--font-body); font-size: 1.08rem; }

@media (min-width: 60em) {
  :root { --header-h: 5.25rem; --header-c: 3.75rem; --logo-h: 58px; --logo-c: 42px; --thumb-h: 0rem; }
  .menu-btn { display: none; }
  .nav { display: block; }
  .nav__list { display: flex; align-items: center; gap: .1rem; }
  .nav__list > li { border: 0; position: relative; }
  .nav__list > li > a { position: relative; z-index: 0; min-height: 44px; white-space: nowrap; padding: 0 .8rem; font-size: 1.35rem; }
  .nav__list > li.has-sub > a::after { content: ""; width: .38em; height: .38em; margin-left: .4em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.2em) rotate(45deg); flex-shrink: 0; }
  /* survol et page courante : trait de marqueur derrière l'item */
  .nav__list > li > a::before { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 6px; height: .5em; z-index: -1; background: var(--f2); opacity: .6; -webkit-mask: url("../assets/img/doodles/trait-marqueur.svg") no-repeat center / 100% 100%; mask: url("../assets/img/doodles/trait-marqueur.svg") no-repeat center / 100% 100%; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
  .nav__list > li > a:hover::before, .nav__list > li > a:focus-visible::before, .nav__list > li:focus-within > a::before, .nav__list > li > a[aria-current="page"]::before { transform: scaleX(1); }
  .nav__list li ul { position: absolute; top: calc(100% + .3rem); left: 0; min-width: 16rem; display: none; padding: .6rem 0; background: var(--cadre); border: 1px solid var(--ligne); border-radius: 1rem; box-shadow: 0 12px 30px rgba(38,36,30,.16); }
  .nav__list li:hover > ul, .nav__list li:focus-within > ul { display: block; }
  .nav__list li ul a { padding: .25rem 1.1rem; font-size: 1.05rem; }
  .nav__list li ul a:hover, .nav__list li ul a:focus-visible { background: var(--teinte); }
  .nav__cta { padding: 0; margin-left: .6rem; }
  .nav__cta .btn { width: auto; white-space: nowrap; }
}

/* Barre pouce (mobile) */
.thumb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fond) 94%, transparent); border-top: 1px solid var(--ligne); backdrop-filter: blur(6px); transition: transform .25s; }
.thumb-bar .btn { width: 100%; }
html.hero-cta-visible .thumb-bar { transform: translateY(110%); }
main { padding-bottom: 5rem; }
@media (min-width: 60em) { .thumb-bar { display: none; } main { padding-bottom: 0; } }

/* Pastille de démo */
.demo { position: fixed; left: .75rem; bottom: calc(4.9rem + env(safe-area-inset-bottom)); z-index: 26; max-width: calc(100vw - 1.5rem); background: var(--cadre); border: 1px solid var(--ligne); border-radius: 1.5rem; box-shadow: 0 2px 10px rgba(38,36,30,.16); font-size: .88rem; }
.demo[open] { border-radius: 1rem; }
.demo summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; cursor: pointer; list-style: none; color: var(--encre-2); font-weight: 700; }
.demo summary::-webkit-details-marker { display: none; }
.demo__dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--accent); }
.demo fieldset { margin: 0; padding: 0 .75rem .4rem; border: 0; border-top: 1px solid var(--ligne); }
.demo legend { float: left; width: 100%; padding: .4rem 0 0; font-size: .78rem; color: var(--encre-2); }
.demo__row { display: flex; flex-wrap: wrap; gap: 0 .25rem; clear: both; }
.demo label { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .3rem; cursor: pointer; }
.demo input { accent-color: var(--sapin); width: 1.1rem; height: 1.1rem; margin: 0; }
.demo input:checked + span { font-weight: 700; color: var(--sapin); }
@media (min-width: 60em) { .demo { bottom: 1rem; left: 1rem; } }

/* Photos scotchées : cadre blanc, ruban de la saison, légende au marqueur */
.photo { margin: 0; position: relative; }
.photo img { background: var(--cadre); padding: .45rem; box-shadow: 0 2px 6px rgba(38,36,30,.18), 0 12px 26px rgba(38,36,30,.12); transform: rotate(var(--rot, 0deg)); transition: transform .3s; }
.photo::before { content: ""; position: absolute; top: -.75rem; left: 50%; width: 6.5rem; height: 1.7rem; z-index: 2; background: var(--f1); opacity: .65; transform: translateX(-50%) rotate(-4deg); -webkit-mask: url("../assets/img/doodles/ruban.svg") no-repeat center / 100% 100%; mask: url("../assets/img/doodles/ruban.svg") no-repeat center / 100% 100%; }
.etiq { position: absolute; left: -.4rem; bottom: -.8rem; z-index: 2; padding: .15rem .7rem; background: var(--cadre); color: var(--encre); box-shadow: 0 1px 4px rgba(38,36,30,.25); transform: rotate(-3deg); font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; white-space: nowrap; }
.legende { color: var(--encre-2); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.sticker { position: absolute; pointer-events: none; z-index: 3; }

/* Ouverture : photo plein écran sous l'en-tête, texte en bas, calques de feuillage dessiné par-dessus */
.hero { position: relative; isolation: isolate; display: grid; align-items: end; overflow: hidden; height: clamp(30rem, calc(100vh - var(--header-h) - var(--thumb-h)), 46rem); height: clamp(30rem, calc(100svh - var(--header-h) - var(--thumb-h)), 46rem); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* voile plus soutenu que sur H : le titre au marqueur monte haut dans la photo (mesuré : ≥ 3:1 au pire pixel) */
.hero__veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(18,28,16,.93) 0, rgba(18,28,16,.86) 40%, rgba(18,28,16,.74) 62%, rgba(18,28,16,.6) 82%, rgba(18,28,16,.45) 100%); }
.hero__text h1, .hero__text p { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45); }
.hero__text { position: relative; z-index: 5; width: 100%; max-width: var(--col); margin: 0 auto; padding: 2rem var(--gutter) calc(1.5rem + var(--trans-h)); color: #fff; }
.hero__text h1 { color: #fff; max-width: 18ch; }
/* sur la photo, le surligné devient un trait fin sous les mots, pour garder le texte blanc lisible */
.hero__text .marque { --marque-c: var(--f2); background-image: linear-gradient(transparent 88%, var(--f2) 88%); }
.hero__text p { font-size: 1.15rem; max-width: 46ch; }
.hero__text .btn { margin-top: .25rem; }
.calque { position: absolute; inset: 0; pointer-events: none; }
.calque--3 { z-index: 1; } .calque--2 { z-index: 1; } .calque--1 { z-index: 3; }
.f { position: absolute; aspect-ratio: 1 / 1; height: auto; transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); transform-origin: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.f--1 { color: var(--f1); } .f--2 { color: var(--f2); }
.calque--3 .f { opacity: .7; } .calque--2 .f { opacity: .85; }
@media (max-width: 47.99em) { .f { --s: .6; } .calque--3, .f[data-m="hide"] { display: none; } }
@media (min-width: 60em) { .hero__text { padding-bottom: calc(2.5rem + var(--trans-h)); } }

/* Trois mots : cartes teintées, une feuille dessinée par mot */
.mots { max-width: var(--col); margin: 0 auto; padding: 2.5rem var(--gutter) 2rem; }
.mots__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.mots__list li { position: relative; padding: 1.4rem 1.4rem 1.3rem 4.6rem; background: var(--teinte); border-radius: 1.25rem; }
.mot__ico { position: absolute; left: 1.1rem; top: 1.3rem; width: 2.6rem; height: 2.6rem; color: var(--f1); transition: transform .3s; }
.mots__list li:hover .mot__ico { transform: rotate(-12deg) scale(1.1); }
.mots__list h3 { margin-bottom: .1em; }
.mots__list p { margin: 0; }
@media (min-width: 48em) { .mots { padding-top: 3rem; } .mots__list { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .mots__list li { padding: 4.6rem 1.6rem 1.5rem; } .mot__ico { left: 1.4rem; top: 1.2rem; width: 3rem; height: 3rem; } }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin-bottom: 1.25rem; }
.section-head h2 { margin: 0; }
.section-head .link { display: inline-flex; align-items: center; min-height: 44px; }

/* Actualités : flyers scotchés sur le bloc teinté bordé de feuillage */
.actus { position: relative; background: var(--bloc); color: var(--encre); padding: 1.25rem var(--gutter) 1.5rem; margin: var(--trans-h) 0; }
.actus .trans { color: var(--bloc); }
.actus > :not(.trans) { max-width: var(--col); margin-left: auto; margin-right: auto; }
.actus__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.actu a { display: grid; grid-template-columns: 5.75rem 1fr; gap: 1.1rem; align-items: start; text-decoration: none; color: inherit; min-height: 48px; }
.actu__img { position: relative; display: block; }
.actu__img::before { content: ""; position: absolute; top: -.55rem; left: 50%; width: 4rem; height: 1.2rem; z-index: 2; background: var(--f1); opacity: .65; transform: translateX(-50%) rotate(-5deg); -webkit-mask: url("../assets/img/doodles/ruban.svg") no-repeat center / 100% 100%; mask: url("../assets/img/doodles/ruban.svg") no-repeat center / 100% 100%; }
.actu img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 4px solid var(--cadre); box-shadow: 0 2px 8px rgba(38,36,30,.2); transform: rotate(-2deg); transition: transform .3s; }
.actu:nth-child(2) img { transform: rotate(1.5deg); }
.actu:nth-child(3) img { transform: rotate(-1deg); }
.actu__body { display: block; }
.actu time { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: var(--accent-fonce); margin-bottom: .15rem; }
.actu__title { display: block; font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.actu a:hover .actu__title { text-decoration: underline; text-decoration-color: var(--f1); text-decoration-thickness: .14em; }
@media (min-width: 48em) {
  .actus { padding: 1.5rem var(--gutter) 2rem; }
  .actus__list { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .actu a { grid-template-columns: 1fr; }
  .actu__img { width: 68%; margin: .5rem auto .75rem; }
  .actu__img::before { width: 5rem; height: 1.4rem; }
}

/* Équipe : portraits scotchés, prénoms au marqueur */
.equipe { max-width: var(--col); margin: 0 auto; padding: 2.5rem var(--gutter) 2.5rem; }
.equipe__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
.equipe__list li { display: grid; gap: .05rem; align-content: start; }
.portrait { position: relative; display: block; margin-bottom: .6rem; }
.portrait::before { content: ""; position: absolute; top: -.5rem; left: 50%; width: 3.6rem; height: 1.1rem; z-index: 2; background: var(--f1); opacity: .65; transform: translateX(-50%) rotate(-4deg); -webkit-mask: url("../assets/img/doodles/ruban.svg") no-repeat center / 100% 100%; mask: url("../assets/img/doodles/ruban.svg") no-repeat center / 100% 100%; }
.portrait img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; background: var(--cadre); padding: .3rem; box-shadow: 0 2px 6px rgba(38,36,30,.18); transition: transform .3s; }
.equipe__list li:nth-child(odd) img { transform: rotate(-1.5deg); }
.equipe__list li:nth-child(even) img { transform: rotate(1.5deg); }
.equipe__list strong { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1; color: var(--encre); }
.equipe__list span:not(.portrait) { font-size: .92rem; color: var(--encre-2); line-height: 1.3; }
.equipe__more { margin-top: 1.75rem; }
@media (min-width: 40em) { .equipe__list { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
@media (min-width: 60em) { .equipe__list { grid-template-columns: repeat(7, 1fr); gap: 1.1rem; } }

/* Journée : une feuille ou un soleil devant chaque moment */
.journee { max-width: var(--col); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; display: grid; gap: 3rem; }
.journee__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1.1rem; }
.journee__list li { position: relative; padding-left: 3.4rem; }
.journee__ico { position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; color: var(--f1); }
.journee__list li:nth-child(even) .journee__ico { color: var(--f2); }
.journee__list h3 { margin-bottom: .1em; font-size: 1.55rem; }
.journee__list p { margin: 0; }
.photo--journee { max-width: 17rem; --rot: 2deg; margin: 1rem auto 0; }
@media (min-width: 60em) {
  .journee { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 4rem; }
  .photo--journee { margin: 0 auto; max-width: 19rem; }
}

/* Témoignage : fiche teintée, une feuille dans le coin */
.temoignage { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.temoignage figure { position: relative; margin: 0; max-width: 42rem; padding: 1.75rem 1.5rem 1.25rem; background: var(--bloc); border-radius: 1.25rem; }
.temoignage__feuille { position: absolute; top: -1rem; right: 1.4rem; width: 3.2rem; height: 3.2rem; color: var(--f1); transform: rotate(var(--r)); }
.temoignage blockquote { margin: 0; font-size: 1.3rem; line-height: 1.4; font-weight: 500; }
.temoignage blockquote p { margin: 0 0 .75rem; }
.temoignage figcaption { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.tag-exemple { font-size: .8rem; color: var(--encre-2); border: 1px dashed var(--encre-2); padding: .1rem .5rem; border-radius: 1rem; }

/* Invitation : bloc de la couleur de saison, photo scotchée avec deux feuilles claires */
.visite { position: relative; background: var(--accent); color: #fff; padding: 1.5rem var(--gutter) 3.5rem; margin-top: var(--trans-h); }
.visite .trans { color: var(--accent); }
.visite__text, .photo--visite { max-width: var(--col); margin-left: auto; margin-right: auto; }
.visite h2 { color: #fff; }
.visite .a-confirmer { color: rgba(255,255,255,.9); }
.visite .btn { margin-top: .5rem; }
.photo--visite { max-width: 26rem; margin-top: 2.5rem; --rot: -1.5deg; }
.photo--visite::before { background: #fff; opacity: .55; }
.sticker--f1 { width: 4.6rem; height: 4.6rem; right: .2rem; top: -2rem; color: var(--f2); }
.sticker--f2 { width: 3.2rem; height: 3.2rem; left: 1rem; bottom: -1.6rem; color: #fff; opacity: .9; }
@media (min-width: 60em) {
  .visite { padding: 2.5rem var(--gutter) 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
  .visite__text { justify-self: end; width: 100%; max-width: 34rem; }
  .photo--visite { margin-top: 0; justify-self: start; width: 100%; }
}

/* Pied de page : sapin sombre */
.footer { background: var(--sapin-fonce); color: #d6dccf; font-size: .95rem; }
.footer a { color: #fff; }
.footer__in { max-width: var(--col); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem; display: grid; gap: 1.25rem; }
.footer__col p { max-width: 36ch; }
.footer__col p a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.footer__social a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; text-decoration: none; }
.footer__social a:hover span { text-decoration: underline; }
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 48em) { .footer__in { grid-template-columns: 1fr 1fr; } .footer__links { grid-column: 1 / -1; } }

/* ---- Animations ---- (mêmes portes que K : reduced-motion, #anim-off, js-anim ; état final visible sans elles ; aucune boucle) */
@keyframes parallaxe { to { transform: translateY(var(--p)); } }
@keyframes zoom-photo { to { transform: translateY(60px) scale(1.12); } }
@keyframes tomber { 0% { opacity: 0; transform: translateY(-140px) rotate(calc(var(--r, 0deg) - 60deg)) scale(var(--s, 1)); } 25% { opacity: 1; } 60% { transform: translateY(-40px) translateX(14px) rotate(calc(var(--r, 0deg) + 10deg)) scale(var(--s, 1)); } 100% { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(var(--s, 1)); } }
@keyframes surligner { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes coller { from { opacity: 0; transform: translateY(22px) scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.calque--1 { --p: -150px; } .calque--2 { --p: -90px; } .calque--3 { --p: -45px; }

@media (prefers-reduced-motion: no-preference) {
  /* arrivée : le texte monte, le trait se dessine, trois feuilles tombent une fois */
  html:not(:has(#anim-off:checked)) .hero__text > * { animation: apparaitre .6s ease-out both; }
  html:not(:has(#anim-off:checked)) .hero__text p { animation-delay: .2s; }
  html:not(:has(#anim-off:checked)) .hero__text .btn { animation-delay: .35s; }
  html:not(:has(#anim-off:checked)) .hero__text .marque { animation: surligner .7s ease-out both; animation-delay: .7s; }
  html:not(:has(#anim-off:checked)) .f--tombe { animation: tomber 1.8s cubic-bezier(.4,.1,.5,1) both; animation-delay: calc(.4s + var(--d, 0s)); }

  /* au défilement : parallaxe des calques et de la photo (scroll()), surlignés et photos qui se collent (view()) */
  @supports (animation-timeline: scroll()) {
    html:not(:has(#anim-off:checked)) .calque { animation: parallaxe linear both; animation-timeline: scroll(root); animation-range: 0 50rem; }
    html:not(:has(#anim-off:checked)) .hero__img { animation: zoom-photo linear both; animation-timeline: scroll(root); animation-range: 0 50rem; }
    html:not(:has(#anim-off:checked)) .reveal { animation: coller linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    html:not(:has(#anim-off:checked)) .titre .marque { animation: surligner linear both; animation-timeline: view(); animation-range: entry 30% entry 110%; }
  }
  @supports not (animation-timeline: scroll()) {
    html.js-anim:not(:has(#anim-off:checked)) .reveal:not(.is-in) { opacity: 0; }
    html.js-anim:not(:has(#anim-off:checked)) .reveal.is-in { animation: coller .6s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i, 0) * .08s); }
    html.js-anim:not(:has(#anim-off:checked)) .titre:not(.is-in) .marque { background-size: 0% 100%; }
    html.js-anim:not(:has(#anim-off:checked)) .titre.is-in .marque { animation: surligner .6s ease-out both; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header, .header__in, .logo img, .thumb-bar, .btn, .photo img, .actu img, .portrait img, .mot__ico, .nav__list > li > a::before, .f { transition: none; }
}

/* ---- Round 5 : changements communs ---- */

/* Photos scotchées : la photo pend à son ruban. Le pivot est le point de scotch (haut, centre) ; au survol elle se soulève
   d'un côté, le ruban ne bouge pas. Même traitement pour flyers et portraits. */
.photo img, .actu img, .portrait img { transform-origin: 50% 0; }
.photo img { transform: rotate(var(--rot, 0deg)); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.photo:hover img { transform: rotate(calc(var(--rot, 0deg) + 2.2deg)); }
.actu img, .actu:nth-child(2) img, .actu:nth-child(3) img { transform: rotate(var(--rot, 0deg)); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.actu a:hover img { transform: rotate(calc(var(--rot, 0deg) - 2.5deg)); }
.equipe__list li:nth-child(odd) { --rot: -1.5deg; } .equipe__list li:nth-child(even) { --rot: 1.5deg; }
.equipe__list li:nth-child(odd) img, .equipe__list li:nth-child(even) img { transform: rotate(var(--rot)); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.equipe__list li:hover img { transform: rotate(calc(var(--rot) + 2.5deg)); }

/* Légende attachée à la photo : étiquette scotchée sous le cadre, dans le flux (plus de calage absolu) */
.etiq { position: static; display: inline-block; max-width: calc(100% - .8rem); margin: -.35rem 0 0 .4rem; white-space: normal; transform: rotate(-2deg); transform-origin: 0 0; }
.sticker--f2 { left: auto; right: .5rem; bottom: .6rem; }
@media (min-width: 60em) { .visite { align-items: start; } .photo--visite { align-self: start; } }

/* Vie au repos : petites animations ponctuelles déclenchées par une classe idle-* (voir le planificateur en bas de page).
   Les transformées de base des feuilles (rotation --r, échelle --s) sont reprises dans chaque image clé pour ne rien déplacer. */
@keyframes idle-tomber {
  0%   { opacity: 1; transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
  18%  { transform: translate(8px, 34px) rotate(calc(var(--r, 0deg) + 28deg)) scale(var(--s, 1)); }
  48%  { opacity: 1; transform: translate(-16px, 128px) rotate(calc(var(--r, 0deg) - 26deg)) scale(var(--s, 1)); }
  78%  { opacity: .7; transform: translate(10px, 214px) rotate(calc(var(--r, 0deg) + 22deg)) scale(var(--s, 1)); }
  100% { opacity: 0; transform: translate(-4px, 280px) rotate(calc(var(--r, 0deg) + 60deg)) scale(var(--s, 1)); }
}
@keyframes idle-frisson {
  0%, 100% { transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
  22%  { transform: translate(7px, -3px) rotate(calc(var(--r, 0deg) + 7deg)) scale(var(--s, 1)); }
  52%  { transform: translate(-4px, 2px) rotate(calc(var(--r, 0deg) - 5deg)) scale(var(--s, 1)); }
  78%  { transform: translate(3px, -1px) rotate(calc(var(--r, 0deg) + 3deg)) scale(var(--s, 1)); }
}
@keyframes idle-tournoyer {
  0%   { transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
  50%  { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 180deg)) scale(var(--s, 1)); }
  100% { transform: rotate(calc(var(--r, 0deg) + 360deg)) scale(var(--s, 1)); }
}
@keyframes idle-tourner { 0%, 100% { transform: none; } 45% { transform: rotate(28deg); } 70% { transform: rotate(-6deg); } }
@keyframes idle-balancer {
  0%, 100% { transform: rotate(var(--rot, 0deg)); }
  25% { transform: rotate(calc(var(--rot, 0deg) + 2.6deg)); }
  60% { transform: rotate(calc(var(--rot, 0deg) - 1.6deg)); }
  85% { transform: rotate(calc(var(--rot, 0deg) + .6deg)); }
}
@keyframes idle-souligner { 0% { background-size: 100% 100%; } 35% { background-size: 0% 100%; } 100% { background-size: 100% 100%; } }
@keyframes idle-coucou { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(12deg); } }
@keyframes hover-fremir {
  0%, 100% { transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
  30% { transform: translate(4px, -4px) rotate(calc(var(--r, 0deg) + 9deg)) scale(var(--s, 1)); }
  65% { transform: translate(-3px, 1px) rotate(calc(var(--r, 0deg) - 6deg)) scale(var(--s, 1)); }
}
.f { transition: opacity 1.4s ease-in; }
@media (prefers-reduced-motion: no-preference) {
  html:not(:has(#anim-off:checked)) .f.idle-tomber { animation: idle-tomber 3.4s cubic-bezier(.4,.1,.6,1) both; }
  html:not(:has(#anim-off:checked)) .calque.idle-frisson .f { animation: idle-frisson 2.1s ease-in-out both; }
  html:not(:has(#anim-off:checked)) .calque.idle-frisson .f:nth-child(2n) { animation-delay: .12s; }
  html:not(:has(#anim-off:checked)) .calque.idle-frisson .f:nth-child(3n) { animation-delay: .22s; }
  html:not(:has(#anim-off:checked)) .idle-tournoyer { animation: idle-tournoyer 2.4s ease-in-out both; }
  html:not(:has(#anim-off:checked)) .mot__ico.idle-tourner { animation: idle-tourner 1.8s ease-in-out both; }
  html:not(:has(#anim-off:checked)) .photo.idle-balancer img, html:not(:has(#anim-off:checked)) .actu.idle-balancer img, html:not(:has(#anim-off:checked)) .portrait.idle-balancer img { animation: idle-balancer 2.8s ease-in-out both; }
  html:not(:has(#anim-off:checked)) .titre.idle-souligner .marque { animation: idle-souligner 1.5s ease-in-out both; }
  html:not(:has(#anim-off:checked)) .idle-coucou { animation: idle-coucou 1.6s ease-in-out both; transform-origin: 50% 100%; }
  /* Survol au pointeur fin : autocollants et feuille du témoignage (les feuilles des calques : voir l'itération 1) */
  @media (hover: hover) {
    html:not(:has(#anim-off:checked)) .sticker, html:not(:has(#anim-off:checked)) .temoignage__feuille { pointer-events: auto; }
    html:not(:has(#anim-off:checked)) .sticker:hover, html:not(:has(#anim-off:checked)) .temoignage__feuille:hover { animation: hover-fremir .9s ease-in-out; }
  }
}
.sticker--f1, .sticker--f2 { --r: var(--rs); }
.sticker--f1 { --rs: -40deg; transform: rotate(var(--rs)); } .sticker--f2 { --rs: 25deg; transform: rotate(var(--rs)); }
.temoignage__feuille { --r: -35deg; }

/* ---- Variante O ---- */
:root { --vert: #669900; --header-h: 3.5rem; --header-c: 3.5rem; --logo-h: 40px; --logo-c: 40px; --pill-top: .6rem; }
@media (min-width: 60em) { :root { --header-h: 4.25rem; --header-c: 3.5rem; --logo-h: 52px; --logo-c: 40px; } }

/* Menu en pilule flottante : détachée des bords, même fond que la page, délimitée par un filet et une ombre ; se compacte au défilement */
body { padding-top: 0; }
.header { background: transparent; border: 0; top: var(--pill-top); padding: 0 .6rem; transition: none; }
.header.is-compact { border: 0; box-shadow: none; }
.header__in { background: var(--fond); border: 1px solid var(--ligne); border-radius: 999px; box-shadow: 0 6px 22px rgba(38,36,30,.16); padding: 0 .35rem 0 .9rem; }
.header.is-compact .header__in { box-shadow: 0 4px 14px rgba(38,36,30,.18); }
.menu-btn { padding: .3rem .8rem; border-width: 2px; }
.nav.is-open { padding-top: calc(var(--header-h) + var(--pill-top) + 1.5rem); }
.nav__ico { width: 1.15em; height: 1.15em; margin-right: .45em; color: var(--vert); flex-shrink: 0; }
.nav__list li ul .nav__ico { display: none; }
.demo__dot { background: var(--vert); }
.scroll-sentinel { height: 4rem; }
@media (min-width: 60em) {
  .header__in { padding: 0 .45rem 0 1.2rem; }
  .nav__list > li > a { padding: 0 .65rem; font-size: 1.25rem; }
  .nav__list > li > a::before { left: 2.1rem; right: .5rem; background: var(--vert); opacity: .45; }
  .nav__cta .btn { min-height: 44px; padding: .55rem 1.3rem; }
  .nav__list li ul { top: calc(100% + .6rem); }
  .nav__list li ul::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
}
@media (max-width: 23em) { .header__in { --pill-left: .6rem; } .logo img, .header.is-compact .logo img { height: 36px; } }

/* Ouverture : la photo monte sous la pilule ; à droite, une seule photo scotchée (grand écran) */
.hero { height: clamp(32rem, calc(100vh - var(--thumb-h)), 50rem); height: clamp(32rem, calc(100svh - var(--thumb-h)), 50rem); }
.hero__veil { background:
  linear-gradient(to bottom, rgba(18,28,16,.5) 0, rgba(18,28,16,0) 7rem),
  linear-gradient(to top, rgba(18,28,16,.93) 0, rgba(18,28,16,.86) 40%, rgba(18,28,16,.74) 62%, rgba(18,28,16,.6) 82%, rgba(18,28,16,.45) 100%); }
.hero__text { padding-top: calc(var(--header-h) + var(--pill-top) + 1.5rem); }
.hero__polaroid { display: none; }
@media (min-width: 60em) {
  .hero__polaroid { display: block; position: absolute; z-index: 4; right: max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter) + 1rem)); bottom: calc(var(--trans-h) + 4.5rem); width: 15rem; margin: 0; --rot: 3.5deg; }
  .hero__polaroid img { padding: .55rem .55rem 2.4rem; }
  .hero__polaroid .etiq { position: absolute; left: 1.2rem; bottom: .55rem; margin: 0; transform: rotate(0); box-shadow: none; background: transparent; font-size: 1.1rem; }
  .hero__polaroid::before { background: var(--f2); opacity: .8; }
  .hero__text h1 { max-width: 17ch; }
  .hero__text p { max-width: 42ch; }
}
@media (min-width: 60em) and (max-height: 44em) { .hero__polaroid { width: 12rem; bottom: calc(var(--trans-h) + 3rem); } }

/* Soutenir l'école : fiche bordée au feutre vert, main du logo qui fait coucou de temps en temps, bouton secondaire en contour */
.soutien { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.soutien__in { position: relative; display: grid; gap: .75rem; max-width: 42rem; padding: 1.5rem 1.4rem 1.5rem; border: 2px dashed var(--vert); border-radius: 1.25rem; background: color-mix(in srgb, var(--vert) 9%, var(--fond)); }
.soutien__main { width: 3rem; height: 3.3rem; color: var(--vert); transform-origin: 50% 100%; }
.soutien h2 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); }
.soutien p { margin-bottom: 1.1em; }
.btn--don { background: transparent; color: var(--sapin); border: 2px solid var(--sapin); box-shadow: none; }
.btn--don:hover { background: var(--teinte); color: var(--sapin-fonce); }
@media (min-width: 48em) { .soutien__in { grid-template-columns: auto 1fr; align-items: start; gap: 1.5rem; padding: 1.75rem 2rem 1.75rem 1.75rem; } .soutien__main { width: 3.6rem; height: 4rem; margin-top: .4rem; } }
/* la pastille Démo descend quand la barre pouce est rangée, pour ne pas chevaucher le bouton de l'ouverture */
@media (max-width: 59.99em) { html.hero-cta-visible .demo { bottom: calc(.75rem + env(safe-area-inset-bottom)); } }

/* ---- Itération 1 (tâche 11) ---- */

/* Géométrie de la pilule : la marge intérieure droite vaut la marge haut/bas des boutons (44 px) ; boutons et pilule étant des
   pilules (999px), rayon du bouton = rayon de la pilule − marge, donc concentriques dans les deux états. En haut de page la pilule
   est plus large de 6 px par côté qu'une fois compactée ; son contenu, lui, ne bouge pas (largeur intérieure constante). */
:root { --cta-h: 44px; }
.header { --pill-pad: calc((var(--header-h) - var(--cta-h)) / 2); }
.header.is-compact { --pill-pad: calc((var(--header-c) - var(--cta-h)) / 2); }
.header__in { --pill-left: calc(var(--pill-pad) + .5rem); max-width: calc(var(--col) - 24px + 2 * var(--pill-pad)); padding: 0 var(--pill-pad) 0 var(--pill-left); justify-content: flex-start; gap: .5rem; transition: height .25s, padding .25s, max-width .25s; }
.actions { position: relative; z-index: 41; display: flex; align-items: center; margin-left: auto; flex-shrink: 0; }
.menu-btn { height: var(--cta-h); min-height: 0; margin-left: .4rem; }

/* « Faire un don » : contour vert sapin, cœur dessiné en vert du logo. Mobile : cœur seul (le nom reste lisible par les lecteurs
   d'écran). Grand écran : cœur + libellé tant que le bouton de l'ouverture est à l'écran, cœur seul ensuite. */
.don { display: inline-flex; align-items: center; height: var(--cta-h); min-width: var(--cta-h); padding: 0 calc((var(--cta-h) - 1.5rem) / 2 - 2px); border: 2px solid var(--sapin); border-radius: 999px; background: transparent; color: var(--sapin); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; line-height: 1; white-space: nowrap; transition: background-color .2s, color .2s; }
.don:hover { background: var(--teinte); color: var(--sapin-fonce); }
.don__ico { width: 1.5rem; height: 1.5rem; color: var(--vert); flex-shrink: 0; }
.don__label { display: grid; grid-template-columns: 1fr; opacity: 1; transition: grid-template-columns .35s, opacity .25s; }
.don__label > span { min-width: 0; overflow: hidden; padding: 0 .35rem 0 .45rem; transition: padding .35s; }
.visit { display: none; grid-template-columns: 1fr; margin-left: .4rem; opacity: 1; visibility: visible; transition: grid-template-columns .4s, opacity .3s, margin .4s, visibility 0s; }
.visit > .btn { min-width: 0; overflow: hidden; white-space: nowrap; height: var(--cta-h); min-height: 0; padding: 0 1.3rem; transition: padding .4s, transform .2s, box-shadow .2s, background-color .2s; }
@media (max-width: 59.99em) {
  .don .don__label, .don .don__label > span { grid-template-columns: 0fr; opacity: 0; padding: 0; }
}
@media (min-width: 60em) {
  .nav { flex: 1; min-width: 0; }
  .nav__list { justify-content: flex-start; margin-left: 0; }
  /* le menu doit tenir à côté de cœur + « Venir nous rencontrer » dès 1140 px (pilule à sa largeur maximale) : items un peu plus serrés qu'en O */
  .nav__list > li > a { padding: 0 .55rem; font-size: 1.2rem; }
  .nav__ico { width: 1.1em; height: 1.1em; margin-right: .4em; }
  .nav__cta { display: none; }
  .visit { display: grid; }
  .visit > .btn { padding: 0 1.1rem; font-size: 1.02rem; }
  .menu-btn { display: none; }
  /* avec JS : un seul bouton plein à la fois (classe hero-cta-away posée par l'IntersectionObserver du bouton de l'ouverture) */
  /* replié : aussi hors de l'ordre de tabulation (visibility), après la fin de la transition */
  html.js-anim:not(.hero-cta-away) .visit { grid-template-columns: 0fr; opacity: 0; margin-left: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, .4s; }
  html.js-anim:not(.hero-cta-away) .visit > .btn { padding: 0; }
  html.js-anim.hero-cta-away .don__label, html.js-anim.hero-cta-away .don__label > span { grid-template-columns: 0fr; opacity: 0; padding: 0; }
}
/* entre 960 et 1150 px la pilule n'a pas sa largeur maximale : menu plus petit, sans pictos */
@media (min-width: 60em) and (max-width: 71.99em) {
  .nav__list > li > a { padding: 0 .45rem; font-size: 1.1rem; }
  .nav__list > li > a > .nav__ico { display: none; }
  .nav__list > li > a::before { left: .4rem; }
}

/* Feuilles : toutes survolables, y compris sous le voile (le voile et la photo laissent passer le pointeur). Le texte d'ouverture
   garde la main là où il y a vraiment du texte ou un bouton ; ailleurs dans sa boîte, la feuille dessous reçoit le survol. */
.hero__img, .hero__veil { pointer-events: none; }
.hero__text { pointer-events: none; }
.hero__text > * { pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html:not(:has(#anim-off:checked)) .calque .f { pointer-events: auto; }
  html:not(:has(#anim-off:checked)) .calque .f:hover { animation: hover-fremir .9s ease-in-out; }
}

/* Photo scotchée de l'ouverture : le « papier » (cadre blanc + photo + légende) est l'objet qui bouge ; le ruban (::before) bouge
   à part. Vocabulaire commun au collage d'arrivée et à l'échange : le ruban se soulève, la photo part en tournant, la nouvelle
   est posée d'un peu plus haut avec un léger écrasement, puis le ruban est appuyé. */
.hero__polaroid .paper { position: relative; background: var(--cadre); padding: .55rem .55rem 2.4rem; box-shadow: 0 2px 6px rgba(38,36,30,.18), 0 12px 26px rgba(38,36,30,.12); transform: rotate(var(--rot, 0deg)); transform-origin: 50% 0; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.hero__polaroid .paper img, .hero__polaroid:hover .paper img { padding: 0; background: none; box-shadow: none; transform: none; transition: none; }
.hero__polaroid:hover .paper { transform: rotate(calc(var(--rot, 0deg) + 2.2deg)); }
.hero__polaroid .paper .etiq { left: .65rem; right: .65rem; bottom: .5rem; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes polaroid-poser {
  0%   { opacity: 0; transform: translateY(-34px) rotate(calc(var(--rot, 0deg) - 7deg)); }
  55%  { opacity: 1; transform: translateY(2px) rotate(calc(var(--rot, 0deg) + 1.5deg)); }
  75%  { transform: translateY(0) rotate(var(--rot, 0deg)) scale(1.012, .985); }
  100% { opacity: 1; transform: rotate(var(--rot, 0deg)); }
}
@keyframes tape-presser {
  0%, 60% { opacity: 0; transform: translate(-50%, -8px) rotate(-12deg) scale(1.1); }
  78%  { opacity: .8; transform: translate(-50%, 0) rotate(-4deg) scale(1.08); }
  90%  { opacity: .8; transform: translate(-50%, 1px) rotate(-4deg) scale(.96, .9); }
  100% { opacity: .8; transform: translate(-50%, 0) rotate(-4deg); }
}
@keyframes polaroid-decoller {
  0%   { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  30%  { opacity: 1; transform: translateY(3px) rotate(calc(var(--rot, 0deg) + 5deg)); }
  100% { opacity: 0; transform: translate(70px, 190px) rotate(calc(var(--rot, 0deg) + 30deg)); }
}
@keyframes tape-soulever {
  0%   { opacity: .8; transform: translate(-50%, 0) rotate(-4deg); }
  35%  { opacity: .9; transform: translate(-50%, -7px) rotate(-14deg) scale(1.04); }
  60%  { opacity: .6; transform: translate(-50%, 4px) rotate(-10deg); }
  100% { opacity: 0; transform: translate(-50%, 60px) rotate(10deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js-anim:not(:has(#anim-off:checked)) .hero__polaroid:not(.is-posed):not(.is-posing):not(.is-peeling) .paper { opacity: 0; }
  html:not(:has(#anim-off:checked)) .hero__polaroid.is-posing .paper { animation: polaroid-poser 1.1s cubic-bezier(.3,1.2,.4,1) both; }
  html:not(:has(#anim-off:checked)) .hero__polaroid.is-posing::before { animation: tape-presser 1.5s ease-out both; }
  html:not(:has(#anim-off:checked)) .hero__polaroid.is-peeling .paper { animation: polaroid-decoller 1s cubic-bezier(.5,0,.8,.4) both; }
  html:not(:has(#anim-off:checked)) .hero__polaroid.is-peeling::before { animation: tape-soulever 1s ease-in both; }
  html:not(:has(#anim-off:checked)) .hero__polaroid.idle-balancer .paper { animation: idle-balancer 2.8s ease-in-out both; }
  html:not(:has(#anim-off:checked)) .hero__polaroid.idle-balancer img { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .header__in, .don, .don__label, .don__label > span, .visit, .visit > .btn, .hero__polaroid .paper { transition: none; }
}

/* ---- Itération 2 (tâche 11) ---- */

/* Clic sur la photo de l'ouverture : bouton transparent superposé à la figure (montré par le JS), tourné comme le papier pour que
   le contour de focus suive le cadre. Au-dessus du ruban (z-index 2) : cliquer le ruban change aussi la photo. */
.polaroid__swap { position: absolute; inset: 0; z-index: 3; padding: 0; border: 0; background: transparent; cursor: pointer; transform: rotate(var(--rot, 0deg)); transform-origin: 50% 0; }
.polaroid__swap[hidden] { display: none; }
.polaroid__swap:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hero__polaroid { -webkit-user-select: none; user-select: none; }

/* Brise à l'arrivée d'une photo scotchée : pivot au ruban (transform-origin déjà posé), 1 à 3 oscillations amorties autour de la
   rotation de base ; amplitude, durée, délai et sens tirés au sort par le JS (--sway-*) ; fill backwards seulement, pour rendre la
   main au survol une fois finie. Pas sur la photo de l'ouverture (elle a son collage). */
@keyframes sway-1 {
  0%, 100% { transform: rotate(var(--rot, 0deg)); }
  40% { transform: rotate(calc(var(--rot, 0deg) + var(--sway-dir, 1) * var(--sway-amp, 2deg))); }
  78% { transform: rotate(calc(var(--rot, 0deg) - var(--sway-dir, 1) * var(--sway-amp, 2deg) * .35)); }
}
@keyframes sway-2 {
  0%, 100% { transform: rotate(var(--rot, 0deg)); }
  22% { transform: rotate(calc(var(--rot, 0deg) + var(--sway-dir, 1) * var(--sway-amp, 2deg))); }
  48% { transform: rotate(calc(var(--rot, 0deg) - var(--sway-dir, 1) * var(--sway-amp, 2deg) * .55)); }
  72% { transform: rotate(calc(var(--rot, 0deg) + var(--sway-dir, 1) * var(--sway-amp, 2deg) * .25)); }
  90% { transform: rotate(calc(var(--rot, 0deg) - var(--sway-dir, 1) * var(--sway-amp, 2deg) * .08)); }
}
@keyframes sway-3 {
  0%, 100% { transform: rotate(var(--rot, 0deg)); }
  15% { transform: rotate(calc(var(--rot, 0deg) + var(--sway-dir, 1) * var(--sway-amp, 2deg))); }
  32% { transform: rotate(calc(var(--rot, 0deg) - var(--sway-dir, 1) * var(--sway-amp, 2deg) * .6)); }
  50% { transform: rotate(calc(var(--rot, 0deg) + var(--sway-dir, 1) * var(--sway-amp, 2deg) * .35)); }
  68% { transform: rotate(calc(var(--rot, 0deg) - var(--sway-dir, 1) * var(--sway-amp, 2deg) * .18)); }
  85% { transform: rotate(calc(var(--rot, 0deg) + var(--sway-dir, 1) * var(--sway-amp, 2deg) * .07)); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(:has(#anim-off:checked)) .is-swaying[data-sway="1"] img { animation: sway-1 var(--sway-dur, 1.6s) ease-in-out var(--sway-delay, 0s) backwards; }
  html:not(:has(#anim-off:checked)) .is-swaying[data-sway="2"] img { animation: sway-2 var(--sway-dur, 1.6s) ease-in-out var(--sway-delay, 0s) backwards; }
  html:not(:has(#anim-off:checked)) .is-swaying[data-sway="3"] img { animation: sway-3 var(--sway-dur, 1.6s) ease-in-out var(--sway-delay, 0s) backwards; }
}