/* guillaumedavid.design — the whole visual system lives here.
   Edit this file, run build_site.py, refresh. Nothing else needs touching. */

:root{
  /* ---- Glance, theme sombre -------------------------------------------
     Les valeurs viennent des tokens du design system Glance, sans
     interpretation : canvas, surface-raised, ink, ink-secondary, border,
     border-subtle, mint, on-mint, image-frame, danger.
     Le theme clair du systeme (ultraviolet) n'est pas embarque ici. */
  --bg:#131313;            /* canvas          */
  --card:#2D2D2D;          /* surface-raised  */
  --panel:#2D2D2D;         /* surface-raised  */
  --frame:#313131;         /* image-frame     */
  --ink:#FFFFFF;           /* ink             */
  --body:#FFFFFF;          /* ink             */
  --soft:#949494;          /* ink-secondary   */
  --mut:#949494;           /* ink-secondary   */
  --faint:#949494;         /* ink-secondary   */
  --dim:#6E6E6E;           /* ink-faint : separateurs, jamais du contenu */
  --line:#292929;          /* border-subtle   */
  --line2:#292929;         /* border-subtle   */
  --edge:#767676;          /* border          */
  --mint:#3CFFD0;          /* mint            */
  --mint-active:#1FE0B8;   /* mint-active     */
  --on-mint:#000000;       /* on-mint         */
  --danger:#D6231A;
  /* `danger` est calibre pour un aplat ou un filet. En texte sur
     surface-raised sombre il tombe a 2,7:1 et ne se lit plus : le
     message d'erreur prend une version eclaircie, a 4,9:1. */
  --danger-ink:#FF6A60;

  /* L'accent est une variable, pas une couleur : en sombre c'est le mint,
     en clair l'ultraviolet. Le systeme est explicite la-dessus, les deux
     ne jouent jamais le meme role sur le meme fond. */
  --accent:#3CFFD0;                    /* mint            */
  --accent-active:#1FE0B8;             /* mint-active     */
  --on-accent:#000000;                 /* on-mint         */
  --accent-soft:rgba(60,255,208,.34);  /* soulignement des liens */
  --link:var(--accent);
  --primary:var(--accent);
  --ink-reading:#DCDCDC;               /* voir le bloc lecture longue */
  --chrome:rgba(19,19,19,.72);         /* en-tete resserre */
  --scrim:rgba(19,19,19,.62);          /* voile du cadenas */

  --ease-out:cubic-bezier(.2,.7,.3,1);
  /* pour le glissement de page : depart accompagne, arrivee longue */
  --ease-io:cubic-bezier(.62,.02,.24,1);
  /* Un seul element rebondit a la fois, et c'est le plus petit.
     --spring anime les micro-interactions, --spring-soft le curseur
     du segmented, qui bouge en meme temps que toute la page. */
  --spring:cubic-bezier(.34,1.35,.5,1);
  --spring-soft:cubic-bezier(.33,1.14,.5,1);

  /* ---- Quatre familles, quatre roles, jamais interverties --------------
     display  : les titres, et rien d'autre
     ui       : boutons, navigation, libelles, nom
     editorial: le corps de texte, la seule a lire sur la longueur
     mono     : surtitres et metadonnees, en capitales */
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --ui:'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --editorial:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:var(--display);
  --sans:var(--ui);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--editorial); font-size:18px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none;
  border-bottom:1px solid var(--accent-soft)}
a:hover{border-bottom-color:var(--link)}
img{max-width:100%}

/* ---- header ----
   Colle en haut et se resserre des qu'on quitte le sommet de la page.
   Au repos il respire ; en lecture il se fait oublier tout en gardant le
   nom et la ligne de disponibilite sous les yeux. */
#top-sentinel{position:absolute; top:70px; left:0; width:1px; height:1px}
.topbar{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:34px 44px 22px; gap:24px;
  background:transparent;
  transition:padding .32s var(--ease-out), background-color .32s var(--ease-out),
             box-shadow .32s var(--ease-out);
}
/* pendant la reprise, l'en-tete prend son etat resserre sans l'animer */
html.holding .topbar,
html.holding .wordmark,
html.holding .seg a{transition:none}
html.scrolled .topbar{
  padding-top:11px; padding-bottom:11px;
  background:var(--chrome);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
}
html.scrolled .wordmark{font-size:17px}
html.scrolled .seg a{padding-top:5px; padding-bottom:5px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.brand{display:inline-flex; align-items:center; border:0;
  transition:transform .3s var(--spring)}
.brand:hover{transform:translateY(-1px)}
.brand:active{transform:translateY(0) scale(.99); transition-duration:.1s}
.wordmark{font-family:var(--serif); font-size:19px; font-weight:500;
  letter-spacing:-.1px; color:var(--ink); white-space:nowrap}
.seg{position:relative; display:inline-flex; background:var(--card);
  border:1px solid var(--edge); border-radius:999px; padding:3px;
  transition:transform .14s var(--ease-out)}
.seg a{position:relative; z-index:1; flex:1 1 0; min-width:84px; text-align:center;
  padding:7px 18px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--mut); border:0; white-space:nowrap;
  transition:color .28s var(--ease-out), font-weight .2s linear}
.seg a[aria-current]{color:var(--ink); font-weight:600}
.seg a:hover{color:var(--ink)}
.seg-thumb{
  position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  border-radius:999px; background:var(--card); z-index:0;
  box-shadow:0 1px 2px rgba(22,24,26,.10);
  transition:transform .3s var(--spring-soft);
  view-transition-name:seg-thumb;
}
/* Les deux libelles sont extraits eux aussi, et empiles au-dessus du
   curseur. Sans ca la pilule blanche, sortie de l'en-tete pour pouvoir
   glisser, repasse par-dessus le texte et on voit les mots disparaitre.
   Sur iOS le libelle ne disparait jamais : la pilule passe dessous. */
.seg a[data-seg="work"]{view-transition-name:seg-work}
.seg a[data-seg="info"]{view-transition-name:seg-info}
.seg[data-active="info"] .seg-thumb{transform:translateX(100%)}
.seg:has(a:active){transform:scale(.97)}
/* Dans un case study, la sortie remplace la navigation : le segmented
   control y affichait Work comme page courante, ce qui etait faux. */
.back{display:inline-flex; align-items:center; gap:9px; border:0;
  padding:7px 18px 7px 14px; border-radius:999px; font-size:14px;
  font-weight:500; color:var(--mut); white-space:nowrap;
  transition:color .25s var(--ease-out), background .25s var(--ease-out)}
