/* ==========================================================
   ATELIERS / STAGES — Cirkul'R — feuille de style
   Ambiance « carnet des ateliers » (papier / encre),
   reprise du catalogue imprimé et adaptée au web.
   Chargée en plus de style.css.
   ==========================================================

   ÉCHELLE GLOBALE : la variable --z (sur .ateliers) agrandit
   toute la page d'un seul coup. Toutes les tailles de texte
   et les dimensions clés sont multipliées par --z.
   1 = taille de référence ; 1.3 = +30 % (≈ zoom navigateur 130 %).
   ========================================================== */

/* ---------- Polices propres au carnet ---------- */
@font-face{
  font-family:'URW Bookman';
  src:url('../fonts/urw-bookman-light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'URW Bookman';
  src:url('../fonts/urw-bookman-demi.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'URW Bookman';
  src:url('../fonts/urw-bookman-demi-italic.woff2') format('woff2');
  font-weight:700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Z003';
  src:url('../fonts/z003-medium-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- Jetons de la page ---------- */
.ateliers{
  --papier:#f4ecda;
  --papier-fonce:#ece0c6;
  --encre:#2b2118;
  --encre-douce:#6f6353;
  --nuit:#33405f;
  --lanterne:#c1702f;
  --trait:#c9ba99;

  --carnet-titre:'URW Bookman', 'Bookman Old Style', Georgia, serif;
  --carnet-script:'Z003', 'URW Chancery L', 'Segoe Script', cursive;
  --carnet-corps:var(--font-corps); /* Cormorant Garamond (style.css) */

  --z:0.975;   /* échelle globale de la page — un seul chiffre à ajuster (1 = référence) */

  background:var(--papier);
  color:var(--encre);
  font-family:var(--carnet-corps);
  font-size:calc(1.72rem * var(--z));   /* texte courant */
  line-height:1.6;
  padding:clamp(40px,7vw,80px) clamp(18px,6vw,44px) clamp(70px,9vw,110px);
}

.ateliers__inner{
  max-width:1180px;
  margin:0 auto;
}

.ateliers a{ color:var(--lanterne); }

/* ---------- En-tête de page ---------- */
.ateliers__entete{
  text-align:center;
  margin-bottom:clamp(40px,6vw,64px);
}
/* « le carnet des ateliers » — titre principal (H1) */
.ateliers__eyebrow{
  font-family:var(--carnet-script);
  font-size:clamp(calc(4.6rem * var(--z)), 12vw, calc(7rem * var(--z)));
  font-weight:400;
  color:var(--lanterne);
  line-height:1.02;
  margin:0 0 0.12em;
}
.ateliers__accroche{
  font-family:var(--carnet-titre);
  font-style:italic;
  font-weight:400;
  color:var(--encre-douce);
  font-size:clamp(calc(1.5rem * var(--z)), 3vw, calc(1.8rem * var(--z)));
  max-width:46ch;
  margin:0.9em auto 0;
}

/* ---------- Introduction + diaporama ---------- */
.intro{
  margin-bottom:clamp(46px,7vw,72px);
  padding-bottom:clamp(40px,6vw,60px);
  border-bottom:1px solid var(--trait);
}
.intro-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(28px,5vw,54px);
  align-items:start;
}
.intro-bloc + .intro-bloc{ margin-top:clamp(30px,4.5vw,44px); }
/* titre de section (« interventions en milieu spécialisé », « Interventions scolaires ») */
.intro-bloc h2{
  font-family:var(--carnet-titre);
  font-weight:700;
  font-size:clamp(calc(2.2rem * var(--z)), 4.7vw, calc(3rem * var(--z)));
  color:var(--encre);
  margin-bottom:0.1em;
  line-height:1.12;
}
/* sous-titre (« Mouvements pour toustes ») */
.intro-bloc__soustitre{
  font-family:var(--carnet-script);
  font-style:italic;
  font-size:clamp(calc(1.4rem * var(--z)), 3vw, calc(1.75rem * var(--z)));
  color:var(--lanterne);
  margin:0 0 0.7em;
}
.intro-bloc p{ margin:0; }
.intro-bloc p + p{ margin-top:0.7em; }

/* Diaporama (colonne de droite) */
.intro-media{ position:sticky; top:calc(var(--hauteur-menu) + 16px); }
.slideshow{ position:relative; }
.slideshow-photo{
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  padding:0;
  border:0;
  background:#fffdf7;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  box-shadow:0 3px 14px rgba(60,45,25,0.28);
}
.slideshow-photo__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity 1.1s ease;
}
.slideshow-photo__img.is-active{ opacity:1; }
.slideshow-photo::after{
  content:'';
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 2px rgba(193,112,47,0);
  transition:box-shadow 0.4s ease;
  pointer-events:none;
}
.slideshow-photo:hover::after,
.slideshow-photo:focus-visible::after{ box-shadow:inset 0 0 0 2px rgba(193,112,47,0.5); }
.slideshow-photo:focus-visible{ outline:2px solid var(--lanterne); outline-offset:3px; }
.slideshow__legende{
  margin:0.7rem 0 0;
  font-family:var(--carnet-script);
  font-size:calc(1.4rem * var(--z));
  color:var(--encre-douce);
  text-align:right;
}

@media (max-width:860px){
  .intro-grid{ grid-template-columns:1fr; }
  .intro-media{ position:static; }
  .slideshow-photo{ aspect-ratio:16 / 10; }
}

/* ---------- Note « français / anglais » ---------- */
.note-bilingue{
  display:block;
  width:max-content;
  max-width:100%;
  margin:clamp(30px,5vw,44px) auto clamp(46px,7vw,68px);
  font-family:var(--carnet-titre);
  font-size:calc(1.35rem * var(--z));
  color:var(--encre);
  border:1.5px solid var(--encre);
  border-radius:16px 10px 18px 9px/10px 17px 9px 16px;
  padding:calc(9px * var(--z)) calc(24px * var(--z));
  text-align:center;
}

/* ---------- Liste des ateliers ---------- */
.ateliers-liste{ counter-reset:atelier; }

.atelier{
  margin:0 0 clamp(46px,7vw,72px);
  scroll-margin-top:calc(var(--hauteur-menu) + 20px);
}
.atelier__entete{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,3vw,20px);
  flex-wrap:wrap;
  text-align:center;
}
.atelier__num{
  flex:0 0 auto;
  width:calc(4rem * var(--z)); height:calc(4rem * var(--z));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--carnet-titre);
  font-weight:700;
  font-size:calc(1.6rem * var(--z));
  color:var(--lanterne);
  border:2px solid var(--lanterne);
  border-radius:49% 51% 47% 53%/52% 48% 52% 48%;
}
.atelier__entete h2{
  font-family:var(--carnet-titre);
  font-weight:700;
  font-size:clamp(calc(2rem * var(--z)), 4vw, calc(2.7rem * var(--z)));
  color:var(--encre);
  margin:0;
  line-height:1.15;
}
.atelier__sous{
  font-family:var(--carnet-script);
  font-style:italic;
  font-size:calc(1.55rem * var(--z));
  color:var(--encre-douce);
  margin:0.5rem 0 0;
  text-align:center;
}

