/* ══════════════════════════════════════════════════════════════════
   mathisjabouley.com — feuille de style
   Fond clair, encre sombre, une seule couleur d'accent, une seule
   famille de caractères. Volontairement distinct de Cineo : le site
   présente les projets, il n'imite aucun.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --papier:#fbfbfa;      /* fond général : un blanc à peine chaud */
  --papier-2:#f2f2f0;    /* bandes alternées */
  --papier-3:#e9e9e5;
  --carte:#ffffff;
  --encre:#141417;
  --encre-2:#3c3c44;
  --gris:#6c6c76;
  --gris-clair:#9a9aa2;
  --trait:#e3e2de;
  --trait-vif:#d1d0ca;
  --accent:#3f3ad4;
  --accent-vif:#5b56e8;
  --accent-rgb:63,58,212;
  --accent-doux:#ecebff;
  --large:1180px;
  --etroit:740px;
  --pas:clamp(60px,6.5vw,104px);
  --barre:60px;
  --ombre-s:0 1px 2px rgba(20,20,23,.05), 0 6px 18px rgba(20,20,23,.05);
  --ombre-m:0 2px 6px rgba(20,20,23,.06), 0 18px 44px rgba(20,20,23,.09);
  --ombre-l:0 4px 12px rgba(20,20,23,.07), 0 34px 80px rgba(20,20,23,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* `height:auto` n'est pas facultatif : sans lui, une image dont le HTML porte
   un attribut `height` garde cette hauteur en pixels pendant que `max-width`
   réduit sa largeur, et l'image s'étire verticalement. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ── Typographie ─────────────────────────────────────────────── */
/* Une seule famille pour toute la page. Les titres se distinguent par la
   graisse et par un crénage resserré, pas par un second caractère. */
h1,h2,h3,h4{
  font-family:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-weight:600;margin:0;letter-spacing:-.03em;line-height:1.08;
  text-wrap:balance;
}
h1{font-size:clamp(38px,5.4vw,66px);letter-spacing:-.04em}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.25}
h4{font-size:16.5px;letter-spacing:-.015em}

.sur{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-clair);margin:0 0 16px;
}
.sur.accent{color:var(--accent)}

.chapeau{
  font-size:clamp(17px,1.4vw,19.5px);line-height:1.62;color:var(--encre-2);
  max-width:62ch;margin:18px 0 0;
}
p{margin:16px 0 0}
strong{font-weight:600;color:var(--encre)}

section{padding:var(--pas) 26px;position:relative}
section[id],header[id]{scroll-margin-top:calc(var(--barre) + 18px)}
.zone{max-width:var(--large);margin:0 auto}
.zone.etroite{max-width:var(--etroit)}
.bande{background:var(--papier-2);border-block:1px solid var(--trait)}

.saut{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
}
.saut:focus{left:0}

