/**
 * Iroise 2026 — Composants UI
 *
 * Boutons, cartes, formulaires, header, footer.
 */


/* ============================================
   BOUTONS
   ============================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-5);
  font-family:     var(--font-body);
  font-size:       var(--fs-base);
  font-weight:     var(--fw-medium);
  line-height:     1;
  text-decoration: none;
  border:          var(--border-width) solid transparent;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  white-space:     nowrap;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color     var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    transform        var(--duration-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--color-iroise-blue);
  color:            var(--color-text-inverse);
  border-color:     var(--color-iroise-blue);
}

.btn--primary:hover {
  background-color: var(--color-action-hover);
  border-color:     var(--color-action-hover);
  color:            var(--color-text-inverse);
}

.btn--secondary {
  background-color: transparent;
  color:            var(--color-text-inverse);
  border-color:     rgba(255, 255, 255, 0.4);
}

.btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color:     var(--color-text-inverse);
  color:            var(--color-text-inverse);
}

.btn--secondary-dark {
  background-color: transparent;
  color:            var(--color-iroise-blue);
  border-color:     var(--color-iroise-blue);
}

.btn--secondary-dark:hover {
  background-color: var(--color-iroise-blue);
  color:            var(--color-text-inverse);
}

/* Bandeau visuel full-bleed — composant partagé.
   Utilisé par : /notre-flotte/ (.flotte-bandeau), /notre-equipe/
   (.equipe-bandeau), home (.flotte-bandeau via section-bandeau-aviation).
   Le squelette est ici ; chaque page-CSS peut surcharger height/object-position. */
.flotte-bandeau,
.equipe-bandeau {
  width:    100%;
  height:   clamp(220px, 30vw, 480px);
  overflow: hidden;
  background: var(--color-iroise-blue-soft);
}

.flotte-bandeau picture,
.flotte-bandeau__img,
.equipe-bandeau picture,
.equipe-bandeau__img {
  display: block;
  width:   100%;
  height:  100%;
}

.flotte-bandeau__img,
.equipe-bandeau__img {
  object-fit:      cover;
  object-position: center;
}


/* CTA final — composant partagé (home, pilier, fiches formation,
   notre-ecole, notre-equipe, notre-flotte, partenariats). Les page-CSS
   peuvent surcharger fond / accent ; le squelette reste ici. */

/* Default = fond bleu foncé (cohérent avec les overrides btn--primary
   et btn--secondary-dark juste en dessous, pensés pour fond sombre).
   Sélecteurs simples → home.css peut override via cascade. */
.cta-final {
  padding-block: var(--space-9);
  background:    var(--color-iroise-blue);
  color:         var(--color-text-inverse);
}

.cta-final__inner {
  max-width:      720px;
  margin-inline:  auto;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  align-items:    center;
}

.cta-final__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.75rem, 5vw, var(--fs-3xl));
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-inverse);
  margin:         0;
}

.cta-final__lead {
  font-size:   var(--fs-md);
  line-height: var(--lh-normal);
  color:       rgba(255, 255, 255, 0.85);
  margin:      0;
  max-width:   54ch;
}

.cta-final__actions {
  margin-top:      var(--space-3);
  justify-content: center;
  align-self:      stretch;
}

/* CTA section sur fond bleu Iroise : inverser le primary (sinon
   bleu sur bleu = bouton invisible, le secondaire outline blanc
   aspirait toute l'attention visuelle). */
.cta-final .btn--primary {
  background-color: var(--color-text-inverse);
  color:            var(--color-iroise-blue);
  border-color:     var(--color-text-inverse);
}

.cta-final .btn--primary:hover {
  background-color: rgba(255, 255, 255, 0.88);
  border-color:     rgba(255, 255, 255, 0.88);
  color:            var(--color-iroise-blue);
}

.cta-final .btn--secondary-dark {
  color:        var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.4);
}

.cta-final .btn--secondary-dark:hover {
  background:   rgba(255, 255, 255, 0.1);
  border-color: var(--color-text-inverse);
  color:        var(--color-text-inverse);
}