/* Photo « polaroïd » */
.photo{
  margin:clamp(22px,4vw,34px) auto clamp(24px,4vw,36px);
  padding:10px 10px 16px;
  width:min(92%,575px);   /* +25 % */
  background:#fffdf7;
  border:1px solid #e6dcc4;
  box-shadow:0 3px 12px rgba(60,45,25,0.24);
  position:relative;
}
.photo img{ display:block; width:100%; }
.photo--g{ transform:rotate(-1.6deg); }
.photo--d{ transform:rotate(1.4deg); }
.photo::before,
.photo::after{
  content:"";
  position:absolute;
  top:-11px;
  width:74px; height:22px;
  background:rgba(206,184,140,0.42);
  border:1px solid rgba(150,130,90,0.25);
}
.photo::before{ left:14%; transform:rotate(-4deg); }
.photo::after{ right:14%; transform:rotate(3deg); }

@media (max-width:600px){
  .photo{ width:96%; }
  .atelier__sous{ margin-left:0; }
}

/* Fiche (champs) */
.fiche{
  margin:clamp(6px,2vw,10px) auto 0;   /* centrée */
  max-width:62rem;                      /* resserré vs pleine largeur, sans être trop étroit */
}
.champ{
  display:flex;
  gap:clamp(10px,3vw,20px);
  align-items:flex-start;
  background:#fffdf6;
  border:1px solid var(--trait);
  border-radius:14px 10px 16px 9px/9px 16px 10px 14px;
  padding:calc(1.05rem * var(--z)) calc(1.3rem * var(--z));
  margin-bottom:0.8rem;
}
.champ:last-child{ margin-bottom:0; }
.champ__etq{
  flex:0 0 calc(10.5rem * var(--z));
  font-family:var(--carnet-titre);
  font-weight:700;
  font-size:calc(1.25rem * var(--z));
  color:var(--nuit);
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding-top:0.15em;
}
.champ__val{ flex:1; min-width:0; }
.champ__val ul{ margin:0; padding-left:1.4rem; }
.champ__val li{ margin:0.15em 0; }
.champ__val li::marker{ color:var(--lanterne); }

