/* ATELIER — CSS HEX-only (genere depuis atelier.html) | Palette Accord D | 100% HEX */


/* ─── TOKENS ───
   Cette page portait DEUX :root de palette. Le premier posait des accents
   propres à l'Atelier (--rds-accent #DD8B8B, --rds-accent-2 #A89AC9,
   --rds-vert #5FA37C, --rds-vert-deep #2E5C42) mais le second, plus
   spécifique (:root:has(.v1)), les restaurait aussitôt aux valeurs
   standard : ces quatre couleurs n'ont jamais été rendues (vérifié au
   navigateur — --rds-accent y valait bien la valeur standard). Le second, lui,
   recopiait simplement la palette de style.css.
   Les deux ont été retirés le 2026-07-24 : la palette vient désormais
   uniquement de style.css, comme sur les autres pages. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* background:#161009 retiré ici : il était battu par `html body` de style.css
   (0-0-2 contre 0-0-1) et n'a jamais été rendu — le fond mesuré est #FAF1ED. */
body { font-family: var(--rds-font-body); font-weight: 300; color: var(--rds-encre); }

/* ─── NAV — géré par style.css (suppression des surcharges conflictuelles) ─── */

/* ─── Switcher de variantes (sticky sous nav) ─── */
.var-switcher {
  position: sticky; top: 72px; z-index: 100;
  background: #FAF1EDF5;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #2A1F1A14;
  padding: 0.7rem 3rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.var-switcher__label {
  font-family: var(--rds-font-body); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-taupe);
}
.var-switcher__btns { display: flex; gap: 0.5rem; }
.var-switcher__btn {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 1.1rem; border-radius: 24px;
  border: 1px solid #2A1F1A2E;
  background: transparent; color: var(--rds-taupe); cursor: pointer;
  transition: all var(--rds-transition);
}
.var-switcher__btn:hover { border-color: #37734A80; color: var(--rds-vert); }
.var-switcher__btn--active {
  background: var(--rds-vert); color: #fff;
  border-color: var(--rds-vert);
}

/* ─── Utilitaires partagés ─── */
.surtitre {
  display: block; font-family: var(--rds-font-body); font-size: 0.7rem;
  font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rds-surtitre); margin-bottom: 1rem;
}
.btn-primary {
  display: inline-block; background: var(--rds-cta-2); color: var(--rds-cta-texte);
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.4rem; border: none; border-radius: var(--rds-radius); cursor: pointer;
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.btn-primary:hover { filter: brightness(0.88); transform: translateY(-2px); }
.btn-outline {
  display: inline-block; background: transparent; color: var(--rds-encre);
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.4rem; border: 1.5px solid var(--rds-encre);
  border-radius: var(--rds-radius); cursor: pointer;
  transition: background var(--rds-transition), color var(--rds-transition), transform var(--rds-transition);
}
.btn-outline:hover { background: var(--rds-encre); color: var(--rds-fond); transform: translateY(-2px); }
.btn-outline-vert {
  display: inline-block; background: transparent; color: var(--rds-vert);
  font-family: var(--rds-font-body); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 0.9rem 2.2rem; border: 1.5px solid var(--rds-vert);
  border-radius: var(--rds-radius); cursor: pointer;
  transition: background var(--rds-transition), color var(--rds-transition), transform var(--rds-transition);
}
.btn-outline-vert:hover { background: var(--rds-vert); color: #fff; transform: translateY(-2px); }

/* Placeholders */
.ph {
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-family: var(--rds-font-body); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; padding: 12px;
}
.ph--rose {
  background: repeating-linear-gradient(45deg, #7337571F 0px, #7337571F 1px, #73375738 1px, #73375738 14px);
  border: 1px dashed #7337574D;
  color: var(--rds-taupe);
}
.ph--vert {
  background: repeating-linear-gradient(45deg, #37734A1A 0px, #37734A1A 1px, #37734A33 1px, #37734A33 14px);
  border: 1px dashed #37734A47;
  color: var(--rds-taupe);
}
.ph--or {
  background: repeating-linear-gradient(-45deg, #C9A4581F 0px, #C9A4581F 1px, #C9A45838 1px, #C9A45838 14px);
  border: 1px dashed #C9A45847;
  color: var(--rds-taupe);
}
.ph--parme {
  background: repeating-linear-gradient(45deg, #C9A4581F 0px, #C9A4581F 1px, #C9A45838 1px, #C9A45838 14px);
  border: 1px dashed #C9A45847;
  color: var(--rds-taupe);
}
.ph--vert-fonce {
  background: repeating-linear-gradient(45deg, #FFFFFF0A 0px, #FFFFFF0A 1px, #FFFFFF14 1px, #FFFFFF14 14px), var(--rds-vert-deep);
  border: 1px dashed #FFFFFF26;
  color: #FFFFFFCC;
}

/* ─── Hero partagé ─── */
.page-hero {
  min-height: 480px; position: relative; overflow: hidden;
  display: flex; align-items: center; background: var(--rds-fond);
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg .ph { height: 100%; border-radius: 0; }
.page-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      #FAF1EDEB 0%,
      #FAF1EDD9 28%,
      #FAF1ED80 60%,
      #FAF1ED26 100%
    ),
    linear-gradient(to bottom,
      #FAF1ED47 0%,
      transparent 30%,
      transparent 70%,
      #FAF1ED66 100%
    );
}
.page-hero__content {
  position: relative; z-index: 1; padding: 7rem 3rem 5rem;
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
.page-hero__tag {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--rds-font-body); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--rds-vert);
  margin-bottom: 1.4rem; padding: 0.4rem 1rem;
  border: 1px solid #37734A59;
  border-radius: 40px;
  background: #FAF1EDB8;
  backdrop-filter: blur(4px);
}
.page-hero__tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rds-vert); flex-shrink: 0; }
.page-hero__logo { height: clamp(54px, 6vw, 80px); width: auto; display: block; margin-bottom: 0.3rem; }
.page-hero__byline {
  font-family: var(--rds-font-body); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--rds-taupe); margin-bottom: 1rem;
}
.page-hero__sep { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.page-hero__sep-line { width: 40px; height: 1px; background: #C9A4588C; }
.page-hero__tagline {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 300;
  color: var(--rds-taupe); line-height: 1.65; max-width: 480px; text-wrap: pretty;
}

/* ─── Page title block ─── */
.page-title-block {
  background: var(--rds-fond); padding: 4rem 3rem 2rem; text-align: center;
  border-bottom: 1px solid #2A1F1A12;
}
.page-title-block h1 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.15; margin-bottom: 0.8rem;
}

/* ─── Footer — géré par style.css (suppression des surcharges conflictuelles) ─── */

/* ─── Cadre doré universel (réutilisé de services-v2) ─── */
.gold-frame {
  position: relative; display: block;
  padding: 0;
  background: #F7ECE4;
  border: 1px solid #C9A45873;
  border-radius: 5px;
  box-shadow: 0 0 0 3px var(--rds-fond), 0 0 0 4px #C9A4582E, 0 4px 20px #2A1F1A0F;
}
.gold-frame > img, .gold-frame > .gf-inner { display: block; width: 100%; border-radius: 3px; }
.gold-frame__corner {
  position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 2;
}
.gold-frame__corner svg { width: 20px; height: 20px; display: block; }
.gold-frame__corner--tl { top: -1px; left: -1px; }
.gold-frame__corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.gold-frame__corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.gold-frame__corner--br { bottom: -1px; right: -1px; transform: scale(-1); }

/* ════════════════════════════════════════
   V1 — ÉDITORIAL CLASSIQUE
   Hero + bandeau prochain atelier + bloc vert "L'Atelier du dimanche"
   + Mot de Saliha + Calendrier + Côté pratique + CTA
   ════════════════════════════════════════ */
.v1 { background: var(--rds-fond); }

/* Hero — plus aucune règle ici depuis le 2026-09-27 (1.34.6) : la page a perdu
   sa photo de hero (hero-ateliers.webp, retirée du thème) et reprend l'introduction
   sans photo de Créations, `.creations-intro*`, stylée dans style.css. Les règles
   `.v1__edito*` de l'ancien hero photo, devenues sans cible, ont été retirées :
   `git show f78313e:assets/css/atelier.css` les restitue pour un futur hero photo. */

/* Le mot de Saliha (couleurs habituelles, fond crème) */
/* 2026-09-10 — recalibrage du vide vertical, dans la continuité des bandes de
   fin de « Notre Histoire » et « Services » (`1.28.4`). Contrairement à
   celles-là, la cause est ici UNIQUE et tient tout entière dans cette
   déclaration : aucun séparateur floral, aucune marge de premier ou dernier
   élément (l'exergue n'a pas de margin-top, la signature pas de
   margin-bottom), aucune min-height. Le vide mesuré valait donc exactement le
   padding : 96px en haut, 112px en bas.
   ⚠️ L'asymétrie 6rem / 7rem est supprimée au profit d'un 3.5rem symétrique :
   les 16px supplémentaires du bas ne pesaient sous rien — la signature est le
   dernier élément — et déséquilibraient la citation vers le haut de son cadre.
   Les deux filets 1px se conservent : ce sont les bornes visuelles de la
   section, pas de l'espacement (ils expliquent le 57px mesuré pour 56px de
   padding). Écarts internes intacts : 32px exergue → citation, 40px
   citation → signature. */
.v1__mot {
  background: var(--rds-fond); color: var(--rds-encre);
  padding: 3.5rem 3rem; position: relative;
  border-top: 1px solid #2A1F1A12;
  border-bottom: 1px solid #2A1F1A12;
}
.v1__mot-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.v1__mot-eyebrow {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--rds-vert); margin-bottom: 2rem;
  display: block;
}
.v1__mot-quote {
  font-family: var(--rds-font-title); font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 300;
  color: var(--rds-encre); line-height: 1.6; text-wrap: pretty;
}
.v1__mot-quote em { color: var(--rds-or); font-style: italic; }
.v1__mot-sig {
  margin-top: 2.5rem;
  font-family: var(--rds-font-title); font-style: italic;
  font-size: 1.1rem; color: var(--rds-taupe);
}
.v1__mot-sig::before {
  content: ''; display: block; width: 50px; height: 1px;
  background: #C9A458B3;
  margin: 0 auto 1.2rem;
}

/* Côté pratique (split : liste à gauche, vidéo en cadre doré à droite) */
.v1__pratique {
  background: var(--rds-blanc); padding: 6rem 3rem;
}
.v1__pratique-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
/* Sans vidéo, la section ne rend AUCUN média (pas de cadre vide) : la grille
   n'a plus qu'un enfant. Une seule colonne, et une largeur de lecture plafonnée
   — pleine largeur, la liste s'étirerait sur 1200 px, bien au-delà du confort de
   lecture. 720 px reste proche des ~560 px de la colonne en mode deux colonnes.
   ⚠️ Classe posée par PHP (inc/rds-atelier-body.php), jamais par `:has()` : elle
   doit rester vérifiable dans le HTML servi. */
.v1__pratique-inner--sans-media {
  grid-template-columns: 1fr;
  max-width: 720px;
}
.v1__pratique h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2; margin-bottom: 1.2rem;
}
.v1__pratique > .v1__pratique-inner > div > p {
  font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.85; margin-bottom: 1.8rem;
}
.v1__pratique-list { list-style: none; padding: 0; }
.v1__pratique-list li {
  display: flex; gap: 0.9rem; padding: 0.85rem 0;
  font-size: 0.92rem; color: var(--rds-encre); line-height: 1.55;
  border-bottom: 1px dashed #C9A45859;
}
.v1__pratique-list li:last-child { border-bottom: none; }
.v1__pratique-check {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; background: #37734A24;
  display: flex; align-items: center; justify-content: center;
  color: var(--rds-vert);
}
.v1__pratique-check svg { width: 19px; height: 19px; fill: currentColor; }
/* La palette (icône n°4) a une masse visuelle plus dense à taille CSS égale — légèrement réduite pour rester homogène avec les 4 autres. */
.v1__pratique-list li:nth-child(4) .v1__pratique-check svg { width: 18px; height: 18px; }

.v1__intro {
  background: var(--rds-fond-alt); padding: 5rem 3rem;
  border-bottom: 1px solid #2A1F1A14;
}
.v1__intro-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.v1__intro-text {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 300;
  color: var(--rds-taupe); line-height: 1.75;
}
.v1__intro-text p + p { margin-top: 1rem; }
.v1__intro-text strong { font-style: normal; font-weight: 500; color: var(--rds-encre); font-family: var(--rds-font-body); font-size: 0.95rem; letter-spacing: 0.02em; }

/* Bloc infos pratiques (4 colonnes) */
.v1__infos {
  max-width: 1100px; margin: -3rem auto 0; position: relative; z-index: 2;
  background: var(--rds-surface, #F4E5DE); border-radius: 8px;
  box-shadow: 0 12px 40px #2A1F1A14;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid #37734A2E;
}
.v1__info {
  padding: 2rem 1.8rem;
  border-right: 1px solid #2A1F1A14;
  text-align: center;
}
.v1__info:last-child { border-right: none; }
.v1__info-icon {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 1rem;
  background: #37734A1F;
  border: 1px solid #37734A47;
  display: flex; align-items: center; justify-content: center;
}
.v1__info-icon svg { width: 18px; height: 18px; stroke: var(--rds-vert); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v1__info-label {
  font-family: var(--rds-font-body); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-taupe);
  margin-bottom: 0.4rem; display: block;
}
.v1__info-val {
  font-family: var(--rds-font-title); font-size: 1.25rem;
  font-weight: 400; color: var(--rds-encre); line-height: 1.25;
}

/* Section déroulé */
.v1__deroule {
  padding: 6rem 3rem 5rem; background: var(--rds-fond);
}
.v1__deroule-inner { max-width: 1100px; margin: 0 auto; }
.v1__deroule-head { text-align: center; margin-bottom: 4rem; }
.v1__deroule-head h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2; margin-bottom: 0.8rem;
}
.v1__deroule-head p {
  font-size: 0.95rem; color: var(--rds-taupe); max-width: 580px; margin: 0 auto; line-height: 1.7;
}
.v1__steps {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 5rem;
  position: relative;
}
.v1__step { display: flex; gap: 1.5rem; }
.v1__step-num {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 3rem; font-weight: 300; line-height: 1;
  color: var(--rds-vert); opacity: 0.7; flex-shrink: 0; min-width: 60px;
}
.v1__step-time {
  font-family: var(--rds-font-body); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--rds-or); margin-bottom: 0.4rem; display: block;
}
.v1__step-title {
  font-family: var(--rds-font-title);
  font-size: 1.3rem; font-weight: 400; color: var(--rds-encre); margin-bottom: 0.6rem;
}
.v1__step-text { font-size: 0.9rem; color: var(--rds-taupe); line-height: 1.75; }

