/* Feuille de styles partagée par / (FR) et /en/ (EN).
   Les deux pages ont exactement la même structure DOM : seul le contenu change. */

/* ---------- polices auto-hébergées ----------
   Sous-set latin (couvre le français : accents, œ, guillemets, tirets cadratins),
   et uniquement les graisses réellement utilisées plus bas dans ce fichier :
   Newsreader 400-500 (variable, optical sizing conservé), Plex Sans 400 + 600,
   Plex Mono 400 + 500. Servies depuis la même origine : aucune connexion à
   Google, donc aucune IP visiteur transmise à un tiers.
   Ajouter une graisse ici AVANT de l'utiliser dans une règle. */
/* Newsreader est sous-setté (voir CLAUDE.md pour la commande de regénération) :
   axe wght conservé sur 400-500, axe opsz figé à 20 — la quasi-totalité du texte
   serif est rendue entre 16,5 et 21px. 132 Ko -> 32 Ko. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;
    src:url(/fonts/newsreader-400-500-opsz20.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/ibm-plex-sans-400.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
    src:url(/fonts/ibm-plex-sans-600.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(/fonts/ibm-plex-mono-500.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
    color-scheme:light;
    --canvas:#E9E5DC;
    --paper:#FAF7F0;
    --band:#F5F0E5;
    --card:#FFFDF9;
    --tint:#F4EEE2;
    --slot:#F3EDE1;

    /* Contrastes vérifiés WCAG AA (4.5:1) sur les trois fonds --paper / --band / --card.
       --ink-faint est la teinte la plus claire admissible pour du texte : ne pas l'éclaircir. */
    --ink:#241F1A;
    --ink-soft:#4C4438;
    --ink-mute:#6B6355;
    --ink-faint:#726A5B; /* min. 4.70:1 sur les trois fonds — marge volontaire au-dessus du seuil AA */

    --rule:#EDE5D6;
    --rule-2:#E0D6C2;
    --rule-3:#E6DDCB;
    --accent:#A9502D;

    --serif:'Newsreader',Georgia,'Times New Roman',serif;
    --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

    --pad:clamp(20px,4.5vw,44px);
    --meta-col:136px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    padding:clamp(0px,3.5vw,48px);
    background:var(--canvas);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-wrap:pretty;
}
h1,h2,h3{margin:0;line-height:1.15}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---------- sheet ---------- */
.sheet{
    max-width:880px;margin:0 auto;overflow:hidden;
    background:var(--paper);border-radius:4px;
    box-shadow:0 1px 2px rgba(31,29,26,.07),0 30px 70px -34px rgba(31,29,26,.35);
}

/* ---------- hero ---------- */
.hero{
    padding:clamp(28px,4vw,36px) var(--pad) 28px;
    display:flex;gap:clamp(18px,3vw,26px);align-items:flex-start;
}
.hero__avatar{
    width:72px;height:72px;flex:0 0 auto;
    border-radius:50%;object-fit:cover;background:var(--tint);
}
.hero__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.hero__top{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.hero__ident{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.hero h1{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(28px,5vw,34px);line-height:1.05;letter-spacing:-.02em;
}
.hero__role{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--accent)}
.hero__intro{font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.hero__meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--ink-mute)}

/* Séparateurs « · » attachés à l'élément qui suit : jamais orphelins en fin de ligne.
   inline-block : le soulignement au survol d'un lien ne se propage pas dans une boîte
   inline atomique, le séparateur reste donc non souligné. */
