/* ================================================================
   PAGE D'ACCUEIL — héro pleine largeur
   Ciblage : body.layout-accueil (Joomla ajoute layout-{nom} sur body)
   ================================================================ */


/* ── Header : fond sombre sur mobile uniquement ─────────────────
   Sur desktop le header est transparent (héro visible derrière).
   Sur mobile le fond isole visuellement le header du héro. ──── */


/* ── Header : hauteur approximative (valeur calquée sur la 1re rangée du héro) ── */

body.layout-accueil {
  /* Plancher 92px = hauteur mesurée de .container-header (shape 80px × aspect-ratio 128/112 ≈ 91px)
     en-dessous de ~1012px où 9vw < 91px */
  --header-height: clamp(92px, 9vw, 130px);
}

body.layout-accueil .container-header {
  /* Le header est sticky (flux normal) ; on monte le site-grid pour que le héro
     passe visuellement derrière — effet identique à l'ancien position:absolute */
  z-index: 100;
}

/* Tire le héro sous le header sticky */
body.layout-accueil .site-grid {
  margin-block-start: calc(-1 * var(--header-height));
  padding-block-start: 0;
}

body.layout-accueil .grid-child,
body.layout-accueil .container-component,
body.layout-accueil main,
body.layout-accueil .com-content-article,
body.layout-accueil .accueil {
  margin-block-start: 0;
  padding-block-start: 0;
  padding-inline: 0;
}

/* ── Logo blanc sur le héro ─────────────────────────────────────────
   fill directement sur les paths 1-3 (les verts 4-7 restent inchangés).
   Fallback tous navigateurs : blanc fixe.
   Scroll-driven (Chrome/Edge/Safari) pas FF en 06/2026 : transition blanc → couleur d'origine
   entre 80 vh et 100 vh. Animation sur fill direct — contourne le bug Chrome
   où les @property animées ne se propagent pas aux enfants SVG.
   ─────────────────────────────────────────────────────────────────── */

body.layout-accueil .header__logo svg path:nth-child(1) {
  fill: oklch(100% 0 none);
}
body.layout-accueil .header__logo svg path:nth-child(2),
body.layout-accueil .header__logo svg path:nth-child(3) {
  fill: oklch(100% 0 none);
}

@keyframes logo-primary-fill {
  from { fill: oklch(100% 0 none); }               /* blanc */
  to   { fill: oklch(42.6% 0.0826 227.7deg); }     /* = --color-primary */
}

@keyframes logo-text-fill {
  from { fill: oklch(100% 0 none); }               /* blanc */
  to   { fill: oklch(25.8% 0.0458 224.5deg); }     /* = --color-contrast */
}

@supports (animation-timeline: scroll()) {
  /* Desktop uniquement : sur mobile le header reste sombre, logo blanc permanent */
  @media (width >= 640px) {
    body.layout-accueil .header__logo svg path:nth-child(2),
    body.layout-accueil .header__logo svg path:nth-child(3) {
      animation: logo-primary-fill linear both;
      animation-timeline: scroll(root);
      animation-range: 80vh 100vh;
    }
    body.layout-accueil .header__logo svg path:nth-child(1) {
      animation: logo-text-fill linear both;
      animation-timeline: scroll(root);
      animation-range: 80vh 100vh;
    }
  }
}


/* ── Héro : pleine largeur en "full bleed" depuis le grid-child ─── */
/*
   Le container-component reste sur main-start/main-end (grid normal).
   Le héro s'échappe avec la technique margin négatif + 100vw.
   padding-inline: 0 sur les ancêtres (règle ci-dessus) est requis
   pour que le calc(50%) corresponde à la moitié du grid-child.
*/

