/* ==========================================================================
   components.css — Composants visuels réutilisables
   Typogramme, Skip-link, Boutons, Site header, Menu mobile, Site footer.
   Charger après tokens.css, base.css, layout.css.
   ========================================================================== */


/* ==========================================================================
   0. TYPOGRAMME DE MARQUE — lettre A centrale bicolore
   ========================================================================== */

/* Coupure nette à mi-largeur de la lettre A : moitié gauche en couleur
   "entrante" (marine sur fond clair, crème sur fond sombre), moitié droite
   en couleur "sortante" (cuivre). Permet de lire VENTE à gauche et ACTIVE
   à droite sans altérer la forme du glyphe.

   Les couleurs sont pilotées par --typogramme-a-gauche / --typogramme-a-droite
   (définies dans tokens.css) et redéfinies localement dans les zones sombres. */

.accent-a {
  background-image: linear-gradient(
    to right,
    var(--typogramme-a-gauche) 50%,
    var(--typogramme-a-droite) 50%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Sur fond sombre : bascule automatique vers crème + cuivre clair */
.menu-mobile,
.site-footer,
.section--sombre {
  --typogramme-a-gauche:  var(--couleur-creme);
  --typogramme-a-droite:  var(--couleur-cuivre-clair);
}


/* ==========================================================================
   1. SKIP LINK — accessibilité clavier
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 16px;
  background: var(--couleur-marine-profonde);
  color: var(--couleur-creme);
  font-family: var(--police-corps);
  font-size: var(--taille-meta);
  font-weight: var(--graisse-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0 0 var(--rayon-md) 0;
  transform: translateY(-110%);
  transition: transform var(--duree-rapide) var(--courbe-premium);
  z-index: var(--z-toast);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--couleur-cuivre);
  outline-offset: -2px;
}


/* ==========================================================================
   2. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--police-corps);
  font-size: 15px;
  font-weight: var(--graisse-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--rayon-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-moyenne);
  position: relative;
  user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tailles alternatives */
.btn--compact { padding: 10px 20px; font-size: 14px; }
.btn--large   { padding: 18px 36px; font-size: 16px; }

/* ----- Primary : marine → cuivre + trait décoratif ----- */
.btn--primary {
  background: var(--couleur-marine-profonde);
  color: var(--couleur-texte-inverse);
  border-color: var(--couleur-marine-profonde);
}
.btn--primary::after {
  content: "";
  width: 18px;
  height: 1px;
  background-color: var(--couleur-cuivre-clair);
  transition: width var(--duree-moyenne) var(--courbe-premium),
              background-color var(--duree-moyenne) var(--courbe-premium);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--couleur-cuivre);
  border-color: var(--couleur-cuivre);
  box-shadow: var(--ombre-cuivre);
  transform: translateY(-1px);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after {
  width: 28px;
  background-color: var(--couleur-creme);
}

/* Primary sur fond sombre : couleurs inversées */
.section--sombre .btn--primary,
.btn--primary.btn--inverse {
  background: var(--couleur-cuivre);
  border-color: var(--couleur-cuivre);
  color: var(--couleur-marine-profonde);
}
.section--sombre .btn--primary::after,
.btn--primary.btn--inverse::after {
  background-color: var(--couleur-creme);
}
.section--sombre .btn--primary:hover,
.section--sombre .btn--primary:focus-visible,
.btn--primary.btn--inverse:hover,
.btn--primary.btn--inverse:focus-visible {
  background: var(--couleur-cuivre-clair);
  border-color: var(--couleur-cuivre-clair);
  color: var(--couleur-marine-profonde);
}

/* ----- Secondary : contour cuivre, texte marine ----- */
.btn--secondary {
  background: transparent;
  color: var(--couleur-marine-profonde);
  border-color: var(--couleur-cuivre);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--couleur-cuivre);
  color: var(--couleur-creme);
  transform: translateY(-1px);
}

/* Secondary sur fond sombre : contour cuivre clair */
.section--sombre .btn--secondary,
.btn--secondary.btn--inverse {
  color: var(--couleur-creme);
  border-color: var(--couleur-cuivre-clair);
  background: transparent;
}
.section--sombre .btn--secondary:hover,
.section--sombre .btn--secondary:focus-visible,
.btn--secondary.btn--inverse:hover,
.btn--secondary.btn--inverse:focus-visible {
  background: var(--couleur-cuivre-clair);
  color: var(--couleur-marine-profonde);
}

/* ----- Fantôme : lien stylé sans fond ----- */
.btn--fantome {
  background: transparent;
  color: var(--couleur-cuivre-texte);
  padding: 8px 0;
  border-color: transparent;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  gap: 6px;
}
.btn--fantome:hover,
.btn--fantome:focus-visible {
  color: var(--couleur-marine-profonde);
}


/* ==========================================================================
   3. SITE HEADER — sticky, backdrop-filter
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: rgba(250, 246, 238, 0.88);        /* crème 88 % */
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree-moyenne) var(--courbe-premium),
              box-shadow var(--duree-moyenne) var(--courbe-premium);
}