@media (max-width:600px){
  .champ{ flex-direction:column; gap:0.25rem; }
  .champ__etq{ flex:none; }
}

/* ---------- Stages ---------- */
.stages{
  margin-top:clamp(30px,5vw,48px);
  padding-top:clamp(40px,6vw,60px);
  border-top:1px solid var(--trait);
  text-align:center;
}
.stages h2{
  font-family:var(--carnet-titre);
  font-weight:700;
  font-size:clamp(calc(2.1rem * var(--z)), 4.2vw, calc(2.8rem * var(--z)));
  color:var(--encre);
  margin-bottom:0.5em;
}
.stages p{
  max-width:44ch;
  margin:0 auto 1.4em;
}
.bouton-carnet{
  display:inline-block;
  font-family:var(--carnet-titre);
  font-weight:700;
  font-size:calc(1.2rem * var(--z));
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--papier);
  background:var(--lanterne);
  border:1.5px solid var(--lanterne);
  border-radius:14px 9px 16px 8px/8px 15px 9px 14px;
  padding:calc(0.95rem * var(--z)) calc(2.1rem * var(--z));
  transition:background 0.25s ease, color 0.25s ease;
}
.ateliers a.bouton-carnet{           /* spécificité > « .ateliers a » */
  color:var(--papier);
  background:var(--lanterne);
}
.ateliers a.bouton-carnet:hover,
.ateliers a.bouton-carnet:focus-visible{
  background:transparent;
  color:var(--lanterne);
}

/* ---------- Lightbox (plein écran) ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,0.96);
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox-img{
  max-width:min(88vw,1100px);
  max-height:84vh;
  object-fit:contain;
  box-shadow:0 0 80px rgba(193,112,47,0.2);
}
.lightbox-close{
  position:absolute; top:1.5rem; right:2rem;
  background:none; border:none; color:#f3e9d6;
  font-size:2.4rem; line-height:1; cursor:pointer;
  opacity:0.75; transition:opacity 0.3s ease;
}
.lightbox-close:hover{ opacity:1; }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#f3e9d6;
  font-size:1.4rem; cursor:pointer; padding:1rem 1.2rem;
  opacity:0.6; transition:opacity 0.3s ease, color 0.3s ease;
}
.lightbox-nav:hover{ opacity:1; color:var(--lanterne); }
.lightbox-prev{ left:0.5rem; }
.lightbox-next{ right:0.5rem; }
.lightbox-counter{
  position:absolute; bottom:1.8rem; left:50%;
  transform:translateX(-50%);
  font-size:0.75rem; letter-spacing:0.25em;
  color:#d9b360; text-transform:uppercase;
}

@media (prefers-reduced-motion:reduce){
  .slideshow-photo__img{ transition:none; }
}

/* ==========================================================
   R&D — chaque bloc = une page de cahier déchirée posée
   sur la table.  Actif seulement si <main> a la classe
   « ateliers--cahier » → pour l'enlever : retirer ce mot
   dans le HTML (retour immédiat à la version précédente).
   ========================================================== */