.btn--lg {
  padding:   var(--space-4) var(--space-6);
  font-size: var(--fs-md);
}

.btn .icon-chevron {
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .icon-chevron {
  transform: translateX(4px);
}


/* ============================================
   CARTES
   ============================================ */

.card {
  background:    var(--color-bg);
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  transition:
    transform   var(--duration-base) var(--ease-out),
    box-shadow  var(--duration-base) var(--ease-out);
}

.card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}


/* ============================================
   FORMULAIRES
   ============================================ */

.input {
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  font:          inherit;
  background:    var(--color-bg);
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  transition:    border-color var(--duration-fast) var(--ease-out);
}

.input:focus {
  outline:      none;
  border-color: var(--color-iroise-cyan);
}


/* ============================================
   PRIMITIVES DE SECTION (réutilisables sur toutes les pages)
   ============================================ */

.section {
  padding-block: var(--section-padding-y);
}

.section--soft {
  background: var(--color-iroise-blue-soft);
}

.section--gray {
  background: var(--color-bg-alt);
}

.section__header {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  max-width:      640px;
  margin-bottom:  var(--space-7);
}

.section__header--centered {
  margin-inline: auto;
  text-align:    center;
  align-items:   center;
}

.section__eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-3);
  font-family:     var(--font-mono);
  font-size:       var(--fs-xs);
  font-weight:     var(--fw-medium);
  letter-spacing:  var(--tracking-wider);
  text-transform:  uppercase;
  color:           var(--color-iroise-blue);
  margin:          0;
}

.section__eyebrow::before {
  content:    '';
  display:    block;
  width:      24px;
  height:     1px;
  background: var(--color-iroise-blue);
}

.section__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.75rem, 4vw, var(--fs-3xl));
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text);
  margin:         0;
}

.section__lead {
  font-size:   var(--fs-md);
  line-height: var(--lh-normal);
  color:       var(--color-text-muted);
  margin:      0;
  max-width:   58ch;
}

.section__header--centered .section__lead {
  margin-inline: auto;
}


/* En-tête de page interne (toutes pages hors home) */
.page-hero {
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-8);
  background:    var(--color-iroise-blue-soft);
  text-align:    left;
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: calc(var(--header-height) + var(--space-9)) var(--space-9);
  }
}

.page-hero__eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-3);
  font-family:     var(--font-mono);
  font-size:       var(--fs-xs);
  font-weight:     var(--fw-medium);
  letter-spacing:  var(--tracking-wider);
  text-transform:  uppercase;
  color:           var(--color-iroise-blue);
  margin:          0 0 var(--space-3);
}

.page-hero__eyebrow::before {
  content:    '';
  display:    block;
  width:      24px;
  height:     1px;
  background: var(--color-iroise-blue);
}

.page-hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 5vw, var(--fs-4xl));
  font-weight:    var(--fw-black);
  line-height:    var(--lh-tight);
  letter-spacing: 0.005em;
  color:          var(--color-iroise-blue);
  margin:         0 0 var(--space-4);
  max-width:      20ch;
}

.page-hero__lead {
  font-size:   var(--fs-md);
  line-height: var(--lh-normal);
  color:       var(--color-text);
  margin:      0;
  max-width:   58ch;
}


/* Lien "fléché" : utilisé partout pour les "Voir tout" / "En savoir plus" */
.link-arrow {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  font-weight:     var(--fw-medium);
  color:           var(--color-iroise-blue);
  text-decoration: none;
  transition:      gap var(--duration-fast) var(--ease-out);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  gap: var(--space-3);
}

.link-arrow .icon-chevron {
  transition: transform var(--duration-fast) var(--ease-out);
}


/* ============================================
   ANIMATIONS UTILS
   ============================================ */

.reveal {
  opacity:    0;
  transform:  translateY(48px) scale(0.97);
  transition:
    opacity   800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  /* Pas de will-change permanent : il est posé juste-à-temps en JS
     (au moment où l'observer arme l'élément), et retiré sur transitionend.
     32 will-change permanents = trop de layers GPU réservés. */
}

