/* =========================================================================
   rotatestudy · systeme de design · base (reset, texte, grille)
   Lit tokens.css. Aucune couleur, aucun rayon, aucune courbe en dur.
   ========================================================================= */

/* ---- remise a zero ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-weight:400;font-size:var(--s2);
  line-height:var(--lh);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
/* Deux polices, pas une de plus : le code et les exemples restent dans la police du texte. */
code,kbd,samp,pre{font-family:inherit}
button{cursor:pointer}
a{color:var(--blue-ink);text-decoration:none;text-underline-offset:.18em;
  transition:color var(--t-hover) var(--ease)}
/* Souligne au survol : les liens dans le texte seulement (les composants-liens changent de ton). */
:where(p,.lead,.small,.note,dd,td) a:hover{text-decoration:underline;text-decoration-thickness:1px}
::selection{background:var(--blue);color:var(--on-blue)}
[hidden]{display:none!important}

/* ---- texte ---- */
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:600;color:var(--ink);text-wrap:balance}
h1,.h1{font-size:var(--s6);line-height:1.02;letter-spacing:-.04em}
h2,.h2{font-size:var(--s5);line-height:1.04;letter-spacing:-.035em}
h3,.h3{font-size:var(--s4);line-height:1.15;letter-spacing:-.02em}
h4,.h4{font-size:var(--s3);line-height:1.3;letter-spacing:-.015em}
.display{font-family:var(--fd);font-weight:600;font-size:var(--s7);line-height:1;letter-spacing:-.045em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
p+p{margin-top:1em}
ul,ol{margin:0;padding:0}
.lead{font-size:var(--s3);line-height:1.45;color:var(--dim);max-width:34em}
.small{font-size:var(--s1);line-height:1.5;color:var(--dim)}
.dim{color:var(--dim)}
.measure{max-width:var(--measure)}
b,strong{font-weight:600}
/* Chiffres qui se comparent (prix, pages, questions, dates, codes) : chiffres tabulaires. */
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
/* Un mot colore a toujours un sens : bleu explique, vert est a retenir, orange est le piege d'examen. */
.kb{color:var(--blue-ink)} .kg{color:var(--green-ink)} .ko{color:var(--orange-ink)}

/* ---- focus visible (clavier) ---- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:var(--pad);top:-100px;z-index:100;padding:var(--sp1) var(--sp2);border-radius:var(--r-pill);
  background:var(--blue);color:var(--on-blue);font:600 var(--s1)/1 var(--fd)}
.skip:focus-visible{top:var(--sp1)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- grille ----
   .wrap : la colonne de contenu (1128 px + marges). .grid : 12 colonnes, 6 sur iPad, 4 sur telephone ;
   .span-N place un bloc sur N colonnes (ramene a toute la largeur quand la grille a moins de colonnes). */
.wrap{width:100%;max-width:calc(var(--col) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.grid>*{grid-column:1/-1;min-width:0}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}
.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:1/-1}
.section{padding-block:var(--section) 0}
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .span-3{grid-column:span 3}.span-4,.span-5{grid-column:span 3}
  .span-6,.span-7,.span-8,.span-9{grid-column:1/-1}
}
@media (max-width:760px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .span-3,.span-4,.span-5{grid-column:1/-1}
}