/* Design système « Martine » : voir design-system/tokens.json et README.md */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/public-sans.woff2) format("woff2")}

:root{
  --paper:#F7F4EE; --paper-deep:#EDE8DF; --ink:#1F1C19; --ink-muted:#5F5850;
  --rule:#D6CFC3; --correction:#B3261E; --on-correction:#FFFFFF; --blush:#E8D3C8;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --space-1:8px; --space-2:16px; --space-3:32px; --space-4:64px;
  --radius-sm:2px; --radius-pill:999px;
  --text:640px; --grid:960px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:30px}
::selection{background:var(--blush);color:var(--ink)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--correction);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Styles de texte */
.display{font-size:64px;line-height:64px;font-weight:400}
.title-1{font-size:40px;line-height:46px;font-weight:400}
.title-2{font-size:26px;line-height:34px;font-weight:500}
.lede{font-size:21px;line-height:32px}
.ui{font-family:var(--sans);font-size:15px;line-height:22px}
.label{font-family:var(--sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.muted{color:var(--ink-muted)}

/* Mise en page */
.wrap{max-width:var(--grid);margin:0 auto;padding-inline:var(--space-2)}
.narrow{max-width:var(--text);margin:0 auto;padding-inline:var(--space-2)}
.stack{display:flex;flex-direction:column;gap:var(--space-2)}
.section{padding-bottom:var(--space-4)}
.ruled{border-top:1px solid var(--rule);padding-top:var(--space-4)}
.deep{background:var(--paper-deep)}

/* En-tête et logo */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding-block:24px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:24px;line-height:32px;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .point{color:var(--correction)}
.nav{display:flex;flex-wrap:wrap;gap:0 24px}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px}

/* Accueil */
.hero{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end;padding-block:var(--space-4)}
.hero-text{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hero-text .lede{max-width:var(--text)}
.portrait{flex:1 1 280px;max-width:360px;aspect-ratio:4/5;margin:0;background:var(--blush)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:40% center;display:block}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.tag{font-family:var(--sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule);border-radius:var(--radius-pill);padding:6px 14px}
.actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:var(--space-1)}

/* Boutons */
.btn{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--sans);font-size:15px;line-height:22px;text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--correction);color:var(--on-correction);font-weight:600;border:0}
.btn-secondary{border:1px solid var(--ink);color:var(--ink);background:transparent}

/* Méthode */
.methode{padding:var(--space-4) var(--space-2)}
.methode-inner{max-width:var(--grid);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3)}
.methode-intro{max-width:var(--text)}
.checks{display:flex;flex-wrap:wrap;gap:var(--space-3) 48px}
.check{flex:1 1 380px;min-width:0;border-top:1px solid var(--rule);padding-top:var(--space-2)}
.check h3{margin-bottom:var(--space-1)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-1) 48px}
.row-key{flex:0 0 200px;line-height:34px}
.row-value{flex:1 1 400px;min-width:0;max-width:var(--text)}
.refs{border-top:1px solid var(--rule);padding-top:var(--space-3)}
.refs .row-key{line-height:30px}
.refs ul{display:flex;flex-direction:column;gap:var(--space-1)}

/* Parcours */
.parcours{padding-block:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.timeline li{border-top:1px solid var(--rule);padding-block:var(--space-3)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.timeline h3{margin-bottom:var(--space-1)}

/* Formation */
.formation{max-width:var(--grid);margin:0 auto;padding:48px;display:flex;flex-direction:column;gap:var(--space-3)}
.diplomes{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.diplomes li{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.diplomes .label{text-transform:none}

/* Contact */
.contact{display:flex;flex-direction:column;gap:24px}
.form{display:flex;flex-direction:column;gap:24px}
.fields{display:flex;flex-wrap:wrap;gap:24px}
.field{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.form > .field{flex:none}
.field label{font-family:var(--sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.field input,.field select,.field textarea{min-height:44px;padding:var(--space-1) var(--space-2);border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:22px}
.field textarea{resize:vertical}
.form-sent{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:var(--space-3)}
.reseaux-title{margin-top:var(--space-3)}
.reseaux li{border-top:1px solid var(--rule);padding-block:12px;display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between}
.reseaux li:last-child{border-bottom:1px solid var(--rule)}
.reseaux .ui{line-height:30px}

/* Mentions légales */
.legal{padding-block:var(--space-4)}
.legal .stack + .stack{margin-top:var(--space-3)}
.legal-block{border-top:1px solid var(--rule);padding-top:var(--space-3)}

/* Pied de page */
.site-footer{background:var(--paper-deep);padding:var(--space-3) var(--space-2)}
.site-footer .inner{max-width:var(--grid);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;justify-content:space-between;color:var(--ink-muted)}
.site-footer .name{font-family:var(--serif);font-size:18px;color:var(--ink)}
.site-footer .meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.site-footer .meta a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:600px){
  .display{font-size:48px;line-height:52px}
  .title-1{font-size:32px;line-height:38px}
  .formation{padding:var(--space-3) var(--space-2)}
}