.reveal.is-visible {
  opacity:    1;
  transform:  translateY(0) scale(1);
}

.reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger automatique pour les enfants directs des grilles connues.
   80ms entre chaque, plafonné par le nombre d'enfants — on le garde
   modéré pour ne pas faire traîner la lecture. */
.formations__grid > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.formations__grid > .reveal:nth-child(2) { --reveal-delay:  80ms; }
.formations__grid > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.formations__grid > .reveal:nth-child(4) { --reveal-delay: 240ms; }
.formations__grid > .reveal:nth-child(5) { --reveal-delay: 320ms; }
.formations__grid > .reveal:nth-child(6) { --reveal-delay: 400ms; }
.formations__grid > .reveal:nth-child(7) { --reveal-delay: 480ms; }
.formations__grid > .reveal:nth-child(8) { --reveal-delay: 560ms; }
.formations__grid > .reveal:nth-child(9) { --reveal-delay: 640ms; }

.pourquoi__grid > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.pourquoi__grid > .reveal:nth-child(2) { --reveal-delay:  80ms; }
.pourquoi__grid > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.pourquoi__grid > .reveal:nth-child(4) { --reveal-delay: 240ms; }

/* Stagger plus court (40ms) car 15 entrées : sinon la cascade finit
   ~600ms après la 1re et c'est trop long. */
.compagnies__grid > .reveal:nth-child( 1) { --reveal-delay:   0ms; }
.compagnies__grid > .reveal:nth-child( 2) { --reveal-delay:  40ms; }
.compagnies__grid > .reveal:nth-child( 3) { --reveal-delay:  80ms; }
.compagnies__grid > .reveal:nth-child( 4) { --reveal-delay: 120ms; }
.compagnies__grid > .reveal:nth-child( 5) { --reveal-delay: 160ms; }
.compagnies__grid > .reveal:nth-child( 6) { --reveal-delay: 200ms; }
.compagnies__grid > .reveal:nth-child( 7) { --reveal-delay: 240ms; }
.compagnies__grid > .reveal:nth-child( 8) { --reveal-delay: 280ms; }
.compagnies__grid > .reveal:nth-child( 9) { --reveal-delay: 320ms; }
.compagnies__grid > .reveal:nth-child(10) { --reveal-delay: 360ms; }
.compagnies__grid > .reveal:nth-child(11) { --reveal-delay: 400ms; }
.compagnies__grid > .reveal:nth-child(12) { --reveal-delay: 440ms; }
.compagnies__grid > .reveal:nth-child(13) { --reveal-delay: 480ms; }
.compagnies__grid > .reveal:nth-child(14) { --reveal-delay: 520ms; }
.compagnies__grid > .reveal:nth-child(15) { --reveal-delay: 560ms; }

.ecole__grid > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.ecole__grid > .reveal:nth-child(2) { --reveal-delay:  80ms; }
.ecole__grid > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.ecole__grid > .reveal:nth-child(4) { --reveal-delay: 240ms; }
.ecole__grid > .reveal:nth-child(5) { --reveal-delay: 320ms; }
.ecole__grid > .reveal:nth-child(6) { --reveal-delay: 400ms; }

.temoignages__grid > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.temoignages__grid > .reveal:nth-child(2) { --reveal-delay:  80ms; }
.temoignages__grid > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.temoignages__grid > .reveal:nth-child(4) { --reveal-delay: 240ms; }

.blog__grid > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.blog__grid > .reveal:nth-child(2) { --reveal-delay:  80ms; }
.blog__grid > .reveal:nth-child(3) { --reveal-delay: 160ms; }

.confiance__stats > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.confiance__stats > .reveal:nth-child(2) { --reveal-delay:  80ms; }
.confiance__stats > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.confiance__stats > .reveal:nth-child(4) { --reveal-delay: 240ms; }


/* ============================================
   HEADER
   ============================================ */

.site-header {
  position:    fixed;
  top:         0;
  left:        0;
  right:       0;
  z-index:     var(--z-sticky);
  background:  transparent;
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out);
}

