/* ==========================================================================
   MAESTRO — Feuille de styles principale

   Sommaire
   1. Reset & base
   2. Boutons — réglages communs (hover en zoom, sans rotation)
   3. Hero — soleil & parallax
   4. Nuages
   5. Corps de page (scroll-body)
   6. Logos partenaires
      6.1 Playlist Spotify
      6.2 Section "Stay Tuned" (socials)
   7. Eric de Roch
   8. Bannière anges
   9. Section Déclaration (cadre baroque)
      9.1 Structure du cadre
      9.2 Sélecteur de langue
      9.3 Contenu texte
      9.4 Boutons CTA (Newsletter / Discord)
      9.5 Bannière boutiques
   10. Grands écrans (2560px+)
   11. Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Rebord blanc autour de toute la page : border réel sur le body
   (et non un overlay fixe), possible car aucun élément du layout
   n'utilise de 100vw "brut" — tout est en % / width:100% relatif
   au body, donc box-sizing:border-box absorbe le border sans
   rien faire déborder ni couper. */
body {
  box-sizing: border-box;
  /* border: 16px solid #fff; */
  min-height: 100vh;

  /* Fond commun à .declaration-section et .scroll-body-frame : posé une
     seule fois ici plutôt que dupliqué dans chaque section, pour garantir
     la continuité du motif à la jonction des deux (pas de raccord/décalage
     à gérer). Les deux sections restent en background: transparent (ou
     sans background défini) pour laisser transparaître celui-ci à travers
     leurs zones ajourées. Décalé de 40px en haut pour ne pas tomber dans
     la partie transparente du tout début (zone hero / bord du cadre). */
  background-image: url('../img/bg_1170x512.png');
  background-repeat: repeat-y;
  background-position: top 40px center;
  background-size: 100% auto;
}

@media (max-width: 768px) {
  body { border-width: 8px; }
}

/* --------------------------------------------------------------------------
   2. Boutons — réglages communs
   Un seul jeu de variables pour tous les boutons du site
   (.decl-cta-btn, .footer-newsletter button) :
   hover en zoom uniquement, sans rotation (pour l'instant).
   -------------------------------------------------------------------------- */
:root {
  --btn-hover-scale: 1.06;
  --btn-active-scale: 0.98;
  --btn-transition: transform 0.25s ease;
}

/* --------------------------------------------------------------------------
   3. Hero — soleil & parallax
   -------------------------------------------------------------------------- */

/* Zone de scroll pour le parallax (200vh = 100vh visible + 100vh de scroll) */
.hero-wrapper {
  position: relative;
  overflow: hidden; /* empêche tout débordement (nuages, etc.) hors de la zone hero */
  /* height gérée par JS */
}

/* Conteneur sticky : hauteur = celle du wrapper (= sunH, géré par JS) */
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100%;
  overflow: hidden;
}

/*
  Soleil : aligné en haut, centré horizontalement.
  Largeur = 100vw (desktop : rayons remplissent la largeur).
  Sur mobile portrait l'image étant en paysage (1233x848),
  100vw donne une hauteur de 100vw/1.454 ce qui est correct.
*/
#sunImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;   /* 100% du sticky = 100vw */
  height: auto;  /* ratio préservé automatiquement */
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Nuages
   -------------------------------------------------------------------------- */
.cloud-left,
.cloud-right {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 8px 12px rgba(60, 30, 10, 0.5));
}

.cloud-left {
  animation: cloudFloatL 9s ease-in-out infinite;
}

.cloud-right {
  animation: cloudFloatR 11s ease-in-out infinite;
}

.cloud-left img,
.cloud-right img {
  width: 100%;
  height: auto;
  display: block;
}

#cloudLeft  { z-index: 3; }
#cloudRight { z-index: 2; }

@keyframes cloudFloatL {
  0%   { transform: translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
  25%  { transform: translateX(calc(var(--cloud-tx, 0px) + 8px)) translateY(-7px); }
  50%  { transform: translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(-12px); }
  75%  { transform: translateX(calc(var(--cloud-tx, 0px) - 8px)) translateY(-7px); }
  100% { transform: translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
}

@keyframes cloudFloatR {
  0%   { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
  25%  { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) - 8px)) translateY(-6px); }
  50%  { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(-10px); }
  75%  { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 8px)) translateY(-6px); }
  100% { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
}

@media (max-width: 768px) {
  @keyframes cloudFloatL {
    0%   { transform: translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
    25%  { transform: translateX(calc(var(--cloud-tx, 0px) + 3px)) translateY(-3px); }
    50%  { transform: translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(-5px); }
    75%  { transform: translateX(calc(var(--cloud-tx, 0px) - 3px)) translateY(-3px); }
    100% { transform: translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
  }

  @keyframes cloudFloatR {
    0%   { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
    25%  { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) - 3px)) translateY(-2px); }
    50%  { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(-4px); }
    75%  { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 3px)) translateY(-2px); }
    100% { transform: scaleX(-1) translateX(calc(var(--cloud-tx, 0px) + 0px)) translateY(0px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-left, .cloud-right { will-change: auto; }
}

/* --------------------------------------------------------------------------
   5. Corps de page (scroll-body)
   -------------------------------------------------------------------------- */
.scroll-body {
  position: relative;
  z-index: 1;
  /* padding: 0vh 8vw; */
  padding: 0vh 0vw;
  color: #c8b89a;
  font-family: 'Georgia', serif;
  text-align: center;
}

.scroll-body p {
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.9;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  opacity: 0.8;
}

/* — Cadre scroll-body — même logique que .decl-frame : fond répété
   verticalement (column_mid_02.png, largeur ref. 1232px, cohérente avec
   column_mid/top/bot) + capuchon de fin (column_bot_02.png). */
.scroll-body-frame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.scroll-body-mid {
    flex: 1 1 0%;
    --repeat-count: 2;

    background-image: url('../img/column_mid_02.png');
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 100% calc(100% / var(--repeat-count));
	min-height: 451px !important;
}

@media (max-width: 768px) {
  .scroll-body-mid {
	padding: 0vh 8vw;
  }
  .scroll-body-mid {
    --repeat-count: 3;
  }
}
.scroll-body-bot {
  width: 100%;
  /* Ratio de column_bot_02.png : 350/1232 = 28.41% */
  padding-bottom: 28.41%;
  background: url('../img/column_bot_02.png') center bottom / 100% auto no-repeat;
  flex-shrink: 0;
}


/* — Divider ornemental entre logos / Spotify / Stay Tuned — */
.section-divider {
  display: block;
  width: 50%;
  height: auto;
  margin: clamp(2rem, 6vh, 3.5rem) auto;
  opacity: 0.9;
}

@media (max-width: 520px) {
  .section-divider {
    width: 33.333%;
    margin: 1.5rem auto;
  }
}

/* --------------------------------------------------------------------------
   6. Logos partenaires
   Le cadre baroque circulaire est déjà intégré dans chaque image logo
   (fournie ainsi par le client), donc un seul <img> par item.
   Flexbox, toujours 1 seule ligne de 5 : sur mobile les items rétrécissent
   (largeur en clamp()) plutôt que de passer à la ligne, pour garder les
   5 logos alignés quel que soit le device (PC ou mobile).
   -------------------------------------------------------------------------- */
.logos-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 3vw, 2rem);
  max-width: 1100px;
  width: 100%;
  margin: 12vw auto 0;
  padding: 0;
}

