/* ═══════════════════════════════════════════════════════════════════
   RDS — HERO BACKGROUND BOTANIQUE
   ─────────────────────────────────────────────────────────────────
   Fond atmosphérique vert sauge pour les heroes des pages intérieures.
   Pages : Notre Histoire, Services, Nos Ateliers, Contact.
   Reproduit la maquette integration/e62b.png :
   sauge mat désaturé + grain papier + halos de lumière + vignette
   + ombres de feuillage projetées (gauche dominante, droite atténuée).

   Utilisation :
   1. Classe .rds-hero--botanical sur la section/div hero
   2. <div class="rds-hero-botanical__overlay" aria-hidden="true"> en
      PREMIER enfant (porte les ombres de feuillage via ::before/::after)
   3. Chargé APRÈS tokens-accord-d.css et le CSS de la page
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Palette héro (calée sur e62b.png) ───
   Six des sept tokens de ce bloc (--rds-hero-sage, -sage-mid, -sage-dark,
   -sage-glow, -shadow, -frame-line) n'étaient consommés par aucun var() :
   retirés le 2026-07-24. Seul le fond de cadre reste utilisé (×3). */
:root {
  --rds-hero-frame-bg:    #4A5040;   /* fond carte droite */
}

/* Pile de fond commune : grain → halo clair → halo sombre → vignette → base.
   Le grain (feTurbulence) est servi en data-URI à faible opacité (0.05). */
/* Fond = base sauge + 3 calques de lumière empilés (CALQUE 1 halo,
   CALQUE 3 ombre bas-droite, CALQUE 2 vignette), du plus haut au plus bas. */
.rds-hero--botanical,
.v1__edito.rds-hero--botanical {
  background-color: #646B56;
  background-image:
    radial-gradient(ellipse 55% 45% at 8% 12%, rgba(210, 220, 185, 0.22) 0%, rgba(180, 195, 155, 0.10) 35%, transparent 65%),   /* CALQUE B — point d'entrée lumière coin haut-gauche */
    linear-gradient(135deg, rgba(195, 205, 170, 0.28) 0%, rgba(160, 175, 140, 0.15) 25%, transparent 55%),                        /* CALQUE A — rayon directionnel haut-gauche → centre */
    radial-gradient(ellipse 65% 55% at 30% 40%, rgba(160, 170, 140, 0.30) 0%, transparent 70%),   /* halo lumineux centre-gauche */
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(20, 25, 15, 0.35) 0%, transparent 65%),       /* ombre douce bas-droite */
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 40%, rgba(30, 35, 22, 0.5) 100%),       /* vignette des bords */
    linear-gradient(150deg, #6B7260 0%, #646B56 48%, #5C6350 100%);                                  /* base sauge */
  background-repeat: no-repeat;
}

/* Spécificité renforcée pour battre `.v1__edito.v1__edito` (tokens-accord-d.css) */
.v1__edito.rds-hero--botanical {
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  align-items: stretch;
  min-height: 640px;
  position: relative;
  overflow: hidden;
}

/* Neutraliser le ::before texture de tokens-accord-d.css */
.v1__edito.rds-hero--botanical::before {
  display: none !important;
}

/* Grain papier aquarelle — texture clairement perceptible.
   Réutilise le ::after du hero (remplace la texture token), mix-blend overlay. */
.v1__edito.rds-hero--botanical::after,
.rds-hero--botanical::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;            /* sous le contenu (inner/right en z-index 2) */
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 160px 160px;
  opacity: 0.6;               /* soft-light est doux : opacité haute pour rester perceptible */
  mix-blend-mode: soft-light; /* soft-light agit sur les demi-tons, contrairement à overlay */
}

/* ─── Overlay — porte les ombres de feuillage ─── */
/* Spécificité 0-3-0 : indispensable pour battre `.v1__edito.v1__edito > *`
   (0-2-0, tokens-accord-d.css) qui force `position: relative` sur tous les
   enfants directs du hero. Sans ça l'overlay redevient un item de grille en
   flux → la grille 2 colonnes reçoit 3 items et le carrousel est éjecté. */
