/* ============================================================
   responsive.css — Tablette & mobile, refonte lisibilité.
   Breakpoints : Mobile ≤767 · Tablette 768–1199 · Desktop ≥1200.
   ⚠️ Le DESKTOP (≥1200, pointeur souris) n'est JAMAIS touché.
   Chargé APRÈS styles.css → surcharge les règles ≤900/≤980/≤860.
   Choix mobiles assumés (différents du desktop) :
   - onglets HORIZONTAUX en haut (Projets, À propos) au lieu des rails verticaux ;
   - la page entière défile (plus de zones à scroll interne) ;
   - tout ce qui n'apparaissait qu'au survol est visible ou déclenchable au tap.
   ============================================================ */

/* ---------- BURGER + PANNEAU LATÉRAL (injectés par responsive.js) ---------- */
.topbar__burger {
  display: none; /* visible uniquement en mobile (≤767) */
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 7px;
  background: none; border: 0; cursor: pointer; z-index: 60;
  color: var(--font-primary);
}
.topbar__burger svg { width: 30px; height: 30px; display: block; }
/* Blanc sur l'accueil (hero bleu) ; noir dès que l'en-tête blanchit + sur les autres pages. */
.topbar--over-blue .topbar__burger { color: var(--font-white); }
.topbar--over-blue.is-stuck .topbar__burger { color: var(--font-primary); }

.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 54; background: rgba(11,21,64,.55);
  opacity: 0; visibility: hidden; transition: opacity .38s ease;
}
.mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
  width: min(80%, 380px); background: var(--surface-primary);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-32);
  padding: calc(var(--topbar-h-m, 61px) + var(--space-24)) var(--space-32) var(--space-40);
  transform: translateX(100%); transition: transform .4s cubic-bezier(.5,0,.2,1), visibility 0s linear .4s;
  pointer-events: none; visibility: hidden; box-shadow: -24px 0 60px rgba(11,21,64,.18);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { transform: translateX(0); pointer-events: auto; visibility: visible; transition: transform .4s cubic-bezier(.5,0,.2,1), visibility 0s linear 0s; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: var(--space-4); }
.mobile-menu__nav a {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(26px, 8vw, 38px);
  color: var(--font-primary); text-decoration: none; line-height: 1.15; padding: var(--space-6) 0;
}
.mobile-menu__nav a[aria-current="page"] { color: var(--font-blue); }
.mobile-menu__contacts { display: flex; flex-direction: column; gap: var(--space-32); }
.mobile-menu__contact { margin: 0; }
.mobile-menu__contact dt {
  font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--font-muted); margin-bottom: var(--space-4);
}
.mobile-menu__contact dd { margin: 0; }
.mobile-menu__contact dd a { font-family: var(--font-body); font-size: 16px; color: var(--font-primary); text-decoration: none; overflow-wrap: anywhere; }
.mobile-menu__contact--email dd a { text-decoration: underline; text-underline-offset: 3px; }
.mobile-menu__close {
  position: absolute; top: var(--space-12); right: var(--space-16);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: var(--font-primary); cursor: pointer;
}
.mobile-menu__close svg { width: 26px; height: 26px; display: block; }
body.menu-open { overflow: hidden; }

/* ============================================================
   TACTILE (hover: none) — rien ne dépend du survol.
   S'applique à tout appareil sans souris, quelle que soit sa largeur.
   ============================================================ */
@media (hover: none) {
  /* Épingles des visuels de projet : toujours visibles. */
  .proj-frame__pin { opacity: 1; transform: none; pointer-events: auto; }
  /* Épingles (mur) : labels + bouton retirer toujours visibles. */
  .pin-card .explo-cat, .pin-card .explo-actions { opacity: 1; transform: none; pointer-events: auto; }
  .pin-remove { opacity: 1; }
  /* Flèches internes des CTAs : l'état repos suffit. */
  /* Vidéos : les bandes capte-molette bloqueraient le tap → désactivées. */
  .proj-frame__wheel { pointer-events: none !important; }
  /* Fond fixe (parallaxe) : bugué sur iOS → défile avec la page. */
  .home { background-attachment: scroll, scroll; }
}

/* ============================================================
   TABLETTE + MOBILE (≤1199)
   ============================================================ */
