/* ============================================================================
   legal — LA FEUILLE DES DOCUMENTS DE RÉFÉRENCE, DANS LES DEUX LANGUES.
   Conditions d'utilisation, charte de confidentialité, conditions de la Prépa
   TCF et de la Prépa IELTS (FR + EN). 12/10/2026, refonte de la prise en main.

   Mesuré avant (12/10) : à l'ordinateur, des lignes de 76 à 124 caractères
   (l'œil décroche au-delà de 75) ; aucun sommaire, sur des pages de 5 à 11
   écrans ; la date de mise à jour tout en bas — à 25 écrans du haut sur la
   charte de confidentialité au téléphone ; deux tableaux plus larges que
   l'écran de 375 px ; un trait rouge de 4 px au bord de « L'essentiel ».
   Trois feuilles écrites dans les pages, chacune un peu différente.

   Téléphone : chemin, titre, date et temps de lecture ; le sommaire REPLIÉ
   (« Sur cette page · 11 parties »), qui se referme dès qu'on choisit ; le
   texte en 16 px ; les tableaux deviennent des fiches ; à la fin, les autres
   documents. Ordinateur : le dessin des articles (css/blog.css) — une colonne
   de lecture à ~70 caractères et, à sa droite, une colonne collante : le
   sommaire, qui allume la partie en cours (js/legal.js), puis les autres
   documents et « Imprimer ». Le texte juridique, lui, n'a pas changé d'un mot.
   ============================================================================ */

.lg-section { padding: var(--sp-5) 0 var(--sp-8); }
.lg-mise {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tete" "plan" "texte" "docs";
  max-width: 760px;
}
.lg-tete { grid-area: tete; }
.lg-cote { display: contents; }
.lg-plan { grid-area: plan; }
.lg-docs { grid-area: docs; }
.lg-texte { grid-area: texte; min-width: 0; }

/* ---------- La tête : chemin, titre, date ---------- */
.lg-tete .crumbs { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.lg-tete .crumbs a { color: var(--red-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lg-tete .crumbs span { margin: 0 var(--sp-2); opacity: .5; }
.lg-tete h1 {
  margin: 0; font-size: var(--fs-h2); line-height: 1.16; letter-spacing: var(--tracking-title);
  color: var(--navy-dark); text-wrap: balance;
}
.lg-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm); color: var(--muted);
}
.lg-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.lg-meta svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Le sommaire : replié au téléphone, colonne collante à l'ordinateur ---------- */
.lg-plan { margin: var(--sp-5) 0 var(--sp-6); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.lg-plan > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-3) var(--sp-4);
  font-family: Sora, sans-serif; font-weight: 600; font-size: var(--fs-base); color: var(--navy-dark);
}
.lg-plan > summary::-webkit-details-marker { display: none; }
.lg-plan-nb { margin-left: auto; font-family: Inter, sans-serif; font-weight: 500; font-size: var(--fs-sm); color: var(--muted); }
.lg-plan > summary svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; transition: transform .2s ease; }
.lg-plan[open] > summary svg { transform: rotate(180deg); }
.lg-plan > summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: var(--r); }
.lg-plan ol { list-style: none; margin: 0; padding: 0; }
.lg-plan > nav > ol { padding: 0 var(--sp-2) var(--sp-3); }
.lg-plan li { margin: 0; }
.lg-plan a {
  display: flex; gap: var(--sp-3); align-items: baseline; min-height: 44px; padding: 10px var(--sp-3);
  border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); line-height: 1.45;
  transition: background-color .2s ease, color .2s ease;
}
.lg-plan a .lg-n {
  flex: none; min-width: 1.5em; font-family: Sora, sans-serif; font-weight: 700;
  color: var(--red-dark); font-variant-numeric: tabular-nums;
}
.lg-plan a:hover { background: var(--blush); color: var(--red-dark); }
.lg-plan a[aria-current="true"] { background: var(--blush); color: var(--red-ink); font-weight: 600; }
.lg-plan a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
/* Les situations du point 2 de la charte : en retrait, sous leur partie. */
.lg-plan .lg-sous { padding-left: calc(1.5em + var(--sp-3)); }
.lg-plan .lg-sous a { color: var(--muted); }
.lg-plan .lg-sous a:hover, .lg-plan .lg-sous a[aria-current="true"] { color: var(--red-ink); }