.logo-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 140px;
  width: clamp(48px, 17vw, 140px);
  max-width: 140px;
  aspect-ratio: 1 / 1;
  transform: translateY(var(--arc-y, 0px));
  transition: var(--btn-transition), filter 0.25s ease;
}

/* Léger arc de cercle : les 2 logos extérieurs descendent le plus,
   les 2 intermédiaires un peu moins, celui du centre reste à sa
   place -> effet d'arche douce, cohérent avec le style "médaillons"
   des icônes. Valeurs en vw (plafonnées par clamp) pour suivre la
   même échelle que la taille des logos eux-mêmes. */
.logo-item:nth-child(1),
.logo-item:nth-child(5) {
  --arc-y: clamp(10px, 3.5vw, 28px);
}

.logo-item:nth-child(2),
.logo-item:nth-child(4) {
  --arc-y: clamp(4px, 1.4vw, 12px);
}

.logo-item:nth-child(3) {
  --arc-y: 0px;
}

.logo-inner {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.logo-item:hover {
  transform: translateY(var(--arc-y, 0px)) scale(var(--btn-hover-scale));
  filter: drop-shadow(0 6px 12px rgba(60, 30, 10, 0.5));
}

.logo-item:active {
  transform: translateY(var(--arc-y, 0px)) scale(var(--btn-active-scale));
  filter: drop-shadow(0 6px 12px rgba(60, 30, 10, 0.5));
}

/* — 6.1 Playlist Spotify — */
.spotify-embed-wrapper {
  max-width: 900px; /* Augmenté de 700px à 900px pour une version plus large sur PC */
  width: 100%;
  margin: 6vh auto 0;
  /* padding: 0 8vw; */
}

/* Cadre baroque (box_music_player.png) autour du player Spotify.
   aspect-ratio verrouille les proportions de l'image (1058x432) pour que
   le cadre reste net à toutes les tailles ; le padding en % (calculé sur
   la largeur du cadre — comportement standard CSS, y compris pour
   top/bottom) replace l'iframe exactement dans la zone sombre du visuel,
   comme sur la maquette. */
.spotify-frame {
  position: relative;
  width: 100%;
  /* aspect-ratio: 1058 / 432; */
  aspect-ratio: 16 / 9;
  background-image: url(../img/box_music_player_mobile.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* padding: 10% 12.6% 10% 12.6%;   */
  padding: 8%;  
  box-sizing: border-box;
}

.spotify-frame iframe {
  display: block;
  width: 100%;
  /* height: 100%; */
  border: 0;
  border-radius: 12px;
  transition: height 0.2s ease; /* Transition douce lors du changement de taille */
}

/* Écrans intermédiaires / Tablettes */
@media (max-width: 768px) {
  .spotify-embed-wrapper {
    max-width: 700px; /* Reprend une taille standard sur tablette */
  }
	.spotify-frame {
		aspect-ratio: auto; /* le ratio 1058/432 ne convient plus, l'iframe est plus haute que large */
		padding: 24px 16px !important;
	}

	.spotify-frame iframe {
		/* height: 380px; /* hauteur fixe = celle du widget playlist Spotify en mode étendu */
		height: 152px; /* hauteur fixe = celle du widget playlist Spotify en mode étendu */
	}
}

/* Petits écrans / Mobiles */
@media (max-width: 520px) {
  .spotify-embed-wrapper {
    margin-top: 4vh;
    /* padding: 0 6vw; */
  }
  
	.spotify-frame {
		aspect-ratio: auto;
		padding: 20px 12px !important;
	}

	.spotify-frame iframe {
		height: 152px !important;
		max-height: 152px !important;
	}
  .scroll-body { 
  padding: 0vh 0vw !important; 
  /* height: 320px; */
  }
  .logos-grid {
	margin: 13vw auto 0;
  }
}

/* --------------------------------------------------------------------------
   6.2 Section "Stay Tuned" — bandeau socials
   -------------------------------------------------------------------------- */
.staytuned-section {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #c8b89a;
}

.staytuned-eyebrow {
  font-family: 'Georgia', serif;
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9c8a6e;
  opacity: 0.85;
  margin-bottom: 0.6rem;
}

.staytuned-title {
  font-family: 'Georgia', serif;
  /* font-weight: 600; */
  font-weight: normal;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.06em;
  color: #3c2d19;
  margin-bottom: 2.4rem;
}
/* — Bannière communauté — même logique que .store-banner : le ruban
   (community_banner.png, ratio 192/1097 ≈ 17.5%) sert de cadre, le
   titre est en overlay, centré sur la partie plate du ruban. */
.staytuned-banner {
  position: relative;
  width: clamp(280px, 100vw, 900px);
  max-width: 100%;
  margin: 0 auto 2.4rem;
  filter: drop-shadow(0 8px 8px rgba(60, 30, 10, 0.5));
}

.staytuned-banner-bg {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.staytuned-banner .staytuned-title {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  margin: 0;
  padding: 0;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 768px) {
  .staytuned-banner .staytuned-title {
    font-size: clamp(1.1rem, 3.5vw, 1.8rem);
  }
}

@media (max-width: 520px) {
  .staytuned-banner {
    width: clamp(220px, 90vw, 380px);
  }

  .staytuned-banner .staytuned-title {
    width: 90%;
    font-size: clamp(0.85rem, 4.6vw, 1.15rem);
  }
}

.staytuned-socials {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 3vw, 2rem);
    max-width: 1100px;
    width: 100%;
    margin: 0vh auto 0;
    padding: 0 4vw;
}

.staytuned-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 140px;
  width: clamp(48px, 17vw, 140px);
  max-width: 140px;
  aspect-ratio: 1 / 1;
  color: #c8b89a;
  transform: translateY(var(--arc-y, 0px));
  transition: var(--btn-transition), filter 0.25s ease;
}

/* Arc inversé (vers le bas) par rapport à .logo-item : mêmes paliers,
   signe opposé. */
.staytuned-icon:nth-child(1),
.staytuned-icon:nth-child(5) {
  --arc-y: clamp(-16px, -2vw, -6px);
}

.staytuned-icon:nth-child(2),
.staytuned-icon:nth-child(4) {
  --arc-y: clamp(-6px, -0.8vw, -2px);
}

.staytuned-icon:nth-child(3) {
  --arc-y: 0px;
}

.staytuned-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.staytuned-icon:hover {
  transform: translateY(var(--arc-y, 0px)) scale(var(--btn-hover-scale));
  filter: drop-shadow(0 6px 12px rgba(60, 30, 10, 0.5));
}

.staytuned-icon:active {
  transform: translateY(var(--arc-y, 0px)) scale(var(--btn-active-scale));
  filter: drop-shadow(0 6px 12px rgba(60, 30, 10, 0.5));
}

@media (max-width: 520px) {
  .staytuned-section { padding: 8vh 6vw 8vh; }
  .staytuned-title { margin-bottom: 1.8rem; }
}

/* --------------------------------------------------------------------------
   7. Eric de Roch
   -------------------------------------------------------------------------- */
#ericChar {
  position: absolute;
  top: 10%;   /* mobile : tête dans le soleil */
  left: 50%;
  transform: translateX(-50%);
  width: clamp(33vw, 80vw, 40vw);
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 8px 12px rgba(60, 30, 10, 0.5));
}

