/* ============================================================
   Cultur'Murmur — Stylesheet principal
   v3 — mai 2026
   ============================================================ */

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cm-ink);
  background: var(--cm-cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ============================================================
   Palette & variables
   ============================================================ */
:root {
  --cm-brown:        #5a4030;
  --cm-brown-dark:   #241913; /*#3a2820;*/
  --cm-gold:         #e6b85c;
  --cm-gold-trans:   rgba(230, 184, 92, 0.78);
  --cm-gold-soft:    #f4e3c1;
  --cm-cream:        #fefcf8;
  --cm-gray-100:     #f5f2ec;
  --cm-gray-300:     #d8d2c5;
  --cm-gray-500:     #8a8270;
  --cm-ink:          #2a1f18;

  --topbar-h:        78px;
  --menu-h:          48px;
  --side-nav-w:      110px;

  --font-title:      "Goudy-Bookletter-1911", Cormorant Garamond, Georgia, serif;
  --font-body:       "Montserrat", system-ui, -apple-system, sans-serif;

  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  
  /*font-family: "Goudy Bookletter 1911", Questrial, -apple-system, 
  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
}
h1, h2, h3, h4, h5, h6, [class^='heading-'] {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 400;
	font-family: "Goudy-Bookletter-1911", Questrial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	letter-spacing: 0;
	color: #151515;
}
/* ============================================================
   TOPBAR (commun à toutes les pages)
   ============================================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(254, 252, 248, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(90, 64, 48, 0.08);
}
.topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.7rem 2rem;
  height: var(--topbar-h);
}

/* Logo */
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand-logo {
  height: 54px; width: auto; max-width: 240px;
  object-fit: contain;
}

/* Recherche */
.search-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(90, 64, 48, 0.18);
  border-radius: 28px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 0.25rem 0.25rem 0.25rem 1.2rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.search-bar:focus-within {
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 3px rgba(230, 184, 92, 0.18);
}
.search-input {
  flex: 1;
  border: none; background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--cm-ink);
  padding: 0.55rem 0.5rem;
  outline: none;
}
.search-input::placeholder {
  color: rgba(90, 64, 48, 0.55);
  font-style: italic;
}
.search-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border: none;
  background: var(--cm-gold-soft);
  color: var(--cm-brown-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.search-btn:hover {
  background: var(--cm-gold);
  transform: scale(1.05);
}

/* Actions droite */
.topbar-actions { display: flex; align-items: center; gap: 0.4rem; }
.action-link {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--cm-brown);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.action-link:hover {
  background: var(--cm-gold-soft);
  color: var(--cm-brown-dark);
  transform: translateY(-1px);
}

/* ============================================================
   MENU HORIZONTAL — sous le topbar, transparent
   ============================================================ */
.main-menu {
  position: absolute;
  top: var(--topbar-h);
  left: 0; right: 0;
  height: var(--menu-h);
  display: flex; align-items: center; justify-content: center;
  /*background: linear-gradient(
    to bottom,
    rgba(254, 252, 248, 0.55) 0%,
    rgba(254, 252, 248, 0.15) 70%,
    trans
    parent 100%
  );*/
  background: linear-gradient(
    to bottom,
    rgba(181, 140, 65, 0.30) 0%,
    rgba(181, 140, 65, 0.16) 70%,
    transparent 100%
  );
  pointer-events: none;
}
.menu-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2.4rem;
  pointer-events: auto;
}
.menu-item { margin: 0; }
.menu-link {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cm-brown-dark);
  text-decoration: none;
  padding: 0.4rem 0.2rem;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.menu-link:hover,
.menu-link.is-active {
  color: var(--cm-brown);
  border-bottom-color: var(--cm-gold);
}

/* ============================================================
   SIDE-NAV — pagination latérale (réutilisable, fixed gauche)
   ============================================================ */
.side-nav {
  position: fixed;
  left: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  /* on n'affiche que sur écrans larges */
}
@media (max-width: 1100px) {
  .side-nav { display: none; }
}

.side-nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.side-nav-item {
  position: relative;
}
.side-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--cm-gray-500);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 0.2rem 0;
  transition: color 0.3s var(--ease);
}

/* Le trait court qui apparaît à gauche du numéro quand actif */
.side-nav-mark {
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--cm-brown-dark);
  transition: width 0.4s var(--ease);
  flex-shrink: 0;
}

/* Le numéro 01, 02… */
.side-nav-num {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease);
}

/* Le libellé (visible uniquement à l'active ou hover) */
.side-nav-label {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--cm-brown-dark);
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  white-space: nowrap;
  pointer-events: none;
}

/* État actif */
.side-nav-item.is-active .side-nav-mark { width: 22px; }
.side-nav-item.is-active .side-nav-num { color: var(--cm-brown-dark); font-weight: 500; }
.side-nav-item.is-active .side-nav-label { opacity: 1; transform: translateX(0); }

/* Hover (sans surcharger l'actif) */
.side-nav-item:not(.is-active):hover .side-nav-num { color: var(--cm-brown-dark); }
.side-nav-item:not(.is-active):hover .side-nav-label { opacity: 0.7; transform: translateX(0); }

/* ============================================================
   SECTIONS — base commune
   ============================================================ */
.section {
  min-height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--topbar-h) + var(--menu-h) + 2rem) 1.5rem 4rem;
  scroll-margin-top: calc(var(--topbar-h) + var(--menu-h));
}

