/* =============================================
   ACCUEIL — La Rose des Sables
   ---------------------------------------------
   FEUILLE DE STYLE DÉDIÉE À LA PAGE D'ACCUEIL (front-page.php, markup inline).
   Chargée uniquement sur is_front_page() via rds_enqueue_accueil() (priorité 20),
   APRÈS style.css qu'elle surcharge.
   ⚠️ Les styles de la homepage NE sont PAS dans style.css : l'ancien code
   (sections .info-card / .hero-* / .section-* / .creation-card) y a été supprimé
   le 2026-06-06. Toute modif visuelle de l'accueil se fait ICI.
   Classes principales : .hero__*, .philo__*, .create-card__*, .social__*,
   .svc-card*, .services*, .atelier*.
   Couleurs en HEX (8-digit pour les opacités).
   ============================================= */

/* ─── TOKENS PROPRES À L'ACCUEIL ───
   La palette (--rds-fond, --rds-encre, --rds-or…) vient de style.css :
   elle était recopiée ici à l'identique, à un détail près — --rds-fond y
   valait #FAF1EC au lieu de #FAF1ED, un écart d'un point de bleu sans
   justification, qui faisait diverger le fond de l'accueil de celui de
   toutes les autres pages. Duplication retirée le 2026-07-24 ; seuls les
   tokens réellement propres à cette page restent ci-dessous. */
:root {
  /* Rythme vertical des sections — 2 paliers :
     - generous : transitions majeures (Hero→Créations, Créations→Services,
       et la section Philosophie elle-même, symétrique sur ses 2 bords)
     - compact  : transitions secondaires autour de la section Boutiques et
       des sections Avis/Partenaires
     Ordre depuis le lot accueil-reorganisation-sections (2026-07-25) :
     Hero → Créations → Services → Philosophie → Boutiques → Avis →
     Partenaires → Social. Voir CLAUDE.md, section "Rythme vertical de
     l'accueil". */
  --rds-space-generous: 7rem;   /* 112px */
  --rds-space-base:     6rem;   /* 96px */
  --rds-space-compact:  5rem;   /* 80px */
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--rds-font-body); font-weight: 300;
  background: var(--rds-fond); color: var(--rds-encre);
  font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── NAV — transparente au-dessus du hero photo ───
   Le comportement transparent → solide au scroll (background, backdrop-filter,
   couleurs logo/liens/burger) est désormais mutualisé pour toutes les pages à
   hero plein fond via body.rds-nav-hero (style.css + mobile-nav.css) —
   voir rds_has_hero_nav() dans functions.php. La taille du logo est désormais
   la même partout (source unique : .nav__logo img dans style.css) ; ne reste
   ici que ce qui est réellement spécifique à l'accueil : le bouton CTA. */
.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);
  text-shadow: none;
  transition: filter var(--rds-transition), transform var(--rds-transition);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.nav__cta:hover { filter: brightness(0.9); transform: translateY(-1px); }

