@font-face{font-family:'Inter';src:url(/assets/fonts/inter-var-latin.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/assets/fonts/plexmono-400-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/assets/fonts/plexmono-600-latin.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --mute:#5E5E5E;
  --rule:#E0E0E0;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,5vw,64px);
  --max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-optical-sizing:auto;
     font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;
      font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;z-index:10}
.skip:focus{left:0}

/* ------------------------------------------------ en-tete */
/* la barre passe au-dessus du contenu : un titre geant ne doit jamais recouvrir ses liens */
.top{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;
     font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.top .mark{height:15px;width:auto;color:var(--ink);display:block}
/* Zone cliquable des liens : 14px de marge invisible autour du texte, rattrapee
   par une marge negative sur la nav. Le rendu ne bouge pas, mais la souris n'a
   plus a viser la ligne de texte, et l'espace entre deux liens est cliquable. */
.top nav{display:flex;align-items:center;margin:-14px -14px -14px 0}
.top nav a{padding:14px}
.top a{text-decoration:none;color:var(--mute)}
.top a:hover{color:var(--ink)}
/* bascule de langue : separee des liens de page, et seule a rester en mobile */
.top nav .lang{margin-left:14px;padding-left:28px;
  background:linear-gradient(var(--rule),var(--rule)) left center/1px 1.6em no-repeat}

/* ------------------------------------------------ hero */
/* padding-block seul : .hero partage son element avec .wrap, dont il ecraserait
   la gouttiere laterale avec un raccourci `padding` a specificite egale */
.hero{padding-block:clamp(56px,11vw,128px) clamp(52px,8vw,88px)}
.hero h1{margin:0}
.hero .mark{width:100%;max-width:840px;height:auto;color:var(--ink);display:block}
.baseline{font-size:clamp(20px,2.6vw,34px);font-weight:600;letter-spacing:-.022em;text-wrap:balance;
          margin:clamp(26px,4vw,42px) 0 0;transition:opacity .28s ease}
/* le claim tourne : fondu au changement, duree accordee a FONDU dans le script */
.baseline.is-swapping{opacity:0}
@media (prefers-reduced-motion:reduce){.baseline{transition:none}}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:62ch;margin:20px 0 0;text-wrap:pretty}

/* ------------------------------------------------ bandeau chiffres cles */
.keys{display:grid;grid-template-columns:repeat(4,1fr);margin:0;
      border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.keys>div{padding:22px 22px 24px;border-right:1px solid var(--rule)}
.keys>div:last-child{border-right:0}
.keys dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--mute);margin:0 0 10px}
.keys dd{margin:0;font-family:var(--mono);font-weight:600;font-size:clamp(16px,1.6vw,21px);
         letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ------------------------------------------------ sections */
main{counter-reset:sec}
.sec{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--rule)}
.sec:first-of-type{border-top:0}
.shead{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-size:12px;
       letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 clamp(28px,4vw,44px)}
.sec:not([hidden]){counter-increment:sec}
.shead::before{content:counter(sec,decimal-leading-zero) " -";color:var(--ink);font-weight:600;white-space:pre}
h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 20px;text-wrap:balance}

/* ------------------------------------------------ activite */
.doing{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);margin-top:clamp(36px,5vw,56px)}
.doing article{padding:26px 24px 34px;border-right:1px solid var(--rule)}
.doing article:last-child{border-right:0}
.doing .n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute);margin:0 0 18px}
.doing h3{margin:0 0 12px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.doing p{margin:0;font-size:15px;line-height:1.5;color:var(--mute)}

/* ------------------------------------------------ nos apps (reserve) */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
           border-top:2px solid var(--ink);margin-top:clamp(36px,5vw,56px)}
.apps-grid article{padding:26px 24px 34px;border-right:1px solid var(--rule)}
.apps-grid article:last-child{border-right:0}
.apps-grid h3{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.apps-grid p{margin:0;font-size:15px;line-height:1.5;color:var(--mute)}
.apps-grid a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
             display:inline-block;margin-top:14px}

/* ------------------------------------------------ identite */
.ident{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,72px)}
.ident dl{margin:0;display:grid;grid-template-columns:minmax(140px,34%) 1fr;align-content:start}
.ident dt,.ident dd{padding:15px 0;border-top:1px solid var(--rule);margin:0}
.ident dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
          color:var(--mute);padding-right:16px}
.ident dd{font-weight:500;font-variant-numeric:tabular-nums}
.ident dd.num{font-family:var(--mono);font-weight:600;letter-spacing:-.01em}
.ident dd .note{display:block;font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:0;color:var(--mute);margin-top:3px}

