/*
Theme Name:  La Rose des Sables
Theme URI:   https://larosedessables.be
Author:      By Saliha
Description: Thème sur mesure pour La Rose des Sables By Saliha — fleuriste artisanale depuis 1976.
Version:     1.11.12
License:     Proprietary
Text Domain: rds
*/

/* =============================================
   TOKENS — Variables CSS
   ============================================= */
:root {
  /* ══════════════════════════════════════════════════════════════
     PALETTE DE MARQUE — validée le 2026-07-24, rose mis à jour le 2026-08-02
     Rose Saliha #FFCBEC · Prune #733757 · Vert végétal #37734A
     Menthe #C7F2D5 · Vert crème #DAF2C7 · Or premium #C9A458
     Ce bloc est la SOURCE UNIQUE : aucune feuille de page ne doit
     redéclarer ces tokens (elles le faisaient toutes avant le
     2026-07-24 — voir le commit d'assainissement).
     ══════════════════════════════════════════════════════════════ */

  /* ── Neutres chauds — dominants, porteurs de la lisibilité ── */
  --rds-fond:         #FAF1ED;   /* fond global de toutes les pages */
  --rds-surface:      #F4E5DE;   /* surface des cartes et panneaux */
  --rds-blanc:        #FFFFFF;   /* réservé aux éléments qui doivent trancher
                                    sur une surface crème : champs de saisie,
                                    puces actives de carrousel sur photo */
  --rds-dark:         #1F1612;   /* fond du pied de page */
  --rds-encre:        #2A1F1A;   /* texte principal — 14,4:1 sur le fond global */
  --rds-taupe:        #635350;   /* texte secondaire — 6,5:1 sur le fond global */
  /* Bordure d'interface (champs de formulaire). La bordure des champs CF7
     était rgba(58,46,42,0.18) — l'ancien brun à 18 %, soit 1,4:1 sur le blanc :
     un champ dont on ne distingue pas le contour. L'encre à 50 % donne 3,2:1
     sur blanc, 3,0:1 sur la surface crème et 3,1:1 sur le fond global : au
     seuil de 3:1 exigé pour un composant d'interface, sur les trois fonds où
     un champ peut se trouver. */
  --rds-bordure:      #2A1F1A80;

  /* ── Identité — surfaces colorées ── */
  /* Rose Saliha — référence officielle et unique fournie par la cliente le
     2026-08-02 (remplace #F2C7DE / #F2C6DF, deux nuances legacy d'un cran
     d'écart qui coexistaient jusqu'ici — voir historique CLAUDE.md). Déclaré
     une seule fois ici ; --rds-fond-alt en est un alias volontaire pour ne
     jamais faire diverger les deux noms à l'avenir. */
  --rds-rose-embleme:  #FFCBEC;
  --rds-fond-alt:     var(--rds-rose-embleme);   /* alias — même rose, nom historique conservé (32 emplacements) */
  --rds-menthe:       #C7F2D5;   /* menthe clair — surface de section */
  --rds-vert-creme:   #DAF2C7;   /* vert crème — surface de section */
  /* Ces pastels sont des couleurs de SURFACE, jamais de texte :
     un pastel sur fond clair ne peut pas atteindre 4,5:1. */

  /* ── Identité — couleurs structurantes ── */
  /* Prune : couleur de structure du site — liens, accents éditoriaux,
     surtitres, états actifs, CTA principal. Remplace le grenade (l'ancien
     A33C4A), hors palette et qui échouait sur le rose (4,24:1). Le prune y tient
     5,8:1, et 7,8:1 sur le fond global. */
  --rds-accent:       #733757;
  /* Vert végétal : actions secondaires et accents végétaux. Reste
     secondaire par rapport au prune. 5,1:1 sur le fond global.
     ⚠️ 4,0:1 sur le rose (mesuré au 2026-08-02, nouveau #FFCBEC) — sous le
     seuil 4,5:1 du texte normal, ne pas l'employer comme texte de cette
     taille sur le rose ; passe le seuil 3:1 des objets graphiques/texte
     large (WCAG 1.4.11), déjà utilisé ainsi (.philo__stat-num, icônes QR). */
  --rds-vert:         #37734A;
  /* Variante profonde du vert, pour les grandes surfaces sombres et l'état
     survol du CTA vert. Nécessaire : le halo de la section « Nos services »
     (.services::before) est un var(--rds-vert) posé sur ce fond — avec une
     seule valeur de vert, il deviendrait invisible. */
  --rds-vert-deep:    #2D5E3D;
  /* Or premium : accent métallique secondaire, hors des cinq couleurs
     principales. Cadres, filets, ornements, détails du pied de page.
     ⚠️ 2,1:1 sur le fond global et 1,6:1 sur le rose : JAMAIS de texte en or
     sur fond clair. Sur le fond sombre du pied de page il tient 7,6:1. */
  --rds-or:           #C9A458;

  /* ── Interactions ── */
  /* CTA principal : prune plein, texte blanc (8,7:1). Le lot précédent
     posait un rose #E07BB1 qui imposait un texte encre (le blanc n'y
     donnait que 2,7:1) ; le prune lève cette contrainte. */
  --rds-cta:          var(--rds-accent);
  --rds-cta-hover:    #5E2D47;   /* prune assombri de 18 % — blanc à 10,8:1 */
  /* Couleur du texte posé sur un bouton plein (prune ou vert). Token explicite
     et non « #fff » en dur : la règle « texte des boutons = encre » du lot
     précédent était disséminée dans 14 déclarations réparties sur 5 fichiers,
     et rien ne signalait qu'elle dépendait de la clarté du fond rose. */
  --rds-cta-texte:    var(--rds-blanc);
  /* CTA secondaire : vert plein, texte blanc (5,7:1). Mesuré, pas supposé :
     le vert eucalyptus qu'il remplace échouait à 4,0:1 avec du blanc. */
  --rds-cta-2:        var(--rds-vert);
  --rds-cta-2-hover:  var(--rds-vert-deep);   /* blanc à 7,6:1 */
  --rds-lien:         var(--rds-accent);
  --rds-lien-hover:   var(--rds-cta-hover);
  /* Surtitres (petites capitales espacées). Un seul token, deux variantes :
     la classe .surtitre rendait jusqu'ici QUATRE couleurs différentes selon
     la page (vert sur l'accueil et l'Atelier, grenade sombre sur les pages
     internes, or sur les sections vertes), dont trois échouaient au
     contraste. Le prune passe sur tous les fonds clairs du site : 7,8:1 sur
     le fond global, 5,8:1 sur le rose, 7,1:1 sur la menthe.
     Sur fond sombre, utiliser le modificateur .surtitre--inverse. */
  --rds-surtitre:         var(--rds-accent);
  /* Variante fond sombre : le vert crème de la palette, qui passe sur les
     trois fonds sombres du site — 4,7:1 sur le vert végétal, 6,3:1 sur le
     vert profond, 14,8:1 sur le pied de page. C'est le rôle « détail
     décoratif » prévu pour les pastels ; ils restent interdits comme texte
     sur fond clair. Remplace l'or, qui n'y tenait que 2,4:1. */
  --rds-surtitre-inverse: var(--rds-vert-creme);
  /* Contour de focus clavier. Séparé de --rds-accent : c'est une fonction
     d'accessibilité, pas un accent éditorial. Le prune seul disparaîtrait
     sur les fonds sombres (2,0:1 sur le pied de page) et sur les boutons
     prune eux-mêmes — d'où le double anneau blanc + prune posé en
     box-shadow dans functions.php, lisible sur tous les fonds. */
  --rds-focus:        var(--rds-accent);
  --rds-focus-halo:   #FFFFFF;
  /* Couleur d'état « erreur ». Contact Form 7 pose son propre rouge #DC3232
     sur les messages de validation : 3,76:1 sur la surface crème des cartes de
     formulaire — un message d'erreur qu'on lit mal est précisément celui qu'il
     ne faut pas rater. Aucune mesure ne l'avait vu, ces messages n'existant
     dans le DOM qu'après une soumission invalide. Ce rouge assombri tient
     5,3:1 sur la surface crème et 6,6:1 sur le blanc des champs. Il ne rejoint
     pas la palette de marque : c'est une couleur fonctionnelle, réservée aux
     états d'erreur, au même titre que --rds-focus pour le focus clavier. */
  --rds-erreur:       #B3261E;

  /* ── Alias conservés pour compatibilité ──
     Ces noms restent consommés par des feuilles de page ; ils pointent sur
     les tokens ci-dessus et ne portent plus de valeur propre. */
  --rds-creme:        var(--rds-fond);
  --rds-blanc-casse:  #F5F1EB;                /* fonds secondaires (accueil) */
  --rds-vieux-rose:   var(--rds-accent);      /* ancienne couleur primaire */
  --rds-vert-sauge:   var(--rds-vert);        /* ancien eucalyptus */
  --rds-brun:         var(--rds-encre);       /* ancienne couleur de texte */

  /* ── Typographie ── */
  --rds-font-title:   'Cormorant Garamond', serif;
  --rds-font-body:    'Lato', sans-serif;
  /* ── Effets ── */
  --rds-radius:       4px;
  --rds-shadow:       0 4px 24px #2A1F1A14;
  --rds-transition:   0.3s ease;
  --header-height:    80px;      /* nouvelle hauteur nav (accueil.css) */
  /* ── Compat. tokens pages intérieures ── */
  /* Fond de la barre de navigation (94 % d'opacité, sous backdrop-filter).
     Valait #FAF1EDF0 et n'était consommée nulle part, alors que la nav
     rendait #F0E7E2F0 écrit en dur : le token annonçait donc une couleur
     que la nav n'a jamais eue. Aligné sur la valeur réellement rendue le
     2026-07-24, et désormais consommé par .nav (voir NAV GLOBALE).
     ⚠️ Le CSS critique inline de functions.php répète cette valeur en
     littéral : il s'applique AVANT style.css et ne peut pas lire un
     var(). Les deux doivent rester synchronisés. */
  --rds-nav-bg:       #F0E7E2F0;
  --rds-page-background-premium-base: var(--rds-fond);
  --rds-page-background-premium: radial-gradient(ellipse 70% 90% at 50% 0%, var(--rds-fond-alt) 0%, var(--rds-fond) 70%);
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  color: var(--rds-brun);
  font-family: var(--rds-font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  padding-top: var(--header-height);
}
/* Spécificité renforcée pour résister au global-styles-inline-css de WordPress */
html body { background-color: #FAF1ED; }
.rds-page-background-premium { background: var(--rds-page-background-premium); }
/* Page d'accueil : hero plein-écran — le padding-top du body est annulé,
   la nav fixe flotte au-dessus du hero. */
body.home { padding-top: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Premier contrôle utile de chaque page standard : hors écran au repos,
   pleinement visible au focus clavier. La page QR est autonome et n'utilise
   pas header.php, donc elle est explicitement exclue par architecture. */
.skip-link {
  position: fixed;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: var(--rds-encre);
  color: var(--rds-blanc);
  font-family: var(--rds-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.3;
  transform: translateY(calc(-100% - 1rem));
  transition: transform var(--rds-transition);
}
.skip-link:focus-visible { transform: translateY(0); }
#main { scroll-margin-top: calc(var(--header-height) + 1rem); }

/* Texte réservé aux technologies d'assistance : lu par un lecteur d'écran,
   invisible à l'œil. Sert au titre principal de la page QR, dont l'identité
   visuelle est portée par le logo et non par un titre écrit.
   `position:absolute` le sort du flux : posé dans un conteneur flex ou grid,
   il ne devient pas un item et ne décale donc rien. On ne peut pas utiliser
   `display:none` ni `visibility:hidden`, qui le retireraient aussi de l'arbre
   d'accessibilité — le titre disparaîtrait pour tout le monde. */
.rds-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =============================================
   TYPOGRAPHIE GLOBALE
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rds-brun);
}

/* =============================================
   NAVIGATION — Bouton Contact CTA (menu WP)
   Le header rendu est .nav (voir NAV GLOBALE ci-dessous).
   Les anciens blocs .site-header / .main-navigation / .custom-logo
   (aucun template ne les génère) ont été supprimés le 2026-07-02.
   ============================================= */
/* Bouton CONTACT de la nav. C'est ce sélecteur qui s'applique en pratique :
   `.nav__cta` n'existe que dans les menus de repli de header.php, jamais rendus
   tant qu'un menu WordPress est assigné. */
.nav .menu-item-contact a {
  background: var(--rds-cta) !important;
  color: var(--rds-cta-texte) !important;
  font-family: var(--rds-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 1.5rem;
  border-radius: var(--rds-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: filter var(--rds-transition), transform var(--rds-transition);
  border-bottom: none !important;
}
.nav .menu-item-contact a:visited {
  color: var(--rds-cta-texte) !important;
}
.nav .menu-item-contact a:hover {
  background: var(--rds-cta-hover) !important;
  transform: translateY(-1px);
  color: var(--rds-cta-texte) !important;
}

/* =============================================
   NAV GLOBALE — styles de base pour toutes les pages (état solide/scrollé)
   Variante transparente sur pages à hero plein fond : voir bloc
   "NAV — variante transparente…" juste après (body.rds-nav-hero).
   ============================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--rds-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #2A1F1A12;
  height: 80px;
  display: flex; align-items: center; padding: 0 3rem;
  transition: background var(--rds-transition), border-color var(--rds-transition);
}
.nav__inner {
  width: 100%; max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
/* `flex: 0 0 auto` — le logo ne se comprime JAMAIS. Élément flex ordinaire, il
   se rétrécissait pour laisser passer .nav__links : le SVG n'ayant pas de
   largeur minimale intrinsèque, il était ÉCRASÉ (ratio 7,23 tombant jusqu'à 0)
   et non réduit proportionnellement, la hauteur restant fixée à 37px. Mesuré
   sur /services/ : 0px de large à 901px, 94,9px à 1024px. ❌ Ne pas retirer :
   c'est la seule garantie que de futurs libellés de menu plus longs ne
   reviennent pas le déformer en silence. Contrat : tests/certification/
   nav-logo.spec.mjs. */
.nav__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.nav__logo img {
  height: 37px; width: auto; display: block;
  transition: filter var(--rds-transition);
}
.nav__links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav__links a {
  font-family: var(--rds-font-body); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rds-encre); white-space: nowrap;
  transition: color var(--rds-transition);
}
.nav__links a:hover { color: var(--rds-vert); }
.nav__links a.active { color: var(--rds-vert); border-bottom: 1px solid var(--rds-vert); padding-bottom: 2px; }
.nav__cta {
  background: var(--rds-cta); color: var(--rds-cta-texte) !important;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.65rem 1.5rem; border-radius: var(--rds-radius);
  transition: background var(--rds-transition), transform var(--rds-transition);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.nav__cta:hover { background: var(--rds-cta-hover); transform: translateY(-1px); }

/* =============================================
   NAV — variante transparente sur pages à hero photo plein fond
   Gouvernée par body.rds-nav-hero (posé via rds_has_hero_nav(), functions.php)
   sur : Accueil, Notre Histoire, Nos Services — étendre la fonction pour
   toute future page dotée du même hero plein fond.
   Tant que .nav n'a pas la classe .is-scrolled (ajoutée par main.js au
   scroll, cf. assets/js/main.js), la nav reste transparente avec logo/liens
   blancs, à l'identique de l'accueil. Dès que .is-scrolled est présente (ou
   sur les pages sans hero, où elle est posée côté serveur en permanence),
   ces règles cessent de s'appliquer et la NAV GLOBALE ci-dessus (solide)
   reprend automatiquement la main — aucune règle `.is-scrolled` à écrire.
   ============================================= */
body.rds-nav-hero { padding-top: 0; }
body.rds-nav-hero .nav:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255,255,255,0.08);
}
body.rds-nav-hero .nav:not(.is-scrolled) .nav__logo img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,0.35));
}
body.rds-nav-hero .nav:not(.is-scrolled) .nav__links a {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
body.rds-nav-hero .nav:not(.is-scrolled) .nav__links a:hover { color: var(--rds-or); }
body.rds-nav-hero .nav:not(.is-scrolled) .nav__links a.active {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.7);
}