.dotted>*+*::before{content:'·';display:inline-block;padding-right:.65em;color:#9F998C}

/* ---------- sélecteur de langue ---------- */
/* Vrais liens vers l'autre version : la langue courante est un <span>, pas un lien vers soi-même. */
.lang-switch{
    display:flex;align-items:center;gap:2px;flex:0 0 auto;
    background:var(--card);border:1px solid var(--rule-2);border-radius:999px;padding:2px;
}
.lang-switch a,.lang-switch span{
    padding:4px 10px;border-radius:999px;
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;
    color:var(--ink-faint);transition:color .15s,background-color .15s;
}
.lang-switch a:hover{color:var(--accent);text-decoration:none}
.lang-switch .is-active{background:var(--accent);color:var(--paper)}

/* ---------- section headings ---------- */
.sec-head{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
    padding:14px 0;border-top:1px solid var(--rule);
}
.sec-head h2,.sec h2{
    font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:-.01em;
}
.eyebrow{
    font-family:var(--mono);font-size:10px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- projects ---------- */
.projects-sec{padding:0 var(--pad) 30px}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{
    display:flex;gap:14px;padding:13px 15px;
    background:var(--card);border:1px solid #EFE7D8;border-radius:8px;
}
.card__thumb{
    position:relative;width:74px;height:56px;flex:0 0 auto;
    background:var(--slot);border-radius:5px;overflow:hidden;
}
.card__thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.card__body h3{font-family:var(--serif);font-weight:500;font-size:16.5px;letter-spacing:-.01em}
.card__body h3 a{color:var(--ink)}
.card__desc{font-size:13px;line-height:1.45;color:var(--ink-soft)}
/* Deux lignes fixes (stack, puis liens) : plus lisible qu'un retour à la ligne subi. */
.card__facts{
    display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:2px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);
}
.card__links{display:flex;flex-wrap:wrap;gap:2px 9px}
.card__links .muted{color:var(--ink-mute)}

/* ---------- work ---------- */
.band{
    background:var(--band);padding:22px var(--pad) 26px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.band h2{margin-bottom:12px}
.timeline{display:flex;flex-direction:column}
.job{
    display:grid;grid-template-columns:var(--meta-col) 1fr;gap:4px 20px;
    padding:11px 0;border-top:1px solid var(--rule-3);
}
.job__period{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
    color:var(--ink-faint);padding-top:3px;
}
.job__main{display:flex;flex-direction:column;gap:3px}
.job__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.job h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.job__dash{color:#9D9584}
.job__org{font-size:14.5px}
.job__place{font-size:12.5px;color:var(--ink-faint)}
.job__desc{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}

.job--past{padding:8px 0}
.job--past .job__period{padding-top:2px}
.job--past h3{font-size:14px}
.job--past .job__org{font-size:14px}

/* Amélioration progressive : sans JS, les postes antérieurs sont visibles et le bouton
   est masqué. La classe `js` est posée dans le <head>, donc le repli n'occasionne
   aucun flash de contenu au chargement. */
.timeline__more{display:none;border-top:1px solid var(--rule-3);padding-top:12px}
.js .timeline__more{display:block}
.js .timeline__past{display:none}
.js .timeline__past.is-open{display:block}

.pill-btn{
    background:none;border:1px solid #DDD3BF;border-radius:999px;
    padding:6px 13px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:#5E574A;transition:color .15s,border-color .15s;
}
.pill-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- skills ---------- */
.skills-sec{padding:22px var(--pad) 26px}
.skills-sec h2{margin-bottom:10px}
.skill{
    display:grid;grid-template-columns:var(--meta-col) 1fr;gap:2px 20px;
    padding:9px 0;border-top:1px solid var(--rule);align-items:baseline;
}
.skill__title{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent);
}
.skill__line{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}

/* ---------- more ---------- */
.more{
    padding:22px var(--pad) 30px;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:22px 28px;
}
.more__col{display:flex;flex-direction:column;gap:10px}
.more__col ul{display:flex;flex-direction:column;gap:10px}
.more__col li{display:flex;flex-direction:column;gap:1px}
.more__col--inline li{flex-direction:row;align-items:baseline;gap:8px}
.more__name{font-size:13.5px;font-weight:600}
.more__sub{font-size:13px;color:#5E574A}
.more__period{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint)}

/* ---------- footer ---------- */
.foot{
    padding:16px var(--pad) 22px;border-top:1px solid var(--rule);
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- 404 ---------- */
.nf{padding:clamp(40px,7vw,64px) var(--pad);display:flex;flex-direction:column;gap:14px}
.nf h1{font-family:var(--serif);font-weight:400;font-size:clamp(26px,5vw,32px);letter-spacing:-.02em}
.nf p{font-size:14.5px;color:var(--ink-soft)}
.nf p+p{color:var(--ink-mute)}
.nf__links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:13.5px}

@media (max-width:720px){
    .projects{grid-template-columns:1fr}
    .more{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
    .hero{flex-wrap:wrap;gap:16px}
    .hero__avatar{width:60px;height:60px}
    .job,.skill{grid-template-columns:1fr}
    .job__period{padding-top:0}
    .job--past .job__period{padding-top:0}
    .more{grid-template-columns:1fr}
}

@media print{
    body{padding:0;background:#fff}
    .sheet{box-shadow:none;border-radius:0;max-width:none}
    .card,.job,.band{break-inside:avoid}
    /* À l'impression : tout le parcours, aucun contrôle d'interface. */
    .lang-switch{display:none}
    .js .timeline__more{display:none}
    .js .timeline__past{display:block}
}