/* ==========================================================================
   style.css : CSS COMMUN à toutes les pages du site
   Chargé par includes/header.php. Conçu d'abord pour les téléphones
   (mobile-first), puis enrichi pour les écrans plus larges (@media).

   Sommaire
     0. Polices (Poppins pour les titres, Lato pour le texte)
     1. Réglages (couleurs, arrondis, ombres)
     2. Bases (texte, titres, liens)
     3. Barre du haut et pied de page
     4. Mise en page du contenu (titre de page, fil d'Ariane, grilles)
     5. Cartes
     6. Boutons
     7. Formulaires
     8. Messages (alertes)
     9. Étiquettes (pastilles de statut)
    10. Tableaux
    11. Petits utilitaires
    12. Écrans plus larges
   ========================================================================== */

/* --- 0. Polices ---
   Les fichiers sont hébergés sur le site, dans /assets/fonts (licence libre OFL, jointe).
   Ils ne contiennent que l'alphabet latin, accents français compris, pour rester légers.
   « swap » : le texte s'affiche aussitôt dans la police du système, puis bascule
   dès que la police est arrivée (le visiteur n'attend jamais devant une page vide).
   Une seule graisse par police et par style : la plage indiquée (ex. « 500 800 ») dit au
   navigateur de l'utiliser pour toutes ces graisses, plutôt que de fabriquer un faux gras. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500 800;             /* fichier demi-gras (600) */
    font-display: swap;
    src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300 500;             /* fichier normal (400) */
    font-display: swap;
    src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: 300 500;             /* fichier italique (400) */
    font-display: swap;
    src: url("../fonts/lato-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 600 900;             /* fichier gras (700) */
    font-display: swap;
    src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
}

/* --- 1. Réglages : modifiez-les ici, ça change tout le site --- */
:root {
    /* Fond et texte */
    --color-bg:         #f4f6fa;      /* fond de page : gris bleuté très clair */
    --color-surface:    #ffffff;      /* cartes, barre du haut */
    --color-text:       #44475a;      /* texte courant */
    --color-heading:    #262938;      /* titres */
    --color-muted:      #646e82;      /* textes secondaires */
    --color-border:     #e6e9ef;      /* traits de séparation */
    --color-input:      #d5dae3;      /* bord des champs de formulaire */

    /* Couleur principale (boutons, liens, menu actif) et sa teinte douce */
    --color-primary:    #2865d0;
    --color-primary-d:  #1f51ab;      /* au survol */
    --color-primary-s:  #e9f0fc;      /* fond doux */

    /* Couleurs de statut : foncée (texte) + douce (fond) */
    --color-success:    #0f7a53;  --color-success-s: #e2f5ee;
    --color-warning:    #9a5b00;  --color-warning-s: #fdf2df;
    --color-danger:     #c42f3d;  --color-danger-s:  #fdecee;
    --color-info:       #0e7090;  --color-info-s:    #e1f3f9;

    /* Formes */
    --radius:           10px;         /* cartes */
    --radius-sm:        7px;          /* boutons, champs */
    --shadow:           0 1px 4px rgba(112, 128, 156, .16);
    --shadow-lg:        0 10px 30px rgba(112, 128, 156, .20);
    --focus-ring:       0 0 0 3px rgba(40, 101, 208, .25);

    /* Dimensions */
    --topbar-h:         60px;         /* hauteur de la barre du haut */
    --gutter:           1rem;         /* marge latérale de la page */

    /* Polices (voir « 0. Polices ») ; la police du système prend le relais en attendant */
    --font-text:        "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-title:       "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- 2. Bases --- */
*, *::before, *::after { box-sizing: border-box; }

/* Un élément marqué « hidden » reste caché, même si une règle lui donne un affichage */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;                    /* Flexbox : en-tête / contenu / pied de page empilés */
    flex-direction: column;
    font-family: var(--font-text);    /* Lato pour tout le texte */
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

/* Titres h1 à h6 : Poppins */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
    font-family: var(--font-title);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-heading);
}
h1 { font-size: 1.375rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9375rem; }
h5 { font-size: .875rem; }
h6 { font-size: .8125rem; }

