/* Karrik · Jean-Baptiste Morizot & Lucas Le Bihan, Velvetyne · licence OFL
   Une seule graisse : la hiérarchie se fait à la taille et à la casse,
   jamais au gras (le faux-gras du navigateur casse le dessin des lettres). */
@font-face{
  font-family:"Karrik";
  src:url("../fonts/Karrik-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Karrik";
  src:url("../fonts/Karrik-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

/* ==========================================================================
   L'Atelier en Mouvement
   Habillage sobre, structure calquée sur les layouts de paris-ateliers.org :
   blocs gris clair aux coins arrondis, une seule couleur d'accent, sous-titres
   colorés, tableaux d'horaires par jour, agenda de stages, pied en colonnes.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* Palette choisie (coolors) :
   Tomato F06449 · Parchment EDE6E3 · Alabaster Grey DADAD9
   Charcoal Brown 36382E · Sky Aqua 5BC3EB
   Le tomato est réservé aux aplats et aux grands titres : en petit texte sur
   fond clair son contraste est trop faible, les petites mentions passent donc
   à l'encre. */
:root{
  --papier:#EDE6E3;      /* Parchment */
  --bloc:#E4DFDC;        /* entre le parchemin et l'alabaster */
  --bloc-2:#DADAD9;      /* Alabaster Grey */
  --encre:#36382E;       /* Charcoal Brown */
  --gris:#6C6E62;
  --trait:#C9C5C0;
  --accent:#F06449;      /* Tomato */
  --accent-fonce:#C94A31;/* même teinte, lisible en petit texte */
  --accent-clair:#FBE0D9;
  --aqua:#5BC3EB;        /* Sky Aqua */
  --aqua-clair:#CBEAF8;

  --titre:"Karrik", "Helvetica Neue", sans-serif;
  --texte:"Newsreader", Georgia, serif;

  --wrap:min(1140px, 100% - 2.5rem);
  --r:10px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* l'en-tête colle en haut : on réserve sa hauteur pour qu'un lien d'ancre
   ne dépose pas le titre de section derrière lui */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:6.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Le doigt ne doit jamais pouvoir tirer la page sur le côté : on verrouille
   le scroll horizontal en haut de l'arbre, pas seulement sur le body (Safari
   iOS ignore un overflow-x posé sur le seul body quand html reste libre). */
html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}

body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:clamp(1rem,.96rem + .22vw,1.09rem);
  line-height:1.62;font-optical-sizing:auto;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{
  position:fixed;top:.6rem;left:.6rem;z-index:99;width:auto;height:auto;clip-path:none;
  background:var(--encre);color:#fff;padding:.6rem 1rem;font-family:var(--titre);
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:var(--wrap);margin-inline:auto}
.section{padding:clamp(2.4rem,5vw,4rem) 0}
.petit{font-size:.88rem;color:var(--gris)}
.intro{max-width:66ch;color:var(--gris);margin-bottom:clamp(1.4rem,3vw,2rem)}

/* ---------- 3. Titres ---------- */
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;letter-spacing:-.015em;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);line-height:1.06}
h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.2rem);line-height:1.1}
h3{font-size:1.16rem;line-height:1.2}
h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}

/* le titre de section, avec son filet pointillé, comme sur le site de référence */
.titre-sec{
  color:var(--accent);text-transform:uppercase;font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);
  letter-spacing:.01em;display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;
}
.titre-sec::after{content:"";flex:1;height:0;border-top:1.5px dotted var(--accent);opacity:.6}

.sur{
  font-family:var(--titre);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.9em;
}
.chapo{font-size:1.1em;line-height:1.5}
/* pastille posée dans un titre : sert pour la gratuité du ciné-club */
.pastille{
  display:inline-block;vertical-align:middle;
  font-family:var(--titre);font-weight:400;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--accent);color:#fff;
  padding:.3rem .65rem;border-radius:100px;margin-left:.7rem;
  position:relative;top:-.18em;white-space:nowrap;
}

.accent-txt{
  font-family:var(--titre);font-weight:400;color:var(--accent);
  font-size:1.3rem;margin-bottom:.5em;
}

/* ---------- 3b. Le panneau d'appel, tout en haut ----------
   Le site présente un projet qui n'est pas encore financé : c'est la première
   chose à dire, avant même le nom du lieu. */