/* Fond opaque (pas de backdrop-filter blur : trop coûteux GPU au scroll). */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-sm);
}

/* Pages internes (tout sauf la home) : le header est opaque par défaut.
   Le hero des pages internes a un fond clair (var(--color-iroise-blue-soft))
   et le menu/logo blancs y disparaîtraient. */
body:not(.home) .site-header {
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-5);
  height:          var(--header-height-mobile);
}

@media (min-width: 768px) {
  .site-header__inner {
    height: var(--header-height);
  }
}

.site-header__brand {
  flex-shrink: 0;
}

.site-header__logo {
  display:         inline-flex;
  align-items:     center;
  text-decoration: none;
  line-height:     0;
}

.site-header__logo-img {
  display:    block;
  width:      auto;
  height:     40px;
  /* Au-dessus du hero (header transparent) : on teinte le logo en blanc.
     Au scroll : on rétablit ses couleurs naturelles.
     Pas de transition sur filter (recompose lourde) — switch instantané. */
  filter:     brightness(0) invert(1);
}

@media (min-width: 768px) {
  .site-header__logo-img {
    height: 48px;
  }
}

.site-header.is-scrolled .site-header__logo-img,
body:not(.home) .site-header__logo-img {
  filter: none;
}


/* ===== Navigation desktop ===== */

.site-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: block;
  }
}

.site-header__menu {
  display:     flex;
  align-items: center;
  gap:         var(--space-6);
  list-style:  none;
  padding:     0;
  margin:      0;
}

.site-header__menu-item {
  position: relative;
}

.site-header__menu a,
.site-header__menu-trigger {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  position:        relative;
  padding:         var(--space-2) 0;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-medium);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  color:           var(--color-text-inverse);
  background:      transparent;
  border:          none;
  cursor:          pointer;
  transition:      color var(--duration-fast) var(--ease-out);
}

/* Inversion couleur menu desktop quand le header est sur fond clair
   (page non-home OU header scrollé sur la home). En mobile, le panel
   du menu a un fond bleu plein → le texte doit rester blanc, donc
   cette règle est limitée au desktop. */
@media (min-width: 1024px) {
  .site-header.is-scrolled .site-header__menu a,
  .site-header.is-scrolled .site-header__menu-trigger,
  body:not(.home) .site-header__menu a,
  body:not(.home) .site-header__menu-trigger {
    color: var(--color-iroise-blue);
  }
}

.site-header__menu > .site-header__menu-item > a::after,
.site-header__menu > .site-header__menu-item > .site-header__menu-trigger::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           2px;
  background:       var(--color-iroise-cyan);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform var(--duration-base) var(--ease-out);
}

.site-header__menu > .site-header__menu-item > a:hover::after,
.site-header__menu > .site-header__menu-item > a:focus-visible::after,
.site-header__menu > .site-header__menu-item > .site-header__menu-trigger:hover::after,
.site-header__menu > .site-header__menu-item > .site-header__menu-trigger:focus-visible::after,
.site-header__menu-item--has-mega.is-open > .site-header__menu-trigger::after {
  transform: scaleX(1);
}

.site-header__menu-caret {
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-header__menu-item--has-mega.is-open .site-header__menu-caret {
  transform: rotate(180deg);
}


/* ===== Tel cliquable header (desktop only) ===== */

.site-header__menu-item--phone {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__menu-item--phone {
    display: inline-flex;
    align-items: center;
  }

  .site-header__phone-link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-3);
    border-radius:   var(--radius-md, 0.5rem);
    font-family:     var(--font-base);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-medium);
    line-height:     1;
    white-space:     nowrap;
    color:           inherit;
    text-decoration: none;
    transition:      color var(--duration-fast) var(--ease-out);
  }

  .site-header__phone-link:hover,
  .site-header__phone-link:focus-visible {
    color:   var(--color-iroise-cyan);
    outline: none;
  }

  .site-header__phone-link::after {
    display: none; /* Pas de soulignement décoratif (cohérent avec le CTA). */
  }

  .site-header__phone-icon {
    flex-shrink: 0;
    color:       var(--color-iroise-blue);
    transition:  color var(--duration-fast) var(--ease-out);
  }

  .site-header__phone-link:hover .site-header__phone-icon,
  .site-header__phone-link:focus-visible .site-header__phone-icon {
    color: var(--color-iroise-cyan);
  }

  .site-header__phone-number {
    font-variant-numeric: tabular-nums;
  }
}