.ateliers--cahier .intro-bloc,
.ateliers--cahier .atelier{
  --pap:#f7efda;                       /* teinte parchemin */
  --regle:rgba(51,64,95,0.14);
  --marge:rgba(196,84,60,0.30);

  position:relative;
  background-color:var(--pap);
  background-image:
    /* haut roussi / brûlé */
    linear-gradient(to bottom,
      rgba(38,18,7,0.92) 0, rgba(66,33,13,0.6) 5px, rgba(110,66,30,0.34) 15px,
      rgba(150,108,58,0.14) 30px, rgba(150,108,58,0) 52px),
    /* bas roussi / brûlé */
    linear-gradient(to top,
      rgba(38,18,7,0.92) 0, rgba(66,33,13,0.6) 5px, rgba(110,66,30,0.34) 15px,
      rgba(150,108,58,0.14) 30px, rgba(150,108,58,0) 52px),
    /* marge rouge */
    linear-gradient(to right,
      transparent calc(2.5rem - 1px), var(--marge) calc(2.5rem - 1px),
      var(--marge) calc(2.5rem + 1px), transparent calc(2.5rem + 1px)),
    /* lignes du cahier */
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(2rem - 1px),
      var(--regle) calc(2rem - 1px), var(--regle) 2rem);
  padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.6rem) clamp(2.2rem,4.5vw,3.4rem);
  padding-left:clamp(3.2rem,6vw,4.4rem);   /* place pour la marge rouge */
  border-radius:2px;
  filter:drop-shadow(0 12px 16px rgba(60,45,25,0.22));
  /* renforce le noirci pile sur le bord */
  box-shadow:
    inset 0 9px 12px -6px rgba(35,16,6,0.75),
    inset 0 -9px 12px -6px rgba(35,16,6,0.75);
  /* bord irrégulier « mangé par le feu » (haut + bas) */
  clip-path:polygon(
    0% 13px, 4% 5px, 7% 15px, 10% 7px, 13% 16px, 16% 4px, 20% 12px, 23% 6px,
    27% 15px, 30% 5px, 34% 10px, 38% 3px, 42% 14px, 46% 7px, 50% 16px, 54% 5px,
    58% 9px, 62% 4px, 66% 14px, 70% 6px, 74% 12px, 78% 3px, 82% 15px, 86% 7px,
    90% 11px, 94% 4px, 97% 9px, 100% 12px,
    100% calc(100% - 9px),
    97% calc(100% - 4px), 94% calc(100% - 13px), 90% calc(100% - 6px), 86% calc(100% - 15px),
    82% calc(100% - 5px), 78% calc(100% - 11px), 74% calc(100% - 4px), 70% calc(100% - 14px),
    66% calc(100% - 7px), 62% calc(100% - 10px), 58% calc(100% - 3px), 54% calc(100% - 15px),
    50% calc(100% - 6px), 46% calc(100% - 13px), 42% calc(100% - 5px), 38% calc(100% - 11px),
    34% calc(100% - 4px), 30% calc(100% - 14px), 26% calc(100% - 7px), 22% calc(100% - 10px),
    18% calc(100% - 3px), 14% calc(100% - 15px), 10% calc(100% - 6px), 6% calc(100% - 12px),
    3% calc(100% - 4px), 0% calc(100% - 9px)
  );
}

/* légère inclinaison « posé de travers » */
.ateliers--cahier .intro-bloc{ transform:rotate(-0.55deg); }
.ateliers--cahier .intro-bloc + .intro-bloc{ transform:rotate(0.7deg); }
.ateliers--cahier .atelier:nth-of-type(odd){ transform:rotate(-0.6deg); }
.ateliers--cahier .atelier:nth-of-type(even){ transform:rotate(0.55deg); }

/* plus d'air entre les feuilles */
.ateliers--cahier .atelier{ margin-bottom:clamp(58px,8vw,96px); }
.ateliers--cahier .intro-bloc + .intro-bloc{ margin-top:clamp(40px,6vw,64px); }

/* les champs se posent directement sur les lignes du cahier */
.ateliers--cahier .champ{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0.35rem 0;
  margin-bottom:0.15rem;
}
.ateliers--cahier .champ__val ul{ padding-left:1.1rem; }

