/* Feuillet (N06) : feuille de style unique.
   Aucune information n'est portée par la couleur seule : chaque état a une icône et un texte. */

/* Police ------------------------------------------------------------------ */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palette ----------------------------------------------------------------
   Ratios WCAG 2.x calculés (fond crème #FBF7EF sauf mention) :
   --encre        #1C1B19  16,1:1  texte principal (16,9:1 sur --surface)
   --encre-douce  #45413A   9,5:1  texte secondaire (10,0:1 sur --surface, 8,6:1 sur --alerte-fond)
   --sapin        #1E4D3A   9,0:1  liens, boutons ; texte --surface sur sapin : 9,5:1
   --sapin-fonce  #143426  13,3:1  survol des boutons (texte --surface dessus)
   --sapin-pale   #E6EFE9          fond d'onglet actif : --encre dessus 14,7:1, --sapin 8,2:1
   --bordeaux     #6E2233  10,1:1  petites touches : survol des liens, icône d'avertissement
   --dore         #A67F35   3,4:1  filets décoratifs uniquement (jamais de texte)
   --dore-texte   #6B5014   7,1:1  variante dorée lisible si du texte doré est nécessaire
   Logo : signet #E3AE45 sur la feuille sapin, 4,8:1 (distinct en luminance, donc aussi pour les daltoniens)
   --bordure      #857E70   3,8:1  contours des champs (≥ 3:1 pour les éléments d'interface)
   --alerte-fond  #F6EBD5          fond d'avertissement : --encre dessus 14,6:1 */
:root {
  --creme: #FBF7EF;
  --surface: #FFFDF8;
  --encre: #1C1B19;
  --encre-douce: #45413A;
  --sapin: #1E4D3A;
  --sapin-fonce: #143426;
  --sapin-pale: #E6EFE9;
  --bordeaux: #6E2233;
  --dore: #A67F35;
  --dore-texte: #6B5014;
  --bordure: #857E70;
  --alerte-fond: #F6EBD5;

  --police: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rayon: 0.75rem;
  --ombre: 0 1px 2px rgb(28 27 25 / 0.08), 0 6px 24px rgb(28 27 25 / 0.08);
  --cible: 2.75rem; /* 44 px à 16 px, 49,5 px à 18 px */
  --largeur: 46rem;

  color-scheme: light;
}

/* Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%; /* 18 px */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.6;
}

main { flex: 1; }

img, svg { display: block; }

a {
  color: var(--sapin);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--bordeaux); text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: 1rem; top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--sapin);
  font-weight: 700;
  border: 2px solid var(--sapin);
  border-radius: var(--rayon);
}
.lien-evitement:focus { top: 1rem; }

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[hidden] { display: none !important; }

/* En-tête et pied --------------------------------------------------------- */
.entete {
  border-bottom: 3px solid var(--dore);
  background: var(--surface);
}
.entete-interne {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--cible);
  color: var(--encre);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.marque:hover { color: var(--bordeaux); }
.marque img { width: 2.25rem; height: 2.25rem; }

.pied {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--encre-douce);
  font-size: 0.9rem;
  border-top: 1px solid var(--dore);
}
.pied p { margin: 0; }

/* Boutons ----------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--cible);
  min-width: var(--cible);
  padding: 0.6rem 1.25rem;
  border: 2px solid var(--sapin);
  border-radius: var(--rayon);
  background: var(--sapin);
  color: var(--surface);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.bouton:hover { background: var(--sapin-fonce); border-color: var(--sapin-fonce); color: var(--surface); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled,
.bouton[aria-disabled="true"] {
  background: var(--creme);
  border: 2px dashed var(--bordure);
  color: var(--encre-douce);
  cursor: not-allowed;
  transform: none;
}

.bouton-secondaire {
  background: var(--surface);
  color: var(--sapin);
}
.bouton-secondaire:hover { background: var(--sapin-pale); color: var(--sapin-fonce); }

.bouton-discret {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--cible);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--encre-douce);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.bouton-discret:hover { color: var(--sapin); border-color: var(--sapin); background: var(--surface); }

.bouton-geant {
  font-size: 1.4rem;
  padding: 1.1rem 2.25rem;
  border-radius: 1rem;
  box-shadow: var(--ombre);
}
.bouton-geant .icone { width: 1.5em; height: 1.5em; }

/* Messages ---------------------------------------------------------------- */
.message {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  border-left: 0.35rem solid var(--encre-douce);
  background: var(--surface);
  color: var(--encre);
}
.message:empty { display: none; }
.message .icone { margin-top: 0.15em; }
.message-erreur { border-left-color: var(--encre); border-left-style: double; border-left-width: 0.45rem; }
.message-succes { border-left-color: var(--sapin); }