/* Section 01 — Hero d'accueil */
.section-hero {
  background: var(--cm-cream);
  overflow: hidden;
}
.section-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.section-hero-plumes {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0.92;
  mix-blend-mode: multiply;
  /* animation: hero-float 14s ease-in-out infinite;   archivé PALIER 2.1 — voir bloc ci-dessous */
}
/* === ARCHIVE PALIER 2.1 — 14/06/2026 ===
   Provenance : animation hero-float (était appliquée à .section-hero-plumes,
   c.-à-d. l'image composite JPG masquée). Inopérante à l'arrivée du palier 1
   (plumes individuelles), mais conservée pour mémoire patrimoniale et
   réutilisation éventuelle du principe d'oscillation au palier 3.
   Convention : [* *] = /* */ originaux. Restauration par find/replace.
   ------------------------------------------------------------
   @keyframes hero-float {
     0%, 100% { transform: translateY(0) rotate(0deg); }
     50%      { transform: translateY(-8px) rotate(0.3deg); }
   }
   === FIN ARCHIVE === */
.section-hero-content {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 900px;
  width: 100%;
  padding: 1rem;
}
.section-hero-title { margin: 0 0 1.6rem; font-weight: 400; line-height: 1; }
.section-hero-title-plate {
  display: inline-block;
  background: var(--cm-gold-trans);
  color: #241913; /*var(--cm-brown-dark);*/
  font-family: var(--font-title);
  font-weight: 500;
  font-stretch: condensed;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  padding: 0.2em 1em 0.3em;
  border-radius: 6px;
  letter-spacing: -0.01em;
}
.section-hero-subtitle {
  font-family: var(--font-title);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cm-brown-dark);
  margin: 0 0 2.8rem;
  text-shadow: 0 2px 0 rgba(254, 252, 248, 1.6);
}
.section-hero-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--cm-brown-dark);
  text-decoration: none;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid var(--cm-brown-dark);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.section-hero-link:hover {
  color: var(--cm-brown);
  border-bottom-color: var(--cm-gold);
  transform: translateY(-1px);
}

/* Sections 02 → 0X — placeholders propres */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cm-gold);
  margin: 0 0 1rem;
}
.section-title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cm-brown-dark);
  margin: 0 0 1.5rem;
  line-height: 1.15;
}
.section-lead {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cm-ink);
  max-width: 65ch;
  margin: 0 auto;
}
.section-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Alternance de fond pour respiration visuelle */
.section--alt { background: var(--cm-gray-100); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--cm-brown-dark);
  color: var(--cm-gold-soft);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.site-footer-inner {
  max-width: 1100px; margin: 0 auto;
}
.site-footer-credit {
  font-family: var(--font-title);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}
