/* ==========================================================================
   KravMaga Paris IDF Academy — couche responsive
   --------------------------------------------------------------------------
   Ce fichier est chargé APRÈS styles.css : il adapte le site à tous les
   écrans, sans toucher au design d'origine sur ordinateur.

   Écrans pris en charge
     · ordinateur (≥ 1200 px) et très grand écran (≥ 1500 px)
     · petit ordinateur / tablette paysage (≤ 1200 px, ≤ 1080 px)
     · tablette portrait (≤ 900 px, ≤ 768 px)
     · téléphone (≤ 640 px, ≤ 480 px)
     · petit téléphone (≤ 380 px)
     · téléphone pliable REFERMÉ / écran externe (≤ 320 px, jusqu'à 280 px)
     · téléphone pliable OUVERT et double écran (Surface Duo…) :
       le contenu se place de part et d'autre de la charnière
       (@media horizontal-viewport-segments / vertical-viewport-segments)
     · téléphone en paysage (hauteur ≤ 520 px)
     · appareils tactiles (cibles de 44 px, effets de survol adaptés)
     · impression (fiche d'inscription, planning…)
   ========================================================================== */

/* ==========================================================================
   1. Socle fluide — commun à tous les écrans
   ========================================================================== */

html {
  /* Pas d'agrandissement automatique du texte sur mobile (iOS / Android) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Aucun débordement horizontal : la page ne « bouge » jamais de travers.
   `clip` n'crée pas de conteneur de défilement, l'en-tête collant continue
   donc de fonctionner (contrairement à `hidden`). */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* Les médias ne dépassent jamais leur conteneur */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img, video { height: auto; }

/* Les textes longs (adresses e-mail, URL, mots collés) se coupent proprement */
.mono, .venue__address, .site-footer__legal, .lightbox__pageurl {
  overflow-wrap: anywhere;      /* cas extrêmes : e-mail, adresse web, code */
}
h1, h2, h3, h4, .card__title, .pill, .planning__slot-title {
  overflow-wrap: break-word;    /* les titres ne débordent jamais */
  word-break: normal;
}

/* Zones sûres : encoche, bords arrondis, barre gestuelle, charnière */
.container,
.site-header__inner,
.site-footer .container {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.site-footer { padding-bottom: env(safe-area-inset-bottom); }
#toasts { bottom: calc(18px + env(safe-area-inset-bottom)); right: calc(18px + env(safe-area-inset-right)); }

/* Les champs de saisie font au moins 16 px : iOS ne zoome plus au focus */
input, select, textarea, button, .btn {
  font-size: max(16px, 1rem);
}
.field input, .field select, .field textarea { font-size: 16px; }

/* Appareils tactiles : plus de « zoom » ni de surbrillance bleue au tap,
   et des cibles suffisamment grandes (44 px, recommandation Apple/Google). */
@media (hover: none), (pointer: coarse) {
  a, button, [role="button"], input, select, textarea, label {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .btn, .icon-btn, .nav a, .burger, .lang-picker__button, .event-tab,
  .tabs button, .share-btn, .cal__case, .gallery-item__play {
    min-height: 44px;
  }
  .btn--small { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .icon-btn { min-height: 44px; min-width: 44px; }
  /* Les effets « au survol » n'existent pas au doigt : on les rend visibles */
  .event-gallery-card:hover .event-gallery-image img { transform: none; }
  .gallery-item__caption { opacity: 1; }
}

/* Hauteurs d'écran : on utilise les unités dynamiques, pour que les barres du
   navigateur mobile (et la barre gestuelle) ne cachent plus le contenu. */
.modal-backdrop,
.lightbox { height: 100dvh; }

/* ==========================================================================
   2. Très grand écran (≥ 1500 px) : on élargit un peu le contenu
   ========================================================================== */

@media (min-width: 1500px) {
  :root { --container: 1320px; }
  .section { padding: 96px 0; }
  body { font-size: 17px; }
}

/* ==========================================================================
   3. Petit ordinateur (≤ 1200 px)
   ========================================================================== */

@media (max-width: 1200px) {
  .grid--5 { gap: 14px; }
  .grid--5 .card--pricing .card__body { padding: 22px 12px; }
  .hero__inner { padding: 96px 0 76px; }
}

/* ==========================================================================
   4. Tablette paysage / petit portable (≤ 1080 px)
   ========================================================================== */

@media (max-width: 1080px) {
  /* Le menu passe en « burger » (règle d'origine) : on s'assure qu'il reste
     utilisable avec le pouce et qu'il ne dépasse pas de l'écran. */
  .nav {
    top: 100%;
    max-height: min(76dvh, calc(100dvh - 96px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav a { min-height: 46px; display: flex; align-items: center; }
  .lang-picker__menu { max-width: calc(100vw - 24px); }

  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--5 .card--pricing .card__badges,
  .grid--5 .card--pricing .card__title,
  .grid--5 .card--pricing .price,
  .grid--5 .card--pricing > .card__body > p.small,
  .grid--5 .card--pricing .card__features { min-height: 0; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-nav--prev { left: 6px; }
  .event-nav--next { right: 6px; }
}

/* ==========================================================================
   5. Tablette portrait (≤ 900 px)
   ========================================================================== */

@media (max-width: 900px) {
  .section { padding: 62px 0; }
  .section--tight { padding: 38px 0; }
  .section-head { margin-bottom: 34px; }
  html { scroll-padding-top: 74px; }

  /* Grilles : deux colonnes maximum */
  .grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4, .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 28px; }

  /* Espace membre / back-office : la barre latérale passe au-dessus du contenu */
  .app-shell { grid-template-columns: 1fr; gap: 18px; }
  .side-nav {
    position: static;
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 10px; scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a, .side-nav button { width: auto; flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  .side-nav hr { display: none; }
  .side-nav .is-active { box-shadow: inset 0 -2px 0 var(--primary-color); }

  /* Grandes cartes : plus de largeur ni de hauteur figées */
  .event-gallery-card { width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 5; }
  .event-gallery-card .event-gallery-image img { object-fit: cover; }
  .instructor-card { height: auto; }
  .instructor-card__photo { width: 100%; height: clamp(260px, 52vw, 360px); }
  .federation-badge { width: 100%; max-width: 420px; margin: 22px auto 0; min-height: 0; }

  .modal { max-width: 100%; }

  .planning { padding: 18px 14px; }
  .planning__title { font-size: 1.5rem; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .toolbar { align-items: flex-start; }
}

/* ==========================================================================
   6. Tablette étroite / grand téléphone en paysage (≤ 768 px)
   ========================================================================== */

@media (max-width: 768px) {
  .site-header__inner { min-height: 66px; gap: 12px; }
  .brand__mark img { width: 52px; height: 52px; }
  .brand__text > span:first-child { font-size: 1rem; }
  .brand__text small { font-size: .68rem; }

  .grid { gap: 18px; }
  .card__body { padding: 20px 18px; }
  .panel { padding: 18px; }
  .cta-band { padding: 34px 20px; }
  .cta-band h2, .cta-band h3 { font-size: clamp(1.4rem, 5.4vw, 2rem); }

  .event-tab, .tabs button { padding: 10px 14px; font-size: .86rem; }
  .event-gallery-overlay { padding: .8rem .9rem; }
  .event-nav { width: 42px; height: 42px; }

  /* Bandeaux qui défilent : cartes à l'échelle de l'écran */
  .gallery-marquee .gallery-item { flex: 0 0 clamp(212px, 60vw, 320px); width: clamp(212px, 60vw, 320px); }
  .gallery-marquee .testimonial { flex: 0 0 clamp(232px, 74vw, 360px); width: clamp(232px, 74vw, 360px); }
  .photo-marquee__label { font-size: .68rem; letter-spacing: .14em; }

  .lightbox__panel { gap: 8px; }
  .lightbox__bar { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 8px; }

  .venue__media { height: 220px; }
  .map-embed { min-height: 200px; }

  .gallery-marquee .testimonial { height: auto; min-height: 244px; }   /* le texte ne doit jamais être coupé */
}

/* ==========================================================================
   7. Téléphone (≤ 640 px)
   ========================================================================== */

@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.65; }
  .section { padding: 46px 0; }
  .section--tight { padding: 30px 0; }
  .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h3 { font-size: clamp(1.2rem, 5vw, 1.5rem); }
  .section-head { margin-bottom: 26px; }
  .section-head p { font-size: 1rem; }
  .eyebrow { font-size: .7rem; letter-spacing: .16em; }

  /* Une seule colonne : tout se lit au pouce, sans zoom */
  .grid, .grid--2, .grid--3, .grid--4, .grid--5,
  .press-grid, .partner-logos, .gallery-grid,
  .stat-grid, .site-footer__grid, .diploma-grid, .team-grid,
  .i18n-grid, .trial-clubs { grid-template-columns: minmax(0, 1fr); }
  .grid--2 > *, .grid--3 > *, .grid--4 > *, .grid--5 > * { min-width: 0; }
  .grid--5 .card--pricing .card__body { padding: 22px 18px; }

  /* Diaporama : texte et boutons plein largeur, plus lisibles */
  .hero__inner { padding: 74px 0 58px; }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__actions .btn { width: 100%; }
  .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 30px; }
  .hero__bullets { gap: 8px; margin-bottom: 16px; }
  .hero__bullets span { font-size: .72rem; padding: 5px 10px; }
  .hero__nav { width: 42px; height: 42px; }
  .cover-hero { min-height: 240px; padding: 84px 0 40px; }

  /* Formulaires : champs plein largeur, boutons faciles à toucher */
  .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; }
  .hero__actions .btn, .cta-band .btn, .card__foot .btn, .panel > .btn,
  .form .btn, .field .btn, form .btn[type="submit"], .empty .btn,
  .trial-club .btn, .venue .btn, .modal__foot .btn {
    width: 100%; justify-content: center;
  }
  .toolbar__actions { width: 100%; }
  .toolbar__actions .btn { flex: 1 1 auto; }
  .checkbox-line { align-items: flex-start; }
  .file-picker__btn { width: 100%; justify-content: center; }

  /* Fenêtres d'édition et visionneuse : plein écran, défilables */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100%; width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
  }
  .modal__head { position: sticky; top: 0; z-index: 2; background: #fff; padding-bottom: 10px; }
  .modal__foot {
    position: sticky; bottom: 0; padding-top: 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line-soft); flex-wrap: wrap;
  }
  .modal__foot .btn { flex: 1 1 auto; }
  .modal__foot .btn--danger { flex-basis: 100%; margin-right: 0; order: 3; }
  .i18n-grid { gap: 12px; }
  .lightbox { padding: 8px; }
  .lightbox__frame { max-height: 66dvh; }
  .lightbox__nav { width: 44px; height: 44px; }

  /* Planning : l'heure reste visible pendant le défilement horizontal */
  .planning__scroll { margin-left: -6px; margin-right: -6px; padding: 0 6px 6px; }
  .planning__hours, .planning__time { position: sticky; left: 0; z-index: 2; background: inherit; }
  .planning__table { font-size: .82rem; }
  .planning__slot { padding: 8px 9px; }
  .planning__slot strong { font-size: .84rem; }
  .planning__legend { gap: 8px 14px; }

  /* Calendrier du cours d'essai (7 colonnes) : cases plus petites mais nettes */
  .cal { padding: 12px 10px; border-radius: var(--radius); }
  .cal__mois { font-size: 1.15rem; }
  .cal__bar { flex-wrap: wrap; gap: 8px; }
  .cal__jours, .cal__grille { gap: 3px; }
  .cal__case { min-height: 42px; padding: 4px 2px; font-size: .78rem; border-radius: 8px; }
  .cal__case span { font-size: .62rem; }
  .cal__legende { font-size: .78rem; }

  /* Tableaux : chaque ligne devient une carte lisible (voir data-label) */
  .table-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tbody, .table-wrap tr, .table-wrap td, .table-wrap th { display: block; width: 100%; }
  .table-wrap tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    margin: 0 0 12px; padding: 6px 14px; box-shadow: var(--shadow-light);
  }
  .table-wrap td {
    border: 0; border-bottom: 1px dashed var(--line-soft); padding: 10px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right;
  }
  .table-wrap td:last-child { border-bottom: 0; }
  .table-wrap td::before {
    content: attr(data-label);
    flex: 0 0 42%; text-align: left;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--secondary-color);
  }
  .table-wrap td.row-actions { justify-content: flex-end; flex-wrap: wrap; }
  .table-wrap td.row-actions::before { content: 'Actions'; }
  .table-wrap img { max-width: 96px; }

  /* Pied de page et partage */
  .site-footer { padding-top: 40px; }
  .share-btn { width: 44px; height: 44px; }

  /* Images du club : cartes pleine largeur */
  .club-card, .venue, .trial-club { width: 100%; }
  .gallery-item__caption { font-size: .78rem; }

  /* Notifications : jamais plus larges que l'écran */
  #toasts { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); max-width: none; }
}

/* ==========================================================================
   8. Petit téléphone (≤ 480 px)
   ========================================================================== */

@media (max-width: 480px) {
  .section { padding: 40px 0; }
  .card__body { padding: 18px 15px; }
  .panel { padding: 15px; }
  .hero__inner { padding: 64px 0 50px; }
  .hero__stats { gap: 10px 14px; }
  .hero__stats b { font-size: 2rem; }
  .event-gallery-card { aspect-ratio: 3 / 4; }
  .event-nav { width: 38px; height: 38px; font-size: 1rem; }
  .gallery-marquee .gallery-item { flex: 0 0 78vw; width: 78vw; }
  .gallery-marquee .testimonial { flex: 0 0 86vw; width: 86vw; }
  .cal__case { min-height: 38px; font-size: .74rem; }
  .pill { font-size: .72rem; }
  /* Sous 480 px, tous les boutons passent en pleine largeur : plus faciles au pouce */
  .btn { width: 100%; justify-content: center; }
  .icon-btn, .btn--auto, .share-btn, .gallery-item__play, .cal__nav { width: auto; }
  .stat b { font-size: 1.8rem; }
  .divider { margin: 20px 0; }
}

/* ==========================================================================
   9. Téléphone pliable REFERMÉ / très petit écran (≤ 380 px)
      (Galaxy Z Flip fermé ≈ 344 px, Z Fold fermé ≈ 344 px, iPhone SE 375 px)
   ========================================================================== */

@media (max-width: 380px) {
  .container { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  body { font-size: 15.5px; }
  h1 { font-size: clamp(1.85rem, 10vw, 2.4rem); }
  h2 { font-size: clamp(1.45rem, 8vw, 1.9rem); }
  .brand__text small { display: none; }
  .brand__mark img { width: 46px; height: 46px; }
  .section { padding: 34px 0; }
  .grid { gap: 14px; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero__actions .btn { font-size: .95rem; }
  .gallery-marquee .gallery-item { flex: 0 0 84vw; width: 84vw; }
  .gallery-marquee .testimonial { flex: 0 0 90vw; width: 90vw; }
  .event-tab, .tabs button { padding: 9px 11px; font-size: .8rem; }
  .cal__case { min-height: 34px; font-size: .7rem; padding: 3px 1px; }
  .cal__case span { display: none; }
  .modal { padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); }
  .table-wrap td::before { flex-basis: 46%; font-size: .68rem; }
  .planning { padding: 14px 10px; }
}

/* ==========================================================================
   10. Écran externe de pliable et montres connectées (≤ 320 px)
       (Galaxy Z Fold fermé : 280 px de large)
   ========================================================================== */

@media (max-width: 320px) {
  .container { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.1rem; }
  .btn { padding: 12px 14px; }
  .hero__stats { grid-template-columns: 1fr; }
  .eyebrow { font-size: .64rem; }
  .gallery-marquee .gallery-item,
  .gallery-marquee .testimonial { flex: 0 0 88vw; width: 88vw; }
  .badge, .federation-badge { padding: 12px 10px; }
  .table-wrap td { display: block; text-align: left; }
  .table-wrap td::before { display: block; flex-basis: auto; margin-bottom: 3px; }
  .side-nav a, .side-nav button { font-size: .82rem; padding: 10px 11px; }
}

/* ==========================================================================
   11. Téléphone en paysage (hauteur réduite)
   ========================================================================== */

@media (max-height: 520px) and (orientation: landscape) {
  .hero__inner { padding: 56px 0 40px; }
  .hero__stats { display: none; }        /* hauteur précieuse : on garde l'essentiel */
  .cover-hero { min-height: 180px; padding: 76px 0 26px; }
  .section { padding: 30px 0; }
  .modal, .modal-backdrop { align-items: flex-start; }
  .modal { height: auto; max-height: 100dvh; overflow-y: auto; }
  .lightbox__frame { max-height: 58dvh; }
  .nav { max-height: calc(100dvh - 70px); }
}

/* ==========================================================================
   12. Téléphone pliable OUVERT / double écran (Surface Duo, Z Fold ouvert…)
   --------------------------------------------------------------------------
   Le navigateur expose la taille de chaque écran et la position de la
   charnière : on place les contenus côte à côte, sans jamais écrire dessus.
   ========================================================================== */

@media (horizontal-viewport-segments: 2), (screen-spanning: single-fold-vertical) {
  :root {
    --seg-1: env(viewport-segment-width 0 0);
    --seg-2: env(viewport-segment-width 1 0);
    --charniere: calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0));
  }
  .container {
    max-width: none;
    padding-left: calc(env(safe-area-inset-left) + 14px);
    padding-right: calc(env(safe-area-inset-right) + 14px);
  }

  /* Deux « pages » côte à côte, séparées par la charnière */
  .split,
  .grid--2,
  .venue__grid,
  .trial-clubs,
  .stat-grid,
  .site-footer__grid,
  .app-shell {
    display: grid;
    grid-template-columns: var(--seg-1) var(--seg-2);
    column-gap: max(16px, var(--charniere));
    align-items: start;
  }
  /* Les grilles de 3, 4 ou 5 restent dans chaque écran */
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Back-office et espace membre : menu dans le premier écran, contenu dans le second */
  .app-shell > .side-nav {
    margin: 0; align-self: start;
    position: sticky; top: 92px;
    display: block; overflow-x: visible;
    max-height: calc(100dvh - 116px); overflow-y: auto;
  }
  .app-shell > .side-nav a, .app-shell > .side-nav button { width: 100%; }
  .app-shell > div { min-width: 0; }

  /* Les bandeaux pleine largeur continuent de traverser les deux écrans */
  .gallery-marquee, .photo-marquee, .partner-marquee, .cta-band, .planning, .table-wrap {
    grid-column: 1 / -1;
  }
  /* Le diaporama d'accueil se cale sur la charnière : texte à gauche, visuel à droite */
  .hero__inner { max-width: var(--seg-1); }
  .federation-badge { max-width: 100%; }
  /* Cartes de la galerie : une par écran pour ne pas être coupées */
  .event-gallery-card { width: 100%; }
}

/* Diaporama sur téléphone et tablette : les flèches latérales chevauchaient
   le texte et les boutons — on les masque (balayage tactile + pastilles). */
@media (max-width: 1080px) {
  .hero__nav { display: none; }
}

@media (vertical-viewport-segments: 2), (screen-spanning: single-fold-horizontal) {
  :root {
    --seg-haut: env(viewport-segment-height 0 0);
    --seg-bas: env(viewport-segment-height 0 1);
    --pli: calc(env(viewport-segment-top 0 1) - env(viewport-segment-height 0 0));
  }
  /* Téléphone plié en deux (mode « Flex »/« table ») : média en haut,
     texte et boutons en bas, jamais sur le pli. */
  .hero,
  .cover-hero {
    display: grid;
    grid-template-rows: var(--seg-haut) var(--seg-bas);
    row-gap: max(8px, var(--pli));
    min-height: 100dvh;
    align-content: start;
  }
  .hero__slides { grid-row: 1; }
  .hero > .container { grid-row: 2; align-self: center; padding-top: 10px; padding-bottom: 10px; }
  .hero__inner { padding: 10px 0; }
  .hero__nav { top: 25%; }
  .hero__caption { display: none; }
  .cover-hero > .container { grid-row: 2; align-self: center; }

  /* Visionneuse : l'image reste dans l'écran du haut, les commandes en bas */
  .lightbox { align-items: start; padding-top: 6px; }
  .lightbox__panel { max-height: calc(var(--seg-haut) - 24px); }
  .lightbox__frame { max-height: calc(var(--seg-haut) - 90px); }

  /* Espace membre / back-office : menu en haut, contenu en dessous */
  .app-shell { display: grid; grid-template-rows: auto var(--seg-bas); row-gap: 10px; }
  .app-shell > .side-nav { position: static; max-height: none; }

  /* Fenêtres d'édition : formulaire dans la partie basse, qui défile */
  .modal-backdrop { align-items: start; padding-top: max(8px, var(--pli)); }
  .modal { max-height: var(--seg-bas); overflow-y: auto; }
}

/* ==========================================================================
   13. Impression (planning, fiche d'inscription…)
   ========================================================================== */

@media print {
  .site-header, .site-footer, #toasts, .burger, .lang-picker,
  .gallery-marquee, .photo-marquee, .partner-marquee, .hero__slides,
  .hero__nav, .event-nav, .share-bar, .cta-band, .lightbox, .modal-backdrop {
    display: none !important;
  }
  html, body { background: #fff; color: #000; }
  body { font-size: 12pt; }
  a { text-decoration: underline; }
  .section { padding: 0 0 12pt; }
  .section--black, .section--dark { background: #fff !important; color: #000 !important; }
  .section--black h1, .section--black h2, .section--black h3,
  .section--dark h2, .section--dark h3 { color: #000 !important; }
  .card, .panel, .table-wrap { box-shadow: none; border: 1px solid #999; }
  .planning__scroll { overflow: visible; }
  table { min-width: 0; font-size: 10pt; }
}

/* ==========================================================================
   14. Section « Nos instructeurs » (accueil)
   --------------------------------------------------------------------------
   · la SECTION est plus large que le reste du site (jusqu'à 1720 px) : il y a
     donc plus de place à gauche et à droite pour les fiches ;
   · 5 fiches par ligne, toutes de la même taille, avec la photo au-dessus du
     nom, de la fonction et du grade (mêmes fiches que la page Biographie) ;
   · la carte « Club affilié FFK » reste sur le côté droit de la section, à la
     hauteur des fiches.
   Sur un écran de 1760 px et plus, les fiches conservent exactement leur taille
   actuelle (~270 px) ; en dessous, elles se réduisent légèrement.
   ========================================================================== */

/* Section plus large que le reste du site (les autres sections gardent 1200 px) */
#instructeurs > .container { max-width: 1720px; }

#instructeurs .instructors-wrap { position: relative; }

@media (min-width: 1181px) {
  /* 5 fiches par ligne */
  #instructeurs .instructors-wrap > .grid--4 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 1fr;             /* toutes les fiches de la même hauteur */
  }
  /* Place réservée à droite pour la carte FFK : elle ne recouvre aucune fiche */
  #instructeurs .instructors-wrap { padding-right: 234px; }
  #instructeurs .instructors-wrap > .federation-badge {
    position: absolute; top: 0; right: 0;
    width: 210px; min-height: 300px; margin: 0;
  }
}

/* Sous 1180 px (tablette, téléphone) : la carte FFK passe sous les fiches, centrée */
@media (max-width: 1180px) {
  #instructeurs .instructors-wrap { padding-right: 0; }
  #instructeurs .instructors-wrap > .grid--4 { grid-auto-rows: 1fr; }
  #instructeurs .instructors-wrap > .federation-badge {
    position: static; width: auto; max-width: 260px; min-height: 0;
    margin: 30px auto 0;
  }
}

/* ── Fiches compactes de la page Biographie ──────────────────
   Elles gardent leur présentation d'origine (4 colonnes, carte centrée), avec
   la même taille pour toutes les fiches. */
.grid--4#instructors-host { grid-auto-rows: 1fr; }
.grid--4 .card.instructor {
  display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden;
}
.grid--4 .card.instructor img { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.grid--4 .card.instructor .card__body {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: flex-start; padding: 16px 14px; gap: 6px;
}
.grid--4 .card.instructor .card__title {
  font-size: 1.05rem; line-height: 1.2; min-height: 2.45em; margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.grid--4 .card.instructor .card__body > p.small {
  min-height: 1.4em; display: flex; align-items: center; justify-content: center;
}
.grid--4 .card.instructor .instructor__foot {
  margin-top: auto; padding-top: 8px; min-height: 42px; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}

/* ==========================================================================
   15. Fiche instructeur : lien facultatif (carte professionnelle, site…)
   ========================================================================== */

.instructor__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 107, 53, .12);
  border: 1px solid rgba(255, 107, 53, .45);
  color: var(--primary-dark);
  font-size: .74rem; font-weight: 700; line-height: 1.25;
  text-align: center; text-decoration: none;
  transition: var(--transition);
}
.instructor__link:hover { background: var(--gradient-primary); border-color: transparent; color: #fff; }
.instructor-card__link { margin-right: auto; }          /* en tête du pied de carte */
.instructor-card .card__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 480px) {
  .instructor__link { width: 100%; justify-content: center; }
  .instructor-card .card__foot .btn { width: 100%; }
}

/* ==========================================================================
   16. Cartes de formules : public / âge affiché sous le titre
   --------------------------------------------------------------------------
   La ligne est présente sur les 5 cartes, même vide, pour qu'elles restent
   alignées ligne à ligne (titre, âge, prix, description…).
   ========================================================================== */

.card__audience {
  margin: 0;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary-dark);
  text-align: center;
}

.grid--5 .card--pricing .card__audience { min-height: 1.35rem; }

@media (max-width: 640px) {
  .card__audience { font-size: .78rem; }
}

/* ==========================================================================
   16. Grade des fiches instructeurs : même couleur que le bouton
       « Carte professionnelle d'éducateur sportif » (voir .instructor__link)
   ========================================================================== */

.pill--grade {
  background: rgba(255, 107, 53, .12);
  border: 1px solid rgba(255, 107, 53, .45);
  color: var(--primary-dark);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
/* Plusieurs lignes dans la pastille (ex. « Ceinture noire 6e Dan » puis
   « 35 ans d'expérience ») : chaque partie reste sur sa propre ligne. */
.pill--grade .pill__ligne { display: block; }
.pill--grade:has(.pill__ligne) { border-radius: 14px; padding: 7px 14px; }


/* ==========================================================================
   17. Bandeau « La vie de l'Academy en images » : cartes toutes identiques
   --------------------------------------------------------------------------
   Chaque photo est recadrée dans le même rectangle (3/2), quel que soit le
   format d'origine (portrait, paysage, panoramique) : le bandeau reste régulier.
   ========================================================================== */

.photo-marquee__item {
  width: 250px;
  aspect-ratio: 3 / 2;              /* rectangle identique pour toutes les photos */
}
.photo-marquee__item img {
  width: 100%; height: 100%;
  max-width: none;                  /* plus de largeur variable */
  object-fit: cover;
}
.photo-marquee__item span { padding: 16px 10px 7px; }

@media (max-width: 900px) {
  .photo-marquee__item { width: 215px; }
}
@media (max-width: 480px) {
  .photo-marquee__item { width: 180px; }
}

/* ==========================================================================
   18. Fiches instructeurs : clic vers la biographie
   ========================================================================== */

.card[data-bio] { cursor: pointer; }
.instructor__bio-link { color: inherit; text-decoration: none; }
.instructor__bio-link:hover, .card[data-bio]:hover .instructor__bio-link {
  color: var(--primary-dark);
  text-decoration: underline;
}
.card[data-bio]:focus-within { outline: 2px solid var(--primary-color); outline-offset: 3px; }