/* ==========================================================================
   Modèle sportif — style « fiche de recrutement »
   Haut de page, vidéo, données athlétiques et pied de page : fond sombre.
   Parcours, parcours académique, profil de jeu, galerie et contact : fond clair (blanc cassé, textes foncés).
   UNE seule couleur d'accent par client : sa teinte vient de la palette choisie (palettes.css,
   reglages.palette). Les valeurs ci-dessous ne sont que la palette neutre de secours.
   Les composants utilisent uniquement les variables --s-* : elles changent selon la bande
   (.theme-dark / .theme-light), jamais de couleur en dur.
   ========================================================================== */

/* palette de secours = « Noir et blanc » (écrasée par palettes.css) */
:root{
  --bg:#1f2125; --card:#292c31; --card-2:#33363c; --line:#42464d; --muted:#aeb2b9; --accent:#f1ece1; --on-accent:#16181b;
  --paper:#f4f2ee; --paper-card:#fdfcfa; --paper-card-2:#e8e5df; --line-l:#d6d2ca; --ink:#181a1d; --ink-muted:#50545b; --accent-l:#24272b; --on-accent-l:#f4f2ee;
  --text:#f1f3f5;
  --font-title:'Barlow Condensed','Arial Narrow','Roboto Condensed',Impact,sans-serif;
  --font-body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --radius:16px;
  --gutter:16px;
}
:root,.theme-dark{
  --s-bg:var(--bg); --s-text:var(--text); --s-muted:var(--muted); --s-card:var(--card); --s-card2:var(--card-2);
  --s-line:var(--line); --s-accent:var(--accent); --s-on-accent:var(--on-accent);
}
.theme-light{
  --s-bg:var(--paper); --s-text:var(--ink); --s-muted:var(--ink-muted); --s-card:var(--paper-card); --s-card2:var(--paper-card-2);
  --s-line:var(--line-l); --s-accent:var(--accent-l); --s-on-accent:var(--on-accent-l);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1rem;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
.nb{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a{color:inherit}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--s-accent);outline-offset:3px}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--s-accent);color:var(--s-on-accent);padding:8px 14px;border-radius:8px;z-index:60}
.skip:focus{left:8px}

/* ---------- bandes (sections pleine largeur) ---------- */
.band{background:var(--s-bg);color:var(--s-text);padding:56px 0;scroll-margin-top:60px}
.theme-light + .theme-light,.theme-dark + .theme-dark{padding-top:8px}
.hero.band{padding:20px 0 56px}

/* ---------- bandeau « exemple » ---------- */
.demo-banner{background:var(--s-accent);color:var(--s-on-accent);text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:8px var(--gutter)}

/* ---------- en-tête ---------- */
.header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--s-line);color:var(--s-text)}
.header-inner{display:flex;align-items:center;gap:12px;height:60px}
.wordmark{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:10px;background:var(--s-accent);color:var(--s-on-accent);font-family:var(--font-title);font-weight:800;font-size:1.25rem;line-height:1.2;letter-spacing:.02em;text-decoration:none}
.nav{display:none;margin-left:auto;gap:22px}
.nav a{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--s-muted);transition:color .15s}
.nav a:hover{color:var(--s-text)}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav + .header-actions{margin-left:22px}
.lang{display:flex;border:1px solid var(--s-line);border-radius:999px;overflow:hidden}
.lang a{padding:6px 11px;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-decoration:none;color:var(--s-muted)}
.lang a[aria-current="page"]{background:var(--s-card2);color:var(--s-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--s-line);background:transparent;color:var(--s-text);font:600 .8rem/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--s-accent);color:var(--s-accent)}
.btn.primary{background:var(--s-accent);border-color:var(--s-accent);color:var(--s-on-accent)}
.btn.primary:hover{background:color-mix(in srgb,var(--s-accent) 88%,var(--s-text));color:var(--s-on-accent)}
.btn.small{min-height:38px;padding:0 16px}

/* ---------- libellés et titres de section ----------
   Interligne large (≥ 1,05) pour que les accents des majuscules (É, È, À) ne soient jamais écrasés. */
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:1.4;color:var(--s-accent);margin-bottom:8px}
.band h2{font-family:var(--font-title);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,10vw,4.6rem);line-height:1.08;letter-spacing:.005em;margin-bottom:24px}