/* ---------- Les autres documents (fin de page au téléphone, colonne à l'ordinateur) ---------- */
.lg-docs { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.lg-docs-titre { margin: 0 0 var(--sp-2); font-family: Sora, sans-serif; font-weight: 600; font-size: var(--fs-base); color: var(--navy-dark); }
.lg-docs ul { list-style: none; margin: 0; padding: 0; }
.lg-docs li { margin: 0; }
.lg-docs li a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-2) 0;
  color: var(--ink); font-size: var(--fs-base); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--line); transition: color .2s ease;
}
.lg-docs li a:hover { color: var(--red-dark); }
.lg-docs li a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.lg-docs li a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--r-sm); }
.lg-docs li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--red-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-docs-contact { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.lg-docs-contact a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lg-imprimer { margin-top: var(--sp-4); }
.lg-imprimer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-imprimer:active { transform: scale(.98); }

/* ---------- Le texte ---------- */
.lg-texte p, .lg-texte li { font-size: var(--fs-md); line-height: 1.72; color: var(--ink); text-wrap: pretty; }
.lg-texte p { margin: 0 0 var(--sp-4); }
.lg-texte ul { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
.lg-texte li { margin-bottom: var(--sp-2); padding-left: var(--sp-1); }
.lg-texte li::marker { color: var(--red); }
.lg-texte strong { color: var(--navy-dark); font-weight: 600; }
.lg-texte a { color: var(--red-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lg-texte a:hover { text-decoration-thickness: 2px; }
.lg-texte ::selection { background: var(--blush); color: var(--red-ink); }
.lg-texte h2 {
  margin: var(--sp-7) 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3;
  letter-spacing: var(--tracking-title); color: var(--navy-dark); text-wrap: balance; scroll-margin-top: 96px;
}
.lg-texte h3 {
  margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-md); font-weight: 600; line-height: 1.4;
  color: var(--navy-dark); text-wrap: balance; scroll-margin-top: 96px;
}
.lg-num { color: var(--red-dark); font-variant-numeric: tabular-nums; }
.lg-texte > :first-child, .lg-texte > .conf-sec:first-child h2 { margin-top: 0; }

/* « L'essentiel » : un encart lavé de rouge — sans le trait épais au bord. */
.conf-resume {
  margin: 0 0 var(--sp-6); padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--blush); border: 1px solid color-mix(in srgb, var(--red) 16%, transparent); border-radius: var(--r-lg);
}
.lg-texte .conf-resume h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); scroll-margin-top: 96px; }
.conf-resume ul { list-style: none; margin: 0; padding: 0; }
.lg-texte .conf-resume li { position: relative; margin: 0; padding: var(--sp-1) 0 var(--sp-1) 28px; line-height: 1.6; }
.conf-resume li::before {
  content: ''; position: absolute; left: 0; top: calc(var(--sp-1) + .3em); width: 18px; height: 18px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(:root[data-theme="nuit"]) .conf-resume li::before { background: var(--teal-ink); }

/* La réserve ambrée de la charte : un encart, pas un trait au bord. */
.conf-alerte {
  margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5);
  background: var(--amber-light); color: var(--amber-ink);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: var(--r);
  font-size: var(--fs-base); line-height: 1.65;
}
.conf-maj {
  margin: var(--sp-7) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.lg-texte p.conf-maj { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* Les tableaux de la charte : de vraies lignes à l'ordinateur… */
.conf-tab-wrap { margin: var(--sp-3) 0 var(--sp-5); }
.conf-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-base); line-height: 1.6; }
.conf-tab th, .conf-tab td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.conf-tab th { font-family: Sora, sans-serif; font-weight: 600; font-size: var(--fs-sm); color: var(--navy-dark); border-bottom-color: var(--line-strong); }
.conf-tab td:first-child { font-weight: 600; color: var(--navy-dark); }
.conf-tab td:first-child strong { font-weight: 700; }
/* … et des fiches au téléphone : plus rien ne déborde de l'écran. */
@media (max-width: 699px) {
  .conf-tab, .conf-tab tbody, .conf-tab tr, .conf-tab td { display: block; width: auto; }
  .conf-tab tr:first-child { display: none; }
  .conf-tab tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .conf-tab td { padding: 0; border: 0; }
  .conf-tab td + td { margin-top: var(--sp-1); }
  .conf-tab td[data-label]::before {
    content: attr(data-label) "\00a0: "; font-weight: 600; color: var(--muted); font-size: var(--fs-sm);
  }
  :lang(en) .conf-tab td[data-label]::before { content: attr(data-label) ": "; }
  .conf-tab td.lg-sans-libelle::before { content: none; }
}

