/* ==========================================================================
   public.css : mise en page du SITE PUBLIC (menu, pied de page, sections)
   Chargé par includes/header.php sur les pages publiques seulement, après style.css.

   Règles de Jean (page de référence validée le 2026-10-21) :
     - tous les textes suivent le CSS de l'Administration (style.css) ; seuls h1, h2 et h3 ont leur propre style ;
     - une grille de 3 colonnes égales : le titre et son petit texte sur 2 colonnes, un bouton en face
       dans la 3e si besoin, puis 1, 2 ou 3 colonnes de même largeur ;
     - 50 px en haut et en bas de chaque section ;
     - texte long (Jean, 2026-10-22) : sur les 3 colonnes ; sur 2 colonnes seulement quand la 3e est occupée
       (image, vidéo, encart, autre texte) ; photos et vidéos : toute la largeur ;
     - le bleu de radiesthesie-etonnante.com sur les fonds clairs, le jaune sur les fonds noirs.

   Sommaire
     1. Réglages
     2. Sections et colonnes
     3. Texte long (pages, articles)
     4. Menu du haut
     5. Pied de page
     6. Bandeau de l'administrateur connecté
     7. Téléphone et tablette
     8. Page d'accueil (sections de la maquette validée le 2026-10-21)
     9. Les autres pages publiques dans le même moule (articles, boutique, panier, espace client, forum)
    10. Pages « À propos » et « Contact »
    11. Page « Formation » : ses modules en cartes
    12. Page d'un module : le sommaire de ses cours
    13. Forum : accueil, catégorie, sujet, ouvrir un sujet
    14. Page d'un cours : vidéo, texte mis en cartes
   ========================================================================== */

/* --- 1. Réglages --- */
.layout-public {
    --ink:          #0b0d12;      /* fond noir (menu, pied de page) : noir bleuté */
    --ink-2:        #151922;      /* boutons et listes posés sur le noir */
    --ink-line:     #2a3140;      /* traits sur le noir */
    --on-ink:       #f2f4f8;      /* texte sur le noir */
    --on-ink-soft:  #b3bbca;      /* texte secondaire sur le noir */
    --mist:         #eef1f6;      /* fonds et encarts gris bleuté */
    --blue:         #7391c9;      /* le bleu de radiesthesie-etonnante.com */
    --yellow:       #d4ee4e;      /* l'accent des fonds noirs */

    /* La couleur principale de style.css (boutons, liens) devient le bleu du site, assombri pour rester lisible
       (texte blanc sur les boutons) */
    --color-primary:   #3d5c99;
    --color-primary-d: #2f4b80;
    --color-primary-s: #edf1f9;
    --focus-ring:      0 0 0 3px rgba(115, 145, 201, .4);

    --wrap:        72rem;         /* largeur du contenu : 1 152 px */
    --gap:         1.5rem;        /* écart entre les colonnes : 24 px */
    --gutter:      clamp(1rem, 4vw, 2.5rem);
    --section-pad: 50px;          /* marge haute et basse de chaque section */
    --head-h:      4.75rem;       /* hauteur du menu */
    /* Largeur de 2 colonnes sur 3 (760 px sur grand écran), calculée sur la largeur du bloc qui contient l'élément */
    --text-w:      calc((100% - 2 * var(--gap)) * 2 / 3 + var(--gap));
}
.layout-public { background: var(--color-surface); }   /* pages blanches, comme la page de référence */
.btn-primary { box-shadow: none; }

/* --- 2. Sections et colonnes --- */
.public-main { max-width: none; padding: 0; }    /* les sections règlent elles-mêmes largeur et marges */
.public-main > * + * { margin-top: 0; }

.wrap {
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section      { padding-block: var(--section-pad); background: var(--color-surface); }   /* blanche, même si le fond de la page est gris */
.section-mist { background: var(--mist); }

/* Le modèle commun : titre et petit texte sur 2 colonnes, bouton éventuel en face dans la 3e */
.section-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem var(--gap);
    align-items: end;
    margin-bottom: 2rem;
}
.section-head:last-child { margin-bottom: 0; }
.head-title { grid-column: span 2; display: grid; gap: .9rem; justify-items: start; }
.head-title > * { margin: 0; }
.head-title p { color: var(--color-muted); }
.section-head > .btn { justify-self: end; white-space: nowrap; }
/* Titre sur les 3 colonnes (page d'un cours, fiche produit, Jean, 2026-10-26 ; astuce, 2026-10-27) : ce qui suit reste à la même place d'une page à l'autre */
.section-head.is-wide .head-title { grid-column: 1 / -1; }

/* Seuls h1, h2 et h3 ont leur propre style (les autres textes sont ceux de l'Administration) */
.head-title h1,
.head-title h2 { line-height: 1.15; letter-spacing: -.01em; }   /* retour à la ligne normal : le titre remplit les 2 colonnes (Jean, 2026-10-23) */
.head-title h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.head-title h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }

/* 1, 2 ou 3 colonnes de même largeur */
.cols-1, .cols-2, .cols-3 { display: grid; gap: var(--gap); }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-1 > *, .cols-2 > *, .cols-3 > * { min-width: 0; }

/* Messages réservés à l'administrateur (brouillon, page réservée) : au-dessus du titre */
.public-main .alert { margin: 0 0 1.5rem; }

/* --- 3. Texte long (pages, articles) : sur les 3 colonnes, sauf si la 3e est occupée (.split-layout) ---
   Les intertitres h3 se placent juste au-dessus de leur texte, dans la même largeur (style.css, .page-content). */
.prose > :last-child { margin-bottom: 0; }
/* Encadré « Contenu réservé » : 50 px au-dessus et au-dessous, comme la marge des sections (Jean, 2026-10-27) ;
   seul dans sa section, il n'a que la marge de la section */
.public-main .access-box,
.public-main .wrap:not(.hero-body) > .access-box { margin-top: var(--section-pad); }
.public-main .wrap:not(.hero-body) > .access-box:first-child { margin-top: 0; }

/* Texte sur 2 colonnes et, dans la 3e, ce qui l'accompagne (image d'un article, contenu d'un produit, total du panier) */
@media (min-width: 900px) {
    .split-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
    .split-layout > :first-child { grid-column: span 2; }
}

/* Section illustrée (media_section_html, html_layout_images) : le texte sur 2 colonnes, l'image dans la 3e,
   à gauche pour la première section illustrée de la page, à droite pour la suivante (règle de Jean, 2026-10-23) */
.page-content .media-section { margin: 2rem 0 1rem; }
.page-content > .media-section:first-child { margin-top: 0; }
.media-text > :first-child { margin-top: 0; }
.media-side img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.media-side > * + * { margin-top: 1rem; }
.page-content .media-side > * { margin-bottom: 0; }
@media (min-width: 900px) {
    .media-section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: center; }   /* image et texte centrés en hauteur */
    .media-section > .media-text { grid-column: span 2; }
    .media-section.media-left > .media-side { grid-column: 1; grid-row: 1; }
    .media-section.media-left > .media-text { grid-column: 2 / span 2; grid-row: 1; }
}
@media (max-width: 899.98px) {
    .media-side { margin-top: 1.5rem; }
}

/* --- 4. Menu du haut : logo tout à gauche, liens au centre, langue, compte et panier tout à droite ---
   Fond noir ; il reste en haut de l'écran quand on fait défiler la page. */
.site-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: 0 1px 0 var(--ink-line);
}
.head-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: var(--head-h);
    padding-inline: var(--gutter);
}
.site-head :focus-visible,
.site-foot :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; box-shadow: none; border-radius: 6px; }

/* Logo : l'image choisie pour les fonds noirs (Réglages › Identité du site), sinon le pendule et le nom */
.site-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--on-ink);
    text-decoration: none;
}
.site-brand:hover { color: var(--on-ink); }
.site-brand .brand-mark { color: var(--yellow); }
.site-logo { display: block; width: auto; height: 3.25rem; max-width: 13rem; object-fit: contain; }

/* Liens du menu (Réglages › Menu et pied de page). Le menu est une fenêtre « popover » sur téléphone (voir 7) :
   ces règles l'affichent en ligne sur ordinateur, à la place de la présentation du navigateur. */
.main-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: .25rem 1.6rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--font-title);
    font-size: .95rem;
}
.main-nav a { padding-block: .3rem; color: var(--on-ink-soft); text-decoration: none; }
.main-nav a:hover { color: var(--on-ink); }
.main-nav a[aria-current] { color: var(--yellow); }

.head-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .6rem; }   /* à droite, même sans liens au centre */