.appel-haut{background:var(--encre);color:var(--papier)}
.appel-haut__in{
  width:var(--wrap);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem 1.6rem;padding:.85rem 0;
}
.appel-haut__txt{min-width:min(100%,32ch);flex:1}
.appel-haut__titre{
  margin:0 0 .2rem;font-family:var(--titre);font-weight:400;
  font-size:clamp(.98rem,.9rem + .5vw,1.22rem);line-height:1.25;
}
.appel-haut__titre b{
  font-size:.66rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:.14rem .5rem;border-radius:3px;
  margin-right:.7rem;display:inline-block;vertical-align:middle;position:relative;top:-.12em;
}
.appel-haut__sous{
  margin:0;font-size:.88rem;line-height:1.45;color:rgba(237,230,227,.78);max-width:74ch;
}
.appel-haut__actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.btn--sur-sombre{background:var(--accent);color:#fff}
.btn--sur-sombre:hover{background:var(--papier);color:var(--encre)}
.appel-haut__lien{
  font-family:var(--titre);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(237,230,227,.8);text-decoration:none;border-bottom:1px solid rgba(237,230,227,.45);
  padding-bottom:2px;
}
.appel-haut__lien:hover{color:#fff;border-color:#fff}
/* sous 1120 px la pastille et la phrase ne tiennent plus sur la même ligne */
@media (max-width:1119px){
  .appel-haut__titre b{display:block;width:fit-content;margin:0 0 .3rem;top:0}
}

/* étiquette posée sur ce qui n'est pas encore confirmé */
.etiq{
  font-style:normal;font-family:var(--titre);font-weight:400;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--trait);border-radius:100px;
  padding:.2rem .6rem;margin-left:.7rem;white-space:nowrap;
}
.horaires caption em{
  font-style:normal;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  opacity:.75;margin-left:.7rem;border:1px solid rgba(255,255,255,.55);
  border-radius:100px;padding:.15rem .55rem;
}

/* ---------- 4. En-tête ---------- */
.tete{
  position:sticky;top:0;z-index:50;background:var(--papier);
  border-bottom:1px solid var(--trait);
}
.tete__in{
  width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:.7rem 0;
}
.logo{
  background:var(--encre);color:var(--papier);text-decoration:none;
  width:clamp(72px,6.4vw,88px);aspect-ratio:1;flex:none;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:.5rem;position:relative;border-radius:2px;
}
.logo b{
  font-family:var(--titre);font-weight:400;font-variation-settings:"wdth" 80;
  font-size:clamp(.6rem,1vw,.74rem);line-height:1.02;text-transform:uppercase;
}
.logo__barres{position:absolute;right:.5rem;bottom:.5rem;display:flex;gap:2px;align-items:flex-end}
.logo__barres span{width:3px;height:9px;background:var(--papier);display:block;opacity:.55}
.logo__barres span:nth-child(2){height:13px;background:var(--accent);opacity:1}

.burger{
  width:40px;height:34px;border:1px solid var(--encre);background:transparent;border-radius:4px;
  display:grid;place-content:center;gap:4px;padding:0;cursor:pointer;
}
.burger span{width:17px;height:1.6px;background:var(--encre);transition:.22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* Le menu se décroche du bas de l'en-tête, quelle que soit sa hauteur :
   il est posé en absolu dans .tete plutôt qu'à une distance fixe du haut
   de l'écran, sinon il se retrouve n'importe où dès que la barre change. */
.nav{
  position:absolute;left:0;right:0;top:100%;background:var(--papier);
  border-bottom:1px solid var(--trait);display:grid;
  max-height:calc(100svh - 6rem);overflow-y:auto;
  transform:translateY(-130%);visibility:hidden;
  transition:transform .32s ease, visibility 0s .32s;
}
.nav.is-open{transform:none;visibility:visible;transition:transform .32s ease}
.nav a{
  font-family:var(--titre);font-weight:400;font-size:.94rem;text-decoration:none;
  padding:.85rem clamp(1rem,4vw,2rem);border-top:1px solid var(--trait);
}
.nav a:first-child{border-top:0}
.nav__cta{background:var(--accent);color:#fff}

@media (min-width:1120px){
  .burger{display:none}
  .nav{
    position:static;transform:none;visibility:visible;transition:none;
    max-height:none;overflow:visible;
    display:flex;align-items:center;gap:.2rem;
    background:none;border:0;flex-wrap:wrap;justify-content:flex-end;
  }
  .nav a{
    font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .68rem;border:0;
  }
  .nav a:not(.nav__cta):hover{color:var(--accent-fonce)}
  .nav__cta{border-radius:4px;padding:.6rem 1rem}
  .nav__cta:hover{background:var(--encre)}
}

/* ---------- 5. Blocs de contenu ---------- */
.bloc{
  background:var(--bloc);border-radius:var(--r);
  padding:clamp(1.4rem,3.4vw,2.6rem);
}
.bloc--cote{background:var(--bloc-2)}
/* le seul bloc du site qui s'adresse à des pros et pas à des parents :
   il est teinté pour se distinguer du reste sans casser la sobriété */
.bloc--appel{background:var(--accent-clair);border:1px solid rgba(216,68,42,.28)}
.bloc--appel .sur{color:var(--accent)}

/* le seul bloc sombre du site : réservé à la séance phare, le modèle vivant */
.bloc--phare{background:var(--encre);color:var(--papier)}
.bloc--phare h2,.bloc--phare h3{color:#fff}
.bloc--phare .sur{color:var(--accent)}
.bloc--phare .petit{color:rgba(251,250,248,.62)}
.bloc--phare .lien-suite{color:#fff;border-color:var(--accent)}
.bloc--phare .lien-suite:hover{color:var(--accent)}
.pastille--clair{background:var(--papier);color:var(--encre)}
.bloc--large{max-width:none}

/* deux colonnes : contenu principal + colonne latérale */
.une{display:grid;gap:1rem;align-items:start}
@media (min-width:900px){.une{grid-template-columns:1.55fr .95fr;gap:1.2rem}}

.une__texte h1{margin-bottom:.5em}

.une__visuel{
  margin:0;background:var(--bloc-2);border-radius:var(--r);
  padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.2rem;text-align:center;
}
.une__visuel figcaption{font-size:.88rem;color:var(--gris);max-width:30ch}

/* le flipbook, seule animation du site */
.flipwin{
  width:clamp(104px,12vw,146px);aspect-ratio:104/126;overflow:hidden;
  background:#fff;border:1px solid var(--trait);border-radius:3px;
}
.flipstrip{display:flex;width:600%;height:100%;animation:flipbook .75s steps(6,end) infinite}
.flipstrip svg{width:16.6667%;height:100%;flex:none}
.flipstrip .st{fill:none;stroke:var(--encre);stroke-width:5;stroke-linecap:round}
@keyframes flipbook{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.flipstrip{animation:none}}

/* la ligne de cadrage chiffrée */
.cadrage{
  font-family:var(--titre);font-weight:400;text-transform:uppercase;
  font-size:clamp(.95rem,.85rem + .7vw,1.3rem);letter-spacing:.01em;
  margin:clamp(1.4rem,3vw,2rem) auto 0;
}
.cadrage i{font-style:normal;color:var(--accent);margin:0 .3em}

/* ============================================================
   5a. La une : le flipbook à gauche, le panneau actualités à droite
   ============================================================ */
.section--une{padding-top:clamp(1.4rem,3vw,2.2rem)}
.une-grille{display:grid;gap:1rem;align-items:start}
@media (min-width:1020px){
  .une-grille{grid-template-columns:minmax(0,1fr) 330px;gap:1.2rem;align-items:stretch}
}
.une-grille__gauche{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.une-grille__gauche .slider{flex:1}
.une-grille__gauche .slide{height:100%}
/* Chaque page du carrousel est une image plein cadre, le texte posé en bas
   sur un dégradé sombre. Le bloc n'a plus de fond ni de marge intérieure :
   c'est l'image qui remplit tout. */
.une-grille__gauche .bloc{
  position:relative;height:100%;min-height:clamp(320px,46vh,440px);
  padding:0;overflow:hidden;background:var(--encre);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.une-grille__gauche .slide__img{position:absolute;inset:0;border-radius:0;margin:0}
.une-grille__gauche .slide__img img{width:100%;height:100%;object-fit:cover}

.slide__txt{
  position:relative;z-index:2;color:var(--papier);
  padding:clamp(3rem,7vw,4.5rem) clamp(1.3rem,3vw,2.2rem) clamp(1.2rem,2.6vw,1.8rem);
  background:linear-gradient(to top,
    rgba(28,29,24,.94) 0%, rgba(28,29,24,.88) 45%, rgba(28,29,24,.5) 78%, rgba(28,29,24,0) 100%);
}
.slide__txt>*{max-width:52ch}
.slide__txt .sur{color:rgba(237,230,227,.78);margin-bottom:.5em}
.slide__txt h1,.slide__txt h2{color:#fff;margin-bottom:.4em}
.slide__txt .chapo{color:rgba(237,230,227,.92);margin-bottom:.9em}
.slide__txt .lien-suite{color:#fff;border-bottom-color:var(--accent)}
.slide__txt .lien-suite:hover{color:var(--accent)}
.slide__txt .pastille{background:var(--accent);color:#fff}

/* Chaque page du carrousel porte son image : elle occupe la colonne de gauche
   et le texte celle de droite, pour que l'ensemble tienne dans un écran. */
.slide__img{margin:0;overflow:hidden;border-radius:var(--r);background:var(--bloc-2);position:relative}
.slide__img img{width:100%;height:100%;object-fit:cover;display:block}
/* les images d'illustration se signalent, comme partout ailleurs sur le site */
.slide__img.illus::after{
  content:"Illustration";position:absolute;top:.5rem;left:.5rem;
  font-family:var(--titre);font-weight:400;font-size:.55rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--papier);background:rgba(54,56,46,.8);
  padding:.16rem .45rem;border-radius:3px;
}

/* ---- le panneau actualités ---- */
.actus{
  background:var(--aqua);border-radius:var(--r);
  padding:clamp(1.1rem,2.4vw,1.5rem);
  display:flex;flex-direction:column;
}
.actus .actus__liste{flex:1;align-content:start}
.actus__titre{
  display:inline-block;margin:0 0 1rem;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--papier);color:var(--encre);padding:.35rem .8rem;border-radius:4px;
}
.actus__liste{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.7rem}
.actus__liste li{
  border-bottom:1px dotted rgba(54,56,46,.45);padding-bottom:.7rem;
  display:grid;gap:.1rem;
}
.actus__liste li:last-child{border-bottom:0;padding-bottom:0}
.actus__cat{
  font-family:var(--titre);font-size:.6rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(54,56,46,.7);
}
.actus__liste a{
  font-family:var(--titre);font-weight:400;font-size:.94rem;line-height:1.18;
  color:var(--encre);text-decoration:none;
}
.actus__liste a::after{content:" →";font-weight:400}
.actus__liste a:hover{color:#fff}
.actus__liste li>span:last-child{font-size:.85rem;line-height:1.4;color:rgba(54,56,46,.85)}
.btn--large{display:block;text-align:center;background:var(--encre)}
.btn--large:hover{background:var(--accent)}

/* ============================================================
   5b. La une en flipbook
   Les pages sont empilées. Celle qu'on quitte s'attarde en pelure
   d'oignon, celle qui arrive se pose par pas, en trois images.
   ============================================================ */
.slider{display:grid;position:relative;align-items:stretch}
.slide{
  grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
}
/* toutes les pages occupent la hauteur de la plus longue : sans ça, les pages
   courtes laissent un grand vide blanc sous le bloc gris */
.slide>.bloc{height:100%}
.slide.is-now{
  opacity:1;visibility:visible;pointer-events:auto;z-index:2;
  animation:page-entre .3s steps(1,end);
}
.slider.recule .slide.is-now{animation-name:page-entre-inv}

@keyframes page-entre{
  0%  {transform:translate(22px,-8px) rotate(.45deg);opacity:.3}
  33% {transform:translate(12px,-4px) rotate(.25deg);opacity:.65}
  66% {transform:translate(5px,-2px);opacity:.88}
  100%{transform:none;opacity:1}
}
@keyframes page-entre-inv{
  0%  {transform:translate(-22px,8px) rotate(-.45deg);opacity:.3}
  33% {transform:translate(-12px,4px) rotate(-.25deg);opacity:.65}
  66% {transform:translate(-5px,2px);opacity:.88}
  100%{transform:none;opacity:1}
}

/* la page quittée, en fantôme, le temps du feuilletage */
.slide.is-out{
  visibility:visible;opacity:.14;z-index:1;
  transform:translate(-20px,7px) rotate(-.4deg);
}

.lien-suite{
  display:inline-block;margin-top:1.1rem;font-family:var(--titre);font-weight:400;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-fonce);
  text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:2px;
}
.lien-suite:hover{color:var(--encre);border-color:var(--encre)}

.picto{width:min(56%,150px);height:auto;color:var(--encre)}

/* --- la barre de pages, façon banc de montage --- */
.slider__barre{
  display:flex;align-items:center;gap:.5rem;margin-top:.9rem;
}
.slider__btn{
  width:32px;height:30px;flex:none;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--trait);border-radius:4px;
  color:var(--encre);font-size:.62rem;line-height:1;display:grid;place-content:center;
}
.slider__btn:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.slider__btn--pause{margin-left:.2rem}

.slider__puces{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex:1;min-width:0}
.slider__puces li{flex:1;min-width:0}
.slider__puces button{
  position:relative;width:100%;height:30px;padding:0;cursor:pointer;overflow:hidden;
  background:var(--bloc);border:1px solid var(--trait);border-radius:4px;
  font-family:var(--titre);font-size:.64rem;color:var(--gris);
}
.slider__puces button:hover{border-color:var(--accent);color:var(--accent)}
.slider__puces button[aria-current="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* le titre de la page au survol, comme une infobulle de timeline */
.slider__puces button span{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--encre);color:var(--papier);padding:.22rem .55rem;white-space:nowrap;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;
  pointer-events:none;border-radius:3px;z-index:5;
}
.slider__puces button:hover span,.slider__puces button:focus-visible span{opacity:1}

/* la jauge avance par crans, comme un compteur d'images */
.slider__puces button[aria-current="true"]::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--accent);transform-origin:left;transform:scaleX(0);
}
.slider.tourne .slider__puces button[aria-current="true"]::after{
  animation:jauge 7s steps(7,end) forwards;
}
@keyframes jauge{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Au téléphone, les numéros ne tiennent pas dans des cases de 40 px : les
   pages deviennent de simples barres, la jauge prend toute la hauteur. */
@media (max-width:620px){
  .slider__puces{gap:5px}
  .slider__puces button{font-size:0;height:9px;border-radius:99px}
  .slider__puces button span{display:none}
  .slider__puces button[aria-current="true"]::after{height:100%}
}
@media (prefers-reduced-motion:reduce){
  .slide.is-now{animation:none}
  .slider__puces button[aria-current="true"]::after{animation:none;transform:scaleX(1)}
}

/* ---------- 6. À retenir ---------- */
.retenir{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:1px;background:var(--trait);
  border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
@media (min-width:820px){.retenir{grid-template-columns:repeat(3,1fr)}}
.retenir li{background:var(--bloc);padding:1.2rem 1.3rem}
.retenir b{
  display:block;font-family:var(--titre);font-weight:400;color:var(--encre);
  font-size:1rem;margin-bottom:.3rem;
}
.retenir span{display:block;font-size:.95rem;color:var(--gris);line-height:1.5}

.btn{
  display:inline-block;text-decoration:none;border:0;cursor:pointer;
  font-family:var(--titre);font-weight:400;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.85rem 1.5rem;border-radius:4px;
  background:var(--accent);color:#fff;transition:background .2s;
}
.btn:hover{background:var(--encre)}

/* ---------- 7. Étapes numérotées ---------- */
.etapes{list-style:none;margin:1.6rem 0 1.2rem;padding:0;display:grid;gap:.1rem}
.etapes li{
  display:grid;grid-template-columns:auto 1fr;gap:.1rem .9rem;align-items:baseline;
  padding:.7rem 0;border-top:1px solid var(--trait);
}
.etapes b{
  font-family:var(--titre);font-size:.74rem;letter-spacing:.12em;color:var(--accent-fonce);grid-row:span 2;
}
.etapes span{font-family:var(--titre);font-weight:400;font-size:1rem}
.etapes em{grid-column:2;font-style:normal;font-size:.94rem;color:var(--gris)}

.liste-puces{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.liste-puces li{padding-left:1.1rem;position:relative;font-size:.96rem}
.liste-puces + p{margin-top:1rem}
.liste-puces li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--accent)}

/* ---------- 8. Disciplines ---------- */
.disciplines{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--trait);
  border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.disciplines{grid-template-columns:1fr 1fr}}
.disciplines li{background:var(--bloc);padding:1.3rem;display:flex;gap:1rem;align-items:flex-start}
.disc__ico{
  width:52px;height:52px;flex:none;background:var(--encre);color:var(--papier);
  border-radius:4px;display:grid;place-content:center;padding:9px;
}
.disc__ico svg{width:100%;height:100%}
.disciplines b{display:block;font-family:var(--titre);font-weight:400;font-size:1.08rem;color:var(--encre);margin-bottom:.2rem}
.disciplines span{display:block;font-size:.95rem;line-height:1.5}
.disciplines em{
  display:block;font-style:normal;font-family:var(--titre);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-top:.45rem;
}

/* ---------- 9. Tableaux d'horaires ---------- */
.horaires{display:grid;gap:1.4rem;margin-bottom:1.4rem}
.horaires table{width:100%;border-collapse:collapse;font-size:.95rem;overflow:hidden;border-radius:var(--r)}
.horaires caption{
  text-align:left;font-family:var(--titre);font-weight:400;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.1em;background:var(--accent);color:#fff;
  padding:.6rem .9rem;border-radius:var(--r) var(--r) 0 0;
}
.horaires thead th{
  text-align:left;font-family:var(--titre);font-weight:400;font-size:.7rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
  padding:.6rem .9rem;background:var(--bloc-2);
}
.horaires td{padding:.7rem .9rem;border-top:1px solid var(--trait);background:var(--bloc)}
.horaires tbody tr:nth-child(even) td{background:var(--papier)}
.horaires td:first-child{font-family:var(--titre);font-weight:400;white-space:nowrap}
/* Au téléphone, un tableau à quatre colonnes ne tient pas : chaque ligne
   devient une petite fiche. L'horaire et le nombre de places sur la première
   ligne, l'atelier en dessous, l'âge en gris tout en bas. */
@media (max-width:620px){
  .horaires thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .horaires tr{
    display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"heure places" "atelier atelier" "qui qui";
    gap:.1rem .8rem;padding:.75rem .9rem;
    border-top:1px solid var(--trait);background:var(--bloc);
  }
  .horaires tbody tr:nth-child(even){background:var(--papier)}
  .horaires td{border:0;padding:0;background:none}
  .horaires td:nth-child(1){grid-area:heure;white-space:normal}
  .horaires td:nth-child(2){grid-area:qui;color:var(--gris);font-size:.85rem}
  .horaires td:nth-child(3){grid-area:atelier}
  .horaires td:nth-child(4){
    grid-area:places;text-align:right;color:var(--gris);
    font-family:var(--titre);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
    align-self:center;
  }
  .horaires td:nth-child(4)::after{content:" places"}
}

/* ---------- 10. Agenda des stages ---------- */
.agenda{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.agenda{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.agenda{grid-template-columns:repeat(3,1fr)}}
.agenda__periode{background:var(--bloc);padding:1.2rem 1.3rem}
.agenda__periode h3{
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
  border-bottom:1px dotted var(--trait);padding-bottom:.5rem;margin-bottom:.8rem;
}
.agenda__periode ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.agenda__periode b{display:block;font-family:var(--titre);font-weight:400;color:var(--encre);font-size:1rem}
.agenda__periode span{display:block;font-size:.9rem;color:var(--gris)}
.agenda__periode--off{background:var(--bloc-2)}
.agenda__periode--off b{color:var(--gris)}

/* ---------- 11. Infos pratiques ---------- */
.pratique{display:grid;gap:0;margin:0 0 1.4rem;border-top:1px solid var(--trait)}
@media (min-width:820px){.pratique{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,3.4rem)}}
.pratique>div{border-bottom:1px solid var(--trait);padding:1rem 0}
.pratique dt{font-family:var(--titre);font-weight:400;font-size:1rem;color:var(--encre);margin-bottom:.25rem}
.pratique dd{margin:0;font-size:.97rem;line-height:1.55}

/* ---------- 12. Formulaire ---------- */
.form{display:grid;gap:1.1rem;margin-top:1.6rem}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}}
.champ{display:grid;gap:.35rem;border:0;padding:0;margin:0}
.champ--large{grid-column:1/-1}
.champ label,.champ legend{
  font-family:var(--titre);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);padding:0;
}
.champ input:not([type="checkbox"]),.champ textarea{
  font-family:var(--texte);font-size:1rem;color:var(--encre);background:var(--papier);
  border:1px solid var(--trait);border-radius:4px;padding:.65rem .75rem;width:100%;
}
.champ input:focus,.champ textarea:focus{outline:0;border-color:var(--accent)}
.champ textarea{resize:vertical}

.cases{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}
.cases label{cursor:pointer}
.cases input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cases span{
  display:inline-block;border:1px solid var(--trait);border-radius:100px;background:var(--papier);
  padding:.4rem .85rem;font-family:var(--titre);font-size:.78rem;transition:.18s;
}
.cases input:checked + span{background:var(--accent);color:#fff;border-color:var(--accent)}
.cases input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.form .btn{grid-column:1/-1;justify-self:start}
.form__note{grid-column:1/-1;margin:0}
.form__etat{grid-column:1/-1;margin:0;font-family:var(--titre);font-size:.85rem;color:var(--accent-fonce);min-height:1.2em}

/* ---------- 13. Pied ---------- */
.pied{background:var(--bloc);border-top:1px solid var(--trait);padding:clamp(2.2rem,5vw,3.4rem) 0;margin-top:clamp(2rem,5vw,3.5rem)}
.pied__in{display:grid;gap:1.6rem}
@media (min-width:760px){.pied__in{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.pied__col{display:grid;gap:.3rem;align-content:start}
.pied__col h4{margin:0 0 .5rem;color:var(--gris)}
.pied__col a{text-decoration:none;font-size:.94rem;color:var(--encre)}
.pied__col a:hover{color:var(--accent-fonce)}
.pied p{margin:0;font-size:.94rem;color:var(--gris)}
.pied__marque{font-family:var(--titre);font-weight:400;font-size:1.1rem;color:var(--encre) !important}
.pied__legal{grid-column:1/-1;font-size:.84rem;color:var(--gris);border-top:1px solid var(--trait);padding-top:1.2rem;margin-top:.6rem !important}

/* ---------- 14. Les quatre âges ---------- */
.sous-titre{
  font-family:var(--titre);font-weight:400;font-size:1.1rem;
  margin:clamp(1.8rem,4vw,2.6rem) 0 1rem;
}
.ages{
  list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1px;
  background:var(--trait);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
}
@media (min-width:700px){.ages{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.ages{grid-template-columns:repeat(4,1fr)}}
.ages li{background:var(--bloc);padding:1.2rem 1.3rem}
.ages b{
  display:block;font-family:var(--titre);font-weight:400;font-size:1.06rem;
  margin-bottom:.35rem;padding-bottom:.35rem;border-bottom:2px solid var(--accent);
}
.ages span{display:block;font-size:.94rem;line-height:1.5}

/* les points de soutien : l'intitulé en gras, l'explication à la suite */
.liste-puces b{font-family:var(--titre);font-weight:400}

/* ==========================================================================
   15. Mobile : la page est lue au téléphone avant tout
   ========================================================================== */
@media (max-width:759px){
  .wrap{width:min(100%, 100% - 2rem)}
  .section{padding:2rem 0}

  /* le panneau d'appel devient une barre : une ligne, un bouton.
     Le détail du besoin est déjà écrit en entier dans la section Soutenir. */
  .appel-haut__in{
    padding:.55rem 0;gap:.8rem;flex-wrap:nowrap;align-items:center;
  }
  .appel-haut__txt{min-width:0;flex:1}
  .appel-haut__titre{margin:0;font-size:.9rem;line-height:1.28}
  .appel-haut__titre b{
    display:block;margin:0 0 .25rem;top:0;font-size:.58rem;
    border:0;padding:0;letter-spacing:.16em;
  }
  .appel-haut__sous{display:none}
  .appel-haut__actions{width:auto;flex:none}
  .appel-haut__actions .btn{padding:.55rem .85rem;font-size:.66rem;white-space:nowrap}
  .appel-haut__lien{display:none}

  /* le logo ne mange pas le haut de l'écran */
  .logo{width:64px}
  .logo b{font-size:.56rem}

  /* le carrousel : moins de blanc perdu */
  .une-grille__gauche .bloc{min-height:0;padding:1.3rem 1.2rem}
  .slide__ico{width:56px}
  .slider__btn{width:38px;height:34px}

  /* les tableaux d'horaires se lisent en fiches empilées */
  .horaires caption{font-size:.78rem;padding:.55rem .8rem}
  .horaires td{font-size:.92rem}

  /* les grands aplats de texte respirent moins */
  .bloc{padding:1.3rem 1.2rem}
  .chapo{font-size:1.04em}
  h1{font-size:clamp(1.75rem,1.2rem + 3.4vw,2.4rem)}
  .titre-sec{gap:.7rem}
  .titre-sec .etiq{display:none}

  /* pied de page en deux colonnes plutôt qu'une seule très longue */
  .pied__in{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
  .pied__col:first-child{grid-column:1/-1}
  .pied__col a{font-size:.94rem}
}

@media (max-width:360px){
  .pied__in{grid-template-columns:1fr}
  .cadrage{font-size:.92rem}
  .appel-haut__titre{font-size:.86rem}
  .appel-haut__actions .btn{padding:.5rem .7rem;font-size:.62rem}
}

/* ==========================================================================
   16. Page À propos : le lieu et le porteur du projet
   Les emplacements d'images sont posés dès maintenant, en réserve dessinée,
   pour que la mise en page ne bouge pas quand les vraies photos arriveront.
   ========================================================================== */

.section--tete-page{padding-top:clamp(2rem,5vw,3.4rem);padding-bottom:clamp(1rem,2vw,1.6rem)}
.sur-titre{
  font-family:var(--titre);font-weight:400;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin:0 0 .7rem;
}
.chapo--large{max-width:56ch;font-size:1.14em}
.titre-tiers{
  font-family:var(--titre);font-weight:400;margin:clamp(1.6rem,3.5vw,2.4rem) 0 1rem;
}

/* deux colonnes texte + image, l'image passe au-dessus sur petit écran */
.duo{display:grid;gap:1rem;align-items:start}
@media (min-width:900px){
  .duo{grid-template-columns:1.35fr 1fr;gap:1.3rem}
  .duo--inverse{grid-template-columns:1fr 1.35fr}
}

/* ---------- l'emplacement d'image ---------- */
.photo{
  margin:0;position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;text-align:center;
  background:var(--bloc-2);border:1.5px dashed var(--trait);border-radius:var(--r);
  padding:1.2rem;overflow:hidden;
}
.photo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(54,56,46,.035) 11px 22px);
}
.photo__mot{
  font-family:var(--titre);font-weight:400;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);position:relative;
}
.photo figcaption{font-size:.86rem;color:var(--gris);max-width:34ch;position:relative}
.photo[data-a-venir]::after{
  content:attr(data-a-venir);position:absolute;top:.6rem;left:.6rem;
  font-family:var(--titre);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-fonce);border:1px solid currentColor;border-radius:3px;
  padding:.14rem .45rem;background:var(--papier);
}
/* dès qu'une vraie image ou une vidéo est posée dans le figure, la réserve
   dessinée s'efface d'elle-même : rien à changer dans le HTML alentour */
.photo:has(img),.photo:has(video){
  border:0;padding:0;background:none;display:block;position:relative;
}
.photo:has(img)::before,.photo:has(video)::before,
.photo:has(img)::after,.photo:has(video)::after,
.photo:has(img) .photo__mot,.photo:has(video) .photo__mot{display:none}
/* le format est porté par le média, pas par le cadre : sinon la légende
   entre dans le calcul du ratio et l'image flotte en haut d'un bloc trop haut */
.photo:has(img),.photo:has(video){aspect-ratio:auto;min-height:0}
.photo img,.photo video{
  width:100%;height:auto;object-fit:cover;border-radius:var(--r);
  background:var(--bloc-2);display:block;
}
/* l'autoportrait est montré tel qu'il a été dessiné : on ne le recadre pas */
.photo--portrait img{aspect-ratio:16/9;object-fit:contain;background:none}
.photo--carre img,.photo--carre video{aspect-ratio:1/1}
.photo--paysage img,.photo--paysage video{aspect-ratio:4/3}
.photo--large img,.photo--large video{aspect-ratio:16/10}
/* la légende revient sous l'image, alignée sur le texte */
.photo:has(img) figcaption,.photo:has(video) figcaption{
  max-width:none;text-align:left;margin-top:.55rem;font-size:.84rem;line-height:1.45;
}

/* la pastille de lecture : la vidéo ne démarre qu'au clic ou au survol */
.photo__play{
  position:absolute;left:.7rem;top:.7rem;z-index:2;pointer-events:none;
  font-family:var(--titre);font-weight:400;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--encre);color:var(--papier);
  padding:.24rem .6rem;border-radius:100px;
}
.photo.joue .photo__play{opacity:0}
.photo:has(video){cursor:pointer}

/* l'image d'ouverture d'une page : plus large, moins haute */
.photo.ouverture{margin-top:clamp(1.4rem,3vw,2rem);max-width:62ch}
.photo.ouverture img{aspect-ratio:16/9}
/* le plateau de tournage, dans la colonne latérale de l'accueil */
.vue-plateau{margin-bottom:1.2rem}
.vue-plateau video{aspect-ratio:16/10}

.photo--large{min-height:clamp(220px,34vw,340px)}
.photo--portrait{aspect-ratio:4/5}
.photo--carre{aspect-ratio:1/1;padding:.8rem}
.photo--paysage{aspect-ratio:4/3;padding:.8rem}

/* ---------- les quatre coins du lieu ---------- */
.zones{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:640px){.zones{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.zones{grid-template-columns:repeat(4,1fr)}}
.zones b{display:block;font-family:var(--titre);font-weight:400;font-size:1.08rem;margin:.7rem 0 .25rem}
.zones p{margin:0;font-size:.94rem;color:var(--gris)}

/* ---------- section sombre : le porteur du projet ---------- */
.section--fonce{background:var(--encre);color:var(--papier);margin:clamp(1.6rem,4vw,2.6rem) 0}
.section--fonce .titre-sec{color:#fff}
.section--fonce .titre-sec::after{border-color:var(--accent)}
.section--fonce .bloc{background:rgba(251,250,248,.055)}
.section--fonce .chapo{color:#fff}
.section--fonce .petit{color:rgba(237,230,227,.7)}
.section--fonce a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.section--fonce .photo{background:rgba(251,250,248,.05);border-color:rgba(237,230,227,.28)}
.section--fonce .photo::before{background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(251,250,248,.04) 11px 22px)}
.section--fonce .photo__mot,.section--fonce .photo figcaption{color:rgba(237,230,227,.7)}
.section--fonce .photo[data-a-venir]::after{background:var(--encre);color:var(--accent)}

/* ---------- formation, expérience, pratique ---------- */
.parcours{display:grid;gap:1.4rem;margin-top:clamp(1.6rem,4vw,2.4rem)}
@media (min-width:820px){.parcours{grid-template-columns:repeat(3,1fr);gap:1.6rem}}
.parcours h3{
  font-family:var(--titre);font-weight:400;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .8rem;
}
.parcours ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.parcours li{border-top:1px solid rgba(237,230,227,.16);padding-top:.7rem}
.parcours b{display:block;font-family:var(--titre);font-weight:400;font-size:1rem}
.parcours span{display:block;font-size:.92rem;color:rgba(237,230,227,.72);line-height:1.45}

/* ---------- galerie de travaux ---------- */
.galerie{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:620px){.galerie{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie b{display:block;font-family:var(--titre);font-weight:400;font-size:1.02rem;margin:.6rem 0 .15rem}
.galerie span{display:block;font-size:.9rem;color:var(--gris)}

/* ---------- bloc de contact en bas de page ---------- */
.contact-ligne{font-family:var(--titre);font-size:1.06rem;margin:.4rem 0 1.1rem}
.appel__liens{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin:0}

/* la signature du porteur, sur la page d'accueil */
.signature{
  display:grid;gap:1.2rem;align-items:center;margin-top:1rem;
  background:var(--bloc);border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem);
}
@media (min-width:700px){.signature{grid-template-columns:170px 1fr;gap:1.6rem}}
.signature h3{font-family:var(--titre);font-weight:400;margin:0 0 .5rem}
.signature p{margin:0 0 .8rem}
.signature .sur-titre{margin-bottom:.35rem}

/* ==========================================================================
   17. Page Le projet : la liste d'intentions
   Chaque envie porte son degré de certitude. Sans ça, la page se lirait
   comme un catalogue de promesses, et c'est exactement ce qu'elle n'est pas.
   ========================================================================== */

.avertissement{
  margin-top:clamp(1.4rem,3vw,2rem);border-left:3px solid var(--accent);
  background:var(--bloc);border-radius:0 var(--r) var(--r) 0;
  padding:clamp(1rem,2.4vw,1.4rem) clamp(1.1rem,2.6vw,1.6rem);
  max-width:72ch;
}
.avertissement p{margin:0 0 .6rem}
.avertissement p:last-child{margin:0}
.avertissement b{font-family:var(--titre);font-weight:400}

/* le socle : ce qui existe déjà dans le reste du site */
.socle{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
@media (min-width:700px){.socle{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.socle{grid-template-columns:repeat(3,1fr)}}
.socle li{
  background:var(--bloc);border-radius:var(--r);
  padding:clamp(1.1rem,2.4vw,1.4rem);display:flex;flex-direction:column;gap:.4rem;
}
.socle b{font-family:var(--titre);font-weight:400;font-size:1.08rem}
.socle span{color:var(--gris);font-size:.95rem;line-height:1.5;flex:1}
.socle .lien-suite{align-self:flex-start;margin-top:.4rem}

/* les envies */
.envies{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
@media (min-width:820px){.envies{grid-template-columns:repeat(2,1fr)}}
.envie{
  background:var(--bloc);border-radius:var(--r);
  padding:clamp(1.2rem,2.6vw,1.6rem);
}
.envie b{display:block;font-family:var(--titre);font-weight:400;font-size:1.14rem;margin:.55rem 0 .5rem}
.envie p{margin:0;font-size:.97rem;line-height:1.58;color:var(--gris)}

.envie__tag{
  display:inline-block;font-family:var(--titre);font-weight:400;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:3px;
  color:var(--gris);border:1px solid var(--trait);
}
.envie__tag--tot{color:var(--accent-fonce);border-color:var(--accent);background:var(--accent-clair)}
.envie__tag--tard{color:var(--gris);border-style:dashed}
.envie__tag--pause{color:var(--encre);border-color:var(--encre);background:var(--bloc-2)}

/* la section sombre de cette page porte des cartes, pas un bloc unique */
.section--fonce .envie{background:rgba(251,250,248,.06)}
.section--fonce .envie p{color:rgba(237,230,227,.74)}
.section--fonce .envie__tag{color:rgba(237,230,227,.7);border-color:rgba(237,230,227,.3)}
.section--fonce .envie__tag--tot{color:var(--accent);border-color:var(--accent);background:transparent}
.section--fonce .envie__tag--pause{color:var(--papier);border-color:rgba(237,230,227,.55);background:transparent}
.section--fonce .intro--clair{color:rgba(237,230,227,.78)}

/* le calendrier : la date en colonne, le détail à côté plutôt qu'en dessous */
@media (min-width:820px){
  .etapes--longues li{grid-template-columns:auto 13rem 1fr;align-items:baseline}
  .etapes--longues em{grid-column:3;grid-row:1}
}

/* ---- le suivi d'avancement ----
   Trois états lisibles d'un coup d'œil : fait, en cours, à venir. Le panneau
   n'a de valeur que s'il est mis à jour ; la date en bas est là pour le rappeler. */
.avancement li{align-content:start}
.avancement b{
  font-family:var(--titre);font-weight:400;font-size:.94rem;line-height:1.18;
  color:var(--encre);
}
.avancement .actus__cat{
  justify-self:start;display:inline-flex;align-items:center;gap:.32rem;
  border:1px solid rgba(54,56,46,.4);border-radius:100px;
  padding:.14rem .5rem;margin-bottom:.22rem;color:rgba(54,56,46,.62);
}
.avancement .actus__cat::before{
  content:"";width:6px;height:6px;border-radius:50%;
  border:1px solid currentColor;flex:none;
}
.avancement .est-fait .actus__cat{
  background:var(--encre);border-color:var(--encre);color:var(--papier);
}
.avancement .est-fait .actus__cat::before{background:currentColor;border-color:currentColor}
.avancement .est-encours .actus__cat{
  background:var(--papier);border-color:var(--papier);color:var(--encre);
}
.avancement .est-encours .actus__cat::before{
  background:linear-gradient(90deg,currentColor 50%,transparent 50%);
}
/* ce qui est fait s'efface un peu : l'oeil doit tomber sur ce qui reste à faire */
.avancement .est-fait b,.avancement .est-fait>span:last-child{opacity:.72}

.actus__maj{
  margin:0 0 1rem;font-size:.74rem;line-height:1.4;color:rgba(54,56,46,.7);
  font-family:var(--titre);
}
.actus__maj a{color:var(--encre)}

/* ---- la liste de ce qui reste à financer ----
   Le prix d'abord, en gros : c'est lui qui permet de dire oui à une ligne. */
.besoins{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.8rem}
@media (min-width:760px){.besoins{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.besoins{grid-template-columns:repeat(3,1fr)}}
.besoins li{
  background:var(--bloc);border-radius:var(--r);
  padding:clamp(1.1rem,2.4vw,1.4rem);display:flex;flex-direction:column;gap:.3rem;
}
.besoins__prix{
  font-family:var(--titre);font-weight:400;font-size:1.5rem;line-height:1;
  color:var(--accent-fonce);
}
.besoins b{font-family:var(--titre);font-weight:400;font-size:1.04rem;line-height:1.2}
.besoins li>span:last-child{font-size:.92rem;line-height:1.5;color:var(--gris)}

.besoins__total{
  background:var(--encre);color:var(--papier);border-radius:var(--r);
  padding:clamp(1.1rem,2.4vw,1.4rem);margin:0 0 clamp(1.8rem,4vw,2.6rem);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;
}
.besoins__total b{font-family:var(--titre);font-weight:400;font-size:1.24rem;color:#fff;white-space:nowrap}
.besoins__total span{font-size:.92rem;line-height:1.5;color:rgba(237,230,227,.8);flex:1;min-width:min(100%,26ch)}

/* ---- les rendez-vous de la ville ----
   Trois niveaux de lecture par ligne : quand, ce qu'on propose, pourquoi ça tient. */
.rdv{list-style:none;margin:0 0 clamp(1.4rem,3vw,2rem);padding:0;display:grid;gap:1px;
  background:var(--trait);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.rdv li{
  background:var(--bloc);padding:clamp(1.1rem,2.6vw,1.5rem);
  display:grid;gap:.35rem;
}
@media (min-width:860px){
  .rdv li{grid-template-columns:7.5rem 1fr;column-gap:1.4rem;align-items:baseline}
  .rdv__quand{grid-row:span 3}
}
.rdv__quand{
  font-family:var(--titre);font-weight:400;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-fonce);
}
.rdv b{font-family:var(--titre);font-weight:400;font-size:1.18rem;line-height:1.2}
.rdv__quoi{font-size:.99rem;line-height:1.55}
.rdv__pourquoi{
  font-size:.92rem;line-height:1.55;color:var(--gris);
  border-left:2px solid var(--trait);padding-left:.8rem;margin-top:.25rem;
}

/* ==========================================================================
   18. Les petites vies du site (labo, brique 06)
   Le fondu des blocs, la traînée du curseur, le séparateur pellicule.
   Tout s'éteint sous prefers-reduced-motion.
   ========================================================================== */

/* le fondu montant : retenu contre le cache en trois paliers, trop dur sur du
   texte courant. Le mouvement image par image reste réservé à ce qui est dessiné. */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* la traînée du curseur : au-dessus de tout, ne capte jamais le pointeur */
#onion{position:fixed;inset:0;z-index:60;pointer-events:none}

/* le séparateur pellicule */
.pellicule{width:var(--wrap);margin:clamp(1.6rem,4vw,2.8rem) auto;line-height:0}
.pellicule canvas{display:block;width:100%}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  #onion{display:none}
}

/* la balle des titres (labo, brique 05) : le texte reste lisible par les
   lecteurs d'écran, le canvas ne prend jamais le pointeur */
.tb-hide{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.tb-cv{display:inline-block;vertical-align:bottom;max-width:100%;pointer-events:none}
/* dans un titre de section, le canvas ne doit pas manger le filet pointillé */
.titre-sec .tb-cv{flex:none}

/* le portrait de la signature : montré entier lui aussi, un carré le rognerait
   sur un rond qui n'est pas centré dans l'image d'origine */
.signature .photo img{aspect-ratio:16/9;object-fit:contain;background:none}
@media (min-width:700px){.signature{grid-template-columns:210px 1fr}}

/* Photo d'illustration : ce n'est pas le lieu, ce n'est pas un travail de l'atelier.
   La pastille est là pour que personne ne s'y trompe, même en diagonale. */
.photo--illus{position:relative}
.photo--illus::after{
  content:"Illustration";position:absolute;top:.6rem;right:.6rem;z-index:2;
  font-family:var(--titre);font-weight:400;font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--papier);background:rgba(54,56,46,.82);
  padding:.2rem .5rem;border-radius:3px;pointer-events:none;display:block;
}
.note-illus{margin-top:1rem;max-width:78ch}
.note-illus b{font-family:var(--titre);font-weight:400}
.note-illus span{display:block;margin-top:.2rem;opacity:.75;font-size:.8rem}

/* ---- la une doit tenir dans un écran ----
   Le panneau d'avancement était la pièce la plus haute : ce qui est fait garde
   son titre mais perd son détail, personne ne relit une étape terminée. */
@media (min-width:1020px){
  .actus{padding:clamp(.9rem,1.8vw,1.15rem)}
  .actus__titre{margin-bottom:.7rem;font-size:.74rem;padding:.3rem .7rem}
  .actus__liste{gap:.5rem;margin-bottom:.7rem}
  .actus__liste li{padding-bottom:.5rem}
  .avancement .est-fait>span:last-child{display:none}
  .avancement b{font-size:.9rem}
  .avancement .actus__cat{margin-bottom:.15rem}
  .actus__liste li>span:last-child{font-size:.82rem;line-height:1.35}
  .actus__maj{margin-bottom:.7rem;font-size:.7rem}
  .btn--large{padding:.7rem 1rem}
}

/* Garantie de tenue à l'écran : la une ne dépasse jamais la hauteur de la
   fenêtre. Si le suivi d'avancement est plus long que la place disponible,
   c'est lui qui défile dans son panneau, pas la page entière. */
@media (min-width:1020px){
  .une-grille{max-height:calc(100vh - 20rem);min-height:340px}
  .actus{overflow:hidden}
  .actus .actus__liste{overflow-y:auto;min-height:0;flex:1;
    scrollbar-width:thin;scrollbar-color:rgba(54,56,46,.35) transparent}
  .une-grille__gauche .bloc{min-height:0}
}
/* sans ces min-height:0, la colonne de gauche refuse de se comprimer et sa
   barre de pages passe par-dessus la ligne de cadrage */
@media (min-width:1020px){
  .une-grille__gauche{min-height:0}
  .une-grille__gauche .slider{min-height:0;flex:1}
  .une-grille__gauche .slide,.une-grille__gauche .bloc{min-height:0}
}
/* le slider est une grille dont toutes les pages occupent la même cellule :
   il faut le dire à la rangée, sinon elle refuse de descendre sous la hauteur
   de la page la plus longue et la barre déborde sur la ligne de cadrage */
.slider{grid-template-rows:minmax(0,1fr)}
.slide{min-height:0;overflow:hidden;border-radius:var(--r)}
.slider__barre{flex:none}
/* la rangée de la grille doit elle aussi accepter de descendre sous la hauteur
   de son contenu, sinon le max-height ne fait que masquer le débordement */
@media (min-width:1020px){
  .une-grille{grid-template-rows:minmax(0,1fr)}
  .une-grille>*{min-height:0}
}
/* sur téléphone, le voile ne doit pas manger toute l'image */
@media (max-width:759px){
  .slide__txt{padding-top:clamp(2rem,12vw,3rem)}
  .slide__txt .chapo{font-size:1em;line-height:1.45}
  .une-grille__gauche .bloc{min-height:clamp(400px,72vw,520px)}
}