.site-footer-mentions {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin: 0;
  opacity: 0.8;
}
.site-footer-mentions a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.site-footer-mentions a:hover { border-bottom-color: var(--cm-gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .topbar-inner { gap: 1rem; padding: 0.6rem 1rem; }
  .search-bar { max-width: 100%; }
  .menu-list { gap: 1.4rem; }
}

@media (max-width: 720px) {
  :root { --topbar-h: 130px; --menu-h: 44px; }
  .topbar-inner {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand actions"
      "search search";
    height: auto;
    padding: 0.6rem 1rem 0.7rem;
  }
  .brand          { grid-area: brand; }
  .topbar-actions { grid-area: actions; }
  .search-bar     { grid-area: search; margin-top: 0.4rem; }
  .brand-logo { height: 44px; max-width: 180px; }
  .action-link { width: 38px; height: 38px; }
  .search-input { font-size: 0.85rem; }
  .menu-list { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .menu-link { font-size: 0.72rem; letter-spacing: 0.1em; }
  .section-hero-title-plate {
    font-size: clamp(2rem, 11vw, 3rem);
    padding: 0.45em 0.6em 0.5em;
  }
  .section-hero-subtitle { letter-spacing: 0.24em; font-size: 0.78rem; }
}
/* ============================================================
   Cultur'Murmur — Patch CSS — corrections du 13 mai 2026
   ============================================================
   À COLLER À LA FIN de assets/css/style.css
   (Surcharge les valeurs précédentes, donc rien à supprimer.)
   ============================================================ */

/* --- 1. Ajuste la couleur et transparence du fond TopBar ---*/
.topbar {
    background: rgb(181 140 65 / 25%);
    /*background: rgba(181, 140, 65, 0.25);*/
    backdrop-filter: blur(6px);
}

/* --- 2. Ajuste position et dim images/plumes-1992x814.jpg ---*/
.section-hero-plumes {
    max-width: 105%;
    max-height: 105%;
}
img.section-hero-plumes {
    margin-left: 10%;
}
.section-hero-content {
    max-width: 1000px;
}

/* --- 3. Cartouche or du titre : angles 5x plus arrondis --- */
.section-hero-title-plate {
  border-radius: 30px;   /* était : 6px */
}

/* --- 4. Sous-titre : halo blanc estompé en arrière-plan --- */
.section-hero-subtitle {
  /* Effet calque sous le texte. */
  display: inline-block;
  padding: 0.2rem;/* 2.4rem;*/
  background: rgba(255, 255, 255, 0.50);
  border-radius: 6px;   /* était : 6px */
  /*background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0)   100%
  );*/
 }
 
 /* --- 5. Uniformisation du Footer (crédit et mentions)--- */ 
.site-footer-credit, 
.site-footer-mentions {
    font-family: var(--font-title);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
}


  /* on garde les autres règles déjà définies ++ */



/* ============================================================
   Cultur'Murmur — PATCH ESTHÉTIQUE FINAL v4 — 22 mai 2026
   ============================================================
   Restaure les ajustements perdus lors de l'upgrade v4 :
   1. Variable --font-title vers la vraie police Adobe Fonts
   2. Cartouche or : transform scaleX(0.75) + nettoyage poids
   3. Logo à 74px de haut + topbar alignement strict
   4. Halo blanc sous-titre : display:block
   
   Ces règles surchargent les précédentes (cascade CSS).
   À conserver tout en bas du fichier.
   ============================================================ */

/* --- 1. Police de titre : Goudy Old Style (Adobe Fonts kit cez4gmm) --- */
:root {
  --font-title: "goudy-old-style", "Cormorant Garamond", Georgia, serif;
}

/* --- 2. Cartouche or "Cultur'Murmur" : scaleX 0.75 pour reproduire la chartre du logo --- */
.section-hero-title-plate {
  /* On retire les vestiges du temps où on simulait une condensation par font-stretch.
     La police Goudy Old Style n'a qu'une graisse regular ; on étrécit géométriquement. */
  font-weight: 600;
  font-stretch: normal;
  letter-spacing: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  display: inline-block;
}

/* --- 19/06/26 Modif margin haute 
de 5.5rem en 10.5rem pour device desktop 
Réajustement pour les autres devices --- */
span.section-hero-title-plate {
    margin: 10.5rem auto 1.5rem auto;
}

/* --- 3. Topbar : alignement strict des 3 zones + logo à 74px --- */
.topbar-inner {
  height: var(--topbar-h);
  /* Pas d'align-items ici : on gère le centrage dans chaque enfant via height:100% */
}

.brand,
.search-bar,
.topbar-actions {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0;
}

.brand-logo {
  height: 58px;          /* logo agrandi (validé) */
  width: auto;
  max-width: 280px;      /* permet le logo en pleine largeur après recadrage du viewBox */
  object-fit: contain;
  display: block;
  margin: auto 0;        /* centrage vertical garanti dans flex */
  align-self: center;
}

/* --- 4. Sous-titre "Les discrets chemins de la connaissance" : halo blanc en block --- */
.section-hero-subtitle {
  display: block;             /* prend toute la largeur, le halo s'étend sous le texte */
  margin: 1.5rem auto 4.5rem auto;      /* respiration verticale + centrage horizontal */
  max-width: max-content;     /* le halo ne s'étire pas au-delà du texte */
}

/* --- 5. Responsive : adaptations mobiles pour les nouveaux réglages --- */
@media (max-width: 720px) {
  .brand-logo {
    height: 56px;            /* logo plus petit sur mobile */
    max-width: 220px;
  }
  .section-hero-title-plate {
    transform: scaleX(0.82); /* moins étroit en petit écran (meilleure lisibilité) */
  }
}


/* ============================================================
   Cultur'Murmur — Correctif logo topbar — 24 mai 2026
   ============================================================
   Bug : le logo refuse de se centrer verticalement dans la topbar.
   
   Cause identifiée :
   - .topbar-inner a un padding 0.7rem 2rem (ligne ~73)
   - box-sizing: border-box (ligne 7) inclut ce padding dans la hauteur
   - Conséquence : zone interne réelle = 78px - 22.4px = 55.6px
   - Un logo de 58px (ou 74px) ne tient donc pas et s'aligne mal
   
   Correctif : passer le padding-vertical à 0 dans .topbar-inner.
   La hauteur du topbar reste 78px, mais TOUT cet espace est
   désormais disponible pour le contenu (logo, recherche, icônes).
   
   À COLLER À LA FIN de assets/css/style.css.
   ============================================================ */

.topbar-inner {
  padding: 0 2rem;       /* était 0.7rem 2rem — padding vertical supprimé */
  height: var(--topbar-h);
  /* tout le reste hérite des règles précédentes */
}

/* Sécurité : garantir que les 3 zones prennent toute la hauteur,
   ce qui permet à align-items:center de centrer correctement.
   Même règle que dans le patch précédent, redéclarée pour priorité. */
.brand,
.search-bar,
.topbar-actions {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0;
}

/* Logo : centrage forcé par marge auto verticale */
.brand-logo {
  height: 40px;          /* gardez cette valeur ou ajustez à 64/70/74 selon goût */
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  margin: auto 0;        /* clé du centrage vertical en flex */
}

/* ============================================================
   Cultur'Murmur — Correctif barre de recherche — 24 mai 2026
   ============================================================
   Suite du patch logo topbar : la barre de recherche héritait
   du height: 100% appliqué aux 3 zones, ce qui étirait son
   pavé blanc visuel sur toute la hauteur du topbar.
   
   Correctif : la barre de recherche garde sa hauteur naturelle
   et se centre via le align-items: center du parent topbar-inner.
   
   À COLLER À LA FIN de assets/css/style.css
   (après le patch-logo-topbar du même jour).
   ============================================================ */
 
/* Logo et icônes : confirmer height 100% (pour le centrage du logo) */
.brand,
.topbar-actions {
  height: 100%;
  display: flex;
  align-items: center;
}
 
/* Barre de recherche : annuler le height 100% qui étirait le pavé blanc.
   La barre garde une hauteur fixe et se centre grâce au align-items
   du .topbar-inner parent (qui est en grid). */
.search-bar {
  height: 46px;          /* hauteur naturelle du pavé blanc */
  align-self: center;    /* centre verticalement dans la cellule grid */
  /* Les autres propriétés (background, border, radius, padding…) 
     restent gérées par les règles antérieures, on n'y touche pas. */
}
 
/* Sécurité : s'assurer que .topbar-inner centre bien ses enfants */
.topbar-inner {
  align-items: center;
}

/* ============================================================
   Cultur'Murmur — Menu : position fixed + blur progressif
   26 mai 2026 — version stable
   ============================================================
   Le menu est désormais HORS du <header.topbar> (cf. header.php)
   pour permettre au backdrop-filter du ::before de fonctionner.
   Conséquence : on lui rend ici son ancrage avec position:fixed.
   ============================================================ */

.main-menu {
  position: fixed;             /* solidaire du scroll comme la topbar */
  top: var(--topbar-h);
  left: 0;
  right: 0;
  height: var(--menu-h);
  z-index: 999;                /* sous la topbar (qui est à 1000) */
  /* Les autres propriétés (display, background, pointer-events)
     viennent de la règle d'origine ligne 151. */
}

.main-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                 /* derrière le contenu du menu */
  pointer-events: none;
  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.7) 45%,
    rgb(0 0 0 / 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.7) 45%,
    rgb(0 0 0 / 0) 100%
  );
}