/* Langue : le code de la langue affichée ; la liste des autres versions de la page s'ouvre au clic */
.lang-current,
.lang-menu summary {
    padding: .4rem;
    font-family: var(--font-title);
    font-size: .85rem;
    color: var(--on-ink-soft);
}
.lang-menu { position: relative; }
.lang-menu summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    list-style: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after {                    /* petite flèche vers le bas */
    content: "";
    width: .38rem;
    height: .38rem;
    border-right: 1.5px solid;
    border-bottom: 1.5px solid;
    transform: translateY(-.12rem) rotate(45deg);
}
.lang-menu summary:hover,
.lang-menu[open] summary { color: var(--on-ink); }
.lang-list {
    position: absolute;
    top: calc(100% + .7rem);
    right: 0;
    z-index: 5;
    display: grid;
    min-width: 10rem;
    padding: .4rem;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink-2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.lang-list a { padding: .5rem .75rem; border-radius: var(--radius-sm); color: var(--on-ink-soft); text-decoration: none; }
.lang-list a:hover { background: rgba(242, 244, 248, .06); color: var(--on-ink); }
.lang-list a[aria-current] { color: var(--yellow); }

/* Mon compte, panier et bouton ☰ : boutons arrondis */
.head-pill,
.head-round {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.6rem;
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    background: var(--ink-2);
    color: var(--on-ink);
    font: inherit;
    font-family: var(--font-title);
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
}
.head-pill  { padding: .4rem 1rem; }
.head-round { width: 2.6rem; padding: 0; }
.head-pill:hover,
.head-round:hover { border-color: #3c4558; background: #1c212c; color: var(--on-ink); }
.head-pill .icon,
.head-round .icon { width: 1.1rem; height: 1.1rem; }
.head-round .cart-count {
    position: absolute;
    top: -.35rem;
    right: -.4rem;
    background: var(--yellow);
    color: var(--ink);
}
.menu-btn { display: none; }

/* --- 5. Pied de page : logo et liens, téléphone, citation (toute la largeur), © centré --- */
.site-foot {
    padding-block: var(--section-pad);
    background: var(--ink);
    color: var(--on-ink-soft);
}
.foot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ink-line);
}
.site-foot .site-logo { height: 3rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.foot-links a { color: var(--on-ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--on-ink); }
.foot-phone { display: flex; align-items: center; gap: .5rem; margin: 2rem 0 0; }
.foot-phone .icon { color: var(--yellow); }
.foot-phone a { color: var(--on-ink); }
.foot-quote {   /* sur les 3 colonnes : rien ne l'accompagne dans la 3e (Jean, 2026-10-22) */
    margin: 2rem 0 0;
    padding: 0;
    font-style: italic;
}
.foot-quote p { display: inline; margin: 0; }
.foot-quote cite { display: inline-block; margin-left: .35rem; font-style: normal; color: var(--on-ink); }   /* l'auteur passe à la ligne d'un seul bloc */
.foot-copy { margin: 1.5rem 0 0; text-align: center; }

/* --- 6. Bandeau de l'administrateur connecté (sous le menu) : état du site et liens vers l'administration --- */
.admin-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.5rem;
    padding: .5rem var(--gutter);
    background: var(--mist);
    color: var(--color-heading);
    font-size: .875rem;
}
.admin-strip p { display: flex; align-items: center; gap: .5rem; margin: 0; }
.admin-strip-note          { color: var(--color-warning); }
.admin-strip-note.is-danger { color: var(--color-danger); }
.admin-strip-note a        { color: inherit; font-weight: 700; }
.admin-strip .admin-strip-links { gap: 1.25rem; margin-left: auto; }
.admin-strip-links a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.admin-strip-links a:hover { text-decoration: underline; }

/* --- 7. Tablette et téléphone --- */
/* Colonnes empilées, toujours de même largeur ; le bouton passe sous le titre ; le texte prend toute la largeur */
@media (max-width: 899.98px) {
    .section-head,
    .cols-2,
    .cols-3 { grid-template-columns: minmax(0, 1fr); }
    .head-title { grid-column: auto; }
    .section-head > .btn { justify-self: start; }
}

/* Jusqu'à 8 liens au menu (2026-10-26) : sur les écrans moyens, liens resserrés et centrés entre le logo et les
   boutons de droite (et non plus au centre de l'écran), pour tenir sur une ligne sans jamais toucher le logo */
@media (max-width: 1299.98px) {
    .head-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .main-nav { justify-self: center; gap: .25rem 1.1rem; font-size: .9rem; }
}

/* Mon compte : l'icône seule (jusqu'à 1 300 px depuis le menu à 8 liens, pour lui laisser la place) */
@media (max-width: 1299.98px) {
    .head-pill { width: 2.6rem; padding: 0; }
    .head-pill-label { display: none; }
}

/* Le menu se replie derrière l'icône ☰ : une fenêtre « popover » sous la barre noire,
   refermée par l'icône, d'un geste à côté ou avec Échap */
@media (max-width: 1099.98px) {   /* 960 px avant le menu à 8 liens (2026-10-26) */
    .layout-public { --head-h: 4rem; }
    .head-row { display: flex; justify-content: space-between; gap: .75rem; }
    .head-actions { gap: .5rem; }
    .site-head .site-logo { height: 2.5rem; max-width: 9rem; }

    @supports selector(:popover-open) {
        .menu-btn { display: inline-flex; }
        .main-nav {
            position: fixed;
            inset: var(--head-h) 0 auto 0;
            max-height: calc(100dvh - var(--head-h));
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: .5rem var(--gutter) 1rem;
            overflow-y: auto;
            border-bottom: 1px solid var(--ink-line);
            background: var(--ink);
            color: var(--on-ink);
        }
        .main-nav:not(:popover-open) { display: none; }
        .main-nav a { padding-block: .8rem; border-bottom: 1px solid var(--ink-line); font-size: 1.05rem; }
        .main-nav a:last-child { border-bottom: 0; }
        .main-nav::backdrop { background: rgba(11, 13, 18, .5); }
    }
    /* Navigateur trop ancien pour les « popover » : les liens restent affichés, sur une ligne à part */
    @supports not selector(:popover-open) {
        .head-row { flex-wrap: wrap; }
        .main-nav { order: 3; flex-wrap: wrap; width: 100%; padding-bottom: .75rem; }
    }
}

/* --- 8. Page d'accueil (pages/accueil.php) : sections de la maquette validée par Jean le 2026-10-21 ---
   Fond blanc, sections grises (.section-mist) et noires (.section-dark). Sur le noir, l'accent devient le jaune. */
.layout-public {
    --mist-line:   #dfe4ec;       /* traits des cartes, sur fond clair */
    --mist-dash:   #b9c2d2;       /* pointillés des emplacements libres */
    --hero-h:      700px;         /* hauteur du bandeau sur grand écran */
    --accent:      var(--blue);
    --accent-text: var(--color-primary);
    --btn-bg:      var(--color-primary);
    --btn-fg:      #fff;
}
.section-dark {
    --accent:        var(--yellow);
    --accent-text:   var(--yellow);
    --btn-bg:        var(--yellow);
    --btn-fg:        var(--ink);
    --color-heading: var(--on-ink);
    --color-text:    var(--on-ink);
    --color-muted:   var(--on-ink-soft);
    background: var(--ink);
    color: var(--on-ink);
}
.home .section { scroll-margin-top: var(--head-h); }   /* lien vers une section (#formules) : son haut n'est pas caché sous le menu */
.home h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.home p  { margin: 0; }
.home :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none; border-radius: 6px; }

/* Menu transparent sur le bandeau, noir dès qu'on fait défiler la page (public.js ; sans JavaScript, il reste noir) */
.site-head[data-over-hero] { transition: background-color .25s ease, box-shadow .25s ease; }
.site-head.is-over-hero { background: transparent; box-shadow: none; }

/* Titre de section : une icône devant l'étiquette en petites capitales */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-title);
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.head-title .eyebrow,
.eyebrow { color: var(--accent-text); }
.section-dark .head-title .eyebrow,
.section-dark .eyebrow { color: var(--on-ink-soft); }
.eyebrow .icon { width: 1.4rem; height: 1.4rem; flex-shrink: 0; color: var(--accent); }

/* Boutons du site public (page d'accueil et autres pages) : arrondis, grands sauf les petits (.btn-sm) ;
   texte blanc sur le bleu, texte noir sur le jaune */
.public-main .btn {
    border-radius: 999px;
    font-family: var(--font-title);
    font-weight: 500;
    transition: transform .15s ease, background-color .15s ease;
}
.public-main .btn:not(.btn-sm) { gap: .55rem; min-height: 3.1rem; padding: .75rem 1.5rem; font-size: 1rem; }
.public-main .btn:hover { transform: translateY(-1px); }
.public-main .btn .icon { width: 1.1rem; height: 1.1rem; }
.btn-accent,
.btn-accent:hover { background: var(--btn-bg); color: var(--btn-fg); }
.btn-dark,
.btn-dark:hover { background: var(--ink); color: var(--on-ink); }
.btn-ghost { border-color: rgba(242, 244, 248, .35); background: transparent; color: var(--on-ink); }
.btn-ghost:hover { background: rgba(242, 244, 248, .08); color: var(--on-ink); }

/* Aide réservée à l'administrateur connecté (section vide…) */
.home-admin-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: .8rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid currentColor;
    background: var(--color-info-s);
    color: var(--color-info);
}

/* Bandeau d'accueil : 700 px sur grand écran ; l'image facultative en fond, assombrie comme celle de « Comment ça marche » */
.hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--head-h)); }   /* glisse sous le menu */
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .55; }
.hero-body {
    position: relative;
    display: grid;
    gap: 1.5rem;
    align-content: center;
    justify-items: start;
    padding-block: calc(var(--head-h) + 3rem) 3.5rem;
}
.hero-title {
    display: grid;
    gap: .1em;
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--on-ink);
    text-wrap: balance;
}
.hero-title em {
    font-family: var(--font-text);
    font-style: italic;
    font-weight: 400;
    font-size: 1.04em;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--yellow);
}
.hero-lead { max-width: 34rem; color: var(--on-ink-soft); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero.has-image .hero-body > * { max-width: 40rem; }
@media (min-width: 1200px) {
    .hero { height: var(--hero-h); }
    .hero-body { height: 100%; padding-block: var(--head-h) 1.5rem; }
}

/* Cartes des produits (boutique, page d'accueil) : même trait, même hauteur, grande photo carrée */
.offer-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.offer-card.section-dark { background: var(--ink); }   /* même trait gris que les autres cartes */
.offer-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--mist-line);
    background: var(--mist);
}
.offer-media > img { width: 100%; height: 100%; object-fit: cover; }
.offer-media.is-empty { display: grid; place-items: center; color: var(--blue); }
.offer-mark { width: 3rem; height: 3rem; }
.offer-strips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 100%; }
.offer-strips img { width: 100%; height: 100%; object-fit: cover; }
/* Pastilles posées sur la photo : la promotion en cours, puis celle choisie dans l'administration */
.offer-tags { position: absolute; top: .8rem; left: .8rem; right: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.offer-tag {
    display: inline-block;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: .8rem;
}
.offer-body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.2rem 1.4rem 1.4rem; }
.offer-body > *,
.offer-foot > * { margin: 0; }
.offer-body h3 { font-size: 1.25rem; line-height: 1.3; }
.offer-level {
    font-family: var(--font-title);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.offer-note { color: var(--color-muted); }
.offer-foot { display: grid; gap: .1rem; margin-top: auto; padding-top: .4rem; }
.offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; font-family: var(--font-title); }
.offer-price strong { font-size: 2rem; font-weight: 600; line-height: 1.2; color: var(--color-heading); }
.offer-price s { font-size: 1.1rem; color: var(--color-muted); }
/* Promotion : « Jusqu'au 31 décembre 2026 » sous le prix */
.offer-until { display: flex; align-items: center; gap: .45rem; color: var(--accent-text); }
.offer-until .icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.offer-body > .btn { margin-top: .5rem; }
/* Emplacement libre (administrateur seulement) */
.offer-card.is-free {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .6rem;
    padding: 2rem;
    border: 2px dashed var(--mist-dash);
    background: transparent;
    text-align: center;
}
.offer-card.is-free .icon { width: 2.5rem; height: 2.5rem; color: var(--blue); }
.offer-card.is-free strong { font-family: var(--font-title); font-weight: 600; color: var(--color-heading); }
.offer-card.is-free p { max-width: 18rem; color: var(--color-muted); }
@media (min-width: 900px) {
    .offer-grid > .offer-card { min-height: 30.5rem; }
}

