/* WORDS WITHIN REACH : LA COUCHE PROJET, ET RIEN DE PLUS.
   La feuille du systeme est odersa-systeme.css, recopiee du skill odersa-design
   sans une retouche. Ce fichier ne redefinit AUCUN jeton, n'introduit AUCUNE
   couleur, AUCUNE police, AUCUN arrondi : il ne fait que composer avec ce que le
   systeme fournit. Une couleur ecrite en dur ici est un refus.

   Trois sections, trois proprietaires :
     A. socle du projet          tenu par le constructeur, ne se modifie pas
     B. composants de l'outil    prefixe .lv- , tenus par la phase interne
     C. compositions de page     chaque regle commence par sa classe .p-<id>

   Regles de fer : proprietes logiques uniquement (inline / block, jamais
   left / right), cible tactile de 44 px, aucun !important dans la section C,
   aucun style en ligne dans les pages.                                        */

/* ══════════════════ A. SOCLE DU PROJET ══════════════════ */

/* Les six langues preparees et pas encore servies : visibles, inertes, dites.
   Un lien qui rendrait 404 serait un mensonge ; un rail vide cacherait le plan. */
.lang__attente {
  color: var(--ink-mid);
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: 0.06em;
  padding: 0.7em 0.45em;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Reglages d'affichage : meme mecanique que la banniere, details + summary,
   donc ouvrable sans JavaScript et sans un seul z-index. */
.reglages { background: var(--bg-alt); border-block-end: 1px solid var(--rule); }
.reglages__tete {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font: 600 var(--t-s)/1.2 var(--sans);
  color: var(--ink-soft);
}
.reglages__tete::-webkit-details-marker { display: none; }
.reglages__tete:hover { color: var(--accent); }
.reglages__tete:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }
.reglages__tete svg { flex: none; color: var(--accent); }
.reglages__tete::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms var(--easing);
}
.reglages[open] .reglages__tete::after { transform: rotate(225deg) translateY(-2px); }
.reglages__corps { border-block-start: 1px solid var(--rule); }
.reglages__controles {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.reglages__groupe { border: 0; padding: 0; margin: 0; }
.reglages__groupe legend {
  padding: 0;
  font: 600 var(--t-xs)/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-block-end: var(--s-2);
}
.reglages__garde { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); }
.reglages__sansjs { display: none; margin: var(--s-4) 0; color: var(--ink-soft); }
.no-js .reglages__sansjs { display: block; }
.no-js .reglages__controles { display: none; }

/* Controle segmente : les jetons --seg-on-* du systeme existent pour lui. */
.seg { display: flex; flex-wrap: wrap; gap: 0; }
.seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6em 1em;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink-soft);
  font: 600 var(--t-s)/1.2 var(--sans);
  cursor: pointer;
  transition: background-color 160ms var(--easing), color 160ms var(--easing);
}
.seg__btn + .seg__btn { border-inline-start: 0; }
.seg__btn:hover { color: var(--accent); border-color: var(--accent); }
.seg__btn[aria-pressed="true"] {
  background: var(--seg-on-bg);
  color: var(--seg-on-ink);
  border-color: var(--seg-on-bg);
}

/* Cadre d'outil, releve du gabarit « page outil » du skill. */
.cadre-outil {
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
  padding: var(--s-6);
  background: var(--bg);
}
.zone-resultat { margin-block-start: var(--s-6); min-height: 3rem; }

/* Imagerie du sujet : le gabarit du skill la montre en style en ligne, qui est
   un repere de lecture. Elle vit ici, sous un nom. */
.figure-sujet { margin: 0; border: 1px solid var(--rule); background: var(--bg); }
.figure-sujet img { display: block; inline-size: 100%; }
.figure-sujet figcaption {
  padding: var(--s-3);
  font-size: var(--t-s);
  color: var(--ink-mid);
  border-block-start: 1px solid var(--rule);
}
.figure-article { margin: 0 0 var(--s-8); }