.main-menu .menu-list {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Cultur'Murmur — Hero plumes : PALIER 1
   Intégration paysage statique (calage du 04/06/2026)
   ============================================================
   À coller à la FIN de assets/css/style.css.
   
   Principe : surcharger les anciennes règles sans les supprimer.
   L'ancienne image plumes-1922x814.jpg reste téléversée comme
   fallback, mais masquée par .section-hero-plumes-old { display: none }
   
   Aucune animation à ce palier — composition statique pure.
   Les animations viendront aux paliers 3 et 4.
   ============================================================ */


/* ============================================================
   1. NEUTRALISER l'ancienne image (fallback gardé invisible)
   ============================================================ */

.section-hero-bg .section-hero-plumes-old {
  display: none;
}


/* ============================================================
   2. SCÈNE DES 4 PLUMES (remplace .section-hero-bg en flexbox)
   ============================================================
   La scène prend toute la zone du hero, sans flex centering
   (chaque plume se positionne en absolute).
   ============================================================ */

.section-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-plume {
  position: absolute;
  display: block;
  transform-origin: center center;
  mix-blend-mode: multiply;       /* fusion douce sur le fond crème */
}

/* === ARCHIVE PALIER 2.1 — 14/06/2026 ===
   Provenance : transitions individuelles plume par plume (palier 1.3).
   Devenues sans objet dès lors que la composition est unique et figée :
   les .hero-plume ne changent plus de left/top/width/transform/opacity
   au passage paysage <-> portrait. Le wrapper .hero-group porte
   désormais la seule transition active (voir PALIER 2.1 § transition).
   Convention : [* *] = /* */ originaux.
   ------------------------------------------------------------
   [* ============================================================
       gestion basic de la transition
       ============================================================ *]
   .hero-plume {
     transition:
       left 900ms ease-in-out,
       top 900ms ease-in-out,
       width 900ms ease-in-out,
       transform 900ms ease-in-out,
       opacity 600ms ease-in-out;
   }
   .hero-plume--a { transition-duration: 900ms;  }
   .hero-plume--b { transition-duration: 1100ms; }
   .hero-plume--c { transition-duration: 1300ms; }
   .hero-plume--d { transition-duration: 1000ms; }
   === FIN ARCHIVE === */

.hero-plume img {
  display: block;
  width: 100%;
  height: auto;
}


/* ============================================================
   3. CALAGE PAYSAGE (04/06/2026 16:56)
   Reproduit fidèlement le calage validé dans l'outil.
   ------------------------------------------------------------
   PALIER 1.3 (11/06/2026) — point 4
   Migration @media → html.is-landscape (pilotage JS).
   Motif : Safari mobile ignore les transitions CSS lors d'une
   bascule @media déclenchée par rotation physique. Le passage
   par une mutation de classe DOM rétablit les transitions sur
   tous les navigateurs.
   La classe est posée par hero-orchestrator.js (et pré-posée
   en synchrone via un script inline dans le <head>).
   Mapping commentaires : corrigé pour cohérence avec l'avenant
   du 8 juin (les commentaires antérieurs étaient inexacts).
   ============================================================ */

/* ============================================================
   PALIER 2.1 — 14/06/2026 — Composition unique figée
   ------------------------------------------------------------
   Les coordonnées paysage du 4 juin deviennent la composition
   unique du groupe. Le préfixe html.is-landscape est retiré :
   les 4 règles s'appliquent en paysage ET en portrait, à l'identique.
   L'adaptation au viewport (orientation × device) est portée par
   le wrapper .hero-group (cf. bloc PALIER 2.1 en pied de fichier).
   ------------------------------------------------------------
   PALIER 2.1bis — 15/06/2026 — Recalage isomorphique (Lot 1)
   ------------------------------------------------------------
   Constat : les % left/top/width des 4 plumes ne se conservent
   QUE si le containing block garde un aspect-ratio constant.
   Le wrapper .hero-group, jusqu'ici en inset:0 sur le stage,
   subissait toutes les déformations du viewport.
   Réparation : .hero-group basculé en aspect-ratio figé
   1922/814 (ratio du composite plumes-1922x814.jpg) en mode
   "contain" (cf. bloc PALIER 2.1 en pied de fichier).
   Conséquence : les % ci-dessous redeviennent isomorphes entre
   tous les viewports.
   ------------------------------------------------------------
   Coordonnées nouvelles (calage du 15/06/2026 13:33) :
   ============================================================ */

/* Emplacement A : plume-1-arquee */
.hero-plume--a {
  left: 45%; top: -20%; width: 42%;
  transform: rotate(-13deg) scale(0.62);
  opacity: 0.77; z-index: 1;
}

/* Emplacement B : plume-3-couchee */
.hero-plume--b {
  left: 62%; top: -3%; width: 36%;
  transform: rotate(28deg) scale(0.94);
  opacity: 1; z-index: 2;
}

/* Emplacement C : plume-4-sombre */
.hero-plume--c {
  left: 47.5%; top: 40.5%; width: 25%;
  transform: rotate(127deg) scale(0.65);
  opacity: 1; z-index: 4;
}

/* Emplacement D : plume-5-legere */
.hero-plume--d {
  left: 45%; top: 47.5%; width: 14%;
  transform: rotate(-81deg) scale(1.36);
  opacity: 0.99; z-index: 1;
}

/* === ARCHIVE PALIER 2.1bis — 15/06/2026 ===
   Provenance : composition unique du PALIER 2.1 (14/06/2026),
   issue du calage paysage du 4 juin via l'outil interactif.
   Devenue obsolète après le retour visuel du 15 juin et la
   bascule du wrapper en aspect-ratio figé. Conservées pour
   mémoire et réversibilité éventuelle.
   ------------------------------------------------------------
   [* Emplacement A : plume-1-arquee *]
   .hero-plume--a {
     left: 48.5%; top: -8.5%; width: 36.5%;
     transform: rotate(-10deg) scale(0.74);
     opacity: 1; z-index: 2;
   }
   [* Emplacement B : plume-3-couchee *]
   .hero-plume--b {
     left: 59%; top: -11.5%; width: 41.5%;
     transform: rotate(26deg) scale(0.81);
     opacity: 1; z-index: 1;
   }
   [* Emplacement C : plume-4-sombre *]
   .hero-plume--c {
     left: 58%; top: 59.5%; width: 9%;
     transform: rotate(115deg) scale(1.78);
     opacity: 1; z-index: 3;
   }
   [* Emplacement D : plume-5-legere *]
   .hero-plume--d {
     left: 44.5%; top: 36.5%; width: 17%;
     transform: rotate(-79deg) scale(1.10);
     opacity: 1; z-index: 4;
   }
   === FIN ARCHIVE === */

/* === ARCHIVE PALIER 2.1 — 14/06/2026 ===
   Provenance : règles paysage préfixées html.is-landscape
   (palier 1.3 point 4 — migration @media -> classe DOM).
   Conservées pour mémoire : ces valeurs sont strictement
   identiques à la composition unique ci-dessus, le préfixe
   d'orientation a simplement été retiré.
   Convention : [* *] = /* */ originaux.
   ------------------------------------------------------------
   [* Emplacement A : plume-1-arquee *]
   html.is-landscape .hero-plume--a {
     left: 48.5%; top: -8.5%; width: 36.5%;
     transform: rotate(-10deg) scale(0.74);
     opacity: 1; z-index: 2;
   }
   [* Emplacement B : plume-3-couchee *]
   html.is-landscape .hero-plume--b {
     left: 59%; top: -11.5%; width: 41.5%;
     transform: rotate(26deg) scale(0.81);
     opacity: 1; z-index: 1;
   }
   [* Emplacement C : plume-4-sombre *]
   html.is-landscape .hero-plume--c {
     left: 58%; top: 59.5%; width: 9%;
     transform: rotate(115deg) scale(1.78);
     opacity: 1; z-index: 3;
   }
   [* Emplacement D : plume-5-legere *]
   html.is-landscape .hero-plume--d {
     left: 44.5%; top: 36.5%; width: 17%;
     transform: rotate(-79deg) scale(1.10);
     opacity: 1; z-index: 4;
   }
   === FIN ARCHIVE === */


/* === ARCHIVE PALIER 2.1 — 14/06/2026 ===
   Provenance : bloc 4. CALAGE PORTRAIT (palier 1.3 points 1, 2, 4 —
   stabilisé 08/06/2026, migré classe DOM le 11/06/2026).
   Devenu sans objet : composition unique paysage actée. Plume C
   ne lit plus les coordonnées du cartouche, les 4 plumes ne
   reçoivent plus de valeurs spécifiques en portrait. Le clip-path
   et overflow:visible portrait sont reconstruits dans le PALIER 2.1.
   Convention : [* *] = /* */ originaux.
   ------------------------------------------------------------
   [* --- Débordement bas (point 2) --- *]
   html.is-portrait .section-hero,
   html.is-portrait .section-hero-stage {
     overflow: visible;
     clip-path: polygon(0% 0%, 100% 0%, 100% 200%, 0% 200%);
   }
   [* --- Offsets fins pour .hero-plume--c (point 1) --- *]
   html.is-portrait .section-hero-stage {
     --plume-c-offset-x: -6%;
     --plume-c-offset-y: -12%;
   }
   [* Emplacement A : plume-1-arquee *]
   html.is-portrait .hero-plume--a {
     left: 65.5%; top: 23%; width: 60.5%;
     transform-origin: center center;
     transform: rotate(-47deg) scale(1.7, 1.7);
     opacity: 0.47; z-index: 3;
   }
   [* Emplacement B : plume-3-couchee *]
   html.is-portrait .hero-plume--b {
     left: 110%; top: 25%; width: 25%;
     transform-origin: center center;
     transform: rotate(-15deg) scale(5.00, 5.00);
     opacity: 1; z-index: 1;
   }
   [* Emplacement C : plume-4-sombre (4e plume sur cartouche, point 1)
      Calcul dynamique via --cartouche-left/-top (mesurés en JS) +
      offsets fins --plume-c-offset-x/-y. *]
   html.is-portrait .hero-plume--c {
     left: calc(var(--cartouche-left, 19%) + var(--plume-c-offset-x, -6%));
     top:  calc(var(--cartouche-top,  30%) + var(--plume-c-offset-y, -12%));
     width: 15%;
     transform-origin: center center;
     transform: rotate(-109deg) scale(1.48, 1.48);
     opacity: 1.00; z-index: 5;
   }
   [* Emplacement D : plume-5-legere *]
   html.is-portrait .hero-plume--d {
     left: 29.5%; top: 80.5%; width: 44.5%;
     transform-origin: center center;
     transform: rotate(-60deg) scale(-1.73, 1.73);
     opacity: 1.00; z-index: 3;
   }
   === FIN ARCHIVE === */


/* ============================================================
   Cultur'Murmur — PATCH PALIER 1.3 — 11 juin 2026
   ============================================================
   Micro-ajustements clôturant la sous-phase 1.3 :
   • Point 2 : élévation .section-inner pour préserver la
     lisibilité du texte sous la plume D débordante
   • Point 3 : réorganisation topbar (loupe → séparateur → pictos)
              + abaissement de la topbar mobile (130 → 64 px)
   • Point 4 : harmonisation .search-trigger au gabarit des pictos
   ============================================================ */


/* ============================================================
   POINT 2 — Élévation des contenus de section
   ------------------------------------------------------------
   Crée un contexte d'empilement sur .section-inner pour que les
   éléments visuels débordants (plume D portrait) passent sous
   le texte mais sur le fond de la section suivante.
   ============================================================ */
.section-inner {
  position: relative;
  z-index: 2;
}


/* ============================================================
   POINT 3 — Topbar : passage en flex + séparateur
   ------------------------------------------------------------
   La grille à 3 colonnes (auto 1fr auto) supposait une cellule
   centrale dédiée à l'ancienne barre de recherche. La loupe
   ayant migré dans .topbar-actions, on simplifie en flex.
   Bénéfice : résout en passant le bug du logo absent sur mobile
   (cellule grid à hauteur indéterminée en grid-template-rows
   "auto auto").
   ============================================================ */
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* max-width, margin, padding, height : conservés des règles antérieures */
}