/* Comment ça marche : 3 étapes sur le noir, image de fond facultative */
.steps { position: relative; overflow: hidden; }
.steps-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .55; }
.steps .wrap { position: relative; }
.step-list { margin: 0; padding: 0; list-style: none; }
.step {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.5rem;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: rgba(21, 25, 34, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.step-num { font-family: var(--font-title); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--accent); }
.step p { color: var(--on-ink-soft); }

/* Vidéo de présentation : deux colonnes de même hauteur, texte sans cadre */
.video-row { align-items: stretch; }
.video-text { display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.video-text p { color: var(--color-muted); }
.video-text .btn { align-self: flex-start; margin-top: .4rem; }
.video-row .video-externe { margin: 0; border-radius: var(--radius); }
.video-empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .6rem;
    min-height: 18rem;
    padding: 2rem;
    border: 2px dashed var(--mist-dash);
    border-radius: var(--radius);
    color: var(--color-muted);
    text-align: center;
}
.video-empty .icon { width: 2.5rem; height: 2.5rem; color: var(--blue); }

/* Nos engagements : encarts gris, icône dans un rond blanc */
.trust-list { margin: 0; padding: 0; list-style: none; }
.trust-item {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: .2rem 1rem;
    align-items: start;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--mist);
}
.trust-item .icon {
    grid-row: span 2;
    width: 2.75rem;
    height: 2.75rem;
    padding: .6rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
}
.trust-item strong { font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; color: var(--color-heading); }
.trust-item span { color: var(--color-muted); }

/* Le programme : une carte par module en vente, puis celle du module à venir */
.module-card {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    min-height: 11rem;
    overflow: hidden;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
}
a.module-card:hover { border-color: var(--blue); color: inherit; }
.module-photo { width: 100%; height: 0; min-height: 100%; object-fit: cover; }   /* la photo suit la hauteur du texte, sans l'imposer */
.module-number {
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--yellow);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 1;
}
.module-text { display: grid; align-content: center; gap: .35rem; padding: 1.1rem 1.25rem; }
.module-text small {
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.module-text strong { font-family: var(--font-title); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--color-heading); }
.module-text span { color: var(--color-muted); }

/* Apprendre en expérimentant : texte et citation à gauche, portrait dans un encart noir à droite */
.learn-text { display: grid; align-content: center; justify-items: start; gap: 1.1rem; }
.learn-text > p { color: var(--color-muted); }
.learn-quote {
    margin: .4rem 0 0;
    padding: 1.1rem 1.3rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--mist);
    font-style: italic;
}
.learn-quote cite { display: block; margin-top: .4rem; font-size: .95rem; font-style: normal; color: var(--color-muted); }
.portrait {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: center;
    align-self: center;
    padding: 1.5rem;
    border-radius: var(--radius);
}
.portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); filter: grayscale(1); }
.portrait p { margin-top: .5rem; color: var(--on-ink-soft); }
.portrait > div:only-child { grid-column: 1 / -1; }
/* Seule section illustrée de la page d'accueil, donc la première : le portrait à gauche (règle des images, 2026-10-23) */
@media (min-width: 900px) {
    .learn-row > .portrait { order: -1; }
}

/* Dernières astuces : image carrée, cadenas sur celles qui sont réservées */
.tip { display: grid; align-content: start; gap: .9rem; color: inherit; text-decoration: none; }
.tip:hover { color: inherit; }
.tip-media { position: relative; display: block; }
.tip-media img,
.tip-empty { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); }
.tip-media img { object-fit: cover; filter: grayscale(.25); transition: filter .2s ease; }
.tip:hover .tip-media img { filter: none; }
.tip-empty { display: grid; place-items: center; background: var(--ink-2); color: var(--yellow); }
.tip-empty .icon { width: 3rem; height: 3rem; }
.tip-lock {
    position: absolute;
    top: .9rem;
    left: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: .8rem;
}
.tip-lock .icon { width: 1rem; height: 1rem; }
.tip-text { display: grid; gap: .2rem; }
.tip-text small {
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}
.tip-text strong { font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--on-ink); }
.tip:hover .tip-text strong { text-decoration: underline; text-underline-offset: 3px; }

/* Les avis : encadrés, avec le portrait (ou l'initiale) et le nom */
.review {
    display: grid;
    align-content: start;
    gap: 1.1rem;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
}
.review blockquote { margin: 0; }
.review figcaption { display: flex; align-items: center; gap: .85rem; font-family: var(--font-title); font-weight: 500; color: var(--color-heading); }
.review-avatar {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--mist);
    object-fit: cover;
}
span.review-avatar { display: grid; place-items: center; color: var(--color-primary); font-size: 1.3rem; }

