/**
 * Iroise 2026 — Page "Notre école".
 *
 * Sections : présidence (pull-quote), stats (count-up), valeurs, raisons,
 * timeline histoire, engagements & certifications.
 *
 * Animations limitées à transform/opacity (cf. feedback_scroll_performance).
 */


/* ===== Collage hero (4 photos école) ===== */

.lecole-collage {
  padding-top:    0;
  padding-bottom: var(--space-7);
}

.lecole-collage__figure {
  margin:        0;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--color-gray-50);
}

.lecole-collage__figure picture,
.lecole-collage__img {
  display: block;
  width:   100%;
  height:  auto;
}


/* ===== Bandeau "Base aéroportuaire" (full-bleed avec caption) ===== */

.lecole-bandeau {
  position: relative;
  width:    100%;
  height:   clamp(280px, 38vw, 520px);
  overflow: hidden;
  background: var(--color-iroise-blue);
}

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

.lecole-bandeau__img {
  object-fit:      cover;
  object-position: center 75%;
}

.lecole-bandeau__caption {
  position: absolute;
  inset:    auto 0 0 0;
  padding:  var(--space-6) clamp(1rem, 4vw, 3rem);
  background: linear-gradient(
    to top,
    rgba(0, 80, 168, 0.92) 0%,
    rgba(0, 80, 168, 0.65) 60%,
    rgba(0, 80, 168, 0) 100%
  );
  color:    var(--color-text-inverse);
  text-align: center;
}

.lecole-bandeau__eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin:         0 0 var(--space-2);
  max-width:      none;
}

.lecole-bandeau__lead {
  font-family: var(--font-display);
  font-size:   clamp(1rem, 2vw, var(--fs-lg));
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin:      0 auto;
  max-width:   60ch;
}


/* ===== Mot du président ===== */

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

.lecole-presidence__inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
  align-items:           center;
  max-width:             1100px;
  margin-inline:         auto;
  text-align:            center;
}

@media (min-width: 768px) {
  .lecole-presidence__inner {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap:                   clamp(2rem, 5vw, 4rem);
    text-align:            left;
  }
}

.lecole-presidence__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-bg);
  max-width: 360px;
  margin-inline: auto;
  box-shadow: 0 12px 32px rgba(0, 80, 168, 0.12);
}

@media (min-width: 768px) {
  .lecole-presidence__media {
    margin-inline: 0;
    aspect-ratio: 4 / 5;
    max-width: none;
  }
}

.lecole-presidence__media picture,
.lecole-presidence__photo {
  display: block;
  width:   100%;
  height:  100%;
}

.lecole-presidence__photo {
  object-fit:      cover;
  object-position: center 25%;
}

.lecole-presidence__content {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .lecole-presidence__content {
    text-align: left;
  }
  .lecole-presidence__quote p {
    text-align: left;
  }
  .lecole-presidence__signature {
    text-align: left;
  }
  .lecole-presidence__quote p::before {
    text-align: left;
  }
}

.lecole-presidence__eyebrow {
  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-5);
}

.lecole-presidence__quote {
  margin: 0 0 var(--space-6);
  padding: 0;
  border:  0;
}

.lecole-presidence__quote p {
  font-family:    var(--font-display);
  font-size:      clamp(1.25rem, 2.4vw, var(--fs-2xl));
  font-weight:    var(--fw-medium);
  line-height:    var(--lh-snug);
  color:          var(--color-iroise-blue);
  margin:         0;
  position:       relative;
}

.lecole-presidence__quote p::before {
  content:        "“";
  display:        block;
  font-family:    var(--font-display);
  font-size:      4rem;
  line-height:    1;
  color:          var(--color-iroise-cyan);
  margin-bottom:  var(--space-3);
}

.lecole-presidence__signature {
  margin-top: var(--space-6);
  text-align: center;
}

/* Le `p { max-width: 70ch }` global de base.css cape la largeur des paragraphes ;
   text-align: center du parent ne centre que le contenu inline, pas le BLOC.
   Pour centrer le bloc lui-même, on met margin-inline: auto sur tous les p
   du presidence__inner (eyebrow, quote, name, role). */