/* Main séparée : le PNG source (eric2roch_lhand.png) est un recadrage
   à l'échelle 1:1 d'une zone du canvas d'eric2roch.png (540x460), pas
   une image redimensionnée à la taille du corps entier. Sa taille et
   sa position sont donc calculées en JS (cf. layout() dans main.js) à
   partir de la boîte réellement rendue de #ericChar, avec le même
   facteur d'échelle — width/left/top sont écrasés en px par le JS.
   z-index supérieur à #heroBanner (20) pour passer devant la bannière. */
#ericHandLeft {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 21;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 8px 12px rgba(60, 30, 10, 0.5));
}

#ericChar img,
#ericHandLeft img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 769px) {
  #ericChar {
    top: 16%;   /* desktop : descendre pour caler la tête sur le soleil */
  }
}

/* --------------------------------------------------------------------------
   8. Bannière anges
   -------------------------------------------------------------------------- */
#heroBanner {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(300px, 80vw, 95vw);
  z-index: 20;
  pointer-events: none;
  animation: bannerFloat 3.8s ease-in-out infinite;
}

#heroBanner img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(60, 30, 10, 0.5));
  /* position:relative (et non le défaut "static") uniquement pour
     entrer dans le même ordre d'empilement que .wing (position:absolute) :
     sans ça, un enfant absolute passe TOUJOURS au-dessus d'un enfant
     statique quel que soit l'ordre du DOM, ce qui ferait passer les
     ailes devant les anges au lieu de derrière. */
  position: relative;
}

/* — Ailes des anges — 4 calques (avant/arrière x gauche/droite), placés
   avant l'img dans le DOM donc dessous. Coordonnées obtenues par
   analyse pixel (template matching) du PSD de référence
   (banner_angels_wings.png, canvas 1190x441) : boîte de chaque aile
   114x113px à (1000,123) pour l'ange de droite, et son miroir X à
   (26,123) pour l'ange de gauche. Exprimées en % du cadre de
   #heroBanner (qui a toujours exactement les proportions de
   banner_angels.png, cf. img width:100%/height:auto) -> reste aligné
   à n'importe quelle taille, sans JS. */
.wing {
  position: absolute;
  top: 27.89%;
  width: 9.58%;
  pointer-events: none;
}

.wing--left  { left: 2.18%; }
.wing--right { left: 84.03%; }

/* Miroir horizontal des ailes gauches : équivalent visuel exact à un
   asset pré-flippé placé dans la même boîte (flip autour du centre de
   la boîte = les bords left/top/width restent corrects), même
   principe déjà utilisé par #cloudRight. */
.wing--left { transform: scaleX(-1); }

.wing img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(60, 30, 10, 0.35));
  /* Pivot du battement calé sur la racine de l'aile (là où elle
     rejoint le dos de l'ange), repérée par analyse pixel à environ
     12%/88% dans l'asset source. Comme ce transform-origin est local
     à l'img (indépendant du flip du parent .wing--left), le battement
     reste anatomiquement correct des deux côtés sans dupliquer de
     valeurs en miroir. */
  transform-origin: 12% 88%;
}

/* Mouvement inversé avant/arrière : l'aile arrière part vers l'avant
   pendant que l'aile avant part vers l'arrière (et vice-versa), pour
   un effet de "ciseaux" plutôt que deux ailes qui battent en bloc. */
.wing--front img {
  /* Durée alignée sur bannerFloat (3.8s) : 3 battements sur la montée
     (0-50%), 3 autres sur la descente (50-100%), pour rester synchro
     avec le flottement de la bannière dans les deux sens. */
  animation: wingFlapBack 3.8s linear infinite;
}

.wing--back img {
  animation: wingFlapFront 3.8s linear infinite;
  opacity: 0.94;
}

/* 3 battements rapides (pics à -16deg) sur la montée de bannerFloat
   (0-50%), puis 3 nouveaux battements symétriques sur sa descente
   (50-100%) : les ailes battent aussi bien quand la bannière remonte
   que quand elle redescend, au lieu d'une simple glissade passive. */
@keyframes wingFlapFront {
  0%   { transform: rotate(0deg); animation-timing-function: ease-out; }
  9%   { transform: rotate(-16deg); animation-timing-function: ease-in; }
  19%  { transform: rotate(-4deg); animation-timing-function: ease-out; }
  29%  { transform: rotate(-16deg); animation-timing-function: ease-in; }
  39%  { transform: rotate(-4deg); animation-timing-function: ease-out; }
  50%  { transform: rotate(-16deg); animation-timing-function: ease-in; }
  59%  { transform: rotate(-4deg); animation-timing-function: ease-out; }
  69%  { transform: rotate(-16deg); animation-timing-function: ease-in; }
  79%  { transform: rotate(-4deg); animation-timing-function: ease-out; }
  89%  { transform: rotate(-16deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0deg); }
}