/* Restons en contact : lettre d'information et chaîne YouTube */
.keep-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.75rem;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink-2);
}
.keep-card.is-free { border-style: dashed; }
.keep-card p { color: var(--on-ink-soft); }
.keep-card a:not(.btn) { color: var(--yellow); }
.keep-body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.keep-action { display: flex; align-items: flex-end; }
.keep-foot { display: grid; gap: .5rem; text-align: center; }   /* message et politique de confidentialité centrés (Jean, 2026-10-30) */
.keep-foot p { margin: 0; }
/* Sur 2 colonnes, les encarts partagent leurs rangées (texte, libellé, bouton, note) : les boutons sont à la même hauteur */
@media (min-width: 900px) {
    .keep-grid { row-gap: .9rem; }
    .keep-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
    .keep-card .news-form { display: contents; }
    .keep-card .news-form > label { margin-bottom: -.4rem; }   /* libellé collé au champ, comme sur téléphone */
    .keep-action { grid-row: 3; }
    .keep-foot { grid-row: 4; margin-top: -.4rem; }
}
.keep-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    background: var(--ink);
    color: var(--yellow);
}
.news-form { display: grid; gap: .5rem; width: 100%; margin-top: auto; }
.news-form label { margin: 0; font-family: var(--font-title); font-size: .95rem; font-weight: 500; color: var(--on-ink); }
.news-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.news-row input {
    flex: 1 1 14rem;
    min-width: 0;
    min-height: 3.1rem;
    padding: .6rem 1.1rem;
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    font: inherit;
}
.news-row input:focus { border-color: var(--yellow); outline: none; }
.keep-card .news-message { color: var(--yellow); }   /* « .keep-card » : sinon le gris des paragraphes de l'encart l'emporte */
.keep-card .news-message.is-error { color: #ff9aa5; }
.news-privacy { margin: 0; font-size: .8125rem; color: var(--on-ink-soft); }   /* lien vers la politique de confidentialité */
.news-privacy a { color: var(--yellow); }
.news-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* champ piège, hors de l'écran */
/* Case « Je ne suis pas un robot » sur le noir : sous le bouton, avec le message (les deux boutons restent alignés) */
.keep-foot .robot-check,
.keep-foot .robot-noscript { margin: 0; }
.keep-foot .robot-check .robot-label { border-color: var(--ink-line); background: var(--ink); color: var(--on-ink-soft); font-size: .875rem; }
.keep-foot .robot-check .robot-label:focus-visible { box-shadow: 0 0 0 2px var(--yellow); }
.keep-foot .robot-box { border-color: var(--on-ink-soft); background: var(--ink); }
.keep-foot .robot-check.is-working .robot-box { border-color: var(--ink-line); border-top-color: var(--yellow); }
.keep-foot .robot-check.is-done .robot-box { border-color: var(--yellow); background: var(--yellow); }
.keep-foot .robot-check.is-done .robot-box::after { border-color: var(--ink); }
.keep-foot .robot-check.is-done .robot-text { color: var(--yellow); }
.keep-foot .robot-check.is-error .robot-text,
.keep-foot .robot-noscript { color: #ff9aa5; }

/* Tablette et téléphone */
@media (max-width: 899.98px) {
    .offer-grid { max-width: 34rem; }
    .offer-card.is-free { min-height: 12rem; }
}
@media (max-width: 759.98px) {
    .hero-media img { opacity: .35; }   /* le texte passe sur l'image : plus sombre */
    .portrait { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
@media (prefers-reduced-motion: reduce) {
    .public-main .btn, .tip-media img, .site-head[data-over-hero] { transition: none; }
    .public-main .btn:hover { transform: none; }
}

/* --- 9. Les autres pages publiques dans le même moule (articles, boutique, panier, commande, espace client, forum) ---
   Une section (blanche, ou grise pour les pages à cartes), le titre et son petit texte sur 2 colonnes, un bouton en face
   si besoin, puis 1, 2 ou 3 colonnes égales. */
.public-main .wrap:not(.hero-body) > * + * { margin-top: 1.25rem; }   /* blocs d'une section : le même écart que dans l'administration */
.public-main .section-mist { flex: 1; }
.public-main:has(> .section-mist:last-child) { display: flex; flex-direction: column; background: var(--mist); }   /* le gris descend jusqu'au pied de page */

/* Fil d'Ariane : au-dessus du titre, en petites capitales, à la place de l'étiquette */
.head-title .breadcrumb ol {
    font-family: var(--font-title);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.head-title .breadcrumb a { color: var(--accent-text); }
.head-title .breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.head-title .breadcrumb li + li::before { color: var(--mist-dash); }
.head-actions-row { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }   /* plusieurs boutons en face du titre */
.section-head > .head-actions-row { align-self: end; }

/* Sous-titre d'un groupe dans une section (groupes de la boutique) */
.group-title { margin: 2.5rem 0 0; font-size: 1.5rem; line-height: 1.2; }
.section-head + .group-title,
.wrap > .group-title:first-child { margin-top: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.public-note { font-size: .875rem; color: var(--color-muted); }

/* Cartes de l'administration (formulaires, listes) posées sur le gris : même trait et mêmes coins que les cartes de produits */
.public-main .card { border: 1px solid var(--mist-line); border-radius: var(--radius); box-shadow: none; }
.public-main .card-header { border-radius: var(--radius) var(--radius) 0 0; }

/* Cartes des articles (liste, catégories) : comme celles des produits */
.public-main .article-card { border: 1px solid var(--mist-line); border-radius: var(--radius); box-shadow: none; }
.public-main .article-card-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }   /* overflow : l'image ne force pas la hauteur */
.public-main .article-card-meta { font-family: var(--font-title); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.public-main .article-card-category { color: var(--accent-text); font-weight: 500; }
.public-main .article-card-title { font-size: 1.15rem; line-height: 1.3; }

/* Astuce : l'image à la une puis le texte sur les 2 premières colonnes ; dans la 3e, le menu des catégories, sans cadre,
   séparé du contenu par un trait vertical qui descend jusqu'au pied de page (il reste visible pendant la lecture).
   Sur téléphone, le menu passe sous l'article, après un trait horizontal. */
.article-main > * + * { margin-top: 1.5rem; }
.article-figure, .article-video { margin: 0; }   /* la vidéo YouTube d'une astuce prend la place de l'image à la une */
.article-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.side-menu-title { margin: 0 0 .6rem; font-size: 1.25rem; line-height: 1.3; }
.side-menu ul { margin: 0; padding: 0; list-style: none; }
.side-menu a { display: block; padding: .15rem 0; line-height: 1.45; color: var(--color-heading); text-decoration: none; }
.side-menu a:hover { color: var(--accent-text); text-decoration: underline; }
.side-menu a.is-current { color: var(--accent-text); font-weight: 700; }
.side-menu-depth-1 a { padding-left: 1rem; }
.side-menu-depth-2 a { padding-left: 2rem; }
.side-menu-depth-3 a { padding-left: 3rem; }
.side-menu-latest { margin-top: 1.75rem; }   /* les dernières astuces, sous les catégories : même interligne qu'elles (Jean, 2026-10-26) */
@media (min-width: 900px) {
    .article-layout > .article-side {
        align-self: stretch;
        margin-bottom: calc(-1 * var(--section-pad));      /* le trait traverse la marge du bas de la section */
        padding: 0 0 var(--section-pad) var(--gap);
        border-left: 1px solid var(--mist-line);
    }
    .side-menu { position: sticky; top: calc(var(--head-h) + 1.5rem); }
}
@media (max-width: 899.98px) {
    .article-layout > .article-side { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--mist-line); }
}
.article-back { font-size: .9375rem; }

/* Fiche d'un produit : la photo carrée (originaux de 1000 × 1000 px) et l'achat en 2 colonnes, le résumé sous le prix,
   puis ce qu'il contient et sa description */
.product-photo-box {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
    background: #fff;
}
.product-photo-box img { width: 100%; height: 100%; object-fit: cover; }   /* plein cadre, accessoires compris */
.product-photo-box .offer-mark { width: 4rem; height: 4rem; color: var(--blue); }
.product-photo-box .offer-strips { width: 100%; }              /* formation sans photo : la bande de sa carte */
.product-media { display: grid; align-content: start; gap: 1rem; }
/* Section « Le produit en vidéo » (Jean, 2026-10-28) : 2 colonnes égales, comme la photo et l'achat au-dessus : la vidéo
   à gauche, le titre et le texte à droite, centrés en hauteur ; sur un écran étroit, le titre et le texte au-dessus de la vidéo */
.product-video-row { display: grid; gap: var(--gap); }
.product-video-text { display: grid; align-content: center; gap: .9rem; }
.product-video-text h2 { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.01em; }
.product-video-text p { color: var(--color-muted); }
.product-video-text > div > :last-child { margin-bottom: 0; }
.product-video { margin: 0; }
@media (min-width: 900px) {
    .product-video-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
    .product-video-row > .product-video { grid-column: 1; grid-row: 1; }
    .product-video-row > .product-video-text { grid-column: 2; grid-row: 1; }
}
.product-buy-box { display: grid; align-content: start; gap: .75rem; }
.product-buy-box > * { margin: 0; }
.product-buy-box .offer-level { margin: 0; }
.product-buy-box .product-price-big { margin: 0; font-size: 2.25rem; font-weight: 600; }
.product-buy-box .product-price-big s { margin-right: .35rem; font-size: 1.4rem; font-weight: 400; color: var(--color-muted); }
.product-buy-box .product-promo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; color: var(--accent-text); }
.product-promo > span:last-child { display: inline-flex; align-items: center; gap: .45rem; }
.product-promo .icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
/* Panier : la promotion sous le nom du produit (pastille et date de fin) */
.cart-line-promo { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin: .3rem 0 0; font-size: .875rem; color: var(--accent-text); }
.cart-line-promo strong { font-family: var(--font-title); font-weight: 600; }
.product-buy-box .product-buy { margin: .5rem 0 0; }
.product-buy-box .product-note,
.product-buy-box .product-status { margin: 0; }
.product-buy-box .alert { margin: 0; }
.public-main .product-contents .product-list li + li { margin-top: .45rem; }

/* Panier et commande : les lignes ou le formulaire sur 2 colonnes, le total dans la 3e */
@media (min-width: 900px) {
    .public-main .cart-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
    .public-main .cart-layout > :not(:last-child) { grid-column: span 2; }
}
.public-main .thanks-card { max-width: var(--text-w); margin-inline: auto; }   /* message centré, comme la page de connexion */

/* Espace client : cartes sur 2 colonnes égales */
.account-grid { align-items: start; }
.account-grid > .card + .card { margin-top: 0; }
.public-main .product-description { padding: 0; border-radius: 0; background: none; box-shadow: none; }

/* --- 10. Pages « À propos » et « Contact » (pages à modèle, includes/modeles.php) ---
   Mêmes sections que la page d'accueil : titre et petit texte sur 2 colonnes, puis 1, 2 ou 3 colonnes égales. */
.about-text { display: grid; align-content: start; gap: 1rem; }
.about-text h3 { margin-bottom: .1rem; }
.about-signature { font-family: var(--font-title); font-weight: 600; color: var(--color-heading); }
.about-figure { margin: 0; }
.about-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Les principales différences : un tableau sur le noir, une ligne par critère, aligné sur les 3 colonnes */
.compare { display: block; width: 100%; border-collapse: collapse; }
.compare thead,
.compare tbody { display: block; }
.compare tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem var(--gap);
    padding: 1.25rem 0;
    border-top: 1px solid var(--ink-line);
}
.compare thead tr { padding-top: 0; border-top: 0; }
.compare th,
.compare td { display: block; padding: 0; text-align: left; vertical-align: top; }
.compare thead th {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.compare tbody th { font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--on-ink); }
.compare td { color: var(--on-ink-soft); }
@media (max-width: 899.98px) {
    .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* lu, mais pas montré */
    .compare tr { grid-template-columns: minmax(0, 1fr); }
    .compare thead + tbody tr:first-child { border-top: 0; }
    .compare td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .2rem;
        font-family: var(--font-title);
        font-size: .75rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--accent-text);
    }
}

/* Contact : encarts des coordonnées, questions fréquentes, formulaire sur 2 colonnes et « Vos données » dans la 3e */
.contact-list a { color: var(--accent-text); font-weight: 700; overflow-wrap: anywhere; }
.faq-list { align-items: start; }
.faq-item {
    display: grid;
    gap: .6rem;
    padding: 1.5rem;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.faq-item h3 { font-size: 1.15rem; line-height: 1.35; }
.faq-item p { color: var(--color-muted); }
.contact-form > .alert { margin: 0 0 .5rem; }
.contact-form > label:first-of-type { margin-top: 1rem; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); }
.contact-form textarea { min-height: 12rem; }
.contact-form .btn-row { margin-top: 1.25rem; }
.contact-form .btn-row + .field-hint { margin-top: 1rem; }   /* lien vers la politique de confidentialité, sous le bouton (Jean, 2026-10-27) */
.contact-note { align-self: start; }
@media (max-width: 599.98px) {
    .contact-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899.98px) {
    .contact-layout > .contact-note { margin-top: 1.5rem; }
}

/* --- 11. Page « Formation » (pages/page.php, formation_cards dans includes/formation.php) : ses modules en cartes, sur fond noir ---
   Maquette validée par Jean le 2026-10-23 : une carte par module, 3 par ligne, photo en noir et blanc, grand numéro
   dessiné d'un trait jaune ; la carte en pointillés annonce le module à venir. Un nouveau module prend la place suivante. */
.module-hub { flex: 1; }                                       /* le noir descend jusqu'au pied de page */
.public-main:has(> .module-hub:last-child) { display: flex; flex-direction: column; background: var(--ink); }
.public-main:has(> .module-hub:last-child) + .site-foot { border-top: 1px solid var(--ink-line); }
.hub-intro { color: var(--on-ink-soft); }
.hub-intro a { color: var(--yellow); }
.hub-intro > :last-child { margin-bottom: 0; }

.hub-grid { margin: 0; padding: 0; list-style: none; }
.hub-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 4 / 5;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 1.4rem;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink-2);
    color: var(--on-ink);
    text-decoration: none;
    transition: border-color .3s ease;
}
/* La photo du module (sa fiche dans la boutique) en noir et blanc, contrastée ; elle s'approche un peu au survol */
.hub-photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.15) brightness(.78);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.hub-card::before {     /* ombre en haut (le numéro) et en bas (le titre) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(11, 13, 18, .55) 0%, rgba(11, 13, 18, 0) 32%, rgba(11, 13, 18, 0) 42%, rgba(11, 13, 18, .94) 100%);
}
.hub-card::after {      /* léger grain photographique */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: .14;
    mix-blend-mode: overlay;
}
a.hub-card:hover { border-color: var(--yellow); color: var(--on-ink); }
a.hub-card:hover .hub-photo { transform: scale(1.06); filter: grayscale(1) contrast(1.15) brightness(.95); }
.hub-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: none; }