.avertissement {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid var(--dore-texte);
  border-radius: var(--rayon);
  background: var(--alerte-fond);
  color: var(--encre);
  font-weight: 600;
}
.avertissement .icone { width: 1.75rem; height: 1.75rem; color: var(--bordeaux); }
.avertissement p { margin: 0; }

/* Champs ------------------------------------------------------------------ */
label, .etiquette { display: block; font-weight: 700; margin-bottom: 0.35rem; }

input[type="text"],
input[type="password"],
input[type="search"],
textarea {
  width: 100%;
  min-height: var(--cible);
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
}
input:hover, textarea:hover { border-color: var(--encre-douce); }
input:focus-visible, textarea:focus-visible { border-color: var(--sapin); }
input[aria-invalid="true"] { border-color: var(--encre); border-style: double; border-width: 4px; }

.case {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--cible);
  font-weight: 400;
  cursor: pointer;
}
.case input { width: 1.4rem; height: 1.4rem; accent-color: var(--sapin); margin: 0; }

.aide { color: var(--encre-douce); font-size: 0.95rem; margin: 0.35rem 0 0; }

/* Accueil ----------------------------------------------------------------- */
.accueil {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-height: calc(100vh - 8rem);
}
.zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
}
.zone-haut { justify-content: flex-end; }
.zone-bas { justify-content: flex-start; }
.zone h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
}
.zone .slogan { margin: 0 0 2rem; color: var(--encre-douce); font-size: 1.15rem; }
.zone h2 { margin: 0 0 1.25rem; font-size: 1.3rem; font-weight: 700; }
.logo-accueil { width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; }

.separateur {
  width: min(20rem, 70%);
  margin: 0 auto;
  border: 0;
  border-top: 2px solid var(--dore);
}

.recherche { width: min(40rem, 100%); text-align: left; }
.recherche-ligne {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.recherche-champ {
  position: relative;
  flex: 1 1 18rem;
}
.recherche-champ .icone {
  position: absolute;
  left: 1.1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--encre-douce);
  pointer-events: none;
}
.recherche-champ input {
  min-height: 3.25rem;
  padding-left: 3.25rem;
  border-radius: 999px;
  box-shadow: var(--ombre);
}
.recherche .bouton { border-radius: 999px; min-height: 3.25rem; flex: 0 1 auto; }

/* Lecture ----------------------------------------------------------------- */
.page {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.rendu {
  font-size: 1.25rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.rendu > :first-child { margin-top: 0; }
.rendu h2, .rendu h3, .rendu h4, .rendu h5, .rendu h6 { line-height: 1.25; margin: 1.6em 0 0.5em; font-weight: 800; }
.rendu h2 { font-size: 1.8em; }
.rendu h3 { font-size: 1.45em; }
.rendu h4 { font-size: 1.2em; }
.rendu h5, .rendu h6 { font-size: 1em; }
.rendu h2::after {
  content: "";
  display: block;
  width: 3rem;
  margin-top: 0.4rem;
  border-top: 3px solid var(--dore);
}
.rendu ul, .rendu ol { padding-left: 1.5em; }
.rendu li { margin: 0.3em 0; }
.rendu li::marker { color: var(--sapin); font-weight: 700; }
.rendu blockquote {
  margin: 1em 0;
  padding: 0.25em 1em;
  border-left: 4px solid var(--dore);
  color: var(--encre-douce);
  font-style: italic;
}
.rendu code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--sapin-pale);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}
.rendu pre { background: var(--sapin-pale); padding: 1em; border-radius: var(--rayon); overflow-x: auto; }
.rendu pre code { padding: 0; background: none; }
.rendu hr { border: 0; border-top: 2px solid var(--dore); margin: 2em 0; }
.rendu a { font-weight: 600; }

.lecture-meta { color: var(--encre-douce); font-size: 0.95rem; margin: 0 0 1.5rem; }

.lecture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--dore);
}

.etat {
  padding: 2rem 0;
  font-size: 1.15rem;
}

/* Fenêtres (dialog) ------------------------------------------------------- */
dialog {
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  overflow-y: auto;
  padding: 0;
  border: 2px solid var(--sapin);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--encre);
  box-shadow: 0 20px 60px rgb(28 27 25 / 0.3);
}
dialog::backdrop { background: rgb(28 27 25 / 0.55); }
.dialog-contenu { padding: 1.5rem; }
.dialog-contenu > h2 { margin: 0 0 1rem; font-size: 1.4rem; line-height: 1.25; }
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.groupe { margin-top: 1.25rem; }