.site-header.is-scrolled {
  border-bottom-color: var(--couleur-bordure);
  box-shadow: 0 1px 0 rgba(11, 30, 63, 0.03);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  height: var(--hauteur-nav);
}

/* Logo typogramme */
.site-header__logo {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: var(--graisse-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--couleur-marine-profonde);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--duree-rapide) var(--courbe-premium);
}
.site-header__logo .accent { color: var(--couleur-cuivre); }
.site-header__logo:hover { opacity: 0.85; }

/* Nav desktop — masquée sous 900px */
.site-header__nav { display: none; }

@media (min-width: 900px) {
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--espace-5);
  }
}

.site-header__nav-liste {
  display: flex;
  gap: var(--espace-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-header__nav-lien {
  position: relative;
  font-family: var(--police-corps);
  font-size: 0.9375rem;
  font-weight: var(--graisse-medium);
  color: var(--couleur-texte);
  text-decoration: none;
  padding: 6px 0;
  letter-spacing: 0.005em;
  transition: color var(--duree-rapide) var(--courbe-premium);
}
.site-header__nav-lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background-color: var(--couleur-cuivre);
  transition: right var(--duree-moyenne) var(--courbe-premium),
              height var(--duree-rapide) var(--courbe-premium);
}
.site-header__nav-lien:hover,
.site-header__nav-lien:focus-visible              { color: var(--couleur-marine-profonde); }
/* Hover : underline fin (1 px) qui s'étend sur 100 % du mot */
.site-header__nav-lien:hover::after,
.site-header__nav-lien:focus-visible::after       { right: 0; }
/* État actif : underline plus épais (2 px), permanent — signale clairement la page */
.site-header__nav-lien.is-active::after           { right: 0; height: 2px; }
.site-header__nav-lien.is-active                  { color: var(--couleur-marine-profonde); }

/* Hamburger — visible uniquement en mobile */
.site-header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--rayon-sm);
}
.site-header__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--couleur-marine-profonde);
  margin: 0 auto;
  transition: transform var(--duree-moyenne) var(--courbe-premium),
              opacity var(--duree-rapide) var(--courbe-premium);
  transform-origin: center;
}

@media (min-width: 900px) {
  .site-header__burger { display: none; }
}

/* CTA header : masqué sur petits écrans, visible dès 900px */
.site-header__cta {
  display: none;
}
@media (min-width: 900px) {
  .site-header__cta { display: inline-flex; }
}


/* ==========================================================================
   4. MENU MOBILE — overlay plein écran
   ========================================================================== */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: var(--couleur-marine-profonde);
  color: var(--couleur-texte-inverse);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--duree-lente) var(--courbe-premium),
              opacity var(--duree-moyenne) var(--courbe-premium),
              visibility 0s linear var(--duree-lente);
  overflow-y: auto;
  /* Sécurité : pas de scroll horizontal possible */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.menu-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: transform var(--duree-lente) var(--courbe-premium),
              opacity var(--duree-moyenne) var(--courbe-premium),
              visibility 0s linear;
}

.menu-mobile__inner {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Paddings explicités individuellement pour éviter tout doute sur
     la cascade du shorthand. Latéral = 2rem minimum (exigence brief). */
  padding-top: 0;
  padding-right: 2rem;
  padding-bottom: var(--espace-6);
  padding-left: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.menu-mobile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hauteur-nav);
}