/* Le bloc actions reste flex, déjà défini ligne ~133 */
.topbar-actions {
  gap: 0.4rem;
}


/* ============================================================
   POINT 3 — Harmonisation .search-trigger
   ------------------------------------------------------------
   Aligne dimensions, couleurs et hover sur les .action-link
   pour une rangée droite parfaitement uniforme.
   ============================================================ */
.search-trigger {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--cm-brown);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease),
              color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.search-trigger:hover,
.search-trigger:focus-visible {
  background: var(--cm-gold-soft);
  color: var(--cm-brown-dark);
  transform: translateY(-1px);
  outline: none;
}


/* ============================================================
   POINT 3 — Séparateur visuel entre loupe et pictos
   ------------------------------------------------------------
   1 px de large × 22 px de haut (= gabarit SVG des pictos),
   brun à 30 % d'opacité, marges symétriques.
   ============================================================ */
.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(90, 64, 48, 0.30);
  margin: 0 0.55rem;
  align-self: center;
  flex-shrink: 0;
}


/* ============================================================
   POINT 3 — Topbar mobile : abaissement et adaptation
   ------------------------------------------------------------
   L'ancienne hauteur 130 px était calée pour accueillir la
   barre de recherche sur une 2e ligne du grid. Cette barre
   n'existe plus depuis le passage à l'icône loupe + overlay.
   On revient à une ligne unique, hauteur ramassée à 64 px.
   ------------------------------------------------------------
   NB : les anciennes règles grid-template-areas "brand actions"
   / "search search" du bloc @media (max-width: 720px) — lignes
   430-454 — deviennent obsolètes mais sont conservées intactes
   dans le fichier ; le bloc flex ci-dessous les surcharge.
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --topbar-h: 64px;   /* était 130px */
    --menu-h:   40px;   /* était 44px  */
  }
  .topbar-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    height: var(--topbar-h);
    padding: 0 1rem;
    gap: 0.5rem;
  }
  .brand          { grid-area: auto; height: auto; align-self: center; }
  .topbar-actions { grid-area: auto; gap: 0.2rem; }
  .brand-logo     { height: 44px; max-width: 200px; }
  .action-link    { width: 36px; height: 36px; }
  .search-trigger { width: 36px; height: 36px; }
  .topbar-sep     { height: 18px; margin: 0 0.35rem; }
}