.back svg{display:block; transition:transform .34s var(--spring)}
.back:hover{color:var(--ink); background:var(--card)}
.back:hover svg{transform:translateX(-3px)}
.avail{justify-self:end; font-size:14px; color:var(--mut); white-space:nowrap}
.avail b{color:var(--ink); font-weight:600}
.avail i{color:var(--dim); font-style:normal; padding:0 4px}

/* ---- shared shell ---- */
.site{max-width:1120px; margin:0 auto; padding:0 32px}
.foot{margin:80px 0 0; padding:24px 0 64px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 28px; font-size:14px; color:var(--faint)}
.foot-left{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center}
.foot a{color:var(--mut); border-bottom-color:rgba(148,148,148,.28)}
.foot-social{display:flex; align-items:center; gap:18px}
.foot-social .ico{border:0; color:var(--mut); display:inline-flex}
.foot-social .ico{transition:color .25s var(--ease-out), transform .3s var(--spring)}
.foot-social .ico:hover{color:var(--ink); transform:translateY(-2px)}
.foot-social .ico svg{width:19px; height:19px; display:block}
.meta{display:flex; align-items:center; gap:14px; font-size:12px; font-weight:700;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--faint)}
.meta i{color:var(--dim); font-style:normal}

/* ---- home ---- */
.eyebrow{max-width:1000px; padding:78px 0 0; font-size:12px; font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase; color:var(--faint); margin:0}
.lede{max-width:730px}
.eyebrow i{color:var(--dim); font-style:normal}
.lede h1{font-family:var(--serif); font-size:43px; line-height:1.18;
  font-weight:400; letter-spacing:-.4px; margin:18px 0 0}
.lede p{font-size:17px; line-height:1.6; color:var(--mut); margin:20px 0 0}

/* the plate: a hairline frame with the image mounted inside it */
.plate{display:block; background:var(--card); border:1px solid var(--line);
  border-radius:4px; padding:16px; margin:78px 0 0;
  box-shadow:0 1px 2px rgba(22,24,26,.03);
  transition:transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
             border-color .34s var(--ease-out)}
.plate:hover{transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 2px 6px rgba(22,24,26,.05), 0 20px 44px rgba(22,24,26,.10)}
.plate:active{transform:translateY(-1px); transition-duration:.12s}
.plate>img{width:100%; display:block; border-radius:2px}
.plate .body{padding:32px 28px 22px}
.plate .row{display:flex; gap:64px; align-items:flex-end; padding:18px 0 0}
.plate h2{font-family:var(--serif); font-size:35px; line-height:1.2;
  font-weight:500; letter-spacing:-.3px; margin:0; color:var(--ink)}
.plate .sum{margin:14px 0 0; font-size:17.5px; line-height:1.6; color:var(--soft);
  max-width:660px}
/* Secondaire par defaut : la carte entiere est cliquable, le bouton nomme
   la destination, il ne se dispute pas la vedette avec le titre. Il se
   remplit quand la carte est survolee. */
.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 26px;
  border:1px solid var(--primary); border-radius:999px; background:transparent;
  color:var(--primary); font-size:15px; font-weight:700; white-space:nowrap;
  font-family:var(--ui);
  transition:background .28s var(--ease-out), color .28s var(--ease-out),
             border-color .28s var(--ease-out)}
.btn svg{display:block; transition:transform .34s var(--spring)}
.plate:hover .btn{background:var(--accent); border-color:var(--accent);
  color:var(--on-accent)}
.plate:hover .btn svg{transform:translateX(4px)}

.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px 32px; margin:40px 0 0}
.tile{display:block; background:var(--card); border:1px solid var(--line);
  border-radius:4px; padding:12px; box-shadow:0 1px 2px rgba(22,24,26,.03);
  transition:transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
             border-color .34s var(--ease-out)}
.tile:hover{transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 2px 6px rgba(22,24,26,.05), 0 20px 44px rgba(22,24,26,.10)}
.tile:active{transform:translateY(-1px); transition-duration:.12s}
.tile>img{width:100%; display:block; border-radius:2px}
.tile .body{padding:22px 16px 14px}
.tile .meta{font-size:11px}
.tile h3{font-family:var(--serif); font-size:23px; line-height:1.26;
  font-weight:500; margin:13px 0 0; color:var(--ink)}
.tile p{margin:8px 0 0; font-size:15.5px; line-height:1.55; color:var(--mut)}

/* ---- article ---- */
article{padding:34px 0 0}
article h1{max-width:700px; margin:0 auto 16px; font-family:var(--serif);
  font-size:46px; line-height:1.14; letter-spacing:-.7px; font-weight:500}
article h1+h3{max-width:700px; margin:0 auto 20px; font-size:20.5px;
  line-height:1.5; font-weight:400; color:var(--mut)}
.byline{max-width:700px; margin:0 auto 54px; padding-bottom:26px;
  border-bottom:1px solid var(--line)}
article h2{max-width:700px; margin:62px auto 18px; font-family:var(--serif);
  font-size:30px; line-height:1.26; letter-spacing:-.3px; font-weight:500}
article p,article ul,article ol,article table,article blockquote{
  max-width:700px; margin-left:auto; margin-right:auto}
article p{margin:0 auto 22px; color:var(--body)}
strong{font-weight:700; color:var(--ink)}
sup{font-size:11px} sup a{border:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:var(--panel); padding:2px 6px; border-radius:4px; color:var(--ink)}
blockquote{margin:30px auto; padding:4px 0 4px 24px;
  border-left:3px solid var(--edge); color:var(--mut)}
blockquote p{margin:0 0 10px; color:var(--mut)}
blockquote p:last-child{margin:0}
table{width:100%; border-collapse:collapse; margin:30px auto 34px;
  font-size:15.5px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--body)}
th{font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--edge)}
figure{max-width:700px; margin:44px auto 48px}
/* {.wide} dans le markdown : l'image deborde la colonne de texte */
figure.wide{max-width:1000px}
figure img{width:100%; display:block; border:1px solid var(--line);
  border-radius:8px}
hr{max-width:700px; margin:52px auto; border:0; border-top:1px solid var(--line)}
aside{max-width:820px; margin:48px auto 52px; padding:28px 32px 8px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px}
aside p{max-width:none; font-size:16.5px; line-height:1.66; color:var(--soft)}
aside p strong{color:var(--ink)}
aside figure{max-width:none; margin:22px 0 28px}
#references+p,.refs p{font-size:14.5px}

