/* SERVICES — CSS HEX-only (genere depuis services-v2.html) | Palette Accord D | 100% HEX */


/* ─── TOKENS ───
   Le bloc :root qui recopiait ici la palette complète (--rds-fond,
   --rds-accent, --rds-encre, --rds-or…) a été retiré le 2026-07-24 : ces
   valeurs étaient identiques à celles de style.css, chargé avant cette
   feuille. Les redéclarer par page créait un second système à maintenir,
   sans aucun effet sur le rendu. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--rds-font-body); font-weight: 300; background: var(--rds-fond); color: var(--rds-encre); }

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

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

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

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

/* ─── HERO ÉDITORIAL SPLIT (sync contact-v2.html v1__edito) ─── */
.v1__edito {
  background: var(--rds-vert); color: #fff;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: 640px;
}
.v1__edito-inner {
  padding: 7rem 4rem 6rem; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 640px; margin-left: auto;
}
.v1__edito-tag {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--rds-font-body); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: #fff;
  margin-bottom: 1.4rem; padding: 0.4rem 1rem;
  border: 1px solid #FFFFFF66;
  border-radius: 40px;
  background: #FFFFFF14;
  backdrop-filter: blur(4px);
  align-self: flex-start;
}
.v1__edito-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rds-or); flex-shrink: 0; }
.v1__edito-byline {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: #FFFFFFB3;
  margin-bottom: 1.6rem; display: block;
}
.v1__edito-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(2.8rem, 5.4vw, 4.8rem); font-weight: 500;
  color: #fff; line-height: 1; margin-bottom: 1.8rem; letter-spacing: -0.01em;
}
.v1__edito-title em { color: var(--rds-or); font-style: italic; font-weight: 300; }
.v1__edito-sep { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.v1__edito-sep-line { width: 56px; height: 1px; background: #C9A458CC; }
.v1__edito-text {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 300;
  color: #FFFFFFE0; line-height: 1.7; max-width: 520px; text-wrap: pretty;
}
@media (max-width: 960px) {
  .v1__edito { grid-template-columns: 1fr; }
  .v1__edito-inner { max-width: none; margin: 0; padding: 6rem 2rem 3rem; }
}

/* ─── Hero « Nos Services » — photo plein fond (2026-07-09 quinquies) ───
   Traitement STRICTEMENT IDENTIQUE au hero « Notre Histoire »
   (assets/css/notre-histoire.css, section « Hero « Notre Histoire » — photo
   plein fond ») : la cliente veut les deux heroes visuellement indissociables
   — seules l'image de fond et le texte changent. Ce bloc est un copier-coller
   intentionnel de celui de Notre Histoire (même structure, mêmes valeurs de
   voile/ombre/marges/transform/hauteur) — ne JAMAIS le faire diverger sans
   reporter le changement sur les deux pages. Seule variable : object-position
   de l'image (cadrage propre à chaque photo).

   ⚠️ **DIVERGENCE ASSUMÉE depuis le lot 1.33.0 : le voile HORIZONTAL (desktop)
   de cette page seule est plus dense et s'étend plus loin.** Elle n'est pas
   cosmétique et ne se reporte PAS sur Notre Histoire. `hero-nos-services.webp`
   est une photo d'intérieur de boutique, claire sur toute sa largeur (fleurs
   et bois blond) là où le texte blanc se pose ; l'ancienne
   `hero-services.webp` ménageait une zone gauche sombre. Mesure par
   ÉCHANTILLONNAGE DE PIXELS (méthode de reports/palette-1.10.1/scripts/
   contrast.mjs — seuls les glyphes sont rendus transparents, descendants
   colorés compris, et le pire pixel de la boîte est retenu), avec le voile
   d'origine : titre 1,94:1 et texte 2,02:1 à 1440 px. Après : voir plus bas.
   ⚠️ Densité **relevée une seconde fois** quand les deux heros ont échangé
   leur photo dans ce même lot : l'étal d'hortensias bleus et de lys venu de
   l'accueil est encore plus clair sous le texte aux largeurs intermédiaires
   (titre 3,3:1 et texte 2,8:1 à 1024 px avec le voile précédent). Cinq
   cadrages essayés n'y changeaient rien — ≤ 0,1 point d'écart : sur cette
   photo, c'est le voile qui gouverne, pas l'`object-position`.
   Tout le reste — structure, ombre portée, marges, transform, hauteur, et le
   voile VERTICAL comme le bloc mobile ≤ 960px — reste identique aux deux
   pages. ⚠️ Ne pas « réaligner » ce gradient sur Notre Histoire au nom de la
   cohérence : ce serait rendre le texte illisible sur cette photo-ci.
   ⚠️ Rappel du projet : un texte posé sur une photographie n'est pas jugé
   mécaniquement par un seuil WCAG (son fond varie d'un pixel à l'autre) —
   ces valeurs servent à COMPARER des variantes, et la décision finale se
   prend à l'œil sur les captures. */
.v1__edito.v1__edito--photo-bg {
  grid-template-columns: 1fr;
  background: var(--rds-encre) !important; /* fond de secours pendant le chargement de la photo */
}
.v1__edito.v1__edito--photo-bg::before,
.v1__edito.v1__edito--photo-bg::after {
  display: none !important;
}
.v1__edito.v1__edito--photo-bg .v1__edito-bg {
  position: absolute; inset: 0; z-index: 0;
}
.v1__edito-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* hero-nos-services.webp (1672 × 941, ≈16:9) : étal de fleurs fraîches —
     hortensias bleus, delphiniums, lys. ⚠️ **C'est la photo qui était celle de
     l'accueil** : les deux heros ont échangé leur image au lot 1.33.0, sous
     leurs noms de page respectifs (le fichier de l'accueil porte désormais
     l'étal rose). Un remplacement d'octets sous un nom inchangé se serait
     heurté au cache des visiteurs : de là le `?ver=` posé sur les DEUX `<img>`
     (`template-services.php` et `front-page.php`).
     ⚠️ **L'axe qui commande le cadrage dépend de la largeur** : en `cover` à
     1440 px, l'échelle vient de la largeur (débordement vertical, seul Y
     agit) ; sous ~960 px elle vient de la hauteur (débordement horizontal,
     seul X agit). Ne jamais déduire un cadrage d'une seule largeur.
     ⚠️ Mesuré sur CETTE photo : le cadrage ne change presque rien au contraste
     du texte (cinq positions essayées à 1440 et 1024 px, écart ≤ 0,1 point) —
     ce qui le gouverne ici est le VOILE, ci-dessous. Les valeurs sont donc
     choisies pour ce qu'elles MONTRENT : 55 % vertical garde l'étal entier
     sans entamer le plafond. */
  object-position: 64% 55%;
  display: block;
}
.v1__edito.v1__edito--photo-bg .v1__edito-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Voile horizontal — DIVERGENT de Notre Histoire, voir l'en-tête du bloc.
       ⚠️ **Arrêts en PIXELS, pas en pourcentages.** Le bloc de texte a une
       largeur FIXE (`.v1__edito-inner`, max-width 640px + translate de
       +100px) : il occupe toujours la bande 164→676px, quelle que soit la
       largeur de la fenêtre. Un gradient en % suit la fenêtre, pas le texte —
       mesuré avec les mêmes densités en % : titre à 4,30:1 à 1440px mais
       1,97:1 à 1024px et 1,99:1 à 961px, parce que 676px y valent 66 et 70 %
       de la largeur, là où le voile était déjà éteint. En pixels, la même
       déclaration tient d'un bout à l'autre. Densités relevées une seconde
       fois pour la photo venue de l'accueil (voir l'en-tête) — titre / texte,
       à 961, 1024, 1280, 1440 et 1920px : **4,51 / 4,38 · 4,70 / 3,85 ·
       4,65 / 4,33 · 4,62 / 5,68 · 4,64 / 5,27**, contre 3,16 / 3,19 · 3,33 /
       2,77 · 3,30 / 3,21 · 3,27 / 4,39 · (idem) avant. Toute reprise de ces
       arrêts se revérifie AUX DEUX BOUTS, jamais sur une seule largeur. */
    linear-gradient(90deg,
      rgba(42, 31, 26, 0.86) 0,
      rgba(42, 31, 26, 0.76) 480px,
      rgba(42, 31, 26, 0.50) 720px,
      rgba(42, 31, 26, 0)    1020px),
    linear-gradient(180deg,
      rgba(31, 22, 18, 0.38) 0%,
      rgba(31, 22, 18, 0)    22%,
      rgba(31, 22, 18, 0)    68%,
      rgba(31, 22, 18, 0.48) 100%),
    /* Plancher uniforme : sans lui, entre 961 et ~1200 px la colonne de texte
       occupe presque toute la moitié gauche et sa fin retombe dans la zone
       claire du gradient. Volontairement faible (0,12) : il ne doit pas
       éteindre l'étal, qui est le sujet de la photo. */
    rgba(42, 31, 26, 0.12);
}
.v1__edito--photo-bg .v1__edito-inner {
  margin-left: 0;
  margin-right: auto;
  transform: translate(100px, -24px);
  text-shadow: 0 2px 20px rgba(20, 14, 11, 0.4);
}