p  { margin: 0 0 1rem; }
a  { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-d); }

code {
    padding: .1em .4em;
    border-radius: 5px;
    background: var(--color-primary-s);
    color: var(--color-primary-d);
    font-size: .875em;
    white-space: nowrap;              /* un nom de classe n'est jamais coupé en deux */
}

.muted { color: var(--color-muted); }

/* Icônes SVG (voir includes/icons.php) */
.icon {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -.25em;
}

/* --- 3. Barre du haut --- */
.topbar {
    position: sticky;                 /* reste visible quand on fait défiler la page */
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: var(--topbar-h);
    padding: .5rem var(--gutter);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-title);   /* le nom du site, dans la police des titres */
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-heading);
    text-decoration: none;
}
.brand:hover { color: var(--color-heading); }
.brand-mark  { color: var(--color-primary); }
/* Logo choisi dans Réglages › Identité du site (à la place du pendule) */
.brand-logo  { display: block; width: auto; height: 36px; max-width: 180px; object-fit: contain; }
.login-brand .brand-logo { height: 56px; max-width: 240px; }
.login-brand .brand-mark { width: 56px; height: 56px; }   /* sans logo choisi : le pendule seul, à la même taille */

/* --- Pied de page --- */
.site-footer {
    padding: 1.25rem var(--gutter);
    text-align: center;
    font-size: .875rem;
    color: var(--color-muted);
}
.site-footer p { margin: 0; }

/* --- 4. Contenu : occupe tout l'espace disponible entre l'en-tête et le pied de page --- */
main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem var(--gutter);
}

/* Espace régulier entre les grands blocs d'une page (cartes, grilles…) */
main > * + * { margin-top: 1.25rem; }

/* Ligne de titre de page : titre à gauche, fil d'Ariane à droite */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: 1.25rem;
}
.page-head h1 { margin: 0; }

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--color-muted);
}
.breadcrumb li + li::before {
    content: "›";
    margin: 0 .45rem;
    color: var(--color-input);
}
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }

/* Grilles : les cartes se placent côte à côte s'il y a la place, sinon les unes sous les autres */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 1.25rem;
}
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* Quatre tuiles : 1 colonne sur téléphone, 2 × 2 sur écran moyen, 4 côte à côte sur grand écran
   (jamais une tuile seule sur sa ligne) */
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Pile verticale avec espacement régulier */
.stack > * + * { margin-top: 1.25rem; }
/* Le jeton caché en tête d'un formulaire (csrf_field) ne compte pas : le 1er encadré reste en haut, aligné sur la colonne
   voisine (Réglages › Lettre d'information, signalé par Jean le 2026-10-28 ; même défaut sur 5 autres pages de Réglages) */
.stack > input[type="hidden"]:first-child + * { margin-top: 0; }

