/* Plume d'Étude -- ce fichier ne pose que ce qui est propre à cet outil :
   aucune couleur ni espacement en dur, tout vient des variables de
   design.engendre.css et des classes de design-fondation.css. */

.icone { width: 20px; height: 20px; flex: none; }
.icone-marque { width: 28px; height: 28px; color: var(--accent); }

/* Un message de réussite (« Version enregistrée. », « La version N est
   prête. »...) est VERT (--succes) ; le rouge (.retour.erreur, posé par
   design.engendre.css) ne sert qu'à l'échec -- jamais la couleur par
   défaut du gabarit (--accent-2, violette), qui ne distingue pas réussite
   et échec. */
.retour:not(.erreur) { background: var(--succes); }

/* Garde-fou : .bouton et .pastille-etat (design-fondation.css) posent un
   display sans exclure [hidden], donc un bouton ou une pastille masqués par
   script (bouton.hidden = true) restaient affichés -- défaut vu en test
   réel sur la carte d'achat (bouton « Générer l'article » visible grisé
   au-dessus, pastille réduite à un rond gris vide). Règle générale, posée
   ici car style.css charge après design-fondation.css. */
[hidden] { display: none !important; }

/* Sélecteur de langue (FR/EN) et garde-fou de traduction manquante */
.langues { display: flex; gap: var(--espace-xs); }
.bouton-langue { min-height: 40px; padding: 0 var(--espace-s); }
.bouton-langue[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-2); }

.trad-manquante { outline: 2px dashed var(--danger); outline-offset: 2px; }

#bandeau-trad-manquante {
  margin: 0; padding: var(--espace-s) var(--espace-l);
  background: var(--surface); color: var(--texte);
  border-bottom: 1px solid var(--danger);
  font-weight: var(--graisse-demi);
}

main {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--espace-l);
}

.nav-marque {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-s);
  min-width: 0;
  text-decoration: none;
  color: var(--texte);
  font-family: var(--police-titres);
  font-weight: var(--graisse-grasse);
  font-size: 1.25rem;
}
.nav-marque span { overflow-wrap: anywhere; }

.accroche {
  color: var(--texte-doux);
  font-size: var(--taille-titre-3);
  margin-top: var(--espace-xs);
}

.texte-doux { color: var(--texte-doux); }

/* Tuiles de choix de la revue : on compose .bouton/.bouton-discret, on
   n'invente ni couleur ni padding, seulement une disposition propre à ces
   tuiles. */
.tuiles-choix { display: flex; flex-wrap: wrap; gap: var(--espace-s); }
.tuile-revue {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: 56px;
  height: auto;
  white-space: normal;
}
.tuile-revue[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-2);
}

/* Pastille Bibliographie (Générer) : un bouton qu'on coche/décoche d'un
   clic (aria-pressed), jamais une liste déroulante -- mêmes codes que
   .tuile-revue et .tuile-fichier. */
.pastille-choix[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-2);
}

/* Zone de dépôt du rapport et zone de dépôt du tableau de données : l'une à
   côté de l'autre à partir de 769px (même seuil que .diff-colonnes et
   .actions-telechargement), empilées pleine largeur sur téléphone (dès
   390px) sans jamais déborder -- une seule colonne par défaut suffit, le
   <div class="champ"> et son <input> restant déjà contenus dans leur carte. */
.zones-depot { display: grid; grid-template-columns: 1fr; gap: var(--espace-l); }
.zones-depot .carte { margin-top: 0; }
@media (min-width: 769px) {
  .zones-depot { grid-template-columns: 1fr 1fr; }
}

/* Récapitulatif de la page Générer */
.recap-liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-xs) var(--espace-m);
  margin: 0 0 var(--espace-l);
}
.recap-liste dt { color: var(--texte-doux); font-weight: var(--graisse-demi); }
.recap-liste dd { margin: 0; overflow-wrap: anywhere; }

/* Pastille d'état de la génération */
.pastille-etat {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  min-height: 32px;
  padding: 0 var(--espace-m);
  border-radius: var(--arrondi-pastille);
  font-weight: var(--graisse-demi);
  background: var(--bordure);
  color: var(--texte);
}
.pastille-etat[data-etat="en-cours"] { background: var(--accent); color: var(--sur-accent); }
.pastille-etat[data-etat="fait"] { background: var(--accent-2); color: var(--texte); }
.pastille-etat[data-etat="echec"] { background: var(--surface); color: var(--texte); border: 1px solid var(--danger); }

#barre-avancement { height: 12px; border-radius: var(--arrondi-pastille); margin: var(--espace-s) 0; }