/* ===== Lien "Boutique" (icône + label, externe) ===== */

.site-header__menu-item--shop {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__menu-item--shop {
    display:     inline-flex;
    align-items: center;
  }

  .site-header__shop-link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-3);
    border-radius:   var(--radius-md, 0.5rem);
    font-family:     var(--font-base);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-medium);
    line-height:     1;
    white-space:     nowrap;
    color:           inherit;
    text-decoration: none;
    transition:      color var(--duration-fast) var(--ease-out);
  }

  .site-header__shop-link:hover,
  .site-header__shop-link:focus-visible {
    color:   var(--color-iroise-cyan);
    outline: none;
  }

  .site-header__shop-link::after {
    display: none;
  }

  .site-header__shop-icon {
    flex-shrink: 0;
    color:       var(--color-iroise-blue);
    transition:  color var(--duration-fast) var(--ease-out);
  }

  .site-header__shop-link:hover .site-header__shop-icon,
  .site-header__shop-link:focus-visible .site-header__shop-icon {
    color: var(--color-iroise-cyan);
  }
}


/* ===== CTA "Devis" (item nav distinct, pleine couleur) ===== */

.site-header__menu-item--cta > .site-header__cta-link {
  padding:         var(--space-2) var(--space-4);
  background:      var(--color-iroise-blue);
  color:           var(--color-text-inverse) !important;
  border-radius:   var(--radius-md, 0.5rem);
  transition:      background var(--duration-fast) var(--ease-out),
                   transform var(--duration-fast) var(--ease-out);
}

.site-header__menu-item--cta > .site-header__cta-link:hover,
.site-header__menu-item--cta > .site-header__cta-link:focus-visible {
  background: color-mix(in srgb, var(--color-iroise-blue) 88%, black);
  transform:  translateY(-1px);
}

/* Pas de soulignement décoratif sur ce CTA (override du ::after global). */
.site-header__menu-item--cta > .site-header__cta-link::after {
  display: none;
}

/* En mode scroll / hors home, le bouton garde son style plein bleu (pas
   inversé en bleu-on-light comme les autres liens du menu). */
.site-header.is-scrolled .site-header__menu-item--cta > .site-header__cta-link,
body:not(.home) .site-header__menu-item--cta > .site-header__cta-link {
  color: var(--color-text-inverse) !important;
}


/* ===== Mégamenu (panel desktop) ===== */

.site-header__mega {
  position:        absolute;
  top:             100%;
  left:            50%;
  transform:       translateX(-50%) translateY(8px);
  min-width:       320px;
  /* Pas de margin-top : créait un gap physique entre trigger et panel
     qui déclenchait mouseleave avant que la souris atteigne le panel.
     Le décalage visuel est récupéré par le padding-top ci-dessous. */
  padding:         var(--space-5);
  padding-top:     calc(var(--space-5) + var(--space-3));
  background:      var(--color-bg);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  box-shadow:      var(--shadow-lg);
  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
  transition:
    opacity   var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility 0s linear var(--duration-fast);
}

.site-header__menu-item--has-mega.is-open .site-header__mega,
.site-header__menu-item--has-mega:focus-within .site-header__mega {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateX(-50%) translateY(0);
  transition:
    opacity   var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility 0s linear 0s;
}

.site-header__mega-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.site-header__mega-list a {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-1);
  padding:         var(--space-3) var(--space-4);
  border-radius:   var(--radius-md);
  text-align:      center;
  text-transform:  none;
  letter-spacing:  normal;
  color:           var(--color-text);
  transition:      background-color var(--duration-fast) var(--ease-out);
}