/* =============================================
   FOOTER GLOBAL — styles de base pour toutes les pages
   (accueil.css charge les mêmes règles sur is_front_page())
   ============================================= */
.rds-footer {
  background: var(--rds-dark);
  padding: 4.5rem 3rem 2rem;
}
.rds-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem; padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* ⚠️ **Le sélecteur porte deux classes, et il le faut.** `.rds-footer__logo`
   seul (0-1-0) perd contre `.woocommerce-page img { height: auto }`
   (0-1-1, woocommerce-layout.css), appliqué sur toutes les pages du parcours de
   réservation : le logo y repartait à sa taille intrinsèque — 536 × 74 px
   mesurés, contre 224 × 31 ailleurs. La hauteur canonique reste écrite ICI et
   nulle part ailleurs : la relever en spécificité vaut mieux que la recopier
   dans la feuille du parcours, où les deux valeurs finiraient par diverger. */
.rds-footer .rds-footer__logo { height: 31px; width: auto; display: block; filter: brightness(0) invert(1) opacity(0.88); margin-bottom: 1.1rem; }
.rds-footer__desc { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.8; max-width: 320px; margin-bottom: 1.6rem; }
/* Même couleur/taille que .rds-footer__copyright (bas de page) : 5,2:1 sur le
   fond sombre, mesuré et documenté à cet endroit — détail légal, volontairement
   plus discret que la description. */
