/* ---- Polices auto-hébergées (aucune requête tierce) ---- */
@font-face{
  font-family:'Noto Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/noto-serif-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/noto-serif-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Noto Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/noto-serif-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/noto-serif-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Noto Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/noto-sans-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/noto-sans-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Noto Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/noto-sans-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/noto-sans-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Noto Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/noto-sans-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/noto-sans-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Typographie */
  --font-display:'Noto Serif',Georgia,'Times New Roman',serif;
  --font-body:'Noto Sans',Arial,Helvetica,sans-serif;
  --font-size-display:44px;
  --font-size-h2:24px;
  --font-size-h3:19px;
  --font-size-lead:19px;
  --font-size-body:17px;
  --font-size-caption:13px;
  --leading-tight:1.18;
  --leading-heading:1.25;
  --leading-body:1.65;
  --tracking-display:0.005em;

  /* Espacements / rayons */
  --space-3:8px;
  --space-4:10px;
  --space-5:12px;
  --space-6:16px;
  --space-8:24px;
  --space-10:32px;
  --space-16:64px;   
  --radius-md:8px;
  --min-hit:44px;

  /* Couleurs — neutres oklch teinte 150 */
  --ink-975:oklch(0.11 0.006 150);
  --cream-100:oklch(0.93 0.018 85);
  --cream-300:oklch(0.85 0.018 85);
  --cream-500:oklch(0.72 0.02 85);
  --hairline:rgba(233,223,200,0.14);
  --hairline-strong:rgba(233,223,200,0.18);

  /* Accent — sauge séchée teinte 128 */
  --sage-300:oklch(0.89 0.05 128);
  --sage-500:oklch(0.83 0.055 128);
  --sage-on:oklch(0.145 0.008 150);

  /* Vert très foncé */
  --olive-900:#272E24;

  /* Alias sémantiques */
  --surface-page:var(--ink-975);
  --text-body:var(--cream-100);
  --text-secondary:var(--cream-300);
  --text-muted:var(--cream-500);
  --border-default:var(--hairline);
  --accent:var(--sage-500);
  --accent-hover:var(--sage-300);
  --accent-on:var(--sage-on);
  --focus-ring:var(--sage-500);
  --link:var(--sage-500);
  --link-hover:var(--sage-300);
}

/* ---- Reset léger ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--font-size-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;}
[hidden]{display:none !important;}

/* ---- Focus : visible partout, jamais supprimé ---- */
/* Repli #BDCFA9 (sauge de marque) avant le var() oklch() : si oklch() n'est
   pas supporté, outline-color est simplement ignoré et le repli reste actif
   au lieu d'invalider tout le raccourci outline. */
:focus-visible{
  outline:2px solid #BDCFA9;
  outline-color:var(--focus-ring);
  outline-offset:2px;
  border-radius:3px;
}

/* ---- Liens de texte : soulignés (pas d'info portée par la couleur seule) ---- */
a{color:var(--link);text-underline-offset:3px;}
a:hover{color:var(--link-hover);text-decoration-thickness:2px;}

/* ---- Utilitaires ---- */
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.skip-link{
  position:absolute;left:var(--space-3);top:-60px;z-index:100;
  background:var(--accent);color:var(--accent-on);
  padding:var(--space-3) var(--space-6);font-weight:700;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  text-decoration:none;transition:top .15s;
}
.skip-link:focus{top:0;}

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ============================================================================
   Styles de la page
   ============================================================================ */

/* Conteneur : largeur lisible, marges fluides, rythme vertical généreux */
.site-header,
main#main,
.site-footer{
  max-width:64rem;
  margin-inline:auto;
  padding-inline:clamp(var(--space-6), 5vw, var(--space-16));
}

/* En-tête : logo centré, important */
.site-header{
  padding-block:clamp(var(--space-10), 8vw, var(--space-16)) clamp(var(--space-10), 6vw, var(--space-16));
  text-align:center;
}
.wordmark{
  margin:0;
  color:var(--accent);
  line-height:0;
}
.wordmark svg{
  height:clamp(64px, 12vw, 112px);
  width:auto;
}

/* Accroche */
.lead{
  max-width:42rem;
  margin-block:0 clamp(var(--space-10), 9vw, var(--space-16));
}
.lead-headline{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.6rem, 4.6vw, 2.25rem);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
  margin:0 0 var(--space-6);
}
.lead-headline em{
  font-style:italic;
}
.lead-body{
  font-size:var(--font-size-lead);
  color:var(--text-secondary);
  margin:0;
}

/* Deux colonnes */
.cols{
  display:grid;
  gap:clamp(var(--space-10), 6vw, var(--space-16));
  align-items:start;
  padding-top:clamp(var(--space-8), 5vw, var(--space-10));
  padding-bottom:clamp(var(--space-16), 12vw, 6rem);
  border-top:1px solid var(--olive-900); 
}
@media (min-width:720px){
  .cols{grid-template-columns:1fr 1fr;}
}
.col h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--font-size-h2);
  line-height:var(--leading-heading);
  margin:0 0 var(--space-5);
}
.col h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--font-size-h3);
  margin:var(--space-10) 0 var(--space-5);
}
.col p{
  color:var(--text-secondary);
  margin:0;
}

/* Liste des liens sociaux */
.social{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:var(--space-4);
}
.social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--min-hit);
  min-height:var(--min-hit);
  color:var(--accent);            
  border-radius:var(--radius-md);
  text-decoration:none;
}
.social a:hover{color:var(--accent-hover);}
.social svg{width:24px;height:24px;}

/* Bouton « Écrivez-moi » */
.button{
  display:inline-flex;
  align-items:center;
  min-height:var(--min-hit);
  margin-top:var(--space-6);
  padding:var(--space-3) var(--space-8);
  background:var(--accent);
  color:var(--accent-on);
  font-weight:700;
  text-decoration:none;
  border-radius:var(--radius-md);
}
.button:hover{
  background:var(--accent-hover);
  color:var(--accent-on);
}

/* Pied de page */
.site-footer{
  padding-block:var(--space-10) clamp(var(--space-10), 8vw, var(--space-16));
  border-top:1px solid var(--border-default);
  text-align:center;
  color:var(--text-muted);
  font-size:var(--font-size-caption);
}
.site-footer p{margin:var(--space-3) 0;}

/* Une seule animations */
@keyframes lever{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}
main#main{animation:lever .5s ease-out both;}
@media (prefers-reduced-motion:reduce){
  main#main{animation:none;}
}