/* Reprend l'identité du site CV : fond nuit, lueur bleue, Inter et Bricolage, cartes arrondies. */
@font-face { font-family: "Inter"; src: url(fonts/inter-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --rose: #f472b6;
  --vert: #a6d189;
  --voile: rgba(130, 214, 232, 0.16);
  --lueur: 0 0 40px rgba(130, 214, 232, 0.35);
  --code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 0.75rem; }
a { color: var(--bleu-vif); text-underline-offset: 0.15em; }
a:hover { color: #fff; }
[hidden] { display: none !important; }
code { font-family: var(--code); font-size: 0.9em; }
:not(pre) > code { color: var(--bleu-vif); }

.evitement { position: absolute; left: -999px; }
.evitement:focus { left: 1rem; top: 1rem; background: var(--bleu); color: #fff; padding: 0.5rem 1rem; border-radius: 8px; z-index: 2; }

button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: rgba(130, 214, 232, 0.1);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-m);
  padding: 0.55rem 1.1rem;
  min-height: 2.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}
button:hover { background: rgba(130, 214, 232, 0.22); }
button:active { transform: scale(0.97); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Newsletter */
.newsletter { background: var(--carte); border: 1px solid rgba(130, 214, 232, 0.45); border-radius: var(--rayon); padding: 0.25rem 1.25rem 0.75rem; margin: 3rem 0 0; }
.newsletter h2 { margin-top: 1rem; }
.newsletter-ligne { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.newsletter input[type="email"] { flex: 1 1 14rem; min-width: 0; font: inherit; color: var(--texte); background: var(--nuit-2); border: 1px solid var(--trait); border-radius: 12px; padding: 0.7rem 1rem; }
.newsletter input[type="email"]::placeholder { color: var(--doux); }
.newsletter-accord { display: flex; gap: 0.6rem; align-items: baseline; margin-top: 0.75rem; font-size: 0.95rem; cursor: pointer; }
.newsletter-accord input { accent-color: var(--bleu); }
.newsletter-etat { margin: 0.5rem 0 0; color: var(--bleu-vif); font-size: 0.95rem; }
.newsletter-etat:empty { display: none; }
.auteur .gerer-cookies { margin-left: 0.75rem; }

/* Fenêtre d'inscription */
.popup-newsletter { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 0; background: none; border: 0; color: var(--texte); }
.popup-newsletter::backdrop { background: rgba(15, 17, 32, 0.78); backdrop-filter: blur(4px); }
.popup-newsletter .newsletter { margin: 0; background: var(--surface); padding-right: 1.25rem; }
.popup-newsletter h2 { padding-right: 5.5rem; }
.popup-fermer { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; padding: 0.35rem 0.75rem; font-size: 0.9rem; font-weight: 400; }

/* Accueil */
.accueil main { max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gouttiere) 3rem; }
.ouverture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 2rem 3rem; align-items: center; }
.ouverture > p { font-size: 1.125rem; line-height: 1.5; max-width: 54ch; margin: 0; color: var(--doux); text-wrap: pretty; }
.ouverture-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.ouverture-texte > p { font-size: 1.125rem; line-height: 1.5; max-width: 54ch; margin: 0; color: var(--doux); text-wrap: pretty; }
.ouverture-texte .precision { margin-top: 0.75rem; font-size: 0.875rem; }
.page-legale main { max-width: calc(var(--mesure) + 2 * var(--gouttiere)); }
.page-legale h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.accueil main > section > h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; margin-bottom: 1.25rem; }