/* La suppression de compte en libre-service (js/supprimer-compte.js remplit la zone). */
#supprimer-compte { margin: var(--sp-5) 0; border: 1px solid var(--line); border-radius: var(--r); padding: 0 var(--sp-4); }
#supprimer-compte > summary { color: var(--navy-dark); gap: var(--sp-2); }
#supprimer-compte > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--r-sm); }
#supprimer-compte[open] { padding-bottom: var(--sp-4); }

/* ---------- La tablette : un peu plus d'air ---------- */
@media (min-width: 768px) {
  .lg-section { padding-top: var(--sp-7); }
  .lg-texte p, .lg-texte li { font-size: var(--fs-lg); }
  .lg-texte h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
  .lg-texte h3 { font-size: var(--fs-lg); }
  .lg-texte .conf-resume h2 { font-size: var(--fs-lg); }
  .lg-texte .conf-resume li { font-size: var(--fs-md); }
  .conf-resume { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  .conf-resume li::before { top: calc(var(--sp-1) + .28em); }
  .conf-tab { font-size: var(--fs-md); }
}

/* ---------- L'ordinateur : la colonne de lecture et sa colonne collante ---------- */
@media (min-width: 1100px) {
  .lg-mise {
    max-width: 1080px; grid-template-columns: minmax(0, 660px) 272px; column-gap: 80px; justify-content: center;
    grid-template-areas: "tete cote" "texte cote";
  }
  .lg-tete { margin-bottom: var(--sp-7); }
  .lg-cote {
    display: block; grid-area: cote; position: sticky; top: 96px; align-self: start;
    max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
  }
  .lg-plan { margin: 0; background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .lg-plan > summary {
    cursor: default; pointer-events: none; min-height: 0; padding: 0 var(--sp-4) var(--sp-3);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  }
  .lg-plan > summary svg, .lg-plan-nb { display: none; }
  .lg-plan > nav > ol { padding: 0 0 0 var(--sp-2); }
  .lg-plan a { min-height: 0; padding: 6px var(--sp-3); }
  /* Les sous-parties ne s'ouvrent que pour la partie en cours (js/legal.js pose .lg-replie). */
  .lg-plan.lg-replie li:not(.lg-ici) > .lg-sous { display: none; }
  .lg-docs { margin: var(--sp-6) 0 0; padding: var(--sp-4) 0 0 var(--sp-4); border-top: 0; border-left: 1px solid var(--line); }
  .lg-docs-titre { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
  .lg-docs li a { min-height: 0; padding: 6px 0; border-bottom: 0; font-size: var(--fs-sm); }
  .lg-docs li svg { width: 16px; height: 16px; }
}

/* ---------- Le papier : le texte seul ---------- */
@media print {
  .lg-page .topbar, .lg-page .navbar, .lg-page footer, .lg-page .wa-float, .lg-page .lec-haut, .lg-page .lec-filet,
  .lg-page .saut-contenu, .lg-page .iv-bandeau-langue, .lg-page .alerte-bandeau, .lg-cote, .lg-plan, .lg-docs, #supprimer-compte { display: none !important; }
  .lg-mise { display: block; max-width: none; }
  .lg-section { padding: 0; }
  .lg-texte p, .lg-texte li { font-size: var(--fs-md); }
  .lg-texte h2 { break-after: avoid; }
  .conf-resume, .conf-alerte { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-plan > summary svg, .lg-plan a, .lg-docs li a { transition: none; }
}