.hub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.hub-num {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(3.5rem, 6vw, 5rem);
    line-height: .9;
    letter-spacing: -.03em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--yellow);
}
@supports not (-webkit-text-stroke: 1px currentColor) {
    .hub-num { color: var(--yellow); }
}
.hub-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.hub-tag {
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: .8rem;
}
/* Module dont aucun cours n'est publié : sa carte n'est montrée qu'à l'administrateur connecté */
.hub-tag.is-unready { border: 1px solid var(--on-ink-soft); background: rgba(11, 13, 18, .7); color: var(--on-ink); }
.hub-body { display: grid; gap: .45rem; }
.hub-label {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--yellow);
}
.hub-title { font-family: var(--font-title); font-weight: 600; font-size: 1.45rem; line-height: 1.2; color: var(--on-ink); }
.hub-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .6rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(242, 244, 248, .18);
    color: var(--on-ink-soft);
}
.hub-foot > span { display: inline-flex; align-items: center; gap: .45rem; }
.hub-go {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    transition: transform .3s ease;
}
.hub-foot > .hub-go { display: grid; gap: 0; }   /* plus fort que « .hub-foot > span » : la flèche bien au centre du rond */
.hub-go .icon { width: 1.2rem; height: 1.2rem; }
a.hub-card:hover .hub-go { transform: rotate(45deg); }   /* la flèche ↗ devient → */

/* Le module à venir : la même carte, en pointillés, sans photo */
.hub-card.is-next { border-style: dashed; border-color: #3c4558; background: transparent; }
.hub-card.is-next::before,
.hub-card.is-next::after { content: none; }
.hub-card.is-next .hub-num { -webkit-text-stroke-color: #4a5468; }
.hub-card.is-next .hub-label,
.hub-card.is-next .hub-title { color: var(--on-ink-soft); }

/* Tablette et téléphone : une carte par ligne, moins haute */
@media (max-width: 899.98px) {
    .hub-card { aspect-ratio: 16 / 10; }
}
@media (max-width: 599.98px) {
    .hub-card { aspect-ratio: 4 / 3; padding: 1.1rem; }
    .hub-num { font-size: 3rem; }
    .hub-title { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hub-card, .hub-photo, .hub-go { transition: none; }
    a.hub-card:hover .hub-photo { transform: none; }
}

/* --- 12. Page d'un module (pages/page.php, formation_sommaire dans includes/formation.php) : le sommaire de ses cours ---
   Maquette validée par Jean le 2026-10-23, proche de l'ancien site : un cours par bande, blanche puis grise ; à gauche
   la pastille de couleur du cours (images 1.png à 10.png de la médiathèque, lesson_badges), à côté « Cours 1 », le titre,
   le début du cours et le bouton ; un cours que le visiteur ne peut pas lire porte un cadenas. */
.module-intro { color: var(--color-muted); }
.module-intro > :last-child { margin-bottom: 0; }
.module-meta { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-muted); }
.module-meta .icon { color: var(--blue); }

.lesson-list { margin: 0; padding: 0; list-style: none; }
.lesson { padding-block: var(--section-pad); background: var(--color-surface); }   /* chaque bande = une section : 50 px */
.lesson:nth-child(even) { background: var(--mist); }
.lesson-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; align-items: center; }
.public-main .wrap.lesson-row > * + * { margin-top: 0; }
.lesson-badge {
    display: block;
    width: 9rem;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 16px rgba(38, 41, 56, .16));
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.lesson:hover .lesson-badge { transform: rotate(-8deg) scale(1.04); }
/* Sans pastille dans la médiathèque pour ce numéro : le numéro dans un rond bleu */
.lesson-badge.is-number {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 2.6rem;
}
.lesson-text { display: grid; gap: .55rem; justify-items: start; }
.lesson-text > * { margin: 0; }
.lesson-label {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.lesson-text h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; }
.lesson-text h2 a { color: inherit; text-decoration: none; }
.lesson-text h2 a:hover { color: var(--color-primary); }
.lesson-text p { color: var(--color-muted); }
.lesson-text .btn { margin-top: .5rem; }
.lesson-text .lesson-lock {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .5rem;
    padding: .6rem 1.1rem;
    border: 1px dashed var(--mist-dash);
    border-radius: 999px;
    font-family: var(--font-title);
    font-weight: 500;
    font-size: .95rem;
}
.lesson-lock .icon { width: 1.05rem; height: 1.05rem; }
.lesson.is-reserved .lesson-badge { filter: grayscale(1) opacity(.55); }

@media (max-width: 599.98px) {
    .lesson-row { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
    .lesson-badge { width: 5rem; }
    .lesson-badge.is-number { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lesson-badge { transition: none; }
    .lesson:hover .lesson-badge { transform: none; }
}

/* --- 13. Forum (pages/forum/) : maquette validée par Jean le 2026-10-23 ---
   Accueil : bandeau noir (titre, « Ouvrir un sujet », chiffres en jaune), une carte par catégorie avec sa pastille
   (images 1.png, 2.png… de la médiathèque, comme les cours), l'invitation à ouvrir un sujet, puis les derniers échanges.
   Catégorie : sa pastille devant le titre, ses sujets en lignes (le sujet sur 2 colonnes, ses chiffres dans la 3e).
   Sujet : les messages sur 2 colonnes, ceux de l'administrateur en noir et jaune, le résumé du sujet dans la 3e.
   Ouvrir un sujet : le formulaire sur 2 colonnes, les conseils dans la 3e.
   Visiteur sans le pack : un cadenas à la place des flèches, l'invitation à rejoindre le forum sur fond noir. */

/* Bandeau de l'accueil : un halo bleu sur le noir, les chiffres du forum en jaune */
.forum-hero { background: radial-gradient(56rem 26rem at 88% -12%, rgba(115, 145, 201, .26), transparent 62%), var(--ink); }
.forum-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 0; list-style: none; }
.forum-stats li { display: grid; gap: .3rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-line); }
.forum-stats strong {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--yellow);
}
.forum-stats span { font-family: var(--font-title); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-soft); }

/* Forum réservé aux membres, ou fermé aux nouveaux messages : une note en pointillés (sur le noir, ou sur le gris) */
.forum-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: 0;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--ink-line);
    border-radius: var(--radius);
    color: var(--on-ink-soft);
}
.forum-note .icon { flex-shrink: 0; margin-top: .1rem; color: var(--yellow); }
.forum-note.is-light { border-color: var(--mist-dash); color: var(--color-muted); }
.forum-note.is-light .icon { color: var(--color-primary); }

/* Pastille d'une catégorie : l'image de la médiathèque, sinon son numéro dans un rond bleu */
.forum-badge,
.forum-mini-badge { display: block; flex-shrink: 0; height: auto; aspect-ratio: 1; object-fit: contain; }
.forum-badge { width: 4.75rem; filter: drop-shadow(0 8px 12px rgba(38, 41, 56, .16)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.forum-mini-badge { width: 1.35rem; }
.forum-badge.is-number,
.forum-mini-badge.is-number {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-title);
    font-weight: 600;
    line-height: 1;
}
.forum-badge.is-number { font-size: 1.5rem; filter: none; }
.forum-mini-badge.is-number { font-size: .55rem; }

/* Les catégories : une carte chacune, 3 par ligne */
.forum-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.forum-cat {
    position: relative;
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 1.25rem 1.1rem;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease;
}
.forum-cat:hover { transform: translateY(-4px); border-color: #c5d0e3; box-shadow: 0 22px 40px -24px rgba(38, 41, 56, .45); color: inherit; }
.forum-cat:hover .forum-badge { transform: rotate(-8deg) scale(1.05); }
.forum-cat:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.forum-cat-text { display: grid; gap: .3rem; padding-right: 2rem; }
.forum-cat-label { font-family: var(--font-title); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }
.forum-cat h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.forum-cat-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mist-line);
    font-size: .9rem;
    color: var(--color-muted);
}
.forum-cat-foot b { font-family: var(--font-title); font-weight: 600; color: var(--color-heading); }
.forum-cat-go {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--mist);
    color: var(--color-primary);
    transition: background-color .2s ease, color .2s ease;
}
.forum-cat-go .icon { width: 1.05rem; height: 1.05rem; }
.forum-cat:hover .forum-cat-go { background: var(--color-primary); color: #fff; }

/* L'invitation à ouvrir un sujet, sur le noir : les 2 dernières colonnes de la dernière ligne si elles sont libres
   (span-2), sinon toute une ligne (span-3) ; sur tablette et téléphone, toujours toute une ligne */
.forum-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--radius);
}
.forum-cta.span-2 { grid-column: span 2; }
.forum-cta.span-3 { grid-column: 1 / -1; }
.forum-cta::after {          /* cercles discrets dans le coin */
    content: "";
    position: absolute;
    right: -2.5rem;
    bottom: -3.5rem;
    width: 13rem;
    height: 13rem;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    box-shadow: 0 0 0 2.5rem rgba(255, 255, 255, .02), 0 0 0 5rem rgba(255, 255, 255, .015);
    pointer-events: none;
}
.forum-cta > * { position: relative; z-index: 1; }
.forum-cta h3 { margin: 0 0 .4rem; font-size: 1.35rem; line-height: 1.3; }
.forum-cta p { margin: 0; max-width: 30rem; color: var(--on-ink-soft); }
.forum-cta .btn { flex-shrink: 0; }

