/* ==========================================================================
   CMS Lite 4 — site.css
   Remplace, à elle seule : style.css, nav.css et editor.css.
   Même balisage HTML qu'avant (paramètres HEADER / BODY / FOOTER, nav.php,
   t_conversion, éditeur) : il suffit de changer HTML_META_CSS.

   Principes :
   - une seule police, Inter, hébergée sur le site (aucun appel à Google Fonts) :
     rendu identique sur Mac, Windows, Linux, iPhone, Android ;
   - titres alignés sur la feuille custom.css de Docmost (même bleu, même
     graisse, mêmes tailles) : le site et le wiki se ressemblent ;
   - unités relatives à la taille de texte choisie par le visiteur ;
   - une grille (demi, tiers, deux tiers) qui s'empile sur téléphone ;
   - un seul point de rupture : 700 px ;
   - mode sombre automatique, selon le réglage du système du visiteur.
   ========================================================================== */


/* --- 1. Réglages ------------------------------------------------------- */

:root {
  /* Chaque couleur : light-dark(valeur claire, valeur sombre). Le navigateur choisit
     selon color-scheme, c'est-à-dire, par défaut, selon le réglage du système. */
  color-scheme: light dark;
  --bg:         light-dark(#fff,    #16191d);
  --ink:        light-dark(#222,    #e4e7eb);
  --muted:      light-dark(#6b7280, #9aa4ae);
  --brand:      light-dark(#3d5c7a, rgb(168, 196, 226));   /* bleu CMS Lite / teinte sombre de Docmost */
  --brand-soft: light-dark(#7590ae, rgb(200, 220, 240));
  --wash:       light-dark(#f3f6f9, #21262c);
  --rule:       light-dark(#dde3ea, #343c46);
  --shadow:     light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.4));
  --measure:    60rem;            /* largeur utile de la page : 960 px */
  --gap:        4%;               /* écart entre colonnes */
}
/* Mode imposé (utilisé par l'admin ; le site public reste en automatique) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Photos et logos un peu atténués en sombre : moins d'éblouissement */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img:not([src$=".svg"]) { filter: brightness(0.92); }
}
:root[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(0.92); }

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* --- 2. Base ----------------------------------------------------------- */

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

html {
  font-size: 100%;                           /* respecte le réglage du visiteur */
  -webkit-text-size-adjust: 100%;            /* iPhone : pas de grossissement arbitraire */
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;                           /* 16 px : Inter est large, inutile de grossir */
  line-height: 1.6;
  font-feature-settings: "liga", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--bg);
  overflow-wrap: break-word;                 /* longues adresses : pas de débordement */
}

.container { width: 100%; }
.container-960px {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}


/* --- 3. Texte ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  color: var(--brand);
  font-weight: 400;
  margin: 0 0 0.5em;
}
/* Mêmes valeurs que custom.css (Docmost) — grand écran */
h1 { font-size: 2.2rem;  line-height: 1.25; letter-spacing: -0.04rem; margin-top: 0.5em; }
h2 { font-size: 1.9rem;  line-height: 1.3;  letter-spacing: -0.03rem; margin-top: 1.6em; }
h3 { font-size: 1.6rem;  line-height: 1.35; letter-spacing: -0.02rem; margin-top: 1.4em; }
h4 { font-size: 1.35rem; line-height: 1.45; margin-top: 1.3em; }
h5, h6 { font-size: 1.15rem; line-height: 1.5; margin-top: 1.2em; }
/* titre qui suit directement un autre titre (« Bienvenue » puis « Présentation ») :
   la grande marge sert à séparer un titre du TEXTE qui précède, pas d'un autre titre */
:is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: 0.4em; }
/* un titre en tête de bloc n'a pas de marge au-dessus */
.ed-page > :first-child, .column > :first-child, .ProseMirror > :first-child { margin-top: 0; }

p, ul, ol, blockquote, pre, table, figure { margin: 0 0 1em; }
ul, ol { padding-left: 1.5em; }
li { margin-bottom: 0.25em; }
li > p { margin: 0; }                      /* l'éditeur met le texte des puces dans un <p> */
li > ul, li > ol { margin: 0.25em 0 0; }

/* Longueur de ligne confortable (environ 80 caractères) pour le texte courant.
   Ne concerne que le texte en pleine largeur : les colonnes, les images, les
   tableaux et les titres gardent toute la largeur de la page. */
.ed-page > :is(p, ul, ol, blockquote),
.ProseMirror > :is(p, ul, ol, blockquote),
.container-960px > :is(p, ul, ol, blockquote) { max-width: 70ch; }
/* …sauf dans une page qui contient une image flottante (à gauche, à droite) :
   on ne peut pas savoir en CSS jusqu'où descend l'image, et une limite appliquée
   paragraphe par paragraphe ferait sauter le bord droit du texte. Toute la page
   garde alors la pleine largeur, avec un seul bord droit. */
:is(.ed-page, .ProseMirror, .container-960px):has(img:is(.ed-left, .ed-right, [src~="float-left"], [src~="float-right"]))
  > :is(p, ul, ol, blockquote) { max-width: none; }

small, .meta { font-size: 0.875rem; color: var(--muted); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--brand-soft); }

blockquote {
  margin-left: 0;
  padding: 0.25em 0 0.25em 1em;
  border-left: 4px solid var(--rule);
  color: var(--muted);
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--wash);
  border-radius: 3px;
}
pre { overflow-x: auto; padding: 0.8em 1em; background: var(--wash); border-radius: 4px; }
pre code { padding: 0; background: none; }