/* Chiffres du bloc de preuve, meme raison. */
.chiffre__valeur {
  font: 600 var(--t-2xl)/1 var(--serif);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.chiffre__quoi { font-size: var(--t-s); margin: var(--s-2) 0 0; }
.badges--espace { margin-block-start: var(--s-8); }

/* Pastille d'accessibilite, dans le pied sombre. Elle dit le referentiel VISE et
   mene a la declaration du site mere. Ses teintes sont celles que le pied sert
   deja : rien de neuf, et lisible sur noir. */
.pastille-a11y {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
  padding: 0.45em 0.8em;
  min-height: 44px;
  border: 1px solid var(--dark-line);
  border-inline-start: 3px solid var(--accent-on-dark);
  font: 600 var(--t-xs)/1.3 var(--sans);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.pastille-a11y svg { flex: none; color: var(--accent-on-dark); }
.pastille-a11y:hover { border-color: var(--accent-on-dark); }

/* ══════════════════ B. COMPOSANTS DE L'OUTIL (.lv-) ══════════════════
   Tenus par la phase interne. Un composant nouveau se declare ICI, avec le
   prefixe .lv- , et jamais dans une page. Rappel : une case de planche n'est
   JAMAIS un .btn, parce que la feuille du systeme masque .btn a l'impression,
   et une planche s'imprime.

   AUCUNE COULEUR N'EST ECRITE ICI, aucun jeton n'est cree. Le systeme ODERSA
   n'a qu'un accent : la classe grammaticale d'une case ne peut donc PAS se dire
   par la couleur, et c'est tant mieux, puisqu'une planche s'imprime en noir sur
   du papier blanc. Elle se dit par la FORME du filet : filet epais en bas pour
   une action, en haut pour une personne, tirete pour une qualite, double pour
   une question, epais au bord d'attaque pour un message tout fait. Ce marquage
   survit a la photocopie, au daltonisme et au contraste renforce.             */

/* ---- La grille d'une planche ----
   Trois largeurs, 3, 4 et 6 colonnes, et ce sont les trois diviseurs de 12
   qu'on offre : la bande noyau de douze cases finit donc TOUJOURS exactement
   sur une fin de ligne, dans toutes les tailles. Une bande qui finirait au
   milieu d'une ligne decalerait tout le reste de la planche d'un cran a chaque
   changement de largeur, et la place d'une case ne serait plus previsible.
   Le reglage explicite gagne partout : sa specificite bat celle des requetes
   de media, quel que soit l'ordre des regles.                                */
.lv-planche {
  --lv-colonnes: 3;
  display: grid;
  grid-template-columns: repeat(var(--lv-colonnes), minmax(0, 1fr));
  gap: var(--s-2);
  margin-block: var(--s-6);
}
@media (min-width: 30rem) { .lv-planche { --lv-colonnes: 4; } }
@media (min-width: 62rem) { .lv-planche { --lv-colonnes: 6; } }
:root[data-grille="3"] .lv-planche { --lv-colonnes: 3; }
:root[data-grille="4"] .lv-planche { --lv-colonnes: 4; }
:root[data-grille="6"] .lv-planche { --lv-colonnes: 6; }

/* ---- Une case ----
   La cible tactile est GENEREUSE, et c'est le produit. Le critere 2.5.5 du
   WCAG 2.2, niveau AAA, demande 44 px sur 44 px
   (https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) :
   96 px au repos, 136 px en grande taille, 176 px en tres grande. Ce qui marche
   pour une main qui tremble marche pour tout le monde.
   Ce n'est PAS un bouton du systeme : pas de .btn, donc pas de disparition a
   l'impression.                                                              */
.lv-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-inline-size: 0;
  min-block-size: 6rem;
  padding: var(--s-2);
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  font: 600 var(--t-s)/1.2 var(--sans);
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}
.lv-case__img {
  display: block;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  flex: none;
}
.lv-case__mot { display: block; }
.lv-case[role="button"] { cursor: pointer; }
.lv-case[role="button"]:hover { border-color: var(--accent); background: var(--accent-bg); }
.lv-case:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }

:root[data-taille="grande"] .lv-case { min-block-size: 8.5rem; padding: var(--s-3); font-size: var(--t-base); }
:root[data-taille="grande"] .lv-case__img { inline-size: 4.75rem; block-size: 4.75rem; }
:root[data-taille="enorme"] .lv-case { min-block-size: 11rem; padding: var(--s-4); font-size: var(--t-m); }
:root[data-taille="enorme"] .lv-case__img { inline-size: 6.25rem; block-size: 6.25rem; }

/* Etiquettes masquees : l'image seule, mais le mot RESTE dans la page pour les
   lecteurs d'ecran et pour l'impression. On le retire de l'oeil, pas du sens. */
:root[data-etiquettes="non"] .lv-case__mot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La bande noyau se voit : c'est la partie de la planche qui ne bouge jamais. */
.lv-case[data-noyau="1"] { background: var(--bg-alt); }
.lv-case[data-noyau="1"][role="button"]:hover { background: var(--accent-bg); }

/* La classe grammaticale, par la forme du filet et jamais par la couleur. */
.lv-case[data-classe="verbe"] { border-block-end-width: 4px; }
.lv-case[data-classe="personne"] { border-block-start-width: 4px; }
.lv-case[data-classe="qualite"] { border-style: dashed; }
.lv-case[data-classe="question"] { border-style: double; border-width: 3px; }
.lv-case[data-classe="social"] { border-block-end-style: dotted; border-block-end-width: 4px; }
/* Un message tout fait se prononce SEUL : son filet d'attaque le dit. */
.lv-case[data-phrase="1"] { border-inline-start-width: 5px; }

/* ---- Le balayage ----
   La case parcourue est marquee par un anneau EPAIS, pas par une teinte : la
   forme se voit sur un ecran delave, en plein soleil et en contraste renforce.
   Le mouvement est nul : rien ne clignote, rien ne glisse.                    */
.lv-case.est-balayee { outline: 5px solid var(--accent); outline-offset: -5px; }
.lv-case.est-dans-ligne { outline: 3px solid var(--ink-mid); outline-offset: -3px; }
:root[data-balayage="en-cours"] .lv-planche { border: 2px solid var(--accent); padding: var(--s-2); }

/* ---- La barre de phrase ---- */
.no-js .lv-barre,
.no-js .lv-reglages { display: none; }
.lv-barre {
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
  background: var(--bg-alt);
  padding: var(--s-4);
  margin-block: var(--s-6);
}
.lv-barre__phrase {
  margin: 0 0 var(--s-4);
  min-block-size: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font: 500 var(--t-l)/1.25 var(--serif);
  color: var(--ink);
}
.lv-barre__phrase[data-etat="vide"] { font: 400 var(--t-base)/1.5 var(--sans); color: var(--ink-mid); }
.lv-phrase__mot {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px solid var(--rule);
  background: var(--bg);
}
.lv-etat { margin: var(--s-3) 0 0; color: var(--ink-soft); min-block-size: 1.5rem; }