.trace { margin-top: 4.5rem; max-width: 56rem; }
.trace h2 { margin-top: 0; }
.demande { font-size: 1.2rem; margin: 0 0 1.25rem; }
.demande span { display: block; font-size: 0.95rem; color: var(--doux); }
.etapes { list-style: none; margin: 0; padding: 0; }
.etape {
  --teinte: var(--bleu-vif);
  border: 1px solid color-mix(in srgb, var(--teinte) 30%, transparent);
  border-radius: 12px;
  background: var(--carte);
  padding: 0.65rem 1rem;
  margin-bottom: 0.5rem;
  scroll-margin-bottom: 5rem;
}
.etape.pensee { --teinte: var(--bleu-vif); }
.etape.action { --teinte: var(--rose); }
.etape.observation { --teinte: var(--vert); }
.etape .genre { display: block; color: var(--teinte); font-weight: 600; font-size: 0.95rem; }
.etape code { display: block; overflow-wrap: anywhere; font-size: 0.95rem; color: var(--texte); }
.lecon { display: none; margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--trait); font-size: 1rem; }
.lecon a { display: block; font-weight: 600; }
.etape.courante .lecon { display: block; }
.etape.courante { animation: apparait 0.2s ease-out; }
html:not(:has(.commandes:not([hidden]))) .lecon { display: block; }
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } }
.commandes { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; padding: 0.75rem 0; background: rgba(15, 17, 32, 0.88); backdrop-filter: blur(12px); }
.commandes span { color: var(--doux); font-size: 0.95rem; }

