/* ===========================================================================
   A-2 — Fiche atelier (2026-08-12, piste A « ateliers »)

   Feuille du gabarit woocommerce/single-product-ateliers.php, chargée par le
   mécanisme de functions.php §8 : le nom du fichier doit rester exactement
   celui du gabarit résolu (« single-product-ateliers »). Sa seule présence
   dans le <head> d'une page produit prouve que la bifurcation de §11 a bien
   joué — c'est le marqueur permanent du projet, il n'y a rien à poser à la
   main pour le vérifier.

   Le corps qui suit est le bloc <style> de CLAUDE DESIGN/Accueil/Atelier
   detail - production (Gutenberg-ready).html, repris verbatim, à quatre
   exceptions près, toutes liées à des éléments que le gabarit ne rend pas :

   1. Retirées — les règles du rail de réservation qui n'ont plus d'objet :
      .rail__price / .rail__amt / .rail__total / .rail__fine (les trois prix),
      .rail__dates / .date-opt (les quatre dates en dur, aucun agenda —
      SPEC §7), .rail__slider / .rail__cap / input[type=range] /
      .rail__range-ends (le curseur de participants qui alimentait le total).
      La bascule B2C/B2B elle-même (.rail .segmented et son :has()) est
      partie avec le reste, puis revenue en A-2d (2026-08-12) pour un objet
      différent — voir le point 4 et l'addendum A-2d, en fin de fichier.
   2. Adaptée — .deroule li passe de 140px 1fr 1fr à 96px 1fr : la colonne
      horaire du mockup (« T+15 min », « 20 min ») n'existe pas, `deroule` ne
      porte pas de minutage par étape et en inventer un violerait le
      garde-fou n°2.
   3. Ajoutées — l'addendum en fin de fichier, pour les éléments que le
      gabarit introduit là où le mockup posait un placeholder ou un prix.
   4. Reposée — A-2d (2026-08-12) fait revenir .rail .segmented et son
      :has(), retirés au point 1, pour un objet différent : la sélection du
      mode (2 à 4 options selon la fiche) et les panneaux réactifs qui en
      dépendent. Détail dans l'addendum A-2d, en fin de fichier.

   Ce gabarit ne réutilise ni .wine-card (D-B) ni la mise en page boutique
   (D-E) : functions.php §8 ne charge donc pas taxonomy-product-cat.css ici,
   et les neutralisations que D-F a dû écrire sont sans objet.
   =========================================================================== */

/*═══════════════════════════════════════════════════════════════════════════
  (d) CSS — SPÉCIFIQUE « ATELIER DÉTAIL » (mobile-first)
═══════════════════════════════════════════════════════════════════════════*/

/*── HERO éditorial ──────────────────────────────────────────────────────────*/
.hero{ padding:var(--space-12) var(--gutter) var(--space-10); border-bottom:var(--border-firm); background:var(--color-kraft); }
.hero__inner{ max-width:var(--maxw); margin-inline:auto; }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:end; margin-top:var(--space-6); }
.hero h1{ font-size:var(--text-hero); line-height:.95; letter-spacing:-.025em; }
.hero h1 em{ font-style:italic; color:var(--color-bordeaux); }
.hero__angle{ font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); line-height:1.35; color:var(--color-ink-2); max-width:34rem; margin-top:var(--space-5); }
.hero__facts{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-6); align-content:end; }
.hero__facts div{ border-top:var(--border-hair); padding-top:var(--space-2); }
.hero__facts dt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-ink-3); }
.hero__facts dd{ margin:2px 0 0; font-family:var(--font-display); font-size:var(--text-md); font-weight:500; }

/*── LAYOUT contenu + rail ───────────────────────────────────────────────────*/
.layout{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr; align-items:start; }
.content > .ph{ min-height:280px; border-left:0; border-right:0; }
.content section{ padding:var(--space-12) var(--gutter); }
.content .band--cream{ border-block:var(--border-hair); }

/*── Sous-section : en-tête commun ───────────────────────────────────────────*/
.subhead h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-8); }
.subhead h2 em{ font-style:italic; color:var(--color-bordeaux); }

