/* 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 en VERT FONCÉ LISIBLE SUR BLANC (--succes-texte sur
   --surface) ; 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(--surface); color: var(--succes-texte); font-weight: var(--graisse-demi); }

/* 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; }

/* Garde-fou : meme avec .table-scroll (plus bas), la page elle-meme ne doit
   jamais defiler de cote -- seul le cadre d'un tableau large peut defiler. */
body { overflow-x: hidden; }

/* Toute liste de l'application (Articles, réponses -- .grille utilisée en
   <ul>) s'affiche sans puce ni retrait à gauche : sans effet sur les
   <div class="grille"> (étapes de l'accueil), qui n'en ont déjà ni l'une ni
   l'autre par défaut. */
.grille { list-style: none; padding: 0; }

/* 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; }

/* La page ouverte se marque par une pastille --accent-2, pas le remplissage
   --accent plein posé par défaut par design-fondation.css (trop proche du
   bouton principal). */
.nav-lien.actif, .nav-lien[aria-current="page"] { background: var(--accent-2); color: var(--texte); }

/* En-tête de l'accueil : titre, accroche et deux boutons à gauche, l'image
   déjà posée par images.js à droite à partir de 769px (même seuil que
   .zones-depot et .actions-telechargement), sous le texte sur téléphone --
   .entete-accueil-image reçoit l'image en premier enfant (images.js) et la
   fait remplir toute la boîte via des règles !important, nécessaires pour
   l'emporter sur le style posé en ligne par ce script. */
.entete-accueil { align-items: stretch; }
.entete-accueil-texte { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; justify-content: center; }
.entete-accueil-actions { display: flex; flex-wrap: wrap; gap: var(--espace-s); margin-top: var(--espace-l); }
.entete-accueil-image {
  flex: 1 1 280px; min-width: 240px; min-height: 220px;
  position: relative; border-radius: var(--arrondi); overflow: hidden;
}
.entete-accueil-image img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; max-height: none !important;
  object-fit: cover !important; margin: 0 !important; border-radius: var(--arrondi) !important;
}
@media (max-width: 768px) {
  .entete-accueil-image { min-height: 180px; }
}
/* Sous 720px, le bandeau n'impose plus de hauteur minimale : l'image garde
   sa taille naturelle (flux normal), pour ne jamais laisser de vide visible
   sous elle -- au-dela de 720px, elle reste en couverture plein cadre. */
@media (max-width: 720px) {
  .entete-accueil-image { min-height: 0; }
  .entete-accueil-image img {
    position: static !important; inset: auto !important;
    width: 100% !important; height: auto !important;
  }
}

/* Cartes des trois étapes de l'accueil : un numéro en pastille ronde
   (--accent), plutôt que le chiffre mêlé au texte du titre. */
.carte-etape { position: relative; }
.etape-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: var(--espace-s);
  border-radius: var(--arrondi-pastille);
  background: var(--accent); color: var(--sur-accent);
  font-weight: var(--graisse-grasse); font-family: var(--police-titres);
}
.etape-numero .icone { width: 18px; height: 18px; }

/* Titre de la carte « Déposer » : l'icône de dépôt se place à côté du
   titre, jamais à la place du numéro (qui reste 1, 2, 3 comme les deux
   autres cartes -- défaut vu en test réel). */
.etape-titre { display: flex; align-items: center; gap: var(--espace-xs); }

/* Les trois etapes de l'accueil occupent toute la largeur du contenu, en
   trois colonnes egales sur ordinateur (jamais le nombre variable de
   .grille, cense pour des listes de longueur inconnue) -- une seule colonne
   pleine largeur sous 720px, meme seuil que le reste de cette feuille. */
.grille-etapes { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .grille-etapes { grid-template-columns: 1fr; }
}

.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 > div { display: contents; }
.recap-liste dt { color: var(--texte-doux); font-weight: var(--graisse-demi); }
.recap-liste dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 400px) {
  .recap-liste { grid-template-columns: 1fr; }
  .recap-liste dd { margin-bottom: var(--espace-xs); }
}

