/* esthetique.vip : feuille de style des lecons, partagee par tous les chapitres. */
:root{
    --creme:#FBF6F1; --feuille:#FFFFFF; --feuille-2:#F6EDE6;
    --encre:#3A2E2C; --encre-2:#6B5A54; --encre-3:#715D57; --filet-3:#9C8880;
    --sur-accent:#FFFFFF; --sur-or:#3A2E2C;
    --rose:#D98B94; --rose-clair:#F3DDDF; --rose-texte:#934451;
    --or:#C49A5E; --or-fond:#F6ECDB;
    --filet:#EDE0D8; --filet-2:#E3D2C8;
    --juste:#3F7A5E; --juste-fond:#E3F0E8;
    --pasencore:#9E4721; --pasencore-fond:#FAE7DA;
    --ombre:0 1px 2px rgba(58,46,44,.06), 0 8px 24px rgba(58,46,44,.05);
    --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
    --corps:"Atkinson Hyperlegible",Verdana,sans-serif;
    --r:28px; --r-s:18px; --r-l:40px;
    --prune:#35232E; --sur-prune:#FBF6F1; --sur-prune-doux:#E2CDD3; --or-sur-prune:#DDB679;
    --relief:0 24px 64px -24px rgba(92,47,57,.28);
    --ombre-bouton:0 4px 0 var(--filet-2), 0 8px 18px -10px rgba(58,46,44,.2);
    --halo:radial-gradient(ellipse at 85% 0%,var(--rose-clair),transparent 65%);
    --aisance:cubic-bezier(.2,.7,.2,1); --duree:220ms;
    --espace-1:8px; --espace-2:16px; --espace-3:24px; --espace-4:32px; --espace-5:48px;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --creme:#241A20; --feuille:#2F2229; --feuille-2:#3A2B33;
    --encre:#F6E9E4; --encre-2:#C8AEB2; --encre-3:#B39DA2; --filet-3:#7A646B;
    --sur-accent:#241A20; --sur-or:#241A20;
    --rose:#E9A7AE; --rose-clair:#4A3039; --rose-texte:#F0B6BC;
    --or:#DDB679; --or-fond:#40312A; --filet:#43313A; --filet-2:#523C46;
    --juste:#8CCBA9; --juste-fond:#27382F; --pasencore:#F0A575; --pasencore-fond:#3E2A21;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --relief:0 24px 64px -24px rgba(0,0,0,.65); color-scheme:dark;
  }}
  :root[data-theme="dark"]{
    --creme:#241A20; --feuille:#2F2229; --feuille-2:#3A2B33;
    --encre:#F6E9E4; --encre-2:#C8AEB2; --encre-3:#B39DA2; --filet-3:#7A646B;
    --sur-accent:#241A20; --sur-or:#241A20;
    --rose:#E9A7AE; --rose-clair:#4A3039; --rose-texte:#F0B6BC;
    --or:#DDB679; --or-fond:#40312A; --filet:#43313A; --filet-2:#523C46;
    --juste:#8CCBA9; --juste-fond:#27382F; --pasencore:#F0A575; --pasencore-fond:#3E2A21;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --relief:0 24px 64px -24px rgba(0,0,0,.65); color-scheme:dark;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--creme); color:var(--encre); font-family:var(--corps); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased}
  .page{max-width:560px; margin:0 auto; padding-block:0 140px; padding-left:20px; padding-right:20px}
  h1,h2,h3{font-family:var(--display); font-weight:800; margin:0; text-wrap:balance; letter-spacing:-.015em}
  h1{font-size:1.8rem; line-height:1.15} h2{font-size:1.25rem; line-height:1.25} h3{font-size:1rem; font-weight:600}
  p{margin:0}
  .etiq{font-family:var(--display); font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.14em; color:var(--encre-3)}
  .chapeau{display:flex; align-items:center; gap:10px; padding-block:22px 8px}
  .marque{font-family:var(--display); font-weight:800; font-size:1rem; text-decoration:none; color:inherit} .marque span{color:var(--rose-texte)}
  .mini{margin-left:auto; display:flex; gap:8px}
  .mini button{border:1px solid var(--filet-2); background:var(--feuille); color:var(--encre-2); font-family:var(--corps); font-size:1rem; border-radius:999px; padding:8px 13px; cursor:pointer; min-height:44px}

  /* carte du chapitre */
  .jauge{height:8px; background:var(--filet-2); border-radius:999px; overflow:hidden; margin-top:14px}
  .jauge i{display:block; height:100%; background:var(--rose); border-radius:999px; transition:width .4s ease}
  .lecons{display:flex; flex-direction:column; gap:10px; margin-top:18px}
  .lec{display:flex; gap:13px; align-items:center; width:100%; text-align:left; border:1px solid var(--filet); background:var(--feuille);
    border-radius:var(--r); padding:15px 16px; min-height:72px; cursor:pointer; font-family:var(--corps); color:var(--encre); box-shadow:var(--ombre)}
  .lec .num{flex:none; width:38px; height:38px; border-radius:50%; background:var(--feuille-2); color:var(--encre-2);
    display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1rem}
  .lec.fait .num{background:var(--juste); color:var(--sur-accent)} .lec.fait{border-color:var(--juste)}
  .lec .t{flex:1; min-width:0}
  .lec .t b{display:block; font-family:var(--display); font-weight:600; font-size:1.02rem; line-height:1.25}
  .lec .t span{font-size:1rem; color:var(--encre-2)}
  .lec .ex{flex:none; font-size:1rem; font-family:var(--display); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    background:var(--or-fond); color:var(--encre); border-radius:999px; padding:5px 9px}

  /* lien vers le cours, en tete de la carte du chapitre */
  .lire-cours{display:flex; align-items:center; gap:12px; margin-top:18px; text-decoration:none; color:inherit; background:var(--or-fond); border:1px solid var(--or); border-radius:var(--r); padding:14px 16px; min-height:64px}
  .lire-cours .pic{flex:none; width:38px; height:38px; border-radius:50%; background:var(--feuille); display:grid; place-items:center; font-size:1.1rem}
  .lire-cours>span:nth-child(2){flex:1; min-width:0} .lire-cours b{display:block; font-family:var(--display); font-weight:700; font-size:1rem}
  .lire-cours>span:nth-child(2)>span{font-size:1rem; color:var(--encre-2)} .lire-cours .fl{font-family:var(--display); font-weight:800; color:var(--or)}

  /* progression dans la lecon */
  .barre{display:flex; gap:4px; margin-block:6px 16px}
  .barre i{flex:1; height:6px; border-radius:999px; background:var(--filet-2)}
  .barre i.ok{background:var(--rose)} .barre i.ici{background:var(--encre)}

  .dit{display:flex; gap:12px; align-items:flex-start; margin-block:16px}
  .dit img{width:60px; height:60px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--feuille); box-shadow:var(--ombre)}
  .bulle{background:var(--rose-clair); border-radius:4px 16px 16px 16px; padding:13px 16px; font-size:1rem; line-height:1.5}
  .bulle .qui{display:block; font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-texte); margin-bottom:3px}
  .ecouter{display:inline-flex; align-items:center; gap:7px; margin-top:10px; background:none; border:1px solid var(--filet-2); color:var(--encre-2); font-family:var(--corps); font-size:1rem; border-radius:999px; padding:7px 13px; cursor:pointer; min-height:44px}

  /* schema a reperes : le dessin porte des boutons ronds numerotes, poses en % de sa boite */
  .schema{position:relative; margin-top:16px; border-radius:var(--r-s); overflow:visible}
  .schema svg{width:100%; height:auto; border-radius:var(--r-s); display:block}
  .cible{position:absolute; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; border:2px dashed var(--filet-3);
    background:color-mix(in srgb, var(--feuille) 88%, transparent); color:var(--encre); font-family:var(--display); font-weight:800; font-size:1rem;
    display:grid; place-items:center; cursor:pointer; padding:0; box-shadow:var(--ombre); transition:transform .15s ease}
  .cible.viser{border-style:solid; border-color:var(--or); background:var(--or-fond); transform:translate(-50%,-50%) scale(1.12)}
  .cible.pleine{border-style:solid; border-color:var(--juste); background:var(--juste); color:var(--sur-accent); cursor:default}
  .cible.rate{border-style:solid; border-color:var(--pasencore); background:var(--pasencore-fond); color:var(--pasencore)}
  @media (prefers-reduced-motion: reduce){ .cible{transition:none} .cible.viser{transform:translate(-50%,-50%)} .jauge i{transition:none} }

  .jetons{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
  .jet{border:1px solid var(--filet-2); background:var(--feuille); color:var(--encre); border-radius:999px; padding:12px 16px; min-height:48px; font-family:var(--corps); font-size:1rem; cursor:pointer}
  .jet[aria-pressed="true"]{background:var(--encre); color:var(--creme); border-color:var(--encre)}
  .jet.placee{border-color:var(--juste); background:var(--juste-fond); color:var(--encre); cursor:default; display:inline-flex; align-items:center; gap:8px}
  .jet .num{width:24px; height:24px; border-radius:50%; background:var(--juste); color:var(--sur-accent); font-family:var(--display); font-weight:800; font-size:1rem; display:grid; place-items:center; flex:none}

  .choix{display:flex; flex-direction:column; gap:10px; margin-top:16px}
  .ch{display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; min-height:56px; border:1px solid var(--filet-2);
    background:var(--feuille); color:var(--encre); border-radius:var(--r-s); padding:14px 16px; font-family:var(--corps); font-size:1rem; line-height:1.4; cursor:pointer}
  .ch .puce{flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--filet-2); font-family:var(--display); font-weight:800; font-size:1rem; display:grid; place-items:center; color:var(--encre-3)}
  .ch[aria-pressed="true"]{border-color:var(--encre)} .ch[aria-pressed="true"] .puce{border-color:var(--encre); background:var(--encre); color:var(--creme)}
  .ch.bon{border-color:var(--juste); background:var(--juste-fond)} .ch.bon .puce{border-color:var(--juste); background:var(--juste); color:var(--sur-accent)}
  .ch.rate{border-color:var(--pasencore); background:var(--pasencore-fond)} .ch.rate .puce{border-color:var(--pasencore); background:var(--pasencore); color:var(--sur-accent)}

  .vf{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
  .vf button{min-height:88px; border:2px solid var(--filet-2); background:var(--feuille); color:var(--encre); border-radius:var(--r);
    font-family:var(--display); font-weight:800; font-size:1.2rem; cursor:pointer}
  .vf button.bon{border-color:var(--juste); background:var(--juste-fond)} .vf button.rate{border-color:var(--pasencore); background:var(--pasencore-fond)}

  .paires{display:flex; flex-direction:column; gap:9px; margin-top:16px}
  .paire{display:grid; grid-template-columns:1fr auto; gap:9px; align-items:stretch}
  .pg{border:1px solid var(--filet-2); background:var(--feuille); border-radius:var(--r-s); padding:13px 15px; min-height:56px; text-align:left;
    font-family:var(--corps); font-size:1rem; color:var(--encre); cursor:pointer; display:flex; align-items:center}
  .pg[aria-pressed="true"]{background:var(--encre); color:var(--creme); border-color:var(--encre)}
  .pg.liee{border-color:var(--juste); background:var(--juste-fond); cursor:default}
  .pg.rate{border-color:var(--pasencore)}
  .pd{border:1px dashed var(--filet-2); background:var(--feuille-2); border-radius:var(--r-s); padding:11px 14px; min-height:56px; width:56px;
    display:grid; place-items:center; font-family:var(--display); font-weight:800; color:var(--encre-3); cursor:pointer; font-size:1rem}
  .pd.liee{border-style:solid; border-color:var(--juste); background:var(--juste-fond); color:var(--juste)}
  .pd.viser{border-color:var(--or); background:var(--or-fond); color:var(--encre)}
  .listeD{display:flex; flex-direction:column; gap:9px; margin-top:12px}
  .ld{border:1px solid var(--filet-2); background:var(--feuille); border-radius:var(--r-s); padding:13px 15px; min-height:56px; text-align:left;
    font-family:var(--corps); font-size:1rem; color:var(--encre); cursor:pointer; display:flex; gap:10px; align-items:center}
  .ld .lettre{flex:none; width:26px; height:26px; border-radius:50%; background:var(--feuille-2); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1rem; color:var(--encre-2)}
  .ld[aria-pressed="true"]{border-color:var(--encre)} .ld.placee{opacity:.4; pointer-events:none}

  .rang{display:flex; flex-direction:column; gap:9px; margin-top:16px}
  .rg{display:flex; gap:10px; align-items:center; border:1px solid var(--filet-2); background:var(--feuille); border-radius:var(--r-s); padding:10px 12px; min-height:60px}
  .rg .txt{flex:1; font-size:1rem}
  .rg .fl{display:flex; gap:6px}
  .rg .fl button{width:44px; height:44px; border:1px solid var(--filet-2); background:var(--feuille-2); color:var(--encre); border-radius:10px; font-size:1.1rem; cursor:pointer}
  .rg.bon{border-color:var(--juste); background:var(--juste-fond)} .rg.rate{border-color:var(--pasencore); background:var(--pasencore-fond)}

  .carte-tri{border:1px solid var(--filet-2); background:var(--feuille); border-radius:var(--r); padding:26px 20px; margin-top:16px; text-align:center;
    font-size:1.08rem; line-height:1.4; min-height:110px; display:grid; place-items:center; box-shadow:var(--ombre)}
  .bacs{display:grid; gap:10px; margin-top:12px}
  .bacs button{min-height:60px; border:1px solid var(--filet-2); background:var(--feuille); color:var(--encre); border-radius:var(--r-s);
    font-family:var(--display); font-weight:600; font-size:1rem; cursor:pointer}
  .compteur{text-align:center; color:var(--encre-3); font-size:1rem; margin-top:12px}

  table.fiche{width:100%; border-collapse:collapse; margin-top:14px; font-size:1rem; background:var(--feuille); border-radius:var(--r-s); overflow:hidden}
  table.fiche td{padding:10px 13px; border-bottom:1px solid var(--filet)}
  table.fiche tr:last-child td{border-bottom:none}
  table.fiche td:first-child{color:var(--encre-2); width:44%}
  table.fiche td:last-child{font-weight:700}

  textarea{width:100%; min-height:130px; border:1px solid var(--filet-2); border-radius:var(--r-s); background:var(--feuille); color:var(--encre);
    font-family:var(--corps); font-size:1rem; line-height:1.5; padding:14px; resize:vertical; margin-top:14px}
  .mots{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
  .mot{font-size:1rem; border-radius:999px; padding:6px 12px; border:1px solid var(--filet-2); color:var(--encre-2)}
  .mot.vu{background:var(--juste-fond); border-color:var(--juste); color:var(--juste); font-weight:700}
  .modele{background:var(--feuille-2); border-radius:var(--r-s); padding:15px 17px; margin-top:14px; font-size:1rem; line-height:1.55}

  .verdict{border-radius:var(--r-s); padding:15px 17px; margin-top:16px; font-size:1rem; line-height:1.5}
  .verdict.ok{background:var(--juste-fond)} .verdict.non{background:var(--pasencore-fond)} .verdict.info{background:var(--or-fond)}
  .verdict b{font-family:var(--display); display:block; font-size:1.04rem; margin-bottom:3px}

  .tuiles{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
  .tuile{flex:1 1 120px; background:var(--feuille-2); border-radius:var(--r-s); padding:14px}
  .tuile b{font-family:var(--display); font-size:1.45rem; display:block; line-height:1.1}
  .tuile span{font-size:1rem; color:var(--encre-2)}
  .revoir a{color:var(--rose-texte)}
  .revoir{display:flex; align-items:center; gap:11px; background:var(--or-fond); border-radius:var(--r-s); padding:13px 15px; margin-top:12px; font-size:1rem}


  /* ---------- le dialogue de la lecon ---------- */
  .podcast{background:var(--feuille); border:1px solid var(--filet); border-radius:var(--r); padding:19px 20px; margin-top:18px; box-shadow:var(--ombre)}
  .podcast .tete{display:flex; align-items:center; gap:12px}
  .podcast .tete img{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none}
  .podcast .tete b{font-family:var(--display); font-weight:800; font-size:1.02rem; display:block; line-height:1.2}
  .podcast .tete span{font-size:1rem; color:var(--encre-2)}
  #aLecon{width:100%; min-height:48px; margin-top:14px; border-radius:999px}
  .onde{display:inline-flex; align-items:center; gap:3px; height:18px}
  .onde i{display:block; width:3px; height:6px; border-radius:2px; background:var(--rose-texte)}
  @media (prefers-reduced-motion: no-preference){
    .onde i{animation:onde 1.05s ease-in-out infinite}
    .onde i:nth-child(2){animation-delay:.12s} .onde i:nth-child(3){animation-delay:.24s}
    .onde i:nth-child(4){animation-delay:.36s} .onde i:nth-child(5){animation-delay:.48s}
    @keyframes onde{0%,100%{height:6px}50%{height:18px}}
  }
  .script{margin-top:16px; border-top:1px solid var(--filet); padding-top:15px}
  .script .r{display:flex; gap:11px; margin-bottom:10px; align-items:flex-start}
  .script .r:last-child{margin-bottom:0}
  .script .n{flex:none; width:58px; font-family:var(--display); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; padding-top:3px}
  .script .n.m{color:var(--rose-texte)} .script .n.e{color:var(--or)}
  .script p{font-size:1rem; line-height:1.5}

  .pied{position:fixed; left:0; right:0; bottom:0; background:color-mix(in srgb, var(--creme) 93%, transparent); backdrop-filter:blur(10px);
    border-top:1px solid var(--filet); padding:12px 20px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:9}
  .pied-in{max-width:560px; margin:0 auto; display:flex; gap:10px}
  .btn{flex:1; min-height:56px; border:none; border-radius:999px; background:var(--encre); color:var(--creme); font-family:var(--display); font-weight:800; font-size:1.04rem; cursor:pointer}
  .btn[disabled]{background:var(--feuille-2); color:var(--encre-2); border:1px solid var(--filet-2); cursor:default}
  .btn.rose{background:var(--rose-texte); color:var(--sur-accent)}
  .btn-2{min-height:56px; border:1px solid var(--filet-2); background:var(--feuille); color:var(--encre-2); border-radius:999px; padding:0 18px; font-family:var(--corps); font-size:1rem; cursor:pointer}
  /* un seul anneau de focus, partout : lien, bouton, element focalisable */
  :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--or); outline-offset:3px}
  .note{max-width:560px; margin:8px auto 0; font-size:1rem; color:var(--encre-3); text-align:center}
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  @media (prefers-reduced-motion: no-preference){
    .ecran{animation:e .26s ease-out both} @keyframes e{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}
  }

  /* le bouton Ecouter des bulles : lecture par la synthese vocale de l'appareil */
  .ecouter.lit{border-color:var(--rose-texte); color:var(--rose-texte)}
  .sans-voix .ecouter{display:none}

/* ================= ORDINATEUR (>= 900 px) : l'exercice a gauche, Maellys et la consigne fixes a droite ================= */
@media (min-width:900px){
  .page{max-width:1000px; padding-left:32px; padding-right:32px}
  .pied-in, .note{max-width:1000px}
  .pied-in{padding-left:12px; padding-right:12px}
  /* carte du chapitre : les lecons sur 2 colonnes */
  .lecons{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .lec{align-items:flex-start}
  .lire-cours{max-width:640px}
  /* ecran de lecon : grille 2 colonnes, la bulle de Maellys passe a droite et reste visible */
  .ecran{display:grid; grid-template-columns:minmax(0,1fr) 300px; column-gap:32px; grid-auto-rows:auto; align-items:start}
  .ecran > *{grid-column:1; min-width:0}
  .ecran > .dit{grid-column:2; grid-row:1 / span 40; position:sticky; top:20px; flex-direction:column; margin-block:0}
  .ecran > .dit img{width:84px; height:84px}
  .ecran > .dit .bulle{border-radius:16px 16px 16px 4px}
  .ecran > .podcast{grid-column:1}
  .choix{display:grid; grid-template-columns:1fr 1fr}
  .schema{max-width:460px}
  .jetons{max-width:640px}
  .paires{max-width:640px} .listeD{max-width:640px}
  .rang{max-width:640px}
  .carte-tri, .bacs{max-width:560px}
  textarea{max-width:640px}
  .tuiles{max-width:640px}
  .vf{max-width:520px}
}

/* Systeme visuel : le carnet beaute. Les couleurs fonctionnelles restent explicites. */
html{scroll-padding-block:24px 160px}
body{background-image:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--rose-clair) 50%,transparent),transparent 650px)}
::selection{background:var(--rose-clair);color:var(--encre)}
h1,h2,h3{font-variation-settings:"opsz" 96;letter-spacing:-.035em}
h1{font-size:clamp(2.3rem,5vw,3.5rem);line-height:1.08}
h2{font-size:1.5rem} h3{font-size:1.125rem}
a,button,input,select,textarea{touch-action:manipulation}
button,a{ -webkit-tap-highlight-color:transparent }
button{line-height:1.4}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--or);outline-offset:4px}
a{ text-underline-offset:4px }
.page{padding-bottom:170px}
.chapeau{padding-block:20px 24px;gap:12px;min-height:92px}
.marque{display:inline-flex;align-items:center;min-height:44px;font-size:1.25rem;letter-spacing:-.055em}
.marque::before{content:"";width:8px;height:8px;background:var(--or);transform:rotate(45deg);margin-right:10px;flex:none}
.mini{flex-wrap:wrap;justify-content:flex-end}
.mini button{font-size:1rem;box-shadow:var(--ombre);padding-inline:15px}
.etiq{font-size:1rem;letter-spacing:.07em;line-height:1.5}
#bandeau-chantier{margin:0 0 24px;padding:16px 20px;border:1px solid var(--filet-2);font-size:1rem;box-shadow:none}
#bandeau-chantier b{font-size:1.125rem}
.ecran>p{font-size:1rem!important}
.ecran>h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:8px}
.jauge{height:7px;background:var(--filet-2);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--encre) 10%,transparent)}
.jauge i{background:linear-gradient(90deg,var(--rose-texte),var(--rose));box-shadow:0 0 8px color-mix(in srgb,var(--rose) 35%,transparent)}
.barre{gap:6px;margin-block:14px 24px}
.barre i{height:6px}.barre i.ok{background:var(--rose-texte)}.barre i.ici{background:var(--or);box-shadow:0 0 0 3px var(--or-fond)}
.lecons{gap:16px;margin-top:24px}
.lec{position:relative;padding:20px 16px;gap:12px;align-items:flex-start;border-radius:22px;box-shadow:var(--ombre-bouton)}
.lec .num{width:40px;height:40px;background:var(--rose-clair);color:var(--rose-texte);font-size:1.125rem}
.lec .t b{font-size:1.25rem;line-height:1.2;margin:3px 0 8px}
.lec .t span{font-size:1rem;line-height:1.5;display:block}
.lec .ex{font-size:1rem;letter-spacing:0;text-transform:none;padding:4px 8px}
.lec.fait{background:linear-gradient(130deg,var(--feuille),var(--juste-fond))}
.lire-cours{padding:20px;box-shadow:var(--ombre);border-radius:24px;gap:14px}
.lire-cours b{font-size:1.25rem;margin-bottom:5px}.lire-cours .fl{color:var(--encre)}
/* Le livre existant est remplace visuellement par un pictogramme dessine en CSS. */
.lire-cours .pic{font-size:0;position:relative;width:44px;height:44px;background:var(--feuille)}
.lire-cours .pic::before{content:"";width:22px;height:18px;border:2px solid var(--rose-texte);border-radius:3px 3px 5px 5px;background:linear-gradient(90deg,transparent 46%,var(--rose-texte) 46% 54%,transparent 54%)}
.dit{gap:14px;margin-block:24px;position:relative}
.dit img{width:64px;height:64px;border:3px solid var(--feuille);outline:1px solid var(--filet-2);box-shadow:var(--relief)}
.dit>div{min-width:0}
.bulle{position:relative;border-radius:22px;padding:18px;font-size:1.125rem;line-height:1.6;box-shadow:0 6px 18px -12px color-mix(in srgb,var(--rose-texte) 35%,transparent)}
.bulle::before{content:"";position:absolute;left:-7px;top:24px;width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:3px}
.bulle .qui{font-size:1rem;letter-spacing:.05em;margin-bottom:8px}
.ecouter{background:var(--feuille);font-size:1rem;box-shadow:var(--ombre);margin-top:12px}
.schema{background:var(--feuille);border:1px solid var(--filet);border-radius:24px;box-shadow:var(--relief)}
.schema svg{border-radius:24px}
.cible{border-width:2px;box-shadow:0 3px 0 var(--filet-2),var(--ombre);font-size:1rem}
.cible.viser{box-shadow:0 0 0 5px color-mix(in srgb,var(--or) 24%,transparent),var(--ombre)}
.jetons{gap:10px;margin-top:20px}
.jet{font-size:1.125rem;padding:12px 18px;box-shadow:var(--ombre-bouton)}
.jet.placee{box-shadow:none}.jet .num{width:28px;height:28px;font-size:1rem}
.ch,.pg,.ld,.rg,.bacs button{box-shadow:var(--ombre-bouton);font-size:1.125rem;border-radius:18px}
.ch{padding:18px 16px;align-items:center;min-height:64px}
.ch .puce{width:30px;height:30px;font-size:1rem;border-color:var(--filet-3)}
.ch[aria-pressed="true"],.pg[aria-pressed="true"]{box-shadow:0 0 0 2px var(--encre)}
.vf button{box-shadow:var(--ombre-bouton);font-size:1.5rem;min-height:96px}
.vf button.bon,.ch.bon,.rg.bon{box-shadow:0 3px 0 color-mix(in srgb,var(--juste) 35%,var(--feuille))}
.verdict{border:1px solid var(--filet);border-radius:22px;padding:20px;font-size:1.125rem;box-shadow:var(--ombre)}
.verdict.ok{border-color:var(--juste)}.verdict.non{border-color:var(--pasencore)}
.verdict b{font-size:1.35rem;line-height:1.25;margin-bottom:8px}
.podcast{padding:22px 20px;border-radius:28px;background:linear-gradient(145deg,var(--feuille),var(--feuille-2));box-shadow:var(--relief)}
.podcast .tete img{width:64px;height:64px;border:3px solid var(--feuille)}
.podcast .tete b{font-size:1.3rem}.podcast .tete span{font-size:1rem;display:block;margin-top:5px}
#aLecon{margin-block:18px 4px}
.script .r{display:block;padding:14px 0;border-bottom:1px solid var(--filet);margin:0}
.script .r:last-child{border:0;padding-bottom:0}
.script .n{display:block;width:auto;font-size:1rem;margin-bottom:4px;letter-spacing:.04em}
.script .n.e{color:var(--encre-2)}.script p{font-size:1.125rem;line-height:1.6}
.tuile{background:var(--feuille);border:1px solid var(--filet);padding:20px;box-shadow:var(--ombre)}
.tuile b{font-size:2.4rem;font-weight:500;color:var(--rose-texte);margin-bottom:6px}
.tuile span{font-size:1rem}.mot.vu{color:var(--encre)}
.pied{padding-top:16px;box-shadow:0 -8px 32px color-mix(in srgb,var(--creme) 80%,transparent)}
.btn{min-height:56px;box-shadow:0 4px 0 color-mix(in srgb,var(--encre) 65%,var(--rose));font-size:1.125rem;padding:12px 20px}
.btn.rose{box-shadow:0 4px 0 color-mix(in srgb,var(--rose-texte) 55%,var(--creme))}
.btn[disabled]{box-shadow:none}.btn-2{font-size:1rem;box-shadow:var(--ombre)}
.note{font-size:1rem;line-height:1.4;margin-top:12px}
.acces{position:fixed;top:12px;left:12px;z-index:100;padding:12px 20px;border-radius:16px;min-height:48px;background:var(--feuille);color:var(--encre);transform:translateY(-180%);box-shadow:var(--ombre)}
.acces:focus{transform:none}
.signature{margin-top:48px;padding-block:24px;border-top:1px solid var(--filet-2);color:var(--encre-2);font-size:1rem}
.signature b{font-family:var(--display);font-size:1.5rem;color:var(--encre)}
.signature nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px}
.signature a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:520px){
 .lec{display:grid;grid-template-columns:40px minmax(0,1fr)}
 .lec .ex{grid-column:2;justify-self:start}.lec .num{grid-row:1 / span 2}
 .chapeau{flex-wrap:wrap}.mini{gap:6px}
}
@media (min-width:900px){
 .page{max-width:1120px;padding-inline:40px}
 .pied-in,.note{max-width:1040px}
 .lecons{grid-template-columns:1fr}
 .ecran{column-gap:56px;grid-template-columns:minmax(0,1fr) 300px}
 .ecran>.dit{padding-top:8px;gap:22px}
 .ecran>.dit img{width:112px;height:112px}
 .ecran>.dit .bulle{border-radius:24px}
 .ecran>.dit .bulle::before{top:-7px;left:36px}
 .choix{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
 :is(.btn,.btn-2,.lec,.jet,.ch,.vf button,.pg,.ld,.ecouter,.lire-cours,.mini button){transition:transform var(--duree) var(--aisance),box-shadow var(--duree),border-color var(--duree),background var(--duree)}
 .verdict.ok,.verdict.non{animation:verdict-pop .3s var(--aisance) both}
 .dit img{animation:portrait-flotte 4s ease-in-out 1}
 @keyframes verdict-pop{from{opacity:.3;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
 @keyframes portrait-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
}
@media (hover:hover){
 :is(.lec,.jet:not(.placee),.ch:not(:disabled),.vf button:not(:disabled),.pg,.ld,.ecouter,.lire-cours):hover{border-color:var(--or);transform:translateY(-2px);box-shadow:var(--ombre-bouton),0 0 0 3px color-mix(in srgb,var(--or) 12%,transparent)}
 .btn:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.06)}
}
button:not(:disabled):active{translate:0 2px}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 :is(.lec,.jet,.ch,.vf button,.pg,.ld,.ecouter,.lire-cours,.btn):hover{transform:none}
 button:active{translate:none}
}