/* ---------- haut de page ---------- */
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.hero-photo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;max-height:72svh;width:100%;background:var(--s-card);border:1px solid var(--s-line)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.4),transparent);pointer-events:none}
.hero-club{font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;color:var(--s-muted);margin-bottom:10px}
.hero-name{font-family:var(--font-title);font-weight:800;text-transform:uppercase;letter-spacing:.003em}
.hero-name .first{display:block;font-size:clamp(2rem,8.5vw,3.5rem);font-weight:700;line-height:1.15;color:var(--s-text)}
.hero-name .last{display:block;font-size:clamp(3.4rem,19vw,9rem);line-height:1.08;color:var(--s-accent);margin-top:2px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.badge{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.badge.pos{background:var(--s-accent);color:var(--s-on-accent)}
.badge.status{border:1px solid var(--s-line);color:var(--s-text)}
.badge.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s-accent)}
.icon-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.icon-link{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--s-line);color:var(--s-text);transition:border-color .15s,color .15s}
.icon-link:hover{border-color:var(--s-accent);color:var(--s-accent)}
.icon-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.key-info{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:26px}
.key-info div{padding:12px 0;border-top:1px solid var(--s-line);min-width:0}
.key-info div:last-child:nth-child(odd),.key-info div.wide{grid-column:1/-1}
.key-info .wide dd{font-size:1.05rem;line-height:1.35;text-transform:none;font-family:inherit;font-weight:600}
.other-positions{margin-top:12px;font-size:.88rem;color:var(--s-muted)}
.key-info dt,.stat dt{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted);white-space:nowrap}
.key-info dd{font-family:var(--font-title);font-weight:700;font-size:1.45rem;line-height:1.2;text-transform:uppercase;margin-top:2px}
.section-note{margin-top:-6px;margin-bottom:18px;font-size:.8rem;letter-spacing:.02em;color:var(--s-muted)}
.totals{margin-top:22px;padding:16px;border:1px solid var(--s-line);border-radius:var(--radius);background:var(--s-card)}
.totals-title{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--s-muted);margin-bottom:10px}
.totals dl{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:8px}
.totals dd{font-family:var(--font-title);font-weight:800;font-size:2.3rem;line-height:1.1;color:var(--s-accent)}
.totals .stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px}

/* ---------- vidéo ---------- */
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--s-card);border:1px solid var(--s-line)}
.video-frame iframe,.video-poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-poster{display:grid;place-items:center;padding:0;background:radial-gradient(circle at 30% 20%,var(--s-card2),var(--s-card));color:var(--s-text);cursor:pointer;font:inherit}
.video-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.play{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--s-accent);color:var(--s-on-accent);transition:transform .15s}
.play svg{width:30px;height:30px;margin-left:4px;fill:currentColor}
.video-poster:hover .play{transform:scale(1.06)}
.video-poster-label{position:absolute;left:16px;bottom:14px;right:16px;text-align:left;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.video-caption{margin-top:12px;color:var(--s-muted);font-size:.92rem}
.video-caption strong{font-weight:600;color:var(--s-text)}
.video-link-card{display:grid;gap:16px;padding:28px 20px;border-radius:var(--radius);border:1px solid var(--s-line);background:var(--s-card)}
.video-link-card p{color:var(--s-muted)}
.match-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------- parcours ---------- */
.timeline{position:relative;display:grid;gap:18px;padding-left:26px}
.timeline::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:var(--s-line)}
.season{position:relative}
.season::before{content:"";position:absolute;left:-26px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--s-bg);border:2px solid var(--s-muted)}
.season.current::before{background:var(--s-accent);border-color:var(--s-accent)}
.season-card{padding:18px;border:1px solid var(--s-line);border-radius:var(--radius);background:var(--s-card)}
.season.current .season-card{border-color:var(--s-accent)}
.season-head{display:flex;align-items:center;gap:14px}
.club-mark{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--s-card2);border:1px solid var(--s-line);font-family:var(--font-title);font-weight:800;font-size:1.3rem;line-height:1.2;letter-spacing:.03em;color:var(--s-accent);overflow:hidden}
.club-mark img{width:100%;height:100%;object-fit:contain;padding:6px}
.club-mark.has-logo{background:var(--s-card)}
.season-head > div{min-width:0}
.season-year{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--s-muted)}
.tag-live{padding:2px 9px;border-radius:999px;background:var(--s-accent);color:var(--s-on-accent);letter-spacing:.1em}
.season-head h3{font-family:var(--font-title);font-weight:700;font-size:1.6rem;line-height:1.18;text-transform:uppercase}
.division{display:inline-block;margin-top:6px;padding:2px 10px;border:1px solid var(--s-line);border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted)}
.stats{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--s-line)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;min-width:0}
.stats .stat dd{font-family:var(--font-title);font-weight:800;font-size:2rem;line-height:1.1}
.stats .stat dt,.totals .stat dt{white-space:normal;overflow-wrap:normal;hyphens:none;line-height:1.2}
.stats .stat dt{font-size:.62rem;letter-spacing:.06em}
.season.pause::before{border-style:dashed;background:var(--s-bg)}
.season.pause .season-card{background:transparent;border-style:dashed}
.pause-title{margin-top:4px;font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--s-text)}
.career-toggle{margin-top:18px;margin-left:26px}
.season-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.78rem;font-weight:600;letter-spacing:.06em}
.season-links a{color:var(--s-muted);text-decoration:underline;text-decoration-color:var(--s-line);text-underline-offset:3px;padding:4px 0}
.season-links a:hover{color:var(--s-accent);text-decoration-color:var(--s-accent)}
.distinction{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-left:3px solid var(--s-accent);background:color-mix(in srgb,var(--s-accent) 10%,var(--s-card));border-radius:0 10px 10px 0;font-weight:500;font-size:.95rem}