.lecole-presidence__inner p {
  margin-inline: auto;
}

.lecole-presidence__name {
  font-size:   var(--fs-md);
  font-weight: var(--fw-bold);
  color:       var(--color-text);
  margin:      0 0 var(--space-1);
}

.lecole-presidence__role {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin:         0;
}


/* ===== Chiffres clés ===== */

.lecole-stats__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 768px) {
  .lecole-stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-6);
  }
}

.lecole-stat {
  text-align:    center;
  padding:       var(--space-6) var(--space-4);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lecole-stat__value {
  font-family:     var(--font-display);
  font-size:       clamp(2.25rem, 5vw, var(--fs-4xl));
  font-weight:     var(--fw-black);
  line-height:     1;
  color:           var(--color-iroise-blue);
  margin:          0 0 var(--space-3);
  letter-spacing:  var(--tracking-tight);
}

.lecole-stat__value--text {
  font-size:       clamp(1.5rem, 2.6vw, var(--fs-xl));
  font-weight:     var(--fw-bold);
  letter-spacing:  var(--tracking-wide);
  font-family:     var(--font-mono);
}

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


/* ===== Valeurs (4 cards icon + texte) ===== */

.lecole-valeurs__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 640px) {
  .lecole-valeurs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lecole-valeurs__grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-6);
  }
}

.lecole-valeur {
  padding:       var(--space-6);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:    transform 220ms ease, border-color 220ms ease;
}

.lecole-valeur:hover {
  transform:     translateY(-4px);
  border-color:  var(--color-iroise-cyan);
}

.lecole-valeur__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  background:      var(--color-iroise-blue-soft);
  color:           var(--color-iroise-blue);
  border-radius:   var(--radius-sm);
  margin:          0 0 var(--space-4);
}

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

.lecole-valeur__lead {
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  color:       var(--color-text);
  margin:      0;
}


/* ===== Au quotidien (triptyque visuel) ===== */

.lecole-quotidien__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-4);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 768px) {
  .lecole-quotidien__grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-5);
  }
}

.lecole-quotidien__item {
  position:      relative;
  margin:        0;
  border-radius: var(--radius-md);
  overflow:      hidden;
  aspect-ratio:  4 / 3;
  background:    var(--color-iroise-blue-soft);
}

.lecole-quotidien__item picture,
.lecole-quotidien__img {
  display: block;
  width:   100%;
  height:  100%;
}

.lecole-quotidien__img {
  object-fit:      cover;
  object-position: center;
  transition:      transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lecole-quotidien__item:hover .lecole-quotidien__img {
  transform: scale(1.04);
}

.lecole-quotidien__caption {
  position: absolute;
  inset:    auto 0 0 0;
  padding:  var(--space-3) var(--space-4);
  background: linear-gradient(
    to top,
    rgba(0, 80, 168, 0.85) 0%,
    rgba(0, 80, 168, 0.45) 70%,
    rgba(0, 80, 168, 0) 100%
  );
  color:    var(--color-text-inverse);
  font-family: var(--font-mono);
  font-size:   var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: 0;
  text-align: left;
}


/* ===== Pourquoi nous choisir (4 cards numérotées) ===== */

.lecole-pourquoi {
  background: var(--color-gray-50);
}

.lecole-pourquoi__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
  counter-reset:         pourquoi;
}