/*── MANIFESTE ─────────────────────────────────────────────────────────────── */
.manifeste__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.manifeste h2{ font-size:var(--text-3xl); line-height:1.05; margin-top:var(--space-5); }
.manifeste h2 em{ font-style:italic; color:var(--color-bordeaux); }
.manifeste p{ font-size:var(--text-md); line-height:1.7; color:var(--color-ink-2); margin-bottom:var(--space-4); text-wrap:pretty; }
.manifeste blockquote{ margin:0 0 var(--space-4); padding:4px 0 4px var(--space-5); border-left:2px solid var(--color-bordeaux); }
.manifeste blockquote p{ font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); line-height:1.35; color:var(--color-ink); margin:0; }
.manifeste .sign{ font-size:var(--text-sm); color:var(--color-ink-3); }

/*── DÉROULÉ (timeline) ──────────────────────────────────────────────────────*/
.deroule ol{ border-top:2px solid var(--color-ink); }
.deroule li{ display:grid; grid-template-columns:1fr; gap:var(--space-2) var(--space-8); padding:var(--space-6) 0; border-bottom:var(--border-hair); }
.deroule .t{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-bordeaux); font-weight:700; letter-spacing:.14em; }
.deroule .n{ font-family:var(--font-display); font-size:var(--text-3xl); line-height:1; color:var(--color-ink); margin-top:4px; }
.deroule .dur{ font-family:var(--font-mono); font-size:11px; color:var(--color-ink-3); margin-top:6px; letter-spacing:.08em; }
.deroule h3{ font-size:var(--text-xl); font-weight:500; }
.deroule p{ font-size:var(--text-base); line-height:1.65; color:var(--color-ink-2); }

/*── LINEUP (5 vins mystère) ─────────────────────────────────────────────────*/
.lineup__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-6); }
.lineup__head h2{ font-size:var(--text-3xl); line-height:1.05; margin-top:var(--space-5); }
.lineup__head h2 em{ font-style:italic; color:var(--color-bordeaux); }
.lineup__note{ font-family:var(--font-display); font-style:italic; font-size:var(--text-sm); color:var(--color-ink-3); max-width:22rem; line-height:1.5; }
.lineup__grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--border-firm); border-left:var(--border-firm); }
.lineup__grid article{ background:var(--color-kraft); border-right:var(--border-firm); border-bottom:var(--border-firm);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); min-height:190px; }
.lineup__grid header{ display:flex; justify-content:space-between; align-items:flex-start; }
.lineup__grid .idx{ font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-ink); line-height:1; }
.lineup__grid .dot{ width:14px; height:14px; border-radius:50%; border:1px solid var(--color-line); }
.dot--blanc{ background:var(--wine-blanc); }
.dot--rose{ background:var(--wine-rose); }
.dot--rouge{ background:var(--wine-rouge); border:none; }
.lineup__grid .qq{ font-family:var(--font-mono); font-size:var(--text-2xl); color:var(--color-line-soft); font-weight:400; letter-spacing:.06em; }
.lineup__grid .region{ font-family:var(--font-display); font-size:var(--text-md); font-weight:500; margin-top:auto; }
.lineup__grid .col{ font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.12em; text-transform:uppercase; margin-top:2px; }
.lineup__grid .hint{ font-size:var(--text-xs); color:var(--color-ink-2); line-height:1.45; margin-top:var(--space-2); font-style:italic; }
.lineup__legend{ margin-top:var(--space-5); display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; font-size:var(--text-sm); color:var(--color-ink-2); }
.lineup__legend .k{ font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.16em; text-transform:uppercase; }
.lineup__legend span.s{ display:inline-flex; align-items:center; gap:var(--space-2); }
.lineup__legend .sw{ width:12px; height:12px; border-radius:50%; border:1px solid var(--color-line); }