@keyframes wingFlapBack {
  0%   { transform: rotate(0deg); animation-timing-function: ease-out; }
  9%   { transform: rotate(16deg); animation-timing-function: ease-in; }
  19%  { transform: rotate(4deg); animation-timing-function: ease-out; }
  29%  { transform: rotate(16deg); animation-timing-function: ease-in; }
  39%  { transform: rotate(4deg); animation-timing-function: ease-out; }
  50%  { transform: rotate(16deg); animation-timing-function: ease-in; }
  59%  { transform: rotate(4deg); animation-timing-function: ease-out; }
  69%  { transform: rotate(16deg); animation-timing-function: ease-in; }
  79%  { transform: rotate(4deg); animation-timing-function: ease-out; }
  89%  { transform: rotate(16deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wing img { animation: none; }
}

@media (max-width: 768px) {
  .wing img {
    filter: drop-shadow(0 2px 5px rgba(60, 30, 10, 0.25));
  }
}

@media (min-width: 769px) {
  #heroBanner {
    top: 70%;
  }
}

@keyframes bannerFloat {
  0%   { transform: translateX(-50%) translateY(0px); }
  50%  { transform: translateX(-50%) translateY(-14px); }
  100% { transform: translateX(-50%) translateY(0px); }
}

@media (max-width: 768px) {
  @keyframes bannerFloat {
    0%   { transform: translateX(-50%) translateY(0px); }
    50%  { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0px); }
  }
}

/* Ombres du hero (nuages, Eric, sa main, bannière) : plus discrètes et
   teintées brun/parchemin sur mobile plutôt que le noir 0.5 desktop,
   qui paraît trop lourd sur petit écran. */
@media (max-width: 768px) {
  .cloud-left,
  .cloud-right,
  #ericChar,
  #ericHandLeft {
    filter: drop-shadow(0 4px 6px rgba(60, 30, 10, 0.35));
  }

  #heroBanner img {
    filter: drop-shadow(0 4px 6px rgba(60, 30, 10, 0.35));
  }
}

/* --------------------------------------------------------------------------
   9. Section Déclaration (cadre baroque)
   -------------------------------------------------------------------------- */

.declaration-section {
  position: relative;
  z-index: 10;
  margin-top: -0px;
  width: 100%;
  background: transparent;
}

@media (min-width: 769px) {
  /* -130px d'origine + compensation de la hausse de hauteur de
     .decl-frame-top (padding-bottom 43.8% -> 47.4%, cf. remplacement
     de column_top.png) : l'écart de ratio (3.6%) s'applique à la
     largeur du cadre (~100vw), d'où le terme en vw plutôt qu'un px
     fixe, pour rester correct à toute largeur d'écran. */
  .declaration-section { margin-top: calc(-100px - 3.6vw); }
}

/* Couvre toute la plage mobile (jusqu'à 768px, borne du breakpoint
   desktop juste au-dessus) : avant, la tranche 521-768px ne matchait
   aucune des deux media queries et retombait sur margin-top:-0px par
   défaut, créant un espace visible entre le hero et le cadre. */
@media (max-width: 768px) {
  .declaration-section { margin-top: calc(-28px - 3.6vw); }
}

/* — 9.1 Structure du cadre — Cadre baroque en 3 couches, dans le flux,
   définit la hauteur de la section */
.decl-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Réactiver les clics sur le contenu interactif */
.decl-container {
  pointer-events: auto;
}

/* TOP : arche + chapiteaux */
.decl-frame-top {
  width: 100%;
  /* Ratio de column_top.png : 584/1232 = 47.4% (mis à jour suite au
     remplacement de l'asset, ancien ratio 541px de haut = 43.8%). */
  padding-bottom: 47.35%;
  background: url('../img/column_top.png') center top / 100% auto no-repeat;
  flex-shrink: 0;
}

/* MID : fûts répétés verticalement */
.decl-frame-mid {
    --repeat-count: 1;

    background-image: url('../img/column_mid.png');
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% calc(100% / var(--repeat-count));
}
@media (max-width: 768px) {
  .decl-frame-mid { min-height: 320px; }
}

@media (max-width: 520px) {
    .decl-frame-mid {
        --repeat-count: 3;
    }
}

/* BOT : base + piédestaux */
.decl-frame-bot {
  position: relative;
  width: 100%;
  /* image recadrée : fût redondant (déjà couvert par decl-frame-mid)
     retiré, ne garde que la transition feuillage + socle */
  padding-bottom: 36.36%;
  background: url('../img/column_bot.png') center bottom / 100% auto no-repeat;
  flex-shrink: 0;
}

/* — 9.3 Contenu texte — */
.decl-container {
  position: absolute;
  z-index: 2;
  top: 0; left: 0; right: 0;
  max-width: 720px;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  /* padding-top pousse le texte sous l'arche (43.9vw = hauteur du top) */
  padding: calc(30vw - 10vw) 4.5rem 1.5rem;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .decl-container { padding: calc(30vw - 8vw) 4.5rem 4.5rem; }
}

@media (max-width: 520px) {
  .decl-container { padding: calc(35vw - 13vw) 2.5rem 3rem; }
}

