/* =========================================================
   VDP WORKS — couche interactive TÉLÉPHONE (≤ 700 px)
   Fonctionne avec assets/js/mobile.js (classe .m-js sur <html>).
   Fil conducteur graphique : les traits verticaux |
   ========================================================= */

/* Zones de sécurité (encoche en haut, barre d'accueil en bas).
   Le site s'affiche bord à bord (viewport-fit=cover) ; seuls les
   textes et boutons sont décalés de ces marges. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 700px) {

  /* ---------- Éléments remplacés par le menu mobile ---------- */
  .m-js .home-nav,
  .m-js .corner-nav,
  .m-js .project-nav,
  .m-js .back-link,
  .m-js .lang,
  .cv-cities { display: none; }   /* sur téléphone : liste des villes en bas (m-cities) */

  /* pas de glisser-déposer natif des images (sinon le swipe à la souris est bloqué) */
  .m-js img { -webkit-user-drag: none; user-select: none; }

  /* ---------- Fondu entre les pages ---------- */
  .m-js body { animation: m-in .5s ease both; }
  .m-js.m-leaving body { opacity: 0; transition: opacity .28s ease; }
  @keyframes m-in { from { opacity: 0; } to { opacity: 1; } }

  /* =======================================================
     A. BOUTON + MENU PLEIN ÉCRAN
     ======================================================= */
  .m-menu-btn {
    position: fixed;
    top: calc(var(--safe-t) + 14px);
    left: 12px;
    z-index: 1200;
    padding: 8px 4px;
    background: none;
    border: 0;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--red);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .m-menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: calc(var(--safe-t) + 90px) 22px calc(var(--safe-b) + 26px);
    background: rgba(25, 25, 25, .82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
  }
  .m-menu-open .m-menu { opacity: 1; visibility: visible; }
  .m-menu-open body { overflow: hidden; }

  .m-menu__list { list-style: none; margin: 0; padding: 0; }
  .m-menu__item {
    border-left: 1px solid rgba(170, 25, 23, .55);   /* trait vertical signature */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i) * 70ms);
  }
  .m-menu-open .m-menu__item { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i) * 70ms); }
  .m-menu__item + .m-menu__item { margin-top: 6px; }
  .m-menu__link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 6px 0 6px 14px;
    background: none;
    border: 0;
    text-align: left;
    color: var(--off);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-menu__num {
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--red);
  }
  .m-menu__label {
    font-family: var(--font-haas);
    font-size: 13vw;
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.035em;
    transition: color .25s ease, transform .3s ease;
  }
  .m-menu__link:active .m-menu__label { color: var(--red); transform: translateX(6px); }

  .m-menu__langs {
    display: flex;
    gap: 12px;
    margin-top: auto;
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--red);
  }
  .m-menu__langs a { color: rgba(244,244,242,.5); }
  .m-menu__langs a.is-current { color: var(--red); }
  .m-menu__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(244,244,242,.1);
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(244,244,242,.5);
  }

  .m-sep { color: var(--red); opacity: .7; }

  /* =======================================================
     B. ACCUEIL
     ======================================================= */
  .m-js .home .blur-title {
    display: flex;
    flex-direction: column;
    left: 10px; right: 10px; bottom: calc(var(--safe-b) + 96px);
    font-size: 22.5vw;
    line-height: .82;
    letter-spacing: -.055em;
    text-align: left;
    /* flou comme sur ordinateur (proportionné à la taille du téléphone) */
    filter: blur(4px);
    opacity: .75;
  }
  .m-js .home .blur-title span:last-child { align-self: flex-end; }
  /* respiration légère du flou, rappel du titre flou de la version ordinateur */
  @keyframes m-breathe {
    0%, 100% { filter: blur(0); opacity: .9; }
    50%      { filter: blur(2.5px); opacity: .75; }
  }

  /* ----- Règle graduée en bas de l'accueil ----- */
  .m-slides {
    position: absolute;
    left: 14px; right: 14px; bottom: calc(var(--safe-b) + 12px);
    z-index: 8;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--red);
  }
  .m-slides__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .m-ruler {
    display: flex;
    align-items: flex-end;
    height: 30px;
  }
  .m-ruler__seg {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* = STEPS dans mobile.js */
    align-items: end;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-ruler__mark {
    display: block;
    width: 1px;
    height: 9px;
    background: rgba(244,244,242,.6);
    transition: background .35s ease, height .35s ease;
  }
  .m-ruler__mark.is-major { height: 22px; background: rgba(244,244,242,.9); }
  .m-ruler__mark.is-end { flex: none; }
  /* images déjà vues : traits pleins */
  .m-ruler__seg.is-past .m-ruler__mark { background: rgba(244,244,242,.9); }
  /* image en cours : grand trait rouge, puis les petits se remplissent un à un */
  .m-ruler__seg.is-on .m-ruler__mark.is-major { height: 30px; background: var(--red); }
  .is-running .m-ruler__seg.is-on .m-ruler__mark:not(.is-major) {
    animation: m-mark .3s ease forwards;
    animation-delay: calc(var(--k) * 1s);   /* 4 s au total */
  }
  @keyframes m-mark { to { background: var(--red); height: 14px; } }

  .m-tick {
    position: relative;
    width: 14px;                  /* zone tactile */
    height: 26px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* le trait vertical */
  .m-tick::before, .m-tick::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 12px;
    background: rgba(244,244,242,.55);
    transition: height .4s ease, background .4s ease;
  }
  .m-tick::after { height: 0; background: var(--red); }
  .m-tick.is-on::before { height: 26px; background: rgba(170,25,23,.3); }
  /* l'actif se remplit en rouge pendant les 4 s */
  .is-running .m-tick.is-on::after { animation: m-fill 4s linear forwards; }
  @keyframes m-fill { from { height: 0; } to { height: 26px; } }

  .m-slides__hint {
    color: rgba(244,244,242,.75);
    font-size: 9px;
    transition: opacity .6s ease;
    animation: m-nudge 1.8s ease-in-out infinite;
  }
  .m-slides__hint.is-gone { opacity: 0; animation: none; }
  @keyframes m-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

  /* =======================================================
     C. PROJETS : un projet par écran
     ======================================================= */
  .m-js .projects, .m-js .projects__sticky { height: 100dvh; min-height: 0; overflow: hidden; }
  .m-js .projects__row {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
  }
  .m-js .card {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .m-js .card img { transform: scale(1.12); transition: transform 7s cubic-bezier(.2,.6,.2,1), filter .6s ease; filter: brightness(.82); }
  .m-js .card.is-active img { transform: scale(1); filter: brightness(.92); }
  /* dégradé pour la lisibilité du titre */
  .m-js .card::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(15,15,15,.75));
    pointer-events: none;
  }
  .m-js .card__name {
    z-index: 2;
    left: 16px; right: 40px; bottom: calc(var(--safe-b) + 82px);
    font-size: 12.5vw;
    line-height: .9;
    font-weight: 500;
    letter-spacing: -.04em;
    white-space: normal;
    color: var(--off);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease .15s, transform .8s cubic-bezier(.2,.7,.2,1) .15s;
  }
  .m-js .card.is-active .card__name { opacity: 1; transform: none; }
  .m-card__num, .m-card__cta {
    position: absolute;
    z-index: 2;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--red);
  }
  .m-card__num { left: 16px; bottom: calc(var(--safe-b) + 82px + 12.5vw * 1.9 + 14px); opacity: .9; }
  .m-card__cta { left: 16px; bottom: calc(var(--safe-b) + 44px); color: var(--off); opacity: 0; transition: opacity .6s ease .45s; }
  .m-js .card.is-active .m-card__cta { opacity: .85; }

  /* rail vertical de progression, à droite */
  .m-rail {
    position: fixed;
    right: 8px;
    top: 50%;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-50%);
  }
  .m-rail .m-tick::before { left: 50%; bottom: 3px; }
  .m-rail .m-tick.is-on::before { background: var(--red); }

  .m-proj-count {
    position: fixed;
    top: calc(var(--safe-t) + 22px);
    right: 14px;
    z-index: 30;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--red);
  }
  .m-proj-hint {
    position: fixed;
    right: 14px;
    bottom: calc(var(--safe-b) + 44px);
    z-index: 30;
    font-family: var(--font-nav);
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(244,244,242,.75);
    transition: opacity .5s ease;
    animation: m-bob 1.8s ease-in-out infinite;
  }
  .m-proj-hint.is-gone { opacity: 0; animation: none; }
  @keyframes m-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

  /* =======================================================
     D. PAGE PROJET
     ======================================================= */
  .m-js .project { padding-top: calc(var(--safe-t) + 54px); padding-bottom: calc(var(--safe-b) + 50px); }
  .m-js .project__title {
    margin-top: 28px;
    font-family: var(--font-haas);
    font-size: 15vw;
    line-height: .9;
    letter-spacing: -.03em;
    text-align: left;
  }
  .m-js .project__title--small { font-size: 11vw; }
  .m-js .project__question { text-align: left; font-size: 13px; letter-spacing: 2px; }
  .m-js .project__text { text-align: left; font-size: 12px; line-height: 1.55; letter-spacing: .3px; }
  .m-js .project__info {
    text-align: left;
    padding-left: 10px;
    border-left: 1px solid var(--red);    /* trait vertical signature */
    line-height: 1.7;
  }
  .m-js .project__img--hero, .m-js .project__img--large {
    width: calc(100% + 32px);
    margin-left: -16px;
    aspect-ratio: 4 / 5;
  }
  .m-js .project__grid { gap: 10px; }
  .m-js .project__grid .project__img:nth-child(3n+1) { width: 100%; aspect-ratio: 16 / 10; }

  /* barre du haut floutée quand on défile */
  .m-js.m-scrolled .m-menu-btn {
    background: rgba(25,25,25,.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 8px 10px;
    border-radius: 3px;
  }

  /* fil de lecture : trait vertical rouge qui se remplit */
  .m-thread {
    position: fixed;
    top: 0; left: 0;
    z-index: 900;
    width: 2px;
    height: 100vh;
    background: var(--red);
    transform-origin: top;
    transform: scaleY(0);
    pointer-events: none;
  }

  /* apparition au défilement */
  .m-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
  .m-reveal.is-in { opacity: 1; transform: none; }

  /* projet suivant */
  .m-next {
    display: block;
    position: relative;
    margin: 70px -16px 0;
    padding: 34px 16px 40px;
    border-top: 1px solid rgba(170,25,23,.5);
    color: var(--off);
  }
  .m-next__label {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--red);
  }
  .m-next__name {
    display: block;
    padding-right: 40px;
    font-family: var(--font-haas);
    font-size: 13vw;
    line-height: .9;
    font-weight: 500;
    letter-spacing: -.04em;
  }
  .m-next__arrow {
    position: absolute;
    right: 16px;
    bottom: 40px;
    font-size: 28px;
    color: var(--red);
    transition: transform .3s ease;
  }
  .m-next:active .m-next__arrow { transform: translateX(6px); }
  .m-all {
    display: block;
    padding: 18px 0 10px;
    text-align: center;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--red);
  }

  /* visionneuse */
  .lightbox img { max-width: 100vw; max-height: 78vh; }
  .lightbox__prev, .lightbox__next { display: none; }   /* on glisse au doigt */
  .lightbox .close-btn { top: calc(var(--safe-t) + 14px); right: 14px; }
  .lightbox__count { bottom: calc(var(--safe-b) + 30px); }

  /* =======================================================
     E. CV
     ======================================================= */
  /* overflow: clip empêche la page de "glisser" de côté quand on touche une ville */
  .m-js .cv { min-height: 0; height: 100dvh; overflow: clip; }
  /* titre flou, comme sur ordinateur */
  .m-js .cv .blur-title { top: calc(var(--safe-t) + 52px); filter: blur(4px); opacity: .75; }

  /* Constellation centrée et agrandie.
     Repère SVG 1600 × 900 ; les villes occupent x 420→820 (centre 620), y 300→570 (centre 435).
     Échelle : 260vw / 1600 = 0,1625vw par unité.
     left = 50vw − 620 × 0,1625vw ; top = 44dvh − 435 × 0,1625vw */
  .m-js .constellation {
    left: calc(50vw - 100.75vw);
    top: calc(44dvh - 70.69vw);
    width: 260vw;
    height: 146.25vw;
  }
  /* variante carte : centrée dans l'espace entre le titre et la liste des villes */
  /* plus large que l'écran : les bords fondus débordent et la carte se fond dans la page */
  .m-js .constellation.is-map {
    left: -15vw;
    width: 130vw;
    top: calc(var(--safe-t) + 105px);
    height: calc(100dvh - var(--safe-t) - var(--safe-b) - 105px - 150px);
  }

  /* ---------- CV : 1er écran = titre + carte + villes + contact ;
     les crédits apparaissent en faisant défiler ---------- */
  .m-js .cv { height: calc(100dvh + 170px); }
  .m-js .m-cities { bottom: auto; top: calc(100dvh - var(--safe-b) - 180px); }
  .m-js .cv__contact { bottom: auto; top: calc(100dvh - var(--safe-b) - 128px); }
  .m-js .cv__footer { bottom: auto; top: calc(100dvh + 40px); }
  .m-js .cv__copy { bottom: auto; top: calc(100dvh + 120px); }
  /* petit repère vertical qui invite à descendre */
  .m-js .cv::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100dvh - var(--safe-b) - 70px);
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, var(--red), transparent);
    animation: m-bob 1.8s ease-in-out infinite;
  }
  .m-cities {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(var(--safe-b) + 150px);
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 0 10px;
    font-family: var(--font-nav);
    font-size: 9.5px;
    letter-spacing: 1.5px;
  }
  .m-city {
    padding: 8px 2px;
    background: none;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    color: var(--off);
    text-transform: uppercase;
    cursor: pointer;
  }
  .m-city:active { color: var(--red); }
  /* la fiche devient un panneau en bas de l'écran */
  .m-js .c-card {
    position: fixed;
    left: 10px !important;
    right: 10px;
    top: auto !important;
    bottom: calc(var(--safe-b) + 10px);
    width: auto;
    max-height: 55dvh;
    background: linear-gradient(135deg, rgba(48,46,45,.92), rgba(22,22,22,.94));
    transform: translateY(30px);
  }
  .m-js .constellation.is-selected .c-card { transform: none; }
  /* la constellation passe devant les textes quand une fiche est ouverte */
  .m-js .constellation.is-selected { z-index: 10; }
  .m-js .c-card::before {           /* poignée */
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin: -6px auto 10px;
    border-radius: 2px;
    background: rgba(244,244,242,.25);
  }
}