/* ── Barre de navigation ─────────────────────────────────────── */
.barre{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 26px;
  background:rgba(251,251,250,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
.barre.posee{border-bottom-color:var(--trait);background:rgba(251,251,250,.94)}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.02em}
.logo .point{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.liens{display:flex;gap:24px;align-items:center}
.liens a:not(.bouton){font-size:14px;color:var(--gris);transition:color .2s}
.liens a:not(.bouton):hover{color:var(--encre)}

.bascule{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:4px}
.bascule span{display:block;width:20px;height:1.5px;background:var(--encre);
  transition:transform .25s,opacity .2s}
.bascule[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.bascule[aria-expanded="true"] span:nth-child(2){opacity:0}
.bascule[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── Boutons ─────────────────────────────────────────────────── */
.bouton{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:12px 22px;border-radius:10px;
  background:var(--encre);color:var(--papier);
  font-size:15px;font-weight:550;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:background .25s,box-shadow .25s,border-color .25s;
  box-shadow:var(--ombre-s);
}
.bouton:hover{background:#000;box-shadow:var(--ombre-m)}
.bouton small{font-size:12px;font-weight:400;opacity:.6;letter-spacing:0}
.bouton.accent{background:var(--accent)}
.bouton.accent:hover{background:var(--accent-vif)}
.bouton.discret{background:var(--carte);color:var(--encre);border-color:var(--trait-vif);box-shadow:none}
.bouton.discret:hover{background:#fff;box-shadow:var(--ombre-s)}
.bouton.mini{padding:8px 15px;font-size:13.5px;border-radius:8px;box-shadow:none}
.duo-boutons{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px;align-items:center}

/* ── Hero ────────────────────────────────────────────────────── */
/* Aligné à gauche, comme le reste de la page : un titre centré au milieu de
   deux boutons est la mise en page par défaut de tout le monde. */
.hero{padding:calc(var(--barre) + clamp(70px,11vh,120px)) 26px clamp(50px,6vh,76px)}
.hero h1{max-width:16ch}
.hero .chapeau{margin-top:22px}
.hero .ligne-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;
  font-size:13.5px;color:var(--gris-clair);
}
.hero .ligne-meta b{color:var(--gris);font-weight:500}

/* ── Sommaire ────────────────────────────────────────────────── */
.sommaire{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait);
  border-radius:14px;overflow:hidden;margin-top:clamp(40px,5vw,58px);
}
.sommaire a{background:var(--papier);padding:19px 21px;transition:background .25s}
.sommaire a:hover{background:var(--carte)}
.sommaire b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.sommaire span{display:block;margin-top:4px;font-size:13.5px;color:var(--gris-clair)}

/* ── Cineo ───────────────────────────────────────────────────── */
.marque{display:flex;align-items:center;gap:13px;margin-bottom:22px;flex-wrap:wrap}
/* L'icône de l'application, telle qu'elle est générée dans le projet Cineo.
   Le squircle est déjà dessiné dans le PNG : un `border-radius` par-dessus
   rognerait ses angles continus au lieu de les suivre. */
.marque .oeil{width:38px;height:38px;flex:none}
.marque .nom{font-size:23px;font-weight:600;letter-spacing:-.025em}
.badge{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-doux);border-radius:6px;padding:5px 9px;
}

/* La capture, posée telle quelle, avec l'ombre que macOS donne à sa fenêtre.
   Le rayon recoupe les angles arrondis de la capture : sans lui, on verrait
   le bureau au travers des quatre coins. */
.capture{border-radius:12px;overflow:hidden;box-shadow:var(--ombre-l);background:var(--papier-3)}
figure{margin:0}
figure.large{margin-top:clamp(38px,4.5vw,56px)}
figcaption{margin-top:11px;font-size:13.5px;color:var(--gris)}
.duo{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
@media(min-width:900px){ .duo{grid-template-columns:1fr 1fr} }

/* Une entrée = un intertitre et un paragraphe. Pas de vignette : les listes
   d'icônes alignées disent la même chose que le texte, en moins précis. */
.detail{
  display:grid;grid-template-columns:1fr;gap:0;
  margin-top:clamp(40px,5vw,58px);border-top:1px solid var(--trait);
}
.detail > div{
  display:grid;grid-template-columns:1fr;gap:6px;
  padding:24px 0;border-bottom:1px solid var(--trait);
}
@media(min-width:820px){
  .detail > div{grid-template-columns:250px 1fr;gap:40px;padding:26px 0}
}
.detail h3{padding-top:2px}
.detail p{margin:0;color:var(--encre-2);font-size:16px;max-width:64ch}
.detail p + p{margin-top:12px}

.tableau{
  width:100%;border-collapse:collapse;margin-top:clamp(36px,4vw,52px);
  font-size:15px;background:var(--carte);border:1px solid var(--trait);border-radius:14px;
  overflow:hidden;
}
.tableau th,.tableau td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau tr:last-child th,.tableau tr:last-child td{border-bottom:0}
.tableau th{width:220px;font-weight:500;color:var(--gris);white-space:nowrap}
.enveloppe-tableau{overflow-x:auto}

.note{
  margin-top:clamp(34px,4vw,48px);padding:20px 22px;
  background:var(--carte);border:1px solid var(--trait);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;font-size:15px;color:var(--encre-2);
}
.note p{margin:0}
.note p + p{margin-top:10px}

/* ── Autres projets ──────────────────────────────────────────── */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;margin-top:clamp(36px,4.5vw,52px)}
.fiche{
  display:flex;flex-direction:column;background:var(--carte);
  border:1px solid var(--trait);border-radius:16px;padding:25px;
  transition:border-color .3s,box-shadow .3s;
}
.fiche:hover{border-color:var(--trait-vif);box-shadow:var(--ombre-m)}
.tete{display:flex;align-items:center;gap:12px}
.fiche h3{font-size:19px}
.etat{
  margin-left:auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-clair);border:1px solid var(--trait);border-radius:980px;
  padding:4px 10px;white-space:nowrap;
}
.fiche p{color:var(--gris);font-size:15px;margin:14px 0 0}
.liste-seche{margin:16px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--gris)}
.liste-seche li{padding:7px 0;border-top:1px solid var(--trait)}
.pastilles{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:20px}
.pastilles span{
  font-size:11.5px;color:var(--gris);background:var(--papier-2);
  border:1px solid var(--trait);border-radius:6px;padding:4px 9px;
}

/* ── Contact ─────────────────────────────────────────────────── */
.lien-souligne{
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(var(--accent-rgb),.35);
}
.lien-souligne:hover{text-decoration-color:currentColor}

/* ── Pied de page ────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--trait);padding:28px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  max-width:var(--large);margin:0 auto;font-size:13.5px;color:var(--gris-clair);
}
footer a:hover{color:var(--encre)}
footer .liens-pied{display:flex;gap:18px;flex-wrap:wrap}

/* ── Apparition à la lecture ─────────────────────────────────── */
.leve{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.leve.vue{opacity:1;transform:none}
.d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.15s}

/* Une animation d'entrée n'est pas une information : qui demande moins de
   mouvement reçoit la page déjà posée, pas une page vide. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .leve{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── Téléphone ───────────────────────────────────────────────── */
@media(max-width:760px){
  .bascule{display:flex}
  .liens{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(251,251,250,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--trait);padding:8px 26px 20px;display:none;
  }
  .liens.ouvert{display:flex}
  .liens a:not(.bouton){padding:13px 0;border-bottom:1px solid var(--trait);font-size:15px}
  .liens .bouton{margin-top:16px;justify-content:center}
  .tableau th{width:auto;white-space:normal}
  footer{justify-content:center;text-align:center}
}

/* Les noms de domaine cités dans l'encadré « Vie privée ». */
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--papier-2);border:1px solid var(--trait);
  border-radius:5px;padding:1px 5px;
}