/* Carrousel + side */
.v1__gallery {
  background: var(--rds-vert); padding: 6rem 3rem; position: relative; overflow: hidden;
}
.v1__gallery::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 10% 50%, #FFFFFF14 0%, transparent 70%);
}
.v1__gallery-inner {
  max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.v1__gallery h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: #fff; line-height: 1.2; margin-bottom: 1.2rem;
}
.v1__gallery p { font-size: 0.95rem; color: #FFFFFFC7; line-height: 1.85; margin-bottom: 1.8rem; }
.v1__gallery ul { list-style: none; padding: 0; margin-bottom: 1.8rem; }
.v1__gallery ul li {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 1.05rem; color: #FFFFFFEB; line-height: 1.6;
  padding: 0.5rem 0; padding-left: 1.5rem; position: relative;
  border-bottom: 1px solid #FFFFFF1A;
}
.v1__gallery ul li::before {
  content: '✦'; position: absolute; left: 0; color: var(--rds-or); font-size: 0.8rem; top: 0.7rem;
}

/* Témoignages */
.v1__quotes { padding: 6rem 3rem; background: var(--rds-fond-alt); }
.v1__quotes-inner { max-width: 1100px; margin: 0 auto; }
.v1__quotes-head { text-align: center; margin-bottom: 3.5rem; }
.v1__quotes-head h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 500; color: var(--rds-encre);
}
.v1__quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.v1__quote {
  background: var(--rds-surface, #F4E5DE); padding: 2.2rem 2rem; border-radius: 8px;
  border: 1px solid #2A1F1A12;
  position: relative;
}
.v1__quote-mark {
  position: absolute; top: 1rem; left: 1.5rem;
  font-family: var(--rds-font-title); font-style: italic;
  font-size: 4rem; line-height: 1; color: var(--rds-or); opacity: 0.4;
}
.v1__quote-text {
  font-family: var(--rds-font-title); font-style: italic;
  font-size: 1.05rem; line-height: 1.7; color: var(--rds-encre);
  margin-top: 1.5rem; margin-bottom: 1.2rem;
}
.v1__quote-author {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--rds-vert);
}

