/* ==========================================================================
   veax Project — veax.tr
   Feuille de style unique. Design importé de Claude Design (VEAX Project v2).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SCHWA AZÉRI  —  ə (U+0259) et Ə (U+018F)

   Ni Syne ni Instrument Sans ne contiennent ces deux lettres. Elles sont donc
   taillées dans le « e » et le « E » de ces polices mêmes, retournés, par
   scripts/make-schwa-font.py — le schwa étant justement un e renversé.

   La règle `unicode-range` limite chaque fichier à ces deux caractères : le
   navigateur ne va les chercher là que pour eux, et sert tout le reste avec la
   police d'origine. Ce sont donc des lettres ordinaires, sans transformation
   CSS — rien à contourner, ni pour la césure, ni pour les espaces, ni pour le
   découpage du drapeau.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "VeaxSchwaDisplay";
  src: url("../fonts/veaxschwadisplay-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0259, U+018F;
}
@font-face {
  font-family: "VeaxSchwaText";
  src: url("../fonts/veaxschwatext-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0259, U+018F;
}
@font-face {
  font-family: "VeaxSchwaText";
  src: url("../fonts/veaxschwatext-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0259, U+018F;
}
@font-face {
  font-family: "VeaxSchwaText";
  src: url("../fonts/veaxschwatext-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0259, U+018F;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:        #F4F3EF;   /* crème, fond de page */
  --surface:   #E7E5DE;   /* boutons secondaires, puces techno */
  --rule:      #DEDCD3;   /* filets et séparateurs */
  --ink:       #14140F;   /* noir chaud, texte principal */

  /* Texte */
  --ink-2:     #4A4A42;   /* paragraphes */
  --gray:      #6B6A62;   /* liens de nav */
  --gray-2:    #8B8A80;   /* étiquettes */
  --gray-3:    #A5A49A;   /* mentions discrètes */
  --on-dark:   #A5A49A;   /* texte secondaire sur fond noir */

  /* Accents */
  --flag-red:  #E30A17;   /* rouge du drapeau turc (sélection du titre) */
  --ok:        #17c964;   /* pastille du toast */
  --wip:       #0F7B46;   /* projet en cours — assez foncé pour rester lisible
                             sur le crème (4.80:1). Un vert clair type #17c964
                             ne donnerait que 1.98:1 : illisible sur ce fond.
                             La pastille, elle, garde un halo vert vif. */
  --wip-halo:  rgba(23, 201, 100, .18);

  /* Typographie */
  --display: "VeaxSchwaDisplay", "Syne", system-ui, sans-serif;  /* titres */
  --sans:    "VeaxSchwaText", "Instrument Sans", system-ui, sans-serif; /* texte courant */

  /* Rythme */
  --wrap:   1320px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Mouvement */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gray); }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* Lien d'évitement clavier */
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 500;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; color: var(--bg); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; }
main { flex: 1; }

/* --------------------------------------------------------------------------
   4. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 243, 239, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav__in {
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* Le bloc de marque. « veax » porte l'identité et prend la police d'affichage ;
   « Project » qualifie et reste en petit, dans le texte courant. La hiérarchie
   est la même partout — un logo ne change pas de forme entre le haut et le bas
   de la page. Seule la taille varie, par --mark. */
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand__mark {
  font-family: var(--display);
  font-size: var(--mark, 24px);
  font-weight: 700; letter-spacing: -.05em; line-height: 1;
}
.brand__sub {
  /* Proportionnel à la marque, mais jamais sous 11px : en dessous, le mot
     n'est plus lu, il devient une texture. */
  font-size: max(11px, calc(var(--mark, 24px) * .52));
  font-weight: 500; letter-spacing: .02em; color: var(--gray-2);
}
.brand:hover { color: var(--ink); }

.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.nav__link {
  font-size: 14px; font-weight: 500; color: var(--gray);
  transition: color .2s ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Sélecteur de langue — discret par défaut, il ne doit pas concurrencer
   « Get in touch », qui reste l'action principale de la barre. */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--gray);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang__btn:hover, .lang.is-open .lang__btn { color: var(--ink); background: var(--surface); }
.lang__btn svg { width: 15px; height: 15px; }
.lang__code { letter-spacing: .04em; }

.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 178px; padding: 6px;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(20, 20, 15, .16), 0 0 0 1px var(--rule);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }

.lang__menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 9px 11px;
  border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.lang__menu button:hover { background: var(--surface); color: var(--ink); }
.lang__menu button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.lang__tag {
  font-size: 11px; letter-spacing: .06em;
  color: var(--gray-3);
}
.lang__menu button[aria-selected="true"] .lang__tag { color: var(--wip); }

/* Sous 620px la nav ne garde que l'essentiel — le sélecteur reste, la langue
   compte plus que les deux liens de section, accessibles depuis le pied de page. */
@media (max-width: 380px) {
  .lang__code { display: none; }
  .lang__btn { padding: 0 8px; }
}

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  white-space: nowrap;
}
.btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }

.btn--dark {
  background: var(--ink); color: var(--bg);
  transition: transform .22s ease, opacity .22s ease;
}
.btn--dark:hover { transform: translateY(-2px); opacity: .9; color: var(--bg); }
.btn--sm.btn--dark:hover { transform: none; opacity: .82; }

.btn--soft {
  background: var(--surface); color: var(--ink);
  transition: background .22s ease;
}
.btn--soft:hover { background: var(--rule); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   6. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
  text-wrap: balance;
}

/* Titre de page : hero d'accueil, puis les autres pages un cran en dessous */
.t-hero { font-size: clamp(44px, 10.4vw, 158px); max-width: 16ch; }
.t-page { font-size: clamp(42px, 9vw, 132px); }

.eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-2);
}

.lead {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400; line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.veax-word {
  font-family: var(--display);
  font-weight: 700; letter-spacing: -.03em;
  color: var(--ink);
}

/* Le nom de la personne, à distinguer du nom de la marque : il garde la police
   du texte courant et prend seulement du poids. `veax` reste en Syne, lui — la
   marque a droit à la police d'affichage, pas le patronyme. */
.name {
  font-weight: 600; letter-spacing: -.015em;
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   7. ACCUEIL — bandeau de contexte + hero
   -------------------------------------------------------------------------- */
.hero { padding: clamp(56px, 11vh, 130px) var(--gutter) clamp(60px, 10vh, 120px); }

.meta-line {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(16px, 4vw, 56px);
  padding-bottom: clamp(40px, 7vh, 80px);
}
.meta-line p { font-size: 13px; font-weight: 500; color: var(--gray-2); }
.meta-line .status {
  display: flex; align-items: center; gap: 9px;
  letter-spacing: .01em; color: var(--gray);
}
.status__dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--ink);
  animation: veax-blink 2.4s ease-in-out infinite;
}
@keyframes veax-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Le titre porte l'effet drapeau : l'overlay se cale dessus au pixel près. */
.flag-host { position: relative; display: inline-block; }
.flag-overlay { position: absolute; inset: 0; pointer-events: none; user-select: none; }

/* Sélection du titre : on efface le surlignage, les glyphes drapeau prennent le relais */
h1[data-flag]::selection { background: transparent; color: var(--flag-red); text-shadow: none; }
h1[data-flag]::-moz-selection { background: transparent; color: var(--flag-red); }

.hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(40px, 7vh, 84px);
}
.hero__foot .lead { max-width: 48ch; }

/* --------------------------------------------------------------------------
   8. SECTIONS
   -------------------------------------------------------------------------- */
.section { padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(40px, 7vh, 80px); }
.section--tight { padding: clamp(40px, 7vh, 80px) var(--gutter); }
.section--flush { padding: 0 var(--gutter) clamp(40px, 7vh, 80px); }

.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: clamp(28px, 4vh, 44px);
}
.section__head a { font-size: 13px; font-weight: 500; color: var(--gray); }

/* Grille éditoriale : étiquette à gauche, contenu à droite */
.two-col {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* --------------------------------------------------------------------------
   9. LIGNES DE PROJET
   -------------------------------------------------------------------------- */
.rows { display: grid; }

.row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 1.35fr) 236px;
  gap: 28px;
  align-items: start;
  padding: 30px 0;
  box-shadow: inset 0 1px 0 var(--rule);
  color: var(--ink);
  transition: padding-left .3s var(--ease), opacity .3s ease;
}
.row:hover { color: var(--ink); padding-left: 14px; }
/* Projet sans page publiée : reste cliquable pour expliquer pourquoi */
.row[role="button"] { cursor: pointer; }