.accueil-hero {
  --hero-bg-url: none; /* surchargée par l'attribut style inline PHP */

  /* Full bleed : s'échappe du grid-child vers pleine largeur viewport */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  position: relative;
  overflow: hidden;

  /* Ratio ~1440/900 avec plancher et plafond */
  min-height: clamp(580px, 62.5vw, 900px);

  /* Fond : double overlay couleur + image de fond (variable injectée inline) */
  /* Fallback rgba pour Safari < 15.4 (oklch) et Safari < 9.1 (var) */
  background: rgba(3, 40, 52, 0.74) lightgray center / cover no-repeat;
  background:
    linear-gradient(0deg, oklch(25.8% 0.0458 224.5deg / 0.74) 0%, oklch(25.8% 0.0458 224.5deg / 0.74) 100%),
    linear-gradient(0deg, oklch(0% 0 none / 0.21) 0%, oklch(0% 0 none / 0.21) 100%),
    var(--hero-bg-url) lightgray 50% / cover no-repeat;

  /* Grille 2 rangées : espace header | contenu (bandeau → ::after absolu) */
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  justify-items: center;
  align-items: center;
}


/* ── Contenu texte/CTA ──────────────────────────────────────────── */

.accueil-hero__content {
  /* Rangée 2 : sous l'espace réservé au header */
  grid-row: 2;
  align-self: center;

  position: relative;
  z-index: 2;
  width: min(1360px, 100% - 2 * var(--space-xl));
  text-align: center;
  color: white; /* fallback oklch */
  color: var(--color-white);

  h1 {
    font-size: clamp(1.75rem, 3.5vw, var(--text-h1-size));
    line-height: 1.1;
    margin-block-end: var(--space-lg);
  }

  h2{
    font-size: clamp(1.5rem, 2.5vw, var(--text-h2-size));
    font-weight :  400 ;
  }

  p:has(:not(.cta)) {
    opacity: 0.9;
    max-width: 60ch;
    margin-inline: auto;
    margin-block-end: 0;
  }

  /* Bouton CTA — hérite de .cta de user.css */
  .cta {
    margin-block-start: var(--space-xl);
    margin-block-end: 0;
  }
}


/* Dénestés : !important imbriqué buggé sur certains WebKit 16.7.x */
.accueil-hero__content h1,
.accueil-hero__content h2,
.accueil-hero__content h3 {
  color: white !important; /* fallback oklch */
  color: var(--color-white) !important;
}


/* ── Décors : contour logo (coins) ─────────────────────────────── */

.accueil-hero__contour {
  position: absolute;
  z-index: 1;
  width: clamp(400px, 40vw, 575px); /* taille proche du SVG natif (575×559) */
  height: auto;
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}

/* Coin inférieur gauche — partiellement hors cadre */
.accueil-hero__contour--bl {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 28%);
}

/* Coin supérieur droit — partiellement hors cadre, retourné */
.accueil-hero__contour--tr {
  top: 0;
  right: 0;
  transform: translate(60%, -30%) ;
}


/* ── Bandeau de formes en bas ───────────────────────────────────── */
/*
   formes-bandeau-02.svg : viewBox 1440×68.
   Les formes (demi-cercles r=68) ont une hauteur totale de 136px,
   mais le viewBox les coupe à mi-hauteur → effet "formes qui émergent".
   repeat-x : le motif se tuile à sa largeur naturelle (≈ 1015px à 48px de hauteur).
*/

.accueil-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--space-xl);            /* 48px fixe — même valeur que bloc__image-cover */
  background-image: url('../../images/formes-bandeau-02.svg');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}





/* ── Mobile < 640px ─────────────────────────────────────────────── */


@media (width < 640px) {
  body.layout-accueil {
    --header-height: clamp(44px, 12vw, 68px);
  }

  body.layout-accueil header {
    background-color: var(--color-contrast);
  }

  .accueil-hero {
    min-height: 84vh ;
    grid-template-rows: var(--header-height) 1fr auto;
  }

  .accueil-hero__content {
    width: calc(100% - 2 * var(--space-md));
  }

  /* Réduction des titres hero sur mobile : les h1/h2 sont longs */
  .accueil-hero__content h1,
  .accueil-hero__content h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-block-end: var(--space-sm);
  }

}