/* --- 5. Cartes --- */
.card {
    min-width: 0;                     /* évite qu'un long contenu fasse déborder la grille */
    padding: 1.25rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* En-tête de carte : titre à gauche, actions éventuelles à droite, trait dessous.
   Les marges négatives le font aller jusqu'aux bords de la carte. */
.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: -1.25rem -1.25rem 1.25rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.card-title {
    margin: 0;
    font-size: 1rem;
}
.card > :last-child { margin-bottom: 0; }

/* Contenu qui doit toucher les bords de la carte (un tableau, par exemple) */
.card > .card-flush { margin: 0 -1.25rem -1.25rem; }

/* --- 6. Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;                 /* taille confortable au doigt */
    padding: .5rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-primary         { background: var(--color-primary); color: #fff; box-shadow: 0 2px 6px rgba(40, 101, 208, .25); }
.btn-primary:hover   { background: var(--color-primary-d); color: #fff; }
.btn-secondary       { background: var(--color-surface); color: var(--color-text); border-color: var(--color-input); }
.btn-secondary:hover { background: var(--color-bg); color: var(--color-heading); }
.btn-soft            { background: var(--color-primary-s); color: var(--color-primary-d); }
.btn-soft:hover      { background: var(--color-primary); color: #fff; }
.btn-danger          { background: var(--color-danger); color: #fff; }
.btn-danger:hover    { background: #a32432; color: #fff; }

.btn-sm    { min-height: 36px; padding: .35rem .8rem; font-size: .875rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn:focus-visible,
a:focus-visible      { outline: none; box-shadow: var(--focus-ring); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
/* Rangée de boutons qui termine une section ou un formulaire : toujours à 1,5 rem de ce qui précède
   (le même écart que sur la page de connexion). Des boutons pleine largeur (.btn-block) s'y empilent. */
* + .btn-row             { margin-top: 1.5rem; }
.card-header + .btn-row  { margin-top: 0; }     /* l'en-tête de carte a déjà son propre espace */

/* --- 7. Formulaires --- */
label {
    display: block;
    margin: 1rem 0 .35rem;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-heading);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .55rem .8rem;
    border: 1px solid var(--color-input);
    border-radius: var(--radius-sm);
    font: inherit;                    /* 16 px : évite le zoom automatique sur iPhone */
    color: var(--color-heading);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 7rem; resize: vertical; }
input::placeholder,
textarea::placeholder { color: #9aa3b4; }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

/* Champ affiché mais non modifiable (ex. l'adresse e-mail dans « Mes informations ») */
input[readonly] { background: var(--color-bg); color: var(--color-muted); }

/* Champ de mot de passe avec son petit œil, à droite, qui affiche ou masque le texte tapé */
.password-field { position: relative; }
.password-field input { padding-right: 3rem; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 3px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-muted);
    cursor: pointer;
    transform: translateY(-50%);
}
.password-toggle:hover         { background: var(--color-bg); color: var(--color-heading); }
.password-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.password-toggle .icon-hide,
.password-toggle[aria-pressed="true"] .icon-show { display: none; }
.password-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* Case à cocher avec son texte à côté */
/* La case reste à gauche, à sa taille, alignée sur la première ligne ; le texte (regroupé dans
   un <span>) passe à la ligne à sa droite, sans jamais passer dessous ni la chevaucher. */
.check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1rem 0 0;
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
}
.check input {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: .2rem 0 0;
    accent-color: var(--color-primary);
}
.check > span { min-width: 0; }

/* Case « Je ne suis pas un robot » des formulaires publics (includes/anti-robots.php, assets/js/anti-robots.js) :
   un bouton dont la case (.robot-box) est dessinée ici, la même dans tous les navigateurs ; elle devient une roue qui
   tourne pendant la vérification, puis se coche. « .robot-check » devant : l'emporte sur les styles propres à chaque formulaire. */
.robot-check { margin: 1.25rem 0 0; }
.robot-check .robot-label {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: 100%;
    margin: 0;
    padding: .65rem 1rem;
    border: 1px solid var(--color-input);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-text);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
}
.robot-check .robot-label:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.robot-check .robot-label:disabled { cursor: default; }
.robot-box {
    position: relative;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-input);
    border-radius: 4px;
    background: var(--color-surface);
}
.robot-check.is-working .robot-box {
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: robot-spin .8s linear infinite;
}
.robot-check.is-done .robot-box { border-color: var(--color-success); background: var(--color-success); }
.robot-check.is-done .robot-box::after {          /* la coche : un « L » retourné */
    content: "";
    position: absolute;
    left: .3rem;
    top: .08rem;
    width: .35rem;
    height: .7rem;
    border: solid var(--color-surface);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.robot-check.is-done .robot-label { cursor: default; }
.robot-check.is-done .robot-text { color: var(--color-success); }
.robot-check.is-error .robot-text { color: var(--color-danger); }
@keyframes robot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .robot-check.is-working .robot-box { animation-duration: 2.4s; }
}
.robot-noscript { margin: 1.25rem 0 0; font-size: .875rem; color: var(--color-danger); }

/* Petite aide sous un champ */
.field-hint {
    margin: .35rem 0 0;
    font-size: .8125rem;
    color: var(--color-muted);
}

/* --- 8. Messages (alertes) --- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid currentColor;
    font-size: .9375rem;
}
.alert-danger  { background: var(--color-danger-s);  color: var(--color-danger); }
.alert-success { background: var(--color-success-s); color: var(--color-success); }
.alert-warning { background: var(--color-warning-s); color: var(--color-warning); }
.alert-info    { background: var(--color-info-s);    color: var(--color-info); }

/* --- 9. Étiquettes : petites pastilles de statut (« En stock », « Épuisé »…) --- */
.pill {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--color-bg);
    color: var(--color-muted);
}
.pill-primary { background: var(--color-primary-s); color: var(--color-primary-d); }
.pill-success { background: var(--color-success-s); color: var(--color-success); }
.pill-warning { background: var(--color-warning-s); color: var(--color-warning); }
.pill-danger  { background: var(--color-danger-s);  color: var(--color-danger); }
.pill-info    { background: var(--color-info-s);    color: var(--color-info); }

/* --- 10. Tableaux --- */
.table-wrap {
    position: relative;               /* garde à l'intérieur les textes .visually-hidden du tableau */
    overflow-x: auto;                 /* sur téléphone, le tableau défile dans sa carte, pas la page */
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.table th,
.table td {
    padding: .8rem 1.25rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}
.table th {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted);
    background: #fafbfd;
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td      { background: #f8f9fc; }
.table .num  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .cell-main { font-weight: 700; color: var(--color-heading); }
.table .cell-sub  { display: block; font-size: .8125rem; font-weight: 400; color: var(--color-muted); }

/* Page de simple message (accueil provisoire, page introuvable) */
.message-main {
    display: flex;
    align-items: center;
    justify-content: center;
}
.message-card {
    width: 100%;
    max-width: 520px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.message-mark {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    color: var(--color-primary);
}
.message-code {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* --- Onglets (ex. filtres de la liste des pages : Toutes, Publiées…) --- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--color-border);
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: -1px;
    padding: .6rem .9rem;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
}
.tab:hover     { color: var(--color-heading); }
.tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-count {
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--color-surface);
    font-size: .75rem;
    color: var(--color-muted);
}
.tab.is-active .tab-count { background: var(--color-primary-s); color: var(--color-primary-d); }

/* --- Boutons d'action d'une ligne de tableau (icônes seules) --- */
.btn-icon    { width: 36px; padding: 0; }
.btn-icon .icon { width: 18px; height: 18px; }
.row-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; }
.btn-icon-placeholder { flex: 0 0 36px; }   /* bouton absent (ex. corbeille de la page d'accueil) : les icônes restent alignées */
.inline-form { display: inline; margin: 0; }

.table .cell-link       { text-decoration: none; }
.table .cell-link:hover { color: var(--color-primary); text-decoration: underline; }
.table .cell-sub-only   { font-size: .875rem; color: var(--color-muted); }
.pill-icon {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .4rem;
    vertical-align: middle;
}
.pill-icon .icon { width: 14px; height: 14px; }

/* --- Liste vide --- */
.empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--color-muted);
}
.empty-state .empty-icon {
    width: 44px;
    height: 44px;
    margin-bottom: .5rem;
    color: var(--color-input);
}

/* --- Champ précédé d'un texte fixe (ex. « reviha.org/ » devant l'adresse d'une page) --- */
.input-prefix { display: flex; }
.input-prefix-text {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    border: 1px solid var(--color-input);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-muted);
    font-size: .9375rem;
    white-space: nowrap;
}
.input-prefix input { flex: 1; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-prefix-text { max-width: 65%; white-space: normal; overflow-wrap: anywhere; }   /* adresse longue d'une sous-page : passe à la ligne */

/* Compteur de caractères sous un champ (assets/js/editeur.js) */
.field-count {
    margin: .35rem 0 0;
    font-size: .8125rem;
    text-align: right;
    color: var(--color-muted);
}
.field-count.is-over { font-weight: 700; color: var(--color-warning); }

/* --- Texte des pages créées dans le back office (site public et éditeur) ---
   Même taille et même interligne que tous les textes de l'Administration (règle de Jean, 2026-10-21). */
.page-content {
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;          /* un mot trop long pour la ligne (adresse web…) passe à la ligne */
}
.page-content > :first-child { margin-top: 0; }
.page-content h1 { font-size: 1.875rem; margin-bottom: 1.5rem; }
.page-content h2 { font-size: 1.5rem;   margin: 2rem 0 .75rem; }
/* Intertitre : juste au-dessus de son texte (2 rem avant, 0,5 rem après) */
.page-content h3 { font-size: 1.25rem;  margin: 2rem 0 .5rem; }
.page-content h4 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; }
.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote { margin: 0 0 1rem; }
.page-content ul,
.page-content ol { padding-left: 1.5rem; }
.page-content li + li { margin-top: .3rem; }
.page-content blockquote {
    padding: .75rem 1.25rem;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--color-primary-s);
    font-style: italic;
}
.page-content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    vertical-align: middle;
}
.page-content video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    background: #000;
}
/* Vidéo Vimeo ou YouTube (bouton « Vimeo » de l'éditeur ; lecteur posé à l'affichage par html_render_videos) */
.video-externe {
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
}
.video-externe iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Lien de téléchargement d'un fichier (bouton « Fichier » de l'éditeur) */
.page-content a.telechargement {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.1rem;
    border: 1px solid #cddcf6;
    border-radius: var(--radius-sm);
    background: var(--color-primary-s);
    color: var(--color-primary-d);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.page-content a.telechargement::before { content: "⬇"; font-size: 1.1em; }
.page-content a.telechargement:hover   { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-content a.telechargement small   { font-weight: 400; opacity: .8; white-space: nowrap; }

/* Catégories en bas d'une page, sous-catégories d'une catégorie */
.page-content .page-categories,
.page-content .subcategories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: .9375rem;
    color: var(--color-muted);
}
.page-content .subcategories { margin-top: 0; padding-top: 0; border-top: 0; }
.page-content .lead { font-size: 1.125rem; color: var(--color-muted); }
/* Fil d'Ariane en tête de page : sans le retrait ni les espacements des listes du contenu */
.page-content .breadcrumb ol      { margin: 0 0 1rem; padding-left: 0; }
.page-content .breadcrumb li + li { margin-top: 0; }

/* Liste des pages d'une catégorie */
.page-list { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.page-content .page-list li + li { margin-top: 0; }
.page-list li { padding: 1.1rem 0; border-top: 1px solid var(--color-border); }
.page-list h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.page-list h2 a { text-decoration: none; }
.page-list p { margin: 0; color: var(--color-muted); }

/* --- Barre du haut de l'administration : partie droite (nom, déconnexion) --- */
.topbar-end { display: flex; align-items: center; gap: .75rem; }

/* Précision discrète dans une étiquette de champ */
.label-hint { font-weight: 400; font-size: .8125rem; color: var(--color-muted); }

/* --- Champ de fichier : caché, mais son étiquette sert de bouton (et reste accessible au clavier) --- */
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.file-input:focus-visible + label { box-shadow: var(--focus-ring); }

/* --- Liste « intitulé : valeur » (ex. informations d'un média) --- */
.info-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    margin: 0;
    font-size: .9375rem;
}
.info-list dt { color: var(--color-muted); }
.info-list dd { margin: 0; overflow-wrap: anywhere; color: var(--color-heading); }

/* --- Champ suivi d'un bouton (ex. adresse à copier) --- */
.input-action { display: flex; gap: .5rem; }
.input-action input { flex: 1; min-width: 0; }
[data-copier].is-copied { border-color: transparent; background: var(--color-success-s); color: var(--color-success); }

/* Page du site public */
.cms-main { max-width: 860px; }
.cms-main .page-content {
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

/* Page réservée (menu « Accès ») : encadré sous l'introduction, avec les boutons d'achat */
.access-box {
    margin-top: 1.25rem;
    padding: 2rem 1.5rem;
    border: 1px solid #cddcf6;
    border-radius: var(--radius);
    background: var(--color-primary-s);
    text-align: center;
}
.access-box h2 { margin: .5rem 0 .5rem; font-size: 1.375rem; }
.access-box p  { margin: 0 auto; max-width: 34rem; }
.access-icon   { width: 36px; height: 36px; color: var(--color-primary); }
.access-box .btn-row { justify-content: center; }
.access-box .access-note { margin-top: .9rem; font-size: .875rem; color: var(--color-muted); }

/* Espace client (/compte) : titre et boutons en haut, puis une carte par rubrique */
.account-main { max-width: 860px; }
.account-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}
.account-head h1 { margin: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.account-note    { margin: 0 0 1rem; color: var(--color-muted); }
.account-phone   { font-weight: 700; white-space: nowrap; }
.course-list { margin: 0; padding: 0; list-style: none; }
.course-list > li + li { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.course-title { margin: 0 0 .5rem; font-size: 1.0625rem; }
.course-pages { margin: 0; padding-left: 1.25rem; }
.course-pages li + li { margin-top: .3rem; }
.order-list { margin: 0; padding: 0; list-style: none; }
.order-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    padding: .7rem 0;
    border-top: 1px solid var(--color-border);
}
.order-list li:first-child { padding-top: 0; border-top: 0; }
.order-ref   { font-weight: 700; color: var(--color-heading); }
.order-total { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Boutique (/boutique) : grille de cartes produit, page d'un produit, panier.
   Style provisoire, en attendant le modèle graphique du site public. */
.shop-main { max-width: 1100px; }
.shop-head h1    { margin: 0 0 .5rem; }
.shop-head .lead { margin: 0; color: var(--color-muted); }
.shop-group h2   { margin: 0 0 1rem; font-size: 1.375rem; }
.shop-legal      { font-size: .8125rem; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 1.25rem;
}
.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}
.product-card-photo,
.product-figure,
.cart-line-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-muted);
}
.product-card-photo { aspect-ratio: 4 / 3; }
.product-card-photo img,
.cart-line-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-card-icon { width: 48px; height: 48px; opacity: .6; }
.product-card-body { display: flex; flex-direction: column; flex-grow: 1; gap: .4rem; padding: 1.1rem 1.25rem 1.25rem; }
.product-card-type { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.product-card-name { margin: 0; font-size: 1.125rem; }
.product-card-name a { color: var(--color-heading); text-decoration: none; }
.product-card-name a:hover { color: var(--color-primary); }
.product-card-summary { margin: 0; font-size: .9375rem; color: var(--color-muted); }
.product-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .75rem;
}
.product-price { font-family: var(--font-title); font-weight: 700; font-size: 1.125rem; color: var(--color-heading); }
.product-price s,
.product-price-big s,
.cart-line-price s { font-weight: 400; color: var(--color-muted); }

