@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 */
.top{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}
.top nav{display:flex;gap:28px}
.top a{text-decoration:none;color:var(--mute)}
.top a:hover{color:var(--ink)}

/* ------------------------------------------------ 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}
.lede-en{font-size:15px;line-height:1.5;color:var(--mute);max-width:62ch;margin:12px 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}
  .top nav{display:none}
}
@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}