/* TRIALO — styles du site (charte graphique v1). Importer tokens.css avant ce fichier. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--trialo-font);font-size:1.0625rem;line-height:1.6;color:var(--trialo-texte);background:var(--trialo-blanc);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--trialo-bleu-fonce);text-underline-offset:3px}
a:hover{color:var(--trialo-nuit)}
:focus-visible{outline:3px solid var(--trialo-bleu-clair);outline-offset:2px;border-radius:6px}
.on-dark a{color:var(--trialo-bleu-clair)}.on-dark a:hover{color:#fff}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--trialo-nuit);padding:10px 16px;border-radius:var(--trialo-radius-pill);font-weight:700;z-index:50}.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* logo animé (fourni par la charte) */
.trialo-logo{height:40px;width:auto;display:block;--trialo-logo-ink:#FFFFFF;--trialo-logo-track:#2E5BFF;--trialo-logo-bg:#0B1F4B}
.trialo-logo--light{--trialo-logo-ink:#0B1F4B;--trialo-logo-bg:#FFFFFF}
.trialo-logo__text{fill:var(--trialo-logo-ink)}
.trialo-logo__track{fill:var(--trialo-logo-track)}
.trialo-logo__knob{fill:var(--trialo-logo-bg);stroke:var(--trialo-logo-ink);transition:transform 280ms cubic-bezier(.3,.7,.2,1),fill 280ms ease}
a:hover>.trialo-logo .trialo-logo__knob,.trialo-logo:hover .trialo-logo__knob,.trialo-logo.is-on .trialo-logo__knob{transform:translateX(718.9px);fill:var(--trialo-logo-ink)}
@media (prefers-reduced-motion:reduce){.trialo-logo__knob{transition:none}}

/* en-tête */
header.site{position:sticky;top:0;z-index:30;background:var(--trialo-nuit);border-bottom:1px solid var(--trialo-nuit-3)}
.nav{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:block;line-height:0;border-radius:6px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 auto 0 12px;padding:0}
.nav ul a{color:var(--trialo-brume);text-decoration:none;font-weight:500;font-size:.9375rem;padding:10px 2px}
.nav ul a:hover{color:#fff}
.nav .actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.nav ul + .actions{margin-left:0}

/* boutons : pilules */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--trialo-radius-pill);font:700 1rem/1 var(--trialo-font);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background var(--trialo-duration) var(--trialo-ease),color var(--trialo-duration) var(--trialo-ease),border-color var(--trialo-duration) var(--trialo-ease)}
.btn.primary{background:var(--trialo-bleu);color:#fff}.btn.primary:hover{background:var(--trialo-bleu-fonce);color:#fff}
.btn.ghost-dark{border-color:#fff;color:#fff;background:transparent}.btn.ghost-dark:hover{background:#fff;color:var(--trialo-nuit)}
.btn.ghost{border-color:var(--trialo-nuit);color:var(--trialo-nuit);background:transparent}.btn.ghost:hover{background:var(--trialo-nuit);color:#fff}
.btn.sm{min-height:44px;padding:0 20px;font-size:.9375rem}

/* titres */
.label{display:inline-block;font-size:.78125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--trialo-texte-2);margin:0 0 14px}
.on-dark .label{color:var(--trialo-bleu-clair)}
h1{font-size:var(--trialo-fs-4xl);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 20px}
h2{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:800;line-height:1.15;letter-spacing:-.015em;margin:0 0 14px}
h3{font-size:1.25rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 0 8px}
.lead{font-size:1.1875rem;max-width:62ch;color:var(--trialo-texte-2);margin:0}
.on-dark .lead{color:var(--trialo-brume)}
p{margin:0 0 14px;max-width:68ch}

/* hero */
.hero{background:var(--trialo-nuit);color:#fff;padding:72px 0 88px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}
.ticks{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0;color:var(--trialo-brume);font-size:1rem;font-weight:500}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks svg{width:18px;height:18px;flex:none;stroke:var(--trialo-bleu-clair)}

/* sections */
section.block{padding:88px 0}
section.light{background:var(--trialo-fond)}
section.dark{background:var(--trialo-nuit);color:#fff}
section.dark h2,section.dark h3{color:#fff}
.head{margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cols2{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--trialo-bordure);border-radius:var(--trialo-radius-lg);padding:26px;box-shadow:var(--trialo-shadow-sm)}
.card p{color:var(--trialo-texte-2);margin:0;font-size:1rem}
.dark .card{background:var(--trialo-nuit-2);border-color:var(--trialo-nuit-3);box-shadow:none}
.dark .card p{color:var(--trialo-brume)}
.num{display:inline-grid;place-items:center;min-width:44px;height:32px;padding:0 14px;border-radius:var(--trialo-radius-pill);background:var(--trialo-glacier);color:var(--trialo-nuit);font-weight:800;font-size:.9375rem;margin-bottom:14px}
.ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--trialo-glacier);color:var(--trialo-nuit);margin-bottom:16px}
.dark .ico{background:var(--trialo-nuit);color:var(--trialo-bleu-clair);border:1px solid var(--trialo-nuit-3)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.note{margin-top:28px;background:var(--trialo-glacier);color:var(--trialo-nuit);border-radius:var(--trialo-radius-lg);padding:18px 24px;font-weight:500;max-width:none}
.access{display:flex;flex-wrap:wrap;gap:36px;align-items:center;justify-content:space-between}
.access .txt{max-width:640px}
details{background:#fff;border:1px solid var(--trialo-bordure);border-radius:var(--trialo-radius-md);padding:4px 22px;margin:12px 0;box-shadow:var(--trialo-shadow-sm)}
summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary:after{content:"";flex:none;width:30px;height:18px;border-radius:var(--trialo-radius-pill);background:var(--trialo-off);background-image:radial-gradient(circle at 9px 9px,#fff 6px,transparent 6.5px);transition:background-color var(--trialo-duration) var(--trialo-ease),background-position var(--trialo-duration) var(--trialo-ease)}
details[open] summary:after{background-color:var(--trialo-bleu);background-image:radial-gradient(circle at 21px 9px,#fff 6px,transparent 6.5px)}
details p{color:var(--trialo-texte-2);padding-bottom:14px}

/* pied de page */
footer.site{background:var(--trialo-nuit);color:var(--trialo-brume);padding:48px 0 36px;font-size:.9375rem}
footer.site .cols{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between}
footer.site img{height:34px;width:auto;display:block;margin-bottom:14px}
footer.site p{max-width:44ch;margin:0}
footer.site ul{list-style:none;margin:0;padding:0}footer.site li{margin:8px 0}
footer.site a{color:var(--trialo-brume);text-decoration:none}footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .small{margin-top:28px;padding-top:20px;border-top:1px solid var(--trialo-nuit-3);font-size:.8125rem;max-width:none}

/* pages de texte (légal, 404) */
.doc{max-width:760px;margin:0 auto;padding:56px 24px 96px}
.doc h1{font-size:clamp(2rem,4vw,2.75rem)}
.doc h2{font-size:1.5rem;margin-top:36px}
.doc mark{background:#FFF1CC;color:var(--trialo-nuit);padding:1px 6px;border-radius:6px}
.doc table.t{border-collapse:collapse;width:100%;font-size:.9375rem;margin:12px 0}
.doc table.t td,.doc table.t th{border-bottom:1px solid var(--trialo-bordure);padding:10px 8px;text-align:left;vertical-align:top}
.doc-bg{background:var(--trialo-fond)}
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;background:var(--trialo-nuit);color:#fff;padding:40px 24px}
.notfound h1{color:#fff}.notfound p{color:var(--trialo-brume);margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .hero{padding:44px 0 56px}.hero .grid{grid-template-columns:1fr;gap:36px}
  .cards,.cols2{grid-template-columns:1fr}
  section.block{padding:60px 0}
  .nav ul{display:none}.nav{gap:14px;min-height:64px}.trialo-logo{height:30px}
  .nav .actions .ghost-dark{display:none}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media print{header.site,footer.site{display:none}}

/* v2 : plateformes, publics, badges */
.cards.four{grid-template-columns:repeat(4,1fr)}
.badge.soon{background:#fff;border:1px solid var(--trialo-bordure);color:var(--trialo-texte-2)}
.label .badge{margin-left:8px;vertical-align:middle}
.on-dark .label .badge{background:var(--trialo-bleu);color:#fff}
@media (max-width:1000px){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards.four{grid-template-columns:1fr}}

/* v3 : pages simulateur et fiches pédagogiques */
.hero.small{padding:56px 0 64px}.hero.small .lead{max-width:64ch}
.crumbs{font-size:.875rem;color:var(--trialo-texte-2)}.crumbs a{color:var(--trialo-bleu-fonce)}.crumbs [aria-current]{font-weight:600;color:var(--trialo-nuit)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 28px;padding:0}
.chips li{background:var(--trialo-nuit-2);border:1px solid var(--trialo-nuit-3);border-radius:var(--trialo-radius-pill);padding:8px 16px;font-weight:600;color:#fff}
.chips li span{margin-left:6px;color:var(--trialo-brume);font-weight:500}
a.card.link{display:block;text-decoration:none;color:inherit;transition:box-shadow var(--trialo-duration) var(--trialo-ease),border-color var(--trialo-duration) var(--trialo-ease)}
a.card.link:hover{border-color:var(--trialo-bleu);box-shadow:var(--trialo-shadow-md)}
a.card.link h3{color:var(--trialo-nuit)}
.card .meta{margin-top:12px;font-size:.875rem;font-weight:600;color:var(--trialo-texte-2)}
.fiche .narrow{max-width:780px;padding-top:32px;padding-bottom:88px}
.prose{margin-top:28px}.prose h2{font-size:1.5rem;margin:36px 0 12px}.prose h3{margin-top:24px}
.prose ol,.prose ul{padding-left:1.4rem;margin:0 0 18px;max-width:68ch}.prose li{margin:8px 0}
.prose table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.9375rem}.prose th,.prose td{border-bottom:1px solid var(--trialo-bordure);padding:10px 8px;text-align:left;vertical-align:top}
.callout{background:var(--trialo-glacier);color:var(--trialo-nuit);border-radius:var(--trialo-radius-lg);padding:16px 22px;margin:20px 0}.callout p{margin:0;max-width:none}
.cta-box{margin-top:36px}
.pns{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 22px}
.pn{flex:1 1 260px;display:block;border:1px solid var(--trialo-bordure);border-radius:var(--trialo-radius-md);padding:14px 18px;text-decoration:none;color:var(--trialo-nuit);font-weight:700}
.pn small{display:block;color:var(--trialo-texte-2);font-weight:500;margin-bottom:4px}.pn:hover{border-color:var(--trialo-bleu)}.pn.next{text-align:right}

/* v4 : appels à l'essai dans les fiches */
.try{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;background:var(--trialo-nuit);color:#fff;border-radius:var(--trialo-radius-lg);padding:18px 24px;margin:26px 0 0}
.try div{flex:1 1 280px;color:var(--trialo-brume)}.try strong{color:#fff}
.cta-end{background:var(--trialo-nuit);color:#fff;border-radius:var(--trialo-radius-lg);padding:32px;margin:44px 0 8px}
.cta-end h2{color:#fff;margin:0 0 10px;font-size:1.625rem}
.cta-end p{color:var(--trialo-brume)}
.cta-end ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.cta-end li{padding-left:28px;position:relative;color:#fff;font-weight:500}
.cta-end li:before{content:"";position:absolute;left:0;top:.5em;width:16px;height:9px;border-left:3px solid var(--trialo-bleu-clair);border-bottom:3px solid var(--trialo-bleu-clair);transform:rotate(-45deg) scale(.8);transform-origin:center}
.cta-end .free{color:var(--trialo-brume);font-size:.875rem;margin-left:10px}

/* accueil : bloc d'accroche seul */
.hero-one>div{max-width:780px}

.note.review{background:#FFF1CC;color:var(--trialo-nuit);margin:0 0 18px}