@media (max-width: 1199px) {
  html, body { overflow-x: clip; }

  .topbar { padding-inline: var(--space-40); }

  /* À PROPOS (tablette) : panneau bleu + rail vertical + contenu à côté. */
  .frame--fixed { height: 100vh; min-height: 100vh; overflow: hidden; }
  .about { flex-direction: row; }
  .about__hero { flex: 0 0 38%; min-height: 0; }
  .about__rail {
    flex-direction: column; justify-content: center;
    border-left: 1px solid var(--stroke-primary); border-right: 1px solid var(--stroke-primary); border-bottom: 0;
    gap: clamp(var(--space-32), 7vh, var(--space-96)); padding: 0;
  }
  .about-tab { writing-mode: vertical-rl; transform: rotate(180deg); }
  .about__star { display: block; }
  .about__panel { overflow-y: auto; padding: var(--space-32); }

  /* CONTACT (tablette) : on garde les 2 colonnes. */
  .contact { flex-direction: row; }
  .contact__left, .contact__right { flex-basis: 42%; }
  .contact__divider { display: block; }
  .contact__right { overflow-y: auto; }

  /* PROJETS (tablette) : rail vertical conservé, grille 2 colonnes. */
  .frame--fixed .page-head { padding: var(--space-32) var(--space-40) var(--space-24) var(--space-40); }
  .projets-scroll { padding: 0 var(--space-40) var(--space-40) var(--space-40); }
  .page-breadcrumb--projets { padding: 20px var(--space-40) 0 var(--space-40); }
  .grille { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }

  /* PAGES PROJET : marges du déroulé réduites. */
  .proj-deroule { padding-inline: var(--space-48); }
}

/* ---------- TABLETTE (768–1199) : échelle typo légèrement réduite ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  #projets-titre { font-size: 34px !important; }
  .about__wordmark, .contact__wordmark { font-size: 34px; }
  .about__panel h2 { font-size: 26px; }
}

/* ============================================================
   MOBILE (≤767) — la page défile, onglets horizontaux, typo à
   l'échelle, marges 20px, zones tactiles ≥44px.
   ============================================================ */
