/**
 * Iroise 2026 — Page : Pilier "Formation pilote de ligne"
 *
 * Page hub orientée SEO ciblant la requête « formation pilote de ligne ».
 *
 * Sections :
 *   - Hero (split content/visual)
 *   - Métier (texte narratif émotionnel)
 *   - Parcours modulaire (4 modules — PPL, ATPL th., CPL/IR/ME, APS-MCC)
 *   - Pré-requis (4 cards)
 *   - Pourquoi Iroise (4 items)
 *   - FAQ (accordéons natifs)
 */


/* ============================================
   HERO PILIER
   ============================================ */

.pilier-hero__layout {
  display:        grid;
  grid-template-columns: 1fr;
  gap:            var(--space-7);
  align-items:    center;
}

@media (min-width: 1024px) {
  .pilier-hero__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap:                   var(--space-8);
  }
}

.pilier-hero__content {
  min-width: 0;
}

.pilier-hero__actions {
  margin-top: var(--space-6);
}

.pilier-hero__visual {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
  aspect-ratio:  4 / 5;
}

.pilier-hero__visual picture,
.pilier-hero__visual img,
.pilier-hero__img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

@keyframes pilier-hero-rise {
  from {
    opacity:   0;
    transform: translateY(48px) scale(0.97);
  }
  to {
    opacity:   1;
    transform: translateY(0) scale(1);
  }
}

.pilier-hero__content {
  animation: pilier-hero-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pilier-hero__visual {
  animation: pilier-hero-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

@media (prefers-reduced-motion: reduce) {
  .pilier-hero__content,
  .pilier-hero__visual {
    animation: none;
  }
}


/* ============================================
   SECTION MÉTIER (narratif émotionnel)
   ============================================ */

.pilier-metier__body {
  margin-top: var(--space-7);
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text);
}

.pilier-metier__body p {
  margin:    0;
  max-width: 72ch;
}

.pilier-metier__body p + p {
  margin-top: var(--space-4);
}


/* ============================================
   MODULAIRE — Pourquoi notre choix
   ============================================ */

.pilier-modulaire__grid {
  list-style: none;
  padding:    0;
  margin:     var(--space-7) 0 0;
  display:    grid;
  gap:        var(--space-5);
}

@media (min-width: 768px) {
  .pilier-modulaire__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   var(--space-6);
  }
}

.pilier-modulaire__card {
  padding:        var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
  background:     var(--color-bg);
  border-left:    3px solid var(--color-iroise-cyan);
  border-radius:  var(--radius-md);
  box-shadow:     var(--shadow-sm);
}

.pilier-modulaire__card-title {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  margin:      0 0 var(--space-3);
  color:       var(--color-iroise-blue);
}

.pilier-modulaire__card p {
  font-size:   var(--fs-sm);
  line-height: var(--lh-relaxed);
  color:       var(--color-text-muted);
  margin:      0;
}

.pilier-modulaire__grid > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.pilier-modulaire__grid > .reveal:nth-child(2) { --reveal-delay: 100ms; }
.pilier-modulaire__grid > .reveal:nth-child(3) { --reveal-delay: 200ms; }


/* ============================================
   PARCOURS — 4 MODULES (timeline)
   ============================================ */

.pilier-parcours__steps {
  list-style: none;
  padding:    0;
  margin:     var(--space-8) 0 var(--space-6);
  display:    grid;
  gap:        var(--space-6);
}

.pilier-parcours__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap:     var(--space-5);
  align-items: start;
}

@media (min-width: 768px) {
  .pilier-parcours__step {
    gap: var(--space-6);
  }
}

.pilier-parcours__num {
  font-family:    var(--font-display);
  font-size:      clamp(2.25rem, 4vw, 3rem);
  font-weight:    var(--fw-black);
  line-height:    1;
  color:          var(--color-iroise-cyan);
  letter-spacing: -0.02em;
}

.pilier-parcours__body {
  min-width: 0;
}

.pilier-parcours__ref {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-iroise-blue);
  margin:         0 0 var(--space-2);
}

.pilier-parcours__title {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin:      0 0 var(--space-3);
}

.pilier-parcours__lead {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text);
  margin:      0 0 var(--space-3);
  max-width:   70ch;
}

.pilier-parcours__hint {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text-muted);
  margin:      0;
  max-width:   72ch;
}