/* ---- info ----
   Deux colonnes : le texte garde sa mesure de lecture, le portrait prend
   ce qui reste. Le rapport 1,75 pour 1 donne la priorite aux mots sans que
   la photo devienne une vignette. Sans photo, le texte reprend toute la
   largeur (classe .no-photo posee par le generateur). */
.page{display:grid; grid-template-columns:1.75fr 1fr; gap:64px;
  align-items:start; max-width:1000px; padding:86px 0 0}
.page.no-photo{display:block; max-width:660px}
.page-text{max-width:620px}
.page h1{font-family:var(--serif); font-size:44px; line-height:1.16;
  font-weight:400; letter-spacing:-.5px; margin:0}
.page p{margin:0 0 22px; font-size:18.5px; line-height:1.68; color:var(--body)}
.page p:first-of-type{margin-top:30px}
.page .contact{margin:44px 0 0; padding:26px 0 0; border-top:1px solid var(--line);
  font-size:17px; line-height:1.7; color:var(--mut)}
.portrait{max-width:none; margin:0}
.portrait img{width:100%; display:block; border:1px solid var(--line);
  border-radius:4px}
/* emplacement en attente d'une vraie photo */
.portrait.empty{aspect-ratio:4/5; display:flex; align-items:center;
  justify-content:center; text-align:center; background:var(--panel);
  border:1px dashed var(--edge); border-radius:4px; color:var(--faint);
  font-size:13px; line-height:1.9}
.portrait.empty b{color:var(--mut); font-weight:600}

/* ---- narrow ---- */
@media (max-width:760px){
  body{font-size:17px}
  .topbar{grid-template-columns:1fr; gap:14px; justify-items:start}
  .avail{justify-self:start}
  .site{padding:0 20px}
  .eyebrow{padding:56px 0 0}
  .lede h1{font-size:31px}
  .lede p{font-size:16.5px}
  .plate{margin:48px 0 0; padding:10px}
  .plate .body{padding:24px 12px 12px}
  .plate h2{font-size:26px}
  .plate .sum{font-size:16.5px}
  .plate .row{flex-direction:column; align-items:flex-start; gap:24px}
  .grid{grid-template-columns:1fr; gap:28px}
  .tile .body{padding:20px 10px 10px}
  article{padding:36px 0 0}
  article h1{font-size:32px}
  article h1+h3{font-size:18px}
  article h2{font-size:24px}
  #top-sentinel{top:56px}
  .topbar{padding:26px 20px 16px}
  html.scrolled .topbar{grid-template-columns:auto 1fr; justify-items:start;
    padding:8px 20px; gap:14px}
  html.scrolled .avail{display:none}
  html.scrolled .seg{justify-self:end}
  .page{display:block; padding:56px 0 0}
  .page h1{font-size:31px}
  .page p{font-size:17.5px}
  /* en colonne, le portrait passe apres le texte et reste modeste */
  .portrait{max-width:280px; margin:40px 0 0}
  aside{padding:22px 20px 4px}
  table{font-size:14px}
  th,td{padding:9px 10px}
}


/* ---- passage d'une page a l'autre ------------------------------------
   Work et Info sont deux pages distinctes. Le navigateur prend une image
   de celle qu'on quitte et de celle qui arrive et les fait defiler ensemble,
   comme deux panneaux d'une meme bande. C'est la page d'arrivee qui decide
   du sens : on n'atteint Info que depuis Work, et inversement.

   Trois elements sont sortis de la bande et animes a part :
   l'en-tete, qui ne doit pas defiler avec le contenu puisque c'est lui qui
   contient la commande ; et le curseur du segmented, qui traverse d'un
   onglet a l'autre pendant que le contenu defile. Sans ca le curseur serait
   fige dans chacune des deux captures et sauterait d'un coup.

   La ou l'API n'existe pas (Firefox aujourd'hui, ou une page ouverte depuis
   le disque), la navigation reste instantanee et rien ne casse. */
@view-transition{navigation:auto}
.topbar{view-transition-name:topbar}

@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(*){
    animation-duration:.52s; animation-timing-function:var(--ease-io)}
  /* l'ordre de superposition de la page est perdu des qu'un element est
     extrait : on le redonne explicitement */
  ::view-transition-group(root){z-index:0}
  ::view-transition-group(topbar){z-index:1}
  ::view-transition-group(seg-thumb){z-index:2}
  ::view-transition-group(seg-work),
  ::view-transition-group(seg-info){z-index:3}
  /* le libelle change de graisse et de valeur au rythme du curseur */
  ::view-transition-old(seg-work),::view-transition-new(seg-work),
  ::view-transition-old(seg-info),::view-transition-new(seg-info){
    animation-duration:.52s; animation-timing-function:var(--ease-io);
    mix-blend-mode:normal}
  /* en entrant dans un case study les libelles n'ont pas de vis-a-vis :
     ils s'effacent avec l'en-tete au lieu de flotter une demi-seconde */
  html[data-page="piece"]::view-transition-old(seg-work),
  html[data-page="piece"]::view-transition-old(seg-info){
    animation-duration:.2s; animation-timing-function:linear}
  ::view-transition-image-pair(root){isolation:auto}
  ::view-transition-old(root),::view-transition-new(root){
    animation-duration:.52s; animation-fill-mode:both;
    animation-timing-function:var(--ease-io);
    mix-blend-mode:normal; backface-visibility:hidden}
  /* l'en-tete ne bouge pas : son contenu est le meme d'une page a l'autre,
     un fondu court suffit a couvrir le changement d'onglet actif */
  ::view-transition-old(topbar),::view-transition-new(topbar){
    animation-duration:.2s; animation-timing-function:linear;
    mix-blend-mode:normal}
  /* vers Info : le contenu part vers la gauche, Info entre par la droite */
  html[data-page="info"]::view-transition-old(root){animation-name:push-out-left}
  html[data-page="info"]::view-transition-new(root){animation-name:push-in-right}
  /* retour vers Work : le sens s'inverse */
  html[data-page="work"]::view-transition-old(root){animation-name:push-out-right}
  html[data-page="work"]::view-transition-new(root){animation-name:push-in-left}
  /* entrer dans un case study n'est pas un aller-retour lateral :
     on descend dans le contenu, la page monte et se substitue */
  html[data-page="piece"]::view-transition-old(root){animation-name:drop-out}
  html[data-page="piece"]::view-transition-new(root){animation-name:rise-in}
}
/* la bande entiere se deplace d'un ecran : ce qui sort pousse ce qui entre */
@keyframes push-out-left{from{transform:translateX(0)} to{transform:translateX(-100%)}}
@keyframes push-in-right{from{transform:translateX(100%)} to{transform:translateX(0)}}
@keyframes push-out-right{from{transform:translateX(0)} to{transform:translateX(100%)}}
@keyframes push-in-left{from{transform:translateX(-100%)} to{transform:translateX(0)}}
@keyframes drop-out{to{opacity:0; transform:scale(.985)}}
@keyframes rise-in{from{opacity:0; transform:translateY(16px)}}