.site-header__mega-list a:hover,
.site-header__mega-list a:focus-visible {
  background: var(--color-iroise-blue-soft);
  outline:    none;
}

.site-header__mega-list a::after {
  display: none;  /* annule le soulignement scaleX hérité */
}

.site-header__mega-title {
  font-weight: var(--fw-medium);
  font-size:   var(--fs-base);
  color:       var(--color-iroise-blue);
}

.site-header__mega-desc {
  font-size:   var(--fs-sm);
  color:       var(--color-text-muted);
  line-height: var(--lh-snug);
}


/* ===== Mégamenu large (Formations — 3 colonnes thématiques) ===== */

.site-header__mega--wide {
  min-width: 720px;
}

.site-header__mega-cols {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-5);
}

.site-header__mega-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.site-header__mega-section-title {
  font-family:    var(--font-display);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color:          var(--color-text-muted);
  text-align:     center;
  margin:         0 0 var(--space-1);
  padding:        0 var(--space-3);
}

/* ===== Hamburger mobile ===== */

.site-header__toggle {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             6px;
  width:           44px;
  height:          44px;
  padding:         8px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
}

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

.site-header__toggle-bar {
  display:       block;
  width:         100%;
  height:        2px;
  background:    var(--color-text-inverse);
  border-radius: var(--radius-full);
  transition:
    transform        var(--duration-base) var(--ease-out),
    opacity          var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled .site-header__toggle-bar,
body:not(.home) .site-header__toggle-bar {
  background: var(--color-iroise-blue);
}

.site-header.is-open .site-header__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.site-header.is-open .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ===== Menu mobile (overlay plein écran) ===== */

@media (max-width: 1023.98px) {
  .site-header__nav {
    position:   fixed;
    top:        var(--header-height-mobile);
    left:       0;
    right:      0;
    bottom:     0;
    display:    block;
    padding:    var(--space-7) var(--section-padding-x);
    background: var(--color-iroise-blue);
    transform:  translateX(100%);
    overflow-y: auto;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .site-header.is-open .site-header__nav {
    transform: translateX(0);
  }

  .site-header__menu {
    flex-direction: column;
    align-items:    stretch;
    gap:            var(--space-2);
  }

  .site-header__menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header__menu a,
  .site-header__menu-trigger {
    display:        flex;
    width:          100%;
    padding:        var(--space-4) 0;
    color:          var(--color-text-inverse);
    font-size:      var(--fs-md);
    text-transform: none;
    letter-spacing: normal;
  }

  .site-header__menu-trigger {
    justify-content: space-between;
  }

  /* Mégamenu en mode accordéon sur mobile */
  .site-header__mega {
    position:        static;
    transform:       none;
    min-width:       0;
    margin:          0;
    padding:         0;
    background:      transparent;
    border:          none;
    box-shadow:      none;
    border-radius:   0;
    max-height:      0;
    overflow:        hidden;
    opacity:         1;
    visibility:      visible;
    pointer-events:  auto;
    transition:      max-height var(--duration-base) var(--ease-out);
  }

  .site-header__menu-item--has-mega.is-open .site-header__mega {
    max-height: 1200px;
    transform:  none;
    padding:    0 0 var(--space-4);
  }

  /* Mégamenu large sur mobile : on empile les 3 colonnes verticalement */
  .site-header__mega-cols {
    grid-template-columns: 1fr;
    gap:                   var(--space-3);
  }

  .site-header__mega--wide {
    min-width: 0;
  }

  .site-header__mega-list a {
    padding: var(--space-3) var(--space-4);
  }

  .site-header__mega-title {
    color: var(--color-text-inverse);
  }

  .site-header__mega-desc {
    color: rgba(255, 255, 255, 0.7);
  }

  .site-header__mega-list a:hover,
  .site-header__mega-list a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
  }

  /* NB : ne PAS forcer la couleur des barres du toggle quand le menu est ouvert.
     Le bouton reste dans le header (fond blanc sur les pages internes), pas
     dans le panel nav. Les barres gardent leur couleur naturelle (blanc sur
     home transparent, bleu sur page interne) pour rester lisibles. */
}


/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background:    var(--color-iroise-blue);
  color:         var(--color-text-inverse);
  padding-block: var(--space-9) var(--space-6);
  margin-top:    var(--space-10);
}