/* ---------- parcours académique (joueur qui vise une université américaine) ---------- */
.studies{display:grid;gap:12px}
.study-card{padding:16px 18px;border:1px solid var(--s-line);border-radius:var(--radius);background:var(--s-card)}
.study-card h3{margin-top:4px;font-family:var(--font-title);font-weight:700;font-size:1.45rem;line-height:1.18;text-transform:uppercase}
.study-degree{margin-top:4px;font-weight:500;line-height:1.4}
.study-place{margin-top:2px;font-size:.88rem;color:var(--s-muted)}
.academic-facts{margin-top:12px;max-width:620px}
.academic-facts dd{overflow-wrap:anywhere}

/* ---------- données athlétiques ---------- */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{padding:18px 16px;border:1px solid var(--s-line);border-radius:var(--radius);background:var(--s-card)}
.metric-value{font-family:var(--font-title);font-weight:800;font-size:2.6rem;line-height:1.1;color:var(--s-accent)}
.metric-value small{font-size:1rem;font-weight:600;color:var(--s-muted);margin-left:4px;letter-spacing:.04em}
.metric-label{margin-top:8px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;color:var(--s-muted)}
.metrics-note{margin-top:14px;font-size:.82rem;color:var(--s-muted)}

/* ---------- profil de jeu ---------- */
.play-style{padding:20px 18px;border-left:4px solid var(--s-accent);background:var(--s-card);border-radius:0 var(--radius) var(--radius) 0;font-size:1.12rem;line-height:1.5;max-width:62ch;border-top:1px solid var(--s-line);border-right:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.qualities{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:12px;border:1px solid var(--s-line);border-radius:var(--radius);background:var(--s-card);overflow:hidden}
.quality{padding:12px 12px 14px;border-left:1px solid var(--s-line)}
.quality:first-child{border-left:0}
.quality span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.16em;color:var(--s-accent)}
.quality p{margin-top:2px;font-family:var(--font-title);font-weight:700;font-size:1.15rem;text-transform:uppercase;line-height:1.15}

/* ---------- galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gallery figure{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;border:1px solid var(--s-line);background:var(--s-card)}
.gallery img{width:100%;height:100%;object-fit:cover}   /* recadre, ne déforme jamais */
.gallery.n1{grid-template-columns:minmax(0,1fr)}
.gallery.n1 figure,.gallery.n3 figure:first-child{aspect-ratio:3/2}
.gallery.n3 figure:first-child{grid-column:1/-1}

/* ---------- carte « études » (lignes compactes : libellé à gauche, valeur à droite) ---------- */
.profile-card{padding:14px 16px 6px;border:1px solid var(--s-line);border-radius:var(--radius);background:var(--s-card)}
.profile-card dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-top:1px solid var(--s-line)}
.profile-card dl > div:first-child{border-top:0}
.profile-card dt{flex:none;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--s-muted);white-space:nowrap}
.profile-card dd{min-width:0;text-align:right;font-weight:500;font-size:.95rem;line-height:1.35}