.product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.product-figure { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); }
.product-figure img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1     { margin: .25rem 0 .75rem; }
.product-info .lead  { margin: 0 0 1rem; font-size: 1.0625rem; color: var(--color-muted); }
.product-price-big   { margin: 0 0 .5rem; font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; color: var(--color-heading); }
.product-status,
.product-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .5rem 0 0;
    font-size: .9375rem;
    color: var(--color-muted);
}
.product-status       { color: var(--color-success); font-weight: 700; }
.product-status .icon,
.product-note .icon   { flex-shrink: 0; width: 18px; height: 18px; margin-top: .15rem; }
.product-buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 1.25rem 0 0; }
/* « Quantité » centré au-dessus de sa case, le nombre centré dans la case */
.product-quantity { display: grid; justify-items: center; }
.product-quantity label { text-align: center; }
.product-quantity input { width: 6rem; text-align: center; }
.product-list { margin: 0; padding-left: 1.4rem; }
.product-list li + li { margin-top: .35rem; }
.product-description {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.cart-main h1 { margin: .5rem 0 0; }
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.cart-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: .75rem 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}
.cart-line:first-child { padding-top: 0; border-top: 0; }
.cart-line:last-child  { padding-bottom: 0; }
.cart-line-photo { width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius); }
.cart-line-name  { margin: .1rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.cart-line-name a { color: var(--color-heading); text-decoration: none; }
.cart-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.cart-quantity { display: flex; align-items: center; gap: .5rem; margin: 0; }
.cart-quantity input { width: 4.5rem; }
.cart-line-price { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; text-align: right; white-space: nowrap; }
.cart-sums { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; margin: 0 0 1rem; }
.cart-sums dd { margin: 0; text-align: right; }
.cart-sums .cart-shipping { grid-column: 1 / -1; text-align: left; font-size: .875rem; color: var(--color-muted); }
.cart-sums .cart-sum-total { padding-top: .6rem; border-top: 1px solid var(--color-border); font-size: 1.25rem; font-weight: 700; color: var(--color-heading); }
.cart-link { position: relative; }
.cart-count {
    min-width: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

/* Commande (/boutique/commande) et remerciement après le paiement.
   Sur téléphone, le récapitulatif passe en tête : le client voit ce qu'il achète avant de remplir le formulaire. */
.order-form .cart-total { order: -1; }
.order-names { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
.order-lines { margin: 0 0 1rem; padding: 0; list-style: none; }
.order-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-top: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}
.order-lines li:first-child { padding-top: 0; border-top: 0; }
.order-line-price { white-space: nowrap; font-weight: 700; }
.order-line-price s { font-weight: 400; color: var(--color-muted); }
.thanks-card { max-width: 640px; margin: 0 auto; text-align: center; }
.thanks-card .btn-row { justify-content: center; }
.thanks-icon { width: 48px; height: 48px; color: var(--color-success); }
.thanks-address { display: inline-block; text-align: left; }

@media (min-width: 768px) {
    .product-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; }
    .cart-layout    { grid-template-columns: minmax(0, 1fr) 320px; }
    .order-names    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .order-form .cart-total { order: 0; }
}

/* Articles (/articles, pages de catégorie, derniers articles de l'accueil). Style provisoire, comme la boutique. */
.articles-main { max-width: 1100px; }
.article-categories { display: flex; flex-wrap: wrap; gap: .5rem; }
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
}
.article-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}
.article-card-image { display: block; aspect-ratio: 16 / 9; background: var(--color-bg); }
.article-card-image img { width: 100%; height: 100%; object-fit: cover; }
.article-card-body { display: flex; flex-direction: column; flex-grow: 1; gap: .45rem; padding: 1.1rem 1.25rem 1.25rem; }
.article-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    margin: 0;
    font-size: .8125rem;
    color: var(--color-muted);
}
.article-card-category { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.article-card-title { margin: 0; font-size: 1.125rem; }
.article-card-title a { color: var(--color-heading); text-decoration: none; }
.article-card-title a:hover { color: var(--color-primary); }
.article-card-summary { margin: 0; font-size: .9375rem; color: var(--color-muted); }
.article-card-lock { margin: auto 0 0; padding-top: .5rem; }
.article-date  { margin: -1rem 0 1.5rem; font-size: .9375rem; color: var(--color-muted); }
.article-image { display: block; width: 100%; height: auto; margin: 0 0 1.5rem; border-radius: var(--radius); }
.article-back  { font-size: .9375rem; }
.home-articles { margin-top: 2rem; }
.home-articles-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}
.home-articles-head h2 { margin: 0; font-size: 1.375rem; }