.sommaire { margin-top: 4.5rem; }
.reprise { font-weight: 600; }
.sommaire { counter-reset: m; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0.75rem; }
.sommaire li { counter-increment: m; display: grid; }
.sommaire ol a {
  position: relative; display: block; padding: 1rem 2.75rem 1rem 3.75rem; color: inherit; text-decoration: none;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.sommaire ol a:hover { border-color: var(--bleu-vif); background: var(--surface); color: inherit; }
.sommaire ol a::before { content: counter(m); position: absolute; left: 1.25rem; top: 0.8rem; font: 700 1.6rem/1.3 "Bricolage", sans-serif; color: var(--structure); }
.titre-module { display: block; font-family: "Bricolage", sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; }
.objectif-module { display: block; color: var(--doux); font-size: 0.98rem; line-height: 1.5; margin-top: 0.2rem; }
.sommaire ol a.fait::after, .plan a.fait::after { content: "✓"; color: var(--vert); font-weight: 700; }
.sommaire ol a.fait::after { position: absolute; right: 1.1rem; top: 1rem; font-size: 1.3rem; }
.partie { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.5rem 2.5rem; padding-block: 2.25rem; border-top: 1px solid var(--trait); }
.partie-tete h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.partie-tete h3 a { color: inherit; text-decoration: none; }
.partie-tete h3 a:hover { color: var(--bleu-vif); }
.partie-tete p { margin: 0 0 0.5rem; color: var(--doux); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.partie-tete .position { color: var(--structure); }
.partie-jauge { height: 3px; margin-top: 0.75rem; border-radius: 3px; background: rgba(146, 152, 188, 0.15); overflow: hidden; }
.partie-jauge i { display: block; height: 100%; width: 0; background: var(--vert); transition: width 0.3s ease-out; }
.partie ol { grid-template-columns: minmax(0, 1fr) !important; align-content: start; }
.duree-module { display: block; color: var(--doux); font-size: 0.875rem; margin-top: 0.3rem; }
.page-sf > ul { padding-left: 1.2rem; }
.page-sf .sommaire { margin-top: 3rem; }
.page-sf .sommaire ol { grid-template-columns: minmax(0, 1fr); }
.suite .bouton { white-space: normal; text-align: center; }
/* Fenêtre d'éditeur : montre le vrai code de l'exercice, en reprenant l'éditeur du site. */
.fenetre { margin: 1.5rem 0; border: 1px solid var(--trait-fort); border-radius: var(--rayon-m); overflow: hidden; background: var(--nuit-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.fenetre-onglets { display: flex; background: var(--surface); font: 0.8125rem/1 var(--code); color: var(--doux); }
.fenetre-onglets span { padding: 0.6rem 0.9rem; border-right: 1px solid var(--trait); }
.fenetre-onglets .actif { color: var(--texte); background: var(--nuit-2); box-shadow: inset 0 2px 0 var(--action); }
.fenetre pre { margin: 0; padding: 0.75rem 0; overflow: hidden; font: 0.8125rem/1.6 var(--code); }
.fenetre code { display: block; color: var(--texte); }
.fenetre .ligne { display: block; white-space: pre; }
.fenetre .num { display: inline-block; width: 2.75rem; padding-right: 1rem; text-align: right; color: #5c6288; user-select: none; }
.fenetre-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.75rem 0.9rem; border-top: 1px solid var(--trait); background: var(--surface); }
.fenetre-pied strong { display: block; line-height: 1.3; }
.fenetre-pied span { color: var(--vert); font-size: 0.875rem; font-weight: 600; }
.fenetre.fait .fenetre-pied strong::after { content: " ✓"; color: var(--vert); }
.ouverture .fenetre { margin: 0; }
.exemple { margin: 3rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--trait); }
.exemple h2 { margin-top: 1.5rem; }
.exemple pre, .approfondir pre { background: var(--nuit-2); border: 1px solid var(--trait); color: var(--texte); padding: 0.9rem 1rem; margin: 1rem 0; overflow-x: auto; border-radius: var(--rayon-m); line-height: 1.55; }
.exemple pre code, .approfondir pre code { font-size: 0.8125rem; color: var(--texte); }
.resultat { margin: -0.5rem 0 1rem; font: 0.8125rem/1.5 var(--code); color: var(--vert); overflow-wrap: anywhere; }
.resultat::before { content: "Résultat "; color: var(--doux); }
html[lang="en"] .resultat::before { content: "Result "; }
.tok-k { color: var(--structure); }
.tok-s { color: var(--vert); }
.tok-c { color: #7a80a6; }
.tok-n { color: #f2a97e; }
.tok-f { color: var(--action); }
/* Schémas : le texte reste du vrai texte, à la même taille de lecture sur mobile. */
.chaine-rag { margin: 2.5rem 0; }
.chaine-rag h3 { font-size: 1.2rem; margin: 2.25rem 0 0.4rem; }
.schema { margin: 1.25rem 0 0; }
/* Sous 400 px, le schéma défile plutôt que de rendre son texte illisible. */
.schema-cadre { overflow-x: auto; }
.schema svg { display: block; width: 100%; min-width: 26rem; max-width: 37rem; height: auto; font-family: "Inter", sans-serif; }
/* L'illustration passe en pleine colonne, ses petits textes en ont besoin. Un clic l'ouvre en grand. */
.schema-image img { display: block; width: 100%; min-width: 34rem; height: auto; border-radius: var(--rayon-m); }
.schema-image .schema-cadre + .schema-cadre { margin-top: 1rem; }
.schema figcaption { max-width: 37rem; margin-top: 0.6rem; color: var(--doux); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.schema text { fill: var(--texte); font-size: 14px; }
.schema .titre { fill: var(--doux); font-size: 13px; font-weight: 600; }
.schema .fort { font-weight: 600; }
.schema .petit { fill: var(--doux); font-size: 12px; }
.schema .petit.clair { fill: var(--texte); }
.schema .chiffres { font-family: var(--code); font-size: 11.5px; }
.schema .b rect { fill: var(--surface); stroke: var(--trait-fort); stroke-width: 1; }
.schema .b.prep rect, .schema .b.c1 rect { stroke: var(--bleu-vif); }
.schema .b.rep rect, .schema .b.c2 rect { stroke: var(--structure); }
.schema .b.agent rect { stroke: var(--action); fill: rgba(240, 198, 116, 0.08); }
.schema .b.c3 rect { stroke: var(--vert); }
.schema .b.discret rect { stroke: var(--trait); stroke-dasharray: 4 4; fill: none; }
.schema .f { fill: none; stroke: var(--doux); stroke-width: 1.4; }
.schema .f.lien { stroke: var(--bleu-vif); stroke-dasharray: 5 4; }
.schema .f.retour { stroke: var(--action); }
.schema .pointe { fill: var(--doux); }
.schema .page { fill: var(--nuit-2); stroke: var(--trait); }
.schema .ligne { font-size: 13px; }
.schema .partagee { fill: rgba(240, 198, 116, 0.2); stroke: none; }
.schema g.b rect.partagee { fill: rgba(240, 198, 116, 0.2); stroke: none; }
.schema .tige.c1 { fill: var(--bleu-vif); }
.schema .tige.c2 { fill: var(--structure); }
.schema .tige.c3 { fill: var(--vert); }
.schema .petit.etiquette.c1 { fill: var(--bleu-vif); }
.schema .petit.etiquette.c2 { fill: var(--structure); }
.schema .petit.etiquette.c3 { fill: var(--vert); }
.schema text.c1 { fill: var(--bleu-vif); }
.schema text.c2 { fill: var(--structure); }
.schema text.c3 { fill: var(--vert); }
.schema .p.c1 { fill: var(--bleu-vif); }
.schema .p.c2 { fill: var(--structure); }
.schema .p.c3 { fill: var(--vert); }
.schema .groupe { stroke: none; }
.schema .groupe.c1 { fill: rgba(130, 214, 232, 0.08); }
.schema .groupe.c2 { fill: rgba(185, 163, 245, 0.09); }
.schema .groupe.c3 { fill: rgba(166, 209, 137, 0.08); }
.schema .rayon.loin { stroke: var(--doux); stroke-dasharray: 4 5; }
.schema .petit.etiquette.action { fill: var(--action); font-weight: 600; }
.schema .fond-barre { fill: rgba(160, 170, 230, 0.1); }
.schema .tige.estompe { fill: var(--doux); opacity: 0.55; }
.schema text.estompe { fill: var(--doux); }
.schema .rayon { fill: none; stroke: var(--action); stroke-width: 1; }
.schema .etoile { fill: var(--action); }
.ariane { margin-bottom: 1rem; font-size: 0.875rem; color: var(--doux); }
.ariane a { color: var(--doux); text-decoration: none; }
.ariane a:hover { color: #fff; text-decoration: underline; }
.video-apport { margin: 0 0 0.75rem; text-wrap: pretty; }
.video-meta { display: block; color: var(--doux); font-size: 0.875rem; }
.credits { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--trait); color: var(--doux); font-size: 0.9375rem; }
.credits p { max-width: var(--mesure); }

/* Module */
.module { display: grid; grid-template-columns: 22rem minmax(0, 1fr); align-items: start; }
.plan { position: sticky; top: var(--hauteur-barre); min-height: calc(100vh - var(--hauteur-barre)); max-height: calc(100vh - var(--hauteur-barre)); overflow-y: auto; padding: 1.5rem 1.25rem 1.5rem 4rem; font-size: 0.95rem; line-height: 1.4; border-right: 1px solid var(--trait); }
.plan-titre { display: block; font: 700 1.2rem/1.2 "Bricolage", sans-serif; color: var(--texte); text-decoration: none; margin-bottom: 1rem; }
.plan summary { cursor: pointer; }
.plan-tout > summary { display: none; }
.plan-sf { margin-bottom: 1rem; }
.plan-sf > summary { padding: 0.25rem 0; font-weight: 600; color: var(--texte); }
.plan-sf-lien { display: block; margin: 0 0 0.4rem 1.05rem; font-size: 0.8125rem; color: var(--doux); }
.plan ol { margin: 0; padding-left: 2.1rem; }
.plan ul { list-style: none; margin: 0.35rem 0 0.5rem; padding: 0 0 0 0.75rem; border-left: 1px solid var(--trait); }
.plan ul li { margin-bottom: 0.2rem; font-size: 0.875rem; }
.plan li { margin-bottom: 0.45rem; color: var(--doux); }
.plan .module-ouvert { color: #fff; font-weight: 600; }
.plan a[data-lecon].fait::after { content: "✓"; color: var(--vert); font-weight: 700; margin-left: 0.35rem; }
.plan li a { color: var(--doux); text-decoration: none; }
.plan li a:hover { color: #fff; }
.plan li a.fait::after { margin-left: 0.35rem; }
.plan a[aria-current="page"] { color: #fff; font-weight: 600; background: var(--voile); border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.1rem 0.35rem; }

.module main { padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem 4rem; }
article { max-width: var(--mesure); margin-inline: auto; }
.position { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--structure); }
.module h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.objectif { font-size: 1.125rem; line-height: 1.5; color: var(--doux); margin: 0 0 2rem; }
article li { margin-bottom: 0.35rem; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.98rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
thead th { border-bottom: 1px solid var(--bleu); }
.regle { font: 700 1.2rem/1.3 "Bricolage", sans-serif; letter-spacing: -0.02em; background: var(--carte); border: 1px solid rgba(130, 214, 232, 0.45); border-radius: var(--rayon); padding: 1rem 1.25rem; margin: 2rem 0; }
.maj { background: var(--voile); border-radius: 12px; padding: 0.25rem 1rem; margin: 1.5rem 0; }

.video { margin: 1.5rem 0 2.5rem; }
.video h3 { font: 700 1.25rem/1.2 "Bricolage", sans-serif; margin: 0 0 0.4rem; }
.ressources { padding-left: 1.2rem; overflow-wrap: anywhere; }
.ressources li { margin-bottom: 0.7rem; }
.ressources a { font-weight: 600; }
.auteur { color: var(--doux); font-size: 0.95rem; }
.lecteur { aspect-ratio: 16 / 9; background: var(--nuit-2); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.lecteur iframe { display: block; width: 100%; height: 100%; border: 0; }
.lancer { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; width: 100%; height: 100%; padding: clamp(1rem, 4vw, 2rem); text-align: left; background: none; border: 0; border-radius: 0; }
.lancer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.lancer::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(15, 17, 32, 0.94), rgba(15, 17, 32, 0.25) 60%); }
.lancer::after { content: ""; position: absolute; left: 50%; top: 42%; z-index: 2; width: 3.25rem; height: 3.25rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 1.75rem no-repeat; }
.lancer:hover { background: none; box-shadow: none; }
.lancer:hover img { transform: scale(1.03); }
.lancer span { position: relative; z-index: 2; }
.lancer-titre { font: 700 clamp(1.1rem, 2.5vw, 1.5rem)/1.15 "Bricolage", sans-serif; }
.lancer-action { font-weight: 400; color: var(--bleu-vif); }
.video-note { color: var(--doux); font-size: 0.95rem; margin: 0.5rem 0; }
.reperes { list-style: none; margin: 0; padding: 0; }
.reperes li { margin: 0; }
.reperes a { display: block; padding: 0.3rem 0; }
.temps { display: inline-block; min-width: 3.2rem; font-family: var(--code); font-size: 0.9rem; color: var(--doux); }

.exercice { background: var(--carte); border: 1px solid rgba(166, 209, 137, 0.3); border-radius: var(--rayon); padding: 0.1rem 1.25rem 0.5rem; margin: 2.5rem 0; }
.exercice h2 { margin-top: 1rem; }
fieldset { min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--trait); border-radius: 12px; margin: 0 0 1rem; padding: 0.75rem 1rem; }
fieldset.juste { border-color: var(--vert); }
fieldset.faux { border-color: var(--rose); }
legend { font-weight: 600; padding: 0 0.4rem; }
.quiz label { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.25rem 0; cursor: pointer; }
.quiz input { accent-color: var(--bleu); }
.correction { margin: 0.4rem 0 0; }
.sources ul { padding-left: 1.2rem; }
.terminer { margin-top: 1rem; }
.terminer[aria-pressed="true"] { background: rgba(166, 209, 137, 0.14); border-color: var(--vert); }
.suite { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--trait); }

@media (max-width: 62rem) {
  .module { display: block; }
  .plan { position: static; min-height: 0; max-height: none; padding: 1.5rem 1.25rem 0; border-right: 0; }
  .plan-tout > summary { display: list-item; padding: 0.25rem 0 0.5rem; color: var(--doux); }
}
@media (max-width: 40rem) {
  .commandes { padding-right: 4.5rem; } /* Le compteur reste visible à côté du bouton Meet. */
}
@media (max-width: 64rem) {
  .ouverture { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 52rem) {
  .partie { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 34rem) {
  .suite { flex-direction: column; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* Aller plus loin et exercices */
.approfondir h3 { font-size: 1.2rem; margin: 2rem 0 0.4rem; }
.approfondir pre { background: var(--nuit-2); border: 1px solid var(--trait); color: var(--texte); padding: 0.9rem 1rem; margin: 1rem 0; overflow-x: auto; border-radius: 12px; line-height: 1.5; }
.approfondir pre code { font-size: 0.84rem; }
.ecrire { background: var(--carte); border: 1px solid rgba(130, 214, 232, 0.45); border-radius: var(--rayon); padding: 0.2rem 1.25rem 1rem; margin: 2.5rem 0; }
.ecrire h2 { margin-top: 1rem; }
.liste-labs { padding-left: 1.3rem; }
.liste-labs li { margin-bottom: 0.4rem; }
.liste-labs li.fait::after { content: " ✓"; color: var(--vert); font-weight: 700; }