/* 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, #barre-avancement-question, #barre-avancement-amelioration {
  height: 12px; border-radius: var(--arrondi-pastille); margin: var(--espace-s) 0;
}
/* Tant que l'avancement reste a 0, app.js retire l'attribut value : la
   barre devient indeterminee (animee par le navigateur), signe visible que
   la redaction n'a pas encore commence a produire du texte, plutot qu'une
   barre figee a 0. */

/* Rôle d'un fichier déposé, en pastille sur sa tuile, chacune avec son
   propre fond plein (jamais de rouge, jamais transparent) : rapport =
   --accent, modèle = --accent-2, données = --texte (un fond foncé neutre,
   déjà dans la palette tirée, jamais une troisième couleur ajoutée) --
   données restait sans aucun remplissage (juste du texte sur fond blanc,
   seule bordée), contrairement aux deux autres pastilles pleines (défaut vu
   en test réel). */
.tuile-fichier-type-rapport { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.tuile-fichier-type-modele { background: var(--accent-2); color: var(--texte); border-color: var(--accent-2); }
.tuile-fichier-type-donnees { background: var(--texte); color: var(--sur-accent); border-color: var(--texte); }

/* Nom de fichier d'une tuile : toujours sur une seule ligne, coupé par
   « … » à la fin s'il est trop long pour la tuile -- le nom complet reste
   lisible via l'infobulle (title) posée par app.js. */
.tuile-fichier-nom {
  display: block; width: 100%; max-width: 100%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  word-break: normal;
}

/* 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; }

/* Indice posé au-dessus d'un tableau quand il dépasse son cadre .table-scroll
   (voir marquerTableauxDefilants dans app.js) -- jamais affiché quand le
   tableau tient déjà dans son cadre. */
.indice-defilement-tableau { margin: 0 0 var(--espace-xs); color: var(--texte-doux); font-size: var(--taille-petite); }

/* Bandeau en haut de l'article quand il est redige dans une autre langue
   que celle de l'interface (ex. "Cet article est redige en anglais.") :
   fond --accent-2 plein, texte de taille normale, une icone info -- jamais
   la couleur de reussite (--succes-texte) 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-s);
  margin: 0 0 var(--espace-m); padding: var(--espace-m);
  background: var(--accent-2);
  border-radius: var(--arrondi); color: var(--texte);
}

/* 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); }
}

/* Sous 720px : plus de bouton « Menu » qui cache les pages -- les cinq
   pages restent toujours visibles, en une rangee de cinq onglets de largeur
   egale sous le nom de l'outil (icone au-dessus, libelle en dessous),
   jamais un defilement horizontal (grille a fractions, qui tient toujours
   dans la largeur disponible). On force .nav-liens a rester affiche meme
   quand design-fondation.js a pose "menu-js" sur <html> (ce script le
   cache alors tant que .nav-haut ne porte pas sa classe "ouvert", posee par
   un bouton Menu qui n'existe plus ici). */
@media (max-width: 720px) {
  .bouton-menu { display: none !important; }
  html.menu-js .nav-haut .nav-liens,
  html.menu-js .nav-gauche .nav-liens,
  .nav-liens {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
  }
  .nav-liens { flex: 1 1 100%; width: 100%; gap: 0; }
  .nav-liens > li { min-width: 0; list-style: none; }
  .nav-lien {
    width: 100%; min-height: 56px;
    flex-direction: column; justify-content: center;
    gap: var(--espace-xs); padding: var(--espace-xs) 2px;
    border-radius: var(--arrondi); text-align: center;
  }
  .nav-lien .icone { margin: 0 auto; }
  /* Un libellé d'onglet ne se coupe jamais au milieu d'un mot (« Documen-ts »,
     « Discussio-n » vus en test réel à 390px) : une seule ligne, sans
     césure -- jamais overflow-wrap:anywhere ni hyphens, qui coupent le mot
     pour tenir dans la largeur de l'onglet. */
  .nav-lien span {
    display: block; font-size: 14px; line-height: 1.15;
    white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: none;
  }
}
/* Sous 400px (cinq onglets dans une largeur encore plus étroite), le
   libellé reste sur une seule ligne mais en plus petit, plutôt que coupé. */
@media (max-width: 400px) {
  .nav-lien span { font-size: 12px; }
}

/* 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); }