.pilier-parcours__hint a {
  color:       var(--color-iroise-blue);
  font-weight: var(--fw-medium);
}

.pilier-parcours__steps > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.pilier-parcours__steps > .reveal:nth-child(2) { --reveal-delay: 100ms; }
.pilier-parcours__steps > .reveal:nth-child(3) { --reveal-delay: 200ms; }
.pilier-parcours__steps > .reveal:nth-child(4) { --reveal-delay: 300ms; }


/* ============================================
   PRÉ-REQUIS — 4 cards
   ============================================ */

.pilier-prerequis__grid {
  list-style: none;
  padding:    0;
  margin:     var(--space-7) 0 0;
  display:    grid;
  gap:        var(--space-5);
}

@media (min-width: 640px) {
  .pilier-prerequis__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pilier-prerequis__card {
  padding:        var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
  background:     var(--color-bg);
  border-left:    3px solid var(--color-iroise-cyan);
  border-radius:  var(--radius-md);
  box-shadow:     var(--shadow-sm);
}

.pilier-prerequis__card-title {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  margin:      0 0 var(--space-2);
  color:       var(--color-iroise-blue);
}

.pilier-prerequis__card p {
  font-size:   var(--fs-sm);
  line-height: var(--lh-normal);
  color:       var(--color-text-muted);
  margin:      0;
}

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


/* ============================================
   ÉTUDES — 3 voies post-bac
   ============================================ */

.pilier-etudes__grid {
  list-style: none;
  padding:    0;
  margin:     var(--space-7) 0 0;
  display:    grid;
  gap:        var(--space-5);
}

@media (min-width: 768px) {
  .pilier-etudes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   var(--space-6);
  }
}

.pilier-etudes__card {
  padding:        var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
  background:     var(--color-bg);
  border-left:    3px solid var(--color-iroise-cyan);
  border-radius:  var(--radius-md);
  box-shadow:     var(--shadow-sm);
}

.pilier-etudes__card-title {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  margin:      0 0 var(--space-3);
  color:       var(--color-iroise-blue);
}

.pilier-etudes__card p {
  font-size:   var(--fs-sm);
  line-height: var(--lh-relaxed);
  color:       var(--color-text-muted);
  margin:      0;
}

.pilier-etudes__grid > .reveal:nth-child(1) { --reveal-delay:   0ms; }
.pilier-etudes__grid > .reveal:nth-child(2) { --reveal-delay: 100ms; }
.pilier-etudes__grid > .reveal:nth-child(3) { --reveal-delay: 200ms; }


/* ============================================
   POURQUOI IROISE — grille 4 items minimaliste
   ============================================ */

.pilier-pourquoi__grid {
  list-style: none;
  padding:    0;
  margin:     var(--space-8) 0 0;
  display:    grid;
  gap:        var(--space-6);
}

@media (min-width: 768px) {
  .pilier-pourquoi__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   var(--space-7) var(--space-8);
  }
}

.pilier-pourquoi__item h3 {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  margin:      0 0 var(--space-3);
  color:       var(--color-text);
}

.pilier-pourquoi__item p {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text-muted);
  margin:      0;
  max-width:   60ch;
}

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

/* Encart highlight Ab-Initio Modulaire IAF — bande cyan/bleu sous la grille
   "Pourquoi Iroise" pour cristalliser le positionnement formation phare. */
.pilier-pourquoi__highlight {
  margin:        var(--space-8) 0 0;
  padding:       var(--space-7) var(--space-6);
  background:    linear-gradient(135deg, var(--color-iroise-blue) 0%, var(--color-iroise-cyan) 100%);
  color:         #fff;
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
}

@media (min-width: 768px) {
  .pilier-pourquoi__highlight {
    padding: var(--space-7) var(--space-8);
  }
}

.pilier-pourquoi__highlight-copy {
  max-width: 72ch;
  margin:    0;
}

.pilier-pourquoi__highlight-eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin:         0 0 var(--space-2);
  color:          rgba(255, 255, 255, 0.85);
}