.site-footer__top {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-7);
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .site-footer__top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
  }
}

.site-footer__brand img,
.site-footer__brand .custom-logo {
  max-height: 48px;
  width:      auto;
  filter:     brightness(0) invert(1);
}

.site-footer__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size:   var(--fs-xl);
}

.site-footer__signature {
  margin-top:   var(--space-4);
  font-size:    var(--fs-sm);
  color:        rgba(255, 255, 255, 0.7);
  line-height:  var(--lh-snug);
  max-width:    28ch;
}

.site-footer__address {
  margin-top:     var(--space-4);
  font-style:     normal;
  font-size:      var(--fs-sm);
  line-height:    var(--lh-snug);
  color:          rgba(255, 255, 255, 0.85);
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.site-footer__address-line {
  display: block;
}

.site-footer__address-phone,
.site-footer__address-email {
  display:               inline-block;
  margin-top:            var(--space-1);
  color:                 rgba(255, 255, 255, 0.85);
  text-decoration:       none;
  transition:            color var(--duration-fast) var(--ease-out);
}

.site-footer__address-phone {
  font-variant-numeric: tabular-nums;
}

.site-footer__address-phone:hover,
.site-footer__address-phone:focus-visible,
.site-footer__address-email:hover,
.site-footer__address-email:focus-visible {
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Badge Qualiopi — on garde ses couleurs (override le invert global). */
.site-footer__qualiopi {
  display:    inline-block;
  margin-top: var(--space-5);
  background: #fff;
  padding:    var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-footer__qualiopi:hover,
.site-footer__qualiopi:focus-visible {
  transform: translateY(-2px);
}

.site-footer__brand .site-footer__qualiopi-img {
  display:    block;
  width:      140px;
  height:     auto;
  max-height: none;
  filter:     none;
}

.site-footer__heading {
  font-family:    var(--font-body);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  /* Blanc plein : contraste 12:1 avec --color-iroise-blue (vs 3.83:1 avec
     iroise-cyan, en dessous du seuil AA 4.5:1). */
  color:          var(--color-text-inverse);
  margin-bottom:  var(--space-4);
}

.site-footer__menu {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.site-footer__menu a {
  color:           var(--color-text-inverse);
  text-decoration: none;
  font-size:       var(--fs-sm);
  transition:      color var(--duration-fast) var(--ease-out);
}

.site-footer__menu a:hover {
  color: var(--color-iroise-cyan);
}

.site-footer__newsletter-intro {
  font-size:     var(--fs-sm);
  color:         rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-4);
  line-height:   var(--lh-snug);
}

.site-footer__newsletter-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.site-footer__newsletter-form .input {
  background:   rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color:        var(--color-text-inverse);
}

.site-footer__newsletter-form .input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__newsletter-note {
  font-size:  var(--fs-xs);
  /* 0.7 : contraste suffisant AA, vs 0.5 trop faible (Lighthouse a flagué) */
  color:      rgba(255, 255, 255, 0.7);
  font-style: italic;
}

.site-footer__bottom {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  padding-top:    var(--space-7);
  margin-top:     var(--space-7);
  border-top:     1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
  }
}

.site-footer__copyright {
  font-size: var(--fs-sm);
  /* 0.75 : passe AA pour texte normal (contraste suffisant sur iroise-blue) */
  color:     rgba(255, 255, 255, 0.75);
  margin:    0;
}

.site-footer__legal {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-5);
  list-style: none;
  padding:    0;
  margin:     0;
}

.site-footer__legal a {
  color:           rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size:       var(--fs-sm);
  transition:      color var(--duration-fast) var(--ease-out);
}

.site-footer__legal a:hover {
  color: var(--color-iroise-cyan);
}