/*── POUR QUI ─────────────────────────────────────────────────────────────── */
.pourqui__grid{ display:grid; grid-template-columns:1fr; border:var(--border-firm); }
.pourqui__col{ padding:var(--space-8) var(--space-6); }
.pourqui__col--b2c{ border-bottom:var(--border-firm); }
.pourqui__col--b2b{ background:var(--color-teal-deep); color:var(--color-cream); }
.pourqui__col .k{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin-bottom:var(--space-3); }
.pourqui__col--b2c .k{ color:var(--color-bordeaux); }
.pourqui__col--b2b .k{ color:var(--color-teal-soft); }
.pourqui__col h3{ font-size:var(--text-xl); font-weight:500; line-height:1.15; margin-bottom:var(--space-3); }
.pourqui__col ul{ display:flex; flex-direction:column; gap:var(--space-3); font-size:var(--text-sm); line-height:1.5; }
.pourqui__col li{ display:flex; gap:var(--space-3); align-items:flex-start; }
.pourqui__col li::before{ content:""; width:5px; height:5px; border-radius:50%; margin-top:7px; flex:none; }
.pourqui__col--b2c li::before{ background:var(--color-bordeaux); }
.pourqui__col--b2b li::before{ background:var(--color-teal-soft); }
.pourqui__col--b2b li{ color:rgba(250,244,230,.88); }

/*── TÉMOIGNAGES ──────────────────────────────────────────────────────────── */
.quotes__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); }
.quotes figure{ margin:0; padding:var(--space-8) var(--space-6); background:var(--color-kraft); border-top:2px solid var(--color-bordeaux);
  display:flex; flex-direction:column; gap:var(--space-5); }
.quotes .icon{ font-size:20px; color:var(--color-bordeaux); }
.quotes blockquote{ margin:0; }
.quotes blockquote p{ font-family:var(--font-display); font-size:var(--text-xl); line-height:1.4; }
.quotes figcaption{ padding-top:var(--space-4); border-top:var(--border-hair); font-size:var(--text-sm); color:var(--color-ink-3); }
.quotes figcaption strong{ color:var(--color-ink); }

/*── FAQ ─────────────────────────────────────────────────────────────────── */
.faq__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); }
.faq h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-4); }
.faq h2 em{ font-style:italic; color:var(--color-bordeaux); }
.faq__intro{ font-size:var(--text-sm); color:var(--color-ink-3); }
.faq__intro a{ color:var(--color-bordeaux); }
.faq__list{ border-top:2px solid var(--color-ink); }
.faq__list details{ border-bottom:var(--border-hair); }
.faq__list summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-6);
  padding:var(--space-5) 0; cursor:pointer; list-style:none; font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; }
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary .mark{ font-family:var(--font-mono); font-size:var(--text-2xl); color:var(--color-bordeaux); flex:none; line-height:1; }
.faq__list summary .mark::after{ content:"+"; }
.faq__list details[open] summary .mark::after{ content:"−"; }
.faq__list .answer{ padding:0 var(--space-8) var(--space-5) 0; }
.faq__list .answer p{ font-size:var(--text-base); line-height:1.65; color:var(--color-ink-2); }

/*── RAIL DE RÉSERVATION (sticky) ────────────────────────────────────────────*/
.rail{ background:var(--color-cream); border-top:var(--border-firm); }
.rail__inner{ padding:var(--space-8) var(--gutter); display:flex; flex-direction:column; gap:var(--space-6); }
.rail .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-ink-3); font-weight:700; margin-bottom:var(--space-2); }
.rail__note{ font-family:var(--font-display); font-style:italic; font-size:11px; color:var(--color-ink-3); text-align:center; line-height:1.5; }
.rail__trust{ display:flex; flex-direction:column; gap:var(--space-3); padding-top:var(--space-5); border-top:var(--border-hair); }
.rail__trust div{ display:flex; gap:var(--space-3); align-items:center; font-size:var(--text-xs); color:var(--color-ink-2); }

/*── NEXT (cross-link) ───────────────────────────────────────────────────────*/
.next{ background:var(--color-cream); border-top:var(--border-firm); }
.next__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--space-6); gap:var(--space-4); flex-wrap:wrap; }
.next__grid{ display:grid; grid-template-columns:1fr; border-top:var(--border-firm); }
.next a.card{ text-decoration:none; color:inherit; padding:var(--space-6) var(--gutter); display:flex; flex-direction:column; gap:var(--space-3);
  border-bottom:var(--border-hair); }