@media (max-width: 960px) {
  /* ⚠️ Sous 960px l'axe qui commande s'inverse (voir plus haut) : le cadre est
     plus haut que large, l'échelle vient de la hauteur et le débordement est
     HORIZONTAL — seul X agit. Le 76 % hérité de l'ancienne photo panoramique
     montrait ici le mur de droite et coupait l'étal, qui est le sujet ; 45 %
     le recentre — sur les hortensias bleus et les delphiniums depuis
     l'échange des deux heros. Vérifié en capture à 390 px. */
  .v1__edito-bg img { object-position: 45% 42%; }
  .v1__edito--photo-bg .v1__edito-inner { transform: none; }
  .v1__edito.v1__edito--photo-bg .v1__edito-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.32);
  }
}

/* Annule le fond blanc global (#fff8f2) hérité de style.css dans les sections colorées */
.page-title-block .floral-divider,
.sB__cta .floral-divider { background: transparent; }

/* ─── Page title block ─── (config identique à Notre Histoire) */
.page-title-block {
  background: var(--rds-fond-alt); padding: 2rem 3rem 1rem; text-align: center;
  border-bottom: 1px solid #2A1F1A12;
}
.page-title-block .surtitre { margin-bottom: 1rem; }
.page-title-block h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2;
}

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