.menu-mobile__logo {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: var(--graisse-bold);
  letter-spacing: -0.02em;
  color: var(--couleur-creme);
  text-decoration: none;
  line-height: 1;
}
.menu-mobile__logo .accent { color: var(--couleur-cuivre-clair); }

.menu-mobile__close {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  color: var(--couleur-creme);
  border-radius: var(--rayon-sm);
}
.menu-mobile__close::before,
.menu-mobile__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background-color: currentColor;
  transform-origin: center;
}
.menu-mobile__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-mobile__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.menu-mobile__liste {
  list-style: none;
  /* Paddings explicités : padding-inline-start par défaut du UA (40 px
     en Chrome/Safari) est ici verrouillé à 0. */
  padding-top: var(--espace-8);
  padding-right: 0;
  padding-bottom: var(--espace-6);
  padding-left: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  align-items: flex-start;
}

.menu-mobile__liste li {
  /* Force l'alignement à gauche, pas de marge parasite */
  margin: 0;
  padding: 0;
  width: auto;
}

.menu-mobile__lien {
  /* Cohérence avec le menu desktop : Figtree, pas d'italique */
  font-family: var(--police-corps);
  font-style: normal;
  font-size: clamp(1.25rem, 1rem + 2vw, 1.75rem);
  font-weight: var(--graisse-semibold);
  color: var(--couleur-creme);
  text-decoration: none;
  line-height: 1.3;
  letter-spacing: 0.005em;
  padding: 8px 0;
  opacity: 0.92;
  transition: color var(--duree-rapide) var(--courbe-premium),
              opacity var(--duree-rapide) var(--courbe-premium);
}
.menu-mobile__lien:hover,
.menu-mobile__lien:focus-visible,
.menu-mobile__lien.is-active {
  color: var(--couleur-cuivre-clair);
  opacity: 1;
}

.menu-mobile__cta {
  margin-top: var(--espace-4);
  align-self: stretch;
}
.menu-mobile__cta .btn { width: 100%; }

.menu-mobile__meta {
  padding-top: var(--espace-5);
  margin-top: var(--espace-5);
  border-top: 1px solid var(--couleur-bordure-sombre);
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--couleur-cuivre-clair);
  line-height: 1.5;
}

/* Quand le menu est ouvert, on bloque le scroll du document */
body.menu-open { overflow: hidden; }


/* ==========================================================================
   5. SITE FOOTER — fond marine, 4 colonnes
   ========================================================================== */

.site-footer {
  background-color: var(--couleur-marine-profonde);
  color: var(--couleur-texte-inverse);
  padding-top: var(--espace-10);
  padding-bottom: var(--espace-5);
  position: relative;
}

.site-footer__inner {
  display: grid;
  gap: var(--espace-8);
}

.site-footer__grille {
  display: grid;
  gap: var(--espace-6);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .site-footer__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .site-footer__grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.site-footer__colonne {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

/* Colonne marque (plus large) */
.site-footer__typogramme {
  font-family: var(--police-titre);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: var(--graisse-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--couleur-creme);
  margin-bottom: var(--espace-2);
}
.site-footer__typogramme .accent { color: var(--couleur-cuivre-clair); }

/* Baseline officielle de la marque — signature discrète sous le typogramme.
   Usage réservé : footer, méta-description, commentaire HTML.
   Jamais en titre, jamais en slogan publicitaire (voir CLAUDE.md §12). */
.site-footer__baseline {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 0.9375rem;        /* ~15 px */
  font-weight: var(--graisse-regular);
  color: var(--couleur-cuivre-clair);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin-top: var(--espace-1);
  margin-bottom: var(--espace-2);
}

.site-footer__tagline {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--couleur-cuivre-clair);
  line-height: 1.5;
  max-width: 26ch;
  opacity: 0.85;
}

.site-footer__titre-colonne {
  font-family: var(--police-corps);
  font-size: var(--taille-eyebrow);
  font-weight: var(--graisse-heavy);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--couleur-cuivre-clair);
  margin-bottom: var(--espace-2);
}

