/* ==========================================================================
   Chez Fleurette — THÈME « Affiche du kiosque »
   Affiche sérigraphiée années 60 / Bauhaus joyeux : aplats FRANCS des couleurs
   de la charte, contours encre #3a2724 épais (3px), ombres dures 0-blur
   décalées façon sticker, kickers tamponnés, titres avec décalage
   d'impression rose derrière le rouge (« repérage » riso). Tout le vaporeux
   du base (blur, dégradés radiaux, pilules) devient plat, net, géométrique.
   Fonds porteurs de texte blanc : #c8141c / #0a7e40 / #284f8d UNIQUEMENT
   (jamais de blanc sur #EC1C25 ni #0DA152 — contraste AA).
   Toutes les règles sont préfixées html[data-theme="affiche"] — le thème est
   inerte tant que l'attribut n'est pas posé (main.js / theme-boot.js).
   Ne touche JAMAIS aux outils : .cf-* (édition), .ec-fbw* (feedback),
   .cf-tour* (tuto) — seul un garde-fou neutralise les variables redéfinies.
   ========================================================================== */

/* ── Jetons (tokens) — géométrie d'imprimé (les couleurs de base restent) ── */
html[data-theme="affiche"] {
  /* Rayons resserrés : la rondeur cartoon devient du quasi-rectangle imprimé */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-pill: 10px;
  /* Ombres DURES (0 blur, décalées) façon sticker sérigraphié */
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-md: 7px 7px 0 var(--ink);
  --shadow-pop: 5px 5px 0 var(--ink);
  /* Les filets deviennent de l'encre presque pleine */
  --hair: rgba(58, 39, 36, .9);
}