/* ════════════════════════════════════════
   MODÈLE B — Liste verticale avec visuels
   Style éditorial, service = section pleine largeur
   ════════════════════════════════════════ */
.sB { background: var(--rds-fond); }

.sB__service {
  padding: 5rem 3rem;
  border-bottom: 1px solid #2A1F1A12;
}
.sB__service--alt { background: var(--rds-fond-alt); }
.sB__service-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.sB__service--rev .sB__service-inner { direction: rtl; }
.sB__service--rev .sB__service-inner > * { direction: ltr; }
/* Cadre doré photos service — autour de la photo */
.sB__service-img-frame {
  position: relative; width: 100%;
  padding: 0;
  background: #F6EBE1;
  border: 1px solid #C9A45873;
  border-radius: 6px;
  box-shadow:
    0 0 0 3px #FAF1EDFF,
    0 0 0 4px #C9A45833;
}
.sB__service-img-frame .sB__service-img,
.sB__service-img-frame img {
  display: block; width: 100%; border-radius: 4px;
}

/* Coins dorés décoratifs */
.sB__service-img-frame .frame-corner {
  position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none;
}
.sB__service-img-frame .frame-corner svg { width: 22px; height: 22px; }
.frame-corner--tl { top: -1px; left: -1px; }
.frame-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.frame-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.frame-corner--br { bottom: -1px; right: -1px; transform: scale(-1); }
.sB__service-num {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 5rem; font-weight: 300; color: var(--rds-accent);
  opacity: 0.15; line-height: 1; display: block; margin-bottom: -1rem;
}
/* Les quatre surtitres de service portaient chacun leur couleur dans un
   attribut style= (accent, or, taupe, vert) — dont l'or, à 2,1:1 sur le fond
   clair. Unifiés sur la couleur de surtitre du site : les services restent
   distingués par leur numéro, leur titre et leur photo. */
.sB__service-surtitre {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 0.5rem; display: block;
  color: var(--rds-surtitre);
}
.sB__service-title {
  font-family: var(--rds-font-title);
  font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 400;
  color: var(--rds-encre); line-height: 1.15; margin-bottom: 1.2rem;
}
.sB__service-text { font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.88; margin-bottom: 1.8rem; }
.sB__service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.8rem; }
.sB__service-tag {
  font-family: var(--rds-font-body); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 3px;
}