.v1__edito.rds-hero--botanical > .rds-hero-botanical__overlay,
.rds-hero--botanical .rds-hero-botanical__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Ombre de feuillage haut-gauche RETIRÉE : remplacée par le décor de coin
   botanique par page (.rds-hero-decor--corner-tl). On évite ainsi le double
   calque végétal au même endroit (un seul décor visible en haut à gauche). */
.rds-hero-botanical__overlay::before {
  content: none;
}

/* ─── Contenu au-dessus de l'overlay ─── */
.rds-hero--botanical > *:not(.rds-hero-botanical__overlay) {
  position: relative;
  z-index: 1;
}

/* ─── Cadre doré (carte droite) adapté au fond sage ─── */
.rds-hero--botanical .gold-frame,
.rds-hero--botanical .rds-gold-frame,
.rds-hero--botanical.v1__edito .gold-frame.gold-frame--on-vert {
  background: var(--rds-hero-frame-bg);
  border: 1px solid #C9A45899;   /* or du site à 60 % — était un 5e or, #C9A96E */
  border-radius: 4px;
  box-shadow:
    0 10px 36px rgba(20, 28, 16, 0.28),
    inset 0 2px 26px rgba(20, 28, 16, 0.45),     /* profondeur intérieure */
    inset 0 0 0 1px rgba(201, 169, 110, 0.12);
}

.rds-hero--botanical .v1__edito-right .gold-frame {
  width: min(100%, 540px);
  aspect-ratio: 4 / 5;
}

.rds-hero--botanical .v1__edito-right .gold-frame > .carousel,
.rds-hero--botanical .v1__edito-right .gold-frame > .atelier-carousel,
.rds-hero--botanical .v1__edito-right .gold-frame > .gf-inner,
.rds-hero--botanical .v1__edito-right .gold-frame > .ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 3px;
}

/* Letterbox des photos (object-fit:contain) → sauge sombre au lieu du cream
   inline #FAF1ED. !important requis pour battre le style inline des templates. */
.rds-hero--botanical .carousel__img,
.rds-hero--botanical .carousel__slide img,
.rds-hero--botanical .atelier-carousel__slide img,
.rds-hero--botanical .gf-inner img,
.rds-hero--botanical .gold-frame img {
  background-color: var(--rds-hero-frame-bg) !important;
}

/* Placeholder photo unique du hero (rds_hero_photo_placeholder) — fond sauge
   sombre cohérent avec le cadre. Les variantes .ph--rose/--vert-fonce/etc.
   sont calibrées pour les fonds clairs des autres sections de page (chapitres,
   services…) ; sur le fond sombre du cadre hero, leur texte/pointillé de
   couleur foncée devient illisible. On réécrit ici le trio couleur/pointillé/
   hachures (spécificité 0-3-0, bat la variante page 0-1-0) pour un rendu
   lisible et cohérent entre les 4 pages, indépendamment de la variante passée.
   display:flex + centrage RE-FORCÉS ici : services.css/contact.css portent une
   règle historique `.gold-frame > * { display:block; }` (héritée de l'époque
   où seuls des <img>/.gf-inner étaient enfants directs de .gold-frame) et
   notre-histoire.css a l'équivalent `.gold-frame > .ph { display:block; }` —
   les deux cassent le centrage flex de la légende du placeholder maintenant
   que .ph est un enfant direct de .gold-frame. Spécificité 0-3-0 les bat tous. */
.rds-hero--botanical .gold-frame .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rds-hero-frame-bg);
  background-image: repeating-linear-gradient(45deg,
    rgba(250, 241, 237, 0.05) 0px, rgba(250, 241, 237, 0.05) 1px,
    rgba(250, 241, 237, 0.1) 1px, rgba(250, 241, 237, 0.1) 14px);
  border: 1px dashed rgba(201, 169, 110, 0.45);
  color: rgba(250, 241, 237, 0.6);
}