/* Au survol d'une ligne, les autres s'effacent — le focus se fait tout seul */
.rows:hover .row:not(:hover) { opacity: .45; }

.row__n {
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  color: var(--gray-3); padding-top: 6px;
}

.row__title { display: grid; gap: 8px; }
.row__name {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700; letter-spacing: -.05em; line-height: 1.02;
}
/* Les deux plateformes en cours passent d'un cran au-dessus */
.row--flagship .row__name { font-size: clamp(30px, 3.4vw, 52px); }
.row--muted .row__name { color: var(--gray-2); }

.row__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px;
}
.row__kind { font-size: 13px; font-weight: 500; color: var(--gray-2); }

/* Statut du projet — un repère de couleur, pas une étiquette de plus.
   Volontairement différent des puces techno : pas de fond, pas de pilule,
   juste une pastille et un mot. Le vert dit « ça bouge en ce moment ». */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; letter-spacing: -.005em;
  color: var(--gray-2);
  white-space: nowrap;
}
.status i {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.status--wip {
  color: var(--wip);
}
.status--wip i {
  /* halo discret : le seul élément de la liste qui attire l'œil */
  box-shadow: 0 0 0 3px var(--wip-halo);
  animation: veax-blink 2.4s ease-in-out infinite;
}

.status--soon { color: var(--gray); }
.status--archived, .status--live { color: var(--gray-3); }
/* Projet disponible : présent mais silencieux — on ne le met pas en avant */
.status--live i { opacity: .55; }
.row__domain {
  font-family: var(--display);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.03em;
  color: var(--gray);
}

.row__desc {
  font-size: 15.5px; font-weight: 400; line-height: 1.55;
  color: var(--ink-2); max-width: 52ch; text-wrap: pretty;
}

.row__tech {
  display: flex; flex-wrap: wrap; gap: 7px;
  justify-content: flex-end;
  padding-top: 4px;
}
.tech {
  padding: 6px 13px; border-radius: 999px;
  background: var(--surface);
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink-2); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. BANDE SOMBRE (Approach)
   -------------------------------------------------------------------------- */
.band {
  border-radius: 28px;
  background: var(--ink); color: var(--bg);
  padding: clamp(48px, 9vw, 110px) clamp(28px, 6vw, 96px);
}
.band .eyebrow { color: var(--gray-2); margin-bottom: clamp(24px, 4vh, 40px); }
.band h2 {
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 82px);
  font-weight: 700; line-height: .96; letter-spacing: -.05em;
  max-width: 24ch;
}
.band__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(44px, 8vh, 90px);
}
.band__item { display: grid; gap: 10px; align-content: start; }
.band__item h3 {
  font-family: var(--display);
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
}
.band__item p {
  font-size: 15px; font-weight: 400; line-height: 1.55;
  color: var(--on-dark); text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   11. LISTES À FILETS (About, Contact)
   -------------------------------------------------------------------------- */
/* Le fond gris transparaît par les gouttières : des filets sans bordures */
.ruled { display: grid; gap: 1px; background: var(--rule); }
.ruled > * { background: var(--bg); }

.ruled--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ruled--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.skill {
  padding: 22px 4px;
  font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.02em;
}
.ruled--2 .skill:nth-child(even) { padding-left: 24px; }

.fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 18px 2px;
}
.fact__k { font-size: 15px; font-weight: 500; color: var(--gray-2); }
.fact__v { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.fact__v--display { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; }

.cell { display: grid; gap: 10px; padding: 26px 2px; align-content: start; }
.ruled--3 .cell + .cell { padding-left: 24px; }
.cell p:last-child { font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   12. ABOUT — phrase manifeste
   -------------------------------------------------------------------------- */
.statement {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 600; line-height: 1.14; letter-spacing: -.045em;
  max-width: 40ch; text-wrap: pretty;
}
.statement b { font-weight: 700; }

/* --------------------------------------------------------------------------
   13. CONTACT — adresse géante
   -------------------------------------------------------------------------- */
.mail-xl {
  display: block;
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 132px);
  font-weight: 700; line-height: .92; letter-spacing: -.06em;
  color: var(--ink); word-break: break-word; cursor: pointer;
  transition: opacity .22s ease;
  background: none; border: 0; padding: 0; text-align: left;
}
.mail-xl:hover { opacity: .55; color: var(--ink); }

/* Champ de repli : sert à présélectionner l'adresse si le presse-papiers est refusé */
.copy-fallback {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  padding: 0; border: 0; opacity: 0; pointer-events: none; z-index: -1;
  font-size: 16px;
}

.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); }