.uuid-masque {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.75rem;
  background: var(--creme);
  border: 1px dashed var(--bordure);
  border-radius: 0.5rem;
  margin: 0.25rem 0 0;
}

/* Critères du mot de passe */
.force { margin-top: 1rem; }
.force-entete { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-weight: 700; }
progress.force-barre {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.85rem;
  margin: 0.4rem 0 0.75rem;
  border: 2px solid var(--bordure);
  border-radius: 999px;
  background: var(--creme);
  overflow: hidden;
  color: var(--sapin);
}
progress.force-barre::-webkit-progress-bar { background: var(--creme); }
progress.force-barre::-webkit-progress-value { background: var(--sapin); transition: width 0.2s; }
progress.force-barre::-moz-progress-bar { background: var(--sapin); }

.criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.critere { display: flex; align-items: center; gap: 0.5rem; color: var(--encre-douce); }
.critere .icone { width: 1.35rem; height: 1.35rem; }
.critere[data-ok="true"] { color: var(--encre); font-weight: 700; }
.critere[data-ok="true"] .icone { color: var(--sapin); stroke-width: 3; }

.correspondance { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; }
.correspondance:empty { display: none; }
.correspondance[data-ok="true"] { font-weight: 700; }
.correspondance[data-ok="true"] .icone { color: var(--sapin); stroke-width: 3; }

/* Révélation après création */
.revelation dl { margin: 1rem 0; }
.revelation dt { font-weight: 700; margin-top: 0.75rem; }
.revelation dd { margin: 0.25rem 0 0; font-family: var(--mono); overflow-wrap: anywhere; }
.copies { display: grid; gap: 0.6rem; margin-top: 1rem; }
.copie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.copie .bouton { justify-content: flex-start; text-align: left; }
.statut-copie { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--sapin); }
.statut-copie:empty { display: none; }
.copie-sensible .bouton { border-style: dashed; }

/* Éditeur ----------------------------------------------------------------- */
.editeur {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 7rem; /* le bouton flottant ne masque jamais le contenu */
}
.editeur h1 { font-size: 1.6rem; margin: 0 0 1rem; line-height: 1.25; }

.onglets {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--bordure);
  margin-bottom: 1rem;
}
.onglet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--cible);
  padding: 0.5rem 1.25rem;
  border: 2px solid transparent;
  border-bottom: 0;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: transparent;
  color: var(--encre-douce);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: -2px;
}
.onglet[aria-selected="true"] {
  background: var(--sapin-pale);
  color: var(--encre);
  border-color: var(--bordure);
  border-bottom: 4px solid var(--sapin);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.espace-travail { display: grid; gap: 1.5rem; }
.panneau-titre { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }

.barre-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 2px solid var(--bordure);
  border-bottom: 0;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--surface);
}
.outil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--cible);
  padding: 0.35rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.outil:hover { background: var(--sapin-pale); border-color: var(--sapin); }

#texte {
  min-height: 24rem;
  resize: vertical;
  border-radius: 0 0 var(--rayon) var(--rayon);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.6;
}

.compteur { margin: 0.4rem 0 0; color: var(--encre-douce); font-size: 0.9rem; }

.apercu {
  min-height: 24rem;
  padding: 1.25rem;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}
.apercu-vide { color: var(--encre-douce); font-style: italic; }

/* Mobile : un seul panneau visible à la fois */
@media (max-width: 59.99em) {
  .panneau[data-actif="false"] { display: none; }
}
/* Grand écran : côte à côte, sans onglets */
@media (min-width: 60em) {
  .onglets { display: none; }
  .espace-travail { grid-template-columns: 1fr 1fr; align-items: start; }
  .apercu { position: sticky; top: 1rem; max-height: calc(100vh - 9rem); overflow-y: auto; }
}

.barre-flottante {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgb(251 247 239 / 0.96);
  border-top: 2px solid var(--dore);
}
.barre-flottante .bouton { box-shadow: var(--ombre); font-size: 1.1rem; padding: 0.75rem 1.75rem; }
.barre-flottante .message { margin: 0; }

/* Page 404 ---------------------------------------------------------------- */
.introuvable { text-align: center; padding: 4rem 1rem; }
.introuvable h1 { font-size: 2rem; }

/* Mouvement --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contraste renforcé demandé par le système */
@media (forced-colors: active) {
  .bouton, .outil, .onglet, .bouton-discret { border: 2px solid ButtonText; }
  .critere[data-ok="true"] .icone, .correspondance[data-ok="true"] .icone { color: Highlight; }
}