.rds-footer__vat { font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; margin-bottom: 1.4rem; }
.rds-footer__col-title { font-family: var(--rds-font-body); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-or); margin-bottom: 1.4rem; }
.rds-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.rds-footer__links a { font-size: 0.88rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color var(--rds-transition); }
.rds-footer__links a:hover { color: var(--rds-or); }
.rds-footer__contact-items { display: flex; flex-direction: column; gap: 0.95rem; }
.rds-footer__contact-item { display: flex; align-items: flex-start; gap: 0.8rem; }
.rds-footer__contact-item svg { width: 15px; height: 15px; stroke: var(--rds-or); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 3px; }
.rds-footer__contact-text { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
.rds-footer__contact-item a.rds-footer__contact-text { transition: color var(--rds-transition); }
.rds-footer__contact-item a.rds-footer__contact-text:hover { color: var(--rds-or); }
/* Horaires du pied de page : nom de boutique puis une ligne par plage
   (« Mer – Sam … » / « Dim & Jours fériés … »), sans séparateur « | ».
   L'espacement vertical reste celui du line-height à l'intérieur d'un bloc ;
   seule la respiration ENTRE deux boutiques est ajoutée, pour rester compact. */
.rds-footer__hours-line { display: block; }
.rds-footer__hours-line + .rds-footer__hours-line { margin-top: 0.55rem; }
.rds-footer__hours-line strong { display: block; color: rgba(255,255,255,0.75); font-weight: 500; }
.rds-footer__hours-slot { display: block; }
.rds-footer__social { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.rds-footer__social-link { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: background var(--rds-transition), border-color var(--rds-transition), color var(--rds-transition), transform var(--rds-transition); }
.rds-footer__social-link:hover { background: var(--rds-or); border-color: var(--rds-or); color: var(--rds-dark); transform: translateY(-2px); }
.rds-footer__social-link svg { width: 16px; height: 16px; display: block; }
.rds-footer__bottom { max-width: 1200px; margin: 0 auto; padding-top: 1.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
/* Lien et copyright du pied de page : blanc à 35 % et 30 % donnaient 3,2:1
   et 2,7:1 sur le fond sombre. Remontés à 55 % et 50 % (6,1:1 et 5,2:1) —
   ils restent visiblement secondaires par rapport aux liens de navigation
   du pied de page, qui sont à 70 %. */
.rds-footer__privacy-link,
.rds-footer__cookie-link { font-size: 0.72rem; color: rgba(255,255,255,0.55); text-decoration: none; letter-spacing: 0.05em; transition: color var(--rds-transition); }
.rds-footer__cookie-link { padding: 0; border: 0; background: none; font-family: var(--rds-font-body); cursor: pointer; }
.rds-footer__privacy-link:hover,
.rds-footer__cookie-link:hover { color: var(--rds-or); }
.rds-footer__copyright { font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }

/* =============================================
   BANDEAU COOKIES — global toutes pages
   ============================================= */
.cookie-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left)); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.cookie-modal[hidden] { display: none; }
.cookie-modal.show { opacity: 1; visibility: visible; }
.cookie-modal__overlay { position: absolute; inset: 0; background: #1F16128C; backdrop-filter: blur(4px); }
.cookie-modal__panel { position: relative; z-index: 1; width: min(100%, 520px); background: var(--rds-fond); border-radius: 10px; box-shadow: 0 30px 80px -20px #2A201A80; border: 1px solid #C9A4584D; padding: 2.6rem 2.6rem 2.2rem; max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; transform: translateY(16px) scale(0.98); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); font-family: var(--rds-font-body); font-size: 1rem; font-weight: 300; line-height: 1.6; }
.cookie-modal.show .cookie-modal__panel { transform: translateY(0) scale(1); }
.cookie-modal__orn { display: block; margin: 0 auto 1rem; color: var(--rds-accent); opacity: 0.6; width: 44px; height: 44px; }
.cookie-modal__title { font-family: var(--rds-font-title); font-style: normal; font-size: clamp(1.75rem, 7vw, 1.9rem); font-weight: 400; line-height: 1.15; color: var(--rds-encre); text-align: center; margin-bottom: 0.7rem; }
.cookie-modal__intro { font-size: 0.9rem; color: var(--rds-taupe); text-align: center; line-height: 1.6; max-width: 400px; margin: 0 auto 1.8rem; }
.cookie-modal__intro a { color: var(--rds-lien); text-decoration: none; border-bottom: 1px solid #73375759; }
.prefrow { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid #2A1F1A1A; }
.prefrow__text { flex: 1; }
.prefrow__name { font-family: var(--rds-font-title); font-size: 1.2rem; font-weight: 400; line-height: 1.25; color: var(--rds-encre); margin-bottom: 0.2rem; }
.prefrow__desc { font-size: 0.8rem; color: var(--rds-taupe); line-height: 1.5; }
.prefrow__fixed { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #37734A; padding-top: 0.4rem; flex-shrink: 0; }
.toggle { position: relative; width: 44px; height: 44px; flex-shrink: 0; margin: -0.35rem 0; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.toggle__track { position: absolute; inset: 9px 0; border-radius: 20px; background: #2A1F1A38; transition: background 0.3s ease; }
.toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #00000040; transition: transform 0.3s ease; }
.toggle input:checked + .toggle__track { background: #37734A; }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--rds-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--rds-focus-halo); }
.cookie-modal__actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.8rem; }
.cookie-modal__actions-row { display: flex; gap: 0.7rem; }
.cookie-modal__actions-row .rds-btn { flex: 1; }
.rds-btn { min-height: 44px; font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400; line-height: 1.35; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.95rem 1.2rem; border-radius: 4px; cursor: pointer; transition: filter 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease; white-space: normal; overflow-wrap: anywhere; border: 1px solid transparent; text-align: center; display: block; width: 100%; }
.rds-btn--primary { background: var(--rds-cta); color: var(--rds-cta-texte); border-color: var(--rds-cta); }
.rds-btn--primary:hover { background: var(--rds-cta-hover); border-color: var(--rds-cta-hover); transform: translateY(-1px); }

/* =============================================
   BOUTONS — états focus et désactivé (2026-07-23)
   Aucun style de focus n'existait sur les boutons : la navigation au clavier
   ne donnait aucun repère visible. L'anneau est posé en outline (il ne
   déplace donc aucun élément) et n'apparaît qu'au focus clavier.
   ============================================= */
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-outline-accent:focus-visible,
.btn-outline-rose:focus-visible,
.btn-ghost-or:focus-visible,
.rds-btn:focus-visible,
.shop__action:focus-visible,
.shop-btn:focus-visible,
.nav__cta:focus-visible,
.hero__btn-primary:focus-visible,
.wpcf7-form [type="submit"]:focus-visible {
  outline: 2px solid var(--rds-encre);
  outline-offset: 3px;
}
.btn-primary:disabled,
.rds-btn:disabled,
.wpcf7-form [type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.rds-btn--ghost { background: transparent; color: #2A1F1A; border-color: #2A1F1A42; }
.rds-btn--ghost:hover { background: #2A1F1A; color: #FAF1ED; border-color: #2A1F1A; }
/* « Enregistrer mes choix » : action secondaire de la modale, d'où le vert
   plein et non le prune, réservé à l'action principale (« Tout accepter »). */
.rds-btn--save { background: var(--rds-cta-2); color: var(--rds-cta-texte); border-color: var(--rds-cta-2); }
.rds-btn--save:hover { background: var(--rds-cta-2-hover); border-color: var(--rds-cta-2-hover); transform: translateY(-1px); }
@media (max-width: 520px) {
  .cookie-modal { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .cookie-modal__panel { padding: 1.8rem 1.4rem 1.5rem; }
  .cookie-modal__actions-row { flex-direction: column; }
}
body.has-cookie-modal-open,
body.has-mobile-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .cookie-modal,
  .cookie-modal__panel,
  .toggle__track,
  .toggle__track::after { transition: none; }
}

@media (forced-colors: active) {
  .toggle__track { border: 1px solid CanvasText; }
  .toggle input:checked + .toggle__track::after { background: HighlightText; }
}
/* Bascule vers le menu burger — 1279px, et non 900px.
   Le seuil vient d'un calcul, pas d'un goût : logo (267,6px) + écart (32px) +
   liste de navigation (863px à sa typographie normale) = 1162,6px, que
   `.nav__inner` n'offre qu'à partir de 1259px de fenêtre (padding compris). En
   dessous, la barre desktop ne peut PAS tenir sur une ligne — c'est ce déficit
   que le logo absorbait en se déformant. 1279px laisse la barre aux écrans de
   1280px et plus, qui la portent avec une marge mesurée de 21px.
   ⚠️ Tout libellé de menu rallongé déplace ce seuil : le revérifier par mesure
   (largeur réelle de .nav__links), jamais à l'œil. */
@media (max-width: 1279px) {
  .nav__links { display: none; }
}
/* Petits écrans : le logo RÉTRÉCIT, il ne s'écrase pas.
   `flex: 0 0 auto` le rend incompressible ; sous ~368px la barre n'a plus la
   place de l'afficher à 37px et c'est alors le burger qui sortait de l'écran
   (mesuré à 320px : bord droit du burger à 368px). On réduit donc la HAUTEUR,
   `width: auto` suivant le ratio — la réduction reste proportionnelle.
   Largeurs disponibles mesurées (padding 24px + écart 32px + burger 44px) :
   320px ⇒ 196px de place (hauteur max 27,1px) · 360px ⇒ 236px (32,6px).
   ⚠️ Ces hauteurs dérivent du ratio du logo actuel (7,232). Remplacer
   `logo.svg` par un dessin d'un autre ratio oblige à les recalculer. */
@media (max-width: 400px) {
  .nav__logo img { height: 30px; }
}
@media (max-width: 340px) {
  .nav__logo img { height: 26px; }
}
@media (max-width: 900px) {
  .nav { padding: 0 1.5rem; }
  .rds-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .rds-footer { padding: 3.5rem 1.5rem 1.5rem; }
}

/* =============================================
   BOUTONS GLOBAUX
   ============================================= */
.btn-primary {
  display: inline-block;
  background: var(--rds-vieux-rose);
  color: #fff;
  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: 2px solid var(--rds-vieux-rose);
  border-radius: var(--rds-radius);
  cursor: pointer;
  white-space: nowrap;
  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-brun);
  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: 2px solid var(--rds-brun);
  border-radius: var(--rds-radius);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rds-transition), color var(--rds-transition), transform var(--rds-transition);
}
.btn-outline:hover {
  background: var(--rds-brun);
  color: var(--rds-creme);
  transform: translateY(-2px);
}

.btn-outline-rose {
  display: inline-block;
  background: transparent;
  color: var(--rds-vieux-rose);
  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: 2px solid var(--rds-vieux-rose);
  border-radius: var(--rds-radius);
  cursor: pointer;
  transition: background var(--rds-transition), color var(--rds-transition), transform var(--rds-transition);
}
/* Le texte au repos reste en prune (7,8:1 sur le fond global). Au survol le
   bouton se remplit de prune : le texte passe alors au blanc (8,7:1).
   ⚠️ La déclaration posait l'encre alors que ce commentaire annonçait le blanc
   — 1,84:1 au survol. Corrigé le 2026-07-24 : le token --rds-cta-texte porte
   la règle, il ne doit jamais être remplacé par l'encre sur un fond prune. */
.btn-outline-rose:hover {
  background: var(--rds-cta);
  color: var(--rds-cta-texte);
  border-color: var(--rds-cta);
  transform: translateY(-2px);
}

.btn-ghost-or {
  display: inline-block;
  background: transparent;
  color: var(--rds-or);
  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: 1px solid var(--rds-or);
  border-radius: var(--rds-radius);
  cursor: pointer;
  transition: background var(--rds-transition), color var(--rds-transition), transform var(--rds-transition);
}
.btn-ghost-or:hover { background: var(--rds-or); color: #fff; transform: translateY(-2px); }

/* =============================================
   SURTITRE
   Deux variantes seulement, choisies d'après le FOND et non d'après la page.
   Avant le 2026-07-24, la même classe rendait quatre couleurs selon la
   feuille qui la surchargeait (vert, grenade sombre, or, or clair) — trois
   d'entre elles échouaient au contraste sur leur fond réel.
     .surtitre            → fonds clairs (crème, rose, menthe, vert crème)
     .surtitre--inverse   → fonds sombres (vert, vert profond, pied de page)
   ============================================= */
.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;
}
/* Doublé (0-2-0) à dessein : chaque feuille de page redéfinit .surtitre à
   0-1-0 et se charge après style.css — à spécificité égale, la page gagnerait
   et le modificateur serait sans effet (constaté en mesure sur /services/). */
.surtitre.surtitre--inverse { color: var(--rds-surtitre-inverse); }

/* =============================================
   SÉPARATEUR FLORAL
   ============================================= */
.floral-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  background: #fff8f2;
}
.floral-divider svg { opacity: 0.85; }

/* =============================================
   INTRODUCTION ÉDITORIALE SANS PHOTO — Créations & Nos Ateliers
   Hero typographique partagé : surtitre, titre, filet à pastille, chapeau.
   Né sur la page Créations (creations.css § 02), déplacé ICI tel quel le
   2026-09-27 (1.34.6), quand Nos Ateliers a perdu sa photo de hero et
   repris cette introduction : une seule source plutôt qu'une copie par
   page. Le nom `creations-intro` est historique.
   ⚠️ Toute retouche de ces règles atteint LES DEUX pages.
   Les six premières déclarations de `.creations-intro` recopient ce que le
   bloc héritait de `.creations-page` — valeurs identiques, rendu de
   Créations inchangé. Sans elles, il prendrait sur Nos Ateliers le corps de
   page de ce fichier (17px, interligne 1.8). Aucune marge à remettre à zéro
   ici : le reset en tête de ce fichier s'en charge déjà.
   ============================================= */
.creations-intro {
  font-family: var(--rds-font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--rds-encre);
  -webkit-font-smoothing: antialiased;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4.6rem 3rem 2rem;
  text-align: center;
}
.creations-intro__eyebrow {
  font-family: var(--rds-font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rds-accent);
  margin-bottom: 1.1rem;
}
.creations-intro__title {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1;
}
.creations-intro__title em { color: var(--rds-accent); font-style: italic; font-weight: 300; }

/* filet décoratif avec pastille centrale */
.creations-intro__rule {
  position: relative;
  width: 52px;
  height: 1px;
  border: 0;
  background: var(--rds-fond-alt);
  margin: 1.4rem auto 0;
}
.creations-intro__rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rds-fond-alt);
  transform: translateX(-50%);
}
.creations-intro__lead {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1.12rem;
  color: var(--rds-taupe);
  max-width: 560px;
  margin: 1.2rem auto 0;
  text-wrap: pretty;
}
@media (max-width: 800px) {
  .creations-intro { padding: 3.2rem 1.4rem 1.4rem; }
}

/* =============================================
   STYLES PAGE D'ACCUEIL — voir assets/css/accueil.css
   ---------------------------------------------
   La page d'accueil (front-page.php, markup inline) est stylee
   ENTIEREMENT par assets/css/accueil.css (classes .hero__*, .philo__*,
   .create-card__*, .social__*, .insta__*, .svc-card*...), charge
   uniquement sur is_front_page() via rds_enqueue_accueil() (priorite 20).

   Les anciennes sections homepage de style.css (.info-card, .hero-*,
   .section-philosophie/creations/social/services/atelier/instagram/citation,
   .creation-card) ont ete SUPPRIMEES le 2026-06-06 : code mort
   (rendu par les ex-template-parts/, eux aussi supprimes).
   Toute modif visuelle de l'accueil se fait dans accueil.css.
   ============================================= */

/* =============================================
   PAGES INTÉRIEURES — Bannière
   ============================================= */
.page-banner {
  background: #fbf1e8;
  padding: 4rem 3rem 4rem;
  /* Filet en encre à 7 % — était l'ancien brun rgba(58,46,42,0.07). */
  border-bottom: 1px solid #2A1F1A12;
}
.page-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.page-banner__title {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 500;
  color: var(--rds-brun);
  line-height: 1.15;
  margin: 0;
}

/* ── Bandeau vert — fiches d'atelier et parcours de réservation ──────────
   ⚠️ **Traitement chromatique SEUL.** Aucune dimension, aucun espacement,
   aucun ornement n'est touché : la structure reste celle de `.page-banner`
   ci-dessus, filet inférieur compris. Trois déclarations de couleur, rien
   d'autre.

   ⚠️ **Ce bloc vit ICI, dans `style.css`, et c'est une CONTRAINTE, pas un
   rangement.** Il a d'abord été écrit dans `assets/css/reservation.css`
   (lot `1.21.5`), qui n'est mise en file que lorsque WooCommerce est actif ET
   que la requête appartient au parcours (`rds_reservation_contexte_commerce()`,
   `inc/reservation/storefront.php`). Or la fiche d'un atelier existe **sans
   WooCommerce** : le calendrier des ateliers est un module du thème, la
   réservation en ligne un module posé par-dessus. L'y laisser aurait rendu
   l'habillage de la fiche tributaire d'une extension absente de la production.
   `style.css` est chargée partout — les cinq écrans sont donc couverts par la
   même feuille, celle-là même qui définit `.page-banner`.

   ⚠️ **Portée — CINQ écrans, TROIS portes, une seule apparence.**
   `.page-banner` est partagée par `page.php`, `index.php` et
   `single-rds_event.php`. Les règles ci-dessous ne s'adressent donc JAMAIS à
   `.page-banner` nu, mais à trois portes distinctes :

    - `.page-banner--atelier` — modificateur écrit par `single-rds_event.php`,
      et seulement pour un type d'atelier reconnu (`rds_workshop_type_map()`) ;
    - `.page-banner--reservation` — modificateur écrit par le gabarit de
      l'écran de réservation (`inc/reservation/views/page-reservation.php`),
      qui lui appartient en propre ;
    - `body.rds-parcours-commande` — classe de corps posée par
      `rds_reservation_etape_parcours()` (`inc/reservation/checkout.php`,
      § 2 bis) sur les TROIS écrans de la page de commande de WooCommerce —
      validation, reprise de paiement, confirmation — rendus par le gabarit
      GÉNÉRIQUE `page.php`. Lui apprendre l'existence des réservations serait
      la contagion qu'on évite.

   ⚠️ **Les trois portes partagent la MÊME liste de sélecteurs**, à dessein :
   un jeu de déclarations dupliqué divergerait au premier ajustement, et des
   écrans qui se suivent cesseraient d'être identiques sans que rien ne le
   signale. Deux scénarios comparent d'ailleurs leurs couleurs calculées
   (`tests/reservation/finition-visuelle.spec.mjs`,
   `tests/certification/fiche-atelier-bandeau.spec.mjs`).

   ⚠️ **Sur la fiche, le vert suit l'IDENTITÉ « atelier », jamais la
   disponibilité.** Une fiche d'atelier complet, clôturé, annulé ou passé est
   verte elle aussi : ce bandeau ouvre la chaîne
   calendrier → fiche → réservation → commande → paiement → confirmation, et
   une fiche qui changerait de couleur selon son état romprait la continuité
   que ce lot installe. L'état, lui, reste dit par la pastille
   `.rds-workshop-status`, dans le corps de la page — pas par le fond du hero.
   Sur les trois écrans de commande, en revanche, le vert suit la RÉSERVATION :
   chacun exige sa propre preuve qu'il s'agit d'un atelier — un produit marqué
   au panier pour la validation, la méta `_rds_event_id` de la COMMANDE *et sa
   clé* pour les deux autres.

   **Le vert n'est pas une nouvelle nuance** : c'est `--rds-vert-deep`
   (`#2D5E3D`), celui de la section « Ce que nous proposons » de l'accueil
   (`assets/css/accueil.css`, `.services`). Il est repris par son token, jamais
   recopié en littéral — le jour où le token bouge, les surfaces bougent
   ensemble.
   ⚠️ **Ce bloc ne reprend PAS le halo `::before` de `.services`** : ce voile
   flou rendrait le fond COMPOSÉ, et le contraste ne se mesurerait plus par
   calcul mais par échantillonnage de pixels (§ « Méthode de mesure du
   contraste », CLAUDE.md). Le fond reste plat, et c'est ce qui rend les deux
   rapports ci-dessous exacts.

   ⚠️ **« rose/accent » : c'est le ROSE, jamais l'ACCENT.** Mesuré en WCAG sur
   ce vert — `--rds-rose-embleme` (`#FFCBEC`) donne **5,40:1**, au-dessus des
   4,5:1 exigés pour du texte normal, ce qu'est ce libellé de 0,7 rem. Mais
   `--rds-accent` (le prune `#733757`) s'effondre à **1,15:1** : deux couleurs
   sombres l'une sur l'autre. Ne jamais le poser ici.
   Le titre prend `--rds-fond` (`#FAF1ED`), le blanc cassé canonique du site —
   **6,79:1**. `--rds-blanc` monterait à 7,55:1, mais ce n'est pas un blanc
   cassé et le site réserve le blanc pur à ce qui doit trancher sur le crème.
   ⚠️ Ces deux teintes sont des PASTELS : elles ne tiennent que parce que le
   fond est sombre. La règle « aucun pastel en texte sur fond clair » de
   CLAUDE.md reste entière — ce bloc n'y déroge pas, il en sort.

   ⚠️ Spécificité : `.surtitre` et `.page-banner__title` valent 0-1-0 ; les
   sélecteurs ci-dessous valent 0-2-0 et l'emportent sans `!important`. C'est
   le piège documenté du modificateur `.surtitre--inverse`, évité ici en
   composant le modificateur avec le contexte.                          */
.page-banner--atelier,
.page-banner--reservation,
.rds-parcours-commande .page-banner { background: var(--rds-vert-deep); }

.page-banner--atelier .surtitre,
.page-banner--reservation .surtitre,
.rds-parcours-commande .page-banner .surtitre { color: var(--rds-rose-embleme); }

.page-banner--atelier .page-banner__title,
.page-banner--reservation .page-banner__title,
.rds-parcours-commande .page-banner .page-banner__title { color: var(--rds-fond); }

/* =============================================
   PAGES INTÉRIEURES — Contenu
   ============================================= */
.page-wrapper {
  background: var(--rds-creme);
}
.page-content-area {
  max-width: 860px;
  margin: 0 auto;
  padding: 5rem 3rem 7rem;
}
.page-body {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--rds-taupe);
}
.page-body h2 {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--rds-brun);
  margin: 3rem 0 1rem;
  line-height: 1.2;
}
.page-body h3 {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 500;
  color: var(--rds-brun);
  margin: 2rem 0 0.75rem;
  line-height: 1.25;
}
.page-body h4 {
  font-family: var(--rds-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rds-vieux-rose);
  margin: 1.5rem 0 0.5rem;
}
.page-body p { margin-bottom: 1.5rem; }
.page-body a {
  color: var(--rds-vieux-rose);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--rds-transition);
}
.page-body a:hover { color: var(--rds-lien-hover); }
.page-body ul,
.page-body ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.page-body li { margin-bottom: 0.4rem; }
.page-body strong { font-weight: 600; color: var(--rds-brun); }
.page-body img {
  border-radius: 8px;
  box-shadow: var(--rds-shadow);
  margin: 2rem 0;
}
.page-body hr {
  border: none;
  /* Filet en encre à 10 % — était l'ancien brun rgba(58,46,42,0.10). */
  border-top: 1px solid #2A1F1A1A;
  margin: 3rem 0;
}
.page-body blockquote {
  border-left: 3px solid var(--rds-vieux-rose);
  margin: 2rem 0;
  padding: 1rem 2rem;
  font-family: var(--rds-font-title);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--rds-brun);
  background: #fff8f2;
  border-radius: 0 8px 8px 0;
}

/* Blocs Gutenberg — boutons */
.page-body .wp-block-button .wp-block-button__link,
.page-body .wp-block-buttons .wp-block-button__link {
  background: var(--rds-vieux-rose) !important;
  color: #fff !important;
  font-family: var(--rds-font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  border: 2px solid var(--rds-vieux-rose) !important;
  border-radius: var(--rds-radius) !important;
  text-decoration: none;
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.page-body .wp-block-button .wp-block-button__link:hover,
.page-body .wp-block-buttons .wp-block-button__link:hover {
  filter: brightness(0.88);
  transform: translateY(-2px);
}
.page-body .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--rds-vieux-rose) !important;
  border: 2px solid var(--rds-vieux-rose) !important;
}
.page-body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--rds-vieux-rose) !important;
  color: #fff !important;
}