/* --------------------------------------------------------------------------
   13 bis. FENÊTRE DE SORTIE

   Rien ne quitte le site sans prévenir : cliquer un projet ouvre d'abord une
   fenêtre qui dit où ça mène. Et pour un projet dont la page n'existe pas
   encore, elle le dit franchement plutôt que d'envoyer sur une erreur.
   -------------------------------------------------------------------------- */
.leave {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
}
.leave.is-on { opacity: 1; visibility: visible; }

.leave__veil {
  position: absolute; inset: 0;
  background: rgba(20, 20, 15, .42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.leave__card {
  position: relative;
  width: min(420px, 100%);
  padding: 30px 30px 24px;
  background: var(--bg);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(20, 20, 15, .3);
  transform: translateY(10px) scale(.98);
  transition: transform .28s var(--ease);
}
.leave.is-on .leave__card { transform: none; }

.leave__eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-2);
}
.leave__title {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em;
  text-wrap: balance;
}
.leave__text {
  margin-top: 12px;
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
  text-wrap: pretty;
}
/* L'adresse exacte, pour qu'on sache où on va avant de cliquer */
.leave__url {
  display: block; margin-top: 14px;
  font-family: var(--display);
  font-size: 14px; font-weight: 700; letter-spacing: -.03em;
  color: var(--gray);
  word-break: break-all;
}
.leave__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 26px;
}
.leave__actions .btn { height: 46px; flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   14. PIED DE PAGE
   -------------------------------------------------------------------------- */
.footer { padding: 0 var(--gutter) clamp(36px, 6vh, 64px); }
.footer__in {
  padding-top: 28px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 18px;
}
/* Même bloc que dans la barre du haut, un cran plus petit */
.footer__brand { --mark: 19px; }
.footer__links { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 32px); }
.footer__links a { font-size: 13px; font-weight: 500; color: var(--gray-2); }
.footer__links a:hover { color: var(--ink); }
.footer__legal { font-size: 12.5px; font-weight: 400; color: var(--gray-3); }
.footer__legal .veax-word { font-size: inherit; }

/* --------------------------------------------------------------------------
   15. APPARITION AU DÉFILEMENT

   Le préfixe `.js` est capital : la classe est posée par un script inline en
   tête de page. Sans JavaScript, la règle ne s'applique pas et tout reste
   visible — le contenu ne dépend jamais du JS pour s'afficher.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .76s var(--ease), transform .76s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Une fois la ligne apparue, elle récupère sa propre transition : sans ça, la
   règle d'apparition ci-dessus l'emporte et le décalage au survol saute d'un
   coup au lieu de glisser. */
.js .row[data-reveal].is-in {
  transition: padding-left .3s var(--ease), opacity .3s ease;
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .band__grid { grid-template-columns: 1fr; }

  /* La ligne de projet passe en pile : numéro, titre, description, technos */
  .row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .row:hover { padding-left: 0; }
  .row__n { padding-top: 0; }
  .row__tech { justify-content: flex-start; }
  .row__name { font-size: 26px; }
  .row--flagship .row__name { font-size: 30px; }
}

@media (max-width: 720px) {
  .ruled--3 { grid-template-columns: 1fr; }
  .ruled--3 .cell + .cell { padding-left: 2px; }
}

@media (max-width: 620px) {
  /* Sous cette largeur, la nav garde le seul bouton qui compte */
  .nav__link--page { display: none; }
}

@media (max-width: 560px) {
  .ruled--2 { grid-template-columns: 1fr; }
  .ruled--2 .skill:nth-child(even) { padding-left: 4px; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   17. MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  .nav, .footer, .btn-row, .toast { display: none; }
  body { background: #fff; }
  .row { box-shadow: none; border-top: 1px solid #ccc; break-inside: avoid; }
  .band { background: #fff; color: #000; border: 1px solid #ccc; }
}