@media (min-width: 640px) {
  .lecole-pourquoi__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lecole-pourquoi-card {
  padding:       var(--space-6);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  position:      relative;
}

.lecole-pourquoi-card__index {
  font-family:     var(--font-mono);
  font-size:       var(--fs-xs);
  font-weight:     var(--fw-medium);
  letter-spacing:  var(--tracking-wider);
  color:           var(--color-iroise-cyan);
  margin:          0 0 var(--space-3);
}

.lecole-pourquoi-card__title {
  font-family: var(--font-display);
  font-size:   var(--fs-xl);
  font-weight: var(--fw-bold);
  color:       var(--color-iroise-blue);
  margin:      0 0 var(--space-3);
}

.lecole-pourquoi-card__lead {
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  color:       var(--color-text);
  margin:      0;
}


/* ===== Timeline histoire ===== */

.lecole-timeline {
  list-style:    none;
  padding:       0;
  margin:        var(--space-7) auto 0;
  max-width:     var(--container-narrow);
  position:      relative;
}

/* Ligne verticale : pseudo-élément, pas de filter — perf scroll OK. */
.lecole-timeline::before {
  content:    "";
  position:   absolute;
  top:        0;
  bottom:     0;
  left:       12px;
  width:      2px;
  background: linear-gradient(to bottom, var(--color-iroise-cyan), var(--color-border) 80%);
}

@media (min-width: 768px) {
  .lecole-timeline::before {
    left: 50%;
    transform: translateX(-1px);
  }
}

.lecole-timeline__item {
  position:    relative;
  padding:     0 0 var(--space-7) var(--space-6);
  margin:      0;
}

.lecole-timeline__item:last-child {
  padding-bottom: 0;
}

/* Pastille année */
.lecole-timeline__item::before {
  content:         "";
  position:        absolute;
  left:            6px;
  top:             6px;
  width:           14px;
  height:          14px;
  background:      var(--color-iroise-blue);
  border:          3px solid var(--color-bg);
  border-radius:   var(--radius-full);
  box-shadow:      0 0 0 1px var(--color-iroise-cyan);
}

@media (min-width: 768px) {
  .lecole-timeline__item {
    padding:    0 0 var(--space-7) 0;
    width:      50%;
  }

  .lecole-timeline__item:nth-child(odd) {
    padding-right: var(--space-7);
    text-align:    right;
  }

  .lecole-timeline__item:nth-child(even) {
    margin-left:  50%;
    padding-left: var(--space-7);
  }

  .lecole-timeline__item::before {
    left:      auto;
    right:     -7px;
    top:       6px;
  }

  .lecole-timeline__item:nth-child(even)::before {
    left:  -7px;
    right: auto;
  }
}

.lecole-timeline__year {
  font-family:    var(--font-mono);
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  color:          var(--color-iroise-cyan);
  margin:         0 0 var(--space-2);
}

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

.lecole-timeline__lead {
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  color:       var(--color-text);
  margin:      0;
}


/* ===== Engagements & certifications ===== */

.lecole-engagements__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

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

.lecole-engagement {
  padding:       var(--space-6);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align:    center;
}

.lecole-engagement__logo {
  display:    block;
  width:      auto;
  height:     56px;
  max-width:  140px;
  object-fit: contain;
  margin:     0 auto var(--space-5);
}

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

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


/* ===== Campus 2026 (triptyque salles rénovées) ===== */

.lecole-campus__gallery {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-4);
  list-style:            none;
  padding:               0;
  margin:                var(--space-7) 0 0;
}

@media (min-width: 720px) {
  .lecole-campus__gallery {
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-5);
  }
}

.lecole-campus__photo {
  position:      relative;
  margin:        0;
  overflow:      hidden;
  border-radius: var(--radius-lg, 0.75rem);
  background:    var(--color-iroise-blue-soft);
  aspect-ratio:  4 / 3;
  box-shadow:    0 8px 24px rgba(0, 0, 0, 0.08);
}

.lecole-campus__photo picture,
.lecole-campus__img {
  display: block;
  width:   100%;
  height:  100%;
}

.lecole-campus__img {
  object-fit:      cover;
  object-position: center;
  transition:      transform 600ms var(--ease-out, ease-out);
  will-change:     transform;
}

.lecole-campus__photo:hover .lecole-campus__img {
  transform: scale(1.04);
}

.lecole-campus__caption {
  position:       absolute;
  inset:          auto 0 0 0;
  padding:        var(--space-3) var(--space-4);
  background:     linear-gradient(
                    to top,
                    rgba(0, 80, 168, 0.92) 0%,
                    rgba(0, 80, 168, 0.55) 60%,
                    rgba(0, 80, 168, 0)    100%
                  );
  color:          var(--color-text-inverse);
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .lecole-campus__img,
  .lecole-campus__photo:hover .lecole-campus__img {
    transition: none;
    transform:  none;
  }
}