/* ---- Les reglages de planche : details/summary, donc sans z-index ---- */
.lv-reglages { border: 1px solid var(--rule); background: var(--bg); margin-block: var(--s-6); }
.lv-reglages__tete {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  list-style: none;
  cursor: pointer;
  font: 600 var(--t-s)/1.2 var(--sans);
  color: var(--ink-soft);
}
.lv-reglages__tete::-webkit-details-marker { display: none; }
.lv-reglages__tete:hover { color: var(--accent); }
.lv-reglages__tete:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }
.lv-reglages__corps {
  border-block-start: 1px solid var(--rule);
  padding: var(--s-5) var(--s-4);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ---- Licence d'une planche, module en partage a l'identique ---- */
.lv-licence { margin-block: var(--s-6); }
.lv-licence ul { margin-block: var(--s-2); }
.lv-catalogue__titre { margin-block-start: var(--s-12); }
.lv-apres { margin-block: var(--s-8); }

/* ---- L'atelier de composition ---- */
.lv-planche--atelier { --lv-colonnes: 2; }
@media (min-width: 40rem) { .lv-planche--atelier { --lv-colonnes: 3; } }
.lv-atelier__case { display: flex; flex-direction: column; gap: var(--s-2); }
.lv-atelier__outils { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.lv-mini { min-height: 44px; padding: 0.4em 0.7em; font-size: var(--t-xs); }
.lv-planche--choix { max-block-size: 34rem; overflow-y: auto; border: 1px solid var(--rule); padding: var(--s-2); }
.lv-mes-planches { list-style: none; padding: 0; margin: 0; }
.lv-mes-planches li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
}
.lv-mes-planches__nom { font-weight: 600; }

/* ---- L'IMPRESSION, ET C'EST LA MOITIE DU SERVICE ----
   Il y a des jours sans ecran et des lieux sans appareil. Ce que le papier
   garde : le titre, la grille, les etiquettes, la licence. Ce qu'il perd : la
   barre de phrase vide, les reglages, la navigation. La feuille du systeme
   masque deja .btn et .toolbar : une case n'en est pas un, elle reste.
   Les filets passent en currentColor, qui vaut le noir en impression : aucune
   couleur n'est ecrite ici, et un filet gris clair sortirait invisible.       */
@media print {
  .lv-reglages, .lv-apres, .lv-etat, .lv-planche--choix, .lv-atelier__outils { display: none; }
  .lv-barre { border: 0; background: none; padding: 0; }
  .lv-barre__phrase[data-etat="vide"] { display: none; }
  .lv-barre__phrase { font-size: 14pt; }
  .lv-phrase__mot { border-color: currentColor; }
  .lv-planche { gap: 2mm; margin-block: 4mm; }
  .lv-case {
    border: 0.6pt solid currentColor;
    background: none;
    min-block-size: 0;
    padding: 1.5mm;
    break-inside: avoid;
    font-size: 9pt;
  }
  .lv-case[data-noyau="1"] { border-width: 1.4pt; }
  .lv-case.est-balayee, .lv-case.est-dans-ligne { outline: 0; }
  .lv-case__img { inline-size: 20mm; block-size: 20mm; }
  :root[data-taille="grande"] .lv-case__img,
  :root[data-taille="enorme"] .lv-case__img { inline-size: 26mm; block-size: 26mm; }
  /* Le paysage ne se force pas depuis une feuille de style : on donne plus de
     colonnes, et la page dit de choisir le paysage dans la fenetre
     d'impression. Promettre une orientation qu'on ne tient pas serait mentir. */
  :root[data-format="paysage"] .lv-planche { --lv-colonnes: 6; }
  .lv-licence { border: 0; padding: 0; font-size: 8pt; }
}

/* ══════════════════ C. COMPOSITIONS DE PAGE (.p-<id>) ══════════════════
   Une regle par page, prefixee par sa page. Jamais de !important.            */

/* ===== COMPOSITIONS DE PAGE, ASSEMBLEES PAR build/etapes/45-compositions.js ===== */
/* --- impact --- */
/* IMPACT ET CHIFFRES : le tableau des chiffres de corpus aligne ses nombres
   comme des chiffres qu'on compare, pas comme du texte courant. */
.p-impact table th[scope="row"] { font-variant-numeric: tabular-nums; }

/* --- imprimer --- */
/* IMPRIMER : LE CHOIX D'UNE PLANCHE ET SES REGLAGES NE SONT PAS DU PAPIER.
   Cette page pose le select #lv-choix-impression et quatre fieldsets de
   reglages (grille, taille, etiquettes, format) directement dans
   .cadre-outil, hors de tout <details> : la feuille du systeme masque deja
   .btn et .toolbar a l'impression, et la section B de projet.css masque deja
   .lv-etat, .lv-reglages, .lv-apres, .lv-planche--choix et
   .lv-atelier__outils. Aucune de ces regles ne couvre .champ ou
   .reglages__controles : sans la regle ci-dessous, imprimer depuis cette page
   sortirait la liste deroulante et les groupes de reglages au-dessus de la
   planche elle-meme. */
@media print {
  .p-imprimer .champ {
    display: none;
  }
  .p-imprimer .reglages__controles {
    display: none;
  }
}