/* Page SoundMark d'ixidia.fr. Jetons : ixidia-design/fondations/jetons.md, famille SoundMark */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2")}

:root{
  --fond:#F6F8F9; --surface:#FFFFFF; --surface-2:#EDF1F3; --bordure:#DCE3E6;
  --texte-2:#5B6B71; --encre:#12313B;
  --action:#5B4BDB; --action-survol:#4536B8; --teinte:#F3F1FE; --sur-teinte:#4536B8;
  --sm-indigo:#5B4BDB; --musique:#B9B0FF; --message:#5B4BDB; --annonce:#12313B;
  --rayon:10px; --rayon-l:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fond:#0E1A1F; --surface:#15252B; --surface-2:#23343A; --bordure:#2A3F47;
  --texte-2:#9AAAB0; --encre:#E8EEF0;
  --teinte:#231E52; --sur-teinte:#B9B0FF; --annonce:#E8EEF0;
}}
:root[data-theme="dark"]{
  --fond:#0E1A1F; --surface:#15252B; --surface-2:#23343A; --bordure:#2A3F47;
  --texte-2:#9AAAB0; --encre:#E8EEF0;
  --teinte:#231E52; --sur-teinte:#B9B0FF; --annonce:#E8EEF0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.6 "Inter",system-ui,sans-serif}
h1,h2,h3{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
h1{font-size:clamp(34px,5.2vw,54px)}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--action)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a{color:var(--sur-teinte)}}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* En-tête */
header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--fond) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--bordure)}
.barre{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:block;height:34px}
.logo picture{display:block;height:100%}
.logo img{height:100%;width:auto;display:block}
nav{margin-left:auto;display:flex;gap:22px;align-items:center}
nav a{color:var(--encre);text-decoration:none;font-weight:600;font-size:15px}
nav a:hover{color:var(--action)}
@media (max-width:820px){nav .lien{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--rayon);font:600 15px/1 "Inter",sans-serif;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn-1{background:var(--action);color:#fff!important}
.btn-1:hover{background:var(--action-survol)}
.btn-2{background:var(--surface);color:var(--encre)!important;border-color:var(--bordure)}
.btn-2:hover{border-color:var(--action)}
nav .btn{height:40px;padding:0 16px}
@media (pointer:coarse){nav .btn{height:44px}}

/* Héros */
.heros{padding:72px 0 64px}
.heros .grille{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.surtitre{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--sur-teinte);background:var(--teinte);padding:6px 12px;border-radius:999px;margin-bottom:20px}
.chapo{font-size:19px;color:var(--texte-2);margin-top:20px;max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@media (max-width:900px){.heros{padding:48px 0}.heros .grille{grid-template-columns:1fr;gap:40px}}
@media (max-width:480px){.actions .btn{width:100%}}

/* Visuel : programmation du jour */
.prog{margin:0;min-width:0;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon-l);padding:22px;box-shadow:0 18px 40px -24px rgba(18,49,59,.35)}
.prog-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.prog-tete strong{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:16px}
.prog-tete span{font-size:13px;color:var(--texte-2)}
.piste{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;margin:10px 0}
.piste>span{font-size:13px;color:var(--texte-2);font-weight:600}
.rail{position:relative;height:26px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.rail i{position:absolute;top:0;bottom:0;border-radius:4px}
.m{background:var(--musique)}.g{background:var(--message)}.a{background:var(--annonce)}
.heures{display:grid;grid-template-columns:92px 1fr;gap:12px;margin-top:8px}
.heures div{display:flex;flex-wrap:nowrap;justify-content:space-between;font-size:12px;color:var(--texte-2)}
.legende{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--bordure);font-size:13px;color:var(--texte-2)}
.legende b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.onde{display:flex;align-items:center;gap:3px;height:28px;margin-top:16px}
.onde u{display:block;width:4px;border-radius:2px;background:var(--sm-indigo);opacity:.85;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scaleY(.45)}}
@media (prefers-reduced-motion:reduce){.onde u{animation:none}}
.en-cours{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--texte-2)}
.en-cours strong{color:var(--encre);font-weight:600}

/* Références */
.refs{border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure);background:var(--surface)}
.refs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px;padding-top:28px;padding-bottom:28px}
.refs p.t{font-size:14px;color:var(--texte-2);font-weight:600}
.ref strong{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:20px;font-weight:800}
.ref span{font-size:14px;color:var(--texte-2)}

/* Sections */
section.bloc{padding:88px 0}
@media (max-width:600px){section.bloc{padding:56px 0}}
.intro{max-width:40em;margin-bottom:44px}
.intro p{color:var(--texte-2);font-size:18px;margin-top:14px}
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.cartes{grid-template-columns:1fr}}
.carte{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon-l);padding:28px}
.carte .nom{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.carte .nom svg{width:28px;height:28px;flex:none}
.carte .role{font-size:14px;font-weight:600;color:var(--sur-teinte);margin-bottom:12px}
.carte p{color:var(--texte-2);font-size:16px}
.carte ul{margin:16px 0 0;padding:0;list-style:none;font-size:15px}
.carte li{padding:8px 0;border-top:1px solid var(--bordure)}

/* Étapes */
.alt{background:var(--surface);border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure)}
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:e}
@media (max-width:900px){.etapes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}
.etapes li{counter-increment:e;padding-top:18px;border-top:1px solid var(--bordure)}
.etapes li::before{content:counter(e);display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--teinte);color:var(--sur-teinte);font:800 15px/1 "Plus Jakarta Sans",sans-serif;margin-bottom:14px}
.etapes p{color:var(--texte-2);font-size:15px;margin-top:6px}

/* Pour qui */
.lieux{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
@media (max-width:900px){.lieux{grid-template-columns:1fr}}
.lieu{padding:22px 0;border-top:1px solid var(--bordure)}
.lieu p{color:var(--texte-2);font-size:16px;margin-top:6px}

/* Accompagnement */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.duo{grid-template-columns:1fr;gap:28px}}
.duo .texte p{color:var(--texte-2);font-size:18px;margin-top:16px}
.points{list-style:none;margin:0;padding:0}
.points li{padding:18px 0;border-top:1px solid var(--bordure)}
.points li strong{display:block;font-weight:600}
.points li span{color:var(--texte-2);font-size:15px}

/* Appel final */
.final{background:var(--encre);color:#fff;border-radius:24px;padding:56px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.final h2{color:#fff}
.final p{color:#C9D3D6;margin-top:12px;font-size:17px}
.final .actions{margin-top:0;justify-content:flex-end}
.final .btn-2{background:transparent;color:#fff!important;border-color:#3A5058}
.final .btn-2:hover{border-color:#B9B0FF}
@media (max-width:900px){.final{grid-template-columns:1fr;padding:36px 24px}.final .actions{justify-content:flex-start}}
:root[data-theme="dark"] .final{background:var(--surface);border:1px solid var(--bordure)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .final{background:var(--surface);border:1px solid var(--bordure)}}

footer{padding:48px 0 40px;font-size:14px;color:var(--texte-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer a{color:var(--texte-2);text-decoration:none}
footer a:hover{color:var(--encre)}
footer .liens{display:flex;flex-wrap:wrap;gap:8px 20px}
:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:4px}