/* CTA */
/* 2026-09-10 — même recalibrage, aligné sur `.sB__cta` (bande rose de fin de
   « Services », corrigée en `1.28.4`) : rôle identique, composition identique
   — un surtitre, un titre, un texte et deux boutons. Ses 52px de respiration
   sont donc repris tels quels, ce qui est une harmonie de rythme et non une
   copie de valeur. Ici encore la cause du vide est UNIQUE : ce padding seul.
   Le surtitre n'a pas de margin-top, `.v1__cta-btns` pas de margin-bottom,
   pas de min-height. Écarts internes intacts : 16px surtitre → titre, 16px
   titre → texte, 32px texte → boutons. */
.v1__cta { background: var(--rds-rose-embleme); padding: 3.25rem 3rem; text-align: center; }
.v1__cta h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 500;
  color: var(--rds-encre); margin-bottom: 1rem; line-height: 1.2;
}
.v1__cta p {
  font-size: 0.9rem; color: var(--rds-taupe); margin-bottom: 2rem;
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.v1__cta-btns { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }


/* ════════════════════════════════════════
   V2 — PROGRAMME DES PROCHAINS ATELIERS
   Mosaïque par mois + détails + inscription
   ════════════════════════════════════════ */
.v2 { background: var(--rds-fond); }

/* Bandeau "prochaine date" */
.v2__next {
  background: var(--rds-fond-alt);
  border-bottom: 1px solid #2A1F1A14;
  padding: 2.5rem 3rem;
}
.v2__next-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap;
}
.v2__next-left { display: flex; align-items: center; gap: 2rem; }
.v2__next-date {
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem 1.4rem;
  background: var(--rds-vert); color: #fff; border-radius: 6px;
  min-width: 96px;
}
.v2__next-date-day {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 2.6rem; font-weight: 300; line-height: 1;
}
.v2__next-date-month {
  font-family: var(--rds-font-body); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0.4rem;
  color: #FFFFFFD9;
}
.v2__next-info-label {
  font-family: var(--rds-font-body); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--rds-vert); margin-bottom: 0.4rem;
}
.v2__next-info-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 1.5rem; font-weight: 500; color: var(--rds-encre); margin-bottom: 0.4rem;
  line-height: 1.2;
}
.v2__next-info-meta { font-size: 0.85rem; color: var(--rds-taupe); }