.pilier-pourquoi__highlight-title {
  font-family: var(--font-display);
  font-size:   clamp(var(--fs-lg), 2.5vw, var(--fs-xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin:      0 0 var(--space-3);
  color:       #fff;
}

.pilier-pourquoi__highlight-body {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       rgba(255, 255, 255, 0.92);
  margin:      0 0 var(--space-4);
}

.pilier-pourquoi__highlight-cta {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
  font-family: var(--font-display);
  font-size:   var(--fs-md);
  font-weight: var(--fw-bold);
  color:       #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  transition:
    border-color var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.pilier-pourquoi__highlight-cta:hover,
.pilier-pourquoi__highlight-cta:focus-visible {
  border-color: #fff;
  transform:    translateX(2px);
}


/* ============================================
   FAQ — accordéons natifs <details>
   ============================================ */

.pilier-faq__list {
  list-style: none;
  padding:    0;
  margin:     var(--space-7) 0 0;
}

.pilier-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.pilier-faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.pilier-faq__item details {
  padding: var(--space-4) 0;
}

.pilier-faq__item summary {
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  gap:          var(--space-3);
  cursor:       pointer;
  list-style:   none;
  outline:      none;
}

.pilier-faq__item summary::-webkit-details-marker {
  display: none;
}

.pilier-faq__item summary::after {
  content:        '+';
  flex:           none;
  font-family:    var(--font-display);
  font-size:      var(--fs-xl);
  font-weight:    var(--fw-medium);
  color:          var(--color-iroise-blue);
  line-height:    1;
  transition:     transform var(--duration-base) var(--ease-out);
}

.pilier-faq__item details[open] summary::after {
  transform: rotate(45deg);
}

.pilier-faq__item summary h3 {
  font-family: var(--font-display);
  font-size:   var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin:      0;
  color:       var(--color-text);
}

.pilier-faq__item details p {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text-muted);
  margin:      var(--space-3) 0 0;
  max-width:   72ch;
}


/* ============================================
   CTA FINAL — fond bleu Iroise (boutons inversés blanc, voir components.css)
   ============================================ */

.cta-final {
  background:    var(--color-iroise-blue);
  color:         var(--color-text-inverse);
  padding-block: var(--space-9);
}

.cta-final__inner {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-5);
  max-width:      640px;
}

.cta-final__title {
  font-family:    var(--font-display);
  font-size:      clamp(var(--fs-xl), 4vw, var(--fs-3xl));
  font-weight:    var(--fw-black);
  line-height:    var(--lh-tight);
  letter-spacing: -0.01em;
  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:   58ch;
}

.cta-final__actions {
  margin-top: var(--space-3);
}


/* ============================================


/* ============================================
   FRISE TOOLTIP (4 étapes parcours pilote)
   Pure CSS, hover/focus-within. Pas de JS.
   ============================================ */

.pilier-frise {
  background: var(--color-bg-alt);
}

.frise {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  gap: var(--space-3);
  position: relative;
}

/* Ligne de connexion entre les noeuds — 5 colonnes : centre du 1er à 10 % du bord, du dernier à 90 %. */
.frise::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--color-gray-300);
  z-index: 0;
  pointer-events: none;
}

.frise__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.frise__node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  z-index: 1;
  outline: none;
}

.frise__node:focus-visible {
  outline: none;
}

.frise__node:focus-visible .frise__num {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.frise__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-iroise-blue);
  color: var(--color-iroise-blue);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  transition: background 260ms ease, color 260ms ease, transform 260ms ease;
}

.frise__node:hover .frise__num,
.frise__node:focus-visible .frise__num {
  background: var(--color-iroise-blue);
  color: var(--color-text-inverse);
  transform: scale(1.08);
}

.frise__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-align: center;
  transition: color 200ms ease;
}

.frise__node:hover .frise__label,
.frise__node:focus-visible .frise__label {
  color: var(--color-iroise-blue);
}

.frise__tip {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  transform: translate(-50%, 4px);
  background: var(--color-iroise-blue);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 80, 168, 0.18);
  text-align: center;
}

.frise__tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--color-iroise-blue);
}

.frise__step:hover .frise__tip,
.frise__step:focus-within .frise__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.frise__tip-meta {
  margin: 0 0 4px;
  font-weight: var(--fw-medium);
}

.frise__tip-link {
  display: block;
  font-size: var(--fs-xs);
  opacity: 0.9;
}

@media (max-width: 720px) {
  .frise {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .frise::before {
    display: none;
  }

  /* Sur mobile : pas de hover → tooltip toujours visible sous le label */
  .frise__tip {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    margin-top: var(--space-1);
    white-space: normal;
    box-shadow: none;
  }

  .frise__tip::before {
    display: none;
  }
}