.decl-eyebrow {
  font-family: 'Georgia', serif;
  font-size: clamp(0.65rem, 1vw, 1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9c8a6e;
}

.decl-title {
  font-family: 'Georgia', serif;
  font-size: clamp(1.5rem, 4vw, 3.6rem);
  font-weight: 400;
  color: #1a1410;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

.decl-subtitle {
  font-family: 'Georgia', serif;
  font-size: clamp(1.2rem, 15.9vw, 1.9rem);
  color: #6e5f48;
  font-style: italic;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.5px;
}

.decl-divider {
  width: 48px;
  height: 1px;
  background: #9c8a6e;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

.decl-articles {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.decl-articles li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Georgia', serif;
  color: #2e2318;
  font-size: clamp(1.2rem, 15.9vw, 1.9rem);
  line-height: 1.2;
  text-align: center;
}

.decl-num {
  font-size: clamp(0.65rem, 3vw, 2rem);
  letter-spacing: 0.15em;
  color: #9c8a6e;
  text-transform: uppercase;
}

.decl-footer {
  font-family: 'Georgia', serif;
  font-size: clamp(1.2rem, 15.9vw, 1.9rem);
  color: #9c8a6e;
  font-style: italic;
  /* padding-top: 1.4rem; */
  /* border-top: 1px solid rgba(120, 90, 50, 0.2); */
  /* text-transform: capitalize; */
  padding-top: 2.6rem;                          /* place le texte sous le divider */
  background-image: url('../img/divider.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 50% auto;                    /* largeur = 50% du bloc, hauteur suit le ratio de l'image */
  text-transform: capitalize;
}

@media (max-width: 768px) {
  /* Numéro d'article à gauche du texte, uniquement en mobile */
  .decl-articles li {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0.6rem;
  }
  .decl-num {
    flex-shrink: 0;
    width: 1.8em;
    text-align: right;
  }
}

@media (max-width: 520px) {
  .decl-title    { font-size: clamp(1.4rem, 4vw, 3.6rem); }
  .decl-subtitle    { font-size: clamp(.9rem, 15.9vw, .9rem); }
  .decl-articles li { font-size: clamp(.9rem, 15.9vw, .9rem); }
  .decl-footer      { font-size: clamp(.9rem, 15.9vw, .9rem); }
  .decl-num         { font-size: clamp(0.65rem, 4vw, 2rem); }
  #ericChar { top: 12%;width: clamp(33vw, 70vw, 40vw)}
  #heroBanner {width: clamp(300px, 95vw, 95vw);}
}

/* Conteneur des CTA */
.decl-cta-group {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row; /* Force l'alignement sur une seule ligne */
  flex-wrap: nowrap;   /* Interdit le passage à la ligne */
  gap: 2.5rem;         /* Espace un peu plus généreux entre les deux parchemins sur PC */
  width: clamp(320px, 70vw, 720px); /* Augmenté le max à 720px (au lieu de 560px) pour le PC */
  max-width: 100%;
  z-index: 5;
  pointer-events: auto;
}

.decl-cta-btn {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 413 / 279; 
  min-width: 0;
  display: flex;
  flex-direction: column; /* Icône au-dessus du texte */
  align-items: center;
  justify-content: flex-start;
  padding: 8% 12%; /* Légèrement réduit pour laisser plus de place au texte à l'intérieur */
  border: none;
  background: transparent;
  color: #1a1410;
  font-family: 'Georgia', serif;
  font-weight: Normal;
  /* Augmentation de la taille de police sur PC pour suivre l'agrandissement du bouton */
  font-size: clamp(0.65rem, 1.2vw, 1.95rem); 
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  transition: var(--btn-transition);
}

/* Les deux boutons sont maintenant centrés, icône en haut / texte en bas,
   quel que soit l'ordre des éléments dans le HTML (cf. "order" sur l'icône
   ci-dessous, qui force l'icône à passer en premier visuellement). */
#d-cta-newsletter-text,
#d-cta-discord-text {
    text-align: center;
}

/* --- Media Queries pour les écrans Tablettes / Mobiles ---
   NB : ces deux blocs (768px et 420px) regroupent ce qui était avant
   dupliqué à deux endroits du fichier avec des valeurs différentes sur
   .decl-cta-group / .decl-cta-btn ; par ordre de cascade, le second bloc
   écrasait silencieusement le premier sur les propriétés en commun. Seules
   les valeurs réellement appliquées ont été conservées ici. */
@media (max-width: 768px) {
  .decl-cta-group {
    width: clamp(240px, 74vw, 420px);
    top: -24%;
    gap: 0.8rem;
  }
  .decl-cta-btn {
    padding: 10% 10%;
    /* font-size: clamp(0.5rem, 2.4vw, 0.64rem); */
	/* font-size: clamp(0.5rem, 2.4vw, 1.64rem); */
	font-size: clamp(0.6rem, 1.9vw, 1.05rem);
  }
  .decl-cta-btn--discord #d-cta-discord-text,
  .decl-cta-btn--newsletter #d-cta-newsletter-text {
    width: 82%;
  }
}

@media (max-width: 420px) {
  .decl-cta-group {
    width: clamp(200px, 70vw, 280px);
    top: -30%;
    gap: 0.5rem;
  }
  .decl-cta-btn {
    padding: 10% 8%;
    /* font-size: 0.55rem; */
    font-size: 0.58rem;
  }
  .decl-cta-btn--discord #d-cta-discord-text,
  .decl-cta-btn--newsletter #d-cta-newsletter-text {
    width: 88%;
  }
}

/* Le parchemin est posé en pseudo-élément (et non en background direct du
   bouton) pour pouvoir l'inverser (variante Discord, cf. plus bas) sans
   affecter la couleur du texte par-dessus. */
.decl-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/btn_container.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 6px rgba(60, 30, 10, 0.5));
  transition: filter 0.25s ease;
  z-index: -1;
}

/* Chaque variante a désormais son propre parchemin (au lieu du
   btn_container.png partagé ci-dessus, gardé comme fallback générique). */
.decl-cta-btn--discord::before {
  background-image: url('../img/container_discord.png');
}

.decl-cta-btn--newsletter::before {
  background-image: url('../img/container_newsletter.png');
}

/* Variante Discord : même parchemin que Newsletter (le fond du PNG n'est
   pas transparent sur sa partie "papier", donc invert() le rendait noir
   plein au lieu de foncer juste le trait) — on garde le même ruban clair
   et on distingue seulement via l'icône/le texte si besoin. */
.decl-cta-btn--discord {
  color: #1a1410;
  /* Le texte devient le seul élément dans le flux flex (icône sortie du
     flux ci-dessous), on le centre donc verticalement dans le bouton. */
  justify-content: center;
}

.decl-cta-icon {
  width: 4.1em;
  height: 4.1em;
  flex-shrink: 0;
  object-fit: contain;
  order: -1; /* toujours au-dessus du texte, peu importe l'ordre dans le HTML */
}

/* Icône Discord posée en haut à gauche du bouton, sortie du flux flex
   pour laisser le texte se centrer seul dans l'espace restant. */
.decl-cta-btn--discord .decl-cta-icon {
  position: absolute;
  top: 0%;
  left: 0%;
  order: 0;
}

/* Variante Newsletter : même principe que Discord, mais l'icône est posée
   en haut à droite, et le texte se centre seul dans l'espace restant. */
.decl-cta-btn--newsletter {
  justify-content: center;
}

.decl-cta-btn--newsletter .decl-cta-icon {
  position: absolute;
  top: 0%;
  right: 0%;
  order: 0;
}

.decl-cta-btn:hover {
  transform: scale(var(--btn-hover-scale));
}

/* Les nouveaux parchemins (container_discord.png / container_newsletter.png)
   ont leur icône dessinée à l'intérieur du visuel, en haut du cadre : le
   centre optique de l'ovale se trouve donc ~6% plus bas que le centre
   géométrique du bouton. On positionne le texte en absolu sur ce vrai
   centre (mesuré sur les PNG) plutôt que de le centrer via flexbox sur
   toute la boîte, ce qui le plaçait trop haut, empiétant sur l'icône. */
.decl-cta-btn--discord #d-cta-discord-text,
.decl-cta-btn--newsletter #d-cta-newsletter-text {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 74%;
  transform: translate(-50%, -50%);
}

.decl-cta-btn:hover::before {
  filter: drop-shadow(0 6px 12px rgba(60, 30, 10, 0.5));
}

.decl-cta-btn:active {
  transform: scale(var(--btn-active-scale));
}

/* — 9.5 Bannière boutiques — 6 logos, posée par-dessus column_bot.png.
   Le ruban (store_banner.png) est très plat (ratio ~0.137) : sa hauteur
   suit automatiquement sa largeur. Les logos sont positionnés en
   overlay, centrés sur la partie plate du ruban (les 82% du milieu,
   pour éviter les enroulements des extrémités). — */