/* ---- figure viewer --------------------------------------------------
   Les figures sont a la mesure du texte ; un clic les rouvre a la taille
   a laquelle elles ont ete exportees. */
figure.zoomable img{cursor:zoom-in}
figure.zoomable img:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
html.viewer-on, html.viewer-on body{overflow:hidden}
#viewer[hidden]{display:none}
#viewer{position:fixed; inset:0; z-index:998; display:flex;
  align-items:center; justify-content:center; padding:56px 88px;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.v-stage{max-width:1400px; max-height:100%; margin:0; display:flex;
  flex-direction:column; align-items:center; gap:16px}
.v-stage img{max-width:100%; max-height:calc(100vh - 150px); width:auto;
  display:block; border-radius:4px; background:var(--card)}
.v-stage figcaption{margin:0; max-width:760px; text-align:center;
  font-size:14px; line-height:1.6; color:#C9C6C1}
#viewer button{position:absolute; cursor:pointer; font:inherit; color:#FFFFFF;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; line-height:1;
  transition:background .22s var(--ease-out), transform .3s var(--spring)}
#viewer button:hover{background:rgba(255,255,255,.18)}
#viewer button:active{transform:scale(.94)}
.v-close{top:22px; right:26px; width:42px; height:42px; font-size:24px}
.v-prev,.v-next{top:50%; margin-top:-24px; width:48px; height:48px;
  font-size:30px; padding:0 0 4px}
.v-prev{left:22px} .v-next{right:22px}
.v-prev:hover{transform:translateX(-2px)}
.v-next:hover{transform:translateX(2px)}
@media (max-width:760px){
  #viewer{padding:20px 12px 28px}
  .v-prev,.v-next{width:40px; height:40px; font-size:24px}
  .v-prev{left:8px} .v-next{right:8px}
  .v-stage img{max-height:calc(100vh - 180px)}
}

/* une URL nue dans les references reste cliquable et ne deborde pas */
a.url{word-break:break-word; color:var(--link)}

/* ---- password gate (site.json > gate) ------------------------------------
   A curtain, not a lock: it keeps casual visitors out and the page out of
   search results. Anyone who opens the page source can read past it. */
html.gate-on, html.gate-on body{overflow:hidden; height:100%}
#gate{display:none}
html.gate-on #gate{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--scrim);
  backdrop-filter:blur(22px) saturate(.9);
  -webkit-backdrop-filter:blur(22px) saturate(.9);
}
.gate-panel{
  width:100%; max-width:545px; background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:38px 40px 36px;
}
/* Le kicker nomme la porte avant de la nommer en grand : mono, capitales,
   couleur d'accent, comme partout ailleurs sur le site. */
.gate-kicker{margin:0; font-family:var(--mono); font-size:12px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent)}
.gate-title{margin:14px 0 0; font-size:36px; line-height:1.1;
  color:var(--ink)}
.gate-note{margin:14px 0 0; max-width:420px; font-size:16px; line-height:1.55;
  color:var(--mut)}
/* Un champ de saisie merite un libelle, pas un texte fantome qui disparait
   des la premiere lettre. */
.gate-label{display:block; margin:30px 0 9px; font-family:var(--ui);
  font-size:14px; font-weight:500; color:var(--soft)}
#gate-form{margin:0}
.gate-row{display:flex; gap:10px}
#gate-input{
  flex:1 1 auto; min-width:0; font:inherit; font-size:15px;
  padding:12px 16px; color:var(--ink); background:var(--bg);
  border:1px solid var(--edge); border-radius:4px; outline:none;
}
#gate-input:focus{border-color:var(--accent)}
#gate-form button{
  font-family:var(--ui); font-size:15px; font-weight:700; cursor:pointer;
  padding:12px 26px; color:var(--on-accent); background:var(--accent);
  border:1px solid var(--accent); border-radius:4px;
  transition:background .2s linear, border-color .2s linear;
}
#gate-form button:hover{background:var(--accent-active);
  border-color:var(--accent-active)}
.gate-error{margin:12px 0 0; font-size:13px; color:var(--danger-ink);
  font-family:var(--mono); letter-spacing:.02em}
@media (max-width:760px){
  .gate-panel{padding:28px 22px 26px}
  .gate-title{font-size:28px}
  .gate-row{flex-direction:column}
  #gate-input,#gate-form button{width:100%}
}


/* ---- anyone who asked for less movement gets none of it ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .plate:hover,.tile:hover,.brand:hover,.foot-social .ico:hover{transform:none}
  .back:hover svg,.v-prev:hover,.v-next:hover{transform:none}
}

/* ---- fin d'article ---------------------------------------------------
   Le moment ou quelqu'un vient de donner vingt minutes a un texte est le
   plus favorable de tout le site. Le laisser finir sur un pied de page le
   gaspille. La piece suivante d'abord, puis les portes pour repondre. */
.endblock{max-width:820px; margin:76px auto 0}
.next{display:flex; align-items:center; gap:24px; border:1px solid var(--line);
  border-radius:4px; padding:14px 22px 14px 14px; background:var(--card);
  box-shadow:0 1px 2px rgba(22,24,26,.03);
  transition:transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
             border-color .34s var(--ease-out)}
.next:hover{transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 2px 6px rgba(22,24,26,.05), 0 18px 38px rgba(22,24,26,.09)}
.next>img{width:148px; height:96px; object-fit:cover; border-radius:2px;
  display:block; flex:0 0 auto}
.next>div{flex:1 1 auto; min-width:0}
.next h2{margin:8px 0 0; font-family:var(--serif); font-size:24px;
  line-height:1.24; font-weight:500; color:var(--ink); max-width:none}
.next-go{flex:0 0 auto; color:var(--mut); display:inline-flex}
.next-go svg{display:block; transition:transform .34s var(--spring)}
.next:hover .next-go{color:var(--ink)}
.next:hover .next-go svg{transform:translateX(4px)}