/* ── Grille icônes services (remplace les tags de catégories) ── */
.svc-icons-grid {
  display: grid;
  /* minmax(0, 1fr), pas 1fr seul : un 1fr nu vaut minmax(auto, 1fr) — un
     libellé long et incassable (« Anniversaire », « Déclaration »…) élargit
     alors sa colonne au détriment des 3 autres. Conséquence mesurée : à
     ~820px, ce vol de largeur faisait déjà passer « Sur mesure » sur deux
     lignes sur #mariage mais pas sur #deuil, deux grilles pourtant
     identiques — une asymétrie qui ne dépendait que du libellé voisin.
     minmax(0, 1fr) force les 4 colonnes à rester strictement égales ; voir
     .svc-icon__label ci-dessous pour la coupure de mot qui absorbe le
     débordement résultant sur les libellés les plus longs. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem 0.5rem;
  padding: 0.4rem 0 1.6rem;
}
.svc-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.svc-icon__circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  /* Était #C8A86E, un cinquième or à 0,6 de ΔE de l'or du site : indiscernable
     à l'œil, mais une valeur de plus à maintenir. */
  border: 1px solid var(--rds-or);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.svc-icon__circle svg {
  width: 30px;
  height: 30px;
  color: var(--rds-or);
}
.svc-icon__label {
  font-family: var(--rds-font-body);
  /* 0.55rem (8,8px) était le plus petit texte de toute la page — plus petit
     que les libellés équivalents ailleurs sur le site (.social__icon-label
     de l'accueil : 0.7rem ; .sB__atelier-info-label de cette même page :
     0.58rem). Remonté à 0.6rem : reste le libellé le plus discret de la
     page (fin, décoratif), mais rejoint la fourchette basse déjà en usage
     plutôt que de rester en dessous. */
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rds-taupe);
  text-align: center;
  line-height: 1.3;
  /* Colonnes désormais égales (voir .svc-icons-grid) : un mot long et
     incassable comme « Anniversaire » ou « Déclaration » peut dépasser sa
     colonne sur mobile/tablette. overflow-wrap le laisse alors couper
     proprement à l'intérieur de sa propre cellule plutôt que déborder sur
     le libellé voisin (constaté avant ce correctif, à ~390px). Les libellés
     à espace (« Sur mesure ») ou à trait d'union (« Cache-pots ») continuent
     de se couper à cet endroit naturel en priorité. hyphens:auto (avec
     lang="fr-BE" posé sur <html>) coupe alors avec un trait d'union
     linguistique plutôt qu'un découpage brut au milieu du mot. */
  overflow-wrap: break-word;
  hyphens: auto;
  /* min-width:auto est la valeur implicite d'un enfant flex (.svc-icon__label
     est un item de .svc-icon, display:flex) : sans ce reset, le libellé
     refuse de descendre sous la largeur de son contenu non coupé, et
     overflow-wrap ci-dessus n'a jamais l'occasion de s'appliquer. */
  min-width: 0;
  /* .svc-icon a align-items:center (nécessaire pour centrer le cercle, de
     largeur fixe) — mais en axe transversal « center », un enfant SANS
     largeur explicite se dimensionne à son seul contenu, pas à la largeur
     de la colonne de grille : le libellé s'étalait donc sur sa largeur
     naturelle (89px mesurés pour « Anniversaire ») bien au-delà des 74,5px
     de sa colonne, sans jamais chercher à couper le mot. align-self:stretch
     lui redonne la pleine largeur de .svc-icon (donc de la colonne), texte
     centré par text-align — c'est alors seulement qu'overflow-wrap peut
     agir. Piège de flexbox classique, invisible à la lecture des seules
     règles ci-dessus prises séparément. */
  align-self: stretch;
}
/* Était rgba(200,168,110,0.08) — l'ancien or #C8A86E, le cinquième or relevé
   par l'audit. Aligné sur l'or premium du site, dans la notation hexadécimale
   à alpha déjà employée partout ailleurs pour cette couleur (#C9A4581F sur
   .svc-card__icon de l'accueil, par exemple). Opacité inchangée. */
.svc-icon:hover .svc-icon__circle {
  background: #C9A45814;
}

/* ── Cadre doré universel ── */
.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 > * { display: block; width: 100%; border-radius: 3px; }
.gold-frame--dark {
  background: #1F1813;
  border-color: #C9A4584D;
  box-shadow: 0 0 0 3px #1F1813, 0 0 0 4px #C9A45826;
}
.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); }