.store-banner {
  position: absolute;
  left: 50%;
  bottom: -32%;
  transform: translateX(-50%);
  width: clamp(260px, 100vw, 1400px);
  max-width: 100%;
  z-index: 6;
  filter: drop-shadow(0 8px 8px rgba(60, 30, 10, 0.5));
}

.store-banner-bg {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.store-banner-text {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Georgia', serif;
  /* font-weight: 600; */
  letter-spacing: 0.03em;
  color: #3c2d19;
  /* font-size: clamp(1.2rem, 15.9vw, 3.9rem); */
  font-size: 2.9em;
  line-height: 1.3;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .store-banner { bottom: -32%; }

  .store-banner-text {
    font-size: clamp(1rem, 5vw, 1.9rem);
  }
  .decl-cta-icon {
    width: 5.1em;
    height: 5.1em;
  }
}

@media (max-width: 520px) {
  .store-banner {
    width: clamp(220px, 100vw, 380px);
  }

  .store-banner-text {
    width: 90%;
    white-space: normal;
    font-size: clamp(0.65rem, 4.6vw, 1rem);
  }
  .staytuned-section {
	padding: 0vh 0vw 0vh;
  }
  .decl-cta-icon {
    width: 5.1em;
    height: 5.1em;
  }
}

/* --------------------------------------------------------------------------
   10. Grands écrans (2560px+)
   Au-delà d'une certaine largeur, les unités vw deviennent trop
   généreuses (paddings/cadres surdimensionnés). On plafonne avec
   une largeur de référence commune (--hero-max-w) partagée par le
   hero (soleil) et la section déclaration, pour que les deux gardent
   les mêmes proportions et restent visuellement alignés.
   -------------------------------------------------------------------------- */
@media (min-width: 2560px) {

  :root {
    /* Réduit volontairement par rapport à la largeur de l'écran :
       comme la hauteur du soleil suit sa largeur (ratio préservé),
       baisser cette valeur réduit aussi sa hauteur, et donc l'espace
       vertical pris par le hero avant la section déclaration. */
    --hero-max-w: 1600px;
  }

  /* Hero : éviter que le soleil et les nuages ne s'étirent à l'infini */
  .hero-sticky {
    display: flex;
    justify-content: center;
  }

  #sunImg {
    max-width: var(--hero-max-w);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  /* Eric de Roch : on cale sa taille max plutôt que de suivre le vw */
  #ericChar {
    width: clamp(220px, 32vw, 720px);
  }

  /* Bannière : idem, on évite qu'elle devienne immense. Auparavant
     figée à 60vw (donc sans plafond réel, continuait à grossir avec
     le viewport) : on l'exprime maintenant en fraction de
     --hero-max-w (0.96 = valeur qu'elle avait exactement à 2560px,
     donc aucun changement visuel au seuil, juste un vrai gel au-delà). */
  #heroBanner {
    width: calc(var(--hero-max-w) * 0.96);
  }

  /* Les nuages restent figés (pas de flottement) à cette résolution :
     même quelques pixels d'animation suffisaient à les faire dépasser
     du cadre (désormais aligné flush sur les bords du soleil). */
  .cloud-left,
  .cloud-right {
    animation: none;
  }

  /* Le miroir du nuage droit n'était défini que dans le keyframe
     cloudFloatR : sans animation, il faut le réappliquer ici. */
  .cloud-right {
    transform: scaleX(-1);
  }

  /* Cadre baroque de la déclaration : on le plafonne à la même
     largeur que le soleil et on le recentre. Les padding-bottom en %
     (qui définissent les hauteurs top/bot) redeviennent alors
     cohérents puisqu'ils se calculent sur cette largeur fixe au lieu
     du viewport entier. */
  .decl-frame {
    max-width: var(--hero-max-w);
    margin: 0 auto;
  }

  /* Contenu texte : on recentre dans une colonne de largeur fixe.
     Le padding-top doit suivre la largeur du cadre (.decl-frame,
     désormais plafonné) et non plus le viewport brut : on remplace
     20vw (= 30vw - 10vw, valeur de base) par 20%, équivalent une fois
     le cadre limité à --hero-max-w. */
  .decl-container {
    max-width: 820px;
    padding: 20% 8rem 4rem;
  }

  /* Cadre scroll-body : même plafonnage que .decl-frame, pour rester
     aligné avec le cadre de la section déclaration au-dessus. */
  .scroll-body-frame {
    max-width: var(--hero-max-w);
    margin: 0 auto;
  }

  .scroll-body {
    padding: 10vh 8vw;
  }

  .scroll-body p {
    max-width: 760px;
  }

  /* CTA déclaration : le plafond de 720px était une valeur en dur
     indépendante de --hero-max-w (coïncidence : 720/1600 = 0.45).
     On l'exprime explicitement en fraction de --hero-max-w pour que
     les deux restent cohérents si --hero-max-w change un jour. */
  .decl-cta-group {
    width: clamp(320px, 70vw, calc(var(--hero-max-w) * 0.45));
  }

  /* Bannière boutiques : même logique, plafond (1400px) réexprimé en
     fraction de --hero-max-w (1400/1600 = 0.875). .store-banner-text
     suit automatiquement (déjà en % de son parent). */
  .store-banner {
    width: clamp(260px, 100vw, calc(var(--hero-max-w) * 0.875));
  }

  /* Bannière communauté : plafond (900px) réexprimé en fraction de
     --hero-max-w (900/1600 = 0.5625). .staytuned-title suit
     automatiquement (déjà en % de son parent). */
  .staytuned-banner {
    width: clamp(280px, 100vw, calc(var(--hero-max-w) * 0.5625));
  }
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  background: #120d0a; /* légèrement plus sombre que .scroll-body pour marquer la séparation */
  color: #c8b89a;
  font-family: 'Georgia', serif;
  padding-top: 32px;
  /* Remonte le footer sous le feuillage qui dépasse du bas de
     column_bot_02.png (débordement mesuré : ~53px sur une image de
     1232px de large -> 53/1232 = 4.3%, en vw car l'image est mise à
     l'échelle sur la largeur du cadre). scroll-body-frame passe
     au-dessus (z-index: 2) pour que les feuilles restent visibles
     par-dessus le fond noir du footer. */
  margin-top: -4.3vw;
}

.footer-inner {
  /* max-width: 1200px; */
  width: 100%;
  margin: 0 auto;
  padding: 6vh 8vw 4vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 2rem;
}

.footer-col--logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
}