/* === ARCHIVE PALIER 2.1 — 14/06/2026 ===
   Provenance : bloc PALIER 2.0 — 13/06/2026 (Hero portrait statique
   multi-orientations). Conservé en intégralité pour mémoire :
   15 variables --hero-group-*-{mobile|tablet|desktop} + 4 ratios
   réservés + wrapper .hero-group inerte + 3 règles portrait-only +
   extension clip-path. Remplacé par le bloc PALIER 2.1 ci-dessous
   (matrice 2x3 orientation × device, 30 variables, groupe actif).
   Convention : [* *] = /* */ originaux.
   ------------------------------------------------------------
   :root {
     [* Ratio groupe/cartouche (réservé, init neutre) *]
     --hero-group-ratio-landscape:        1.0;
     --hero-group-ratio-portrait-mobile:  1.0;
     --hero-group-ratio-portrait-tablet:  1.0;
     --hero-group-ratio-portrait-desktop: 1.0;

     [* Portrait MOBILE (≤ 600px) *]
     --hero-group-offset-top-mobile:    0px;
     --hero-group-offset-bottom-mobile: 0px;
     --hero-group-rotate-mobile:        0deg;
     --hero-group-scale-mobile:         1;
     --hero-group-opacity-mobile:       1;

     [* Portrait TABLET (601-1024px) *]
     --hero-group-offset-top-tablet:    0px;
     --hero-group-offset-bottom-tablet: 0px;
     --hero-group-rotate-tablet:        0deg;
     --hero-group-scale-tablet:         1;
     --hero-group-opacity-tablet:       1;

     [* Portrait DESKTOP (> 1024px) *]
     --hero-group-offset-top-desktop:    0px;
     --hero-group-offset-bottom-desktop: 0px;
     --hero-group-rotate-desktop:        0deg;
     --hero-group-scale-desktop:         1;
     --hero-group-opacity-desktop:       1;
   }
   .hero-group {
     position: absolute; inset: 0;
     pointer-events: none;
     transform-origin: center center;
   }
   html.is-portrait.portrait--mobile  .hero-group { ... }
   html.is-portrait.portrait--tablet  .hero-group { ... }
   html.is-portrait.portrait--desktop .hero-group { ... }
   html.is-portrait .section-hero,
   html.is-portrait .section-hero-stage {
     clip-path: polygon(0% -100%, 100% -100%, 100% 200%, 0% 200%);
   }
   === FIN ARCHIVE === */