@media (max-width:600px){
  .ateliers--cahier .intro-bloc,
  .ateliers--cahier .atelier{ padding-left:clamp(2.6rem,9vw,3.4rem); }
}

/* ==========================================================
   ESSAI — fond « atelier steampunk » derrière les feuilles :
   sombre + rouages bronze, en-tête éclairé comme le panneau
   lumineux de la bannière du haut.
   Actif si <main> a « ateliers--steampunk » (avec « ateliers--cahier »).
   Retour arrière : retirer ce mot dans le HTML, ou restaurer
   l'instantané.
   ========================================================== */
.ateliers--steampunk{
  background-color:#141b26;   /* bleu métal, raccord avec l'image */
  background-image:
    linear-gradient(180deg, rgba(16,20,28,0.42) 0%, rgba(12,14,20,0.55) 45%, rgba(8,9,13,0.68) 100%),
    url("../images/ateliers/fond_de_page.webp");
  background-repeat:no-repeat, no-repeat;
  background-size:cover, cover;
  background-position:center top, center center;
  background-attachment:fixed, fixed;   /* le décor reste en place, les feuilles défilent devant */
}

/* En-tête : pris dans un halo de lumière chaude (comme l'emblème éclairé de la bannière) */
.ateliers--steampunk .ateliers__entete{
  padding:clamp(2rem,5vw,4rem) 1rem clamp(2.2rem,5vw,3.8rem);
  background:
    radial-gradient(ellipse 58% 150% at 50% 42%,
      rgba(253,216,150,0.34) 0%,
      rgba(245,184,98,0.17) 32%,
      rgba(230,150,70,0.06) 54%,
      transparent 74%),
    radial-gradient(ellipse 92% 175% at 50% 42%,
      transparent 56%, rgba(6,4,3,0.5) 100%);
}
.ateliers--steampunk .ateliers__eyebrow{
  color:#f6cd82;
  text-shadow:
    0 0 12px rgba(248,210,130,0.85),
    0 0 34px rgba(240,170,80,0.6),
    0 0 70px rgba(225,130,50,0.35),
    0 2px 3px rgba(0,0,0,0.6);
}
.ateliers--steampunk .ateliers__accroche{
  color:rgba(243,233,214,0.85);
  text-shadow:0 0 10px rgba(242,200,119,0.22), 0 1px 2px rgba(0,0,0,0.6);
}

/* Éléments hors feuilles : passage en clair pour rester lisibles */
.ateliers--steampunk .note-bilingue{
  color:#f3e9d6;
  border-color:rgba(242,200,119,0.55);
  background:rgba(18,15,12,0.45);
}
.ateliers--steampunk .stages{ border-top-color:rgba(242,200,119,0.28); }
.ateliers--steampunk .stages h2{
  color:#f2c877;
  text-shadow:0 0 14px rgba(242,200,119,0.45), 0 1px 2px rgba(0,0,0,0.6);
}
.ateliers--steampunk .stages p{ color:rgba(243,233,214,0.85); }

/* ==========================================================
   ESSAI — fond « feuille de papier » détourée derrière chaque
   section.  3 images (feuille_papier_1..3.webp, fond
   transparent) recyclées d'une section à l'autre.
   Actif si <main> a « ateliers--feuilles » (avec --cahier).
   Retour arrière : retirer ce mot dans le HTML, ou restaurer
   l'instantané.

   Principe :
   - la feuille est une couche « ::before » calée DERRIÈRE le
     titre + la fiche (elle les couvre entièrement) ;
   - la photo est remontée : elle commence sur la feuille et
     déborde au-dessus du bord haut ;
   - réglages : --feuille-haut (début de la feuille sous le
     haut du bloc) et la marge haute de .photo.
   ========================================================== */
.ateliers--feuilles .intro-bloc,
.ateliers--feuilles .atelier{
  --feuille-haut:110px;   /* la feuille démarre à cette distance du haut du bloc (place laissée à la photo) */

  display:flex;
  flex-direction:column;
  position:relative;
  overflow:visible;
  background:none;                  /* on enlève le fond + les bords dessinés du mode cahier */
  clip-path:none;
  box-shadow:none;
  border-radius:0;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,0.45));
  /* marge pour ne pas écrire sur la spirale (gauche) ni le coin corné (bas-droite) */
  padding:0 clamp(2.4rem,6vw,4rem) clamp(3rem,7vw,4.6rem) clamp(3.4rem,9vw,5.6rem);
}