/* Contact Form 7 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-family: var(--rds-font-body);
  font-size: 0.9rem;
  color: var(--rds-brun);
  background: var(--rds-blanc);
  border: 1px solid var(--rds-bordure);
  border-radius: var(--rds-radius);
  transition: border-color var(--rds-transition), box-shadow var(--rds-transition);
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--rds-focus);
}
.wpcf7-form input[type="text"]:focus-visible,
.wpcf7-form input[type="email"]:focus-visible,
.wpcf7-form input[type="tel"]:focus-visible,
.wpcf7-form input[type="checkbox"]:focus-visible,
.wpcf7-form input[type="radio"]:focus-visible,
.wpcf7-form textarea:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form a:focus-visible {
  outline: 2px solid var(--rds-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--rds-focus-halo);
}
.wpcf7-form input:disabled,
.wpcf7-form textarea:disabled,
.wpcf7-form select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wpcf7-form .wpcf7-not-valid,
.wpcf7-form [aria-invalid="true"] {
  border-color: var(--rds-erreur);
}
/* Bouton d'envoi CF7. Cette règle (0-2-1) l'emporte sur `.form-card .wpcf7-submit`
   (0-2-0) de contact.css : c'est donc ici qu'il faut poser la couleur du bouton. */
.wpcf7-form input[type="submit"] {
  background: var(--rds-cta);
  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;
  padding: 1rem 2.4rem;
  border: 2px solid var(--rds-cta);
  border-radius: var(--rds-radius);
  cursor: pointer;
  transition: background var(--rds-transition), transform var(--rds-transition);
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--rds-cta-hover);
  border-color: var(--rds-cta-hover);
  transform: translateY(-2px);
}

