/* ══════════════════════════════════════════════════════════════════════════
   Rédaction — Adapt Law · feuille de style unique

   TOUTES les couleurs, polices et tailles de l'interface sont réglées dans
   le bloc « :root » ci-dessous. Edjona les ajustera sur le rendu réel du
   site : il n'y a aucune couleur écrite ailleurs dans ce fichier, donc
   changer une valeur ici change l'interface entière, sans rien chercher.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Les quatre couleurs de la marque (reprises du site adaptlaw.be). */
  --navy: #0b1440;
  --gold: #c8a97a;
  --bg: #f4f4f6;
  --ink: #1a1a2e;
  --font: Arial, Helvetica, sans-serif;

  /* Déclinaisons : elles dérivent des quatre précédentes. */
  --blanc: #ffffff;
  --or-fonce: #b2925f;          /* survol du bouton doré */
  --or-clair: #f0e5d4;          /* fonds très légers */
  --trait: #d9d9e0;             /* filets et bordures */
  --trait-fort: #b9b9c6;
  --texte-doux: #5a5a72;        /* phrases d'explication */
  --texte-note: #77778c;        /* notes de bas de bloc */
  --fond-carte: #ffffff;
  --fond-doux: #eeeef3;         /* zones neutres, hachures */

  /* États. */
  --vert-fond: #e4f1e6;
  --vert-texte: #2c6b39;
  --lavande-fond: #e8e8f2;
  --lavande-texte: #454569;
  --rouge: #b3261e;
  --rouge-fond: #fdeceb;
  --rouge-trait: #e6a9a4;
  --focus: #0b1440;             /* liseré de focus clavier */

  /* Rythme. */
  --rayon: 3px;
  --espace: 16px;
  --largeur-page: 1120px;
  --largeur-infos: 300px;
  --ombre-carte: 0 1px 3px rgba(11, 20, 64, .08);
  --ombre-barre: 0 -1px 6px rgba(11, 20, 64, .10);

  /* Tailles de texte. */
  --t-petit: 13px;
  --t-normal: 15px;
  --t-grand: 18px;
  --t-titre: 30px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Un élément masqué le reste, même quand une classe lui donne un « display ».
   C'est ainsi que l'interface n'affiche qu'un écran à la fois. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-normal)/1.55 var(--font);
}

main { flex: 1 0 auto; display: flex; flex-direction: column; }

h1 { font-size: var(--t-titre); line-height: 1.2; color: var(--navy); font-weight: bold; }
h2 { font-size: var(--t-grand); color: var(--navy); }

a { color: var(--navy); }

/* Un seul modèle de focus clavier pour toute l'interface. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

.saut-au-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--blanc); padding: 10px 16px;
}
.saut-au-contenu:focus { left: 0; }

.lecteur-ecran-seul {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Bascule desktop / mobile pour les libellés : un même texte, deux longueurs.
   Le « !important » évite qu'une autre règle ne rallume par accident la
   version qui ne doit pas s'afficher. */
.sur-etroit { display: none !important; }

/* ── Bandeau du haut ────────────────────────────────────────────────────── */
.bandeau { background: var(--navy); color: var(--blanc); flex: 0 0 auto; }

.bandeau-dedans {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: 18px var(--espace);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.marque { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--blanc); }
.marque-nom { font-weight: bold; font-size: var(--t-grand); letter-spacing: .06em; }
.marque-outil { font-size: var(--t-normal); opacity: .85; }

.bandeau-droite { display: flex; align-items: center; gap: 16px; font-size: var(--t-normal); }
.bandeau-site, .bandeau-identite { opacity: .9; }

/* ── Écrans ─────────────────────────────────────────────────────────────── */
.ecran { flex: 1 0 auto; display: flex; flex-direction: column; }

.colonne {
  width: 100%; max-width: var(--largeur-page);
  margin: 0 auto; padding: 36px var(--espace) 48px;
  flex: 1 0 auto;
}

.ecran-centre { align-items: center; justify-content: center; padding: 48px var(--espace); }

.sur-titre {
  color: var(--gold); font-size: var(--t-petit);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px;
}

.texte-doux { color: var(--texte-doux); }
.texte-note { color: var(--texte-note); font-size: var(--t-petit); margin-top: 8px; }