.site-footer__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.site-footer__lien {
  font-family: var(--police-corps);
  font-size: 0.9375rem;
  font-weight: var(--graisse-regular);
  color: var(--couleur-texte-inverse);
  text-decoration: none;
  opacity: 0.78;
  transition: color var(--duree-rapide) var(--courbe-premium),
              opacity var(--duree-rapide) var(--courbe-premium);
}
.site-footer__lien:hover,
.site-footer__lien:focus-visible {
  color: var(--couleur-cuivre-clair);
  opacity: 1;
}

.site-footer__contact {
  font-family: var(--police-corps);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--couleur-texte-inverse);
  opacity: 0.85;
}
.site-footer__contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 246, 238, 0.25);
  transition: border-color var(--duree-rapide) var(--courbe-premium);
}
.site-footer__contact a:hover {
  border-bottom-color: var(--couleur-cuivre-clair);
}

.site-footer__adresse {
  font-style: normal;
  color: inherit;
}

.site-footer__bas {
  padding-top: var(--espace-5);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  font-family: var(--police-corps);
  font-size: 0.8125rem;
  color: var(--couleur-cuivre-clair);
  opacity: 0.75;
}
.site-footer__bas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 2px;
  background-color: var(--couleur-cuivre);
}
.site-footer__bas a { color: inherit; text-decoration: none; }
.site-footer__bas a:hover { color: var(--couleur-creme); }


/* ==========================================================================
   6. HERO PLACEHOLDER + TYPEWRITER
   ========================================================================== */

/* Le placeholder occupe 80vh min, image en arrière-plan avec effet Ken Burns */
.hero-placeholder {
  position: relative;
  min-height: 65vh;
  min-height: 65dvh;
  background-color: var(--couleur-creme); /* fallback si image ne charge pas */
  display: flex;
  align-items: flex-end;                                /* baseline ancrée en bas du cadre */
  justify-content: center;
  padding: var(--espace-8) var(--espace-gouttiere);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);           /* baseline plaquée sous l'image, dans la bande crème */
  overflow: hidden; /* essentiel pour le zoom Ken Burns */
  width: 100%;
  box-sizing: border-box;
  isolation: isolate; /* contexte d'empilement propre */
}

/* Image hero plein cadre + effet Ken Burns */
.hero-placeholder__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: block;
}

.hero-placeholder__image img {
  width: 100%;
  height: 100%;
  /* Desktop : image entière visible (contain) ; fond crème comble les bandes
     latérales quand le ratio ne matche pas exactement la hauteur du hero. */
  object-fit: contain;
  object-position: center center;
  background-color: var(--couleur-creme);
  display: block;
  opacity: 0;
  animation:
    hero-fade-in 1.2s ease-out 0.1s forwards,
    hero-ken-burns 20s ease-in-out 1.3s infinite alternate;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Overlay HTML neutralisé : la vignette est désormais portée par
   .hero-placeholder__image::after (voir règle ci-dessous) pour rester
   cantonnée au cadre de l'image et préserver les bandes crème latérales. */
.hero-placeholder__overlay {
  display: none;
}

/* Vignette radiale douce appliquée via pseudo-élément sur l'image.
   Plus de teinte marine uniforme (0.20 retiré) pour préserver la luminosité
   naturelle des couleurs de la photo. */
.hero-placeholder__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(11, 30, 63, 0.25) 100%);
}

/* La baseline passe au-dessus de l'image et overlay */
.hero-placeholder .hero-baseline {
  position: relative;
  z-index: 2;
}

@keyframes hero-ken-burns {
  0%   { transform: scale(1.00) translate(0, 0); }
  100% { transform: scale(1.05) translate(-1.5%, -1%); }
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile : nouvelle image 3:2 mieux cadrée ; scale de base plus doux (1.05)
   et centrage parfait, l'amplitude Ken Burns reste modérée.
   Le mobile conserve object-fit: cover (bon comportement validé) alors que
   le desktop bascule sur object-fit: contain (cf règle de base). */
@media (max-width: 767px) {
  /* Mobile : annule le flex-end du desktop, revient à un centrage vertical.
     padding-bottom explicite pour surcharger le clamp(...) desktop. */
  .hero-placeholder {
    align-items: center;
    padding-bottom: var(--espace-8);
  }
  .hero-placeholder__image img {
    /* Override du contain desktop : le mobile reste en cover */
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1.05);
    transform-origin: center center;
  }
  /* Mobile : le texte peut wrapper sur 2 lignes pendant le typewriter,
     on réserve l'espace pour éviter le saut de layout */
  .hero-baseline {
    min-height: 2.2em;
  }

  /* L'animation Ken Burns part du scale de base (1.05) et monte à 1.09 */
  @keyframes hero-ken-burns {
    0%   { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.09) translate(-1%, -0.5%); }
  }

  /* Motion-reduce : on coupe l'animation mais on préserve le scale de base
     (sinon le cadrage mobile se désajuste) */
  @media (prefers-reduced-motion: reduce) {
    .hero-placeholder__image img {
      animation: none;
      opacity: 1;
      transform: scale(1.05);
    }
  }
}