@media (max-width: 767px) {
  :root { --topbar-h-m: 61px; }

  /* — En-tête compact : logo + burger. — */
  .topbar { padding-block: var(--space-8); padding-inline: 20px; min-height: var(--topbar-h-m); }
  .topbar .logo__mark { width: 40px; height: 22px; }
  .topbar .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar__nav { display: none; }
  .topbar__burger { display: inline-flex; }

  /* — Toutes les pages défilent normalement (fin des scrolls internes). — */
  .frame--fixed { height: auto; min-height: 100svh; overflow: visible; display: flex; flex-direction: column; }
  .about__panel, .contact__right { overflow: visible; }
  .projets-scroll { overflow: visible; }

  /* ==================== ACCUEIL ==================== */
  /* Ordre de lecture : nom → rôle → accroche + CTA → vignettes. */
  .home-hero { min-height: calc(100svh - var(--topbar-h-m, 61px)); padding: var(--space-24) 20px 32px; }
  .home-hero__grid { display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 100%; }
  .hcol { display: contents; }
  .home-hero [data-reveal="1"] { order: 1; }
  .home-hero [data-reveal="2"] { order: 2; }
  .home-hero [data-reveal="6"] { order: 3; }
  /* Cartes projet : RANGÉE HORIZONTALE. Carte 1 visible, cartes 2 & 3 à droite,
     hors cadre. Pendant l'intro, le scroll vertical translate la piste (les cartes
     glissent depuis la droite) ; l'intro finie, la rangée devient navigable au doigt. */
  #home-vignettes { order: 4; margin-top: var(--space-16); display: block; overflow: hidden; width: 100%; }
  .home-vign-track { display: flex; gap: 14px; will-change: transform; }
  .home-vign-track > .vignette { flex: 0 0 calc(100% - 40px); }
  #home-vignettes.is-swipeable { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #home-vignettes.is-swipeable::-webkit-scrollbar { display: none; }
  #home-vignettes.is-swipeable .home-vign-track { transform: none !important; }
  #home-vignettes.is-swipeable .home-vign-track > .vignette { scroll-snap-align: start; }
  .scroll-cue { display: none; }

  /* Le nom (Syne, capitales) ne doit jamais dépasser : « FIRPIONN » (8 lettres,
     ~8.3 em de large) est le mot le plus long → on dimensionne pour qu'il tienne
     dans la largeur d'écran moins les marges. */
  .home-title { font-size: clamp(22px, calc((100vw - 44px) / 9), 58px); line-height: 1.02; white-space: normal; overflow-wrap: normal; }
  .home-role { margin-top: 0; text-align: left; font-size: 20px; line-height: 1.2; opacity: .92; }
  .home-accroche { gap: var(--space-24); max-width: none; }
  .home-accroche p { font-size: 16px; line-height: 1.65; }
  .home-cta { min-height: 48px; }
  .vignette__img { height: clamp(138px, 38vw, 190px); }
  .vignette__name { font-size: 16px; }
  .vignette__cat { font-size: 13px; }

  /* — Footer : nom entier → rôle → coordonnées → LinkedIn → menu. — */
  .footer-blue { display: flex; flex-direction: column; gap: var(--space-40); padding: 56px 20px var(--space-40); }
  .footer-blue__top, .footer-blue__bottom { display: contents; }
  .footer-blue__logo { display: none; }
  .footer-blue__wordmark { order: 1; font-size: clamp(28px, 9.5vw, 60px); line-height: .94; max-width: 100%; }
  .footer-blue__wm { max-width: 100%; overflow-wrap: normal; }
  .footer-blue__role { order: 2; text-align: left; justify-self: start; font-size: 20px; }
  .footer-blue__coords { order: 3; grid-template-columns: auto 1fr; column-gap: var(--space-16); }
  .footer-blue__coords dt, .footer-blue__coords dd { font-size: 16px; line-height: 26px; overflow-wrap: anywhere; }
  .footer-blue__coords dd a { display: inline-block; padding-block: var(--space-4); }
  .footer-blue__social { order: 4; }
  .footer-blue__social a { display: inline-block; padding: var(--space-8) 0; font-size: 15px; }
  .footer-blue__menu { order: 5; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-inline: calc(-1 * var(--space-8)); }
  .footer-blue__menu a { padding: 10px var(--space-8); }

  /* ==================== PROJETS ==================== */
  /* Onglets HORIZONTAUX sous l'en-tête, collants ; la page défile. */
  .page-shell { flex-direction: column; }
  .rail {
    position: sticky; top: calc(var(--topbar-h-m) - 1px); z-index: 10;
    flex: 0 0 auto; width: 100%; align-self: auto;
    flex-direction: row; align-items: stretch; justify-content: space-around;
    gap: 0; padding: 0 var(--space-8);
    background: var(--surface-primary);
    border-right: 0; border-bottom: 1px solid var(--stroke-primary);
  }
  .rail__item {
    flex: 1 1 0; flex-direction: column; justify-content: center; gap: var(--space-6);
    min-height: 56px; padding: var(--space-8) var(--space-4);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .rail__item.is-active { border-bottom-color: var(--font-primary); }
  .rail__item svg { width: 20px; height: 20px; transform: rotate(90deg); }
  .rail__item span { writing-mode: horizontal-tb; transform: none; font-size: 10px; letter-spacing: .08em; }

  .page-breadcrumb--projets { padding: var(--space-16) 20px 0 20px; }
  .frame--fixed .page-head { padding: 20px 20px var(--space-24); }
  .page-head { grid-template-columns: 1fr; gap: var(--space-12); margin-bottom: 0; }
  #projets-titre { font-size: 30px !important; line-height: 1.05; }
  .page-head h1 { font-size: 30px; line-height: 1.05; }
  .page-head__intro { font-size: 15px; line-height: 1.55; color: var(--font-primary-subtle); }
  .projets-scroll { padding: 0 20px var(--space-48); }

  /* — GRILLE : bande horizontale (balayage au doigt) — 1 carte + moitié de la suivante. — */
  .grille {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 66%;
    gap: 14px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin-top: var(--space-24); margin-right: -20px; padding: 4px 0 12px; scrollbar-width: none;
  }
  .grille::-webkit-scrollbar { display: none; }
  .grille .card { scroll-snap-align: start; }

  /* — LISTE : carte empilée (photo → titre → sujet → problématique → catégorie). — */
  .ligne { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0 0 var(--space-32); gap: var(--space-8); }
  .ligne:hover { background: none; }
  .ligne__thumb { width: 100%; height: clamp(180px, 48vw, 240px); align-self: stretch; }
  .ligne__name { align-self: stretch; padding: var(--space-8) 0 0; font-size: 17px; line-height: 1.25; }
  .ligne__body { align-self: stretch; padding-block: 0; gap: var(--space-6); }
  .ligne__sous { display: block; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--font-primary); }
  .ligne__accroche { font-size: 14px; line-height: 1.5; color: var(--font-primary-subtle); max-width: none; }
  .ligne .tag { display: inline-flex; align-self: flex-start; margin-top: var(--space-4); }

  /* — EXPLORATION : bande horizontale conservée (balayage au doigt),
       hauteurs bornées ; le tap active la carte et révèle ses labels. — */
  .vue[data-vue="exploration"].is-active { height: auto; min-height: 0; }
  .projets-scroll.is-exploration { padding-inline: 0; }
  .exploration { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--space-24) 20px var(--space-40); }

  /* — ÉPINGLES : barre (recherche + « + » sur UNE ligne) ; mur bento 2 colonnes. — */
  .epingles__bar { position: static; flex-wrap: nowrap; gap: var(--space-12); padding-block: var(--space-16) var(--space-24); }
  .epingles__search { flex: 1 1 auto; min-width: 0; padding: var(--space-12) var(--space-16); }
  .epingles__search input { font-size: 15px; }
  .epingles__count { font-size: 15px; }
  .epingles__add { flex: 0 0 auto; width: 46px; height: 46px; }
  .epingles__wall { columns: 2; column-gap: 10px; }
  .epingles__wall .pin-card { margin-bottom: 10px; }
  .epingles__wall .pin-card img { min-height: 0; }
  /* Aucun label sur la card (image maximale) ; tous les labels reviennent au tap → lightbox. */
  .pin-card .explo-cat, .pin-card .explo-actions { display: none; }
  .epingles__empty { display: block; }
  .epingles__empty-card { min-height: 320px; }
  .epingles__sep { display: none; }
  .epingles__pistes { display: block; height: auto; padding-left: 0; margin-top: var(--space-32); }
  .epingles__pistes h3 { white-space: normal; }
  .piste { flex: none; min-height: 88px; }
  .projets-scroll.is-epingles-empty { overflow: visible; display: block; }

  /* Visuel ouvert en grand : labels qui passent à la ligne, marges sûres. */
  .vis-lightbox { padding: var(--space-16); }
  .vis-lightbox__img { max-width: 94vw; max-height: 72vh; }
  .vis-lightbox .explo-pill--cat span { white-space: normal; }

  /* ==================== À PROPOS ==================== */
  /* Bande titre bleue compacte → onglets horizontaux → contenu pleine largeur. */
  .about { display: flex; flex-direction: column; }
  .about__hero {
    flex: none; min-height: 0; height: auto;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--space-8); padding: 20px 20px var(--space-24);
  }
  .page-breadcrumb--over { position: static; }
  .about__wordmark { font-size: clamp(24px, 7.5vw, 32px); line-height: 1.02; }
  .about__rail {
    flex: none; flex-direction: row; align-items: stretch; justify-content: space-between;
    gap: 0; padding: 0 var(--space-8);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border: 0; border-bottom: 1px solid var(--stroke-primary);
    position: sticky; top: calc(var(--topbar-h-m) - 1px); z-index: 10; background: var(--surface-primary);
  }
  .about__rail::-webkit-scrollbar { display: none; }
  .about-tab {
    writing-mode: horizontal-tb; transform: none;
    flex: 1 1 auto; min-height: 48px; padding: var(--space-12) var(--space-6);
    font-size: 12px; letter-spacing: .02em; text-align: center; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .about-tab.is-active { border-bottom-color: var(--font-primary); }
  .about__star { display: none; }
  .about__panel { padding: var(--space-24) 20px var(--space-48); }
  .about__panel h2 { font-size: 24px; margin-bottom: var(--space-24); }
  .about-profil__lead { font-size: 17px; line-height: 1.55; margin-bottom: var(--space-24); }
  .about-profil p.body { font-size: 15px; line-height: 1.65; margin-bottom: var(--space-16); }
  .about-profil .btn { min-height: 48px; }
  .about-coords { flex-direction: column; gap: var(--space-24); padding-top: var(--space-40); }

  /* Frises (formations / expériences) : date au-dessus du contenu, sur UNE ligne. */
  .tl__row { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24) 0; }
  .tl__when { width: auto !important; font-weight: 600; color: var(--font-blue); white-space: nowrap; }
  .tl__when br { display: none; }
  .tl__what h3 { font-size: 17px; line-height: 1.25; }
  .tl__what p, .tl__what li { font-size: 14px; line-height: 1.55; }
  .skills__group { margin-bottom: var(--space-32); }
  .skills__tags { gap: var(--space-8); }
  .skills__tags .tag { padding: 10px var(--space-16); }

  /* ==================== CONTACT ==================== */
  .contact { flex-direction: column; }
  .contact__left, .contact__right { flex-basis: auto; }
  .contact__divider { display: none; }
  .contact__left { padding: 20px 20px var(--space-32); }
  .page-breadcrumb--contact { position: static; margin: 0 0 20px; }
  .dispo-card { width: min(320px, 100%); }
  .contact__brand { margin-top: var(--space-40); }
  .contact__role { font-size: 20px; }
  .contact__wordmark { font-size: 28px; }
  .contact__right { padding: var(--space-32) 20px var(--space-48); }
  /* Plus d'air entre le paragraphe « À propos » et le module formulaire. */
  .contact__about { margin-bottom: var(--space-40); }
  .contact__head h2 { font-size: 20px; }
  .contact__intro { grid-template-columns: 1fr; gap: var(--space-16); }
  .contact__intro p { font-size: 15px; line-height: 1.6; }
  .contact-form { grid-template-columns: 1fr; row-gap: var(--space-24); }
  .field__input { font-size: 16px; padding: var(--space-12) 0; }
  .contact-form__actions { grid-template-columns: 1fr; row-gap: var(--space-16); }
  .contact-form__actions .btn--submit { width: 100%; justify-content: center; min-height: 52px; }
  .contact-form__note { max-width: none; }
  .contact__coords { flex-direction: column; gap: var(--space-24); margin-top: var(--space-48); }

  /* ==================== PAGES PROJET ==================== */
  /* Fil d'Ariane SOUS le panneau de description (masqué quand le pop-up s'ouvre). */
  .proj-breadcrumb { top: var(--space-16); left: var(--space-16); height: 36px; font-size: 13px; z-index: 1; }
  /* Index vertical + onglets (Contexte / Problématique / Note) : texte réduit. */
  .proj-hero { --index-w: 46px; }
  .proj-hero__tab { font-size: 11px; letter-spacing: .06em; }
  /* Pop-up de description : moins de marge à droite → le texte occupe plus de largeur. */
  .proj-hero__panel-inner { width: calc(100vw - var(--index-w) - 40px); padding: var(--space-24) 20px; }
  .proj-hero__index-tabs { gap: clamp(var(--space-24), 6vh, var(--space-48)); }
  /* CTAs : le nom + la pagination prennent toute la largeur ; « Découvrez » masqué en mobile. */
  .proj-hero__ctas { left: var(--space-16); right: calc(var(--index-w, 46px) + var(--space-12)); bottom: var(--space-16); }
  .hero-cta { min-height: 44px; }
  .hero-cta-row { grid-template-columns: 1fr; }
  .hero-cta--discover { display: none; }
  .hero-cta--pager { width: 100%; justify-content: space-between; }
  .proj-title { padding-block: var(--space-48); }
  .proj-title h1 { font-size: clamp(40px, 14vw, 72px); }
  .proj-deroule { padding-inline: 20px; padding-block: var(--space-40); gap: var(--space-24); }
  /* Frames annotées (Make Ici) : sur mobile, on rogne l'image pour masquer le texte
     de légende intégré, en ne gardant que le visuel (logo / alphabet / formes). */
  .proj-frame--cropped { overflow: hidden; aspect-ratio: var(--crop-ar, 1); }
  .proj-frame--cropped img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .proj-frame--crop-left img { object-position: left center; }
  .proj-frame--crop-right img { object-position: right center; }
  /* Contexte (vrai texte) : bande pleine largeur, texte à 20px des bords, empilé et fluide. */
  .proj-deroule .proj-context { margin-inline: -20px; padding-block: var(--space-48); aspect-ratio: auto; display: block; }
  .proj-context .container { max-width: none; padding-inline: 20px; }
  .proj-context__grid { display: flex; flex-direction: column; gap: var(--space-24); }
  .proj-context__p1 { text-indent: 0; }
  .proj-block__lead { font-size: 16px; line-height: 1.6; }
  .proj-block__corps, .proj-hero__panel-body { font-size: 15px; line-height: 1.65; }
  .proj-frame figcaption { font-size: 13px; }
  .proj-context__cta { min-height: 44px; }
  /* Navigation bas de page : précédent / suivant EMPILÉS, pleine largeur. */
  .proj-nav { flex-direction: column; align-items: stretch; gap: var(--space-12); padding-block: var(--space-32) var(--space-48); }
  .proj-nav__prev, .proj-nav__next { width: 100%; justify-content: center; min-height: 52px; }
  .proj-nav a small { display: none; }
  /* Retour haut de page : bouton flottant collant en bas à droite, dès qu'on défile. */
  .proj-nav a.proj-nav__top {
    position: fixed; right: 16px; bottom: 16px; z-index: 45;
    width: 50px; height: 50px; padding: 0; min-height: 0;
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,.26);
  }
  body.show-top .proj-nav__top { opacity: 1; visibility: visible; transform: none; }
}