/* Programme grid */
.v2__programme { padding: 6rem 3rem; }
.v2__programme-inner { max-width: 1100px; margin: 0 auto; }
.v2__programme-head { text-align: center; margin-bottom: 3.5rem; }
.v2__programme-head h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; color: var(--rds-encre);
  line-height: 1.2; margin-bottom: 0.8rem;
}
.v2__programme-head p { font-size: 0.95rem; color: var(--rds-taupe); max-width: 540px; margin: 0 auto; line-height: 1.7; }

.v2__months {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.v2__month {
  background: var(--rds-surface, #F4E5DE); border-radius: 8px; overflow: hidden;
  border: 1px solid #2A1F1A12;
  box-shadow: var(--rds-shadow);
  display: flex; flex-direction: column;
  transition: transform var(--rds-transition), box-shadow var(--rds-transition);
}
.v2__month:hover { transform: translateY(-4px); box-shadow: 0 14px 40px #2A1F1A21; }
.v2__month--featured {
  border-color: #37734A59;
  box-shadow: 0 4px 24px #37734A1F;
}
.v2__month-img { width: 100%; aspect-ratio: 4/3; }
.v2__month-img-special {
  position: relative;
}
.v2__month-img-special::after {
  content: 'Spécial décembre'; position: absolute; top: 12px; left: 12px;
  background: var(--rds-or); color: #fff;
  font-family: var(--rds-font-body); font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.35rem 0.8rem; border-radius: 20px;
}
.v2__month-body { padding: 1.6rem 1.6rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.v2__month-date {
  display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.7rem;
}
.v2__month-day {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 1.6rem; font-weight: 400; color: var(--rds-vert); line-height: 1;
}
.v2__month-month {
  font-family: var(--rds-font-body); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-taupe);
}
.v2__month-title {
  font-family: var(--rds-font-title);
  font-size: 1.25rem; font-weight: 400; color: var(--rds-encre);
  margin-bottom: 0.6rem; line-height: 1.3;
}
.v2__month-text { font-size: 0.85rem; color: var(--rds-taupe); line-height: 1.7; flex: 1; margin-bottom: 1.2rem; }
.v2__month-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1rem; border-top: 1px solid #2A1F1A12;
}
.v2__month-spots {
  font-family: var(--rds-font-body); font-size: 0.7rem; color: var(--rds-taupe);
  display: flex; align-items: center; gap: 0.4rem;
}
.v2__month-spots-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rds-vert);
}
.v2__month-spots-dot--low { background: var(--rds-or); }
.v2__month-spots-dot--full { background: var(--rds-taupe); }
.v2__month-link {
  font-family: var(--rds-font-body); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rds-vert); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap var(--rds-transition);
}
.v2__month-link:hover { gap: 0.7rem; }