.footer-bottom {
  border-top: 1px solid rgba(200, 184, 154, 0.12);
  text-align: center;
  padding: 1.4rem 8vw;
  font-size: 0.78rem;
  opacity: 0.55;
}

.footer-bottom-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.footer-bottom a:hover {
  opacity: 0.85;
}

@media (max-width: 560px) {
  .footer-inner {
    padding: 5vh 6vw 3vh;
    gap: 1rem;
  }
  .footer-logo {
    max-height: 44px;
  }
}

@media (max-width: 768px) {
  .footer-bottom-text {
    flex-direction: column;
    gap: 0.35rem;
  }
  .footer-bottom-text .footer-sep {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. Popup Newsletter
   -------------------------------------------------------------------------- */

/* Overlay plein écran : caché par défaut, affiché via .is-open sur
   #newsletterOverlay (cf. main.js). display:none plutôt que opacity:0 seul
   pour que le popup soit totalement retiré du flux/accessibilité tant
   qu'il n'est pas ouvert. */
.newsletter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
  background: rgba(20, 14, 8, 0.72);
  backdrop-filter: blur(2px);
}

.newsletter-overlay.is-open {
  display: flex;
}

@keyframes newsletterSlideIn {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes newsletterSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(60px); }
}

/* Cadre parchemin : pop_up_newsletter.png en fond, étiré sur 100%/100%
   (pas d'aspect-ratio verrouillé, cf. .newsletter-form ci-dessous) pour
   que la hauteur s'adapte librement au contenu du formulaire sans jamais
   le faire déborder du cadre, quelle que soit la langue/taille d'écran. */
.newsletter-popup {
  position: relative;
  width: clamp(320px, 90vw, 560px);
  max-height: 90vh;
  overflow-y: auto;
  background-image: url('../img/pop_up_newsletter.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 28px rgba(20, 10, 0, 0.45));
  animation: newsletterSlideIn 0.32s ease;
}

/* Fermeture : le popup slide vers le bas et disparaît pendant que
   l'overlay reste affiché (cf. main.js, classe retirée seulement à
   la fin de l'animation via 'animationend'). */
.newsletter-overlay.is-closing .newsletter-popup {
  animation: newsletterSlideOut 0.3s ease forwards;
}

@media (min-width: 900px) {
  .newsletter-popup {
    width: clamp(560px, 42vw, 760px);
  }
  .newsletter-form {
    padding: 12% 12% 8%;
    gap: 1.4rem;
  }
  .newsletter-title {
    font-size: 1.6rem;
  }
  .newsletter-field-label {
    font-size: 1rem;
	text-align: center
  }
  .newsletter-field input[type="email"] {
    font-size: 1.1rem;
    padding: 0.8em 1em;
  }
  .newsletter-consent span {
    font-size: 0.92rem;
  }
  .newsletter-btn {
    font-size: 0.95rem;
    padding: 0.75em 0.6em;
  }
}

@media (max-width: 480px) {
  .newsletter-popup {
    width: 94vw;
    aspect-ratio: 1 / 1;
  }
}

.newsletter-close {
  position: absolute;
  top: 6%;
  right: 7%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #6e5f48;
  font-family: 'Georgia', serif;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: var(--btn-transition), color 0.2s ease;
}

.newsletter-close:hover {
  color: #1a1410;
  transform: scale(var(--btn-hover-scale));
}

.newsletter-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
  /* Padding fixe (et non en %) : la hauteur du cadre s'ajuste au contenu
     (cf. .newsletter-popup), donc un padding en % de la largeur suffit
     pour rester à l'intérieur des volutes du parchemin sans dépendre
     de la hauteur réelle. */
  padding: 15% 14% 10%;
  box-sizing: border-box; /* la hauteur figée en JS (cf. main.js) inclut
                              le padding, sinon le cadre grandirait à
                              l'affichage du message de succès. */
}

.newsletter-title {
  margin: 0;
  font-family:'Georgia', serif;
  font-weight: normal;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: 0.03em;
  text-align: center;
  color: #1a1410;
}

.newsletter-field {
  display: flex;
  flex-direction: column;
  /* gap: 0.4rem; */
}

.newsletter-field-label {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  color: #6e5f48;
  text-align: center;
}

.newsletter-field input[type="email"] {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid #9c8a6e;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #1a1410;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-field input[type="email"]:focus {
  outline: none;
  border-color: #6e5f48;
  box-shadow: 0 0 0 3px rgba(156, 138, 110, 0.25);
}

.newsletter-field input[type="email"]:invalid:not(:placeholder-shown) {
  border-color: #a13c2f;
}

.newsletter-consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6em;
  cursor: pointer;
}

.newsletter-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.15em;
  accent-color: #6e5f48;
  cursor: pointer;
}

.newsletter-consent span {
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #4a3f30;
  text-align: left;
}

.newsletter-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.2rem;
}

.newsletter-btn {
  /* Ne s'étire plus sur toute la largeur (flex:1) : dimensionné à son
     contenu et contraint pour rester bien à l'intérieur du cadre
     parchemin, quelle que soit la taille du popup. */
  flex: 0 1 auto;
  width: min(100%, 260px);
  padding: 0.7em 1.4em;
  border: 1px solid #6e5f48;
  border-radius: 16px;
  background: transparent;
  font-family: 'Georgia', serif;
  font-weight: normal;
  font-size: clamp(0.65rem, 1.6vw, 0.8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #1a1410;
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--btn-transition), background-color 0.2s ease, color 0.2s ease;
}

.newsletter-btn--submit {
  background: #4f6b3f;
  color: #fbf3e3;
  border-color: #4f6b3f;
}

.newsletter-btn--submit:hover {
  background: #3f5631;
  transform: scale(var(--btn-hover-scale));
}

.newsletter-btn:active {
  transform: scale(var(--btn-active-scale));
}

.newsletter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* État "succès" : le formulaire est remplacé par un message de
   confirmation (cf. main.js), réutilise .newsletter-title pour la
   cohérence typographique. */
.newsletter-success {
  display: none;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #1a1410;
  padding: 1rem 0;
}

.newsletter-popup.is-success .newsletter-form > *:not(.newsletter-success) {
  display: none;
}