.next a.card header{ display:flex; align-items:center; justify-content:space-between; }
.next .n{ font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.16em; color:var(--color-teal-deep); }
.next .icon{ font-size:22px; color:var(--color-teal-deep); }
.next h3{ font-size:var(--text-xl); font-weight:500; line-height:1.1; }
.next .angle{ font-family:var(--font-display); font-style:italic; font-size:var(--text-sm); color:var(--color-ink-3); line-height:1.35; }
.next .more{ margin-top:auto; font-size:var(--text-xs); color:var(--color-bordeaux); font-weight:600; padding-top:var(--space-3); border-top:var(--border-hair); display:inline-flex; align-items:center; gap:var(--space-2); }

/*═══════════════════════════════════════════════════════════════════════════
  (f) RESPONSIVE — 640 / 768 / 1024 / 1280
═══════════════════════════════════════════════════════════════════════════*/
@media (min-width:640px){
  .deroule li{ grid-template-columns:96px 1fr; }
  .lineup__grid{ grid-template-columns:repeat(3,1fr); }
  .quotes__grid{ grid-template-columns:1fr 1fr; }
  .pourqui__grid{ grid-template-columns:1fr 1fr; }
  .pourqui__col--b2c{ border-bottom:0; border-right:var(--border-firm); }
  .next__grid{ grid-template-columns:repeat(3,1fr); }
  .next a.card{ border-bottom:0; border-right:var(--border-hair); }
  .next a.card:last-child{ border-right:0; }
}
@media (min-width:768px){
  .hero__grid{ grid-template-columns:7fr 5fr; }
  .manifeste__grid{ grid-template-columns:5fr 7fr; }
  .lineup__grid{ grid-template-columns:repeat(5,1fr); }
  .faq__grid{ grid-template-columns:5fr 7fr; }
}
@media (max-width:1023px){
  /* mobile : le rail de réservation remonte juste sous le hero (conversion) */
  .rail{ order:-1; border-bottom:var(--border-firm); }
}
@media (min-width:1024px){
  .layout{ grid-template-columns:1fr 380px; }
  .rail{ border-top:0; border-left:var(--border-firm); }
  .rail__inner{ position:sticky; top:var(--header-h); }
}

/* ===========================================================================
   ADDENDUM A-2 — ce que le gabarit ajoute au mockup
   =========================================================================== */

/*── Photo réelle à la place du cadre de cadrage ────────────────────────────
  Le mockup pose un <figure class="ph"> vide et légendé. Un cadre vide en
  production, c'est exactement le placeholder que le garde-fou n°1 interdit :
  le gabarit ne rend cette figure que si le produit a une image, et la remplit.
  Sur les 21 fiches encore sans photo (R07b), la figure n'existe simplement
  pas — pas de trou, pas de légende orpheline. */
.content > .ph--reelle{ min-height:0; margin:0; padding:0; background:none; border-block:var(--border-hair); }
.content > .ph--reelle img{ display:block; width:100%; height:auto; max-height:520px; object-fit:cover; }

/*── Manifeste : les puces d'arguments_cles ─────────────────────────────────
  Le champ NocoDB porte une intro puis des lignes « - ». Le mockup n'avait que
  de la prose ; la liste reprend la mesure et la couleur des paragraphes. */
.manifeste__points{ margin:0 0 var(--space-4); padding-left:var(--space-5); }
.manifeste__points li{ font-size:var(--text-md); line-height:1.7; color:var(--color-ink-2); margin-bottom:var(--space-2); text-wrap:pretty; }

/*── Déroulé sans horaires ──────────────────────────────────────────────────*/
.deroule li > div{ display:flex; align-items:baseline; }
.deroule li > p{ margin:0; }

/*── « Pour qui » : second intertitre dans la même colonne ──────────────────*/
.pourqui__k--suite{ margin-top:var(--space-6); }

/*── Rail de conversion ─────────────────────────────────────────────────────
  Le rail ne vend plus, il qualifie : des faits lus dans la table, puis un
  lien vers /devis-atelier/ avec l'atelier d'origine en paramètre. */
.rail__faits{ display:grid; gap:var(--space-4); padding:var(--space-5) 0; border-block:var(--border-hair); }
.rail__faits > div{ display:block; }
.rail__fait-v{ font-family:var(--font-display); font-size:var(--text-md); font-weight:500; line-height:1.3; color:var(--color-ink); margin:0; }
.rail__cta{ width:100%; justify-content:center; }
.rail__trust{ display:grid; gap:var(--space-5); }
.rail__trust > div{ display:block; }
.rail__trust ul{ margin:0; padding-left:var(--space-5); }
.rail__trust li{ font-size:var(--text-xs); color:var(--color-ink-2); line-height:1.6; }
.rail__salle{ font-size:var(--text-xs); color:var(--color-ink-2); line-height:1.6; margin:0; }