.rds-hero--botanical .gold-frame__inner,
.rds-hero--botanical .rds-gold-frame__inner {
  border-radius: 3px;
  background: rgba(116, 130, 100, 0.08);
}

/* ─── Texte sur fond sage ─── */
.rds-hero--botanical .v1__edito-byline,
.rds-hero--botanical .rds-page-hero__byline,
.rds-hero--botanical .atelier-edito__byline {
  color: rgba(250, 241, 237, 0.6);
}

.rds-hero--botanical .v1__edito-title,
.rds-hero--botanical .rds-hero__title,
.rds-hero--botanical .atelier-edito__title {
  color: #FAF1ED;
}

.rds-hero--botanical .v1__edito-title em,
.rds-hero--botanical .rds-hero__title em,
.rds-hero--botanical .atelier-edito__title em {
  color: var(--rds-or);
}

.rds-hero--botanical .v1__edito-text,
.rds-hero--botanical .rds-hero__text,
.rds-hero--botanical .rds-page-hero__tagline,
.rds-hero--botanical .atelier-edito__text {
  color: rgba(250, 241, 237, 0.82);
}

/* Tag / pastille */
.rds-hero--botanical .v1__edito-tag,
.rds-hero--botanical .rds-page-hero__tag,
.rds-hero--botanical .atelier-edito__tag {
  color: #FAF1ED;
  border-color: rgba(250, 241, 237, 0.35);
  background: rgba(250, 241, 237, 0.08);
}
.rds-hero--botanical .v1__edito-tag::before,
.rds-hero--botanical .rds-page-hero__tag::before,
.rds-hero--botanical .atelier-edito__tag::before {
  background: var(--rds-or);
}

/* Séparateur doré (filets latéraux du motif rds_hero_separator) */
.rds-hero--botanical .v1__edito-sep-line {
  background: rgba(201, 169, 110, 0.7);
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .v1__edito.rds-hero--botanical {
    grid-template-columns: 1fr;
  }
  .rds-hero--botanical .v1__edito-inner {
    max-width: none;
    margin: 0;
  }
  .rds-hero--botanical .v1__edito-right .gold-frame {
    width: 100%;
    max-width: 540px;
  }
}