/* Wrapper carrousel encadré */
.gold-frame-carousel {
  position: relative;
  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-carousel .atelier-carousel {
  border-radius: 3px; overflow: hidden;
  aspect-ratio: 4/5; width: 100%;
}
.gold-frame-carousel .gold-frame__corner { z-index: 5; }

/* ── Carrousel atelier ── */
.atelier-carousel {
  position: relative; border-radius: 8px; overflow: hidden;
  aspect-ratio: 4/5; background: #1A130F;
}
.atelier-carousel__slides {
  display: flex; height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.atelier-carousel__slide {
  min-width: 100%; height: 100%; flex-shrink: 0; background: #FAF1ED;
}
.atelier-carousel__slide .ph {
  width: 100%; height: 100%; border-radius: 0;
}
.atelier-carousel__slide img {
  width: 100%; height: 100%; object-fit: contain; background: #FAF1ED;
}
.atelier-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #FAF1EDCC; backdrop-filter: blur(8px);
  border: 1px solid #C9A45866;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px #2A1F1A1F;
  transition: background var(--rds-transition), border-color var(--rds-transition), color var(--rds-transition), transform 0.2s, opacity var(--rds-transition);
  z-index: 2;
  color: var(--rds-encre);
  opacity: 0.82;
}
.atelier-carousel__btn:hover {
  background: #FFF8F2E6;
  border-color: #C9A458B3;
  color: var(--rds-accent);
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
}
.atelier-carousel__btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atelier-carousel__btn--prev { left: 10px; }
.atelier-carousel__btn--next { right: 10px; }
.atelier-carousel__dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; z-index: 2;
  max-width: calc(100% - 5.5rem);
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: #FAF1EDB3;
  border: 1px solid #FFFFFF59;
  box-shadow: 0 6px 18px #2A1F1A1A;
  backdrop-filter: blur(8px);
}
.atelier-carousel__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #63535066; border: none; cursor: pointer; padding: 0;
  transition: background 0.25s, width 0.25s, opacity 0.25s;
  opacity: 0.9;
}
.atelier-carousel__dot--active {
  width: 18px; border-radius: 999px; background: var(--rds-or);
}
.atelier-carousel__counter {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  font-family: var(--rds-font-body); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.14em; color: var(--rds-encre);
  background: #FAF1EDCC; backdrop-filter: blur(6px);
  border: 1px solid #C9A45852;
  padding: 0.25rem 0.6rem; border-radius: 20px;
}
.atelier-carousel.is-static .atelier-carousel__btn,
.atelier-carousel.is-static .atelier-carousel__dots,
.atelier-carousel.is-static .atelier-carousel__counter {
  display: none;
}
.atelier-carousel .atelier-carousel__slides {
  position: relative;
  display: block;
  height: 100%;
  transform: none !important;
  transition: none;
}
.atelier-carousel .atelier-carousel__slide {
  position: absolute;
  inset: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.atelier-carousel .atelier-carousel__slide:first-child { opacity: 1; }
.atelier-carousel.is-ready .atelier-carousel__slide {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.atelier-carousel.is-ready .atelier-carousel__slide.is-active { opacity: 1; }
/* Fond prune (--rds-accent) au lieu du vert d'origine : cette teinte n'était
   plus cohérente avec la palette validée le 2026-07-24 (prune/rose/vert
   végétal), le vert n'étant plus utilisé comme grande surface ailleurs sur
   cette page. Aucun autre token de marque introduit — voir CLAUDE.md,
   « Micro-ajustements » / lot palette. */
/* Fond ramené à --rds-fond (2026-07-31, lot finalisation) : ce bandeau était
   en prune plein, seule section sombre entre 4 sections claires (01 fond,
   02 fond-alt, 03 fond, 04 fond-alt) et le CTA final (fond-alt), ce qui
   cassait l'alternance clair/rose établie sur le reste de la page. Preuve
   indépendante que --rds-fond est la bonne valeur, pas une simple préférence :
   .gold-frame-carousel juste en dessous a déjà un box-shadow dont l'anneau
   externe est littéralement var(--rds-fond) (pensé pour se fondre dans un
   fond clair), jusqu'ici mal assorti au prune. Tous les textes de ce bloc
   passent donc du blanc (pensé pour fond sombre) aux tokens clairs déjà
   utilisés par les sections 01-04/CTA de cette même page. */
.sB__atelier-block {
  background: var(--rds-fond); padding: 5rem 3rem; position: relative; overflow: hidden;
}
.sB__atelier-inner {
  max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.sB__atelier-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.15; margin-bottom: 1.2rem;
}
.sB__atelier-text { font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.85; margin-bottom: 2rem; }
.sB__atelier-infos {
  display: flex; flex-direction: column; margin-bottom: 2rem;
  border: 1px solid #FFFFFF26; border-radius: 8px;
  overflow: hidden;
}
.sB__atelier-info {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid #FFFFFF1F;
  background: #FFFFFF0F;
}
.sB__atelier-info:last-child { border-bottom: none; }
.sB__atelier-info-label {
  font-family: var(--rds-font-body); font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: #FFFFFF8C;
  flex: 0 0 110px; display: block;
  border-right: 1px solid #FFFFFF26;
  padding-right: 1.2rem;
}
.sB__atelier-info-val {
  font-family: var(--rds-font-title); font-size: 1.15rem;
  font-weight: 400; color: #fff; line-height: 1.2; white-space: nowrap;
  flex: 1; min-width: 0;
}
.sB__atelier-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sB__atelier-img-tall { grid-row: 1 / 3; height: 300px; }
.sB__atelier-img-sq { height: 143px; }

/* Le CTA du bandeau Ateliers utilise .btn-outline-accent (identique aux
   sections 01-04 de cette page) depuis le passage du bandeau au fond clair
   (2026-07-31) : .btn-ghost-or, réservé aux fonds sombres/saturés, n'a plus
   lieu d'être ici. Plus aucun override scopé nécessaire. */

/* CTA sB */
/* 2026-09-10 — recalibrage de la hauteur de la bande rose de fin de page.
   Le vide vertical mesuré au-dessus du motif floral (128px) ne venait PAS
   d'une seule règle : le padding de la section (80px) et le padding-top du
   séparateur floral (48px, valeur globale de style.css) s'additionnaient.
   ⚠️ La correction est scopée à .sB__cta et écrite en règle SÉPARÉE : le
   sélecteur groupé plus haut dans ce fichier (ligne « .page-title-block
   .floral-divider, .sB__cta .floral-divider ») sert aussi le bandeau « Tout
   ce que nous créons pour vous », qui ne doit pas bouger.
   Cible : 52px de respiration en haut ET en bas (40px sous 768px). */
.sB__cta {
  background: var(--rds-fond-alt); padding: 3.25rem 3rem; text-align: center;
}
/* Le padding-top du séparateur s'ajoutait à celui de la section : c'était du
   vide EXTÉRIEUR déguisé en espacement interne. Son padding-bottom, lui, est
   bien l'espacement motif → titre : il est conservé intact. */
.sB__cta .floral-divider { padding-top: 0; }
.sB__cta-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2; margin-bottom: 1rem;
}
.sB__cta-text {
  font-size: 0.9rem; color: var(--rds-taupe); margin-bottom: 2rem;
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.sB__cta-btns { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
/* Les deux boutons du CTA final réutilisent .btn-primary / .btn-outline
   (définis plus haut dans ce fichier) — même paire déjà validée sur le CTA
   final de la page Nos Ateliers (inc/rds-atelier-body.php). Remplace les
   anciennes classes .sB__cta-btn-white/-ghost, qui dupliquaient ces styles
   en dur (dont un #000000 hors tokens pour le bouton secondaire) sans rien
   apporter de plus : les deux jeux de classes recevaient déjà l'anneau de
   focus universel (:focus-visible non scopé, functions.php). Bénéfice réel :
   un seul composant à maintenir, et un anneau de focus identique à celui
   des boutons .btn-primary/.btn-outline déjà utilisés ailleurs sur le site
   (style.css, liste `:focus-visible` nommée), plutôt qu'un rendu différent
   propre à cette page. */

@media (max-width: 768px) {
  .svc-icons-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 0.4rem; }
  .svc-icon__circle { width: 56px; height: 56px; }
  .svc-icon__circle svg { width: 24px; height: 24px; }
  .sB__service { padding: 3.5rem 1.5rem; }
  .sB__service-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sB__service--rev .sB__service-inner { direction: ltr; }
  .sB__atelier-block { padding: 3.5rem 1.5rem; }
  .sB__atelier-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sB__atelier-imgs { grid-template-columns: 1fr; }
  .sB__atelier-img-tall { height: 260px; }
  .sB__atelier-img-sq { height: 180px; }
  /* Voir le commentaire du bloc « CTA sB » : même recalibrage sur mobile,
     56px de vide vertical ramenés à 40px. */
  .sB__cta { padding: 2.5rem 1.5rem; }
}