/* ── Accessibilité : lien d'évitement + focus ────────────────────────────── */
html[data-theme="affiche"] .skip-link {
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0;
}
/* Focus bleu conservé sur fonds clairs ; crème sur les aplats foncés + footer */
html[data-theme="affiche"] .section--red :focus-visible,
html[data-theme="affiche"] .section--green :focus-visible,
html[data-theme="affiche"] .section--blue :focus-visible,
html[data-theme="affiche"] .section--green-solid :focus-visible,
html[data-theme="affiche"] .site-footer :focus-visible { outline-color: #FDEDD5; }

/* ── En-tête / navigation : cartouche d'affiche opaque ───────────────────── */
html[data-theme="affiche"] .site-header {
  background: #FDEDD5;
  backdrop-filter: none;
  /* Double filet imprimé : encre + rappel rouge */
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 4px 0 var(--red);
}
html[data-theme="affiche"] .nav-links a {
  font-weight: 700;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .08em;
  border-radius: 6px;
}
/* Survol / page courante = inversion tampon (encre pleine, texte crème) */
html[data-theme="affiche"] .nav-links a:not(.nav-cta):hover {
  background: var(--ink);
  color: #FDEDD5;
  text-decoration: none;
}
html[data-theme="affiche"] .nav-links a[aria-current="page"]:not(.nav-cta) {
  background: var(--ink);
  color: #FDEDD5;
}
/* Le soulignage animé du base est remplacé par l'inversion */
html[data-theme="affiche"] .nav-links a:not(.btn)::after { content: none; }
/* CTA « Réserver » : rectangle rouge profond bordé encre (le .btn du thème
   apporte déjà bordure + ombre dure — on garantit juste fond & texte) */
html[data-theme="affiche"] .nav-links a.nav-cta,
html[data-theme="affiche"] .nav-links a.nav-cta:hover {
  background: var(--red-dark);
  color: #fff;
}
html[data-theme="affiche"] .nav-burger {
  background: #fffaf2;
  border: 3px solid var(--ink);
  border-radius: 6px;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
@media (max-width: 900px) {
  /* Panneau mobile (checkbox hack) : carton bordé encre, ombre dure */
  html[data-theme="affiche"] .nav-links {
    background: #fffaf2;
    border: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: 7px 7px 0 var(--ink);
  }
}

/* ── Hero : le placard d'affiche ─────────────────────────────────────────── */
/* Trame halftone CSS pure (points d'encre ≤14 % d'opacité, tuile 12px) —
   remplace le motif fleuri + les dégradés radiaux vaporeux du base. */
html[data-theme="affiche"] .hero {
  background-color: var(--cream);
  background-image: radial-gradient(rgba(58, 39, 36, .12) 1px, transparent 1.4px);
  background-size: 12px 12px;
}
html[data-theme="affiche"] .hero h1 {
  color: var(--red);
  /* « Repérage » riso : décalage d'impression rose derrière le rouge */
  text-shadow: 3px 3px 0 var(--pink);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  overflow-wrap: break-word;
  hyphens: manual;
}
html[data-theme="affiche"] .hero h1 .accent { color: var(--green-dark); }
html[data-theme="affiche"] .hero__eyebrow { color: var(--blue-dark); }
/* Disque sunburst derrière la mascotte (rayons crème / crème profond) */
html[data-theme="affiche"] .hero__art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: min(430px, 94%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: repeating-conic-gradient(#FDEDD5 0 12deg, #f7e1bf 12deg 24deg);
  pointer-events: none;
  z-index: -1;
}
/* Ombre sticker dure (l'ombre floue du base « décolle » l'affiche) */
html[data-theme="affiche"] .hero__mascotte {
  filter: drop-shadow(8px 8px 0 rgba(58, 39, 36, .9));
}
/* Badges = petites étiquettes rectangulaires collées (rotations conservées) */
html[data-theme="affiche"] .hero__badge {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--ink);
  backdrop-filter: none;
}
html[data-theme="affiche"] .hero__badge--1 { color: var(--green-dark); border-color: var(--ink); }
html[data-theme="affiche"] .hero__badge--2 { color: var(--blue-dark); border-color: var(--ink); }
/* Pétales : encre franche plutôt que voile */
html[data-theme="affiche"] .petal { opacity: .75; }

/* ── Bandeau « valeurs » : ticker plein rouge à pâquerettes ──────────────── */
html[data-theme="affiche"] .valuestrip {
  background: var(--red-dark);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
html[data-theme="affiche"] .valuestrip__row li {
  color: #FDEDD5;
  letter-spacing: .14em;
}
/* Séparateur : pâquerette crème (data-URI, cœur rose) à la place du point */
html[data-theme="affiche"] .valuestrip__row li:not(:last-child)::after {
  width: 12px;
  height: 12px;
  border-radius: 0;
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23FDEDD5'%3E%3Cellipse cx='32' cy='16' rx='8' ry='13'/%3E%3Cellipse cx='32' cy='48' rx='8' ry='13'/%3E%3Cellipse cx='16' cy='32' rx='13' ry='8'/%3E%3Cellipse cx='48' cy='32' rx='13' ry='8'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='7' fill='%23EBA6CA'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Sections : aplats francs + filets d'encre entre blocs ───────────────── */
html[data-theme="affiche"] .section { border-top: 3px solid var(--ink); }
/* Crème : trame halftone (jamais sur les cartes — elles ont leur fond blanc) */
html[data-theme="affiche"] .section--cream {
  background-color: var(--cream);
  background-image: radial-gradient(rgba(58, 39, 36, .12) 1px, transparent 1.4px);
  background-size: 12px 12px;
}
html[data-theme="affiche"] .section--paper { background: var(--paper); }
/* Rose : APLAT PLEIN #EBA6CA, texte encre (6.8:1) */
html[data-theme="affiche"] .section--pink {
  background: var(--pink);
  color: var(--ink);
}
html[data-theme="affiche"] .section--pink .lead { color: var(--ink); }
/* Vert : APLAT #0a7e40, texte blanc (5.2:1) — jamais #0DA152 sous du texte */
html[data-theme="affiche"] .section--green {
  background: var(--green-dark);
  color: #fff;
}
/* Bleu : APLAT #284f8d, texte crème */
html[data-theme="affiche"] .section--blue {
  background: var(--blue-dark);
  color: #FDEDD5;
}
html[data-theme="affiche"] .section--green .lead { color: rgba(255, 255, 255, .92); }
html[data-theme="affiche"] .section--blue .lead  { color: rgba(253, 237, 213, .92); }
html[data-theme="affiche"] .section--green .muted,
html[data-theme="affiche"] .section--blue .muted { color: rgba(253, 237, 213, .85); }
/* … mais JAMAIS dans les cartes blanches posées sur ces aplats */
html[data-theme="affiche"] .section--green .card .muted,
html[data-theme="affiche"] .section--blue .card .muted { color: var(--ink-soft); }
/* Liens posés directement sur un aplat foncé : crème soulignés */
html[data-theme="affiche"] .section--green a:not(.btn),
html[data-theme="affiche"] .section--blue a:not(.btn),
html[data-theme="affiche"] .section--red a:not(.btn),
html[data-theme="affiche"] .section--green-solid a:not(.btn) {
  color: #FDEDD5;
  text-decoration: underline;
}
/* --red (#c8141c) et --green-solid (#0a7e40) : fonds du base conservés. */

/* ── Sous-titres (kicker) : tampon encreur ───────────────────────────────── */
html[data-theme="affiche"] .kicker {
  background: var(--ink);
  color: #FDEDD5;
  padding: 4px 14px;
  letter-spacing: .18em;
  border-radius: 4px;
}
html[data-theme="affiche"] .kicker::after { display: none; }
/* EXCEPTION « page rouge » : tampon crème, texte encre (le tampon encre
   disparaîtrait sur le fond #c8141c) */
html[data-theme="affiche"] .section--red .kicker {
  background: #FDEDD5;
  color: var(--ink);
}

/* ── Titres : rouge + repérage rose (décoratif, jamais porteur d'info) ───── */
html[data-theme="affiche"] .title {
  color: var(--red);
  text-shadow: 3px 3px 0 var(--pink);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
/* Sur les aplats pleins foncés : blanc + repérage encré */
html[data-theme="affiche"] .section--red .title,
html[data-theme="affiche"] .section--green .title,
html[data-theme="affiche"] .section--blue .title,
html[data-theme="affiche"] .section--green-solid .title {
  color: #fff;
  text-shadow: 3px 3px 0 rgba(58, 39, 36, .55);
}
/* Sur l'aplat rose (clair) : encre + repérage crème */
html[data-theme="affiche"] .section--pink .title {
  color: var(--ink);
  text-shadow: 3px 3px 0 #FDEDD5;
}

/* ── Boutons : pavés tamponnés, ombre dure, uppercase ────────────────────── */
html[data-theme="affiche"] .btn {
  border-radius: 8px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-transform: uppercase;
  letter-spacing: .06em;
}
html[data-theme="affiche"] .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
html[data-theme="affiche"] .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
/* Le reflet balayé du base n'a rien d'imprimé → neutralisé
   (restauré plus bas pour la flèche de .btn[data-cv="2"]) */
html[data-theme="affiche"] .btn::after { content: none; }
/* Fonds porteurs sûrs (texte blanc AA) : #c8141c / #0a7e40 / #284f8d */
html[data-theme="affiche"] .btn--primary { background: var(--red-dark); color: #fff; }
html[data-theme="affiche"] .btn--green   { background: var(--green-dark); color: #fff; }
html[data-theme="affiche"] .btn--blue    { background: var(--blue-dark); color: #fff; }
html[data-theme="affiche"] .btn--white   { background: #fff; color: var(--red-dark); }
html[data-theme="affiche"] .btn--outline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
html[data-theme="affiche"] .btn--outline:hover {
  background: var(--cream);
  border-color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

/* ── Cartes : blanches, bordées encre, ombre dure, pose « collée » ───────── */
html[data-theme="affiche"] .card {
  background: #fff;
  color: var(--ink); /* le texte ne doit jamais hériter du blanc des aplats */
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ink);
}
html[data-theme="affiche"] .card--lift:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
/* Rotations alternées façon affiches punaisées (annulées ≤520px / motion) */
html[data-theme="affiche"] .grid .card:nth-child(odd)  { rotate: -.5deg; }
html[data-theme="affiche"] .grid .card:nth-child(even) { rotate: .5deg; }
/* Icônes : fonds pastel conservés, mais sertis d'encre */
html[data-theme="affiche"] .card__icon {
  border: 2px solid var(--ink);
  border-radius: 6px;
}

/* ── Étapes numérotées : pavés carrés tamponnés ──────────────────────────── */
html[data-theme="affiche"] .step__num {
  border-radius: 8px;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

/* ── Emplacements photo : cadre d'encre, ombre colorée sérigraphie ───────── */
html[data-theme="affiche"] .photo {
  background-color: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--pink);
  color: var(--red-dark);
}
html[data-theme="affiche"] .photo--green { border-color: var(--ink); box-shadow: 6px 6px 0 var(--green); color: var(--green-dark); }
html[data-theme="affiche"] .photo--blue  { border-color: var(--ink); box-shadow: 6px 6px 0 var(--blue); color: var(--blue-dark); }
/* Une vraie photo posée par Margaux : le cadre d'encre reste (esprit affiche)
   mais plus aucun libellé — ré-assertion car nos règles couleur sont plus
   tardives que .photo.cf-has-photo du base. */
html[data-theme="affiche"] .photo.cf-has-photo {
  border-color: var(--ink);
  color: transparent;
}

/* ── Menu / listes de prix : filets d'encre + cartouche prix ─────────────── */
html[data-theme="affiche"] .menu-item { border-bottom: 3px solid rgba(58, 39, 36, .85); }
html[data-theme="affiche"] .menu-item:last-child { border-bottom: 0; }
html[data-theme="affiche"] .menu-item__dots { border-bottom: 3px solid rgba(58, 39, 36, .85); }
html[data-theme="affiche"] .menu-item__price {
  background: var(--ink);
  color: #FDEDD5;
  padding: 2px 10px;
  border-radius: 4px;
}

/* ── Cartes tarifs ───────────────────────────────────────────────────────── */
html[data-theme="affiche"] .price-card .price {
  color: var(--red); /* 2.6rem = AA large */
  text-shadow: 2px 2px 0 var(--pink);
}
/* Carte mise en avant : pavé rouge profond, ombre dure, penchée */
html[data-theme="affiche"] .price-card--feature {
  background: var(--red-dark);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  rotate: -1deg;
}
html[data-theme="affiche"] .price-card--feature .price,
html[data-theme="affiche"] .price-card--feature h3 {
  color: #fff;
  text-shadow: none;
}
html[data-theme="affiche"] .price-card--feature .price small { color: rgba(255, 255, 255, .85); }

/* ── Produits boutique ───────────────────────────────────────────────────── */
/* Le rouge vif du base (4:1) passe en rouge profond (AA en petit corps) */
html[data-theme="affiche"] .product__price { color: var(--red-dark); }
html[data-theme="affiche"] .tag { border-radius: 4px; }
html[data-theme="affiche"] .tag--blue { background: var(--blue-dark); }
/* Pastille « pill-tag » : mini-tampon assorti aux kickers */
html[data-theme="affiche"] .pill-tag {
  background: var(--ink);
  color: #FDEDD5;
  border-radius: 4px;
}

/* ── Faits / chiffres : vignettes punaisées ──────────────────────────────── */
html[data-theme="affiche"] .fact {
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 22px;
}
html[data-theme="affiche"] .facts .fact:nth-child(odd)  { rotate: -1deg; }
html[data-theme="affiche"] .facts .fact:nth-child(even) { rotate: 1deg; }
html[data-theme="affiche"] .fact .fact__num {
  font-size: 3.2rem;
  color: var(--red-dark);
  text-shadow: 3px 3px 0 var(--pink);
}
/* Sur la « page rouge » : vignettes CRÈME (le blanc pur hurlerait sur
   l'aplat #c8141c) — chiffres rouge profond conservés, lisibles dessus */
html[data-theme="affiche"] .section--red .fact { background: #FDEDD5; }
html[data-theme="affiche"] .section--red .fact .fact__num {
  color: var(--red-dark);
  text-shadow: 3px 3px 0 var(--pink);
}
html[data-theme="affiche"] .section--red .fact .fact__lbl { color: var(--ink-soft); }

/* ── FAQ : fiches bordées, « + » dans un carré encré ─────────────────────── */
html[data-theme="affiche"] .faq details {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--ink);
}
html[data-theme="affiche"] .faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #FDEDD5;
  border-radius: 6px;
  font-size: 1.15rem;
}
html[data-theme="affiche"] .faq details[open] summary::after {
  content: "–";
  background: var(--red-dark);
  color: #fff;
}
html[data-theme="affiche"] .faq details[open] summary { color: var(--red-dark); }

/* ── Encadré note : fiche crème à filet bleu ─────────────────────────────── */
html[data-theme="affiche"] .note {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-left: 8px solid var(--blue-dark);
  border-radius: 2px;
  color: var(--ink);
}
html[data-theme="affiche"] .note strong { color: var(--ink); }

/* ── Infos pratiques / horaires : filets d'encre ─────────────────────────── */
html[data-theme="affiche"] .hours li { border-bottom: 2px solid rgba(58, 39, 36, .35); }
html[data-theme="affiche"] .hours li:last-child { border-bottom: 0; }

/* ── Pied de page : cul-de-lampe encré, filet rouge, liens roses ─────────── */
html[data-theme="affiche"] .site-footer {
  background: var(--ink);
  box-shadow: inset 0 6px 0 var(--red);
}
html[data-theme="affiche"] .site-footer a,
html[data-theme="affiche"] .footer-links a,
html[data-theme="affiche"] .footer-bottom a {
  color: var(--pink); /* #EBA6CA : 7:1 sur l'encre */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
html[data-theme="affiche"] .footer-links a:hover,
html[data-theme="affiche"] .footer-bottom a:hover { color: #FDEDD5; }
/* Réseaux : carrés bordés crème (plus de pastilles rondes) */
html[data-theme="affiche"] .social a {
  border-radius: 0;
  border: 2px solid #FDEDD5;
  background: transparent;
  color: #FDEDD5;
}
html[data-theme="affiche"] .social a:hover { background: var(--red-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTES PAR ÉLÉMENT (data-cv) — re-déclarations obligatoires
   La spécificité de html[data-theme] gagne sur les [data-cv] du base : chaque
   variante est reposée ici avec un rendu distinct ET lisible dans ce thème
   (sinon les réglages de Margaux casseraient silencieusement).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Titres ── */
/* Versions FONCÉES des couleurs (le vert/bleu vifs du base tiennent mal) */
html[data-theme="affiche"] .title[data-cv="1"] { color: var(--green-dark); text-shadow: 3px 3px 0 var(--pink); }
html[data-theme="affiche"] .title[data-cv="2"] { color: var(--blue-dark); text-shadow: 3px 3px 0 var(--pink); }
/* Surligné : pavé rose plein bordé façon étiquette (plus de pastel flou) */
html[data-theme="affiche"] .title[data-cv="3"] {
  display: inline-block;
  background: var(--pink);
  padding: .04em .3em;
  border-radius: 6px;
  color: var(--ink);
  text-shadow: none;
}
/* Trait vert : conservé, mais en barre d'encre carrée vert profond */
html[data-theme="affiche"] .title[data-cv="4"] { color: var(--red); text-shadow: 3px 3px 0 var(--pink); }
html[data-theme="affiche"] .title[data-cv="4"]::after {
  border-radius: 0;
  background: var(--green-dark);
}

/* ── Sous-titres (kicker) — le tampon change de couleur d'encreur ── */
html[data-theme="affiche"] .kicker[data-cv="1"] { background: var(--red-dark); color: #fff; }
html[data-theme="affiche"] .kicker[data-cv="2"] { background: var(--blue-dark); color: #fff; }
/* Inversé : cartouche crème cerclé d'encre */
html[data-theme="affiche"] .kicker[data-cv="3"] {
  background: #FDEDD5;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 2px 12px;
  border-radius: 4px;
}
html[data-theme="affiche"] .kicker[data-cv="4"] {
  font-style: normal;
  letter-spacing: .26em;
}

/* ── Boutons ── */
html[data-theme="affiche"] .btn[data-cv="1"] { border-radius: 12px; }
/* Flèche : restaurée (notre .btn::after{content:none} l'aurait avalée),
   et remise à plat — le ::after du base sert aussi de reflet positionné. */
html[data-theme="affiche"] .btn[data-cv="2"]::after {
  content: "→";
  position: static;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  transition: none;
  font-weight: 700;
  margin-left: .1em;
}
html[data-theme="affiche"] .btn[data-cv="3"] { font-size: .92rem; letter-spacing: .1em; }
/* Ombre portée VERTE (clin d'œil sérigraphie bichro) */
html[data-theme="affiche"] .btn[data-cv="4"] { box-shadow: 4px 4px 0 #0DA152; }
html[data-theme="affiche"] .btn[data-cv="4"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #0DA152;
}
html[data-theme="affiche"] .btn[data-cv="4"]:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #0DA152;
}

/* ── Cartes ── */
/* « Aérée » du base → ombre rose (l'encre reste en contour) */
html[data-theme="affiche"] .card[data-cv="1"] {
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
}
html[data-theme="affiche"] .card[data-cv="2"] { background: var(--cream); }
html[data-theme="affiche"] .card[data-cv="3"] {
  border: 3px solid var(--ink);
  border-top: 6px solid var(--red);
}
html[data-theme="affiche"] .card[data-cv="4"] {
  border: 3px solid var(--red);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
}

/* ── Emplacements photo ── */
/* Sobre : ombre encre au lieu de l'ombre rose */
html[data-theme="affiche"] .photo[data-cv="1"] {
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
/* Polaroid : cadre blanc conservé, mais coins vifs + ombre encre */
html[data-theme="affiche"] .photo[data-cv="2"] {
  border: 10px solid #fff;
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
}
/* Arrondi : seul rescapé rond du thème — il reste bordé d'encre */
html[data-theme="affiche"] .photo[data-cv="3"] {
  border: 3px solid var(--ink);
  border-radius: 36px;
}
html[data-theme="affiche"] .photo[data-cv="4"] {
  border: 3px solid var(--green-dark);
  box-shadow: 6px 6px 0 var(--green);
}

/* ── Sections ── */
/* Motif pâquerette : re-encré à l'encre brune très légère */
html[data-theme="affiche"] .section[data-cv="1"] {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 64 64'%3E%3Cg fill='%233a2724' opacity='0.05'%3E%3Cellipse cx='32' cy='18' rx='5' ry='8'/%3E%3Cellipse cx='32' cy='46' rx='5' ry='8'/%3E%3Cellipse cx='18' cy='32' rx='8' ry='5'/%3E%3Cellipse cx='46' cy='32' rx='8' ry='5'/%3E%3Ccircle cx='32' cy='32' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
}
/* Halos pastel du base → fines rayures d'imprimé diagonales */
html[data-theme="affiche"] .section[data-cv="2"] {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(45deg, transparent 0 22px, rgba(58, 39, 36, .05) 22px 25px);
}
/* Uni crème : PAS de trame (c'est la variante « calme ») */
html[data-theme="affiche"] .section[data-cv="3"] {
  background-color: var(--cream);
  background-image: none;
}
html[data-theme="affiche"] .section[data-cv="4"] {
  background-color: var(--paper);
  background-image: none;
  box-shadow: inset 0 6px 0 var(--red);
}

/* ══════════════════════════════════════════════════════════════════════════
   GARDE-FOU OUTILS — on ne THÈME pas .cf-bar / .cf-panel / .cf-tour-tip…,
   mais leurs styles du base consomment des variables (rayons, ombres, filets)
   que ce thème redéfinit : on les remet à plat ici pour que l'éditeur reste
   EXACTEMENT comme avant. Aucun style nouveau n'est ajouté.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="affiche"] .cf-bar,
html[data-theme="affiche"] .cf-tour-tip,
html[data-theme="affiche"] .cf-panel,
html[data-theme="affiche"] .cf-vpanel,
html[data-theme="affiche"] .cf-eltag,
html[data-theme="affiche"] .cf-toast,
html[data-theme="affiche"] .cf-tryband,
html[data-theme="affiche"] .cf-pvband,
html[data-theme="affiche"] dialog.cf-dlg {
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --shadow-sm: 0 6px 20px rgba(58, 39, 36, .07);
  --shadow-md: 0 18px 44px rgba(58, 39, 36, .11);
  --shadow-pop: 0 10px 30px rgba(58, 39, 36, .09);
  --hair: rgba(58, 39, 36, .12);
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATION PROPRE AU THÈME — flottement de la mascotte à amplitude réduite
   (l'ombre sticker dure « décollerait » avec le mn-bob ample du base).
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes af-bob {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-7px) rotate(.8deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="affiche"] .hero__mascotte { animation-name: af-bob; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PETITS ÉCRANS (≤520px) — parade débord : ombres dures réduites à 4px 4px 0
   (couleurs conservées) et rotations annulées.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  html[data-theme="affiche"] .card,
  html[data-theme="affiche"] .card[data-cv="4"],
  html[data-theme="affiche"] .fact,
  html[data-theme="affiche"] .faq details,
  html[data-theme="affiche"] .price-card--feature,
  html[data-theme="affiche"] .photo[data-cv="1"],
  html[data-theme="affiche"] .photo[data-cv="2"],
  html[data-theme="affiche"] .nav-links { box-shadow: 4px 4px 0 var(--ink); }
  html[data-theme="affiche"] .card--lift:hover { box-shadow: 6px 6px 0 var(--ink); }
  html[data-theme="affiche"] .card[data-cv="1"] { box-shadow: 4px 4px 0 var(--pink); }
  html[data-theme="affiche"] .photo { box-shadow: 4px 4px 0 var(--pink); }
  html[data-theme="affiche"] .photo--green,
  html[data-theme="affiche"] .photo[data-cv="4"] { box-shadow: 4px 4px 0 var(--green); }
  html[data-theme="affiche"] .photo--blue { box-shadow: 4px 4px 0 var(--blue); }
  html[data-theme="affiche"] .hero__mascotte { filter: drop-shadow(4px 4px 0 rgba(58, 39, 36, .9)); }
  html[data-theme="affiche"] .grid .card:nth-child(odd),
  html[data-theme="affiche"] .grid .card:nth-child(even),
  html[data-theme="affiche"] .facts .fact:nth-child(odd),
  html[data-theme="affiche"] .facts .fact:nth-child(even),
  html[data-theme="affiche"] .price-card--feature { rotate: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT — les rotations / translations / transitions AJOUTÉES par
   ce thème sont annulées (les ombres restent, statiques).
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="affiche"] .grid .card:nth-child(odd),
  html[data-theme="affiche"] .grid .card:nth-child(even),
  html[data-theme="affiche"] .facts .fact:nth-child(odd),
  html[data-theme="affiche"] .facts .fact:nth-child(even),
  html[data-theme="affiche"] .price-card--feature { rotate: none; }
  html[data-theme="affiche"] .card--lift:hover {
    transform: none;
    box-shadow: 6px 6px 0 var(--ink);
  }
  html[data-theme="affiche"] .btn:hover,
  html[data-theme="affiche"] .btn:active {
    transform: none;
    box-shadow: 4px 4px 0 var(--ink);
  }
  html[data-theme="affiche"] .btn[data-cv="4"]:hover,
  html[data-theme="affiche"] .btn[data-cv="4"]:active {
    transform: none;
    box-shadow: 4px 4px 0 #0DA152;
  }
  html[data-theme="affiche"] .btn--outline:hover {
    transform: none;
    box-shadow: 4px 4px 0 var(--ink);
  }
  html[data-theme="affiche"] .hero__mascotte { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSION — retour à des surfaces claires lisibles : les aplats pleins
   redeviennent blancs, les ombres dures / trames / repérages disparaissent.
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  html[data-theme="affiche"] .hero,
  html[data-theme="affiche"] .section--cream,
  html[data-theme="affiche"] .section[data-cv="1"],
  html[data-theme="affiche"] .section[data-cv="2"] { background-image: none; }
  html[data-theme="affiche"] .section--pink,
  html[data-theme="affiche"] .section--green,
  html[data-theme="affiche"] .section--blue,
  html[data-theme="affiche"] .section--red,
  html[data-theme="affiche"] .section--green-solid,
  html[data-theme="affiche"] .valuestrip,
  html[data-theme="affiche"] .price-card--feature,
  html[data-theme="affiche"] .section--red .fact {
    background: #fff;
    color: #3a2724;
  }
  html[data-theme="affiche"] .valuestrip__row li { color: #3a2724; }
  html[data-theme="affiche"] .section--green .lead,
  html[data-theme="affiche"] .section--blue .lead,
  html[data-theme="affiche"] .section--pink .lead,
  html[data-theme="affiche"] .section--green .muted,
  html[data-theme="affiche"] .section--blue .muted,
  html[data-theme="affiche"] .price-card--feature .price,
  html[data-theme="affiche"] .price-card--feature h3 { color: #3a2724; }
  html[data-theme="affiche"] .section--green a:not(.btn),
  html[data-theme="affiche"] .section--blue a:not(.btn),
  html[data-theme="affiche"] .section--red a:not(.btn),
  html[data-theme="affiche"] .section--green-solid a:not(.btn) { color: #c8141c; }
  /* Titres : rouge profond, sans repérage */
  html[data-theme="affiche"] .title,
  html[data-theme="affiche"] .section--red .title,
  html[data-theme="affiche"] .section--green .title,
  html[data-theme="affiche"] .section--blue .title,
  html[data-theme="affiche"] .section--green-solid .title,
  html[data-theme="affiche"] .section--pink .title,
  html[data-theme="affiche"] .title[data-cv="1"],
  html[data-theme="affiche"] .title[data-cv="2"],
  html[data-theme="affiche"] .title[data-cv="3"],
  html[data-theme="affiche"] .title[data-cv="4"] {
    color: #c8141c;
    background: none;
    text-shadow: none;
  }
  html[data-theme="affiche"] .hero h1,
  html[data-theme="affiche"] .fact .fact__num,
  html[data-theme="affiche"] .section--red .fact .fact__num,
  html[data-theme="affiche"] .price-card .price { text-shadow: none; }
  /* Tampons : redeviennent de simples sous-titres rouges */
  html[data-theme="affiche"] .kicker,
  html[data-theme="affiche"] .section--red .kicker,
  html[data-theme="affiche"] .kicker[data-cv="1"],
  html[data-theme="affiche"] .kicker[data-cv="2"],
  html[data-theme="affiche"] .kicker[data-cv="3"],
  html[data-theme="affiche"] .pill-tag,
  html[data-theme="affiche"] .menu-item__price {
    background: none;
    border: 0;
    color: #c8141c;
    padding: 0;
  }
  /* Plus d'ombres dures ni de rotations sur papier */
  html[data-theme="affiche"] .card,
  html[data-theme="affiche"] .card[data-cv="1"],
  html[data-theme="affiche"] .card[data-cv="4"],
  html[data-theme="affiche"] .fact,
  html[data-theme="affiche"] .faq details,
  html[data-theme="affiche"] .photo,
  html[data-theme="affiche"] .photo--green,
  html[data-theme="affiche"] .photo--blue,
  html[data-theme="affiche"] .photo[data-cv="1"],
  html[data-theme="affiche"] .photo[data-cv="2"],
  html[data-theme="affiche"] .photo[data-cv="4"],
  html[data-theme="affiche"] .price-card--feature,
  html[data-theme="affiche"] .btn,
  html[data-theme="affiche"] .btn[data-cv="4"],
  html[data-theme="affiche"] .btn--outline,
  html[data-theme="affiche"] .step__num,
  html[data-theme="affiche"] .hero__badge,
  html[data-theme="affiche"] .nav-links,
  html[data-theme="affiche"] .site-header,
  html[data-theme="affiche"] .site-footer,
  html[data-theme="affiche"] .nav-burger { box-shadow: none; }
  html[data-theme="affiche"] .grid .card:nth-child(odd),
  html[data-theme="affiche"] .grid .card:nth-child(even),
  html[data-theme="affiche"] .facts .fact:nth-child(odd),
  html[data-theme="affiche"] .facts .fact:nth-child(even),
  html[data-theme="affiche"] .price-card--feature { rotate: none; }
  html[data-theme="affiche"] .hero__mascotte { filter: none; }
  html[data-theme="affiche"] .hero__art::before { content: none; }
}