.signoff{margin:34px 0 0; padding:30px 0 0; border-top:1px solid var(--line)}
.sign-name{margin:0; font-family:var(--serif); font-size:22px; font-weight:500;
  color:var(--ink); max-width:none}
.sign-line{margin:8px 0 0; font-size:16px; line-height:1.6; color:var(--mut);
  max-width:600px}
.sign-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  margin:24px 0 0}
.sign-actions .btn:hover{background:var(--accent); border-color:var(--accent);
  color:var(--on-accent)}
.sign-actions .btn:hover svg{transform:translateX(4px)}
.sign-actions .lnk{font-size:15px; font-weight:500; color:var(--mut);
  border-bottom-color:rgba(148,148,148,.34)}
.sign-actions .lnk:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* les references deviennent une annexe, en retrait */
article.appendix{padding:46px 0 0}
article.appendix h2{font-size:24px; color:var(--soft)}

@media (max-width:760px){
  .endblock{margin:54px auto 0}
  .next{flex-wrap:wrap; gap:16px; padding:12px}
  .next>img{width:100%; height:150px}
  .next h2{font-size:20px}
  .sign-actions{gap:14px 18px}
}

/* ---- Glance : quelle famille fait quoi --------------------------------
   Le systeme est explicite la-dessus et les quatre roles ne s'echangent
   jamais. Ce bloc est la traduction directe de cette regle sur les
   composants du site. Il ne touche ni aux tailles, ni aux espacements,
   ni aux rayons : seulement la famille, la graisse et la couleur. */

/* display : les titres, et rien d'autre */
.lede h1, .plate h2, .tile h3, .next h2,
article h1, article h2, .page h1, .gate-title{
  font-family:var(--display); font-weight:900;
  font-optical-sizing:auto; letter-spacing:-.005em;
}
/* le chapeau d'article reste de l'editorial, en italique */
article h1+h3{font-family:var(--editorial); font-style:italic; color:var(--mut)}

/* ui : tout ce sur quoi on clique, plus le nom */
.wordmark{font-family:var(--ui); font-weight:700; letter-spacing:-.2px}
.seg a, .avail, .back, .btn, .sign-name, .sign-actions .lnk,
#gate-input, #gate-form button{font-family:var(--ui)}
.sign-name{font-weight:700}
.sign-actions .lnk{font-weight:700}
.avail b{font-weight:700}

/* mono : surtitres et metadonnees, en capitales, jamais de la prose */
.eyebrow, .meta, .foot{font-family:var(--mono)}
.eyebrow{color:var(--accent); letter-spacing:.12em; font-weight:700}
.meta{letter-spacing:.1em}
/* le premier segment d'une ligne de metadonnees est le kicker : il porte
   l'accent, le reste est de la metadonnee grise */
.meta span:first-child{color:var(--accent)}
.foot{letter-spacing:.04em}

/* le curseur du segmented devient l'aplat d'accent, avec son texte noir */
.seg-thumb{background:var(--accent); box-shadow:none}
.seg a[aria-current]{color:var(--on-accent); font-weight:700}

/* une image se pose toujours sur son cadre : c'est l'etat de chargement,
   pas une decoration */
.plate>img, .tile>img, .next>img, figure img, .v-stage img,
.portrait img{background:var(--frame)}
figure img{border-color:var(--line)}

/* le systeme impose un anneau de focus visible, jamais supprime */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Le bouton primaire est un aplat d'accent, pas un contour : c'est ce que
   dit le systeme ("mint : fill for primary buttons") et ce que montrent
   les maquettes. Le survol passe a mint-active, un simple echange de
   couleur, sans transformation. */