/* ── Arborescences ───────────────────────────────────────────────
   Les deux dossiers attendus, montrés tels qu'on les verrait dans le
   Finder. Le bloc défile horizontalement plutôt que de casser ses
   lignes : une arborescence repliée ne veut plus rien dire. */
.colonnes-arbre{
  display:grid;grid-template-columns:1fr;gap:20px;
  margin-top:clamp(36px,4.5vw,52px);
}
@media(min-width:820px){ .colonnes-arbre{grid-template-columns:1fr 1fr} }
.colonnes-arbre h4{margin-bottom:12px}
.arbre{
  margin:0;padding:20px 22px;overflow-x:auto;
  background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.75;color:var(--encre-2);
  white-space:pre;tab-size:2;
}
.arbre code{background:none;border:0;padding:0;font-size:inherit}

/* ── Fil de retour ───────────────────────────────────────────────
   Sur une page de projet, le premier élément après la barre : d'où
   l'on vient, et comment y retourner. */
.fil{padding:calc(var(--barre) + 26px) 26px 0;font-size:13.5px}
.fil a{color:var(--gris);transition:color .2s}
.fil a:hover{color:var(--encre)}
.fil + section{padding-top:clamp(30px,3.5vw,44px)}

/* ── Carte de projet mise en avant ───────────────────────────────
   Elle occupe toute la largeur de la grille et porte une capture ;
   les autres cartes gardent leur colonne. */
.fiche.vedette{grid-column:1/-1}
.fiche .icone{width:34px;height:34px;flex:none}
.apercu-vedette{
  margin-top:22px;border-radius:10px;overflow:hidden;
  border:1px solid var(--trait);background:var(--papier-3);
  /* La capture est un large panorama : sans cette hauteur maximale, elle
     mangerait la carte entière et repousserait les boutons hors de vue. */
  max-height:340px;
}
.apercu-vedette img{width:100%;object-fit:cover;object-position:top center;max-height:340px}
.fiche .duo-boutons{margin-top:22px}
.fiche.vedette p{color:var(--encre-2);font-size:16px}

/* ── Accueil : de l'en-tête à la grille ──────────────────────────
   L'accueil est court. Avec les marges normales, l'espace entre le
   titre et la première carte devenait une page blanche : ces deux
   règles rapprochent la grille du titre. */
.hero.court{padding-bottom:clamp(26px,3vh,40px)}
section.colle{padding-top:clamp(24px,3vw,38px)}

/* La barre de repère qui remplace l'ancien en-tête de section. */
.repere{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--trait);
}
.repere .sur{margin:0}
.repere .compte{font-size:13.5px;color:var(--gris-clair)}
section.colle .grille{margin-top:clamp(22px,2.6vw,30px)}