/*── ADDENDUM A-2d — sélecteur de mode (segmented, :has()) ───────────────────
  Repose .rail .segmented et son :has(), retirés en A-2 (voir point 1 de
  l'en-tête). Même mécanisme que la bascule B2C/B2B du mockup — un radio
  masqué, une étiquette stylée par :checked + span — généralisé à 2-4 états
  au lieu de 2 fixes : le nombre de colonnes se pose en style inline depuis
  le gabarit (count($edv_modes_arr)) : les règles :has() ci-dessous sont
  statiques et couvrent les quatre slugs possibles, qu'ils soient rendus ou
  non sur une fiche donnée — une règle qui ne trouve pas son radio ne fait
  rien. DECISIONS.md, A-2c « l'enveloppe résume, le sélecteur détaille ». */
.rail .segmented{ display:grid; border:1.5px solid var(--color-ink); border-radius:var(--radius-pill); overflow:hidden; }
.rail .segmented label{ cursor:pointer; }
.rail .segmented label span{ display:flex; align-items:center; justify-content:center; padding:11px var(--space-3); font-size:var(--text-sm); font-weight:600; text-align:center; }
.rail .segmented input{ position:absolute; opacity:0; width:1px; height:1px; }
.rail .segmented input:checked + span{ background:var(--color-ink); color:var(--color-cream); }
.rail .segmented input:focus-visible + span{ outline:var(--focus-ring); outline-offset:-3px; }

.rail__panel{ display:none; }
.rail__panel > * + *{ margin-top:var(--space-5); }
.rail__resume{ font-size:var(--text-sm); line-height:1.6; color:var(--color-ink-2); }
.layout:has(#rail-mode-atelier:checked) .rail__panel--atelier{ display:block; }
.layout:has(#rail-mode-quiz:checked) .rail__panel--quiz{ display:block; }
.layout:has(#rail-mode-bar-a-vin:checked) .rail__panel--bar-a-vin{ display:block; }
.layout:has(#rail-mode-fresque:checked) .rail__panel--fresque{ display:block; }

/*── Line-up : la grille suit le nombre réel de vins ────────────────────────
  Le mockup fige cinq colonnes. Ici le nombre vient de nb_vins — le Wine Bar
  en compte huit (exception assumée du garde-fou n°3), une fresque avec
  dégustation quatre. auto-fit évite les colonnes vides comme les écrasements. */
@media (min-width:768px){
  .lineup__grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ── A-7.4(c) : carrousel de tête (2026-08-18) ───────────────────────────
   Rendu uniquement si la fiche a plus d'une photo (garde-fou n°1) — sinon
   la figure unique existante (.ph--reelle, non touchée) reste seule à
   s'afficher, rendu strictement inchangé. Défilement natif en scroll-snap,
   zéro JavaScript : même doctrine que le filtrage CSS pur d'A-5/A-6/A-7 sur
   archive-ateliers.php. tabindex="0" côté gabarit rend le bandeau
   focusable et défilable au clavier sans script.
   ──────────────────────────────────────────────────────────────────────── */

.ph-carousel {
	display: flex;
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.ph-carousel img {
	flex: 0 0 auto;
	width: min(85%, 640px);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	scroll-snap-align: start;
	display: block;
}

/* -- EDV-A74C-SQUARE-V1 : images carrées ateliers (2026-08-20) -----------
   Même correction que sur les cartes de la page Entreprises : object-fit
   contain au lieu de cover, une image carrée n'est plus coupée. À la
   différence de .theme-card__photo, .ph-carousel n'a pas de fond derrière
   l'image : on l'ajoute ici pour que les bandes éventuelles ne soient pas
   transparentes. Cette règle arrive après la première et gagne sur le
   même sélecteur - rien d'autre à toucher.
   Page concernée : fiche atelier, ex. /produit/tour-de-france/.
   ------------------------------------------------------------------------- */
.ph-carousel img {
	object-fit: contain;
	background: var(--color-line-soft);
}

/* ===========================================================================
   CYCLES : disposition pleine largeur et cartes ateliers avec photos (2026-09-17)
   =========================================================================== */

/* Hero adapté aux cycles */
.hero--cycle .hero__grid--cycle {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: end;
}

@media (min-width: 768px) {
	.hero--cycle .hero__grid--cycle {
		grid-template-columns: 7fr 5fr;
	}
}

.hero__cycle-aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.hero__cycle-aside {
		align-items: flex-end;
		text-align: right;
	}
}

.hero__cycle-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.cycle-badge {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--color-line-soft);
	color: var(--color-ink-2);
	border: var(--border-hair);
}

.cycle-badge--teal {
	background: var(--color-teal-deep);
	color: var(--color-cream);
	border-color: var(--color-teal-deep);
}

.hero__cycle-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hero__cycle-cta .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.hero__cycle-note {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 11px;
	color: var(--color-ink-3);
	margin: 0;
}

/* Corps de page cycle : pleine largeur */
.cycle-body {
	margin: 0 auto;
	padding: var(--space-10) var(--gutter) var(--space-16);
}

.cycle-section .subhead {
	margin-bottom: var(--space-8);
}

/* Grille de thèmes du cycle */
.cycle-body .themes__grid {
	display: grid;
	grid-template-columns: 1fr;
	border-top: var(--border-firm);
	border-left: var(--border-firm);
	border-right: var(--border-firm);
}

@media (min-width: 720px) {
	.cycle-body .themes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.cycle-body .themes__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Cartes ateliers dans le cycle */
.cycle-body .theme-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6) var(--gutter);
	border-bottom: var(--border-hair);
	text-decoration: none;
	color: inherit;
	background: var(--color-cream);
	transition: background 0.15s ease;
}

.cycle-body .theme-card:hover {
	background: #fff;
}

.cycle-body .theme-card header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.cycle-body .theme-card .n {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--color-teal-deep);
}

.cycle-body .theme-card .k {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-bordeaux);
}

.cycle-body .theme-card h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 500;
	line-height: 1.1;
	margin: 0;
}