/* ============================================================
   Cultur'Murmur — PALIER 2.1 — 14 juin 2026
                + PALIER 2.1bis — 15 juin 2026 (Lot 1)
   Hero : composition unique + wrapper actif multi-orientations
   ============================================================
   Périmètre :
   • Composition unique figée (coordonnées paysage du 4 juin,
     préfixe d'orientation retiré, cf. § "Composition unique"
     plus haut dans ce fichier).
     PALIER 2.1bis : coordonnées recalées le 15 juin (cf. § plus
     haut), wrapper basculé en aspect-ratio 1922/814 mode
     "contain" (réparation isomorphique).
   • Wrapper .hero-group actif : porte les transformations
     globales d'adaptation au viewport.
   • Matrice 2 × 3 (orientation × device) = 6 cellules.
     5 variables par cellule (offset-x, offset-y, rotate, scale,
     opacity) = 30 variables au total.
     Extension à matrice 2 × 4 (ajout palier laptop) prévue au
     Lot 2 — non implémentée dans le 2.1bis.
   • Transition unique portée par .hero-group (les transitions
     individuelles plume par plume du palier 1.3 sont archivées).
   • Clip-path portrait : débordement haut (sous topbar) et bas
     (plume D sur section #02) autorisés. Clipping latéral
     préservé.

   Lecture β maintenue : toutes les variables initialisées à neutre
   (0%, 1, 0deg). Aucune régression visuelle au déploiement.
   La composition paysage actuelle se reconduit telle quelle en
   portrait, à ajuster manuellement par les variables une fois
   visualisée sur cible.

   Doctrine Lecture 2 (15/06/2026) : en portrait, l'aspect-ratio
   figé du wrapper produit un "letterbox" vertical par défaut
   (composition centrée, vides haut/bas). Le calage portrait
   passe par scale > 1 (cellule portrait-*-scale) pour remplir
   l'écran, débordement latéral masqué par le clip-path du stage,
   puis ajustement fin via offset-x/y et rotate.

   Convention de nommage :
   --hero-group-{orientation}-{device}-{propriété}
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS — 30 valeurs initiées à neutre
   ============================================================ */
:root {

  /* --- PAYSAGE — MOBILE (≤ 900px) --- */
  --hero-group-landscape-mobile-offset-x: 0%;
  --hero-group-landscape-mobile-offset-y: 0%;
  --hero-group-landscape-mobile-rotate:   0deg;
  --hero-group-landscape-mobile-scale:    1;
  --hero-group-landscape-mobile-opacity:  1;

  /* --- PAYSAGE — TABLET (901-1280px) --- */
  --hero-group-landscape-tablet-offset-x: 0%;
  --hero-group-landscape-tablet-offset-y: 0%;
  --hero-group-landscape-tablet-rotate:   0deg;
  --hero-group-landscape-tablet-scale:    1;
  --hero-group-landscape-tablet-opacity:  1;

  /* --- PAYSAGE — DESKTOP (> 1280px) --- */
  --hero-group-landscape-desktop-offset-x: 0%;
  --hero-group-landscape-desktop-offset-y: 0%;
  --hero-group-landscape-desktop-rotate:   0deg;
  --hero-group-landscape-desktop-scale:    1;
  --hero-group-landscape-desktop-opacity:  1;

  /* --- PORTRAIT — MOBILE (≤ 600px) --- */
  --hero-group-portrait-mobile-offset-x: 0%;
  --hero-group-portrait-mobile-offset-y: 0%;
  --hero-group-portrait-mobile-rotate:   0deg;
  --hero-group-portrait-mobile-scale:    1;
  --hero-group-portrait-mobile-opacity:  1;

  /* --- PORTRAIT — TABLET (601-1024px) --- */
  --hero-group-portrait-tablet-offset-x: 0%;
  --hero-group-portrait-tablet-offset-y: 0%;
  --hero-group-portrait-tablet-rotate:   0deg;
  --hero-group-portrait-tablet-scale:    1;
  --hero-group-portrait-tablet-opacity:  1;

  /* --- PORTRAIT — DESKTOP (> 1024px) --- */
  --hero-group-portrait-desktop-offset-x: 0%;
  --hero-group-portrait-desktop-offset-y: 0%;
  --hero-group-portrait-desktop-rotate:   0deg;
  --hero-group-portrait-desktop-scale:    1;
  --hero-group-portrait-desktop-opacity:  1;
}


/* ============================================================
   2. WRAPPER .hero-group — base structurelle + transition
   ------------------------------------------------------------
   PALIER 2.1bis — 15/06/2026 :
   Le wrapper enveloppe les 4 plumes au sein de .section-hero-stage,
   en aspect-ratio figé 1922/814 (ratio du composite de référence
   plumes-1922x814.jpg). Le quadruplet inset:0 + margin:auto +
   max-width/max-height:100% + aspect-ratio produit un comportement
   « object-fit: contain » en CSS pur : le wrapper est le plus
   grand rectangle 1922:814 qui s'inscrit dans le stage, centré.
   Les positions absolues en % des 4 plumes deviennent isomorphes
   entre tous les viewports.
   La transition unique de groupe remplace les transitions
   individuelles plume par plume (archivées).
   ============================================================ */
.hero-group {
  position: absolute;
  inset: 0;
  margin: auto;
  aspect-ratio: 1922 / 814;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  transform-origin: center center;
  transition:
    transform 800ms ease-in-out,
    opacity   600ms ease-in-out;
}


/* ============================================================
	Ajustement manuel du groupe et de chaque plume 18/06/2026
.hero-plume--b, .hero-plume--a, .hero-plume--c, .hero-plume--d
 ------------------------------------------------------------ */
/* Positions calées — 15/06/2026 13:33:45 */