/* Liste des sujets : le sujet sur 2 colonnes (auteur, titre, « Ouvert par »), ses chiffres dans la 3e */
.forum-topic-list { margin-bottom: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--mist-line); border-radius: var(--radius); background: var(--color-surface); }
.forum-topic-list > li + li { border-top: 1px solid var(--mist-line); }
.forum-topic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem var(--gap);
    align-items: center;
    padding: 1.15rem 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
.forum-topic:hover { background: #f6f8fb; color: inherit; }
.forum-topic-main { grid-column: span 2; display: flex; align-items: center; gap: 1rem; min-width: 0; }
.forum-topic-text { display: grid; gap: .15rem; min-width: 0; }
.forum-topic-cat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-title);
    font-weight: 500;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.forum-topic-title { font-family: var(--font-title); font-weight: 500; font-size: 1.08rem; line-height: 1.35; color: var(--color-heading); overflow-wrap: anywhere; transition: color .15s ease; }
.forum-topic-title .pill { vertical-align: .1em; }
.forum-topic:hover .forum-topic-title { color: var(--color-primary); }
.forum-topic-by { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; font-size: .9rem; color: var(--color-muted); }
/* « Jean a répondu » : jaune sur noir */
.forum-answered {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .6rem .12rem .45rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--yellow);
    font-family: var(--font-title);
    font-weight: 500;
    font-size: .78rem;
    white-space: nowrap;
}
.forum-answered .icon { width: .9rem; height: .9rem; }
.forum-topic-side { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.forum-topic-count { display: inline-flex; align-items: center; gap: .4rem; min-width: 3.2rem; font-family: var(--font-title); font-weight: 600; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.forum-topic-count .icon { color: var(--blue); }
.forum-topic-last { display: grid; gap: .2rem; justify-items: start; min-width: 0; font-size: .85rem; color: var(--color-muted); }
.forum-last-by { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; font-family: var(--font-title); font-weight: 500; color: var(--color-heading); overflow-wrap: anywhere; }
.forum-unanswered { padding: .2rem .65rem; border: 1px dashed var(--mist-dash); border-radius: 999px; font-size: .78rem; white-space: nowrap; }
.forum-topic-go { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: var(--color-primary); transition: background-color .15s ease, color .15s ease; }
.forum-topic-go .icon { width: 1rem; height: 1rem; }
.forum-topic:hover .forum-topic-go { background: var(--color-primary); color: #fff; }

/* Rond de l'auteur : son initiale sur l'une des 6 couleurs du forum ; l'administrateur : le pendule, jaune sur noir */
.forum-avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1;
}
.forum-avatar.tint-1 { background: #6a88c0; }
.forum-avatar.tint-2 { background: #5b6b8c; }
.forum-avatar.tint-3 { background: #2f4b80; }
.forum-avatar.tint-4 { background: #8a6fb3; }
.forum-avatar.tint-5 { background: #4f8a8b; }
.forum-avatar.is-admin { background: var(--ink); color: var(--yellow); box-shadow: inset 0 0 0 1px var(--ink-line); }
.forum-avatar-mark { width: 58%; height: 58%; }
.forum-avatar.is-sm { width: 1.6rem; height: 1.6rem; font-size: .75rem; }
.forum-avatar.is-lg { width: 3.2rem; height: 3.2rem; }

/* Page d'une catégorie : la pastille devant le titre, les chiffres dessous, les autres catégories en bas */
.forum-cat-title { display: flex; align-items: center; gap: 1.1rem; }
.forum-cat-title .forum-badge { width: 5.5rem; }
.forum-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; color: var(--color-muted); }
.forum-head-meta > span { display: inline-flex; align-items: center; gap: .45rem; }
.forum-head-meta .icon { color: var(--blue); }
.forum-list-title { margin: 0; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.forum-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 0; padding: 0; list-style: none; }
.forum-chips a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem .45rem .5rem;
    border: 1px solid var(--mist-line);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-heading);
    font-family: var(--font-title);
    font-size: .9rem;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.forum-chips a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.forum-chips .forum-mini-badge { width: 1.7rem; }

/* Page d'un sujet : « Suivre ce sujet » en face du titre (noir et jaune quand on le suit) */
.section-head > .forum-follow-form { justify-self: end; }
.public-main .forum-follow-btn { background: transparent; color: var(--color-primary); box-shadow: inset 0 0 0 1px #c3cee2; }
.public-main .forum-follow-btn:hover { background: var(--mist); color: var(--color-primary); }
.public-main .forum-follow-btn.is-on { background: var(--ink); color: var(--yellow); box-shadow: none; }

/* Les messages : la question, puis les réponses, reliés par un trait qui passe sous les ronds des auteurs */
.forum-thread-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.forum-thread { grid-column: span 2; display: grid; gap: 1.25rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.forum-post { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1rem; scroll-margin-top: calc(var(--head-h) + 1rem); }
.forum-post::before { content: ""; position: absolute; left: 1.6rem; top: 3.6rem; bottom: -1.25rem; width: 2px; margin-left: -1px; background: #d3dbe8; }
.forum-post:last-child::before,
.forum-post.is-note::before,
.forum-post.is-form::before { display: none; }
.forum-post.is-note,
.forum-post.is-form { grid-template-columns: minmax(0, 1fr); padding-left: 4.2rem; }
.forum-post.is-note .alert { margin: 0; }
.forum-post-card { min-width: 0; padding: 1.25rem 1.5rem; border: 1px solid var(--mist-line); border-radius: var(--radius); background: var(--color-surface); }
.forum-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-bottom: .65rem; }
.forum-post-author { font-family: var(--font-title); font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; }
.forum-post-date { font-size: .85rem; color: var(--color-muted); }
.forum-post-kind { margin-left: auto; font-family: var(--font-title); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.forum-post-admin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.forum-post-text { overflow-wrap: anywhere; }
.forum-post-text > :last-child { margin-bottom: 0; }
.forum-post.is-first .forum-post-card { padding: 1.75rem 2rem; border-color: #c5d0e3; box-shadow: 0 18px 36px -26px rgba(38, 41, 56, .4); }
.forum-post.is-first .forum-post-text { font-size: 1.12rem; color: var(--color-heading); }
.forum-post.is-admin .forum-post-card { border-color: var(--ink); background: var(--ink); }   /* couleurs du noir : .section-dark */
.forum-post.is-admin .forum-post-author { color: var(--yellow); }
.forum-post.is-hidden .forum-post-card { border: 1px dashed var(--color-warning); opacity: .65; }
.forum-role {
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Formulaires du forum (répondre, ouvrir un sujet) : les champs de l'Administration, dans une carte */
.public-main .forum-form { padding: 1.75rem 2rem; }
.forum-form h2 { margin: 0 0 1rem; font-size: 1.3rem; }
.forum-form .btn-row { align-items: center; }
.forum-back { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-title); font-weight: 500; text-decoration: none; }
.forum-back:hover { text-decoration: underline; }
.forum-back .icon { width: 1.05rem; height: 1.05rem; }

/* Résumé du sujet (3e colonne) : participants, réponses, dernier message ; il reste visible pendant la lecture */
.forum-aside { position: sticky; top: calc(var(--head-h) + 1.5rem); display: grid; gap: 1rem; justify-items: start; }
.forum-aside > .card { justify-self: stretch; }
.forum-aside-card h2 { margin: 0 0 1rem; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.forum-facts { display: grid; gap: .8rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.forum-facts li { display: flex; align-items: center; gap: .65rem; }
.forum-facts .icon { color: var(--blue); }
.forum-faces { display: flex; }
.forum-faces .forum-avatar { width: 2.2rem; height: 2.2rem; font-size: .85rem; box-shadow: 0 0 0 3px var(--color-surface); }
.forum-faces .forum-avatar + .forum-avatar { margin-left: -.5rem; }
.forum-aside-card .btn { width: 100%; }
.forum-aside-note { margin: .75rem 0 0; font-size: .875rem; color: var(--color-muted); }

/* Ouvrir un sujet : la catégorie choisie d'un clic sur sa pastille, les conseils sur le noir dans la 3e colonne */
.forum-new-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.forum-new-layout > .forum-form { grid-column: span 2; }
.forum-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; min-width: 0; margin: 0 0 .5rem; padding: 0; border: 0; }
.forum-choices legend { margin-bottom: .45rem; padding: 0; font-weight: 700; color: var(--color-heading); }
.forum-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    padding: .6rem 2.4rem .6rem .7rem;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.forum-choice:hover { border-color: #c3cee2; background: #f6f8fb; }
.forum-choice input { position: absolute; opacity: 0; pointer-events: none; }
.forum-choice .forum-mini-badge { width: 2.1rem; }
.forum-choice span { line-height: 1.3; color: var(--color-heading); }
.forum-choice .icon { position: absolute; right: .8rem; width: 1.1rem; height: 1.1rem; color: var(--color-primary); opacity: 0; }
.forum-choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-s); box-shadow: inset 0 0 0 1px var(--color-primary); }
.forum-choice:has(input:checked) .icon { opacity: 1; }
.forum-choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.forum-tips { position: sticky; top: calc(var(--head-h) + 1.5rem); padding: 1.75rem; border-radius: var(--radius); }
.forum-tips h2 { margin: 0 0 1.25rem; font-size: 1.2rem; }
.forum-tips ol { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; counter-reset: conseil; }
.forum-tips li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; color: var(--on-ink-soft); counter-increment: conseil; }
.forum-tips li::before {
    content: counter(conseil);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: 600;
}
.forum-tips li + li { margin-top: 0; }
.forum-tips strong { display: block; font-family: var(--font-title); font-weight: 500; color: var(--on-ink); }
.forum-tips-foot { display: flex; gap: .6rem; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ink-line); font-size: .9rem; color: var(--on-ink-soft); }
.forum-tips-foot .icon { flex-shrink: 0; color: var(--yellow); }

/* Visiteur sans le pack : l'invitation à rejoindre le forum, sur le noir */
.forum-access { display: grid; justify-items: center; gap: 1rem; padding: 3rem 2rem; border-radius: var(--radius); text-align: center; color: var(--on-ink-soft); }
.forum-access > * { margin: 0; }
.forum-access h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.forum-access p { max-width: 34rem; }
.forum-access .btn-row { justify-content: center; }
.forum-access a:not(.btn) { color: var(--yellow); }
.forum-access-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.forum-access-icon .icon { width: 1.7rem; height: 1.7rem; }

/* Tablette : catégories sur 2 colonnes ; sujets, messages et formulaire sur toute la largeur */
@media (max-width: 1023.98px) {
    .forum-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .forum-cta.span-2, .forum-cta.span-3 { grid-column: 1 / -1; }
    .forum-topic { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .forum-topic-main { grid-column: auto; }
    .forum-topic-side { padding-left: 3.9rem; }
    .forum-topic-last { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
    .forum-thread-layout, .forum-new-layout { grid-template-columns: minmax(0, 1fr); }
    .forum-thread, .forum-new-layout > .forum-form { grid-column: auto; }
    .forum-aside, .forum-tips { position: static; }
}
@media (max-width: 899.98px) {
    .section-head > .forum-follow-form { justify-self: start; }
}
/* Téléphone : une carte par ligne, messages sur toute la largeur (sans les ronds des auteurs) */
@media (max-width: 599.98px) {
    .forum-cat-grid { grid-template-columns: minmax(0, 1fr); }
    .forum-cta { flex-direction: column; align-items: flex-start; padding: 1.75rem 1.5rem; }
    .forum-cat { grid-template-columns: 3.75rem minmax(0, 1fr); padding: 1.25rem; }
    .forum-cat .forum-badge { width: 3.75rem; }
    .forum-cat-title .forum-badge { width: 4rem; }
    .forum-stats { gap: 1rem; }
    .forum-topic { padding: 1rem 1.1rem; }
    .forum-topic-main { align-items: flex-start; gap: .8rem; }
    .forum-topic-main .forum-avatar { width: 2.4rem; height: 2.4rem; font-size: .95rem; }
    .forum-topic-side { padding-left: 3.2rem; gap: .75rem; }
    .forum-post { grid-template-columns: minmax(0, 1fr); }
    .forum-post::before,
    .forum-post > .forum-avatar { display: none; }
    .forum-post.is-note,
    .forum-post.is-form { padding-left: 0; }
    .forum-post-card,
    .forum-post.is-first .forum-post-card,
    .public-main .forum-form { padding: 1.15rem 1.2rem; }
    .forum-choices { grid-template-columns: minmax(0, 1fr); }
    .forum-access { padding: 2.25rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .forum-cat, .forum-badge { transition: none; }
    .forum-cat:hover, .forum-cat:hover .forum-badge { transform: none; }
}

/* --- 14. Page d'un cours (pages/page.php) : la vidéo sous le titre, sur toute la largeur ; puis, sur fond gris, le texte du
   cours (sa fiche mémo) mis en cartes par lesson_text_html : 3 colonnes, une carte par intertitre, la citation en encadré
   noir, les images sur 1, 2 ou 3 colonnes (maquette validée par Jean le 2026-10-24) --- */
.lesson-video { border-radius: var(--radius); overflow: hidden; }
.lesson-section-title { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.2; }
.lesson-teaser > :last-child { margin-bottom: 0; }

.lesson-text { font-size: 1.0625rem; line-height: 1.65; }
.lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.lesson-grid > * { min-width: 0; margin: 0; }
.lesson-card {
    display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem;
    border: 1px solid var(--mist-line); border-radius: var(--radius); background: var(--color-surface);
}
.lesson-text .lesson-card > * { margin: 0; }
.lesson-text .lesson-card h3 { font-size: 1.15rem; line-height: 1.3; }
.lesson-text .lesson-card h4 { margin-top: .25rem; font-size: 1rem; }
.lesson-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #e3e9f5; color: var(--color-primary); }
.lesson-card-icon .icon { width: 1.45rem; height: 1.45rem; }
.lesson-free { grid-column: 1 / -1; }
.lesson-free > :last-child { margin-bottom: 0; }

/* Puces et étapes numérotées */
.lesson-text ul, .lesson-text ol { padding: 0; list-style: none; }
.lesson-text li { position: relative; }
.lesson-text li + li { margin-top: .45rem; }
.lesson-text ul > li { padding-left: 1.4rem; }
.lesson-text ul > li::before {
    content: ""; position: absolute; left: .2rem; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue);
}
.lesson-text ol { counter-reset: etape; }
.lesson-text ol > li { padding-left: 2.25rem; counter-increment: etape; }
.lesson-text ol > li + li { margin-top: .6rem; }
.lesson-text ol > li::before {
    content: counter(etape); position: absolute; left: 0; top: .05em; display: grid; place-items: center; width: 1.55rem; height: 1.55rem;
    border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-title); font-weight: 600; font-size: .8rem; line-height: 1;
}

/* La citation : l'encadré noir, son premier paragraphe en titre */
.lesson-box { border: 0; background: var(--ink); color: var(--on-ink); }
.lesson-text .lesson-box p:not(.lesson-box-title), .lesson-box strong { color: var(--on-ink); }
.lesson-box a { color: var(--yellow); }
.lesson-text .lesson-box-title {
    display: flex; align-items: center; gap: .6rem; font-family: var(--font-title); font-weight: 500; font-size: .8rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--yellow);
}
.lesson-box-title .icon { width: 1.35rem; height: 1.35rem; }
.lesson-text .lesson-box ul > li::before { background: var(--yellow); }
.lesson-text .lesson-box ol > li::before { background: var(--yellow); color: var(--ink); }

/* Images sur 1, 2 ou 3 colonnes (choisies dans l'éditeur), vidéos sur toute la largeur */
.lesson-media { align-self: center; }
/* jamais agrandie au-delà de sa taille réelle (elle serait floue), ni plus haute que l'écran */
.lesson-media img, .lesson-media video { display: block; width: auto; max-width: 100%; height: auto; max-height: 85vh; margin-inline: auto; border-radius: var(--radius); }
.lesson-media a { display: block; }
.lesson-media .video-externe { margin: 0; }
.lesson-cols-2 { grid-column: span 2; }
.lesson-cols-3 { grid-column: 1 / -1; }

/* Navigation d'un cours (Jean, 2026-10-26) : le titre sur les 3 colonnes (.section-head.is-wide) ; sous lui, un rond par
   cours du module ; en bas, cours précédent, sommaire du module, cours suivant */
.lesson-steps { display: flex; flex-wrap: wrap; gap: .45rem; }
.lesson-steps a {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--mist-line); border-radius: 50%;
    font-family: var(--font-title); font-weight: 600; font-size: .85rem; color: var(--color-heading); text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.lesson-steps a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lesson-steps a[aria-current] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.lesson-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: .75rem; margin-top: 2rem; }
.lesson-nav > :nth-child(1) { justify-self: start; }
.lesson-nav > :nth-child(2) { justify-self: center; }
.lesson-nav > :nth-child(3) { justify-self: end; }
@media (max-width: 599.98px) {
    .lesson-nav { grid-template-columns: minmax(0, 1fr); }
    .lesson-nav > :nth-child(n) { justify-self: stretch; }
    .lesson-nav > span:empty { display: none; }
}

@media (max-width: 1023.98px) {
    .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lesson-cols-2 { grid-column: 1 / -1; }
}
@media (max-width: 599.98px) {
    .lesson-grid { grid-template-columns: minmax(0, 1fr); }
    .lesson-card { padding: 1.35rem; }
}

/* --- 15. Aide à la formation (pages/aide/, includes/aide.php) : maquette validée par Jean le 2026-10-26 ---
   Bandeau noir du forum (.forum-hero, .forum-stats), puis les tableaux en cartes (4 par rangée) et les rubriques de fichiers
   (2 par rangée, sur fond gris). Un tableau ouvert : la recherche, puis le tableau, dont l'en-tête noir à trait jaune reste
   sous le menu ; sur un téléphone, le tableau glisse dans son cadre et la colonne qui nomme la ligne reste visible. */
.help-hero .alert { margin-bottom: 1.5rem; }
.help-empty { margin: 0; color: var(--color-muted); }

.help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.help-grid > li { min-width: 0; }
.help-card {
    display: flex; flex-direction: column; gap: .9rem; height: 100%; padding: 1.5rem;
    border: 1px solid var(--mist-line); border-radius: var(--radius); background: var(--color-surface);
    color: var(--color-text); text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.help-card:hover { border-color: var(--color-primary); color: var(--color-text); transform: translateY(-2px); }
.help-card .lesson-card-icon { flex-shrink: 0; }
.help-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; text-wrap: balance; }
.help-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }
.help-card-meta { font-size: .875rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.help-card-meta .pill { margin-left: .35rem; }
.help-go {
    display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--color-primary-s); color: var(--color-primary); transition: transform .2s ease, background-color .15s ease, color .15s ease;
}
.help-go .icon { width: 1.1rem; height: 1.1rem; }
.help-card:hover .help-go { transform: rotate(45deg); background: var(--color-primary); color: #fff; }   /* la flèche ↗ devient → */

.help-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.help-files > li { min-width: 0; }
.help-file-card {
    display: grid; align-content: start; gap: 1rem; height: 100%; padding: 1.5rem;
    border: 1px solid var(--mist-line); border-radius: var(--radius); background: var(--color-surface);
}
.help-file-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem 1rem; }
.help-file-head .lesson-card-icon { grid-row: span 2; }
.help-file-head h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.help-file-head p { margin: 0; font-size: .9375rem; color: var(--color-muted); }
.help-file-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.help-file {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem;
    padding: .7rem .9rem; border-radius: 7px; background: var(--mist); color: var(--color-text); text-decoration: none;
    transition: background-color .15s ease;
}
.help-file:hover { background: var(--color-primary-s); color: var(--color-text); }
.help-file-type {
    min-width: 2.9rem; padding: .2rem .45rem; border-radius: 5px; background: var(--ink); color: var(--yellow);
    font-family: var(--font-title); font-size: .7rem; letter-spacing: .08em; text-align: center;
}
.help-file-name { font-weight: 700; overflow-wrap: anywhere; }
.help-file-size { font-size: .875rem; color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.help-file .icon { color: var(--color-primary); }

/* Un tableau ouvert */
.help-notes { margin-bottom: 2rem; }                 /* l'explication du tableau, au-dessus de la recherche (Jean, 2026-10-27) */
.help-notes > * { margin: 0 0 .9rem; }
.help-notes ul { padding-left: 1.25rem; }
.help-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.help-search { position: relative; flex: 1 1 18rem; max-width: 30rem; margin: 0; }
.help-search .icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.help-search input {
    width: 100%; min-height: 3.1rem; margin: 0; padding: .7rem 1.1rem .7rem 2.9rem;
    border: 1px solid var(--mist-line); border-radius: 999px; background: var(--color-surface);
}
.help-count { margin: 0; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.help-table-wrap { border: 1px solid var(--mist-line); border-radius: var(--radius); background: var(--color-surface); }
.help-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.help-table th {
    position: sticky; top: var(--head-h); z-index: 2; padding: 0; border-bottom: 3px solid var(--yellow);
    background: var(--ink); color: var(--on-ink); vertical-align: bottom;
}
.help-table th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.help-table th:last-child  { border-top-right-radius: calc(var(--radius) - 1px); }
.help-sort {
    display: flex; align-items: flex-end; justify-content: center; gap: .35rem; width: 100%; padding: .85rem .75rem;
    border: 0; background: none; color: inherit; font-family: var(--font-title); font-weight: 600; font-size: .85rem;
    line-height: 1.25; text-align: center; cursor: pointer;
}
.help-table th.al-left .help-sort  { justify-content: flex-start; text-align: left; }
.help-table th.al-right .help-sort { justify-content: flex-end; text-align: right; }
.help-sort:hover { color: var(--yellow); }
.help-sort:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; box-shadow: none; }
.help-sort-icon { flex-shrink: 0; width: .95rem; height: .95rem; opacity: .45; }
.help-table th[aria-sort="ascending"] .help-sort-icon,
.help-table th[aria-sort="descending"] .help-sort-icon { opacity: 1; color: var(--yellow); }
.help-table th[aria-sort="ascending"] .help-sort-icon path:last-child,
.help-table th[aria-sort="descending"] .help-sort-icon path:first-child { opacity: 0; }   /* une seule flèche : le sens du tri */
.help-table td { padding: .6rem .75rem; border-top: 1px solid var(--mist-line); background: var(--color-surface); white-space: pre-line; }
.help-table tbody tr:first-child td { border-top: 0; }
/* Coins arrondis comme le cadre : le fond des cases d'angle ne déborde plus (Jean, 2026-10-27) ; en haut, c'est l'en-tête
   qui les arrondit, sauf dans un tableau sans titres de colonnes (.is-headless). Lignes cachées par la recherche : ignorées. */
.help-table tbody tr:nth-last-child(1 of :not([hidden])) td:first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
.help-table tbody tr:nth-last-child(1 of :not([hidden])) td:last-child  { border-bottom-right-radius: calc(var(--radius) - 1px); }
.help-table.is-headless tbody tr:nth-child(1 of :not([hidden])) td:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.help-table.is-headless tbody tr:nth-child(1 of :not([hidden])) td:last-child  { border-top-right-radius: calc(var(--radius) - 1px); }
.help-table .al-left   { text-align: left; }
.help-table .al-center { text-align: center; }
.help-table .al-right  { text-align: right; }
.help-table td.is-key { font-weight: 700; color: var(--color-heading); }
.help-table tbody tr:nth-child(even of :not([hidden])) td { background: #f7f9fc; }
.help-table tbody tr:hover td { background: var(--color-primary-s); }
.help-table mark { padding: 0 .1em; border-radius: 3px; background: var(--yellow); color: var(--ink); }
.help-none { margin: 0; padding: 2rem 1rem; color: var(--color-muted); text-align: center; }

@media (max-width: 1099.98px) {
    .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799.98px) {
    .help-files { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699.98px) {
    /* Le tableau glisse dans son cadre ; son en-tête reste en haut du cadre, la colonne qui nomme la ligne à gauche */
    .help-table-wrap { overflow: auto; max-height: 75vh; }
    .help-table th { top: 0; border-radius: 0 !important; }            /* le cadre, qui défile, arrondit lui-même ses coins */
    .help-sort { padding: .7rem .5rem; font-size: .78rem; }
    .help-table td { padding: .55rem .5rem; font-size: .9375rem; }
    .help-table[data-pin] :is(th, td):first-child { position: sticky; left: 0; z-index: 1; }
    .help-table[data-pin="2"] :is(th, td):nth-child(2) { position: sticky; left: var(--help-c1, 4rem); z-index: 1; box-shadow: 1px 0 0 var(--mist-line); }
    .help-table[data-pin="1"] :is(th, td):first-child { box-shadow: 1px 0 0 var(--mist-line); }
    .help-table[data-pin] th:nth-child(-n+2) { z-index: 3; }
    .help-file { grid-template-columns: auto minmax(0, 1fr) auto; }
    .help-file-size { display: none; }
}
@media (max-width: 479.98px) {
    .help-grid { grid-template-columns: minmax(0, 1fr); }
    .help-card { flex-direction: row; align-items: center; padding: 1.1rem; }
    .help-card-foot { margin: 0 0 0 auto; }
    .help-card-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .help-card, .help-go { transition: none; }
    .help-card:hover { transform: none; }
}
/* Pages légales, repère {{statistiques}} (Réglages › Statistiques) : après le clic sur « Ne plus être compté », la page revient
   à cet endroit (#statistiques) ; sa ligne n'est pas cachée sous le menu */
.stats-choice { scroll-margin-top: calc(var(--head-h) + 2rem); }

/* --- 16. Partenaires (includes/partenaires.php, Jean, 2026-10-29) : les artisans recommandés ---
   Boutique : un encart par partenaire, sur 2 colonnes égales de toute la largeur (pas de colonne vide), la photo carrée à
   gauche, le texte et le bouton à droite ; sur 3 colonnes (3, 9 partenaires) et sur téléphone, la photo au-dessus.
   Barre latérale des astuces : vignette, nom et petite ligne. Rappel des fiches des cours : comme les autres notes. */
.partners-section { scroll-margin-top: var(--head-h); }      /* /boutique#partenaires : le titre n'est pas caché sous le menu */
.partner-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    overflow: hidden;
    border: 1px solid var(--mist-line);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.partner-photo { position: relative; display: block; background: var(--mist); }
.partner-photo::before { content: ""; display: block; padding-top: 100%; }   /* au moins carrée ; plus haute si le texte l'est */
.partner-photo > img,
.partner-photo > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.partner-photo.is-empty > svg { inset: calc(50% - 1.5rem); width: 3rem; height: 3rem; color: var(--blue); }
.partner-body { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.4rem 1.5rem 1.5rem; }
.partner-body > * { margin: 0; }
.partner-body h3 { font-size: 1.25rem; line-height: 1.3; }
.partner-text { color: var(--color-muted); }
.public-main .partner-body > .btn { margin-top: auto; }          /* le bouton en bas de l'encart, aligné d'un encart à l'autre */
.partner-body .offer-level + h3 { margin-top: -.3rem; }
.partner-grid.cols-3 .partner-card { grid-template-columns: minmax(0, 1fr); }
.partner-free { min-height: 12rem; }
@media (max-width: 899.98px) {
    .partner-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
}
@media (max-width: 559.98px) {
    .partner-card { grid-template-columns: minmax(0, 1fr); }
}

.side-partners { margin-top: 1.75rem; }                         /* sous les dernières astuces, même écart */
.side-partners ul { display: grid; gap: .75rem; }
.side-menu .side-partner { display: flex; align-items: center; gap: .85rem; padding: 0; }
.side-partner-photo {
    position: relative;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--mist);
    color: var(--blue);
}
.side-partner-photo > img,
.side-partner-photo > svg { width: 100%; height: 100%; object-fit: cover; }
.side-partner-photo > svg { padding: 1rem; }
.side-partner-text { display: grid; gap: .1rem; min-width: 0; }
.side-partner-text strong { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-title); font-weight: 600; }
.side-partner-text strong .icon { width: .95rem; height: .95rem; flex-shrink: 0; color: var(--color-muted); }
.side-partner-text > span { font-size: .875rem; color: var(--color-muted); }
.side-menu .side-partner:hover strong { color: var(--accent-text); text-decoration: underline; }

.partners-reminder .icon { color: var(--blue); }
.partners-reminder a { font-weight: 700; }