.table .reply-excerpt { min-width: 14rem; max-width: 30rem; overflow-wrap: anywhere; }

/* Pages d'une longue liste (ex. réponses du forum dans l'administration) */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }

/* --- 11. Petits utilitaires --- */
.text-center { text-align: center; }
.small { font-size: .8125rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.nowrap { white-space: nowrap; }
.mb-0 { margin-bottom: 0; }

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Masqué sur téléphone, visible à partir de la tablette */
.hide-mobile { display: none; }

/* --- 12. Écrans plus larges (tablette, ordinateur) --- */
@media (min-width: 768px) {
    :root {
        --gutter:   1.75rem;
        --topbar-h: 64px;
    }
    h1    { font-size: 1.5rem; }
    main  { padding-top: 1.75rem; padding-bottom: 1.75rem; }
    .hide-mobile { display: inline; }
    .cms-main .page-content { padding: 3rem 3.5rem; }
}

/* Moins d'animations pour ceux qui l'ont demandé dans leur système */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Détail du prix du pack (page du produit) */
.pack-detail-title { margin: 20px 0 8px; }
.pack-detail { list-style: none; margin: 0; padding: 0; }
.pack-detail li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--border, #e4e7ec); }
.pack-detail li span:last-child { white-space: nowrap; text-align: right; }
.pack-detail-total { font-weight: 700; border-bottom: 0 !important; }
.pack-detail-note { margin: 12px 0 0; font-weight: 600; }