@media (max-width: 768px) {
  .rds-hero--botanical,
  .v1__edito.rds-hero--botanical {
    background-image:
      radial-gradient(ellipse 60% 45% at 8% 10%, rgba(210, 220, 185, 0.22) 0%, transparent 60%),    /* point d'entrée lumière */
      linear-gradient(135deg, rgba(195, 205, 170, 0.26) 0%, rgba(160, 175, 140, 0.12) 28%, transparent 58%),  /* rayon directionnel */
      radial-gradient(ellipse 80% 50% at 32% 26%, rgba(160, 170, 140, 0.3) 0%, transparent 60%),
      radial-gradient(ellipse 120% 120% at 50% 45%, transparent 45%, rgba(30, 35, 22, 0.5) 100%),
      linear-gradient(160deg, #6B7260 0%, #636A55 45%, #5C6350 100%);
    background-repeat: no-repeat;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DÉCORS BOTANIQUES DU HERO — maquette validée
   ─────────────────────────────────────────────────────────────────
   Structure COMMUNE aux 4 pages, SIGNATURE différente par page.
   Posés par le helper PHP rds_hero_decor( $slug ) :
     - coins haut-gauche / bas-droite : motif propre à la page (modificateur
       .rds-hero-botanical__overlay--{slug})
     - fleurs latérales : frame-side-flowers (commun) derrière le cadre
     - médaillon de jonction : demi-cercle IDENTIQUE dont la couleur reprend
       la section suivante (var --next-section-bg, définie par page) ; seule
       la fleur intérieure change (.rds-hero-medallion--{slug})

   Empilement (du plus bas au plus haut) :
     overlay (z0) : coins + fleurs latérales        ← derrière TOUT le contenu
     grain ::after du hero (z1)
     contenu .v1__edito-inner / -right (z2)
     médaillon (z3, enfant direct du hero — au bas, hors zone du cadre)

   Les 3 décors de fond vivent DANS l'overlay (overflow:hidden) : clippés à la
   boîte du hero → aucun scroll horizontal, et toujours derrière texte/photo.
   Décors discrets : mix-blend-mode normal (par défaut), opacité douce,
   pointer-events:none. Couleur dorée des SVG conservée (#C9A35C).
   ═══════════════════════════════════════════════════════════════════ */

.rds-hero-botanical__overlay .rds-hero-decor {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 1 · Coin botanique haut-gauche — un SEUL décor à cet endroit (l'ancienne
   ombre de feuillage ::before est retirée). Subtil, derrière le contenu. */
.rds-hero-botanical__overlay .rds-hero-decor--corner-tl {
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  background-position: top left;
  background-size: contain;
  opacity: 0.22;          /* discret mais VISIBLE (conflit résolu par suppression du feuillage,
                             plus par réduction d'opacité) — ajustable selon validation cliente */
}

/* 2 · Coin botanique bas-droite — derrière le contenu
   (SVG transparent → aucun carré/rectangle visible) */
.rds-hero-botanical__overlay .rds-hero-decor--corner-br {
  right: 0;
  bottom: 0;
  width: 175px;
  height: 175px;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.22;          /* même présence que le coin haut-gauche (cohérence) */
}

/* 3 · Fleurs latérales (commun) — dans le jeu à droite du cadre
   (.v1__edito-right : padding-right 4rem + cadre centré), en partie tuckées
   derrière le bord droit du cadre. overlay z0 < contenu z2 → JAMAIS devant la
   photo ni le filet doré. Opacité douce, décorative, non dominante. */
.rds-hero-botanical__overlay .rds-hero-decor--side-flowers {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 155px;
  height: 88%;
  max-height: 480px;
  background-image: url('../img/decor/frame-side-flowers.svg');
  background-position: center right;
  background-size: contain;
  opacity: 0.7;
}

/* 4 · Médaillon de jonction — demi-cercle dont la couleur reprend la section
   suivante (--next-section-bg, définie dans le CSS de chaque page) pour une
   transition SANS rupture ; fleur dorée propre à la page au centre.
   Enfant DIRECT du hero : position:absolute OBLIGATOIRE (spécificité 0-3-0
   pour battre `> *` 0-2-0) sinon il devient un 3e item de grille et éjecte
   le carrousel — même piège que l'overlay (cf. note plus haut). */
.v1__edito.rds-hero--botanical > .rds-hero-medallion {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 104px;
  height: 52px;
  background: var(--next-section-bg, #F6ECE2);   /* = fond de la section suivante */
  border-radius: 100px 100px 0 0;
  box-shadow: 0 -3px 12px rgba(46, 51, 40, 0.16);
  z-index: 3;                                /* fleur nette au-dessus du grain et du contenu ;
                                                aucun chevauchement avec le cadre (padding-bottom 5rem le remonte) */
  pointer-events: none;
}

/* Fleur intérieure du médaillon — image posée par page (longhand pour ne pas
   écraser background-image via le raccourci) ; couleur dorée conservée. */
.v1__edito.rds-hero--botanical > .rds-hero-medallion::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;            /* visible mais discrète */
}

/* ─── Signatures par page : coins + fleur du médaillon ───
   2026-07-09 (habillage héros internes) : le coin haut-gauche était
   auparavant un fichier IDENTIQUE (copié) sur les 4 pages — aucune variation
   réelle malgré la classe --{slug}. Corrigé : services/ateliers/contact ont
   désormais leur propre SVG haut-gauche, dérivé par rotation 180° de leur
   propre coin bas-droite (déjà distinct par page) — même famille de trait,
   silhouette différente.
   ⚠️ Notre Histoire retirée de cette liste le 2026-07-09 (intégration photo
   hero définitive) : rds_hero_decor('notre-histoire') n'est plus appelé dans
   template-notre-histoire.php (plus de coins/fleurs latérales/médaillon —
   toute la richesse visuelle vient désormais de la photo). Les 3 fichiers
   notre-histoire-corner-top-left.svg / -corner-bottom-right.svg /
   -medallion-flower.svg, restés orphelins depuis, ont été SUPPRIMÉS du dépôt
   le 2026-09-11 (lot de maintenance) : plus aucune règle ne les nommait, et
   la vérification en base n'a trouvé ni option, ni contenu de page les
   citant. Leurs chemins vivent désormais dans $script:RdsObsoletePaths
   (tools/production/prod-lib.ps1), seule voie qui les retire aussi de la
   production. */
.rds-hero-botanical__overlay--services .rds-hero-decor--corner-tl { background-image: url('../img/decor/services-corner-top-left.svg'); }
.rds-hero-botanical__overlay--services .rds-hero-decor--corner-br { background-image: url('../img/decor/services-corner-bottom-right.svg'); }
.rds-hero-medallion--services::before { background-image: url('../img/decor/services-medallion-flower.svg'); }

.rds-hero-botanical__overlay--ateliers .rds-hero-decor--corner-tl { background-image: url('../img/decor/ateliers-corner-top-left.svg'); }
.rds-hero-botanical__overlay--ateliers .rds-hero-decor--corner-br { background-image: url('../img/decor/ateliers-corner-bottom-right.svg'); }
.rds-hero-medallion--ateliers::before { background-image: url('../img/decor/ateliers-medallion-flower.svg'); }

.rds-hero-botanical__overlay--contact .rds-hero-decor--corner-tl { background-image: url('../img/decor/contact-corner-top-left.svg'); }
.rds-hero-botanical__overlay--contact .rds-hero-decor--corner-br { background-image: url('../img/decor/contact-corner-bottom-right.svg'); }
.rds-hero-medallion--contact::before { background-image: url('../img/decor/contact-medallion-flower.svg'); }

/* ⚠️ Les anciens réglages desktop (≥961px) « fleurs latérales + médaillon
   agrandi » scopés --notre-histoire ont été supprimés le 2026-07-09 (code mort
   depuis que rds_hero_decor('notre-histoire') n'est plus appelé — plus aucun
   élément portant ces classes sur cette page). Historique : voir CLAUDE.md,
   section « Photo hero définitive — Notre Histoire ». Règles encore actives
   pour Services / Atelier / Contact : cf. bloc ci-dessus. */

/* ─── Responsive décors ─── */
@media (max-width: 960px) {
  /* Layout 1 colonne : le cadre prend toute la largeur → les fleurs
     latérales seraient masquées. On les retire (brief : masquer sur mobile). */
  .rds-hero-botanical__overlay .rds-hero-decor--side-flowers { display: none; }
  .rds-hero-botanical__overlay .rds-hero-decor--corner-tl { width: 120px; height: 120px; }
  .rds-hero-botanical__overlay .rds-hero-decor--corner-br { width: 135px; height: 135px; }
}

@media (max-width: 600px) {
  .rds-hero-botanical__overlay .rds-hero-decor--corner-tl { width: 92px; height: 92px; }
  .rds-hero-botanical__overlay .rds-hero-decor--corner-br { width: 100px; height: 100px; }
  .v1__edito.rds-hero--botanical > .rds-hero-medallion { width: 88px; height: 44px; }
  .v1__edito.rds-hero--botanical > .rds-hero-medallion::before { width: 34px; height: 34px; bottom: 5px; }
}