/* ------------------------------------------------ contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);border-top:2px solid var(--ink);
         padding-top:28px}
.contact a.mail{font-size:clamp(24px,3.6vw,44px);font-weight:800;letter-spacing:-.035em;
                text-decoration:none;border-bottom:3px solid var(--ink);line-height:1.2;display:inline-block}
.contact a.mail:hover{color:var(--mute);border-color:var(--mute)}
.contact address{font-style:normal;font-family:var(--mono);font-size:14px;line-height:1.9;color:var(--mute)}
.contact address b{color:var(--ink);font-weight:600}

/* ------------------------------------------------ mentions legales */
.legal{columns:2;column-gap:clamp(32px,5vw,72px);font-size:14.5px;line-height:1.6}
.legal>section{break-inside:avoid;margin:0 0 26px}
.legal h3{break-after:avoid;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
          text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 8px}
.legal p{margin:0}

/* ------------------------------------------------ pied */
.foot{border-top:2px solid var(--ink);padding:26px 0 44px;font-family:var(--mono);font-size:11.5px;
      letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
      display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

@media(max-width:900px){
  .keys{grid-template-columns:repeat(2,1fr)}
  .keys>div:nth-child(2n){border-right:0}
  .keys>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .doing,.apps-grid{grid-template-columns:1fr 1fr}
  .doing article:nth-child(2n),.apps-grid article:nth-child(2n){border-right:0}
  .doing article:nth-child(-n+2),.apps-grid article:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .ident,.contact{grid-template-columns:1fr}
  .legal{columns:1}
}
@media(max-width:620px){
  /* Les valeurs sont en monospace et insecables : a deux colonnes elles forcent
     les pistes plus large que 1fr et font deborder la page. Une seule colonne
     garde chaque identifiant sur une ligne, ce qui est le role de cette bande. */
  .keys{grid-template-columns:1fr}
  .keys>div{padding-inline:0}   /* empilees, les cellules s'alignent sur le reste de la page */
  .keys>div:nth-child(n){border-right:0;border-bottom:1px solid var(--rule)}
  .keys>div:nth-child(4){border-bottom:0}
  .doing,.apps-grid{grid-template-columns:1fr}
  .doing article,.apps-grid article{border-right:0;border-bottom:1px solid var(--rule)}
  .ident dl{grid-template-columns:1fr}
  .ident dt{padding-bottom:2px}
  .ident dd{padding-top:0;border-top:0}
  /* en mobile, seuls restent le lien vers les projets et la bascule de langue */
  .top nav a:not(.lang):not(.proj){display:none}
  .top nav .lang{margin-left:0;padding-left:20px}
}
@media print{
  .top nav,.skip{display:none}
  body{font-size:11pt}
  .sec{padding:18pt 0;break-inside:avoid}
}

/* ------------------------------------------------ titre de page interieure */
.pagetitle{padding-block:clamp(44px,7vw,92px) clamp(30px,4vw,52px)}
.pagetitle h1{font-size:clamp(34px,6vw,76px);font-weight:800;letter-spacing:-.035em;
              line-height:1;margin:0}
.pagetitle .lede{margin-top:22px}
.crumb{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
       text-transform:uppercase;color:var(--mute);text-decoration:none;margin:0 0 clamp(22px,3vw,34px)}
.crumb:hover{color:var(--ink)}

/* le logo d'en-tete est un lien vers l'accueil : pas de hauteur de ligne parasite */
.top .home{display:block;line-height:0}

/* Le lien principal du pied doit se lire comme un lien, pas comme du texte de pied.
   Ne pas le nommer « legal » : cette classe porte deja le bloc multi-colonnes
   des mentions, qui transformerait le lien en conteneur de colonnes. */
.foot a.primary{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------ racine : choix de la langue
   Page de repli de la racine, vue seulement sans JavaScript : sinon la racine
   envoie aussitot vers /fr/ ou /en/. */
.racine{min-height:56vh;display:grid;align-content:center;padding-block:48px}
.racine-langues{display:flex;flex-wrap:wrap;gap:16px 48px;margin:0}
.racine-langues a{font-size:clamp(40px,7vw,88px);font-weight:800;letter-spacing:-.04em;line-height:1;text-decoration:none}
.racine-langues a:hover{text-decoration:underline;text-underline-offset:.12em}
/* page 404 */
.mono-404{margin:0 0 12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--mute)}
.titre-404{margin:0;font-size:clamp(34px,6vw,76px);font-weight:800;letter-spacing:-.035em;line-height:1}
.racine .lede + .racine-langues{margin-top:clamp(28px,4vw,48px)}