/* Emplacement B : plume-3-couchee */
.hero-plume--b {
  left: 62%;
  top: -3%;
  width: 36%;
  transform-origin: center center;
  transform: rotate(28deg) scale(0.94, 0.94);
  opacity: 1.00;
  z-index: 2;
}

/* Emplacement A : plume-1-arquee */
.hero-plume--a {
  left: 45.5%;/* ant —> 45 */
  top: -20%;
  width: 42%;
  transform-origin: center center;
  transform: rotate(-19deg) scale(0.62, 0.62);/* ant —> -13deg*/
  opacity: 0.77;
  z-index: 1;
}

/* Emplacement C : plume-4-sombre */
.hero-plume--c {
  left: 47.5%;
  top: 69.5%; /* ant—> 49.5*/
  width: 25%;
  transform-origin: center center;
  transform: rotate(120deg) scale(0.95, 0.95); /*  ant —> 127deg , 0.65*/
  opacity: 1.00;
  z-index: 4;
}

/* Emplacement D : plume-5-legere */
.hero-plume--d {
  left: 45%;
  top: 47.5%;
  width: 14%;
  transform-origin: center center;
  transform: rotate(-81deg) scale(1.36, 1.36);
  opacity: 1; /* ant —> 0.99 */
  z-index: 1;
}
 /* 4 plumes regroupées - Ajout rotation -10deg */
.hero-group {
    position: absolute;
    inset: 0;
    margin: auto;
    aspect-ratio: 1922 / 814;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    rotate: -10deg;
    pointer-events: none;
    transform-origin: center center;
    transition: transform 800ms ease-in-out, opacity 600ms ease-in-out;
}


/* === ARCHIVE PALIER 2.1bis — 15/06/2026 ===
   Provenance : .hero-group du PALIER 2.1 (14/06/2026), en mode
   inset:0 sans aspect-ratio (épousait le stage et déformait les
   % des plumes selon le viewport).
   ------------------------------------------------------------
   .hero-group {
     position: absolute;
     inset: 0;
     pointer-events: none;
     transform-origin: center center;
     transition:
       transform 800ms ease-in-out,
       opacity   600ms ease-in-out;
   }
   === FIN ARCHIVE === */


/* ============================================================
   3. RÈGLES PAR CELLULE — matrice 2 × 3
   ------------------------------------------------------------
   Activation par sélecteurs combinés
   html.is-{landscape|portrait}.{landscape|portrait}--{device}
   Les classes sont posées en permanence par hero-orchestrator.js
   (et pré-posées en synchrone par le script inline anti-FOUC
   dans includes/header.php). Une seule cellule est active à
   l'instant t. Les seuils sont commentés dans la cellule
   correspondante.
   ============================================================ */

/* Paysage — MOBILE (≤ 900px) */
html.is-landscape.landscape--mobile .hero-group {
  transform:
    translate(var(--hero-group-landscape-mobile-offset-x),
              var(--hero-group-landscape-mobile-offset-y))
    rotate(var(--hero-group-landscape-mobile-rotate))
    scale(var(--hero-group-landscape-mobile-scale));
  opacity: var(--hero-group-landscape-mobile-opacity);
}

/* Paysage — TABLET (901-1280px) */
html.is-landscape.landscape--tablet .hero-group {
  transform:
    translate(var(--hero-group-landscape-tablet-offset-x),
              var(--hero-group-landscape-tablet-offset-y))
    rotate(var(--hero-group-landscape-tablet-rotate))
    scale(var(--hero-group-landscape-tablet-scale));
  opacity: var(--hero-group-landscape-tablet-opacity);
}

/* Paysage — DESKTOP (> 1280px) */
html.is-landscape.landscape--desktop .hero-group {
  transform:
    translate(var(--hero-group-landscape-desktop-offset-x),
              var(--hero-group-landscape-desktop-offset-y))
    rotate(var(--hero-group-landscape-desktop-rotate))
    scale(var(--hero-group-landscape-desktop-scale));
  opacity: var(--hero-group-landscape-desktop-opacity);
}

/* Portrait — MOBILE (≤ 600px) */
html.is-portrait.portrait--mobile .hero-group {
  transform:
    translate(var(--hero-group-portrait-mobile-offset-x),
              var(--hero-group-portrait-mobile-offset-y))
    rotate(var(--hero-group-portrait-mobile-rotate))
    scale(var(--hero-group-portrait-mobile-scale));
  opacity: var(--hero-group-portrait-mobile-opacity);
}

/* Portrait — TABLET (601-1024px) */
html.is-portrait.portrait--tablet .hero-group {
  transform:
    translate(var(--hero-group-portrait-tablet-offset-x),
              var(--hero-group-portrait-tablet-offset-y))
    rotate(var(--hero-group-portrait-tablet-rotate))
    scale(var(--hero-group-portrait-tablet-scale));
  opacity: var(--hero-group-portrait-tablet-opacity);
}

/* Portrait — DESKTOP (> 1024px) */
html.is-portrait.portrait--desktop .hero-group {
  transform:
    translate(var(--hero-group-portrait-desktop-offset-x),
              var(--hero-group-portrait-desktop-offset-y))
    rotate(var(--hero-group-portrait-desktop-rotate))
    scale(var(--hero-group-portrait-desktop-scale));
  opacity: var(--hero-group-portrait-desktop-opacity);
}


/* ============================================================
   4. CLIP-PATH PORTRAIT — débordements haut + bas autorisés
   ------------------------------------------------------------
   Le wrapper et ses plumes peuvent monter sous le topbar (le blur
   de la topbar reprend sa fonction sur fond hero) et déborder en
   bas sur la section #02. Clipping latéral préservé : la plume B
   qui sort à droite reste invisible.
   ============================================================ */
html.is-portrait .section-hero,
html.is-portrait .section-hero-stage {
  overflow: visible;
  clip-path: polygon(0% -100%, 100% -100%, 100% 200%, 0% 200%);
}