.btn{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.plate:hover .btn, .sign-actions .btn:hover, .btn:hover{
  background:var(--accent-active); border-color:var(--accent-active);
  color:var(--on-accent)}
.sign-actions .lnk{color:var(--link); border-bottom-color:var(--accent-soft)}
.sign-actions .lnk:hover{color:var(--accent-active);
  border-bottom-color:var(--accent-active)}

/* ---- lecture longue sur fond sombre ----------------------------------
   Trois leviers, du plus efficace au moins visible.

   1. Le contraste. Du blanc pur sur un canvas presque noir monte a 18,6:1
      et produit du halo : les contours des lettres bavent, d'autant plus
      pour un oeil astigmate. On redescend a 13,5:1, qui reste tres au-dessus
      du niveau AAA (7:1) et supprime l'essentiel du phenomene.
      Le systeme ne couvrait pas ce cas : il ne propose que `ink` (#ffffff)
      et `ink-secondary` (#949494, documente pour des legendes, pas pour du
      corps de texte). C'est un ajout deliberement documente, comme le
      systeme le fait lui-meme pour `danger`.
   2. La justification. 85 signes par ligne, l'oeil se perd en fin de ligne
      et doit chercher le debut de la suivante. On revient dans la fourchette
      de confort, 65 a 75.
   3. Le corps et l'interlignage. 19 px est la taille que le systeme prescrit
      pour la lecture longue (`body-lg`) ; l'interlignage est un peu plus
      genereux que le token, parce que sur fond sombre il compte double. */
:root{ --ink-reading:#DCDCDC; }
article p, article li, article td, article th{color:var(--ink-reading)}
article p, article ul, article ol{font-size:19px; line-height:1.70}
article p, article ul, article ol, article table, article blockquote,
article h1, article h1+h3, article h2, .byline, hr{max-width:640px}
figure{max-width:640px}
figure.wide{max-width:960px}
/* le gras se signale par sa graisse ; en blanc pur sur fond sombre il est
   la premiere chose a baver */
article strong{color:var(--ink-reading)}

/* ---- la carte de la home : image a gauche, texte a droite -------------
   Le bandeau pleine largeur donnait une carte tres haute pour une seule
   piece. En deux colonnes elle occupe la moitie de la hauteur et le titre
   arrive tout de suite a cote de l'image. Rayons et filets inchanges. */
.plate{display:grid; grid-template-columns:minmax(0,45%) minmax(0,1fr);
  align-items:stretch; padding:14px; gap:0}
.plate>img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/11}
.plate .body{padding:24px 10px 24px 32px;
  display:flex; flex-direction:column; justify-content:center}
.plate .row{flex-direction:column; align-items:flex-start; gap:0;
  padding:14px 0 0}
.plate h2{font-size:30px}
.plate .sum{margin:12px 0 0; font-size:16.5px; max-width:none;
  color:var(--mut)}
.plate .btn{margin:26px 0 0}

@media (max-width:760px){
  .plate{grid-template-columns:1fr; padding:10px}
  .plate>img{aspect-ratio:16/10}
  .plate .body{padding:22px 12px 14px}
  .plate h2{font-size:25px}
  article p, article ul, article ol{font-size:17.5px}
}

/* La carte n'est plus un bandeau : elle se cale sur la largeur du bloc de
   titre au-dessus d'elle, comme sur les maquettes. Une carte deux fois plus
   large que le texte qu'elle suit se lit comme une banniere publicitaire. */
.plate{max-width:800px}
.plate>img{aspect-ratio:4/3}
.plate h2{font-size:27px; line-height:1.22}
.plate .sum{font-size:16px; line-height:1.55}
.plate .btn{margin:22px 0 0; padding:11px 22px; font-size:14px}
@media (max-width:760px){
  .plate{max-width:none}
  .plate h2{font-size:24px}
}

/* La carte reprend toute la largeur du contenu, celle que materialise le
   filet du pied de page. Bornee a 800 px elle laissait a sa droite un vide
   que rien d'autre n'occupait, et la composition flottait. */
.plate{max-width:none}
.plate>img{aspect-ratio:4/3}
.plate .body{padding:26px 16px 26px 38px}
.plate h2{font-size:30px}
.plate .sum{font-size:16.5px; line-height:1.58}
.plate .btn{margin:24px 0 0; padding:12px 24px; font-size:15px}
@media (max-width:760px){
  .plate>img{aspect-ratio:16/10}
  .plate .body{padding:22px 12px 14px}
  .plate h2{font-size:24px}
}


/* ---- Glance, theme clair ---------------------------------------------
   Les memes tokens, colonne "light" : canvas blanc, encres inversees, et
   surtout l'accent qui change de nature. Le systeme est net la-dessus :
   sur fond clair c'est l'ultraviolet qui porte l'action primaire et les
   liens, parce que le mint sur blanc ne fait que 1,3:1 et ne se lit pas.
   Le mint reste dans la palette mais n'a plus de role ici. */
:root[data-theme="light"]{
  --bg:#FFFFFF;            /* canvas          */
  --card:#F2F2F2;          /* surface-raised  */
  --panel:#F2F2F2;         /* surface-raised  */
  --frame:#E5E5E5;         /* image-frame     */
  --ink:#000000;           /* ink             */
  --body:#000000;          /* ink             */
  --soft:#5A5A5A;          /* ink-secondary   */
  --mut:#5A5A5A;           /* ink-secondary   */
  --faint:#5A5A5A;         /* ink-secondary   */
  --dim:#A6A6A6;           /* ink-faint       */
  --line:#E4E4E4;          /* border-subtle   */
  --line2:#E4E4E4;         /* border-subtle   */
  --edge:#767676;          /* border          */
  --accent:#5200FF;        /* ultraviolet        */
  --accent-active:#3D00BF; /* ultraviolet-active */
  --on-accent:#FFFFFF;     /* on-ultraviolet     */
  --accent-soft:rgba(82,0,255,.30);
  /* meme raisonnement qu'en sombre, symetrique : du noir pur sur du blanc
     pur monte a 21:1 et eblouit sur la longueur. 13,4:1 reste largement
     au-dessus du niveau AAA. */
  --ink-reading:#2B2B2B;
  --chrome:rgba(255,255,255,.78);
  --scrim:rgba(255,255,255,.66);
  --danger-ink:#D6231A;   /* 4,6:1 sur surface-raised clair */
}

/* ---- copy v2 : intertitres de la page About, tuile "In writing" ---- */
.page h2{font-family:var(--serif); font-size:26px; line-height:1.25;
  font-weight:400; margin:48px 0 0; color:var(--ink)}
.page h2 + p{margin-top:16px}
.tile.upcoming{cursor:default; background:transparent; border-style:dashed}
/* carte inactive : aucun effet au survol, titre en gris secondaire */
.tile.upcoming, .tile.upcoming:hover, .tile.upcoming:active{
  transform:none; box-shadow:none; border-color:var(--line); transition:none}
.tile.upcoming h3{color:var(--mut)}
.tile.upcoming .body{padding:26px 22px 22px}

/* ---- titre de la home : hierarchie renforcee (24 sept., puis 26 sept.) ----
   Titre : 43 -> 60 -> 76 -> 88px desktop ; 31 -> 38 -> 44 -> 50px mobile.
   Sous-texte : 17 -> 21 -> 24px desktop ; 16,5 -> 18 -> 19px mobile.
   Regler ici les tailles pour ajuster. */
.lede{max-width:1060px}
.lede h1{font-size:88px; line-height:1.02; letter-spacing:-.022em}
.lede p{max-width:820px; margin-top:36px; font-size:24px; line-height:1.5}
@media (max-width:760px){
  .lede h1{font-size:50px; line-height:1.06}
  .lede p{font-size:19px; line-height:1.55; margin-top:24px}
}

/* ---- en-tete fixe (24 sept.) ----
   L'en-tete ne fait plus partie du flux : se resserrer ne change plus la
   hauteur de la page. La place qu'il occupe deplie est reservee ici, mesuree
   par le script (--topbar-h). Voir STICKY_JS dans build_site.py. */
.topbar{position:fixed; top:0; left:0; right:0}
body{padding-top:var(--topbar-h, 104px)}
#top-sentinel{display:none}

/* ---- About : maquette Design du 24 sept. ----
   Titre, phrase en italique, bande de faits, sections a surtitre mono,
   portrait qui accompagne la lecture. */
.page{max-width:1240px; grid-template-columns:1.75fr 1fr; gap:64px; padding-top:44px}
.page-text{max-width:600px}
.page h1{font-size:40px; line-height:1.05; letter-spacing:-.5px}
.page .about-lead{margin:14px 0 0; font-family:var(--editorial); font-style:italic;
  font-size:19px; line-height:1.47; color:var(--ink)}
.page p{font-family:var(--editorial); font-size:19px; line-height:30px;
  color:var(--ink); margin:22px 0 0}
.page p:first-of-type{margin-top:14px}
.page p b{font-weight:600}
.facts{margin:28px 0 0; padding:0 0 24px; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:28px 32px}
.facts dt{margin:0; font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--dim)}
.facts dd{margin:4px 0 0; font-family:var(--ui); font-weight:500; font-size:14px;
  line-height:20px; color:var(--ink)}