/* Accessibilité : pas d'animation si l'utilisateur a demandé moins de motion */
@media (prefers-reduced-motion: reduce) {
  .hero-placeholder__image img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero-baseline {
  font-family: var(--police-titre);
  font-size: var(--taille-xxl-hero);
  font-weight: var(--graisse-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--couleur-creme);
  text-shadow:
    0 2px 24px rgba(11, 30, 63, 0.7),
    0 2px 8px rgba(11, 30, 63, 0.55),
    0 1px 2px rgba(11, 30, 63, 0.5);
  text-align: center;
  max-width: 100%;
  /* Autorise explicitement le wrap même quand un descendant aurait un
     white-space plus restrictif. `text-wrap: balance` équilibre les lignes
     quand le wrap se produit (mobile / tablette / petit desktop). */
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  /* Desktop : 1 ligne suffit (XXL tient sur une ligne, pas de wrap attendu).
     Mobile : surchargé à 2.2em dans le @media (max-width: 767px) pour
     réserver l'espace de 2 lignes pendant l'écriture progressive. */
  min-height: 1.1em;
}

/* Le span de texte N'empêche PAS le wrap : on hérite du parent (normal) */
.hero-baseline__texte {
  white-space: inherit;
}

.typewriter-cursor {
  display: inline-block;
  width: 0.05em;
  height: 0.85em;
  background-color: var(--couleur-creme);
  margin-left: 0.08em;
  vertical-align: -0.08em;
  animation: typewriter-blink 0.8s steps(2, start) infinite;
}

@keyframes typewriter-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { display: none; }
}


/* ==========================================================================
   7. BANDE BASELINE — leitmotiv entre sections
   ========================================================================== */

.bande-baseline {
  background-color: var(--couleur-creme);
  padding-top: var(--espace-section);
  padding-bottom: var(--espace-section);
  text-align: center;
}

.bande-baseline__texte {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--taille-xxl-titre);
  font-weight: var(--graisse-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--couleur-cuivre-texte);
  margin: 0;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   8. TITRES — traitement XXL et signatures italiques
   ========================================================================== */

.titre-xxl {
  font-family: var(--police-titre);
  font-size: var(--taille-xxl-titre);
  font-weight: var(--graisse-regular);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--couleur-marine-profonde);
}

/* Signature — H2 italique massif, usage réservé (2 occurrences max) */
.titre-signature {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--taille-xxl-titre);
  font-weight: var(--graisse-regular);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: inherit;
  max-width: 20ch;
}

.titre-signature em {
  font-style: italic;
  color: var(--couleur-cuivre-texte);
}

/* Sur fond sombre, l'accent cuivre devient cuivre clair (via tokens inversés) */
.section--sombre .titre-signature em {
  color: var(--couleur-cuivre-clair);
}


/* ==========================================================================
   9. ANIMATIONS — révélation au scroll
   ========================================================================== */

[data-animate] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animation au scroll : décommenter pour réactiver. Désactivée car
   l'IntersectionObserver pouvait laisser certains éléments à opacity:0
   sur Chrome — fix : tout est visible d'emblée, plus de risque de blocage. */
/*
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
*/

/* Staggering léger via classe optionnelle */
[data-animate][data-delay="1"].is-visible { transition-delay: 80ms; }
[data-animate][data-delay="2"].is-visible { transition-delay: 160ms; }
[data-animate][data-delay="3"].is-visible { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}