/* Comment ça se passe (split) */
.v2__how {
  background: var(--rds-fond-alt); padding: 6rem 3rem;
  border-top: 1px solid #2A1F1A14;
}
.v2__how-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.v2__how h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2; margin-bottom: 1.2rem;
}
.v2__how p { font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.85; margin-bottom: 1.5rem; }
.v2__how-list { list-style: none; padding: 0; }
.v2__how-list li {
  display: flex; gap: 0.9rem; padding: 0.7rem 0;
  font-size: 0.92rem; color: var(--rds-encre); line-height: 1.55;
  border-bottom: 1px dashed #C9A45859;
}
.v2__how-list li:last-child { border-bottom: none; }
.v2__how-check {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; background: #37734A24;
  display: flex; align-items: center; justify-content: center;
}
.v2__how-check svg { width: 12px; height: 12px; stroke: var(--rds-vert); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Réservation */
.v2__reservation {
  background: var(--rds-vert); padding: 5rem 3rem; position: relative; overflow: hidden;
}
.v2__reservation::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, #FFFFFF14 0%, transparent 70%);
}
.v2__reservation-inner {
  max-width: 900px; margin: 0 auto; position: relative; z-index: 1;
  text-align: center;
}
.v2__reservation h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 500;
  color: #fff; line-height: 1.2; margin-bottom: 1rem;
}
.v2__reservation p { font-size: 0.95rem; color: #FFFFFFC7; line-height: 1.7; margin-bottom: 2.2rem; }
.v2__reservation-cta {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.v2__reservation-phone {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: #fff; color: var(--rds-vert);
  font-family: var(--rds-font-body); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.14em; text-decoration: none;
  padding: 1.05rem 2rem; border-radius: var(--rds-radius);
}
.v2__reservation-phone svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2__reservation-mail {
  display: inline-block; background: transparent; color: #FFFFFFF2;
  font-family: var(--rds-font-body); font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.2rem; border: 1px solid #FFFFFF66;
  border-radius: var(--rds-radius);
  transition: background var(--rds-transition), border-color var(--rds-transition);
}
.v2__reservation-mail:hover { background: #FFFFFF1F; border-color: #fff; }


/* ════════════════════════════════════════
   V3 — IMMERSIVE VERTE
   Page poétique, fond signature vert dominant
   ════════════════════════════════════════ */
.v3 { background: var(--rds-vert-deep); color: #fff; }
.v3 .surtitre { color: #D4B679; }

/* Hero v3 (override) */
.v3__hero {
  min-height: 620px; position: relative; overflow: hidden;
  background: var(--rds-vert-deep);
  display: flex; align-items: center;
}
.v3__hero-bg {
  position: absolute; inset: 0;
}
.v3__hero-bg .ph { height: 100%; border-radius: 0; }
.v3__hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      #2D5E3DE6 0%,
      #2D5E3DB3 40%,
      #2D5E3D4D 100%
    ),
    linear-gradient(to bottom, transparent 60%, #2D5E3D80 100%);
}
.v3__hero-inner {
  position: relative; z-index: 1; padding: 8rem 3rem 6rem;
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
.v3__hero-tag {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--rds-font-body); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: #FFFFFFD9;
  margin-bottom: 1.4rem; padding: 0.4rem 1rem;
  border: 1px solid #FFFFFF52; border-radius: 40px;
}
.v3__hero-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rds-or); flex-shrink: 0; }
.v3__hero-byline {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: #FFFFFF8C;
  margin-bottom: 1.2rem;
}
.v3__hero-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 500;
  color: #fff; line-height: 1; margin-bottom: 1.6rem; letter-spacing: -0.01em;
}
.v3__hero-title em { color: var(--rds-or); font-style: italic; }
.v3__hero-sep { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.v3__hero-sep-line { width: 56px; height: 1px; background: #C9A458B3; }
.v3__hero-tagline {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 300;
  color: #FFFFFFC7; line-height: 1.6; max-width: 540px; text-wrap: pretty;
  margin-bottom: 2.5rem;
}
.v3__hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.v3__hero-cta-primary {
  display: inline-block; background: var(--rds-or); color: var(--rds-vert-deep);
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.4rem; border-radius: var(--rds-radius);
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.v3__hero-cta-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.v3__hero-cta-ghost {
  display: inline-block; background: transparent; color: #FFFFFFEB;
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.4rem; border: 1px solid #FFFFFF66;
  border-radius: var(--rds-radius);
}
.v3__hero-cta-ghost:hover { background: #FFFFFF14; border-color: #fff; }

/* Bande infos pratiques */
.v3__bandeau {
  background: #244A37; padding: 2.5rem 3rem;
  border-top: 1px solid #FFFFFF14;
  border-bottom: 1px solid #FFFFFF14;
}
.v3__bandeau-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem;
}
.v3__bandeau-item { display: flex; align-items: flex-start; gap: 1rem; }
.v3__bandeau-item svg { width: 22px; height: 22px; stroke: var(--rds-or); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }
.v3__bandeau-label {
  font-family: var(--rds-font-body); font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: #FFFFFF80; margin-bottom: 0.3rem; display: block;
}
.v3__bandeau-val {
  font-family: var(--rds-font-title); font-size: 1.05rem;
  font-weight: 400; color: #FFFFFFEB; line-height: 1.3;
}

/* Manifeste */
.v3__manifeste { padding: 7rem 3rem 5rem; position: relative; }
.v3__manifeste-inner {
  max-width: 880px; margin: 0 auto; text-align: center;
}
.v3__manifeste-eyebrow {
  font-family: var(--rds-font-body); font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--rds-or); margin-bottom: 1.2rem; display: block;
}
.v3__manifeste-text {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 300;
  color: #FFFFFFEB; line-height: 1.55; text-wrap: pretty;
}
.v3__manifeste-text em { color: var(--rds-or); font-style: italic; }
.v3__manifeste-sig {
  margin-top: 2.5rem;
  font-family: var(--rds-font-title); font-style: italic;
  font-size: 1.15rem; color: #FFFFFF8C;
}
.v3__manifeste-sig::before {
  content: ''; display: block; width: 50px; height: 1px;
  background: #C9A45899;
  margin: 0 auto 1rem;
}

/* Mosaïque immersive */
.v3__mosaique { padding: 4rem 3rem 7rem; }
.v3__mosaique-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 220px 220px 220px;
  gap: 1rem;
}
.v3__mosaique-item { position: relative; overflow: hidden; border-radius: 4px; }
.v3__mosaique-item .ph { width: 100%; height: 100%; border-radius: 0; }
.v3__mosaique-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.v3__mosaique-item:nth-child(2) { grid-column: 4 / 6; grid-row: 1 / 2; }
.v3__mosaique-item:nth-child(3) { grid-column: 6 / 7; grid-row: 1 / 3; }
.v3__mosaique-item:nth-child(4) { grid-column: 4 / 5; grid-row: 2 / 3; }
.v3__mosaique-item:nth-child(5) { grid-column: 5 / 6; grid-row: 2 / 3; }
.v3__mosaique-item:nth-child(6) { grid-column: 1 / 3; grid-row: 3 / 4; }
.v3__mosaique-item:nth-child(7) { grid-column: 3 / 5; grid-row: 3 / 4; }
.v3__mosaique-item:nth-child(8) { grid-column: 5 / 7; grid-row: 3 / 4; }

/* Calendrier list (simple) */
.v3__calendrier {
  background: #244A37; padding: 6rem 3rem;
  border-top: 1px solid #FFFFFF0F;
}
.v3__calendrier-inner { max-width: 980px; margin: 0 auto; }
.v3__calendrier-head { text-align: center; margin-bottom: 3.5rem; }
.v3__calendrier-head h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: #fff; line-height: 1.2; margin-bottom: 0.8rem;
}
.v3__calendrier-head p {
  font-size: 0.95rem; color: #FFFFFF9E;
  max-width: 520px; margin: 0 auto; line-height: 1.7;
}
.v3__calendrier-list { display: flex; flex-direction: column; }
.v3__cal-row {
  display: grid; grid-template-columns: 80px 1fr auto auto;
  gap: 2rem; align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid #FFFFFF1A;
  transition: padding var(--rds-transition);
}
.v3__cal-row:hover { padding-left: 1rem; }
.v3__cal-row:last-child { border-bottom: 1px solid #FFFFFF1A; }
.v3__cal-date {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 1.5rem; color: var(--rds-or); line-height: 1;
}
.v3__cal-date small {
  display: block; font-family: var(--rds-font-body); font-style: normal;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #FFFFFF80; margin-top: 0.4rem;
}
.v3__cal-title {
  font-family: var(--rds-font-title);
  font-size: 1.2rem; font-weight: 400; color: #fff; line-height: 1.3;
}
.v3__cal-title small {
  display: block; font-family: var(--rds-font-body); font-size: 0.78rem;
  font-weight: 300; color: #FFFFFF8C; margin-top: 0.3rem; letter-spacing: 0;
  text-transform: none;
}
.v3__cal-status {
  font-family: var(--rds-font-body); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.v3__cal-status-dot { width: 6px; height: 6px; border-radius: 50%; }
.v3__cal-status--ok { color: var(--rds-or); border: 1px solid #C9A45880; }
.v3__cal-status--ok .v3__cal-status-dot { background: var(--rds-or); }
.v3__cal-status--low { color: #FFFFFFD9; border: 1px solid #FFFFFF4D; }
.v3__cal-status--low .v3__cal-status-dot { background: #FFFFFFD9; }
.v3__cal-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF14; transition: background var(--rds-transition);
}
.v3__cal-row:hover .v3__cal-arrow { background: var(--rds-or); }
.v3__cal-arrow svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v3__cal-row:hover .v3__cal-arrow svg { stroke: var(--rds-vert-deep); }

/* CTA */
.v3__final {
  padding: 7rem 3rem; text-align: center; position: relative; overflow: hidden;
}
.v3__final::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, #FFFFFF0F 0%, transparent 70%);
}
.v3__final-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.v3__final-eyebrow {
  font-family: var(--rds-font-body); font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--rds-or); margin-bottom: 1.2rem; display: block;
}
.v3__final h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500;
  color: #fff; line-height: 1.15; margin-bottom: 1.5rem;
}
.v3__final p {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 1.15rem; color: #FFFFFFAD; line-height: 1.7;
  max-width: 520px; margin: 0 auto 2.5rem;
}
.v3__final-cta { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }


/* ⚠️ Le bloc .atelier-carousel a été retiré le 2026-08-26 avec le carrousel
   de secours de « Côté pratique » : la vidéo est le seul média de cette page,
   et atelier.css n’est chargé que sur /atelier/ (functions.php). Les règles
   .atelier-carousel de contact.css et services.css restent nécessaires — ces
   deux pages rendent réellement un carrousel, via services.js partagé.
   ❌ Ne pas les recopier ici : cela ferait revivre le mode data-carousel-manual,
   dont les diapositives se calculaient à 0 px de haut (dette close). */

/* ─── Responsive 900px ─── */
@media (max-width: 900px) {
  .v1__intro-inner, .v1__steps, .v1__gallery-inner, .v2__how-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .v1__quotes-grid, .v2__months { grid-template-columns: 1fr; }
  .v1__infos { grid-template-columns: 1fr 1fr; }
  .v1__info { border-bottom: 1px solid #2A1F1A14; }
  .v1__info:nth-child(2) { border-right: none; }
  .v3__bandeau-inner { grid-template-columns: 1fr 1fr; }
  .v3__mosaique-inner { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .v3__mosaique-item { grid-column: auto !important; grid-row: auto !important; height: 200px; }
  .v3__cal-row { grid-template-columns: 60px 1fr auto; }
  .v3__cal-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   SMARTPHONE — Calendrier & sections adjacentes
   ≤ 768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Section "Le mot de Saliha" */
  /* Voir le commentaire du bloc « Le mot de Saliha » : 64px / 80px de vide
     vertical ramenés à 40px, symétriques. */
  .v1__mot { padding: 2.5rem 1.5rem; }

  /* Section "Côté pratique" — rythme mobile légèrement allégé */
  .v1__pratique { padding: 3.5rem 1.5rem; }
  .v1__pratique-inner { grid-template-columns: 1fr; gap: 3rem; }

  /* CTA final */
  /* Voir le commentaire du bloc « CTA » : 64px de vide vertical ramenés à
     40px, comme sur .cta-final et .sB__cta. */
  .v1__cta { padding: 2.5rem 1.5rem; }
  .v1__cta-btns { flex-direction: column; align-items: stretch; gap: 1rem; }
  .v1__cta-btns a { text-align: center; }
}

/* ════════════════════════════════════════
   « CÔTÉ PRATIQUE » — mini vidéo
   S'affiche dès qu'une vidéo existe : celle livrée avec le thème
   (assets/video/), ou celle déposée dans Réglages RDS, qui a la priorité.
   Sinon le carrousel de photos reste en place (voir rds_atelier_video_html()).

   ⚠️ Aucun ratio n'est écrit ici : il est posé en style inline par
   rds_atelier_video_html(), seule à connaître le fichier réellement servi.
   Une valeur codée à cet endroit rognerait ou déformerait la prochaine vidéo
   déposée dans Réglages RDS.
   ════════════════════════════════════════ */
.atelier-video {
  width: 100%;
  overflow: hidden;
  /* Fond du cadre doré (.gold-frame) plutôt que le rose de marque : il n'est
     visible que dans le seul cas où `contain` laisse une marge — une vidéo
     déposée en médiathèque SANS métadonnées, où le cadre retombe sur 4:5.
     Le rose y aurait encadré la vidéo de deux bandes #FFCBEC à l'intérieur
     d'un cadre doré ; cette valeur-ci se confond avec le cadre. Dans le cas
     normal (cadre au ratio du fichier), aucune marge n'existe : mesuré à 0,0 px
     de 320 à 1440 px de large. */
  background: #F7ECE4;
}
.atelier-video__el,
.atelier-video__fallback {
  width: 100%;
  height: 100%;
  /* `contain` : l'image entre entière dans le cadre, quoi qu'il arrive. Le
     cadre étant déjà posé au ratio natif du fichier (aspect-ratio inline, voir
     rds_atelier_video_html()), il ne laisse aucune marge dans le cas normal —
     il ne protège que le cas limite d'une vidéo déposée en médiathèque sans
     métadonnées, où le cadre retombe sur 4:5 : elle y sera montrée entière
     plutôt que rognée. `cover` a été retiré le 2026-08-15 avec les bandes
     noires qu'il servait à écarter ; ne pas le remettre pour « remplir » le
     cadre, ce serait rogner une vidéo sans raison. `fill` est le seul mode qui
     déforme et n'est utilisé nulle part. */
  object-fit: contain;
  display: block;
}

/* Une vidéo VERTICALE, laissée libre, occuperait près de 1000 px de haut dans
   la colonne de droite : on la plafonne en largeur et on centre le cadre —
   d'où la « mini vidéo » décrite dans Réglages RDS. La classe est posée par
   rds_atelier_video_html() d'après le fichier réellement servi : une vidéo
   paysage ne la reçoit pas et garde toute la largeur de sa colonne.

   Plafond porté de 340 à 440 px le 2026-08-15 : à 340 le bloc paraissait
   étroit et flottant dans une colonne de 560 px qu'il ne remplissait qu'aux
   3/5. Mesuré à 1440 (piste de grille 560 px, bloc de texte 700 px de haut) :

     340 → 602 px de haut, 61 % de la piste  (départ, trop peu de présence)
     420 → 744 px de haut, 75 % de la piste
     440 → 780 px de haut, 79 % de la piste  ← retenu
     460 → 815 px de haut, 82 % de la piste  (la vidéo écrase le texte)

   440 est le meilleur compromis : la vidéo prend de la présence sans devenir
   l'élément dominant de la section. ⚠️ Le ratio étant verrouillé sur le
   fichier, tout gain de largeur se paie en HAUTEUR (+35 px par tranche de
   20 px) — c'est ce qui écarte 460. Au-dessous de ~1056 px de large la piste
   devient plus étroite que ce plafond, qui cesse alors de s'appliquer : c'est
   la largeur de la colonne qui commande, et il n'y a rien à ajuster. */
.v1__pratique .gold-frame:has(.atelier-video--portrait) {
  max-width: 440px;
  margin-inline: auto;
}

/* Mouvement réduit : la vidéo est mise en pause par le script et remise à sa
   première image, si bien que l'affiche (poster) reste visible. On masque en
   plus les contrôles éventuels pour garder une image fixe et calme. */
@media (prefers-reduced-motion: reduce) {
  .atelier-video__el::-webkit-media-controls { display: none !important; }
}