/* Tableaux (listes de toc.php, bases externes, Markdown) : défilent sur téléphone */
table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; }
th, td { padding: 0.4em 0.8em; border: 1px solid var(--rule); vertical-align: top; text-align: left; }
th { background: var(--wash); font-weight: 600; }

/* Tableaux de l'éditeur : pleine largeur sur grand écran (défilement sur téléphone, section 7) */
table.ed-table, .ProseMirror table { display: table; width: 100%; table-layout: auto; }
:is(td, th) > p { margin: 0; }                /* l'éditeur met le texte des cellules dans un <p> */
:is(td, th) > p + p { margin-top: 0.5em; }

/* Encadrés (cinq couleurs, comme Docmost) : barre latérale, fond léger, petit symbole */
.ed-callout {
  --c: var(--brand); --c-bg: var(--wash);
  position: relative; margin: 1.2em 0; padding: 0.8em 1em 0.8em 2.8em;
  border-left: 4px solid var(--c); border-radius: 4px; background: var(--c-bg);
}
.ed-callout::before {
  position: absolute; left: 0.85em; top: 0.8em;
  font-weight: 700; line-height: 1.6; color: var(--c);
}
.ed-callout > :first-child { margin-top: 0; }
.ed-callout > :last-child  { margin-bottom: 0; }
.ed-callout-info    { --c: light-dark(#2563eb, #7fa9f5); --c-bg: light-dark(#eef4ff, #182336); }
.ed-callout-note    { --c: light-dark(#7c3aed, #b69cf5); --c-bg: light-dark(#f4f0ff, #241d36); }
.ed-callout-success { --c: light-dark(#15803d, #6fcf8f); --c-bg: light-dark(#edf8f0, #16281c); }
.ed-callout-warning { --c: light-dark(#c2410c, #f0a060); --c-bg: light-dark(#fff4ea, #2e2116); }
.ed-callout-danger  { --c: light-dark(#b91c1c, #f08a8a); --c-bg: light-dark(#fdeeee, #331a1c); }
.ed-callout-info::before    { content: "\2139\FE0E"; }   /* i  */
.ed-callout-note::before    { content: "\270E\FE0E"; }   /* crayon */
.ed-callout-success::before { content: "\2713"; }        /* coche */
.ed-callout-warning::before { content: "\26A0\FE0E"; }   /* triangle */
.ed-callout-danger::before  { content: "\2715"; }        /* croix */

/* Blocs dépliables : <details> natif, le navigateur ouvre et ferme sans JavaScript */
details.ed-details { margin: 1em 0; padding: 0 1em; border: 1px solid var(--rule); border-radius: 4px; }
details.ed-details > summary { padding: 0.6em 0; font-weight: 600; color: var(--brand); cursor: pointer; }
details.ed-details[open] > summary { margin-bottom: 0.6em; border-bottom: 1px solid var(--rule); }
details.ed-details > div > :last-child { margin-bottom: 0.8em; }

/* Lecteur audio de l'éditeur (les boutons suivent le mode clair / sombre) */
audio.ed-audio { display: block; width: 100%; max-width: 36rem; margin: 0.5em 0 0.25em; }

/* Notes de bas de page (Markdown) */
.footnotes { font-size: 0.9rem; color: var(--muted); }


/* --- 4. Grille : demi, tiers, deux tiers ------------------------------- */
/* Balisage produit par l'éditeur et par t_conversion (<x->, <xx->, …) :
   <div class="row"><div class="one-half column">…</div>…</div>          */

.row { display: flex; gap: 0 var(--gap); margin-bottom: 1em; }
.row > .column { min-width: 0; }                      /* un long mot ne casse pas la grille */
.one-half.column   { flex: 0 0 calc((100% - var(--gap)) / 2); }
.one-third.column  { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
.two-thirds.column { flex: 0 0 calc((100% - 2 * var(--gap)) / 3 * 2 + var(--gap)); }


/* --- 5. Images --------------------------------------------------------- */

img, video { max-width: 100%; height: auto; }
video { width: 100%; }

/* Images de l'éditeur : taille (petite, moyenne, pleine largeur) et position */
img.ed-img   { display: block; margin: 0.4em 0 1.2em; }
img.ed-s     { width: 33%; }
img.ed-m     { width: 60%; }
img.ed-l     { width: 100%; }
img.ed-center { margin-left: auto; margin-right: auto; }
img.ed-block-left  { margin-left: 0;    margin-right: auto; }   /* seule sur sa ligne, à gauche */
img.ed-block-right { margin-left: auto; margin-right: 0; }      /* seule sur sa ligne, à droite */
img.ed-left  { float: left;  margin-right: 1.5em; }
img.ed-right { float: right; margin-left: 1.5em; }
img.ed-l.ed-left, img.ed-l.ed-right { float: none; }
.column img.ed-s { width: 50%; }
.column img.ed-m { width: 80%; }
.ed-page::after { content: ""; display: table; clear: both; }
.ed-page h2, .ed-page h3, .ed-page h4, .ed-page hr, .ed-page .row { clear: both; }

/* Anciennes conventions CMS Lite (mots-clés dans l'adresse de l'image) */
img[src~="thumbnail"] { max-width: 12rem; }
img[src~="max320px"]  { max-width: 20rem; }
img[src~="max480px"]  { max-width: 30rem; }
img[src~="max640px"]  { max-width: 40rem; }
img[src~="center"]    { display: block; margin-left: auto; margin-right: auto; }
img[src~="float-left"]  { float: left;  margin: 0 1.5em 0.5em 0; }
img[src~="float-right"] { float: right; margin: 0 0 0.5em 1.5em; }
img[src~="bordered"]  { border: 1px solid var(--ink); }
img[src~="shadow"]    { box-shadow: 0 4px 16px rgb(0 0 0 / 0.18); }


/* --- 6. Menu (nav.php) -------------------------------------------------- */
/* Grand écran : une ligne, sous-menus au survol.
   Téléphone : bouton « Menu ☰ », sous-menus dépliables (cases à cocher). */

nav { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }
nav input[type="checkbox"] { display: none; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav > ul { display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
nav li { position: relative; margin: 0; }
nav a, nav .toggle {
  display: block;
  padding: 0.5rem 0.9rem;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--brand);
  text-decoration: none;
  cursor: pointer;
}
nav a:hover, nav .toggle:hover { background: var(--wash); color: var(--ink); }
nav .toggle { display: none; }                /* bouton « Menu » : téléphone seulement (section 7).
                                                 Après la règle ci-dessus, qui l'afficherait. */

nav ul ul {                                   /* sous-menu */
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 10;
  min-width: 12rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 16px var(--shadow);
}
nav li:hover > ul, nav li:focus-within > ul { display: block; }
nav ul ul a { font-size: 1rem; }


/* --- 7. Téléphone et petite tablette ------------------------------------ */

@media (max-width: 700px) {
  h1 { font-size: 2.0rem; }                  /* tailles « petit écran » de custom.css */
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.45rem; }
  h4 { font-size: 1.25rem; }
  h5, h6 { font-size: 1.1rem; }

  /* Tableaux : défilement horizontal plutôt qu'écrasement */
  table.ed-table { display: block; width: auto; overflow-x: auto; }

  /* Colonnes empilées */
  .row { display: block; }
  .row > .column { margin-bottom: 1em; }

  /* Images : plus d'habillage, place au texte */
  img.ed-left, img.ed-right,
  img[src~="float-left"], img[src~="float-right"] {
    float: none; display: block; margin-left: auto; margin-right: auto;
  }
  img.ed-s { width: 50%; }
  img.ed-m, .column img.ed-s, .column img.ed-m { width: 100%; }

  /* Menu : bouton « Menu », liste verticale, sous-menus dépliables */
  nav .toggle { display: block; }
  nav .toggle + a { display: none; }         /* le lien doublon des sous-menus */
  nav > ul, nav ul ul { display: none; position: static; border: 0; box-shadow: none; min-width: 0; }
  nav input:checked + ul { display: block; }
  nav li:hover > ul, nav li:focus-within > ul { display: none; }
  nav input:checked + ul { display: block; } /* (répété : doit l'emporter sur la ligne précédente) */
  nav ul ul a, nav ul ul .toggle { padding-left: 2rem; }
}


/* --- 8. Impression ------------------------------------------------------ */

@media print {
  nav, .toggle { display: none !important; }
  /* Blocs dépliables : tout est imprimé, même replié (navigateurs récents) */
  details.ed-details::details-content { content-visibility: visible; block-size: auto; }
  details.ed-details > summary { list-style: none; border-bottom: 1px solid var(--rule); }
  .ed-callout { break-inside: avoid; }
  body { font-size: 11pt; }
  a { color: inherit; }
  .row { display: block; }
}