.facts + p{margin-top:28px}
.page .section-kicker{margin:64px 0 0; font-family:var(--mono); font-weight:700;
  font-size:12px; line-height:16px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent)}
.page h2{margin:10px 0 0; font-family:var(--ui); font-weight:700; font-size:28px;
  line-height:34px; color:var(--ink)}
.page h2 + p{margin-top:18px}
.page .contact{margin:40px 0 0; padding:24px 0 0; font-family:var(--ui);
  font-size:15px; line-height:26px; color:var(--mut)}
.portrait{position:sticky; top:calc(var(--topbar-h, 104px) - 40px); align-self:start}
.portrait img, .portrait.empty{border-radius:20px}
@media (max-width:760px){
  .page{padding-top:32px}
  .page h1{font-size:32px}
  .page p, .page .about-lead{font-size:17.5px; line-height:28px}
  .page .section-kicker{margin-top:48px}
  .page h2{font-size:24px; line-height:30px}
  .portrait{position:static}
  .facts{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px}
}
.page .about-cta{margin:40px 0 0; font-family:var(--ui); font-size:16px; line-height:24px; color:var(--mut)}
.page .about-cta a{font-weight:700}
.page .about-cta + .contact{margin-top:20px}

/* ---- logo gd ----------------------------------------------------------
   Remplace le nom dans l'en-tete. "gd" suit l'encre du theme, le curseur
   reste ultraviolet (Glance) dans les deux themes. */
.logo{display:block; height:26px; width:auto; color:var(--ink);
  transition:height .32s var(--ease-out)}
.logo-cursor{fill:#5200FF}
html.scrolled .logo{height:22px}
html.holding .logo{transition:none}

/* ---- About, mise en page B (wireframe Claude Design, 25 sept.) ----
   Une colonne de lecture de 760px dans une page de 1060px. Le portrait
   flotte a droite du premier paragraphe et deborde de 150px dans la marge ;
   la photo de travail flotte a gauche au debut de Method. Le texte habille
   les deux. Sur mobile, plus de flottant : les images reprennent la largeur. */
.page.about-b{display:block; max-width:1060px; margin:0 auto; padding-top:56px}
.about-b .about-head{max-width:760px}
.about-b h1{font-size:44px; line-height:48px}
.about-b .about-lead{font-size:21px; line-height:31px; margin:14px 0 28px}
.about-b .facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px 28px; margin:0; padding:0 0 24px}
.about-b .about-body{max-width:760px; margin:40px 0 0}
.about-b .about-body > p:first-of-type{margin-top:0}
.about-b p{margin:0 0 22px}
.about-b .clear{clear:both}
.about-portrait{float:right; width:300px; margin:6px -150px 16px 40px}
.about-portrait img, .about-figure img{display:block; width:100%; border:0;
  border-radius:20px; object-fit:cover; background:var(--frame)}
.about-portrait img{aspect-ratio:4/5; object-position:50% 30%}
.about-figure{float:left; width:440px; margin:6px 36px 16px 0}
.about-figure img{aspect-ratio:4/3}
.about-figure figcaption{margin:10px 0 0; font-family:var(--mono); font-size:11px;
  line-height:16px; letter-spacing:.04em; color:var(--mut)}
.about-b .section-kicker{margin-top:56px}
.about-b h2{margin:10px 0 18px}
.about-b .about-cta{margin:40px 0 20px}
.about-b .about-cta + .contact{margin-top:0}
@media (max-width:1180px){
  .about-portrait{margin-right:0}
}
@media (max-width:760px){
  .page.about-b{padding-top:32px}
  .about-b h1{font-size:32px; line-height:36px}
  .about-b .about-lead{font-size:18px; line-height:28px}
  .about-b .facts{grid-template-columns:1fr 1fr; gap:20px 24px}
  .about-portrait{float:none; width:70%; margin:0 0 28px}
  .about-figure{float:none; width:100%; margin:0 0 24px}
}


/* =====================================================================
   PAGE ABOUT (maquette C4, Claude Design, 26 sept.)
   Bandes pleine largeur, portrait et photo de travail en debord,
   timeline pour Before, grille "Keep reading" de 3 cartes.
   Page About, maquette C4 retenue.
   ===================================================================== */