/* ─── UTILITAIRES ─── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 3rem; }
.surtitre {
  display: inline-block; font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--rds-surtitre);
}
.section-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-weight: 500; color: var(--rds-encre); line-height: 1.15;
  letter-spacing: 0;
}
.btn {
  display: inline-block; font-family: var(--rds-font-body);
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1rem 2.2rem; border-radius: var(--rds-radius);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: filter var(--rds-transition), background var(--rds-transition), color var(--rds-transition), transform var(--rds-transition), border-color var(--rds-transition);
}
.btn--primary { background: var(--rds-cta-2); color: var(--rds-cta-texte); border-color: var(--rds-cta-2); }
.btn--primary:hover { background: var(--rds-cta-2-hover); border-color: var(--rds-cta-2-hover); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--rds-encre); border-color: var(--rds-encre); }
.btn--outline:hover { background: var(--rds-encre); color: var(--rds-fond); transform: translateY(-2px); }
.btn--outline-vert { background: transparent; color: var(--rds-vert); border-color: var(--rds-vert); padding: 0.85rem 2rem; font-size: 0.7rem; }
.btn--outline-vert:hover { background: var(--rds-vert); color: #fff; transform: translateY(-2px); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-2px); }

/* Placeholders */
.ph {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rds-font-body); font-size: 0.65rem;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center; padding: 12px;
  border-radius: 4px;
}
.ph--rose {
  background: repeating-linear-gradient(45deg, #73375724 0px, #73375724 1px, #73375738 1px, #73375738 14px);
  color: var(--rds-taupe);
}
.ph--vert {
  background: repeating-linear-gradient(45deg, #37734A1F 0px, #37734A1F 1px, #37734A33 1px, #37734A33 14px);
  color: var(--rds-taupe);
}
.ph--or {
  background: repeating-linear-gradient(-45deg, #C9A45824 0px, #C9A45824 1px, #C9A4583D 1px, #C9A4583D 14px);
  color: var(--rds-taupe);
}

/* Floral sep */
.floral-sep { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--rds-or); }
.floral-sep__line { width: 60px; height: 1px; background: linear-gradient(to right, transparent, #C9A45899); }
.floral-sep__line--rev { background: linear-gradient(to left, transparent, #C9A45899); }
.floral-sep svg { width: 18px; height: 14px; }

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

/* ════════════════════════════════════════
   HERO — OPTION 1 PLEIN ÉCRAN ÉDITORIAL
   ════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #fff;
  /* Couleur de secours sous la photo : rose-encre profond, cohérent avec accord D */
  background: #2A1F1A;
  /* Géométrie du conteneur éditorial du hero — source unique, consommée par
     .hero__center ET par le calage de .hero__events dans la plage desktop
     intermédiaire (voir § RESPONSIVE). Sans ces variables, 1480px et 5rem
     seraient répétés à deux endroits qui doivent rester alignés au pixel. */
  --rds-hero-max: 1480px;
  --rds-hero-gutter: 5rem;
  /* Largeur maximale réellement occupée par le contenu éditorial, à distinguer
     des 560px de .hero__inner : c'est le LOGO du titre qui est l'élément le
     plus large (524px à son plafond de 5.5rem, contre 460px pour .hero__sub).
     Consommée par .hero__veil pour caler la fin de sa zone pleine — mesurée,
     pas estimée : voir le commentaire du voile. */
  --rds-hero-contenu: 540px;
}
.hero__photo {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Photo du lot 1.33.0 : étal de fleurs coupées, paniers de pivoines,
     hortensias et gerberas (1448 × 1086). ⚠️ **C'est la photo qui avait été
     posée sur Nos Services** — les deux heros ont échangé leur image, chacune
     gardant le NOM de sa page. Les octets ayant changé sous un nom inchangé,
     `front-page.php` pose un `?ver=` sur ce `<img>`, qui n'en avait aucun :
     sans lui, les visiteurs déjà venus garderaient l'ancienne photo en cache.
     Valeur desktop inchangée (25 % 30 %) : à 1440 px l'échelle vient de la
     largeur (1440/1448 ≈ 1), le débordement est vertical et X n'agit pas ;
     30 % garde l'étal entier sans entamer le plafond. Le texte reste à droite,
     devant la paroi de bois — la zone la plus calme de cette photo aussi.
     Contraste revérifié par échantillonnage de pixels, photo contre photo :
     `.hero__sub` 5,26 contre 5,23 à 1440 px et 4,42 contre 4,07 à 390 —
     l'échange ne dégrade rien, le voile n'a pas bougé. */
  object-position: 25% 30%;
  display: block;
}
/* Placeholder bouquet — sera caché dès que l'image est chargée */
.hero__photo-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 35% 28% at 25% 32%, #C38089 0%, transparent 70%),
    radial-gradient(ellipse 28% 22% at 70% 25%, #DEC89B 0%, transparent 65%),
    radial-gradient(ellipse 32% 24% at 50% 55%, #D7BB82 0%, transparent 65%),
    radial-gradient(ellipse 36% 28% at 78% 65%, #CC949C 0%, transparent 70%),
    radial-gradient(ellipse 30% 28% at 22% 70%, #D9BF8A 0%, transparent 65%),
    radial-gradient(ellipse 28% 25% at 60% 82%, #E4D2AC 0%, transparent 65%),
    linear-gradient(165deg, #463127 0%, #36281D 50%, #2F2118 100%);
}
.hero__photo-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(40deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(-42deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 22px);
  pointer-events: none;
}
.hero__photo-label {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--rds-font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.25);
  padding: 6px 12px;
  border-radius: 2px;
  z-index: 2;
}

/* Voile du hero — ALIGNÉ (2026-09-06) sur le système des quatre heros internes
   (Notre Histoire, Nos Services, Nos Ateliers, Contact). La photo du 2026-09-06
   est beaucoup plus riche et plus claire que la précédente sous la colonne de
   texte (paroi de bois et verdure en pleine lumière) : mesuré au pixel, le
   texte blanc y tombait entre 1,29:1 et 2,81:1 selon la largeur, et les
   text-shadow en place n'y changeaient rien (+0,03 au mieux — trop diffuses
   pour produire une séparation de bord).

   Le dégradé horizontal reprend les OPACITÉS et la teinte d'atelier.css — seul
   hero du site dont le texte est lui aussi à droite, d'où le sens `to left` :
   il monte à 0,66 sous la colonne éditoriale et retombe à 0 avant la moitié
   gauche du cadre, là où vivent les fleurs vives (object-position: 25% 30%).
   Cette moitié-là garde donc 100 % de ses couleurs.

   ⚠️ Mais ses POSITIONS de stops, elles, ne peuvent pas être recopiées en
   pourcentages : sur les heros internes la colonne de texte suit la largeur du
   viewport, alors qu'ici elle est calée à droite d'un conteneur de largeur
   FIXE et centré (--rds-hero-max). Le texte et le dégradé dérivent donc l'un
   par rapport à l'autre dès qu'on quitte ~1400px — mesuré avec les stops en
   pourcentage : le texte tombait à 2,27:1 à 2560px (colonne posée à 54-76 %
   de la largeur, là où le voile ne vaut plus que 0,12 à 0,40) et à 1,61:1 à
   1024px (colonne étalée sur 37 à 92 %, dont la moitié gauche hors du voile).
   Les stops sont donc exprimés en distance depuis le BORD DROIT, à partir des
   mêmes variables de géométrie que .hero__center : la zone pleine couvre
   exactement la colonne éditoriale, quelle que soit la largeur, et le fondu
   de 330px la suit. C'est ce qui rend 2560 et 1024 aussi lisibles que 1440.

   ⚠️ Le dégradé vertical garde les OPACITÉS de l'accueil (0,42 en haut, 0,55
   en bas) au lieu des 0,38/0,48 des heros internes : le haut porte la nav
   transparente et le bas porte .hero__events, dont les cartes translucides
   sont couvertes par un contrat de test — les éclaircir n'apporterait rien et
   demanderait de remesurer ce bloc. Seule la TEINTE est harmonisée (encre
   chaude 31,22,18 au lieu du noir pur). */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Distance entre le bord droit du viewport et le bord GAUCHE de la colonne
     éditoriale : marge de centrage du conteneur + gouttière + largeur du
     contenu. Les trois termes sont les variables de .hero, jamais des valeurs
     recopiées — déplacer la colonne déplace le voile avec elle. */
  --rds-veil-plein: calc(
    max(0px, (100% - var(--rds-hero-max)) / 2)
    + var(--rds-hero-gutter)
    + var(--rds-hero-contenu)
  );
  background:
    /* 1. Horizontal — assombrit la colonne de texte, à droite */
    linear-gradient(
      to left,
      rgba(42, 31, 26, 0.66)  0,
      rgba(42, 31, 26, 0.62)  var(--rds-veil-plein),
      rgba(42, 31, 26, 0.20)  calc(var(--rds-veil-plein) + 170px),
      rgba(42, 31, 26, 0)     calc(var(--rds-veil-plein) + 330px)
    ),
    /* 2. Vertical — vignettage haut + bas */
    linear-gradient(
      180deg,
      rgba(31, 22, 18, 0.42)  0%,
      rgba(31, 22, 18, 0.05)  22%,
      rgba(31, 22, 18, 0.05)  65%,
      rgba(31, 22, 18, 0.55)  100%
    );
}

/* Bloc éditorial — décalé à droite dans la zone calme du bouquet */
.hero__center {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: right;
  min-height: 100vh;
  padding: 7rem var(--rds-hero-gutter) 9rem;
  max-width: var(--rds-hero-max);
  margin: 0 auto;
  width: 100%;
}
.hero__inner {
  max-width: 560px;
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}
/* Ombre de texte du hero — deux couches, chacune avec un rôle distinct :
   une ombre SERRÉE (2px) qui produit la séparation de bord sur les jambages
   fins, et l'ombre LARGE des heros internes (0 2px 20px rgba(20,14,11,0.4))
   qui pose le texte sur la photo. L'ombre unique et très floue d'avant
   (0 1px 20px) ne faisait ni l'un ni l'autre : mesurée, elle apportait au
   mieux +0,03 de contraste. Ne pas la rétablir seule. */
.hero__inner,
.hero__inner h1,
.hero__inner p,
.hero__inner .hero__eyebrow,
.hero__inner .hero__signature {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(20, 14, 11, 0.55),
    0 2px 20px rgba(20, 14, 11, 0.40);
}
/* ⚠️ Le fond de cette pastille était `#FFFFFF4D` — 30 % de BLANC sous du texte
   blanc : il éclaircissait le fond au lieu de le poser, ce qui faisait de ce
   bandeau l'élément le moins lisible de tout le hero (1,29:1 à 1024px).
   Recette reprise de `.v1__edito-tag` (atelier.css) : voile blanc très faible,
   bordure fine et flou d'arrière-plan. Les deux traits ::before/::after
   restent le design propre de l'accueil — ne pas les remplacer par la pastille
   or des heros internes. */
.hero__tag {
  font-size: 0.68rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.8rem;
  display: inline-flex; align-items: center; gap: 1rem;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(20, 14, 11, 0.55),
    0 2px 12px rgba(20, 14, 11, 0.40);
  background: #FFFFFF14;
  border: 1px solid #FFFFFF66;
  backdrop-filter: blur(4px);
  padding: 5px 14px;
  border-radius: 999px;
}
.hero__tag::before,
.hero__tag::after {
  content: ''; display: inline-block; width: 36px; height: 1px;
  background: rgba(255,255,255,0.7);
}
/* Logo + séparateur — bloc centré par rapport au logo */
.hero__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}
.hero__brand .hero__title { margin-bottom: 0.7rem; }
.hero__brand .hero__sep   { margin-bottom: 1.6rem; }

.hero__title {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(20, 14, 11, 0.55),
    0 2px 24px rgba(20, 14, 11, 0.45);
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
/* Le titre « La Rose des Sables » ET le sous-titre « artisan fleuriste » sont
   tous deux tracés dans ce SVG : leur seul traitement possible est le filtre.
   Deux drop-shadow au lieu d'une — la serrée détache les jambages fins du
   sous-titre, qui sont les plus petits glyphes du hero et les premiers à se
   perdre dans la photo ; la large reprend le rôle de l'ancienne. Elles
   viennent APRÈS brightness/invert dans la chaîne, sans quoi elles seraient
   elles-mêmes inversées en blanc. */
.hero__title-logo {
  display: block;
  width: auto;
  height: clamp(2.9rem, 6vw, 5.5rem);
  max-width: 100%;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 1px 2px rgba(20, 14, 11, 0.55))
    drop-shadow(0 2px 22px rgba(20, 14, 11, 0.45));
  user-select: none;
}
.hero__title-script {
  font-family: var(--rds-font-title);
  font-weight: 400;
  font-size: 1em;
  letter-spacing: 0;
  margin-right: 0.08em;
  display: inline-block;
  vertical-align: 0.08em;
  line-height: 1;
}
.hero__title em {
  font-family: var(--rds-font-title);
  font-size: 0.55em;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  vertical-align: 0.35em;
  margin: 0 0.1em;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
}
.hero__sep {
  display: flex; align-items: center; gap: 1rem;
  color: var(--rds-or);
  margin-bottom: 1.8rem;
}
/* Or porté à la densité des heros internes (#C9A458CC, cf. .v1__edito-sep-line) :
   un filet de 1px à 65 % d'opacité disparaissait sur la photo. */
.hero__sep-line { width: 38px; height: 1px; background: #C9A458CC; }
.hero__sep svg { width: 18px; height: 14px; }

.hero__sub {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  color: #fff;
  margin-bottom: 2.6rem;
  max-width: 460px;
  line-height: 1.55;
  text-shadow:
    0 1px 2px rgba(20, 14, 11, 0.55),
    0 2px 20px rgba(20, 14, 11, 0.40);
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__btn-primary {
  background: var(--rds-cta);
  color: var(--rds-cta-texte);
  font-family: var(--rds-font-body);
  font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border-radius: 4px;
  border: 1.5px solid var(--rds-cta);
  /* Fond prune plein : mesuré à 8,7:1 sur toutes les largeurs, il n'a besoin
     d'aucune ombre. Celle-ci n'est neutralisée que parce que `text-shadow`
     s'hérite et que .hero__inner en pose une pour la photo — sur un aplat,
     elle ne ferait que salir les lettres. */
  text-shadow: none;
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.hero__btn-primary:hover { filter: brightness(0.9); transform: translateY(-2px); }
/* CTA secondaire — son fond était un voile BLANC à 8 % : sur les zones claires
   de la photo il éclaircissait le fond de son propre libellé blanc (mesuré
   1,78:1 à 2560px). Le voile passe à l'encre du thème, la bordure se densifie.
   ❌ Ne pas en faire un second bouton plein : la hiérarchie du projet n'admet
   qu'une seule action principale par contexte. */
/* ⚠️ Contrairement à .hero__btn-primary, ce bouton n'annule PAS la text-shadow
   héritée de .hero__inner : son libellé blanc n'est posé que sur un voile à
   30 %, à travers lequel la photo reste visible — l'ombre y sert encore. */
.hero__btn-ghost {
  background: rgba(42, 31, 26, 0.30);
  color: #fff;
  font-family: var(--rds-font-body);
  font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border-radius: 4px;
  border: 1.5px solid #FFFFFFCC;
  backdrop-filter: blur(8px);
  transition: background var(--rds-transition), border-color var(--rds-transition), transform var(--rds-transition);
}
.hero__btn-ghost:hover { background: rgba(42, 31, 26, 0.46); border-color: #fff; transform: translateY(-2px); }

/* Signature Saliha — bas gauche */
.hero__signature {
  position: absolute;
  bottom: 2.4rem; left: 3.5rem;
  z-index: 5;
  display: flex; align-items: center; gap: 0.8rem;
  color: rgba(255,255,255,0.75);
}
.hero__signature-line { width: 28px; height: 1px; background: rgba(255,255,255,0.45); }
.hero__signature-text { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; }
.hero__signature-name {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.95);
}

/* Wrapper multi-étiquettes hero — absolu en bas-droite du hero */
.hero__events {
  position: absolute;
  bottom: 2.2rem; right: 3.5rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 360px;
}
.hero__events-title {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}

/* Carte événement — verre dépoli (chaque étiquette) */
.hero__event {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 0.95rem 1.2rem;
  border-radius: 4px;
  transition: background var(--rds-transition), transform var(--rds-transition);
}
/* Le flou de verre dépoli vit sur un ::before dédié, pas sur .hero__event
   lui-même : un backdrop-filter posé directement sur un conteneur dont les
   enfants (dont .hero__event-pill, texte "À VENIR") ont un fond opaque fait
   "fuir" ce flou sur leurs propres pixels lors du compositing — mesuré à
   l'écran (netteté 4x DPI correcte, mais texte visiblement flou à 1x DPI) :
   la pastille en devenait illisible/floue alors que le reste de la carte
   restait net. Séparer le calque flouté (::before, sans contenu) du calque
   de contenu (enfants réels, z-index supérieur) supprime la fuite sans
   toucher au rendu "verre dépoli" recherché. */
.hero__event::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: inherit;
  z-index: 0;
  /* Défensif (reprise corrective post-audit) : ce calque n'a pas de contenu
     et .hero__event > * repasse déjà au-dessus (z-index: 1) — un clic sur
     la carte l'atteint donc dans tous les cas connus, mais un ::before en
     position:absolute plein cadre reste, par construction, le premier
     candidat pour intercepter un événement de pointeur si l'empilement
     changeait un jour. Retire toute ambiguïté sans changer le rendu. */
  pointer-events: none;
}
.hero__event > * { position: relative; z-index: 1; }
.hero__event:hover { background: rgba(255,255,255,0.20); transform: translateY(-2px); }
/* FINAL-CTA-001 : aucun style de focus clavier n'existait sur ces liens —
   même traitement que .hero__btn-primary:focus-visible (style.css), déjà
   validé sur ce même fond de hero photo. */
.hero__event:focus-visible { outline: 2px solid var(--rds-encre); outline-offset: 3px; }
.hero__event-pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rds-encre);
  background: var(--rds-or);
  border: 1px solid var(--rds-or);
  padding: 6px 11px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px #C9A45880, 0 0 0 3px #C9A4582E;
  animation: pillPulse 2.4s ease-in-out infinite;
}
/* Pastille sur fond PRUNE : le texte doit passer au blanc. La règle de base
   ci-dessus pose l'encre, correcte sur l'or (7,3:1) mais pas ici — l'encre sur
   le prune ne donne que 1,84:1. C'est le même piège que celui documenté sur
   --rds-cta-texte : la couleur du texte ne suit pas automatiquement le fond. */
.hero__event--atelier .hero__event-pill {
  background: var(--rds-vieux-rose);
  border-color: var(--rds-vieux-rose);
  color: var(--rds-cta-texte);
  box-shadow: 0 2px 10px #73375780, 0 0 0 3px #7337572e;
  animation: none;
}
.hero__event--ceramique .hero__event-pill {
  background: var(--rds-vert-sauge);
  border-color: var(--rds-vert-sauge);
  color: var(--rds-cta-texte);
  box-shadow: 0 2px 10px #37734A80, 0 0 0 3px #37734A2E;
  animation: none;
}
.hero__event--evenement .hero__event-pill {
  background: var(--rds-or);
  border-color: var(--rds-or);
}
@keyframes pillPulse {
  0%, 100% { box-shadow: 0 2px 10px #C9A45880, 0 0 0 3px #C9A4582E; }
  50% { box-shadow: 0 2px 14px #C9A458B3, 0 0 0 6px #C9A4581A; }
}
.hero__event-body { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__event-title {
  font-family: var(--rds-font-title);
  font-style: normal; font-weight: 500;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
.hero__event-name {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.25;
}
.hero__event-meta {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
}
/* Libellé métier du CTA (Réserver / Appeler pour réserver / Voir l'atelier…)
   — NEW-CTA-001 : rendu explicitement en texte, la flèche à côté
   (.hero__event-arrow) reste un simple appui visuel décoratif. */
.hero__event-cta {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rds-or);
  margin-top: 0.25rem;
}
.hero__event-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: 0.3rem;
  transition: background var(--rds-transition);
}
.hero__event:hover .hero__event-arrow { background: var(--rds-or); }
.hero__event-arrow svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Indicateur de scroll */
.hero__scroll {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.55));
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(0.7); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* ════════════════════════════════════════
   PHILOSOPHIE
   ════════════════════════════════════════ */
.philo {
  background: var(--rds-fond-alt);
  padding: var(--rds-space-generous) 0;
  border-top: 1px solid #2A1F1A0F;
}
.philo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.philo__title { font-size: clamp(2rem, 3.5vw, 2.6rem); margin-top: 1rem; margin-bottom: 1.5rem; }
.philo__rule { width: 36px; height: 1px; background: var(--rds-vert); margin-bottom: 1.5rem; }
.philo__text { font-size: 0.95rem; color: var(--rds-encre); opacity: 0.85; line-height: 1.85; margin-bottom: 2.5rem; max-width: 460px; }
.philo__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; max-width: 460px;
  border-top: 1px solid #2A1F1A1A;
  padding-top: 1.8rem;
}
.philo__stat-num { font-family: var(--rds-font-title); font-style: normal; font-size: 2rem; color: var(--rds-vert); line-height: 1; margin-bottom: 0.4rem; }
.philo__stat-label { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-taupe); }
.philo__image-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.philo__image-wrap .gold-frame {
  width: 100%;
  max-width: 510px;  /* aligné sur la largeur des carrousels "Notre Histoire" */
}
.philo__image-wrap .gold-frame > .gf-inner {
  aspect-ratio: 4 / 5;   /* même ratio portrait que les carrousels */
  display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════
   CRÉATIONS
   ════════════════════════════════════════ */
/* Padding haut passé de --rds-space-base à --rds-space-generous : la section
   suit désormais directement le Hero (lot accueil-reorganisation-sections),
   reprenant le traitement jusqu'ici réservé à la section qui suivait le Hero. */
.creations { background: #FFF8F2; padding: var(--rds-space-generous) 0 var(--rds-space-generous); text-align: center; }
.creations__sep { margin: 0 auto 1.6rem; }
.creations__title { font-size: clamp(2rem, 3.5vw, 2.6rem); margin-top: 1rem; margin-bottom: 3.5rem; }
.creations__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-bottom: 3rem; }
.create-card {
  /* Était #FAF1EC en dur — même écart d'un point de bleu que l'ancien :root
     local de cette feuille (voir en-tête). Ramené sur le token commun. */
  background: var(--rds-fond);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 6px 22px #2A1F1A0D;
  text-align: left;
  transition: transform var(--rds-transition), box-shadow var(--rds-transition);
  border: 1px solid #C9A45824;
}
.create-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px #2A1F1A1A; }
.create-card__img { aspect-ratio: 4 / 3; }
.create-card__body { padding: 1.6rem 1.8rem 1.8rem; }
.create-card__title { font-family: var(--rds-font-title); font-style: normal; font-size: 1.45rem; font-weight: 500; color: var(--rds-encre); margin-bottom: 0.6rem; line-height: 1.18; }
.create-card__desc { font-size: 0.88rem; color: var(--rds-taupe); line-height: 1.7; margin-bottom: 1.3rem; }
.create-card__link { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-vert); transition: gap var(--rds-transition); }
.create-card__link:hover { gap: 0.7rem; }
.create-card__link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ════════════════════════════════════════
   AVIS GOOGLE
   ════════════════════════════════════════ */
.reviews {
  background: var(--rds-blanc);
  padding: var(--rds-space-compact) 0;
  text-align: center;
}
.reviews__title { font-size: clamp(1.8rem, 3vw, 2.35rem); margin: 1rem 0 1.4rem; }

.reviews__score {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  justify-content: center; margin: 0 auto 2.6rem;
}
.reviews__score-num {
  font-family: var(--rds-font-title); font-size: 1.9rem;
  color: var(--rds-encre); line-height: 1;
}
.reviews__score-count {
  font-family: var(--rds-font-body); font-size: 0.8rem;
  color: var(--rds-taupe); letter-spacing: 0.04em;
}

.review__stars { display: inline-flex; gap: 2px; }
.review__star { width: 17px; height: 17px; fill: #D9CFC6; flex-shrink: 0; }
.review__star--on { fill: var(--rds-or); }
/* La note globale (.reviews__score) est la seule étoile posée directement sur
   le fond de section (blanc depuis le 2026-08-02), pas sur une carte crème :
   l'or n'y tient que 2,35:1 (calculé), sous le seuil 3:1 des objets
   graphiques significatifs (WCAG 1.4.11) — même sur blanc, la luminosité de
   l'or reste trop proche de celle du fond. Le prune y tient 8,7:1 — remplace
   l'or dans ce contexte uniquement ; les étoiles des cartes avis, sur
   --rds-surface, gardent l'or. */
.reviews__score .review__star--on { fill: var(--rds-accent); }

/* Banderole d'avis défilante — même mécanique que la banderole partenaires
   (voir plus bas) : viewport qui masque le débordement et estompe les bords,
   piste dupliquée en deux groupes identiques, animation translateX 0 → -50%
   (l'image d'arrivée est identique au départ → boucle sans saut). Défilement
   en CSS pur ; sans mouvement, elle devient une rangée statique et lisible. */
.reviews__viewport {
  position: relative;
  overflow: hidden;
  max-width: 1040px;
  margin: 0 auto 2.4rem;
  /* Fondu horizontal uniquement : jamais vertical, pour ne pas rogner les cartes. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.reviews__track {
  display: flex;
  width: max-content;
  animation: rds-reviews-scroll 55s linear infinite;
}
.reviews__group {
  display: flex;
  align-items: stretch;     /* cartes d'un même groupe à hauteur égale */
  gap: 1.6rem;
  margin: 0;
  padding: 0 0.8rem;
  list-style: none;
}
/* Pause au survol ET au focus clavier — identique à la banderole partenaires. */
.reviews__viewport:hover .reviews__track,
.reviews__viewport:focus-within .reviews__track {
  animation-play-state: paused;
}
.review {
  flex: 0 0 340px;
  background: var(--rds-surface, #F4E5DE);
  border: 1px solid #C9A45840;
  border-radius: 6px;
  padding: 1.8rem 1.7rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  text-align: left;
}
.review__text {
  margin: 0; border: 0; padding: 0;
  font-family: var(--rds-font-body); font-size: 0.92rem; font-weight: 300;
  color: var(--rds-encre); line-height: 1.75;
}
.review__author {
  margin: 0; font-family: var(--rds-font-body); font-size: 0.8rem;
  color: var(--rds-taupe); letter-spacing: 0.04em;
}
.review__date { display: block; font-size: 0.72rem; opacity: 0.85; margin-top: 0.2rem; }

/* Emplacements vides — jamais présentés comme de vrais témoignages. */
.reviews__empty-note {
  max-width: 620px; margin: 0 auto 2rem;
  font-family: var(--rds-font-body); font-size: 0.85rem;
  color: var(--rds-taupe); font-style: normal;
}
.review--empty {
  align-items: center; justify-content: center; text-align: center;
  min-height: 150px;
  background: #FFFFFF3D;
  border: 1px dashed #C9A45873;
}
.review__placeholder {
  margin: 0; font-family: var(--rds-font-body);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rds-taupe);
}
.review__placeholder-hint {
  margin: 0; font-family: var(--rds-font-body); font-size: 0.7rem;
  color: var(--rds-taupe); opacity: 0.8;
}

.reviews__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 0; }

/* 1 ou 2 avis seulement : un groupe ne remplirait pas le viewport → pas de
   défilement (sinon un vide apparaîtrait à chaque tour). Rangée statique
   centrée, la copie dupliquée est masquée. */
.reviews__viewport--static { -webkit-mask-image: none; mask-image: none; }
.reviews__viewport--static .reviews__track { animation: none; width: 100%; justify-content: center; }
.reviews__viewport--static .reviews__group { flex-wrap: wrap; justify-content: center; }
.reviews__viewport--static .reviews__group[aria-hidden="true"] { display: none; }

@keyframes rds-reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mouvement réduit : plus aucun défilement. La banderole devient une grille
   statique, centrée et lisible ; la copie dupliquée est retirée. */
@media (prefers-reduced-motion: reduce) {
  .reviews__viewport { -webkit-mask-image: none; mask-image: none; }
  .reviews__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .reviews__group { flex-wrap: wrap; justify-content: center; }
  .reviews__group[aria-hidden="true"] { display: none; }
}

@media (max-width: 768px) {
  .reviews__group { gap: 1.1rem; padding: 0 0.6rem; }
  .review { flex-basis: min(84vw, 320px); padding: 1.5rem 1.3rem; }
  .reviews__track { animation-duration: 40s; }
}

/* ════════════════════════════════════════
   PARTENAIRES — banderole de logos défilants
   Défilement en CSS pur (aucun JavaScript) : sans JS, la banderole reste
   simplement statique et lisible, tous les logos étant dans le flux.
   ════════════════════════════════════════ */
.partners {
  background: var(--rds-rose-embleme);
  padding: var(--rds-space-compact) 0;
  text-align: center;
  border-top: 1px solid #C9A45824;
}
.partners__title { font-size: clamp(1.7rem, 2.8vw, 2.15rem); margin: 1rem 0 2.5rem; }

/* Le viewport masque le débordement et estompe les deux bords, pour que les
   logos entrent et sortent en fondu plutôt qu'en étant coupés net. */
.partners__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partners__track {
  display: flex;
  width: max-content;
  /* 0 → -50% : la piste contient exactement deux fois la même liste, donc
     l'image d'arrivée est identique à celle de départ — aucun saut visible.

     ⚠️ La durée vient de `--rds-partners-duration`, posée en style inline sur
     `.partners__viewport` par front-page.php et proportionnelle au NOMBRE de
     partenaires : la banderole n'ayant plus de maximum, une durée fixe ferait
     accélérer le défilement à chaque logo ajouté. Le 46s ci-dessous n'est plus
     qu'un repli — il correspond aux six partenaires d'origine. */
  animation: rds-partners-scroll var(--rds-partners-duration, 46s) linear infinite;
}
.partners__group {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  margin: 0;
  padding: 0 1.75rem;
  list-style: none;
}
.partners__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 76px;
}
/* Les logos gardent leurs proportions : max-height ET max-width bornent la
   boîte (76×170px, object-fit: contain), chaque logo étant limité par l'une
   ou l'autre selon son ratio propre — pas uniquement par la hauteur (les 4
   logos rectangulaires existants n'ont pas tous la même marge : certains
   sont déjà proches du plafond de largeur). max-height reprend la hauteur
   de .partners__item (76px) ; avant ce lot elle était plafonnée à 60px. Les
   deux logos carrés (Mercedes-Benz, Bertinchamp, 147×147) subissaient le
   même plafond de hauteur mais, ratio 1:1 oblige, s'en trouvaient bloqués à
   60×60 : une présence visuelle minuscule à côté de rectangles allant
   jusqu'à 170px de large pour la même hauteur. Remonter le plafond à 76px
   agrandit les deux carrés à 76×76 (+27 % linéaire) sans toucher au rendu
   des logos déjà larges (aucun des 4 ne dépasse 76px de haut une fois
   recalculé — vérifié par mesure, pas supposé) : aucune déformation, aucun
   recadrage, object-fit contain inchangé. */
.partners__logo {
  max-height: 76px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Volontairement discret, sans rendre le logo illisible : légère
     désaturation levée au survol. Aucun filtre de niveaux de gris total. */
  opacity: 0.78;
  transition: opacity var(--rds-transition), transform var(--rds-transition);
}
.partners__link { display: flex; align-items: center; justify-content: center; }
.partners__link:hover .partners__logo,
.partners__link:focus-visible .partners__logo { opacity: 1; transform: scale(1.04); }
.partners__link:focus-visible { outline: 2px solid var(--rds-encre); outline-offset: 4px; border-radius: 3px; }

/* Emplacement neutre tant que les vrais logos ne sont pas fournis. */
.partners__placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 150px; height: 62px;
  font-family: var(--rds-font-body);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rds-taupe);
  text-align: center; padding: 0 0.6rem;
  border: 1px dashed #C9A45873;
  border-radius: 4px;
  background: #FFFFFF4D;
}

@keyframes rds-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause au survol ET au focus clavier : un utilisateur qui tabule vers un logo
   ne doit pas le voir s'échapper. */
.partners__viewport:hover .partners__track,
.partners__viewport:focus-within .partners__track {
  animation-play-state: paused;
}

/* Mouvement réduit : plus aucun défilement. La banderole devient une grille
   statique, centrée et entièrement lisible — et la copie dupliquée est retirée
   pour ne pas afficher deux fois les mêmes logos. */
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .partners__group[aria-hidden="true"] { display: none; }
  .partners__group { flex-wrap: wrap; justify-content: center; gap: 2rem 2.5rem; }
  .partners__viewport { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 768px) {
  .partners__group { gap: 2.2rem; padding: 0 1.1rem; }
  .partners__item { min-width: 120px; height: 64px; }
  .partners__logo { max-height: 46px; max-width: 130px; }
  .partners__placeholder { width: 120px; height: 52px; font-size: 0.55rem; }
  /* ⚠️ Proportionnelle elle aussi — une durée en dur (32s auparavant)
     écraserait `--rds-partners-duration` et ferait réapparaître sur mobile
     l'accélération que la variable corrige en desktop. Le facteur 0,7 conserve
     le rapport d'origine (32/46), les logos étant ici plus petits donc la piste
     plus courte. */
  .partners__track { animation-duration: calc(var(--rds-partners-duration, 46s) * 0.7); }
}

/* ════════════════════════════════════════
   SOCIAL
   ════════════════════════════════════════ */
.social { background: #FFF8F2; padding: var(--rds-space-compact) 0 var(--rds-space-base); text-align: center; border-top: 1px solid #C9A45824; }
.social__title { font-size: clamp(1.9rem, 3.2vw, 2.45rem); margin: 1rem 0 1rem; }
.social__text {
  max-width: 620px;
  margin: 0 auto 2.5rem;
  color: var(--rds-taupe);
  font-size: 0.95rem;
  line-height: 1.8;
}
/* ── Aperçu Instagram ──
   Grille de tuiles carrées. Le nombre de photos est administrable (jusqu'à 8) :
   `auto-fit` évite donc toute règle en dur liée à un nombre fixe d'images. */
.social__feed {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 760px;
  display: grid;
  /* 3 colonnes : la sélection compte 6 photos par défaut, soit 2 lignes pleines
     sans tuile orpheline. `auto-fit` conserve un rendu correct si la cliente
     en met moins (ou jusqu'à 8). */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
}
@media (max-width: 700px) {
  .social__feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
}
.social__feed-item { margin: 0; }
.social__feed-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  /* Fond des emplacements Instagram tant qu'aucune image n'est chargée. Il
     était en rose signature : six carrés pleins qui pesaient autant que les
     sections colorées. Un état vide prend la surface neutre. */
  background: var(--rds-surface);
  transition: transform var(--rds-transition), box-shadow var(--rds-transition);
}
.social__feed-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.social__feed-link:hover { box-shadow: 0 8px 26px #2A1F1A1F; }
.social__feed-link:hover .social__feed-img { transform: scale(1.05); }
.social__feed-link:focus-visible { outline: 2px solid var(--rds-encre); outline-offset: 3px; }
/* Flux réel du plugin : il apporte SES PROPRES retraits sous la dernière rangée
   de vignettes — 12px de `#sbi_images` + 10px de `#sb_instagram` (mesurés sur
   larosedessable.be) — que la sélection administrée (`--curated`) n'a pas. Sans
   compensation, l'écart vignettes → suite atteignait 54px contre 32px en
   secours. La marge du thème est donc réduite ici seulement : 22 + 16 = 38px.
   ⚠️ Depuis le retrait du bouton « Suivre @flowers_by_saliha » (1.21.11), cette
   suite est directement `.social__icons` : ces 38px sont désormais l'écart
   grille → réseaux, et c'est la seule respiration qui les sépare. Ne pas les
   augmenter sans mesurer — le bouton retiré en ajoutait 84 à lui seul.
   Spécificité 0-2-0 volontaire (`.social__feed` porte déjà 0-1-0 avec le
   raccourci `margin`) ; `margin-bottom` seul, pour ne pas perdre le `auto`
   horizontal qui centre la grille de 760px. */
/* Ce flux est un enfant UNIQUE — `#sb_instagram`, qui porte lui-même la grille
   de ses vignettes (2 colonnes sous 480px, 3 au-delà : media queries de
   `sbi-styles.css` sur la largeur de FENÊTRE, et `getColumnCount()` du plugin
   ne lit que `window.innerWidth`, jamais la largeur de son conteneur). Une
   grille multi-colonnes n'a donc rien à ranger ici : elle range ce seul enfant
   dans la première piste et laisse l'autre moitié vide. Au-dessus de 700px cela
   ne se voyait pas — `auto-fit` effondre les pistes vides et la piste occupée
   reprend toute la largeur — mais la règle mobile ci-dessus est un
   `repeat(2, …)` EXPLICITE, que rien n'effondre : le flux ne prenait que la
   moitié gauche (mesuré sur larosedessable.be : 165px dans un conteneur de
   342px à 390px de large, 130px sur 272px à 320px). Déclaré hors media query
   parce que c'est l'enfant unique qui commande, pas le breakpoint — le rendu
   ≥ 701px est inchangé au pixel (760px, vignettes 246,7px). Sans effet sur
   `--curated`, dont les `<li>` ont besoin, eux, de plusieurs colonnes. */
.social__feed.social__feed--live { grid-template-columns: 1fr; margin-bottom: 1rem; }

/* Le zoom au survol est une décoration : on le neutralise si l'utilisateur
   a demandé à réduire les animations. */
@media (prefers-reduced-motion: reduce) {
  .social__feed-img,
  .social__feed-link { transition: none; }
  .social__feed-link:hover .social__feed-img { transform: none; }
}

.social__icons { display: flex; justify-content: center; gap: 2rem; }
.social__icon { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
/* Vert végétal, comme avant le lot 1.21.11 : le passage au prune (1.21.11) a
   été refusé par la cliente le 2026-08-24, et annulé ici en 1.21.12. Seule la
   TEINTE revient — le retrait du CTA « Suivre @flowers_by_saliha » et les
   espacements calibrés en 1.21.10/1.21.11 restent acquis.
   ⚠️ Ne pas rebasculer au prune au nom du contraste. Le prune mesurait bel et
   bien mieux — glyphe au repos 8,27:1 contre 5,38:1 ici, glyphe blanc sur le
   remplissage du survol 8,70:1 contre 5,65:1 — et ce gain est réel : il a été
   mesuré, montré, puis écarté. C'est un choix esthétique de la cliente, assumé
   en connaissance de cause — et les deux valeurs vertes passent le seuil AA de
   4,5:1 sur le #FFF8F2 du cercle (fond opaque déclaré ici même : pas de fond
   composé, le calcul nominal suffit, cf. CLAUDE.md § méthode de mesure du
   contraste).
   L'alpha du contour n'a jamais bougé (0x40, 25 %) : la géométrie, les tailles
   et les transitions sont celles d'avant 1.21.11, au pixel.
   ⚠️ Ce cercle n'est PAS celui de la page Contact, qui porte son propre rendu
   vert dans contact.css (fond #37734A1A, contour #37734A66) : les deux surfaces
   sont volontairement distinctes, ne pas aligner l'une sur l'autre. */
.social__icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: #FFF8F2;
  border: 1px solid #37734A40;
  display: flex; align-items: center; justify-content: center;
  color: var(--rds-vert);
  transition: background var(--rds-transition), color var(--rds-transition), border-color var(--rds-transition), transform var(--rds-transition);
}
/* ⚠️ Sur le vert plein, le glyphe est BLANC — jamais l'encre. Le token
   `--rds-cta-texte` porte cette règle (il vaut `--rds-blanc`) : ne pas y
   réécrire `#fff` en dur, sans quoi elle redevient invisible dans le code.
   C'est le seul écart au verbatim d'avant 1.21.11, et il est sans effet sur le
   rendu — blanc sur vert : 5,65:1, au-dessus de 4,5:1, et un glyphe relève de
   toute façon du seuil 3:1 des objets graphiques. */
.social__icon:hover .social__icon-circle {
  background: var(--rds-vert); color: var(--rds-cta-texte);
  border-color: var(--rds-vert);
  transform: translateY(-2px);
}
.social__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.social__icon svg .fill-soft { fill: currentColor; fill-opacity: 0.22; stroke: currentColor; }
.social__icon svg .fill-solid { fill: currentColor; stroke: none; }
.social__icon:hover svg .fill-soft { fill-opacity: 0.35; }
.social__icon-label { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-taupe); }

/* ════════════════════════════════════════
   SERVICES
   ════════════════════════════════════════ */
.services { background: var(--rds-vert-deep); padding: var(--rds-space-base) 0 var(--rds-space-compact); color: #fff; text-align: center; position: relative; overflow: hidden; }
.services::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: var(--rds-vert); opacity: 0.25; filter: blur(80px); pointer-events: none; }
.services__sub { color: rgba(255,255,255,0.7); }
.services__title { color: #fff; font-size: clamp(2rem, 3.5vw, 2.6rem); margin: 1rem 0 3rem; }
.services__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 3rem; }
.svc-card { background: rgba(255,248,242,0.08); border: 1px solid rgba(255,248,242,0.16); border-radius: 4px; padding: 2.2rem 1.2rem; text-align: center; transition: background var(--rds-transition), transform var(--rds-transition); }
.svc-card:hover { background: rgba(255,248,242,0.14); transform: translateY(-3px); }
.svc-card__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: #C9A4581F;
  border: 1px solid #C9A45866;
  display: flex; align-items: center; justify-content: center;
  color: var(--rds-or);
  transition: background var(--rds-transition), border-color var(--rds-transition);
}
.svc-card:hover .svc-card__icon {
  background: #C9A45838;
  border-color: #C9A458B3;
}
.svc-card__icon svg { width: 30px; height: 30px; fill: currentColor; }
.svc-card__title { font-family: var(--rds-font-title); font-style: normal; font-size: 1.14rem; font-weight: 500; color: #fff; margin-bottom: 0.55rem; line-height: 1.18; }
/* Blanc à 75 % : 4,38:1 sur le fond réellement composé. Le fond n'est pas le
   vert profond plein — c'est le vert profond ÉCLAIRCI par le halo
   .services::before (var(--rds-vert) à 25 %, flouté) puis par la carte
   translucide (#FFF8F2 à 8 %, 14 % au survol), soit rgb(61,105,75) sur la
   carte la plus proche du halo. Un calcul mené sur le vert plein conclurait à
   tort au succès. Remonté à 90 % : 4,88:1 au repos comme au survol. */
.svc-card__desc { font-size: 0.78rem; color: rgba(255,255,255,0.9); line-height: 1.55; }
a.svc-card { display: block; text-decoration: none; }

/* ════════════════════════════════════════
   ATELIER — VISITES
   ════════════════════════════════════════ */
.atelier { background: #F7ECE4; padding: var(--rds-space-compact) 0; }
.atelier__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.atelier__title { font-size: clamp(2rem, 3.5vw, 2.6rem); margin: 1rem 0 1.2rem; }
.atelier__rule { width: 36px; height: 1px; background: var(--rds-vert); margin-bottom: 1.5rem; }
.atelier__text { font-size: 0.92rem; color: var(--rds-encre); opacity: 0.8; line-height: 1.85; margin-bottom: 2rem; max-width: 440px; }
.addr-list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2rem; }
.addr { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem 1.1rem 1.4rem; background: #FFF8F2; border-radius: 8px; border: 1px solid #C9A45824; border-left: 3px solid var(--rds-accent); transition: transform var(--rds-transition), box-shadow var(--rds-transition); text-decoration: none; color: inherit; cursor: pointer; }
.addr:hover { transform: translateX(2px); box-shadow: 0 4px 16px #73375724; }
.addr__nav { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #37734A1F; color: var(--rds-vert); flex-shrink: 0; transition: background var(--rds-transition), color var(--rds-transition); }
.addr__nav svg { width: 13px; height: 13px; }
.addr:hover .addr__nav { background: var(--rds-accent); color: #fff; }
.addr__icon { width: 34px; height: 34px; border-radius: 50%; background: #37734A1F; color: var(--rds-vert); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.addr__icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.addr__city { font-size: 0.65rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-vert); margin-bottom: 0.15rem; }
.addr__street { font-size: 0.88rem; color: var(--rds-encre); }
.addr__hours { font-size: 0.82rem; color: var(--rds-taupe); line-height: 1.6; margin-top: 0.35rem; }
.atelier__map { display: flex; flex-direction: column; gap: 1.2rem; }
.atelier__map-frame { min-height: 380px; display: flex; }
.atelier__map-frame .gold-frame { width: 100%; display: flex; }
.atelier__map-frame .gold-frame > .gf-inner { flex: 1; min-height: 360px; }
.atelier__carousel { position: relative; overflow: hidden; background: var(--rds-blanc-casse); }
.atelier__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.atelier__slide.is-active { opacity: 1; }
.atelier__map-cta { text-align: center; margin-top: 2.5rem; }
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 1.2rem 1.4rem; background: #FFF8F2; border-radius: 8px; border: 1px solid #C9A45824; }
.hours__label { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-vert); margin-bottom: 0.35rem; }
/* Horaires en Lato : information pratique, pas un titre (demande cliente). */
.hours__time { font-family: var(--rds-font-body); font-weight: 400; font-size: 0.95rem; color: var(--rds-encre); }

/* ════════════════════════════════════════
   FOOTER (3 colonnes — adapté d'accueil-v2)
   ════════════════════════════════════════ */
.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);
}
.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;
}
.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); }
.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;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* ─── Desktop intermédiaire (901 → 1660px) — les rendez-vous passent SOUS le
   bloc éditorial, dans le flux ───────────────────────────────────────────
   Défaut corrigé (2026-08-14) : .hero__inner est calé à droite d'un conteneur
   centré (--rds-hero-max / --rds-hero-gutter) alors que .hero__events est
   ancré au bord droit du viewport (`right: 3.5rem`). Les deux colonnes se
   rapprochent donc à mesure que l'écran rétrécit, et le bloc — ancré en bas
   alors que l'éditorial est centré verticalement — remonte dans la zone des
   CTA. Mesuré : l'écart entre le bord droit des boutons et le bord gauche du
   bloc vaut +168px à 1920, +58 à 1700, +38 à 1660, +8 à 1600, puis DEVIENT
   NÉGATIF (−52px de 1200 à 1560, −28 sous 1100, à cause du `right: 2rem`
   ci-dessous) : le chevauchement était réel de 960 à 1560px, et l'espace
   déjà insuffisant entre 1560 et 1660. D'où la borne haute à 1660px — la
   première largeur mesurée qui retrouve les ~40px d'écart utilisés partout
   ailleurs comme respiration inter-blocs, et non une valeur choisie au
   jugé.

   Il n'existe aucune disposition côte à côte viable dans cette plage : la
   zone calme de la photo (à droite du bouquet) fait ~550-650px, soit à peine
   la largeur du bloc éditorial seul — y loger en plus une colonne de cartes
   reviendrait à écrire par-dessus le bouquet. Le bloc rejoint donc le flux
   sous l'éditorial, en gardant exactement la même colonne de droite (même
   largeur, même bord droit, calculé depuis les variables du conteneur : pas
   d'offset magique à re-régler si la largeur du conteneur change).

   Conséquence assumée : sur un écran court (768px de haut), 432px
   d'éditorial + 407px de rendez-vous ne tiennent pas dans 100vh. `.hero`
   garde `min-height: 100vh` sans hauteur fixe — il grandit donc simplement
   (même mécanisme qu'à ≤900px), la première carte servant d'amorce. Réduire
   davantage impliquerait de masquer du contenu (cf. FINAL-CTA-001) ou de
   caler des valeurs sur une résolution précise.

   Breakpoint en largeur seule, volontairement : la hauteur aggrave le
   symptôme mais ne le crée pas, et les écrans de plus de 1660px de large
   sont en pratique assez hauts. Ne pas ajouter de condition `max-height`. */
@media (min-width: 901px) and (max-width: 1660px) {
  /* Le hero centre verticalement le groupe éditorial + rendez-vous ; il reste
     plein écran quand le contenu est plus court (et quand aucun rendez-vous
     n'est publié, cas le plus fréquent : .hero__events n'est alors pas rendu
     du tout et l'éditorial reste centré, comme aujourd'hui). */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* .hero__center ne monopolise plus 100vh : sans ça, le bloc qui le suit
     dans le flux tomberait sous la ligne de flottaison quelle que soit la
     hauteur d'écran. Le padding bas (9rem) ne sert plus à rien ici, l'espace
     sous l'éditorial étant désormais occupé par les rendez-vous. */
  .hero__center {
    min-height: 0;
    padding-top: 6rem;
    padding-bottom: 0;
  }
  .hero__events {
    position: static;
    width: 360px;
    max-width: none;
    /* Bord droit aligné au pixel sur celui de .hero__inner : marge droite =
       gouttière du conteneur, augmentée de la marge de centrage dès que le
       viewport dépasse --rds-hero-max. `margin-left: auto` colle la colonne
       à droite. */
    margin: 2rem max(var(--rds-hero-gutter), calc((100% - var(--rds-hero-max)) / 2 + var(--rds-hero-gutter))) 3rem auto;
    gap: 0.7rem;
  }
  /* Espacements internes resserrés — mêmes valeurs que la variante compacte
     déjà en place à ≤900px (typographie et couleurs inchangées). */
  .hero__event { padding: 0.8rem 1.1rem; gap: 0.85rem; }
}

/* Bas de plage seulement : le bloc et l'indicateur de défilement partagent
   désormais le bas du hero. Le bord gauche du bloc vaut `100vw − gouttière −
   360px` et l'indicateur est centré — ils se croisent sous ~953px (mesuré :
   28px de recouvrement à 901, 3px à 950, plus rien à 960). L'indicateur est
   déjà masqué à ≤900px ; on prolonge simplement jusqu'à 960px plutôt que
   d'ajouter 3rem de réserve sous les cartes à TOUTES les largeurs de la
   plage. */
@media (min-width: 901px) and (max-width: 960px) {
  .hero__scroll { display: none; }
}

/* Les deux règles `.nav__links` qui vivaient ici (gap 1,6rem, police 0,65rem)
   ont été retirées le 2026-09-20 : une feuille de page ne doit pas styler la
   navigation globale, et celles-ci ne servaient QUE l'accueil — les pages
   intérieures gardaient la typographie large, ce qui les faisait écraser le
   logo bien plus tôt. Sous 1280px la barre desktop est désormais masquée au
   profit du burger, ces valeurs resserrées n'ont donc plus d'objet. */
@media (max-width: 1100px) {
  .hero__signature { left: 2rem; bottom: 1.8rem; }
  /* Sans effet depuis 2026-08-14 : sous 1660px, .hero__events est en
     `position: static` (plage desktop intermédiaire ci-dessus) ou en flux
     centré (≤900px) — `right`/`bottom` n'y sont plus consommés. Conservé tel
     quel plutôt que supprimé : le jour où la plage intermédiaire évoluerait,
     ce repli redeviendrait la valeur d'ancrage attendue entre 901 et 1100px. */
  .hero__events { right: 2rem; bottom: 1.8rem; }
}
@media (max-width: 900px) {
  /* FINAL-CTA-001 (2026-07-27) : masquer entièrement .hero__events retirait
     le CTA de réservation (et son atelier) de l'écran ET de l'arbre
     d'accessibilité sous 900px. Adaptation compacte, pas une refonte : le
     bloc quitte son positionnement absolu (bas-droite du hero plein écran)
     pour rejoindre le flux normal, juste après .hero__center — .hero garde
     `min-height: 100vh` mais pas de hauteur fixe, la section grandit donc
     simplement pour l'accueillir (pas de contenu coupé ni de superposition).
     Contenu et CTA identiques, seule la mise en forme est resserrée. */
  .hero__events {
    position: static;
    right: auto; bottom: auto; /* neutralise le positionnement absolu hérité de @media (max-width: 1100px) */
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    max-width: 420px;
    margin: 2.5rem auto 0;
    padding: 0 0.5rem;
  }
  .hero__events-title { align-self: center; }
  .hero__event { padding: 0.8rem 1.1rem; gap: 0.85rem; }
  .hero__event-title { font-size: 0.92rem; white-space: normal; }
  .hero__event-name { font-size: 0.74rem; }
  .hero__event-meta { font-size: 0.68rem; }
  .hero__event-cta { font-size: 0.66rem; }
  .hero__event-arrow { width: 28px; height: 28px; }
  .hero__signature { left: 50%; transform: translateX(-50%); bottom: 5.5rem; }
  .hero__scroll { display: none; }
  .hero__center { align-items: center; text-align: center; padding: 6rem 1.5rem 4rem; }
  .hero__inner { max-width: 100%; text-align: center; margin: 0 auto; }
  /* Bloc logo : toujours sur sa propre ligne, jamais accolé à .hero__tag
     (inline-flex les laisserait partager la même ligne dès que leurs
     largeurs combinées tiennent dans .hero__inner — cas possible ici
     puisque .hero__inner passe à max-width:100%). */
  .hero__brand { display: flex; width: 100%; }
  /* Séparateur floral centré */
  .hero__sep { justify-content: center; }
  /* Bulle tagline : retour à la ligne autorisé, traits décoratifs masqués */
  .hero__tag { white-space: normal; justify-content: center; text-align: center; }
  .hero__tag::before, .hero__tag::after { display: none; }
  /* ⚠️ Sous 900px, l'axe qui commande s'inverse : le cadre est plus haut que
     large, l'échelle vient de la HAUTEUR et le débordement est horizontal —
     seul X agit, `center` en Y n'y change rien (mesuré à 390×844 : l'image
     rendue fait exactement 844 de haut). 35 % convenait à l'ancienne photo,
     dont les fleurs étaient à gauche ; sur celle du lot 1.33.0, il ne montrait
     que les miroirs et la paroi. 50 % ramène l'étal dans le cadre — vérifié en
     capture à 390 et 820 px. */
  .hero__photo-img { object-position: 50% center; }
  /* Voile mobile — recette des quatre heros internes (leur @media 960px), à la
     borne de CE hero : 900px, qui porte aussi le passage de .hero__center en
     centré, le masquage de .nav__links et la reprise de .hero__events dans le
     flux (FINAL-CTA-001). ⚠️ Ne pas réaligner cette borne sur 960px pour la
     seule symétrie avec les autres pages.
     Le texte n'est plus dans une colonne à droite mais centré sur toute la
     largeur : le dégradé horizontal n'a plus de sens ici, il est remplacé par
     un vertical doublé d'un voile uniforme, exactement comme ailleurs.
     ⚠️ Seule la couche uniforme s'écarte de la recette d'origine (0,26 au lieu
     de 0,32) : à 0,32 tout le texte était mesuré entre 4,7 et 6,6:1, soit bien
     au-delà du nécessaire, et cette marge se payait en vivacité sur la seule
     photo que le projet tient pour sa référence visuelle. Les trois paliers ont
     été mesurés à 768 et 390px — texte courant / titre :
       0,32 → 5,8-6,6 / 5,0-4,7   0,26 → 5,4-6,0 / 4,5-4,3   0,22 → 5,1-5,7 / 4,2-4,0
     0,26 est le dernier qui garde le texte courant au-dessus de 5:1 tout en
     rendant leur bleu aux hortensias. ⚠️ Ne pas descendre plus bas : le titre
     y passerait sous 4,2:1 — encore au-dessus du seuil qui lui est applicable
     (3:1, texte large), mais sans réserve pour une future photo plus claire. */
  .hero__veil {
    background:
      linear-gradient(180deg,
        rgba(42, 31, 26, 0.62)  0%,
        rgba(42, 31, 26, 0.40)  24%,
        rgba(42, 31, 26, 0.44)  62%,
        rgba(42, 31, 26, 0.74)  100%),
      rgba(42, 31, 26, 0.26);
  }
  .container { padding: 0 1.5rem; }
  .philo__grid, .atelier__grid { grid-template-columns: 1fr; gap: 3rem; }
  /* Centrage surtitres et titres sections Philosophie & Boutiques */
  .philo__grid > div:first-child,
  .atelier__grid > div:first-child { text-align: center; }
  .philo__rule, .atelier__rule { margin-left: auto; margin-right: auto; }
  .philo__text, .atelier__text { max-width: 100%; margin-left: auto; margin-right: auto; }
  /* Les cartes adresse restent alignées à gauche */
  .addr { text-align: left; }
  /* Taille de titre réduite pour tenir sur une ligne */
  .philo__title, .atelier__title { font-size: 1.65rem; }
  .creations__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .rds-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .rds-footer { padding: 3.5rem 1.5rem 1.5rem; }
}
/* ════════════════════════════════════════
   ATELIER — CADRAGE MOBILE DE LA PHOTO DES BOUTIQUES
   ════════════════════════════════════════ */
/* ⚠️ La cause n'est PAS `object-position`, c'est la HAUTEUR du cadre. Sous
   900px la grille passe à une colonne : la photo (paysage 3:2) conserve un
   cadre haut de 378px alors que sa largeur tombe à 310-340px. `object-fit:
   cover` la met alors à l'échelle par sa HAUTEUR, et 40 à 45 % de sa largeur
   sortent du cadre — dont l'enseigne « La Rose des Sables ». Aucune valeur
   d'`object-position` ne corrige cela : la fenêtre visible ne fait que 55 à
   60 % de la largeur quelle que soit sa valeur, celle-ci ne choisit QUE la
   portion conservée (mesuré). On rend donc au cadre un ratio paysage.

   ⚠️ `max-height: 378px` n'est pas un nombre magique : c'est 380px (le
   `min-height` de `.atelier__map-frame`) moins les 2×1px de bordure du
   `.gold-frame`. Au-dessus de 504px de large (378 ÷ 0,75), ce plafond redonne
   EXACTEMENT la hauteur actuelle : la règle est inerte de ~554px de viewport
   jusqu'à 600px, et la bascule se fait sans saut. ❌ Ne pas le remplacer par
   une hauteur en dur ni par un point de rupture plus haut : c'est lui qui
   garantit que rien ne bouge au-dessus du mobile.

   ⚠️ Portée volontairement limitée à `.atelier__map-frame` : `.gold-frame` et
   `.gf-inner` sont mutualisés (image de `.philo`, cadre doré des pages
   intérieures) — aucun autre média ne doit changer de cadrage. */
@media (max-width: 600px) {
  .atelier__map-frame { min-height: 0; }
  .atelier__map-frame .gold-frame > .gf-inner {
    min-height: 0;
    /* Sans `align-self`, l'étirement du flex peut imposer la hauteur et
       neutraliser `aspect-ratio` — sans effet mesuré sur Chromium, conservé
       comme garantie pour Firefox et Safari. */
    align-self: flex-start;
    aspect-ratio: 4 / 3;
    max-height: 378px;
  }
}

/* ════════════════════════════════════════
   ATELIER — UNE COLONNE ENTRE 901 ET 1099px
   ════════════════════════════════════════ */
/* ⚠️ Ici on corrige un DÉSÉQUILIBRE DE COLONNES, pas un cadrage. La grille
   `.atelier__grid` est en `align-items: start` : la colonne de gauche (titre,
   texte, trois cartes d'adresse) fixe seule la hauteur de la section, et la
   colonne de droite (photo + bouton) s'arrête là où son contenu s'arrête. Le
   blanc laissé sous le CTA est donc la différence des deux, et il ne cesse de
   croître quand la fenêtre rétrécit : la colonne de gauche s'allonge (les
   adresses passent à la ligne) pendant que la photo raccourcit. Mesuré, du
   bas du bouton au bas de la rangée :

     1440 / 1280   246px   ← composition validée par la cliente
     1200          274px
     1100          305px
     1024          352px
      960          422px
      901          465px   ← plus de la moitié de la colonne est vide

   ⚠️ Aucun réglage du CADRE ne pouvait corriger cela, et le lot `1.26.3` l'a
   même aggravé : rendre au cadre son rapport paysage (indispensable, sans quoi
   `object-fit: cover` amputait 37 % de la largeur de la photo) l'a raccourci
   de 378 à 248px à 901px, donc creusé le vide de 334 à 465px. Les deux
   objectifs — bon cadrage ET colonne équilibrée — sont inconciliables à deux
   colonnes sous ~1100px : à 1024px la zone de contenu ne fait que 928px, et il
   faudrait 567px de colonne (378 × 1,5) pour loger la photo entière à sa
   hauteur d'origine.

   ⚠️ ❌ Ne pas « rattraper » ce vide par un `min-height` sur la colonne de
   droite, ni en centrant verticalement `.atelier__map` : l'un et l'autre
   déplacent le blanc sans le supprimer.

   La grille passe donc à UNE colonne dès 1099px, et la photo redevient un
   bandeau pleine largeur au-dessus du CTA — exactement la mise en page qui
   sert déjà sous 900px. Conséquences mesurées :
     • plus aucun blanc sous le CTA de 901 à 1099px (le bouton est le dernier
       élément de la grille) ;
     • la photo montre 100 % de sa largeur (contre 63 à 81 % à deux colonnes
       avant `1.26.3`) ;
     • la transition 900 → 901px devient presque invisible : la hauteur de
       section passe de 1357 à 1364px, là où elle s'effondrait de 1357 à 982px.

   ⚠️ Le saut de hauteur existe toujours, il a seulement DÉMÉNAGÉ au nouveau
   point de rupture : 1371px à 1099px contre 890px à 1100px. C'est inhérent à
   tout changement de disposition — ne pas le rediagnostiquer.

   ⚠️ **1100px n'est pas un arrondi** : c'est la dernière largeur où les deux
   colonnes tiennent encore visuellement (462px chacune, photo 460 × 316) et où
   le vide reste proche de la valeur validée en desktop (305px contre 246px).
   Un point de rupture à 1024px laisserait la bande 1025-1099px dans son pire
   état ; à 1200px il sacrifierait 100px de largeur où la composition à deux
   colonnes fonctionne encore.

   ⚠️ Ce bloc reprend le traitement une-colonne du bloc `max-width: 900px`
   ci-dessus **moins** la réduction de `.atelier__title` à 1.65rem : à 1024px la
   colonne fait toute la largeur de la page, le titre garde donc sa taille
   fluide. ⚠️ Portée strictement limitée aux sélecteurs `.atelier*` : `.philo`
   partage la déclaration de grille sous 900px et ne doit PAS suivre ici. */
@media (min-width: 901px) and (max-width: 1099px) {
  .atelier__grid { grid-template-columns: 1fr; gap: 3rem; }
  .atelier__grid > div:first-child { text-align: center; }
  .atelier__rule { margin-left: auto; margin-right: auto; }
  .atelier__text { max-width: 100%; margin-left: auto; margin-right: auto; }
  /* Les cartes adresse restent alignées à gauche */
  .addr { text-align: left; }
}

/* ════════════════════════════════════════
   ATELIER — CADRAGE DE LA PHOTO DES BOUTIQUES ENTRE 1100 ET 1279px
   ════════════════════════════════════════ */
/* ⚠️ Même cause que le cadrage mobile ci-dessus, rencontrée par l'autre bout :
   la grille RESTE à deux colonnes, mais la colonne rétrécit avec la fenêtre
   pendant que le cadre garde une hauteur FIXE de 378px. Son rapport dérive
   donc de 1,455 — soit le 3:2 de la source à 3 % près — et `object-fit: cover`
   recadre par la hauteur : sans cette règle, la portion visible de la largeur
   tombe à 90,0 % à 1200px et 81,2 % à 1100px, emportant l'enseigne.

   ⚠️ Élargir la colonne ne peut PAS corriger cela, l'arithmétique l'interdit :
   à 1100px la zone de contenu fait 1004px ; même à `gap: 0` chaque colonne
   ferait 502px, quand il en faudrait 567 (378 × 1,5) pour loger la source
   entière à cette hauteur. La HAUTEUR du cadre est le seul levier réel.

   ⚠️ La hauteur de la section ne bouge pas d'un pixel, et c'est ce qui rend
   cette correction gratuite : `.atelier__grid` est en `align-items: start` et
   la colonne de gauche (titre + trois cartes d'adresse) mesure 730 à 734px
   contre 426 à 487px à droite — c'est elle qui fixe la hauteur à toutes les
   largeurs à deux colonnes (mesuré de 1100 à 1440px).

   ⚠️ `550 / 378` n'est pas un rapport arbitraire : c'est celui que le cadre a
   DÉJÀ au-delà de 1280px, là où la colonne atteint sa largeur maximale (552px,
   moins les 2×1px de bordure du `.gold-frame`). Le reprendre revient à
   conserver partout le cadrage desktop validé — 97 % de la largeur de la
   source, à toutes les largeurs — au lieu de le laisser dériver. À 550px de
   large il redonne EXACTEMENT 378px : la règle est inerte à partir de 1280px,
   et `max-height: 378px` verrouille cette inertie contre toute dérive
   sous-pixel. ❌ Ne pas y mettre le 3:2 de la source : à 550px il donnerait
   366px et raccourcirait le rendu desktop validé.

   ⚠️ `min-width: 1100px` N'EST PAS un choix de cadrage : c'est exactement la
   largeur à partir de laquelle `.atelier__grid` a deux colonnes (bloc
   ci-dessus). Les deux bornes doivent rester ÉGALES — la règle n'a de sens
   qu'à deux colonnes. Sous 1100px, la photo est un bandeau pleine largeur et
   sa hauteur vient du `min-height: 380px` de `.atelier__map-frame` : 378px,
   exactement la même qu'ici (mesuré, pas déduit). Le bloc 4:3 du cadrage
   mobile reste seul maître sous 600px.

   ⚠️ Portée limitée à `.atelier__map-frame` pour la même raison que ci-dessus :
   `.gf-inner` est mutualisé (image 4:5 de `.philo`, cadre doré des pages
   intérieures) — aucun autre média ne doit changer de cadrage. */
@media (min-width: 1100px) {
  .atelier__map-frame { min-height: 0; }
  .atelier__map-frame .gold-frame > .gf-inner {
    min-height: 0;
    /* Même garantie que ci-dessus : sans `align-self`, l'étirement du flex
       peut imposer la hauteur et neutraliser `aspect-ratio`. */
    align-self: flex-start;
    aspect-ratio: 550 / 378;
    max-height: 378px;
  }
}

@media (max-width: 480px) {
  /* Boutons du hero empilés (repris de l'ancien style.css legacy) */
  .hero__actions { flex-direction: column; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}