.newsletter-popup.is-success .newsletter-success {
  /* La hauteur du formulaire est figée en JS avant de basculer sur cet
     état (cf. main.js) ; ce message occupe donc tout l'espace laissé
     par les champs cachés au lieu de faire rétrécir le cadre. */
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

/* --------------------------------------------------------------------------
   12bis. Compatibilité Contact Form 7 (popup newsletter)
   --------------------------------------------------------------------------
   Le <form> est désormais généré par le shortcode [contact-form-7] (voir
   footer.php) au lieu d'un <form> statique. CF7 ajoute ses propres balises
   (span d'enrobage, message de statut, spinner, info-bulles d'erreur)
   autour des champs. Ces règles neutralisent/habillent ces éléments pour
   retrouver le rendu d'origine. Selon la version de Contact Form 7 utilisée,
   les balises d'enrobage exactes peuvent varier légèrement (les versions
   récentes retirent parfois le <span class="wpcf7-form-control-wrap">) :
   si un décalage visuel apparaît, inspectez le HTML généré et ajustez les
   sélecteurs ci-dessous en conséquence. */

/* CF7 entoure toujours son <form> d'un <div class="wpcf7">, sans style par
   défaut : transparent pour la mise en page, mais on s'assure qu'il ne
   casse jamais le centrage du popup. */
.newsletter-popup .wpcf7 {
  width: 100%;
}

/* Enrobages de champs (span.wpcf7-form-control-wrap) : on les rend
   "transparents" pour que .newsletter-field / .newsletter-consent
   continuent de gérer la mise en page en flex comme avant. */
.newsletter-field .wpcf7-form-control-wrap,
.newsletter-consent .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Le champ e-mail généré par [email*] garde l'id "nl-email" (option
   id:nl-email dans le tag CF7) : le sélecteur existant s'applique donc
   sans changement, on ajoute juste le sélecteur de classe CF7 en secours. */
.newsletter-field input.wpcf7-form-control[type="email"] {
  width: 80%;
  margin: 0 auto;          /* centre le bloc au lieu de align-self */
  display: block;          /* les inputs sont inline-block par défaut : nécessaire pour que margin:auto centre */
  padding: 0.7em 0.9em;
  border: 1px solid #9c8a6e;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #1a1410;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-field input.wpcf7-form-control[type="email"]:focus {
  outline: none;
  border-color: #6e5f48;
  box-shadow: 0 0 0 3px rgba(156, 138, 110, 0.25);
}

/* Case à cocher "acceptance" : CF7 génère son propre <label> autour de la
   case (cf. guide). On garde .newsletter-consent en simple conteneur flex
   (et non plus un <label>) pour éviter les <label> imbriqués. */
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6em;
}

.newsletter-consent .wpcf7-list-item {
  margin: 0;
}

.newsletter-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.15em;
  accent-color: #6e5f48;
  cursor: pointer;
}

/* Bouton d'envoi : CF7 génère un <input type="submit"> (pas un <button>),
   donc son libellé se pilote via .value en JS (cf. main.js) et non plus
   .textContent — le style visuel reste identique. */

.newsletter-btn.wpcf7-submit {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Petit loader CF7 affiché pendant l'envoi AJAX : on le garde discret et
   aligné avec le bouton plutôt que de le masquer (retour visuel utile). */
.newsletter-actions .wpcf7-spinner {
  margin: 0.5em auto 0;
  display: block;
}

/* Message de statut global de CF7 (annoncé aux lecteurs d'écran) : reste
   invisible visuellement, comme géré nativement par le plugin. */
.newsletter-form .screen-reader-response {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
}

/* Info-bulle d'erreur affichée par CF7 sous un champ invalide après une
   tentative d'envoi refusée. */
.newsletter-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.3em;
  font-family: 'Georgia', serif;
  font-size: 0.78rem;
  color: #a13c2f;
  text-align: center;
}

/* Message d'erreur global (ex. "Un ou plusieurs champs sont invalides."),
   affiché par CF7 juste avant le message de succès personnalisé. */
.newsletter-form .wpcf7-response-output {
  margin: 0.4em 0 0;
  padding: 0;
  border: none;
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  color: #a13c2f;
  text-align: center;
}

.newsletter-consent .wpcf7-form-control-wrap,
.newsletter-consent .wpcf7-list-item,
.newsletter-consent .wpcf7-form-control.wpcf7-acceptance,
.newsletter-consent .wpcf7-list-item label {
  display: contents;
}

@media (max-width: 560px) {
  .newsletter-form {
    padding: 28% 10% 12%;
    gap: 0.85rem;
  }
  .newsletter-title {
    font-size: 1rem;
  }
  .newsletter-close {
    top: 4%;
    right: 5%;
    width: 28px;
    height: 28px;
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   13. Écran de chargement (preloader)
   -------------------------------------------------------------------------- */

/* Plein écran, fond noir, logo centré. Reste au-dessus de tout
   (z-index élevé) tant que le site n'est pas prêt. Le fondu de sortie
   se joue via .is-hidden (opacity), ajoutée en JS 1s après le
   chargement complet de la page (cf. main.js). */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.preloader-logo {
  width: min(60vw, 320px);
  height: auto;
  opacity: 0.95;
  animation: preloaderPulse 1.6s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { opacity: 0.75; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1); }
}

.preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Complètement retiré du flux/accessibilité une fois le fondu terminé
   (classe ajoutée en JS après la transition, cf. main.js). */
.preloader.is-removed {
  display: none;
}

/* --------------------------------------------------------------------------
   14. Pages statiques (Mentions légales, Privacy Policy...)
   -------------------------------------------------------------------------- */

.page-content {
  position: relative;
  z-index: 1;
  padding: 4rem 8vw 6rem;
  background: #0d0b08;
}

.page-content article {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 6vw;
  color: #1a1410;
  font-family: 'Georgia', serif;

  background-image: url('../img/background_1170x2532.png');
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  box-sizing: border-box;
}

.page-content h1 {
  margin: 0 0 2.5rem;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: normal;
  letter-spacing: 0.03em;
  text-align: center;
  color: #1a1410;
}

.page-body h2 {
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(26, 20, 16, 0.2);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: normal;
  letter-spacing: 0.02em;
  color: #1a1410;
}

.page-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.page-body p {
  margin: 0 0 1.2rem;
  line-height: 1.85;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: #3a2f22;
}

.page-body ul,
.page-body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
  line-height: 1.85;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: #3a2f22;
}

.page-body li {
  margin-bottom: 0.5rem;
}

.page-body strong {
  color: #1a1410;
  font-weight: bold;
}

.page-body a {
  color: #6e5f48;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-body a:hover {
  color: #1a1410;
}

.page-body table {
  width: 100%;
  margin: 0 0 1.4rem;
  border-collapse: collapse;
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  color: #3a2f22;
}

.page-body th,
.page-body td {
  padding: 0.7em 1em;
  border: 1px solid rgba(26, 20, 16, 0.2);
  text-align: left;
  vertical-align: top;
}

.page-body th {
  color: #1a1410;
  font-weight: bold;
}

@media (max-width: 768px) {
  .page-content {
    padding: 2.5rem 4vw 4rem;
  }
  .page-content article {
    padding: 3rem 8vw;
  }
}