@media (max-width: 700px) {

  /* ---------- Titres un peu plus petits ---------- */
  .m-js .card__name { font-size: 10vw; }
  .m-card__num { bottom: calc(var(--safe-b) + 82px + 10vw * 1.9 + 14px) !important; }
  .m-next__name { font-size: 11vw; }

  /* ---------- Signature ---------- */
  .signature { padding: 56px 24px calc(var(--safe-b) + 24px); font-size: 8px; letter-spacing: 3px; line-height: 2.2; color: rgba(170,25,23,.9); }
  .m-js .project .signature { margin: 0 -16px; border-top: 1px solid rgba(170,25,23,.25); }
  .m-js .signature--slide {
    width: 100vw;
    height: 100dvh;
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    border-left: 0;
    text-align: center;
    font-size: 10px;
    scroll-snap-align: start;
  }
  /* (position verticale des crédits : voir "CV : 1er écran" plus haut) */
  .m-js .cv__copy { right: 0; left: 0; text-align: center; font-size: 8px; }

  /* =======================================================
     G. PAGE VDP — plein écran, photo dans un ovale incliné,
        grand titre par-dessus, texte puis bouton contact
     ======================================================= */
  .m-js .about { background: #121212; -webkit-backdrop-filter: none; backdrop-filter: none; align-items: stretch; }
  .m-js .about__window {
    position: relative;
    display: block;
    width: 100vw; height: 100dvh;
    max-width: none; max-height: none;
    border: 0; border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-y: auto;
    transform: none;
  }
  .m-js .about__photo {
    position: absolute;
    top: calc(var(--safe-t) + 46px);
    right: -12vw;
    width: 96vw;
    height: 148vw;
    border-radius: 50%;
    overflow: hidden;
    transform: rotate(-16deg) scale(.94);
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .8s ease;
  }
  .m-js .about.is-open .about__photo { transform: rotate(-16deg) scale(1); opacity: 1; }
  .m-js .about__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: rotate(16deg) scale(1.3);   /* la photo reste droite dans l'ovale */
  }
  /* l'ovale s'assombrit vers le bas pour la lisibilité du texte */
  .m-js .about__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(18,18,18,0) 40%, rgba(18,18,18,.9) 85%);
  }
  .m-js .about__content {
    position: relative;
    z-index: 2;
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: calc(var(--safe-t) + 150px) 26px calc(var(--safe-b) + 28px);
    overflow: visible;
  }
  /* pas de grand "VDP" : la photo seule porte la page */
  .m-js .about__mark { display: none; }
  .m-js .about__text { margin-top: auto; max-width: 82vw; }
  .m-js .about__text p { font-size: 14px; line-height: 1.45; color: rgba(244,244,242,.88); }
  .about.is-open ~ .m-menu-btn { opacity: 0; pointer-events: none; }
  .m-js .about .close-btn { position: fixed; top: calc(var(--safe-t) + 12px); right: 14px; z-index: 5; }

  .m-about-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-width: 150px;
    margin-top: 8px;
    padding: 12px 22px 11px;
    border: 1px solid rgba(244,244,242,.45);
    border-radius: 7px;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--off);
    transition: border-color .25s ease, color .25s ease;
  }
  .m-about-cta:active { border-color: var(--red); color: var(--red); }
  .m-about-cta__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: m-dot 1.6s ease-in-out infinite; }
  @keyframes m-dot { 50% { transform: scale(1.6); opacity: .5; } }
  .m-js .about__copy { margin: 26px 0 0; font-family: var(--font-nav); font-size: 9px; letter-spacing: 3px; color: var(--red); }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .m-js .home .blur-title { animation: none; }
  .m-js .card img { transform: none; }
}