/* =========================================================================
   Youssef Belkhiria — DA 6
   Géométrie relevée sur le modèle dans un viewport CDP exact (1440×900) :
     fond de page #050303 · bloc encoché de 40px sur les 4 côtés, radius 32px,
     overflow hidden · pilule de nav 1216×80 à 72px des bords du bloc et 64px
     du haut, radius 32px, fond noir à 60% (aucun backdrop-filter, aucune
     bordure, aucune ombre) · titre 112px / interligne .95 · CTA radius 20px,
     hauteur 64, padding 20 · section suivante 120px sous le bloc.
   ========================================================================= */

:root{
  --noir:#050303;          /* fond de page mesuré */
  --encoche:40px;          /* marge du bloc sur les 4 côtés */
  --radius-bloc:32px;
  --pilule-inset:72px;     /* marge minimale de la pilule aux bords du bloc */
  --pilule-max:1216px;     /* largeur plafond, mesurée identique à 1440 et 1920 */
  --pilule-haut:64px;
  --pilule-h:80px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}      /* sur html, jamais sur body : sinon la règle se propage au viewport */
body{
  background:var(--noir);
  color:#fff;
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------- HERO */
/* Hauteur BORNÉE, comme le modèle : min 780, max 920, et entre les deux elle
   suit la fenêtre. Vérifié chez eux à 700 → 780, à 900 → 819, à 1080 → 920.
   Sans ces bornes le bloc descend trop bas sur un écran peu haut et tout le
   contenu se comprime — c'est ce qui donnait l'impression de chevauchement. */
.hero{
  position:relative;
  height:clamp(780px, calc(100vh - var(--encoche) * 2), 920px);
  padding-bottom:64px;
  margin:var(--encoche);
  border-radius:var(--radius-bloc);
  overflow:hidden;
  isolation:isolate;
}

/* La vidéo remplit le bloc. Le dégradé de repli sert tant qu'elle n'est pas
   chargée — et surtout, c'est la vidéo qui doit s'éteindre au noir en bas :
   c'est ce qui rend la jointure avec la section suivante invisible. */
.hero__fond{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 50% 14%, #b4143a 0%, #7a0d26 32%, #3d0912 62%, #25070e 100%);
}
/* Le canvas dessine le lavis ET son extinction vers le noir en bas : la
   jointure avec la section suivante n'a donc besoin d'aucun voile par-dessus. */
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;
}
/* Grain fin, à la manière du modèle. Bruit SVG inline : aucun fichier à charger. */
/* Grain marqué, comme sur le modèle (p95 relevé à 19 contre 15 chez moi à .05).
   Il ne se voyait pas non plus faute de zones sombres où ressortir — c'est le
   canvas qui les fournit désormais. */
.hero__grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.28;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- pilule de navigation ---------- */
/* Largeur PLAFONNÉE et centrée, pas fluide : mesurée à 1216 px aussi bien à
   1440 qu'à 1920 de viewport. Avec left/right fixes elle s'étirait avec
   l'écran et devenait bien plus longue que celle du modèle. */
.nav{
  position:absolute;z-index:3;
  top:var(--pilule-haut);
  left:0;right:0;margin-inline:auto;
  width:min(var(--pilule-max), calc(100% - var(--pilule-inset) * 2));
  height:var(--pilule-h);
  border-radius:var(--radius-bloc);
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;   /* relevé : logo à 20 du bord gauche, dernière icône à 20 du droit */
}

/* Liseré en dégradé sur deux arêtes opposées — c'est lui qui donne le relief.
   Le masque en deux couches ne laisse apparaître que le contour : la couche
   `content-box` est soustraite de la couche pleine, il ne reste que le cadre
   d'un pixel. Valeurs des dégradés relevées telles quelles sur le modèle. */
.nav::before,.nav::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.nav::before{background:linear-gradient(165deg,rgba(255,255,255,.6) .05%,rgba(0,0,0,0) 30%)}
.nav::after{background:linear-gradient(165deg,rgba(0,0,0,0) 70%,rgba(255,255,255,.6) 99.95%)}
/* Typographie relevée sur les mots de la navbar du modèle :
   Manrope, 16 px, graisse 500, interlettrage normal, blanc pur. */
.nav__nom{
  font-size:16px;font-weight:500;letter-spacing:normal;color:#fff;
  white-space:nowrap;
}

/* Nom et icônes rentrés de 28 px vers le centre de la pilule. */
.nav__nom{margin-left:28px}