html[data-page="info"] body{overflow-x:clip}
html[data-page="info"]:not(.scrolled) .topbar{background:var(--panel)}
.ar{--gut:max(32px, calc((100vw - 1056px) / 2)); color:var(--ink)}
.ar p{margin:0}
.ar b{font-weight:600}
.ar > section{margin-inline:calc(50% - 50vw)}
.ar-kicker{font-family:var(--mono); font-weight:700; font-size:12px; line-height:16px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.ar h2{margin:12px 0 24px; font-family:var(--ui); font-weight:700; font-size:28px;
  line-height:34px; color:var(--ink)}
.ar .ar-cols p, .ar-method-text p:not(.ar-kicker){font-family:var(--editorial);
  font-size:19px; line-height:30px; color:var(--ink)}

/* hero */
.ar-hero{background:var(--panel); display:grid;
  grid-template-columns:minmax(0,1fr) min(600px, 42vw); align-items:stretch}
.ar-hero-text{padding:88px 64px 88px var(--gut); display:flex; flex-direction:column;
  justify-content:center; gap:88px}
.ar-hero h1{margin:0; font-family:var(--display); font-weight:900; font-size:96px;
  line-height:92px; letter-spacing:-.01em; color:var(--ink)}
.ar-lead{margin-top:24px !important; max-width:560px; font-family:var(--editorial);
  font-style:italic; font-size:26px; line-height:36px}
.ar-facts{margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:32px 40px; padding:32px 0 0; border-top:1px solid #d6d6d6}
.ar-facts dt{font-family:var(--mono); font-weight:700; font-size:12px; line-height:16px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.ar-facts dd{margin:8px 0 0; font-family:var(--ui); font-weight:500; font-size:18px;
  line-height:25px; color:var(--ink)}
.ar-portrait{display:block; width:100%; height:100%; min-height:640px; object-fit:cover;
  object-position:50% 28%; border-radius:0 0 0 40px; background:var(--frame); border:0}

/* now */
.ar-now{padding:96px var(--gut); display:grid; grid-template-columns:3fr 9fr; gap:24px}
.ar-cols{column-count:2; column-gap:40px}
.ar-cols p{margin:0 0 22px}

/* method */
.ar-method{background:var(--panel); padding:96px 0 104px}
.ar-method-row{display:grid; grid-template-columns:50% 50%; align-items:center}
.ar-desk{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  object-position:55% 45%; border-radius:0; background:var(--frame); border:0}
.ar-method-text{padding:0 var(--gut) 0 72px}
.ar-method-text p + p{margin-top:22px}
.ar-quote{margin:88px var(--gut) 0 calc(var(--gut) + 16.66%); border-left:4px solid var(--accent);
  padding:8px 0 8px 36px; max-width:760px}
.ar-quote p{font-family:var(--editorial); font-style:italic; font-size:40px; line-height:50px; color:var(--ink)}

/* before */
.ar-before{padding:96px var(--gut) 88px}
.ar-before h2{margin-bottom:48px}
.ar-timeline{position:relative; margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:24px}
.ar-timeline::before{content:""; position:absolute; left:0; right:0; top:7px; height:2px;
  background:linear-gradient(90deg, var(--line) 0%, var(--line) 72%, var(--accent) 100%)}
.ar-timeline li{position:relative; padding-right:24px}
.ar-dot{display:block; width:16px; height:16px; box-sizing:border-box; border-radius:9999px;
  border:2px solid #a6a6a6; background:var(--bg)}
.is-now .ar-dot{border-color:var(--accent); background:var(--accent)}
.ar-year{margin-top:24px !important; font-family:var(--mono); font-weight:700; font-size:12px;
  line-height:16px; letter-spacing:.12em; color:var(--mut)}
.is-now .ar-year{color:var(--accent)}
.ar-step{margin-top:8px !important; font-family:var(--ui); font-weight:700; font-size:22px; line-height:28px}
.ar-desc{margin-top:10px !important; font-family:var(--editorial); font-size:17px; line-height:27px}

/* keep reading */
.ar-more{padding:32px var(--gut) 112px}
.ar-more-head{display:flex; align-items:baseline; justify-content:space-between;
  padding:56px 0 0; border-top:1px solid var(--line); margin:0 0 40px}
.ar-more-head h2{margin:0; font-size:22px; line-height:28px}
.ar-more-head a{font-family:var(--ui); font-weight:500; font-size:14px; border:0}
.ar-more-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:48px}
.ar-card{display:block; color:var(--ink); border:0}
.ar-card img, .ar-card-ph{display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:20px; background:var(--frame); border:0}
.ar-card-ph{box-sizing:border-box; border:1.5px dashed #a6a6a6; background:var(--panel);
  display:flex; align-items:center; justify-content:center}
.ar-card-ph span{padding:6px 12px; border-radius:9999px; background:var(--bg); font-family:var(--mono);
  font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.ar-card .ar-kicker{margin-top:24px}
.ar-card-title{margin-top:12px !important; font-family:var(--ui); font-weight:700; font-size:20px; line-height:26px}
.ar-card-sum{margin-top:12px !important; font-family:var(--editorial); font-size:16px; line-height:26px; color:var(--mut)}
.ar-card-meta{margin-top:20px !important; font-family:var(--mono); font-weight:500; font-size:11px;
  line-height:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--mut)}
.ar-card.is-soon, .ar-card.is-soon .ar-kicker, .ar-card.is-soon .ar-card-title{color:var(--mut)}
a.ar-card:hover .ar-card-title{color:var(--accent)}
.ar + .foot{margin-top:0}

@media (max-width:900px){
  .ar{--gut:20px}
  .ar-hero{grid-template-columns:1fr}
  .ar-hero-text{padding:48px 20px 40px; gap:40px}
  .ar-hero h1{font-size:56px; line-height:56px}
  .ar-lead{font-size:21px; line-height:30px}
  .ar-facts dd{font-size:16px}
  .ar-portrait{min-height:0; aspect-ratio:4/5; border-radius:0}
  .ar-now{grid-template-columns:1fr; padding:64px 20px}
  .ar-cols{column-count:1}
  .ar-method{padding:0 0 64px}
  .ar-method-row{grid-template-columns:1fr}
  .ar-method-text{padding:40px 20px 0}
  .ar-quote{margin:48px 20px 0; padding-left:20px}
  .ar-quote p{font-size:28px; line-height:36px}
  .ar-before{padding:64px 20px}
  .ar-timeline{grid-template-columns:1fr; row-gap:36px}
  .ar-timeline::before{left:7px; right:auto; top:0; bottom:0; width:2px; height:auto;
    background:linear-gradient(180deg, var(--line) 0%, var(--line) 72%, var(--accent) 100%)}
  .ar-timeline li{padding:0 0 0 40px}
  .ar-dot{position:absolute; left:0; top:0}
  .ar-year{margin-top:0 !important}
  .ar-more{padding:16px 20px 72px}
  .ar-more-grid{grid-template-columns:1fr; row-gap:40px}
  .ar-more-grid > div[aria-hidden]{display:none}
}
/* retouches 26 sept. : faits en cartes egales, tres sobres */
.ar-facts{border-top:0; padding:0; gap:12px; grid-auto-rows:1fr}
.ar-facts > div{background:rgba(255,255,255,.55); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px}

/* ---- en-tete mobile (26 sept.) ----------------------------------------
   Le bouton Work / About ne change plus jamais de place sur mobile.
   Avant, l'en-tete deplie empilait logo, bouton et dispo en colonne, et
   l'en-tete resserre les mettait sur une ligne, bouton a droite. En
   changeant de page apres avoir defile, la page arrivait resserree puis se
   depliait : le bouton sautait de la droite vers la gauche.
   Desormais : logo a gauche, bouton a droite, toujours sur la meme ligne.
   Seule la ligne de disponibilite, en dessous, se replie en douceur. */
@media (max-width:760px){
  .topbar,
  html.scrolled .topbar{
    grid-template-columns:auto 1fr; justify-items:start; align-items:center;
    column-gap:14px; row-gap:12px;
    transition:padding .32s var(--ease-out), row-gap .32s var(--ease-out),
               background-color .32s var(--ease-out), box-shadow .32s var(--ease-out)}
  .topbar > .seg,
  .topbar > .back{justify-self:end}
  .topbar > .avail{grid-column:1 / -1; justify-self:start;
    max-height:24px; overflow:hidden; opacity:1;
    transition:max-height .32s var(--ease-out), opacity .2s linear}
  html.scrolled .topbar{row-gap:0}
  html.scrolled .topbar > .avail{display:block; max-height:0; opacity:0}
  html.holding .topbar > .avail{transition:none}
}