/* ---------- contact ---------- */
.contact-box{padding:26px 20px;border-radius:24px;background:var(--s-card);border:1px solid var(--s-line)}
.contact-box h2{margin-bottom:12px}
.contact-box > p:not(.eyebrow){color:var(--s-muted);max-width:56ch}
.contact-search{margin-top:14px;font-size:.88rem;color:var(--s-muted)}
.contact-search strong{font-weight:600;color:var(--s-text)}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.contact-options{margin-top:18px}
.contact-options summary{list-style:none;display:inline-flex}
.contact-options summary::-webkit-details-marker{display:none}
.contact-panel{margin-top:14px;padding:16px;border-radius:14px;background:var(--s-bg);border:1px solid var(--s-line);display:grid;gap:10px;max-width:460px}
.contact-panel label{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted)}
.contact-panel input{width:100%;min-height:46px;padding:0 12px;border-radius:10px;border:1px solid var(--s-line);background:var(--s-card);color:var(--s-text);font:500 1rem var(--font-body)}
.contact-tools{display:flex;flex-wrap:wrap;gap:8px}
.contact-help,.copy-status{font-size:.82rem;color:var(--s-muted)}
.copy-status:empty{display:none}
.contact-means{margin-top:14px}
.contact-people{display:grid;gap:12px;margin-top:22px}
.person{padding:16px;border-radius:14px;border:1px solid var(--s-line);background:var(--s-bg)}
.person h3{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--s-accent);margin-bottom:6px}
.person strong{display:block;font-family:var(--font-title);font-weight:700;font-size:1.4rem;text-transform:uppercase;line-height:1.2}
.person p{color:var(--s-muted);font-size:.92rem}
.person .ask{display:block;margin-top:8px;font-size:.9rem;font-weight:500;color:var(--s-muted)}
.person a.ask{color:var(--s-text);display:inline-block;text-decoration-color:var(--s-accent)}
.person a{display:inline-block;margin-top:4px;color:var(--s-text);text-decoration-color:var(--s-accent);text-underline-offset:3px;overflow-wrap:anywhere}

.contact-cv{margin-top:16px}
.contact-cv .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.file-tag{padding:2px 6px;border-radius:6px;background:var(--s-card2);font-size:.66rem;letter-spacing:.06em;color:var(--s-muted)}

/* ---------- pied de page ---------- */
.footer{background:var(--bg);color:var(--muted);border-top:1px solid var(--line)}
.footer-inner{display:grid;gap:6px;padding-top:24px;padding-bottom:40px;font-size:.82rem;letter-spacing:.04em}
.footer strong{color:var(--text);font-weight:600}
.legal-link{display:inline-block;padding:6px 0;font-size:.74rem;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.legal-link:hover{color:var(--text)}

/* ---------- mentions légales (panneau ouvert depuis le pied de page) ---------- */
.legal-dialog{width:min(520px,calc(100% - 2 * var(--gutter)));max-height:calc(100svh - 48px);margin:auto;padding:0;border:1px solid var(--s-line);border-radius:var(--radius);background:var(--s-bg);color:var(--s-text)}
.legal-dialog::backdrop{background:rgba(0,0,0,.55)}
.legal-inner{padding:22px 20px 20px}
.legal-dialog h2{font-family:var(--font-title);font-weight:800;text-transform:uppercase;font-size:1.9rem;line-height:1.1;margin-bottom:14px}
.legal-dialog h3{margin-top:14px;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--s-muted)}
.legal-dialog p{margin-top:2px;font-size:.95rem;line-height:1.5}
.legal-dialog a{text-decoration-color:var(--s-accent);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-dialog .btn{margin-top:20px}

/* ---------- grands écrans ---------- */
@media (min-width:600px){
  :root{--gutter:24px}
  .metrics{grid-template-columns:repeat(3,1fr)}
  .quality{padding:14px 18px 16px}
  .gallery.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery.n2 figure{aspect-ratio:4/3}
  .gallery.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery.n3 figure:first-child{grid-column:auto;aspect-ratio:4/5}
  .gallery.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .contact-people{grid-template-columns:1fr 1fr}
  .key-info{grid-template-columns:repeat(4,1fr)}
  .key-info.n5,.key-info.n6{grid-template-columns:repeat(3,1fr)}
  .key-info div:last-child:nth-child(odd){grid-column:auto}
  .key-info div.wide{grid-column:1/-1}
}
@media (min-width:860px){
  .nav{display:flex}
  .band{padding:88px 0}
  .theme-light + .theme-light,.theme-dark + .theme-dark{padding-top:16px}
  .hero.band{padding:48px 0 88px}
  .hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
  .hero-photo{order:2}
  .timeline{padding-left:34px}
  .timeline::before{left:7px}
  .season::before{left:-34px}
  .season-card{padding:22px 24px}
  .career-toggle{margin-left:34px}
  .contact-box{padding:48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}