.cycle-body .theme-card .angle {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-sm);
	line-height: 1.35;
	color: var(--color-ink-3);
	margin: 0;
}

.cycle-body .theme-card__photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-line-soft);
	margin-bottom: var(--space-2);
}

.cycle-body .theme-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.cycle-body .theme-card:hover .theme-card__photo img {
	transform: scale(1.03);
}

.cycle-body .theme-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: var(--space-2) 0 0;
	padding: var(--space-3) 0 0;
	border-top: var(--border-hair);
}

.cycle-body .theme-card__facts div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cycle-body .theme-card__facts dt {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}

.cycle-body .theme-card__facts dd {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.2;
	color: var(--color-ink);
}

.cycle-body .theme-card .more {
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: var(--border-hair);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-bordeaux);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.cycle-body .theme-card .more .icon {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 720px) {
	.cycle-body .theme-card {
		border-right: var(--border-hair);
	}
	.cycle-body .theme-card:nth-child(2n) {
		border-right: 0;
	}
}

@media (min-width: 1080px) {
	.cycle-body .theme-card:nth-child(2n) {
		border-right: var(--border-hair);
	}
	.cycle-body .theme-card:nth-child(3n) {
		border-right: 0;
	}
}

/* Bandeau de conversion bas de page cycle */
.cycle-cta-banner {
	margin-top: var(--space-12);
	padding: var(--space-10) var(--gutter);
	background: var(--color-cream);
	border: var(--border-firm);
}

.cycle-cta-banner__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: center;
}

@media (min-width: 768px) {
	.cycle-cta-banner__inner {
		grid-template-columns: 7fr 5fr;
	}
}

.cycle-cta-banner h2 {
	font-size: var(--text-2xl);
	font-weight: 500;
	line-height: 1.15;
	margin: var(--space-2) 0 var(--space-3);
}

.cycle-cta-banner__text {
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-ink-2);
	margin: 0;
}

.cycle-cta-banner__action {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.cycle-cta-banner__action {
		align-items: flex-end;
		text-align: right;
	}
}

.cycle-cta-banner__action .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.cycle-cta-banner__note {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 11px;
	color: var(--color-ink-3);
	margin: 0;
}