/* Page de lecture d'un article */
.lecture { max-width: 720px; margin: 0 auto; overflow-wrap: anywhere; }
.lecture h1 { font-size: var(--taille-titre-1); }
.lecture table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--espace-m) 0;
}
.lecture th, .lecture td {
  border: 1px solid var(--bordure);
  padding: var(--espace-s);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.lecture th { background: var(--fond); }
.lecture ul, .lecture ol { padding-left: var(--espace-l); margin: 0 0 var(--espace-m); }

/* Un tableau genere par le rapport peut rester plus large que son colonnage
   naturel ne le laisse deviner (beaucoup de colonnes, valeurs chiffrees) :
   meme avec overflow-wrap:anywhere sur les cellules, le tableau poussait la
   page entiere au-dela de l'ecran sur telephone (406px sur un ecran de
   390px, defaut vu en test reel). On l'enveloppe dans sa propre bande
   defilante horizontalement, qui ne depasse jamais la largeur disponible,
   plutot que de laisser le tableau elargir toute la page. */
.table-scroll { max-width: 100%; overflow-x: auto; margin: var(--espace-m) 0; }
.table-scroll table { margin: 0; }

/* Avertissement discret quand l'article est redige dans une autre langue
   que celle de l'interface (ex. "Cet article est redige en anglais.") :
   une simple ligne bordee, jamais la couleur de reussite (--succes) ni
   d'echec (--danger), posee par i18n.js au-dessus du texte de l'article. */
.avertissement-langue {
  display: flex; align-items: center; gap: var(--espace-xs);
  margin: 0 0 var(--espace-m); padding: var(--espace-s) var(--espace-m);
  background: var(--surface); border-left: 4px solid var(--accent-2);
  border-radius: var(--arrondi); color: var(--texte-doux);
}

/* Zone « Modifier le texte » : un traitement de texte, jamais du markdown
   brut -- les titres et le gras y sont de vraies balises (posées par
   l'application), pas du "#" ni du "**" ; un mot ne s'y coupe jamais au
   milieu (overflow-wrap: normal, hyphens: none). */
.edition-wysiwyg {
  min-height: 320px; max-width: 100%; padding: var(--espace-m);
  border: 1px solid var(--bordure); border-radius: var(--arrondi);
  background: var(--fond); color: var(--texte);
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.edition-wysiwyg:focus-visible { border-color: var(--accent); }
.edition-wysiwyg h1 { font-size: var(--taille-titre-1); }
.edition-wysiwyg p { margin: 0 0 var(--espace-m); }
.edition-wysiwyg ul, .edition-wysiwyg ol { padding-left: var(--espace-l); margin: 0 0 var(--espace-m); }
.edition-wysiwyg table { width: 100%; border-collapse: collapse; margin: var(--espace-m) 0; }
.edition-wysiwyg th, .edition-wysiwyg td { border: 1px solid var(--bordure); padding: var(--espace-s); text-align: left; vertical-align: top; }
.edition-wysiwyg th { background: var(--surface); }

/* Tuiles de choix de version sur la page Discussion : même disposition que
   les tuiles de fichiers, sans inventer de couleur. Le libellé en clair
   (« Version N — origine ») est le texte principal, avec sa date vraie
   (lue dans le nom de fichier) dessous -- jamais le nom de fichier
   lui-même, qui ne dit rien à la personne. */
.tuiles-versions {
  list-style: none; margin: var(--espace-m) 0; padding: 0;
  display: grid; gap: var(--espace-s);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.tuile-version {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-xs);
  width: 100%; min-height: 44px; padding: var(--espace-m); text-align: left; cursor: pointer;
  font: inherit; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--arrondi); box-shadow: var(--ombre-legere);
}
.tuile-version:hover, .tuile-version:focus-visible { border-color: var(--accent); }
.tuile-version[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-2); }
.tuile-version-libelle { font-weight: var(--graisse-demi); overflow-wrap: anywhere; }
.tuile-version-date { font-size: var(--taille-petite); }

/* Actions de la page de lecture d'un article (diff, revenir, modifier) */
.actions-article { display: flex; flex-wrap: wrap; gap: var(--espace-s); }

/* Téléchargement (PDF / Word) de la version affichée, sous le texte de
   l'article : un bouton sous l'autre, pleine largeur, sur téléphone (déjà
   ≥44px de haut via .bouton) -- côte à côte à partir de 769px, même seuil
   que .diff-colonnes. */
.actions-telechargement { display: flex; flex-direction: column; gap: var(--espace-s); }
.actions-telechargement .bouton { width: 100%; }

@media (min-width: 769px) {
  .actions-telechargement { flex-direction: row; flex-wrap: wrap; }
  .actions-telechargement .bouton { width: auto; }
}

/* Différence LISIBLE entre deux versions : du texte mis en forme (titres,
   gras, listes, tableaux), jamais de markdown brut -- seules les phrases ou
   blocs qui changent sont distingués (ajout en vert : --succes, retrait
   barré en rouge : --danger, couleur explicitement demandee -- --accent-2
   est violet, pas vert, defaut vu en test reel). Les deux versions sont
   deux colonnes côte à côte sur grand écran, l'une sous l'autre sur
   téléphone. */
.diff-zone { max-width: 960px; margin: 0 auto; overflow-wrap: anywhere; }
.diff-colonnes {
  display: grid; grid-template-columns: 1fr; gap: var(--espace-l);
  margin-top: var(--espace-m);
}
.diff-colonne { min-width: 0; overflow-wrap: anywhere; }
.diff-colonne table, .diff-colonne th, .diff-colonne td { overflow-wrap: anywhere; }
.diff-ajout-texte { background: var(--succes); }
.diff-retrait-texte { color: var(--danger); text-decoration-color: var(--danger); }
.diff-ajout-bloc { background: var(--succes); padding: var(--espace-s); border-radius: var(--arrondi); }
.diff-retrait-bloc {
  padding: var(--espace-s); border-radius: var(--arrondi);
  border: 1px dashed var(--danger); color: var(--texte-doux); text-decoration: line-through;
}

@media (min-width: 769px) {
  .diff-colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  main { padding: var(--espace-m); }
}

/* Un bouton flottant (ex. « Modifier mon site », posé par la fondation en
   bas à gauche) ne doit jamais chevaucher la dernière carte d'une page :
   on lui laisse toujours de la place en bas, plutôt que d'ajuster chaque
   page une par une. */
main { padding-bottom: calc(var(--espace-xxl) + 64px); }