/* de l'air pour la photo qui déborde au-dessus */
.ateliers--feuilles .ateliers-liste .atelier{ margin-top:clamp(50px,7vw,90px); }

/* pas de photo dans l'intro : la feuille part du haut du bloc */
.ateliers--feuilles .intro-bloc{
  --feuille-haut:0px;
  padding-top:clamp(2.4rem,5vw,3.8rem);
}

/* --- la feuille elle-même (couche de fond) --- */
.ateliers--feuilles .intro-bloc::before,
.ateliers--feuilles .atelier::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:var(--feuille-haut);
  bottom:0;
  z-index:0;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;        /* la feuille couvre toute la zone titre + fiche */
  pointer-events:none;
}

/* titre + contenu : toujours au-dessus de la feuille */
.ateliers--feuilles .intro-bloc > *,
.ateliers--feuilles .atelier > *{ position:relative; z-index:2; }

/* la photo : commence sur la feuille et déborde légèrement au-dessus */
.ateliers--feuilles .atelier > .photo{
  order:-1;
  margin-top:-40px;                 /* débord vers le haut ; augmente pour sortir plus la photo */
  margin-bottom:clamp(1rem,2.5vw,1.7rem);
}
.ateliers--feuilles .atelier > .atelier__entete{ margin-top:0; }

@media (max-width:600px){
  .ateliers--feuilles .intro-bloc,
  .ateliers--feuilles .atelier{ --feuille-haut:70px; }
  .ateliers--feuilles .atelier > .photo{ margin-top:-24px; }
}

/* --- affectation des 3 feuilles, recyclées --- */
/* intro : 2 blocs */
.ateliers--feuilles .intro-texte .intro-bloc:nth-of-type(1)::before{ background-image:url("../images/ateliers/feuille_papier_1.webp"); }
.ateliers--feuilles .intro-texte .intro-bloc:nth-of-type(2)::before{ background-image:url("../images/ateliers/feuille_papier_2.webp"); }

/* 6 ateliers : 1-2-3-1-2-3 */
.ateliers--feuilles .ateliers-liste .atelier:nth-of-type(1)::before{ background-image:url("../images/ateliers/feuille_papier_1.webp"); }
.ateliers--feuilles .ateliers-liste .atelier:nth-of-type(2)::before{ background-image:url("../images/ateliers/feuille_papier_2.webp"); }
.ateliers--feuilles .ateliers-liste .atelier:nth-of-type(3)::before{ background-image:url("../images/ateliers/feuille_papier_3.webp"); }
.ateliers--feuilles .ateliers-liste .atelier:nth-of-type(4)::before{ background-image:url("../images/ateliers/feuille_papier_1.webp"); }
.ateliers--feuilles .ateliers-liste .atelier:nth-of-type(5)::before{ background-image:url("../images/ateliers/feuille_papier_2.webp"); }
.ateliers--feuilles .ateliers-liste .atelier:nth-of-type(6)::before{ background-image:url("../images/ateliers/feuille_papier_3.webp"); }

/* --- écritures plus foncées sur les feuilles (meilleur contraste sur le papier clair) --- */
.ateliers--feuilles .intro-bloc,
.ateliers--feuilles .intro-bloc p,
.ateliers--feuilles .atelier .champ__val{
  color:#171009;                    /* corps de texte : brun quasi noir */
}
.ateliers--feuilles .intro-bloc h2,
.ateliers--feuilles .atelier__entete h2{
  color:#120b04;                    /* titres */
}
.ateliers--feuilles .atelier .champ__etq{
  color:#1b2233;                    /* étiquettes de fiche : bleu nuit assombri */
}
.ateliers--feuilles .intro-bloc__soustitre,
.ateliers--feuilles .atelier__sous{
  color:#7a3f16;                    /* sous-titres : lanterne plus dense */
}