/* ---------- menu Projets ---------- */
.nav__menu{position:relative;display:flex;align-items:center;height:100%}
.nav__declencheur{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;padding:0;
  font-family:inherit;font-size:16px;font-weight:500;color:#fff;
  opacity:.9;transition:opacity .18s ease;
}
.nav__declencheur:hover,.nav__menu.est-ouvert .nav__declencheur{opacity:1}
.nav__chevron{width:10px;height:6px;transition:transform .22s ease}
.nav__menu.est-ouvert .nav__chevron{transform:rotate(180deg)}

/* Panneau ancré sous la navbar. Le padding du haut sert de pont : sans lui,
   descendre la souris vers le panneau traverserait une zone morte et le
   refermerait. */
.panneau{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(1120px, calc(100vw - 120px));
  padding-top:14px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:100;
}
.nav__menu.est-ouvert .panneau{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.panneau__grille{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding:22px;border-radius:26px;
  background:rgba(10,4,6,.86);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.carte{display:flex;flex-direction:column;color:#fff}
.carte__vignette{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:14px;margin-bottom:16px;
  background:#1a0509;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .22s ease;
}
.carte:hover .carte__vignette{transform:translateY(-3px)}
.carte__titre{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.carte__texte{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.62);
}

/* Le reste du site s'estompe pendant l'ouverture. La navbar et le panneau
   restent nets : ils ne sont pas dans la liste. */
.hero__fond,.hero__canvas,.hero__grain,.hero__contenu,.hero__chiffres,.projets{
  transition:filter .22s ease;
}
body.menu-ouvert .hero__fond,
body.menu-ouvert .hero__canvas,
body.menu-ouvert .hero__grain,
body.menu-ouvert .hero__contenu,
body.menu-ouvert .hero__chiffres,
body.menu-ouvert .projets{filter:blur(6px)}

/* Icônes : 20×20, 20 px d'écart, blanches, sans fond ni arrondi. */
.nav__social{display:flex;align-items:center;gap:20px;margin-right:28px}
.nav__social a{
  width:20px;height:20px;display:grid;place-items:center;
  color:#fff;opacity:.88;transition:opacity .18s ease;
}
.nav__social a:hover{opacity:1}
.nav__social svg{width:20px;height:20px;display:block;fill:currentColor}

/* ---------- contenu du hero ---------- */
.hero__contenu{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:248px 24px 0;          /* titre à 248px du haut du bloc, comme le modèle */
}
.hero__titre{
  max-width:896px;
  font-size:112px;font-weight:500;line-height:.95;letter-spacing:-.03em;
  color:#fff;
}
/* Rythme vertical relevé sur le modèle : paragraphe à 16 px sous le bloc de
   titre, CTA à 97 px sous le paragraphe. J'avais 26 et 52 — d'où le tassement. */
.hero__sous{
  margin-top:16px;max-width:560px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;line-height:1.7;color:rgba(255,255,255,.72);
}
.hero__actions{
  margin-top:97px;display:flex;align-items:center;gap:26px;
}
.btn{
  height:64px;padding:20px;border-radius:20px;
  background:#fff;color:#000;
  display:inline-flex;align-items:center;
  font-size:16px;font-weight:700;
  transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn--fantome{
  background:none;color:#fff;padding:20px 4px;border-radius:0;
  font-weight:600;opacity:.82;
}
.btn--fantome:hover{opacity:1;transform:none}

.hero__chiffres{
  position:absolute;right:var(--pilule-inset);bottom:64px;z-index:2;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:2.1;color:rgba(255,255,255,.62);
  text-align:right;
}
.hero__chiffres b{color:#fff;font-weight:600;margin-left:16px}

/* ------------------------------------------------- SECTION SUIVANTE
   Pas d'astuce : le bloc s'arrête, le fond noir de la page continue.
   La jointure ne se voit que si la vidéo est bien noire en bas. */
.projets{
  margin-top:120px;
  padding:0 80px 160px;
}
.projets__titre{
  font-size:56px;font-weight:500;line-height:1.05;letter-spacing:-.03em;
  max-width:820px;
}
.projets__intro{
  margin-top:20px;max-width:520px;
  font-size:16px;line-height:1.6;color:rgba(255,255,255,.62);
}

/* ---------------------------------------------------------------- mobile */
@media (max-width:900px){
  :root{--encoche:14px;--radius-bloc:22px;--pilule-inset:14px;--pilule-haut:14px;--pilule-h:64px}
  .hero{height:calc(100svh - var(--encoche) * 2)}
  .hero__contenu{padding:150px 20px 0}
  .hero__titre{font-size:46px}
  .hero__sous{margin-top:20px;font-size:12.5px}
  .hero__actions{margin-top:36px;gap:14px;flex-direction:column}
  .btn{width:100%;justify-content:center}
  .hero__chiffres{display:none}
  .nav{padding:0 14px}
  .nav__nom{font-size:14px;margin-left:0}
  .nav__social{gap:14px;margin-right:0}
  .nav__declencheur{font-size:14px}
  .panneau{width:calc(100vw - 28px);padding-top:10px}
  .panneau__grille{grid-template-columns:1fr;gap:16px;padding:16px;border-radius:20px}
  .carte__vignette{aspect-ratio:16/9;margin-bottom:12px}
  .carte__titre{font-size:17px}
  /* le flou coûte cher sur téléphone : on l'allège */
  body.menu-ouvert .hero__fond,
  body.menu-ouvert .hero__canvas,
  body.menu-ouvert .hero__grain,
  body.menu-ouvert .hero__contenu,
  body.menu-ouvert .hero__chiffres,
  body.menu-ouvert .projets{filter:blur(4px)}
  .projets{margin-top:70px;padding:0 20px 90px}
  .projets__titre{font-size:32px}
}

/* Le canvas reste affiché en mouvement réduit : le script y dessine une image
   fixe au lieu d'animer, plutôt que de retomber sur le dégradé de secours. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* =========================================================================
   Tiroir mobile et pied de page
   ========================================================================= */

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Sur ordinateur : logo caché, nom en toutes lettres, pas de bouton burger,
   et le tiroir s'efface de la mise en page pour que ses deux enfants
   redeviennent des éléments directs de la navbar. */
.nav__logo{display:none}
.nav__burger{display:none}
.nav__tiroir{display:contents}
.nav__nom{display:inline-flex;align-items:center;gap:10px}

.nav__social svg{width:20px;height:20px;display:block;fill:currentColor}

/* ---------- pied de page ---------- */
.pied{
  padding:0 80px 56px;
  color:rgba(255,255,255,.72);
  font-size:15px;line-height:1.6;
}
.pied__haut{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.10);
}
.pied__titre{
  font-size:28px;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:18px;
}
.pied__lien{display:block;color:#fff;font-size:17px;font-weight:500;margin-bottom:6px}
.pied__lien:hover{opacity:.75}
.pied__lieu{margin-top:14px;font-size:14px;color:rgba(255,255,255,.55)}
.pied__social{display:flex;align-items:center;gap:22px}
.pied__social a{
  width:22px;height:22px;display:grid;place-items:center;color:#fff;opacity:.8;
  transition:opacity .18s ease;
}
.pied__social a:hover{opacity:1}
.pied__social svg{width:22px;height:22px;display:block;fill:currentColor}
.pied__bas{
  display:flex;justify-content:space-between;gap:20px;
  padding-top:24px;font-size:13px;color:rgba(255,255,255,.45);
}

/* ---------- petit écran ---------- */
@media (max-width:900px){
  /* le logo signature remplace le nom écrit : la pilule est trop étroite */
  .nav__logo{display:block;width:38px;height:38px;object-fit:contain}
  .nav__nomTexte{display:none}

  .nav__burger{
    display:grid;gap:5px;width:26px;background:none;border:0;padding:0;cursor:pointer;
    margin-left:auto;
  }
  .nav__burger i{display:block;height:2px;width:100%;background:#fff;border-radius:2px;
    transition:transform .22s ease, opacity .22s ease}
  .nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
  .nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* le tiroir redevient une vraie boîte, repliée par défaut */
  .nav__tiroir{
    display:block;position:absolute;top:calc(100% + 10px);left:0;right:0;
    padding:18px;border-radius:22px;
    background:rgba(10,4,6,.94);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:60;
  }
  .nav__tiroir.est-ouvert{opacity:1;visibility:visible;transform:translateY(0)}

  /* dans le tiroir, le panneau Projets se déplie sur place */
  .nav__menu{display:block;height:auto;width:100%}
  .nav__declencheur{width:100%;justify-content:space-between;padding:6px 0 12px}
  .panneau{
    position:static;transform:none;width:auto;padding-top:0;
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav__menu:not(.est-ouvert) .panneau{display:none}
  .panneau__grille{background:none;border:0;box-shadow:none;padding:0}

  .nav__social{
    justify-content:center;gap:26px;margin:18px 0 4px;
    padding-top:18px;border-top:1px solid rgba(255,255,255,.10);
  }

  .pied{padding:0 20px 40px}
  .pied__haut{flex-direction:column;align-items:flex-start;gap:28px}
  .pied__titre{font-size:22px}
  .pied__bas{flex-direction:column;gap:6px}
}

/* =========================================================================
   Logo partout · survol du CTA · halo au curseur
   ========================================================================= */

/* Le logo signature remplace désormais le nom écrit sur TOUS les écrans. */
.nav__logo{display:block;width:42px;height:42px;object-fit:contain}
.nav__nomTexte{display:none}
.nav__nom{margin-left:28px}

/* ---------- survol du bouton principal ----------
   `mix-blend-mode: screen` : le blanc du fond reste blanc (screen avec du
   blanc donne du blanc), tandis que le noir du texte devient transparent
   (screen avec du noir laisse passer le fond). Les lettres se creusent donc
   et laissent voir le rouge, sans avoir à découper quoi que ce soit. */
.btn{transition:transform .2s ease, opacity .2s ease}
.btn:not(.btn--fantome):hover{
  transform:scale(.965);
  mix-blend-mode:screen;
  opacity:1;
}

/* ---------- halo au curseur, hero uniquement ---------- */
.hero__lueur{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--lx,50%) var(--ly,40%),
    rgba(255,150,165,.20) 0%,
    rgba(255,90,120,.10) 32%,
    rgba(255,60,100,.04) 55%,
    transparent 72%);
}
.hero.a-curseur .hero__lueur{opacity:1}

/* pas de halo là où il n'y a pas de curseur */
@media (hover: none), (pointer: coarse){
  .hero__lueur{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hero__lueur{transition:none}
}

/* =========================================================================
   Ordre des plans du hero — indispensable au survol du bouton.
   `mix-blend-mode` ne mélange qu'à l'intérieur du contexte d'empilement le
   plus proche. `.hero__contenu` portait un `z-index:2`, ce qui en créait un
   et isolait le mélange : le texte se calculait contre du vide et restait
   noir. On lui rend un `z-index:auto` — il n'isole plus rien — et on fait
   passer le canvas, le halo et le grain en valeurs négatives pour qu'ils
   restent dessous tout en étant visibles par la fusion.
   ========================================================================= */
.hero__fond{z-index:-3}
.hero__canvas{z-index:-2}
.hero__lueur{z-index:-1}
.hero__grain{z-index:-1}
.hero__contenu{z-index:auto}
.hero__chiffres{z-index:auto}

/* =========================================================================
   Bascule du halo : fond ↔ navbar
   Les deux calques ne sont jamais allumés en même temps. Sans cette exclusion,
   le halo du fond continuerait de traverser la pilule et d'éclairer le rouge
   en dessous pendant qu'on survole la navbar.
   ========================================================================= */

.nav__lueur{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;
  opacity:0;transition:opacity .25s ease;
  /* Nettement plus intense que le halo de fond, pour une raison mesurée : la
     pilule est translucide à 60 %, donc le halo du fond la traversait et
     l'éclaircissait déjà. En basculant on coupe cette source ; à 34 % la
     pilule ressortait PLUS SOMBRE qu'avant — 19,9 contre 25,0 de luminance. */
  background:radial-gradient(240px circle at var(--nlx,50%) var(--nly,50%),
    rgba(255,214,222,.22) 0%,
    rgba(255,150,175,.09) 36%,
    rgba(255,95,125,.035) 58%,
    transparent 80%);
}

/* le contenu de la pilule repasse au-dessus du halo */
.nav__nom,.nav__burger,.nav__menu,.nav__social{position:relative;z-index:1}

/* curseur dans la navbar : on allume la pilule, on éteint le fond */
.hero.a-curseur.lueur-sur-nav .nav__lueur{opacity:1}
.hero.a-curseur.lueur-sur-nav .hero__lueur{opacity:0}

@media (hover: none), (pointer: coarse){
  .nav__lueur{display:none}
}


/* =========================================================================
   Liserés : un tour complet au survol de la navbar
   Un angle de dégradé n'est pas interpolable par défaut : il faut l'enregistrer
   avec @property pour que le navigateur sache l'animer. Les liserés passent
   alors du linéaire au conique, dont on fait tourner l'angle de départ d'un
   tour exact — les deux arcs se poursuivent autour de la pilule, puis
   retrouvent leur position de départ.
   ========================================================================= */
@property --tour{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* Déclenché par une classe et non par :hover — c'est le JS qui la retire à la
   fin de l'animation. Avec :hover, les dégradés coniques restaient en place
   tant que le curseur ne sortait pas : les liserés cessaient de tourner mais
   ne retrouvaient jamais leur dessin d'origine. */
/* La MARCHE est pilotée par `:hover` en CSS, pas par un événement JS.
   Deux exécutions identiques donnaient deux résultats opposés quand elle
   dépendait de `pointerleave` : cet événement ne se déclenchait pas de façon
   fiable pendant que le panneau Projets s'ouvrait sous le curseur.
   La classe `tourne`, elle, est posée une fois et jamais retirée : elle sert
   seulement à garder les dégradés coniques en place après la sortie, pour que
   les liserés restent figés là où ils se sont arrêtés. */
.nav.tourne::before,
.nav.tourne::after{
  animation:tourLisere 1.5s linear infinite;
  animation-play-state:paused;
}
.nav.tourne:hover::before,
.nav.tourne:hover::after{
  animation-play-state:running;
}
/* 273° et 93° placent les deux arcs en haut-gauche et en bas-droite : la même
   lecture que les liserés diagonaux au repos, pour que le tour parte et
   revienne exactement d'où il était. */
.nav.tourne::before{
  background:conic-gradient(from calc(273deg + var(--tour)),
    transparent 0deg, rgba(255,255,255,.6) 30deg, transparent 62deg);
}
.nav.tourne::after{
  background:conic-gradient(from calc(93deg + var(--tour)),
    transparent 0deg, rgba(255,255,255,.6) 30deg, transparent 62deg);
}
@keyframes tourLisere{ to{ --tour:360deg } }

@media (prefers-reduced-motion: reduce){
  .nav.tourne::before,.nav.tourne::after{animation:none}
}

/* =========================================================================
   Centrage du panneau Projets — deux corrections
   ========================================================================= */

/* 1. ORDINATEUR. Le panneau se centrait sur le déclencheur « Projets » et non
   sur la pilule : mesuré à 49 px trop à gauche. Avec `justify-content:
   space-between`, l'élément du milieu ne tombe pas au centre dès que le logo
   et les icônes n'ont pas la même largeur. En rendant `.nav__menu` statique,
   le panneau se positionne contre `.nav` — donc centré sur la navbar. */
.nav__menu{position:static}

@media (max-width:900px){
  /* le panneau redevient un enfant positionné du tiroir */
  .nav__menu{position:relative}

  /* 2. MOBILE. `.nav__menu.est-ouvert .panneau` (0,2,0) l'emportait sur mon
     `.panneau` (0,1,0) et réappliquait translateX(-50%) : le panneau sortait
     de 234 px à gauche du tiroir. On neutralise à spécificité égale. */
  .nav__menu.est-ouvert .panneau{transform:none;left:auto}
}

/* =========================================================================
   MOBILE — « Projets » remonte dans la navbar
   Il était rangé dans le tiroir ; il occupe désormais le centre de la pilule,
   entre le logo et le bouton à trois tirets, qui ne garde que les icônes.

   Le panneau redevient un menu déroulant à hauteur BORNÉE : dans le tiroir il
   mesurait 897 px et dépassait le hero de 169 px. Or `.hero` est en
   `overflow:hidden` — la troisième carte, Travelia, était donc rognée et
   introuvable. Elle n'était pas absente, elle était coupée.
   ========================================================================= */
@media (max-width:900px){

  /* logo décalé vers la gauche pour dégager le centre */
  .nav{padding:0 12px 0 8px}

  /* l'onglet redevient un élément de la navbar */
  .nav__menu{position:static;display:flex;align-items:center;height:100%;width:auto}
  .nav__declencheur{width:auto;justify-content:center;padding:0;font-size:14px;gap:6px}

  /* menu déroulant sous la pilule, centré sur elle et non sur le déclencheur */
  .nav__menu:not(.est-ouvert) .panneau{display:none}
  .nav__menu.est-ouvert .panneau{
    display:block;
    position:absolute;top:calc(100% + 10px);left:50%;right:auto;
    transform:translateX(-50%);
    width:calc(100vw - 28px);padding-top:0;
    opacity:1;visibility:visible;pointer-events:auto;
    max-height:calc(100svh - 150px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .panneau__grille{
    grid-template-columns:1fr;gap:16px;padding:16px;border-radius:20px;
    background:rgba(10,4,6,.94);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }

  /* le tiroir ne porte plus que les icônes : il se resserre à droite */
  .nav__tiroir{left:auto;right:0;width:auto;padding:14px 20px}
  .nav__social{margin:0;padding-top:0;border-top:0;gap:24px}
}

/* =========================================================================
   MOBILE — carrousel horizontal des projets
   « Projets » exactement centré, panneau au style du desktop, et les trois
   cartes côte à côte sur une piste qui défile horizontalement.
   ========================================================================= */
@media (max-width:900px){

  /* Centrage EXACT : en `space-between` l'élément du milieu se place selon la
     largeur des deux autres — logo 42 px contre burger 26 px — donc jamais au
     centre. Une grille à colonnes latérales égales le garantit. */
  .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .nav__nom{justify-self:start;margin-left:0}
  /* Compense l'asymétrie des marges intérieures (8 à gauche, 12 à droite,
     pour décaler le logo) : sans ça le centre de la boîte de contenu tombe
     2 px à gauche du centre réel de la pilule. */
  .nav__menu{justify-self:center;margin-left:4px}
  .nav__burger{justify-self:end;margin-left:0}

  /* Panneau : mêmes valeurs que sur ordinateur (opacité, bordure, ombre,
     rayon, marge intérieure), au lieu du jeu plus dense que j'avais mis. */
  .nav__menu.est-ouvert .panneau{
    position:absolute;top:calc(100% + 10px);left:50%;right:auto;
    transform:translateX(-50%);
    width:calc(100vw - 28px);
    max-height:none;overflow:visible;padding-top:0;
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .panneau__grille{
    display:flex;gap:22px;padding:22px;border-radius:26px;
    background:rgba(10,4,6,.86);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 26px 70px rgba(0,0,0,.55);
    /* la piste : défilement horizontal, barre masquée, aimantation */
    overflow-x:auto;overflow-y:hidden;
    /* PAS d'aimantation : elle ramenait chaque incrément de 90 px au point
       d'accroche le plus proche, donc à zéro — la piste ne bougeait jamais.
       Le déplacement doit être continu, proportionnel au défilement. */
    scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-x:contain;
  }
  .panneau__grille::-webkit-scrollbar{display:none}

  /* Largeur de carte : TOUJOURS inférieure à celle de la pilule. La navbar
     mesure 100vw − 56 ; une carte à 100vw − 104 laisse 48 px d'écart, et
     découvre un fragment de la suivante — ce qui donne à lire un carrousel. */
  .carte{
    flex:0 0 calc(100vw - 104px);
  }
  .carte__vignette{aspect-ratio:16/10;margin-bottom:14px}
  .carte__titre{font-size:18px}

  /* même intensité de flou que sur ordinateur */
  body.menu-ouvert .hero__fond,
  body.menu-ouvert .hero__canvas,
  body.menu-ouvert .hero__grain,
  body.menu-ouvert .hero__contenu,
  body.menu-ouvert .hero__chiffres,
  body.menu-ouvert .projets{filter:blur(6px)}
}

/* =========================================================================
   MOBILE — corrections du carrousel
   ========================================================================= */
@media (max-width:900px){

  /* Rapport de largeur repris du desktop : panneau 1120 pour une navbar de
     1216, soit 0,921. Le panneau était à 100vw − 28, donc PLUS large que la
     pilule ; il est maintenant rentré de part et d'autre, comme sur écran. */
  .nav__menu.est-ouvert .panneau{
    width:calc((100vw - 56px) * 0.921);
  }

  /* images et textes resserrés */
  .carte{flex:0 0 calc((100vw - 56px) * 0.921 - 44px)}
  .carte__vignette{aspect-ratio:16/10;margin-bottom:11px;border-radius:11px}
  .carte__titre{font-size:15px;margin-bottom:5px}
  .carte__texte{font-size:11.5px;line-height:1.5}
  .panneau__grille{gap:18px;padding:18px;border-radius:22px}

  /* plus de rectangle bleu au toucher */
  a,button,.carte,.nav__declencheur{-webkit-tap-highlight-color:transparent}
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible){outline:none}
}

/* =========================================================================
   Verrou de page pendant le carrousel
   `touch-action:none` est la pièce maîtresse : il interdit au navigateur
   d'engager lui-même un défilement. Sans lui, le premier `touchmove` non
   annulé lançait le défilement de la page, et tous les suivants devenaient
   non annulables — la section descendait en même temps que le carrousel.
   ========================================================================= */
body.carrousel-verrouille{
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:none;
}