/* ── Boutons et liens ───────────────────────────────────────────────────── */
.bouton {
  display: inline-block; text-align: center; text-decoration: none;
  font: bold var(--t-normal)/1.2 var(--font);
  padding: 13px 22px; border: 1px solid transparent; border-radius: var(--rayon);
  cursor: pointer;
}
.bouton-or { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.bouton-or:hover { background: var(--or-fonce); border-color: var(--or-fonce); }
.bouton-clair { background: var(--blanc); border-color: var(--navy); color: var(--navy); }
.bouton-clair:hover { background: var(--fond-doux); }
.bouton-large { width: 100%; }

.bouton[disabled], .bouton[aria-disabled="true"] {
  background: var(--trait); border-color: var(--trait);
  color: var(--texte-note); cursor: not-allowed;
}

.lien-bouton {
  background: none; border: none; padding: 0;
  font: var(--t-normal)/1.4 var(--font); color: var(--navy);
  text-decoration: underline; cursor: pointer;
}
.lien-bouton:hover { color: var(--or-fonce); }

.lien-simple { color: var(--navy); }
.lien-retour { color: var(--navy); text-decoration: underline; font-size: var(--t-normal); }
.lien-retour-clair { color: var(--blanc); }

/* ── Champs ─────────────────────────────────────────────────────────────── */
.etiquette { display: block; font-size: var(--t-petit); color: var(--texte-doux); margin: 18px 0 6px; }
.etiquette:first-child { margin-top: 0; }

.champ {
  width: 100%; background: var(--blanc); color: var(--ink);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  padding: 11px 12px; font: var(--t-normal)/1.45 var(--font);
}
.champ::placeholder { color: var(--texte-note); }
.champ-zone { resize: vertical; min-height: 86px; }
.champ-titre { font-size: 22px; font-weight: bold; color: var(--navy); padding: 16px 14px; }

.champ[aria-invalid="true"] { border-color: var(--rouge); }

.message-champ { color: var(--rouge); font-size: var(--t-petit); margin-top: 6px; }
.message-succes { color: var(--vert-texte); font-size: var(--t-normal); margin-top: 16px; }
.message-vide { color: var(--texte-doux); padding: 24px 0; }

.ligne-aide { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ligne-aide .texte-note { margin-top: 8px; }
.compteur { color: var(--texte-note); font-size: var(--t-petit); white-space: nowrap; }
.compteur.trop-long { color: var(--rouge); font-weight: bold; }

/* ── Écran 0 · Connexion ────────────────────────────────────────────────── */
.carte-connexion {
  width: 100%; max-width: 460px;
  background: var(--fond-carte); padding: 36px 34px 34px;
  box-shadow: var(--ombre-carte);
}
.carte-connexion h1 { margin-bottom: 12px; }
.carte-connexion .etiquette { margin-top: 24px; }
.carte-connexion .bouton { margin-top: 20px; }
.carte-large { max-width: 560px; text-align: center; }
.carte-large .bouton { margin-top: 24px; }
.carte-large p + p { margin-top: 14px; }

.encadre-note {
  border: 1px solid var(--gold); padding: 14px 18px; margin-top: 22px;
  color: var(--navy); font-size: var(--t-normal);
}

/* ── Écran 1 · Mes articles ─────────────────────────────────────────────── */
.titre-et-action {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.titre-et-action .texte-doux { margin-top: 8px; font-size: var(--t-petit); }

.cadre-tableau { background: var(--fond-carte); box-shadow: var(--ombre-carte); }

.tableau-articles { width: 100%; border-collapse: collapse; }
.tableau-articles th {
  text-align: left; font-size: var(--t-petit); font-weight: normal;
  color: var(--texte-note); letter-spacing: .08em;
  padding: 14px 18px; border-bottom: 1px solid var(--trait);
}
.tableau-articles td { padding: 16px 18px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau-articles tr:last-child td { border-bottom: none; }
.tableau-articles .cellule-titre { font-weight: bold; color: var(--navy); max-width: 460px; }
.tableau-articles .cellule-date, .tableau-articles .cellule-auteur { color: var(--texte-doux); font-size: var(--t-petit); }
.tableau-articles .cellule-action { text-align: right; white-space: nowrap; }

.badge {
  display: inline-block; font-size: var(--t-petit); padding: 4px 11px; border-radius: 11px;
  background: var(--lavande-fond); color: var(--lavande-texte); white-space: nowrap;
}
.badge-en-ligne { background: var(--vert-fond); color: var(--vert-texte); }

/* Le tableau sert au grand écran, les cartes au téléphone : la règle est ici,
   pas dans la page, pour que les deux ne puissent jamais s'afficher ensemble. */
.liste-cartes { list-style: none; display: none; flex-direction: column; gap: 12px; }
.carte-article {
  background: var(--fond-carte); box-shadow: var(--ombre-carte);
  padding: 16px 18px; display: block; text-decoration: none; color: inherit;
}
.carte-article .badge { margin-bottom: 10px; }
.carte-article-titre { font-weight: bold; color: var(--navy); display: block; margin-bottom: 8px; }
.carte-article-meta { color: var(--texte-doux); font-size: var(--t-petit); }

/* ── Écran 2 · Éditeur ──────────────────────────────────────────────────── */
.ecran-editeur .colonne { padding-bottom: 28px; }

.ligne-retour { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; }

.grille-editeur { display: grid; grid-template-columns: 1fr var(--largeur-infos); gap: 28px; align-items: start; }

.colonne-texte { min-width: 0; }

.bloc-texte { background: var(--fond-carte); border: 1px solid var(--trait-fort); border-radius: var(--rayon); }

.barre-outils {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--trait); padding: 6px 8px;
}
.outil {
  background: none; border: 1px solid transparent; border-radius: var(--rayon);
  padding: 7px 11px; font: var(--t-petit)/1.2 var(--font); color: var(--navy); cursor: pointer;
}
.outil:hover { background: var(--fond-doux); }
.outil[aria-pressed="true"] { background: var(--navy); color: var(--blanc); }
.outil-gras { font-weight: bold; }
.outil-italique { font-style: italic; }

.zone-texte {
  min-height: 420px; padding: 20px 22px; color: var(--ink);
  font-size: var(--t-normal); line-height: 1.7; overflow-wrap: break-word;
}
.zone-texte:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.zone-texte p { margin-bottom: 16px; }
.zone-texte h2 {
  font-size: var(--t-petit); letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); margin: 24px 0 12px;
}
.zone-texte h3 { font-size: var(--t-normal); font-weight: 600; color: var(--navy); margin: 20px 0 10px; }
.zone-texte ul, .zone-texte ol { margin: 0 0 16px 22px; }
.zone-texte li { margin-bottom: 6px; }
.zone-texte a { color: var(--navy); }
.zone-texte figure { margin: 20px 0; }
.zone-texte img { max-width: 100%; height: auto; display: block; }
.zone-texte:empty::before { content: attr(data-vide); color: var(--texte-note); }

.message-nettoyage {
  margin-top: 12px; padding: 12px 14px; font-size: var(--t-petit);
  background: var(--or-clair); color: var(--ink); border-left: 3px solid var(--gold);
}

/* Colonne « Informations ». */
.colonne-infos {
  background: var(--fond-carte); box-shadow: var(--ombre-carte);
  padding: 20px 20px 24px; border-top: 2px solid var(--gold);
}

.zone-image {
  background: var(--fond-doux); border: 1px dashed var(--trait-fort); border-radius: var(--rayon);
  padding: 18px 14px; text-align: center;
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(11, 20, 64, .04) 8px 16px);
}
.zone-image.en-erreur { border-color: var(--rouge); border-style: dashed; }
.zone-image-vide { font-family: ui-monospace, monospace; font-size: var(--t-petit); color: var(--texte-note); margin-bottom: 8px; }
.zone-image-nom { font-family: ui-monospace, monospace; font-size: var(--t-petit); color: var(--texte-doux); margin-bottom: 8px; }
.apercu-image { max-width: 100%; height: auto; display: block; margin: 0 auto 10px; }

.bloc-cadrage { border: none; margin-top: 18px; }
.bloc-cadrage .etiquette { margin: 0 0 6px; }

.segments { display: grid; grid-template-columns: repeat(3, 1fr); }
.segments input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segments label {
  text-align: center; padding: 10px 6px; cursor: pointer;
  border: 1px solid var(--trait-fort); border-left-width: 0;
  background: var(--blanc); color: var(--navy); font-size: var(--t-petit);
}
.segments label:first-of-type { border-left-width: 1px; border-radius: var(--rayon) 0 0 var(--rayon); }
.segments label:last-of-type { border-radius: 0 var(--rayon) var(--rayon) 0; }
.segments input:checked + label { background: var(--navy); color: var(--blanc); font-weight: bold; }
.segments input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* État A : les erreurs du moteur, groupées en haut de l'éditeur. */
.bloc-erreurs {
  background: var(--rouge-fond); border: 1px solid var(--rouge-trait);
  padding: 16px 18px; margin-bottom: 24px;
}
/* Le bloc reçoit le focus pour être lu à voix haute, sans afficher de liseré :
   le clavier, lui, garde le sien grâce à :focus-visible. */
.bloc-erreurs:focus { outline: none; }
.bloc-erreurs-titre { color: var(--rouge); font-weight: bold; margin-bottom: 6px; }
.bloc-erreurs-texte { color: var(--rouge); font-size: var(--t-petit); }
.bloc-erreurs-liste { margin: 10px 0 0 20px; color: var(--rouge); font-size: var(--t-petit); }
.bloc-erreurs-liste li { margin-bottom: 4px; }

/* ── Barre d'actions (bas de l'éditeur et de l'aperçu) ──────────────────── */
.barre-actions {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--blanc); border-top: 1px solid var(--trait); box-shadow: var(--ombre-barre);
  padding: 14px var(--espace);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.barre-actions > :first-child { max-width: var(--largeur-page); }
.barre-actions-boutons { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.etat-enregistrement { color: var(--texte-doux); font-size: var(--t-petit); }

/* ── Écran 3 · Aperçu ───────────────────────────────────────────────────── */
.ecran-apercu { background: var(--fond-doux); }

.bandeau-apercu { background: var(--navy); color: var(--blanc); }
.bandeau-apercu-dedans {
  max-width: var(--largeur-page); margin: 0 auto; padding: 14px var(--espace);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.badge-apercu {
  background: var(--gold); color: var(--navy); font-weight: bold;
  font-size: var(--t-petit); letter-spacing: .1em; padding: 4px 10px;
}
.bandeau-apercu-texte { font-size: var(--t-petit); flex: 1 1 260px; }
.bandeau-apercu-dedans .lien-retour { margin-left: auto; }

.scene-apercu {
  flex: 1 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 80px var(--espace); text-align: center;
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(11, 20, 64, .04) 10px 20px);
}
.scene-apercu-titre { font-family: ui-monospace, monospace; color: var(--texte-doux); font-size: var(--t-normal); }
.scene-apercu-note { font-family: ui-monospace, monospace; color: var(--texte-note); font-size: var(--t-petit); }
.scene-apercu .bouton { margin-top: 18px; }

.message-flottant {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  background: var(--navy); color: var(--blanc); padding: 10px 18px;
  font-size: var(--t-petit); border-radius: var(--rayon); z-index: 40;
}

/* ── Pied de page ───────────────────────────────────────────────────────── */
.pied { background: var(--navy); color: var(--blanc); flex: 0 0 auto; }
.pied-dedans {
  max-width: var(--largeur-page); margin: 0 auto; padding: 16px var(--espace);
  display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-petit); opacity: .9;
}

/* ── Boîte de dialogue ──────────────────────────────────────────────────── */
.voile {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(11, 20, 64, .55);
  display: flex; align-items: center; justify-content: center; padding: var(--espace);
}
.dialogue { background: var(--fond-carte); padding: 26px 26px 22px; width: 100%; max-width: 440px; box-shadow: var(--ombre-carte); }
.dialogue-titre { margin-bottom: 16px; }
.dialogue-corps .etiquette:first-child { margin-top: 0; }
.dialogue-boutons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }

/* ── Alerte générale ────────────────────────────────────────────────────── */
.alerte-generale {
  position: fixed; left: var(--espace); right: var(--espace); bottom: var(--espace); z-index: 70;
  max-width: 560px; margin: 0 auto;
  background: var(--rouge-fond); border: 1px solid var(--rouge); color: var(--rouge);
  padding: 14px 18px; font-size: var(--t-normal);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.alerte-generale .lien-bouton { color: var(--rouge); flex: 0 0 auto; }

/* ══ Mobile 390 px ═════════════════════════════════════════════════════════
   La colonne « Informations » passe sous le texte et la barre d'actions
   se colle en bas de l'écran. ══════════════════════════════════════════════ */
@media (max-width: 899px) {
  :root { --t-titre: 24px; }

  .sur-large { display: none !important; }
  .sur-etroit { display: inline !important; }

  .colonne { padding: 22px var(--espace) 28px; }
  .ecran-editeur .colonne { padding-bottom: 20px; }

  /* Le bandeau tient sur une ligne : le nom de l'avocate est déjà dans la page. */
  .bandeau-dedans { padding: 14px var(--espace); }
  .marque { gap: 8px; }
  .marque-nom { font-size: 16px; white-space: nowrap; }
  .marque-outil { white-space: nowrap; }
  .bandeau-identite { display: none !important; }

  .grille-editeur { grid-template-columns: 1fr; gap: 20px; }
  .zone-texte { min-height: 260px; padding: 16px 16px; }

  .cadre-tableau { display: none; }
  .liste-cartes { display: flex; }

  .titre-et-action { display: block; }
  .titre-et-action .bouton { width: 100%; margin-top: 18px; }

  .pied-dedans { flex-direction: column; gap: 4px; }

  /* Barre fixe en bas : bouton doré en premier, puis l'état et le lien. */
  .barre-actions {
    position: fixed; left: 0; right: 0; bottom: 0;
    flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 12px var(--espace);
  }
  .barre-actions-boutons { flex-direction: column-reverse; align-items: stretch; margin-left: 0; }
  .barre-actions .bouton-clair { background: none; border: none; text-decoration: underline; padding: 4px; }
  .barre-actions .etat-enregistrement { text-align: left; }

  /* Planche 1f : deux lignes, pas trois. Le bouton doré occupe toute la largeur, puis
     « Enregistré à 14 h 32 » à gauche et « Enregistrer et quitter » à droite.
     « display: contents » laisse les deux boutons se ranger dans la grille de la barre
     comme si le bloc qui les entoure n'existait pas. */
  .ecran-editeur .barre-actions {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px;
  }
  .ecran-editeur .barre-actions-boutons { display: contents; }
  .ecran-editeur #bouton-apercu { grid-row: 1; grid-column: 1 / -1; }
  .ecran-editeur .etat-enregistrement { grid-row: 2; grid-column: 1; }
  .ecran-editeur #bouton-quitter { grid-row: 2; grid-column: 2; justify-self: end; }

  /* On réserve la place de la barre fixe pour ne rien cacher. */
  .ecran-editeur, .ecran-apercu { padding-bottom: 150px; }

  .barre-actions-apercu { flex-direction: column-reverse; }
  /* Planche 1h : le bouton doré sur toute la largeur, puis « Modifier » et
     « Copier le lien d'aperçu (30 jours) » côte à côte sur une seule ligne. */
  .barre-actions-apercu .barre-actions-boutons {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px;
  }
  .barre-actions-apercu #bouton-publier { grid-row: 1; grid-column: 1 / -1; }
  .barre-actions-apercu #bouton-modifier { grid-row: 2; grid-column: 1; }
  .barre-actions-apercu #bouton-copier-lien { grid-row: 2; grid-column: 2; text-align: right; }
  .scene-apercu { padding: 48px var(--espace); }
  .message-flottant { bottom: 170px; }

  /* La barre d'actions est collée en bas : l'alerte ne doit pas se poser dessus.
     Sur mobile, elle passe donc en haut de l'écran, juste sous le bandeau bleu. */
  .alerte-generale { top: 68px; bottom: auto; }

  .carte-connexion { padding: 26px 20px 24px; }
}

/* Réglages fins pour les écrans les plus étroits (390 px et moins). */
@media (max-width: 420px) {
  .bandeau-droite { gap: 10px; font-size: var(--t-petit); }
  .champ-titre { font-size: 18px; }
  .outil { padding: 7px 8px; }
}

/* On respecte le réglage « moins d'animations » du système. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}