/* Messages de validation de Contact Form 7. Le plugin les rend dans son propre
   rouge #DC3232, qui ne tient que 3,76:1 sur la surface crème des cartes de
   formulaire. La couleur est reprise ici sur le token d'état, et la bordure du
   bandeau de réponse suit — un liseré est un élément d'interface, il lui suffit
   de 3:1, que ce rouge dépasse largement. */
.wpcf7-form .wpcf7-not-valid-tip {
  color: var(--rds-erreur);
  font-weight: 400;
}
/* Scopé aux états d'échec que Contact Form 7 pose sur le <form>. Sans ce
   scope, la règle repeindrait aussi le message de confirmation d'envoi, qui a
   son propre vert : un « message envoyé » en rouge. */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  color: var(--rds-erreur);
  border-color: var(--rds-erreur);
}

/* Responsive pages intérieures */
@media (max-width: 768px) {
  .page-banner { padding: 2rem 1.5rem 2.5rem; }
  .page-content-area { padding: 3rem 1.5rem 5rem; }
}

/* ─── Typographie globale meta boutiques ─── */
.shop__meta {
  font-family: var(--rds-font-body);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.7;
  font-style: normal;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Hero étiquettes — responsive
   Desktop  : wrapper .hero__events absolu en bas-droite, labels empilés
   Mobile   : labels repositionnés en flux normal sous le contenu hero
   Spécificité renforcée (.hero .hero__events) pour surcharger
   la règle display:none appliquée par accueil.css à 900px.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .hero .hero__events {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 1.2rem 2rem;
    width: 100%;
    max-width: 100%;
    background: transparent;
  }
  .hero .hero__event {
    display: flex;
    cursor: pointer;
    width: 100%;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .hero .hero__event-title {
    white-space: normal;
    color: #fff;
  }
  .hero .hero__event-meta {
    color: rgba(255,255,255,0.7);
  }
  .hero .hero__event-pill {
    background: var(--rds-or);
    color: var(--rds-brun);
  }
  .hero .hero__event-arrow {
    background: rgba(255,255,255,0.18);
    color: #fff;
  }
}