/*
 * style.css — Feuille de styles du Tuileur
 *
 * Charte graphique : sobre, lisible, digne d'un contexte rituel.
 * Palette : tons sombres (bleu nuit, or discret), typographie sérieuse.
 * Pas de framework CSS externe : code minimal et maîtrisé.
 *
 * Architecture CSS : les propriétés personnalisées (variables CSS, déclarées
 * avec --nom-variable dans :root) centralisent les valeurs de la charte et
 * facilitent une modification globale cohérente en un seul endroit.
 */

/* ── POLICE EB GARAMOND (auto-hébergée) ────────────────────────────────── *
 * EB Garamond est une résurrection numérique libre (licence SIL Open Font
 * License) des caractères originaux gravés par Claude Garamont au XVIe
 * siècle. Les fichiers .woff2 sont hébergés directement sur ce serveur —
 * et non via le CDN de Google Fonts — afin de ne transmettre aucune adresse
 * IP de visiteur à un tiers extérieur, conformément au RGPD (cf. Landgericht
 * München, 3ᵉ ch. civ., arrêt du 20 janvier 2022, réf. 3 O 17493/20, qui a
 * jugé cette transmission d'IP non consentie contraire au règlement).
 *
 * font-display: swap indique au navigateur d'afficher immédiatement le texte
 * avec une police de substitution, puis de la remplacer dès que le fichier
 * EB Garamond est chargé — évitant un texte invisible pendant le téléchargement
 * (comportement documenté par MDN Web Docs, propriété @font-face/font-display).
 */

@font-face {
    font-family : 'EB Garamond';
    font-style  : normal;
    font-weight : 400;
    font-display: swap;
    src: url('fonts/eb-garamond-400.woff2') format('woff2');
}

@font-face {
    font-family : 'EB Garamond';
    font-style  : italic;
    font-weight : 400;
    font-display: swap;
    src: url('fonts/eb-garamond-400i.woff2') format('woff2');
}

@font-face {
    font-family : 'EB Garamond';
    font-style  : normal;
    font-weight : 600;
    font-display: swap;
    src: url('fonts/eb-garamond-600.woff2') format('woff2');
}

/* ── POLICE FRANK RUHL LIBRE (auto-hébergée, mots hébreux) ─────────────── *
 * EB Garamond ne couvre pas l'alphabet hébreu (aleph-beth). Or de nombreuses
 * fiches du Tuileur citent des mots hébreux (בֹּעַז, יָכִין, etc.) au sein
 * même du texte français. Frank Ruhl Libre est une police libre (SIL Open
 * Font License) dessinée pour l'hébreu — elle reprend l'esprit des
 * caractères hébraïques historiques de la fonderie Ruhl (Francfort, fin
 * XIXᵉ) — et couvre également l'alphabet latin, ce qui lui permet de servir
 * de police de repli cohérente.
 *
 * Comme pour EB Garamond ci-dessus, les fichiers sont hébergés directement
 * sur ce serveur plutôt que via le CDN de Google Fonts, afin de ne transmettre
 * aucune adresse IP de visiteur à un tiers extérieur (cf. RGPD, jugement du
 * Landgericht München cité plus haut).
 *
 * La propriété unicode-range restreint chaque @font-face aux seuls
 * caractères hébreux (lettres, points-voyelles/niqqoud, cantillation, signes
 * de ponctuation propres à l'hébreu). Conséquence pratique : le navigateur ne
 * télécharge ce fichier QUE si une page affiche effectivement un caractère
 * hébreu — aucun coût pour les pages qui n'en contiennent pas — et, sur les
 * pages qui en contiennent, seuls les mots hébreux basculent sur cette
 * police, le reste du texte français restant en EB Garamond. Il suffit donc
 * que --police-principale et --police-interface (ci-dessous) citent 'Frank
 * Ruhl Libre' en repli : aucune classe ni balise particulière n'est requise
 * autour des mots hébreux dans le contenu des fiches.
 */

@font-face {
    font-family   : 'Frank Ruhl Libre';
    font-style    : normal;
    font-weight   : 400;
    font-display  : swap;
    src           : url('fonts/frank-ruhl-libre-400.woff') format('woff');
    unicode-range : U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family   : 'Frank Ruhl Libre';
    font-style    : normal;
    font-weight   : 600;
    font-display  : swap;
    src           : url('fonts/frank-ruhl-libre-600.woff') format('woff');
    unicode-range : U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* ── POLICE BEAU RIVAGE (auto-hébergée, rubrique « Auteur » uniquement) ── *
 * Beau Rivage est un script calligraphique libre (licence SIL Open Font
 * License), à fort contraste de pleins et de déliés, choisi pour donner un
 * tour manuscrit au texte de la rubrique « Un mot de l'auteur » et au nom
 * posé sous la signature scannée.
 *
 * Le fichier est hébergé directement sur ce serveur, pour les mêmes raisons
 * de confidentialité que EB Garamond et Frank Ruhl Libre ci-dessus (RGPD,
 * jugement du Landgericht München cité plus haut) : aucune requête vers le
 * CDN de Google Fonts. C'est aussi le seul moyen d'obtenir un rendu
 * identique quel que soit l'appareil du visiteur (Windows, macOS, iOS,
 * Android…) : la valeur générique `cursive` de CSS, elle, laisse chaque
 * système choisir sa propre police manuscrite — Comic Sans MS ou Segoe
 * Script sous Windows, Apple Chancery ou Snell Roundhand sous macOS/iOS,
 * une simple police sans caractère sous Android — si bien que la page
 * n'aurait pas du tout la même allure d'un appareil à l'autre.
 *
 * Un seul poids est nécessaire, utilisé sur une seule rubrique du site :
 * le format .woff (sans .woff2) suffit largement, comme pour Frank Ruhl
 * Libre ci-dessus.
 */

@font-face {
    font-family : 'Beau Rivage';
    font-style  : normal;
    font-weight : 400;
    font-display: swap;
    src: url('fonts/beau-rivage-400.woff') format('woff');
}

/* ── VARIABLES & RESET ─────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
 * TAILLE DE RÉFÉRENCE DU SITE
 * ══════════════════════════════════════════════════════════════════════════
 * Un seul chiffre commande la taille de tout le texte du site : 112,5 % de la
 * taille de référence du navigateur, soit dix-huit pixels au lieu de seize.
 * Toutes les autres tailles sont exprimées en rem, c'est-à-dire en multiples
 * de celle-ci : les changer toutes revient donc à changer cette ligne.
 *
 * Motif : le lectorat du Thuileur est le plus souvent âgé, et l'EB Garamond,
 * dont la hauteur d'œil est basse, paraît plus petit que sa taille nominale.
 * Le confort de lecture prime sur la longueur des pages.
 *
 * Le pourcentage est préféré à une valeur en pixels : le lecteur qui a réglé
 * son navigateur sur une police plus grande, parce qu'il voit mal, garde le
 * bénéfice de son réglage, qui se trouve simplement majoré d'un huitième. Une
 * taille écrite en pixels l'aurait au contraire écrasé.
 */

html {
    font-size: 112.5%;
}

:root {
    --couleur-fond          : #f5f3ee;   /* Parchemin clair */
    --couleur-surface       : #ffffff;
    --couleur-bordure       : #d4c9a8;   /* Or pâle */
    --couleur-primaire      : #2c3e6b;   /* Bleu nuit maçonnique */
    --couleur-primaire-hover: #1a2745;
    /* Or discret. ASSOMBRI LE 23 AOÛT 2026, de #9a7d3a à #7d6428, à la suite
       de l'analyse qualitative du même jour. L'ancien or ne contrastait qu'à
       3,53 pour 1 sur le parchemin, quand la règle d'accessibilité en demande
       4,5 pour du texte de cette taille. Or c'est lui qui porte l'intitulé de
       rubrique de chaque fiche, en petites capitales de .85rem : le texte le
       plus répété du site était le moins lisible. Le nouvel or contraste à
       5,09 pour 1, sans rien changer à l'intention de la charte. La teinte
       rgba correspondante, employée pour les halos et les ombres, a suivi :
       rgba(154,125,58) est devenu rgba(125,100,40). */
    --couleur-or            : #7d6428;
    --couleur-texte         : #1a1a1a;
    --couleur-texte-doux    : #5a5a5a;
    --couleur-erreur-fond   : #fdf0f0;
    --couleur-erreur-bordure: #c0392b;
    --couleur-erreur-texte  : #922b21;
    --couleur-succes-fond   : #f0f7f0;
    --rayon                 : 6px;
    --ombre                 : 0 2px 8px rgba(0,0,0,.08);
    /* Pile de secours (fallback) : si le fichier .woff2 échoue à charger
     * (réseau, fichier manquant), le navigateur retombe sur 'Garamond' s'il
     * est installé localement, sinon sur Georgia, puis Times New Roman,
     * puis n'importe quelle police à empattements (serif) du système.
     * 'Frank Ruhl Libre' est placée en second : EB Garamond ne portant
     * aucun glyphe hébreu, le navigateur y bascule automatiquement pour les
     * seuls caractères hébreux rencontrés dans le texte (voir plus haut). */
    --police-principale     : 'EB Garamond', 'Frank Ruhl Libre', Garamond, Georgia, 'Times New Roman', serif;
    --police-interface      : system-ui, 'Frank Ruhl Libre', -apple-system, sans-serif;
    /* Police des boutons, ajoutée le 30 juillet 2026. Les capsules du site
     * étaient composées dans trois polices différentes selon leur emplacement :
     * « Déconnexion » et les boutons de degré en Garamond, « vers le Thuileur »
     * et « Vérifier » dans la police système, laquelle varie d'ailleurs d'une
     * machine à l'autre (San Francisco sur macOS, Segoe UI sur Windows, Roboto
     * sur Android). Deux capsules voisines pouvaient donc ne pas se ressembler.
     *
     * Arial est demandée expressément. Helvetica lui succède, pour les machines
     * Apple anciennes qui ne l'auraient pas, puis n'importe quelle police sans
     * empattement du système. 'Frank Ruhl Libre' est citée comme ailleurs, pour
     * qu'un éventuel mot hébreu sur un bouton trouve ses glyphes.
     *
     * Cette variable ne concerne QUE les boutons. Les étiquettes, les fils
     * d'Ariane et les compteurs demeurent en --police-interface ; les onglets
     * et les cartouches, qui sont des surfaces de lecture, demeurent en
     * Garamond. */
    --police-boutons        : Arial, Helvetica, 'Frank Ruhl Libre', sans-serif;
    /* Exprimée en rem depuis le 29 juillet 2026, et non plus en pixels : le
       corps du texte ayant grandi, la colonne devait grandir avec lui, faute
       de quoi les lignes se seraient raccourcies et la barre d'onglets se
       serait repliée. 68,75 rem valent exactement les 1100 pixels d'origine
       à la taille de racine d'un navigateur ordinaire. */
    --largeur-max           : 68.75rem;
}

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

body {
    font-family    : var(--police-principale);
    background     : var(--couleur-fond);
    color          : var(--couleur-texte);
    line-height    : 1.7;
    min-height     : 100vh;
}

/* ── GARDE-FOU CONTRE LE DÉBORDEMENT HORIZONTAL (21 août 2026) ────────────
   Signalé par Hugues sur iPhone 16 Pro Max : à partir du 19e degré, une
   marge blanche inutilisée apparaît sur la droite de l'écran. La cause
   probable est un débordement horizontal ponctuel, même minime (une image,
   un tableau ou une grille plus large que l'écran) : Safari, dès qu'un tel
   débordement existe quelque part dans la page, réduit l'échelle de la page
   ENTIÈRE pour que ce débordement tienne à l'écran, ce qui a pour effet de
   rétrécir toute la page et de laisser cette marge, même sur des rubriques
   qui n'en sont pas la cause.
   Posé ici, sur le châssis de la page (html, body), plutôt que sur tel ou
   tel panneau : le remède couvre ainsi TOUTES les pages du site, présentes
   et à venir, sans avoir à le reposer à chaque nouvelle rubrique. Il
   n'empêche pas un élément trop large d'exister ; il l'empêche seulement
   d'élargir la page entière avec lui, ce qu'aucun visiteur ne souhaite sur
   téléphone. Les deux règles générales qui suivent, sur les images et les
   tableaux, retirent en outre la cause la plus fréquente d'un tel
   débordement, ceinture et bretelles.

   CORRIGÉ LE 21 AOÛT 2026 : `overflow-x: hidden` posé À LA FOIS sur `html`
   ET sur `body` empêchait tout `position: sticky` de coller à l'écran,
   partout sur le site — les barres « Aller au degré » des synoptiques en
   grille en ont fait les frais, révélé par Hugues sur les décors et deux
   autres fiches. La cause, vérifiée par une reproduction isolée avec
   Playwright : dès qu'un axe d'overflow est fixé à autre chose que
   `visible` sur un élément, la spécification force l'AUTRE axe à `auto`
   sur ce même élément ; en le posant sur `html` ET `body` en même temps,
   les deux deviennent chacun leur propre conteneur de défilement, et un
   élément collé perd son repère naturel, le viewport. Le remède contre le
   débordement horizontal ne réclame de poser la règle que sur UN SEUL des
   deux ; `html` a été retenu ici, comme le fait la documentation la plus
   courante sur ce défaut de Safari. Revérifié par la même reproduction :
   la marge blanche reste corrigée, et `position: sticky` colle de nouveau
   à l'écran. */
html {
    max-width : 100%;
    overflow-x: hidden;
}
body {
    max-width: 100%;
}

img, table, video, iframe, svg {
    max-width: 100%;
}

/* ── EN-TÊTE DU SITE ───────────────────────────────────────────────────── */

.site-header {
    background    : var(--couleur-primaire);
    color         : #fff;
    padding       : 1rem 2rem;
    box-shadow    : var(--ombre);
}

.header-inner {
    max-width      : var(--largeur-max);
    margin         : 0 auto;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 1rem;
}

.site-titre {
    font-size     : 1.55rem;
    letter-spacing: .04em;
    font-weight   : normal;
    color         : #e8dfc0;  /* Or clair sur fond sombre */
}

/* Bloc du titre et de son sous-titre. Ces deux règles vivaient dans le style
 * en ligne de dashboard.php, si bien que toute autre page reprenant le même
 * en-tête affichait un sous-titre sans apparence. Elles siègent désormais
 * ici, où toutes les pages les trouvent. */
.titre-bloc {
    display   : inline-block;
    text-align: center;
}

.site-sous-titre {
    margin           : .1rem 0 0;
    /* Le sous-titre ne doit jamais commander la largeur du bloc, sans quoi le
       titre s'y trouverait recentré et se déplacerait de quelques pixels. Une
       largeur nulle assortie d'une largeur minimale exprimée en pourcentage y
       pourvoit : lorsque le navigateur mesure le contenu pour dimensionner le
       bloc, il ignore les pourcentages et ne compte donc le sous-titre pour
       rien ; puis, la largeur du bloc une fois fixée par le titre seul, le
       sous-titre la reprend tout entière et s'y centre. Le titre garde ainsi
       sa place au pixel près, quelle que soit la police effectivement
       chargée. */
    width            : 0;
    min-width        : 100%;
    font-family      : var(--police-principale);
    font-size        : .85rem;
    font-weight      : 400;
    /* La forme longue est déclarée en second : les navigateurs anciens qui
       ignorent font-variant-caps comprennent tous font-variant. */
    font-variant-caps: small-caps;
    font-variant     : small-caps;
    letter-spacing   : .10em;
    white-space      : nowrap;
    /* L'or du titre, rabattu d'un ton : le sous-titre accompagne sans
       disputer le premier rôle. */
    color            : #c4b48e;
}

.header-meta {
    display    : flex;
    align-items: center;
    gap        : 1.2rem;
    font-family: var(--police-interface);
    font-size  : .85rem;
}

/* Étiquette du degré d'accès. Ce n'est pas un bouton, mais elle est posée dans
 * l'en-tête juste à côté de « Déconnexion » : composée dans une autre police
 * que sa voisine, la divergence se voyait d'autant plus qu'elles se touchent.
 * Elle suit donc la police des boutons. */
.niveau-badge {
    font-family  : var(--police-boutons);
    background   : rgba(255,255,255,.15);
    border       : 1px solid rgba(255,255,255,.25);
    border-radius: var(--rayon);
    padding      : .25rem .75rem;
    color        : #e8dfc0;
}

.btn-logout {
    background   : transparent;
    border       : 1px solid rgba(255,255,255,.4);
    border-radius: var(--rayon);
    color        : #fff;
    padding      : .25rem .75rem;
    text-decoration: none;
    transition   : background .2s;
}
.btn-logout:hover {
    background: rgba(255,255,255,.15);
}

/* ── ZONE DE CONSULTATION ──────────────────────────────────────────────── */

.consultation {
    max-width : var(--largeur-max);
    margin    : 2rem auto;
    padding   : 0 1.5rem 4rem;
}

/* ── ONGLETS ───────────────────────────────────────────────────────────── *
 * RETIRÉ LE 4 AOÛT 2026 : les quatre règles de la rangée d'onglets se
 * trouvaient ici, sur une trentaine de lignes. Elles ne peignaient plus rien.
 *
 * LE MOTIF, ET LE PIÈGE. La rangée a quitté ce fichier le 30 juillet 2026 pour
 * assets/onglets.css, qui la redessine en languettes de parchemin. Toutes les
 * pages qui portent des onglets appellent cette feuille APRÈS celle-ci :
 * dashboard.php, loi.php, memo.php. Chacune des propriétés déclarées ici était
 * donc écrasée, et avec des valeurs entièrement différentes. Le piège était
 * réel : retoucher la barre d'onglets à cet endroit n'aurait produit aucun
 * effet, et l'on aurait cherché longtemps.
 *
 * OÙ TOUCHER DÉSORMAIS : assets/onglets.css pour l'apparence,
 * includes/barre_onglets.php pour le balisage. Audit du 30 juillet 2026,
 * rang 11. */

/* ── PANNEAUX ──────────────────────────────────────────────────────────── */

.panneau { display: block; }
.panneau[hidden] { display: none; }

/* ── SÉLECTEURS DE DEGRÉ PAR LOGE ──────────────────────────────────────── *
 * Quatre sélecteurs, un par type d'atelier (Loge Symbolique, Loge de
 * Perfection, Souverain Chapitre, Sublime Aréopage), chacun illustré du
 * sceau (macaron) de sa Loge. La disposition est fixée à deux colonnes sur
 * tous les appareils, soit deux rangées de deux : Loge Symbolique et Loge de
 * Perfection en haut, Souverain Chapitre et Sublime Aréopage en dessous.
 * Chaque groupe forme une carte cohérente avec le reste du site (fond clair,
 * filet or, légère ombre). */

.loges-bloc {
    flex: 1 1 480px;
}

/* La consigne d'accueil des sélecteurs de degré est devenue une didascalie
 * (voir le composant .didascalie plus bas). Ne subsiste ici que sa marge
 * basse, propre à cet emplacement. */
.loges-consigne { margin-top: 0; margin-bottom: .9rem; }

/* Deux colonnes imposées quelle que soit la taille de l'écran, pour conserver
 * partout la présentation en deux rangées de deux sélecteurs.
 * position: relative sert de repère au voile de chargement (#degre-loader,
 * .degre-voile dans dashboard.php), qui se pose par-dessus cette grille et
 * la recouvre donc pareillement à toute taille d'écran. */
.loges-selecteurs {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 1rem;
    position             : relative;
}

.loge-groupe {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : .7rem;
    padding       : 1rem .8rem;
    background    : var(--couleur-surface);
    border        : 1px solid var(--couleur-bordure);
    border-radius : var(--rayon);
    box-shadow    : var(--ombre);
}

/* Sceau à largeur fixe de 100 px ; la hauteur se calcule d'elle-même pour
 * préserver les proportions natives de l'image. */
.loge-macaron {
    width  : 100px;
    height : auto;
    filter : drop-shadow(0 1px 3px rgba(0,0,0,.15));
}

.select-loge {
    width          : 100%;
    font-family    : var(--police-interface);
    font-size      : .92rem;
    padding        : .5rem .6rem;
    border         : 1px solid var(--couleur-bordure);
    border-radius  : var(--rayon);
    background     : var(--couleur-surface);
    color          : var(--couleur-texte);
    cursor         : pointer;
    text-align     : center;
    text-align-last: center;  /* Centre l'invite et l'option choisie */
}
.select-loge:focus {
    outline     : none;
    border-color: var(--couleur-primaire);
    box-shadow  : 0 0 0 3px rgba(44,62,107,.12);
}

/* ── BARRE DE RECHERCHE ────────────────────────────────────────────────── */

.recherche-barre {
    display  : flex;
    gap      : .75rem;
    margin-bottom: .75rem;
}

#champ-recherche {
    flex         : 1;
    font-family  : var(--police-interface);
    font-size    : 1rem;
    padding      : .5rem 1rem;
    border       : 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background   : var(--couleur-surface);
}
#champ-recherche:focus {
    outline     : none;
    border-color: var(--couleur-primaire);
    box-shadow  : 0 0 0 3px rgba(44,62,107,.12);
}

/* L'aide du champ de recherche est devenue une didascalie. Seule sa marge
 * basse, qui la sépare des résultats, lui reste propre. */
.recherche-aide { margin-bottom: 1.5rem; }

.compteur {
    font-family  : var(--police-interface);
    font-size    : .92rem;
    color        : var(--couleur-texte-doux);
    margin-bottom: 1.5rem;
}

/* ── BOUTONS « CAPSULE » (structure commune, unifiée le 27 juillet 2026) ── *
 * Un seul dessin de bouton, décliné dans tout le site : parcours d'accès
 * (semestre.php, tuiler.php), boutons de degré (login.php), menu flottant
 * de navigation, bascule d'instruction, bouton de retour en haut de page et
 * bouton de déconnexion (dashboard.php). Sa structure — relief, reflet
 * vitré, fine texture mouchetée façon grains de riz en verre, enfoncement
 * au clic — n'est plus écrite qu'une seule fois, ici. Chaque emplacement se
 * contente de figurer dans les listes ci-dessous, par son identifiant ou sa
 * classe ; toute retouche future de l'apparence (couleur, relief, etc.) se
 * fait donc en un seul endroit, pour tous les boutons à la fois.
 *
 * Important : dashboard.php et login.php ne portent plus leur propre copie
 * de ce style. Les trois fichiers (dashboard.php, login.php, style.css)
 * doivent désormais être téléversés ensemble ; un fichier PHP téléversé
 * seul, sans le style.css à jour, afficherait des boutons sans apparence.
 *
 * Deux coloris, qui hiérarchisent les actions à l'œil :
 *   - coloris bleu : action principale, ou apparence par défaut ;
 *   - coloris or   : action secondaire (.btn-retour), ou état actif/
 *                    sélectionné (bascule d'instruction, recherche ouverte).
 *
 * Chaque emplacement conserve enfin, séparément, sa seule taille (padding,
 * taille de texte, police) et, pour de rares cas hérités, une nuance
 * d'origine (ombre un peu plus marquée du bouton flottant et du bouton de
 * déconnexion), conservée telle quelle pour ne rien changer à l'écran. */

.btn-tuiler,
.btn-retour,
.btn-degre,
.btn-logout,
#nav-rubriques button,
.nav-degres button,
#nav-loi .nav-loi-lien,
#instruction-bascule button {
    /* position: relative et overflow: hidden sont indispensables : ils
     * permettent aux deux couches décoratives ci-dessous (reflet et texture)
     * de se placer sur la capsule et d'en épouser les bords arrondis. */
    position       : relative;
    overflow       : hidden;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : .45rem;
    border         : none;
    /* Un rayon volontairement démesuré : le navigateur le ramène à la moitié
     * de la hauteur, ce qui produit des extrémités parfaitement demi-rondes
     * quelle que soit la taille du bouton. */
    border-radius  : 999px;
    text-decoration: none;
    cursor         : pointer;
    transition     : box-shadow .08s ease, transform .08s ease, background .12s ease;
}

/* Reflet vitré : un voile clair dégradé sur la moitié haute, qui donne
 * l'illusion d'une surface bombée. */
.btn-tuiler::before,
.btn-retour::before,
.btn-degre::before,
.btn-logout::before,
#nav-rubriques button::before,
.nav-degres button::before,
#nav-loi .nav-loi-lien::before,
#instruction-bascule button::before {
    content       : "";
    position      : absolute;
    left          : 8%;
    right         : 8%;
    top           : 6%;
    height        : 42%;
    border-radius : 999px;
    background    : linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
    pointer-events: none;
}

/* Correctif du 21 août 2026, deuxième essai, remarque de Hugues : le
   premier correctif (isolation de calque, voir plus bas) n'a rien changé,
   ce qui écarte la piste d'une couture de compositing Safari. Cause
   revue : le reflet vitré ci-dessus commence à 6 % de la hauteur du
   bouton (`top: 6%`), et non au bord réel. Sur les petites capsules
   rondes du menu flottant (chevrons, recherche, retour en tête), ces 6 %
   laissent un mince liseré de la COULEUR DE FOND, bleue, exposé entre le
   bord véritable du bouton et le début du reflet clair — c'est ce liseré
   qui se lisait comme un trait bleu sur le bord supérieur. En amenant le
   reflet jusqu'au bord (`top: 0`), plus rien n'expose ce liseré. Limité à
   ces deux boutons : les autres capsules du site, plus grandes, n'ont
   jamais présenté ce défaut, et rien ne dit que le même réglage leur
   conviendrait. */
#nav-rubriques button::before,
.nav-degres button::before {
    top: 0;
}

/* Texture mouchetée, dessinée en CSS par un filtre de turbulence : aucune
 * image n'est chargée, le motif est calculé par le navigateur. */
.btn-tuiler::after,
.btn-retour::after,
.btn-degre::after,
.btn-logout::after,
#nav-rubriques button::after,
.nav-degres button::after,
#nav-loi .nav-loi-lien::after,
#instruction-bascule button::after {
    content         : "";
    position        : absolute;
    inset           : 0;
    border-radius   : 999px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.75 0.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E');
    opacity         : .22;
    mix-blend-mode  : screen;
    pointer-events  : none;
}

/* Enfoncement au clic : la capsule s'abaisse, son reflet s'accentue. */
.btn-tuiler:active,
.btn-retour:active,
.btn-degre:active,
.btn-logout:active,
#nav-rubriques button:active,
.nav-degres button:active,
#nav-loi a.nav-loi-lien:active,
#instruction-bascule button:active {
    transform: translateY(2px);
}

/* Premier correctif du 21 août 2026, remarque de Hugues sur un trait sombre
   au bord supérieur des capsules du menu flottant. Piste explorée ici :
   une couture de compositing Safari entre une capsule aux coins arrondis et
   le fond flouté sur lequel elle repose (backdrop-filter, voir
   nav.nav-degres et #nav-rubriques dans dashboard.css). Confirmé ensuite
   INSUFFISANT À LUI SEUL : le trait, en fait bleu et non gris, persistait.
   Conservé néanmoins, sans incidence négative, chaque capsule sur son
   propre calque graphique restant une bonne pratique par ailleurs. La
   cause véritable et son correctif sont plus haut dans ce fichier, sur
   `#nav-rubriques button::before, .nav-degres button::before`. */
#nav-rubriques button,
.nav-degres button {
    isolation         : isolate;
    -webkit-transform : translateZ(0);
            transform : translateZ(0);
}
#nav-rubriques button:active,
.nav-degres button:active {
    -webkit-transform : translateY(2px) translateZ(0);
            transform : translateY(2px) translateZ(0);
}
.btn-tuiler:active::before,
.btn-retour:active::before,
.btn-degre:active::before,
.btn-logout:active::before,
#nav-rubriques button:active::before,
.nav-degres button:active::before,
#nav-loi a.nav-loi-lien:active::before,
#instruction-bascule button:active::before {
    opacity: .55;
}

/* ── Coloris bleu : capsule bleu nuit à texte doré ─────────────────────── */

.btn-tuiler,
.btn-degre,
.btn-logout,
#nav-rubriques button,
.nav-degres button,
#nav-loi .nav-loi-lien,
#instruction-bascule button {
    color      : #e9c96a;
    text-shadow: 0 1px 1px rgba(0,0,0,.5);
    background : linear-gradient(180deg, #3c548a 0%, #2c3e6b 55%, #22315a 100%);
    box-shadow :
        0 2px 4px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -2px 4px rgba(0,0,0,.38);
}
.btn-tuiler:hover,
.btn-degre:hover,
.btn-logout:hover,
#nav-rubriques button:hover,
.nav-degres button:hover,
#nav-loi a.nav-loi-lien:hover,
#instruction-bascule button:hover {
    background: linear-gradient(180deg, #43609a 0%, #33477c 55%, #26365f 100%);
}
.btn-tuiler:focus-visible,
.btn-degre:focus-visible,
.btn-logout:focus-visible,
#nav-rubriques button:focus-visible,
.nav-degres button:focus-visible,
#nav-loi a.nav-loi-lien:focus-visible,
#instruction-bascule button:focus-visible {
    outline       : 2px solid #7d6428;
    outline-offset: 2px;
}
.btn-tuiler:active,
.btn-degre:active,
.btn-logout:active,
#nav-rubriques button:active,
.nav-degres button:active,
#nav-loi a.nav-loi-lien:active,
#instruction-bascule button:active {
    background: linear-gradient(180deg, #223159 0%, #2c3e6b 60%, #37507f 100%);
    box-shadow:
        0 1px 2px rgba(0,0,0,.3),
        inset 0 3px 6px rgba(0,0,0,.55),
        inset 0 -1px 0 rgba(255,255,255,.15);
}

/* ── Coloris or : capsule or pâle à texte bleu nuit ────────────────────── *
 * Déclinaison par défaut pour l'action secondaire (.btn-retour) ; reprise
 * plus bas, en état, pour la bascule d'instruction et la recherche par
 * degré ouverte. */

.btn-retour {
    color      : #1d2c52;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    background : linear-gradient(180deg, #e7c76c 0%, #cba845 55%, #b9932f 100%);
    box-shadow :
        0 2px 4px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -2px 4px rgba(0,0,0,.20);
}
/* Sur fond clair, la texture mouchetée est atténuée : à égale intensité,
 * elle marquerait davantage que sur la capsule bleue. */
.btn-retour::after { opacity: .14; }

.btn-retour:hover {
    background: linear-gradient(180deg, #edd07a 0%, #d2b04d 55%, #c19a34 100%);
}
.btn-retour:focus-visible {
    outline       : 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}
.btn-retour:active {
    background: linear-gradient(180deg, #b9932f 0%, #cba845 60%, #e7c76c 100%);
    box-shadow:
        0 1px 2px rgba(0,0,0,.25),
        inset 0 3px 6px rgba(0,0,0,.35),
        inset 0 -1px 0 rgba(255,255,255,.30);
}
.btn-retour:active::before { opacity: .55; }

/* ── Tailles et nuances propres à chaque emplacement ───────────────────── */

/* Bouton « Vérifier » / « Rechercher » (parcours d'accès, recherche globale). */
.btn-tuiler {
    padding       : .55rem 1.9rem;
    font-size     : 1.08rem;
    font-family   : var(--police-boutons);
    font-weight   : 600;
    letter-spacing: .02em;
}
/* Quand la capsule porte un pictogramme, celui-ci se règle sur la taille du
 * texte plutôt que sur la sienne propre : il suit ainsi toute variation de
 * corps sans qu'on ait à le redimensionner. */
.btn-tuiler svg,
.btn-retour svg {
    width      : .95em;
    height     : .95em;
    flex-shrink: 0;
}

/* Bouton d'action secondaire, coloris or (parcours d'accès). */
.btn-retour {
    padding       : .45rem 1.45rem;
    font-size     : .92rem;
    font-family   : var(--police-boutons);
    font-weight   : 600;
    letter-spacing: .02em;
}

/* Boutons de degré (login.php) : capsule plus large, chiffre en gros,
 * exposant pour 1ᵉʳ, 2ᵉ, etc. */
.btn-degre {
    padding    : .55rem .3rem;
    font-size  : 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    font-family: var(--police-boutons);
}
.btn-degre sup { font-size: .62em; }

/* Bouton « Déconnexion » de l'en-tête (dashboard.php) : capsule modeste,
 * affichée sous forme de lien. Ombre historiquement un peu plus sombre que
 * les autres capsules bleues (alpha .4 au lieu de .35) : conservée telle
 * quelle pour ne rien changer à l'écran. */
.btn-logout {
    padding    : .38rem 1.15rem;
    font-size  : 1rem;
    font-weight: 600;
    font-family: var(--police-boutons);
    box-shadow :
        0 2px 4px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -2px 4px rgba(0,0,0,.38);
}

/* RETIRÉ LE 4 AOÛT 2026 : les règles du bouton flottant #btn-retour-haut se
 * trouvaient ici, sur une trentaine de lignes. Ce bouton était un vestige
 * antérieur à assets/haut.js. Seul dashboard.php le portait, et il venait s'y
 * poser sur la capsule dorée .haut-de-page, dont il laissait dépasser un
 * croissant. Le bouton, son script et son habillage ont été retirés ensemble.
 * NE PAS LES RÉTABLIR : le retour en haut est le travail de assets/haut.js, et
 * d'aucun autre. Rang 5 de l'audit du 30 juillet 2026. */

/* Boutons du menu flottant de navigation entre rubriques (dashboard.php). */
#nav-rubriques button {
    padding    : .5rem 1.2rem;
    font-size  : .92rem;
    font-weight: 600;
}

/* Chevrons des barres « Aller au degré » (dashboard.php).
 * REFONTE DES 3 ET 4 AOÛT 2026 : les barres des synoptiques n'alignent plus
 * trente capsules numérotées, mais un sélecteur encadré de DEUX CHEVRONS, qui
 * font cheminer d'un degré au suivant. La classe .nav-degres est portée par
 * les trois barres, celle des marches, celle des décors et celle du tableau de
 * Loge, ainsi que par les chevrons de la barre compacte du menu d'un degré.
 * Ces boutons demeurent des capsules du site et reçoivent donc ici leur seule
 * mesure, l'apparence venant des règles partagées ci-dessus. Le corps est
 * resserré et la largeur minimale ramenée à celle d'un carré : un chevron n'a
 * pas besoin de la place d'un ordinal. */
.nav-degres button {
    padding    : .3rem .5rem;
    min-width  : 2.1rem;
    font-size  : .95rem;
    font-weight: 600;
}

/* Capsules du menu flottant de la rubrique « Loi » (includes/menu_loi.php).
 * Ce ne sont pas des <button> mais des <a> et des <span> : un lien quand
 * l'entrée est ouverte et qu'on n'y est pas, un <span> quand on y est déjà ou
 * qu'elle est fermée par le degré. D'où la classe, plutôt que la balise, dans
 * les sélecteurs ci-dessus. Le corps est celui du menu des rubriques d'un
 * degré, les flancs un rien resserrés, la barre en portant quatre. */
#nav-loi .nav-loi-lien {
    padding    : .42rem .85rem;
    font-size  : .92rem;
    font-weight: 600;
    /* Interligne imposé à 1,2, valeur qu'un <button> reçoit d'office du
     * navigateur mais qu'un <a> ou un <span> n'a pas : sans cette ligne, les
     * capsules héritaient de l'interligne du corps de page, 1,7, et la barre
     * gagnait un sixième de sa hauteur pour rien. Une barre collée en haut de
     * l'écran se paie en hauteur utile : chaque pixel y compte. */
    line-height: 1.2;
}

/* Entrée où l'on se trouve : bascule vers le coloris or, comme la version
 * affichée d'une bascule d'instruction. Un état, non une structure : seule la
 * couleur change. Le curseur redevient celui du texte, l'entrée n'étant plus
 * un lien. */
#nav-loi .nav-loi-lien.ici {
    background : linear-gradient(180deg, #e7c76c 0%, #cba845 55%, #b9932f 100%);
    color      : #1d2c52;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    cursor     : default;
}
#nav-loi .nav-loi-lien.ici::after { opacity: .14; }

/* Entrée fermée par le degré de la session : plate et grisée. Tout le
 * vocabulaire du relief est retiré — le bombé du dégradé, l'ombre portée, les
 * deux ombres intérieures — et il ne reste qu'un aplat à peine détaché du fond
 * de la barre, cerné d'un filet. L'encre tombe à moins de la moitié de sa
 * force : l'entrée se lit encore, elle ne s'offre plus.
 *
 * Le reflet vitré et la texture mouchetée sont éteints par la même occasion :
 * ce sont eux qui font croire à une surface, et une surface invite au doigt. */
#nav-loi .nav-loi-lien.eteint {
    background : rgba(255, 255, 255, .09);
    color      : rgba(240, 232, 211, .45);
    text-shadow: none;
    cursor     : default;
    /* Le filet est tracé en ombre intérieure et non en bord : un bord ajoute
     * deux pixels à la capsule, qui dépassait alors ses voisines en hauteur et
     * décalait toute la rangée d'un pixel. L'ombre intérieure cerne sans
     * grandir. */
    box-shadow : inset 0 0 0 1px rgba(255, 255, 255, .16);
}
#nav-loi .nav-loi-lien.eteint::before,
#nav-loi .nav-loi-lien.eteint::after { display: none; }

/* Boutons de bascule d'instruction, « Version 2014 » / « Version 2019 »
 * (dashboard.php). */
#instruction-bascule button {
    padding    : .45rem 1.2rem;
    font-size  : 1rem;
    font-weight: 600;
    font-family: var(--police-principale);
}
/* Version affichée : bascule vers le coloris or — un état, non une
 * structure ; ne concerne donc que la couleur. */
#instruction-bascule button.actif {
    background : linear-gradient(180deg, #e7c76c 0%, #cba845 55%, #b9932f 100%);
    color      : #1d2c52;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
#instruction-bascule button.actif:hover {
    background: linear-gradient(180deg, #edd07a 0%, #d2b04d 55%, #c19a34 100%);
}

/* Bascule de présentation, deux capsules dont une seule est allumée
 * (« Vue compacte » / « Texte déployé » des recueils de règlements). Même
 * dessin que la bascule d'instruction ci-dessus, en un peu plus menu : elle
 * accompagne un formulaire, elle ne le domine pas. */
/* RETIRÉ LE 4 AOÛT 2026 : les règles de .btn-bascule se trouvaient ici et dans
 * huit listes de sélecteurs partagées plus haut. Cette classe habillait la
 * bascule « Vue compacte », remplacée depuis par un interrupteur à galet
 * portant d'autres noms. Plus aucune page du site ne la porte : vérifié sur
 * dashboard.php, loi.php et memo.php, et relevé par l'audit du 30 juillet
 * 2026, rang 15, sur les quarante-trois fichiers du site. */

/* Bouton « Recherche » du menu flottant, à l'état ouvert : même bascule
 * dorée que ci-dessus. */
#btn-rech-degre[aria-expanded="true"] {
    background : linear-gradient(180deg, #e7c76c 0%, #cba845 55%, #b9932f 100%);
    color      : #1d2c52;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
#btn-rech-degre[aria-expanded="true"]:hover {
    background: linear-gradient(180deg, #edd07a 0%, #d2b04d 55%, #c19a34 100%);
}

/* Bouton "Réinitialiser" — action tertiaire, volontairement discrète.
 * Style "lien souligné" plutôt que bouton plein ou contouré : la hiérarchie
 * visuelle signale à l'œil que cette action est secondaire par rapport au
 * bouton "Rechercher" (plein, coloré) qui reste l'action principale attendue. */
.btn-reset {
    display        : inline-block;
    background     : transparent;
    border         : none;
    color          : var(--couleur-texte-doux);
    font-family    : var(--police-boutons);
    font-size      : .85rem;
    text-decoration: underline;
    text-decoration-color: var(--couleur-bordure);
    cursor         : pointer;
    padding        : 0;
    margin         : .6rem 0 1.4rem;
    transition     : color .15s, text-decoration-color .15s;
}
.btn-reset:hover {
    color: var(--couleur-primaire);
    text-decoration-color: var(--couleur-primaire);
}

/* ── SOUS-SECTIONS ─────────────────────────────────────────────────────── */

.sous-section { margin-bottom: 3rem; }

.sous-titre {
    font-size     : 1.08rem;
    font-weight   : normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    color         : var(--couleur-or);
    border-bottom : 1px solid var(--couleur-bordure);
    padding-bottom: .4rem;
    margin-bottom : 1.2rem;
}

/* ── EN-TÊTE DU PANNEAU DEGRÉ : sélecteurs + blason ────────────────────── */

.degre-entete {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    gap            : 1.5rem;
    margin-bottom  : 2rem;
    flex-wrap      : wrap;
}

/* RETIRÉ LE 4 AOÛT 2026 : la règle .degre-blason img se trouvait ici. Le
 * blason du degré porte en réalité la classe .degre-blason-image, habillée
 * dans assets/dashboard.css : aucun élément du site ne porte .degre-blason, et
 * ce sélecteur ne peignait donc plus rien. Audit du 30 juillet 2026, rang 15. */

/* ── ILLUSTRATION DU DELTA (avant sélection d'un degré) ────────────────── */

.illustration-delta {
    text-align: center;
    padding   : 2rem 0 3rem;
}

.illustration-delta img {
    max-width : 340px;
    width     : 100%;
    height    : auto;
    opacity   : .9;
}

.illustration-delta[hidden] { display: none; }

/* ── CARTOUCHES D'ENTRÉES ──────────────────────────────────────────────── *
 * Même vocabulaire visuel que les fiches d'instruction : fond clair, filet
 * or à main gauche, ombre légère, deux par ligne sur écran large. */

.fiches-entrees {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 1.2rem;
}

/* Bascule en colonne unique sur téléphone. Le seuil de 480 px englobe tous
 * les modèles actuels, l'iPhone 16 Pro Max compris, qui se déclare comme un
 * écran de 440 px de large. L'iPad, à partir de 768 px, conserve ses deux
 * colonnes en portrait comme en paysage. */
@media (max-width: 480px) {
    .fiches-entrees { grid-template-columns: 1fr; }
}

/* Fond parchemin doré très pâle, et non plus blanc : les deux familles de
 * cartouches se distinguent désormais à la teinte autant qu'au contenu, les
 * Caractéristiques prenant l'or du site et l'Instruction son bleu nuit (voir
 * .fiche-catechisme). La charte n'accueille ainsi aucune couleur qui lui soit
 * étrangère, et le filet de gauche, doré ici, bleu là-bas, redouble la
 * distinction : la couleur seule n'est jamais le seul signal (WCAG 2.1,
 * critère 1.4.1). */
.fiche-entree {
    background   : #faf3e0;
    border       : 1px solid var(--couleur-bordure);
    border-left  : 4px solid var(--couleur-or);
    border-radius: var(--rayon);
    padding      : 1.1rem 1.3rem;
    box-shadow   : var(--ombre);
}

/* Le nom de la catégorie (« Signe », « Mot de passe », « Marche »…) vient de
   la base : il est composé en Garamond comme tout le contenu du Thuileur. Ce
   qui le distingue du texte qu'il annonce n'est pas la police mais les petites
   capitales, le corps réduit, l'encre d'or et le filet qui le souligne. Quatre
   marques valent mieux qu'une cinquième qui romprait l'unité de la page. */
/* ÉLÉMENT <h3> DEPUIS LE 23 AOÛT 2026, et non plus <span>. L'intitulé de
 * rubrique se lisait comme un titre pour l'œil, mais restait un texte
 * quelconque pour un lecteur d'écran : rien ne disait que « MOT SACRÉ »
 * commandait le paragraphe placé dessous, et le corpus d'un degré se
 * parcourait comme une suite plate, sans qu'on puisse sauter d'une rubrique à
 * la suivante. Or c'est précisément le geste que l'on fait dans un tuileur.
 * Les fiches se rangent sous le <h2> « Caractéristiques du degré », d'où le
 * niveau 3. L'apparence ne change en rien : les deux lignes ci-dessous
 * annulent la taille et la marge que le navigateur donne d'office aux titres. */
.fiche-entree-label {
    display       : block;
    margin-top    : 0;
    font-size     : .85rem;
    font-family   : var(--police-principale);
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color         : var(--couleur-or);

    /* Filet séparateur, identique à celui qui distingue la réponse de la
     * question dans les fiches d'instruction : un trait d'un pixel en or
     * pâle, qui détache le nom de la catégorie du contenu sans peser. */
    border-bottom : 1px solid var(--couleur-bordure);
    padding-bottom: .5rem;
    margin-bottom : .7rem;
}

/* Le contenu des entrées, comme toute matière venue de la base, se lit en bleu
 * nuit et en Garamond. Le noir d'origine (--couleur-texte) faisait, à côté des
 * titres et des tableaux, une seconde encre sans raison d'être : le site n'en
 * connaît plus qu'une. La police est rappelée ici plutôt que laissée en
 * héritage, afin que la règle vaille encore si ces cartouches devaient un jour
 * paraître ailleurs. */
.fiche-entree-contenu {
    font-family: var(--police-principale);
    color      : var(--couleur-primaire);
    /* white-space: pre-line honore les retours à la ligne saisis dans la base,
     * tout en réduisant les suites d'espaces superflus. */
    white-space: pre-line;
}

/* Image insérée au fil du texte par le marqueur [[img:fichier.png]] */
.contenu-image {
    display      : block;
    max-width    : 100%;
    height       : auto;
    margin       : .8rem auto;
    border       : 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}

/* Note détachée, insérée par le marqueur [[note:texte]] : une précision qui
 * accompagne l'entrée sans se confondre avec elle. Le corps réduit et
 * l'italique la placent au second plan, tandis que le léger retrait et le
 * mince filet doré la rattachent visiblement au texte qui précède, à la
 * manière d'une note marginale de manuscrit.
 *
 * white-space: normal annule localement le pre-line hérité de la fiche : une
 * note tient d'ordinaire sur une seule ligne logique, et n'a pas à conserver
 * les retours saisis dans la base. */
.contenu-note {
    display      : block;
    margin       : .5rem 0 .1rem;
    padding-left : .7rem;
    border-left  : 2px solid var(--couleur-bordure);

    font-size    : .88em;
    font-style   : italic;
    /* Bleu nuit éclairci plutôt que gris : la note reste au second plan sans
     * introduire une encre étrangère à celle du reste de la page. */
    color        : #55618a;
    line-height  : 1.55;
    white-space  : normal;
}

/* Deux notes successives se serrent l'une contre l'autre plutôt que de
 * ménager entre elles l'écart qui les sépare du texte principal. */
.contenu-note + .contenu-note { margin-top: .15rem; }

/* ── BOUTON D'ÉCOUTE DES MOTS HÉBREUX ──────────────────────────────────── *
 * Inséré au fil du texte par le marqueur [[son:fichier.mp3]], juste après le
 * mot dont il donne la prononciation. Le bouton reste volontairement discret :
 * un simple haut-parleur tracé en trait, de la taille d'une majuscule, aligné
 * sur la ligne du texte qui l'entoure.
 *
 * L'icône est un SVG écrit directement dans le HTML plutôt qu'une image
 * chargée depuis le serveur : elle épouse ainsi la couleur du texte, reste
 * nette à toute résolution et n'ajoute aucune requête réseau.
 */

/* Socle commun aux deux formes. inline-flex : le bouton prend place dans la
 * phrase comme un mot, tout en centrant ce qu'il contient. unicode-bidi:
 * isolate met son contenu à part du calcul de sens de lecture : un mot hébreu,
 * qui se lit de droite à gauche, ne peut ainsi pas déplacer la ponctuation
 * française qui l'entoure (mécanisme décrit par l'annexe 9 du standard
 * Unicode, « Unicode Bidirectional Algorithm »). */
.btn-son {
    unicode-bidi   : isolate;

    padding        : 0;
    border         : 1px solid transparent;
    background     : none;
    cursor         : pointer;
    font-family    : inherit;
    font-size      : inherit;

    transition     : background-color .18s ease, color .18s ease,
                     border-color .18s ease, transform .18s ease;
}

/* ── Première forme : la pastille ──────────────────────────────────────── *
 * Employée quand le marqueur ne porte pas de mot : [[son:01-boaz.mp3]].
 * Le fond doré pâle et le fin cerne, visibles en permanence, désignent un
 * objet posé sur le texte plutôt qu'un ornement typographique. */
.btn-son-pastille {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;

    width          : 1.55em;
    height         : 1.55em;
    margin         : 0 .15em 0 .32em;
    vertical-align : -.22em;
    border-radius  : 50%;

    color           : var(--couleur-or);
    background-color: rgba(125, 100, 40, .11);
    border-color    : var(--couleur-bordure);
}

.btn-son-pastille:hover,
.btn-son-pastille:focus-visible {
    background-color: rgba(125, 100, 40, .22);
    transform       : scale(1.08);
    outline         : none;
}

/* ── Seconde forme : le mot lui-même ───────────────────────────────────── *
 * Employée quand le marqueur porte le mot : [[son:01-boaz.mp3|בֹּעַז]].
 * Le soulignement pointillé est la convention des dictionnaires et des
 * encyclopédies pour signaler qu'un supplément est disponible, distincte du
 * trait plein qui annonce une navigation. La cible du clic devient le mot
 * entier, bien plus commode au doigt sur tablette (critère 2.5.8 des règles
 * d'accessibilité WCAG 2.2 du W3C, sur la taille des cibles). */
/* display: inline, et non inline-flex : un libellé long, telle une acclamation
 * entière, se répartit ainsi sur plusieurs lignes comme n'importe quelle
 * phrase, le pointillé suivant fidèlement chaque ligne. Une boîte flexible
 * l'aurait maintenu d'un seul tenant, au risque de déborder sur téléphone. */
.btn-son-mot {
    display        : inline;
    margin         : 0 .05em;
    padding        : 0 .08em;
    text-align     : left;

    color          : inherit;
    border-bottom  : 1px dotted var(--couleur-or);
    border-radius  : 2px;
}

.btn-son-mot:hover,
.btn-son-mot:focus-visible {
    background-color   : rgba(125, 100, 40, .13);
    border-bottom-color: var(--couleur-primaire);
    outline            : none;
}

/* Le mot conserve la taille du texte courant ; l'hébreu ponctué gagne
 * cependant à être légèrement agrandi, ses points-voyelles étant menus. */
.btn-son-texte {
    font-size: 1.06em;
}

/* Dans cette seconde forme, l'icône suit le mot, en or et de taille réduite. */
.btn-son-mot .btn-son-icone {
    display       : inline-block;
    width         : 1.25em;
    height        : 1.25em;
    margin-left   : .22em;
    vertical-align: -.24em;
    color         : var(--couleur-or);
}

.btn-son-icone {
    width          : 100%;
    height         : 100%;
    fill           : none;
    stroke         : currentColor;
    stroke-width   : 1.7;
    stroke-linecap : round;
    stroke-linejoin: round;
}

/* Le corps du haut-parleur est plein, les ondes sont de simples arcs. */
.btn-son-corps { fill: currentColor; stroke-width: 1.2; }

/* Pendant la lecture, le bouton prend l'or du site et ses deux ondes battent
 * doucement, l'une après l'autre : le visiteur voit ainsi quel mot est en
 * cours de prononciation, même s'il a coupé le son de son appareil. */
.btn-son-pastille.btn-son-lecture {
    color           : var(--couleur-or);
    background-color: rgba(125, 100, 40, .26);
    border-color    : var(--couleur-or);
}

.btn-son-mot.btn-son-lecture {
    background-color   : rgba(125, 100, 40, .16);
    border-bottom-color: var(--couleur-or);
    border-bottom-style: solid;
}

.btn-son-lecture .btn-son-onde {
    animation: onde-son 1.1s ease-in-out infinite;
}

.btn-son-lecture .btn-son-onde-large {
    animation-delay: .18s;
}

@keyframes onde-son {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

/* Fichier introuvable ou illisible : le bouton s'estompe et cesse de
 * répondre, plutôt que de laisser croire à une panne du site. */
.btn-son-muet {
    opacity       : .35;
    cursor        : default;
    pointer-events: none;
}

/* Préférence système « animations réduites » : les ondes cessent de battre,
 * seule la couleur signale la lecture. Recommandation d'accessibilité du W3C
 * (WCAG 2.1, critère 2.3.3, « Animation from Interactions »). */
@media (prefers-reduced-motion: reduce) {
    .btn-son-lecture .btn-son-onde { animation: none; opacity: 1; }
    .btn-son { transition: none; }
}

.fiche-entree-image {
    display   : block;
    max-width : 100%;
    height    : auto;
    margin    : 1rem auto 0;
    border    : 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}

/* ── ONGLET « LES 33 DEGRÉS » ──────────────────────────────────────────── */

.illustration-33degres,
.illustration-33degres-humour {
    display      : block;
    max-width    : 100%;
    height       : auto;
    margin       : 0 auto 2.5rem;
    border-radius: var(--rayon);
}

.illustration-33degres-humour { margin: 2.5rem auto 0; }

/* Le tableau des 33 degrés est désormais placé sous le texte de la page.
 * Sa largeur est arrêtée à 800 px sur ordinateur et tablette, ramenée à
 * 470 px sur téléphone (voir la requête média juste après). La hauteur reste
 * sur "auto" : le navigateur la calcule à partir des proportions natives du
 * fichier, l'image ne subit donc aucune déformation. max-width: 100%, hérité
 * de la règle ci-dessus, sert de garde-fou : si la fenêtre est plus étroite
 * que la largeur demandée, l'image se réduit d'autant plutôt que de déborder. */
.illustration-33degres {
    width : 800px;
    margin: 2.5rem auto 0;
}

@media (max-width: 600px) {
    .illustration-33degres { width: 470px; }
}

.texte-33degres {
    max-width: 760px;
    margin   : 0 auto;
    font-size: 1.08rem;
}

.texte-33degres p { margin-bottom: 1rem; }

.liste-ateliers {
    list-style   : none;
    margin       : 0 0 1.5rem;
    padding      : 1rem 1.4rem;
    background   : var(--couleur-surface);
    border       : 1px solid var(--couleur-bordure);
    border-left  : 4px solid var(--couleur-or);
    border-radius: var(--rayon);
    box-shadow   : var(--ombre);
}

.liste-ateliers li {
    padding-bottom: .35rem;
}

.liste-ateliers li + li {
    border-top : 1px solid var(--couleur-bordure);
    padding-top: .35rem;
}

/* ── TABLEAU DE LOGE ───────────────────────────────────────────────────── *
 * L'image est présentée comme une planche encadrée : fond clair, filet or
 * pâle et légère ombre portée, à l'image des cartouches et des fiches, pour
 * rester dans le registre visuel du reste du site.
 *
 * Largeur plafonnée à 450 px sur tous les écrans (ordinateur, tablette et
 * téléphone). La hauteur reste sur "auto" : le navigateur la calcule
 * lui-même à partir des proportions natives du fichier, l'image ne subit
 * donc aucune déformation. width: 100% laisse l'image se réduire d'autant
 * lorsque la fenêtre est plus étroite que 450 px (téléphone), plutôt que de
 * déborder ; c'est ce même mécanisme qui rend inutile toute règle @media
 * dédiée au téléphone. */

.image-tableau {
    display      : block;
    width        : 100%;
    max-width    : 450px;
    height       : auto;
    margin       : 0 auto;
    padding      : .6rem;
    background   : var(--couleur-surface);
    border       : 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow   : var(--ombre);
}

/* ── FICHES CATÉCHISME ─────────────────────────────────────────────────── */

/* DEUX COLONNES FIXES DEPUIS LE 19 AOÛT 2026, sur demande de Hugues, plutôt
 * que la grille fluide d'origine (repeat(auto-fill, minmax(340px, 1fr))) :
 * celle-ci ouvrait une troisième colonne dès que l'écran le permettait, et la
 * variabilité de longueur des entrées y creusait alors de longs vides sous
 * les fiches les plus courtes d'une colonne voisine d'une fiche longue. Deux
 * colonnes, comme les Caractéristiques du degré (voir .fiches-entrees
 * ci-dessous), s'accommodent bien mieux d'un texte de longueur imprévisible :
 * même mécanisme, même repère visuel, sur toutes les pages de navigation par
 * degré. */
#fiches-catechismes,
#fiches-res-catechismes {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 1.2rem;
}

/* Bascule en colonne unique sur téléphone, au même seuil que les
 * Caractéristiques du degré (voir plus bas) : sous 480 px, deux colonnes de
 * fiches ne resteraient pas lisibles. */
@media (max-width: 480px) {
    #fiches-catechismes,
    #fiches-res-catechismes {
        grid-template-columns: 1fr;
    }
}

/* Fond bleu très pâle et filet de gauche en bleu nuit : l'Instruction prend
 * ainsi l'autre couleur de la charte, quand les Caractéristiques gardent l'or
 * (voir .fiche-entree). Deux registres, deux teintes, et l'œil range les fiches
 * avant même de les lire. */
.fiche-catechisme {
    background   : #edf1f9;
    border       : 1px solid var(--couleur-bordure);
    border-left  : 4px solid var(--couleur-primaire);
    border-radius: var(--rayon);
    padding      : 1.1rem 1.3rem;
    box-shadow   : var(--ombre);
}

.fiche-degre-badge {
    display      : inline-block;
    font-family  : var(--police-interface);
    font-size    : .85rem;
    color        : var(--couleur-or);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}

/* ÉLÉMENT <h3> DEPUIS LE 23 AOÛT 2026, pour la même raison que
 * .fiche-entree-label : dans une instruction de cent questions, la question
 * est le titre de sa réponse, et c'est par elle qu'on navigue. Les fiches se
 * rangent sous le <h2> « Instruction », d'où le niveau 3. font-size et
 * margin-top annulent l'habillage que le navigateur donne d'office aux
 * titres : l'apparence est celle d'avant, au pixel près. */
.fiche-question {
    white-space  : pre-line;
    font-size    : 1rem;
    font-weight  : 600;
    margin-top   : 0;
    margin-bottom: .6rem;
    color        : var(--couleur-primaire);
}

/* La réponse était composée en italique. L'italique convient à une réplique
 * brève, qu'il détache de la demande ; il fatigue sur les longues instructions,
 * ses lettres penchées et liées ralentissant l'œil (l'effet est ancien et bien
 * décrit : Tinker, « Legibility of Print », 1963). Le romain est donc rétabli
 * partout. La demande et la réponse restent distinctes par la graisse de l'une
 * et le filet qui les sépare, ce qui suffit. */
.fiche-reponse {
    white-space  : pre-line;
    font-family  : var(--police-principale);
    color        : var(--couleur-primaire);
    border-top   : 1px solid var(--couleur-bordure);
    padding-top  : .6rem;
    margin-top   : .4rem;
}

/* ── FICHES DU CORPUS HISTORIQUE (recherche globale) ───────────────────── *
 * Troisième source de la recherche globale, ajoutée le 25 août 2026 aux
 * fiches d'entrée (or, voir .fiche-entree) et d'instruction (bleu nuit, voir
 * .fiche-catechisme) : les cinq textes de la rubrique Histoire (Manifeste de
 * Lausanne, arbre des Suprêmes Conseils, manuscrit Cooke, Discours de Ramsay,
 * Circulaire aux deux Hémisphères). Le fond parchemin et le filet sépia sont
 * ceux de cette rubrique elle-même (voir #fbf8f0 et #5c5140 dans
 * assets/histoire.css) : un résultat de cette famille se reconnaît ainsi
 * avant même d'être lu, comme les deux autres. */
.fiche-histoire {
    background   : #fbf8f0;
    border       : 1px solid var(--couleur-bordure);
    border-left  : 4px solid #5c5140;
    border-radius: var(--rayon);
    padding      : 1.1rem 1.3rem;
    box-shadow   : var(--ombre);
}

/* La date remplace ici le nom du degré que porte .fiche-degre-badge dans les
 * deux autres sources : ces cinq textes sont tous ouverts dès le 1er degré,
 * et c'est leur date, non leur seuil d'accès, qui situe le résultat. */
.fiche-histoire-date {
    color: #5c5140;
}

.fiche-histoire-titre {
    font-size    : 1rem;
    font-weight  : 600;
    margin-top   : 0;
    margin-bottom: .6rem;
    color        : var(--couleur-primaire);
}

/* L'extrait est un passage du texte réel, non composé pour l'aperçu : il
 * porte donc la même police et la même encre que le corps du site. */
.fiche-histoire-extrait {
    font-family: var(--police-principale);
    color      : var(--couleur-primaire);
    white-space: pre-line;
}

.fiche-histoire-lien {
    display        : inline-block;
    margin-top     : .8rem;
    font-family    : var(--police-interface);
    font-size      : .85rem;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : .04em;
    color          : #5c5140;
    text-decoration: none;
    border-bottom  : 1px solid #5c5140;
    padding-bottom : .1rem;
}

.fiche-histoire-lien:hover,
.fiche-histoire-lien:focus-visible {
    color              : var(--couleur-primaire-hover);
    border-bottom-color: var(--couleur-primaire-hover);
}

/* ── ÉTATS : LOADER, ERREUR, VIDE ──────────────────────────────────────── */

.loader {
    font-family: var(--police-interface);
    color      : var(--couleur-texte-doux);
    padding    : 1.5rem 0;
    font-style : italic;
}

.message.erreur {
    background   : var(--couleur-erreur-fond);
    border       : 1px solid var(--couleur-erreur-bordure);
    border-radius: var(--rayon);
    color        : var(--couleur-erreur-texte);
    padding      : .85rem 1.1rem;
    font-family  : var(--police-interface);
    margin-bottom: 1rem;
}

.vide {
    font-family: var(--police-interface);
    color      : var(--couleur-texte-doux);
    font-style : italic;
    padding    : 1rem 0;
}

/* ── FORMULAIRES DE TUILAGE (login.php / tuiler.php) ──────────────────── */

.tuile-container {
    max-width : 520px;
    margin    : 5vh auto;
    padding   : 2.5rem 2rem;
    background: var(--couleur-surface);
    border    : 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    /* Ancre l'encadrement décrit juste dessous. Sans cette ligne, le cadre
       irait se caler sur la fenêtre du navigateur au lieu de la fenêtre
       d'accès. */
    position  : relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L'ENCADREMENT DES FENÊTRES D'ACCÈS
   ═══════════════════════════════════════════════════════════════════════════
   Deux filets d'or concentriques, avec un losange posé sur la diagonale dans
   chacun des quatre angles. C'est le dessin des pages de titre du XVIIIᵉ
   siècle, et c'est aussi, en plus grand, le motif que porte déjà le fleuron :
   le losange de l'angle répond au losange du fleuron.

   ── Ce qu'il faut retenir en premier ────────────────────────────────────
   Le cadre n'ajoute AUCUNE hauteur. Il est dessiné sur une couche posée
   par-dessus la fenêtre (un pseudo-élément « ::before »), laquelle est sortie
   du flux de la page : elle se superpose au contenu au lieu de le pousser.
   Mesuré dans Chromium à 1180 px et à 390 px de large : l'écart de hauteur
   est de zéro pixel. C'est la condition que Hugues a posée le 31 juillet
   2026, et toute évolution future de ce bloc doit la respecter.

   ── Le procédé, en deux mots ────────────────────────────────────────────
   Le dessin est une image SVG écrite en toutes lettres dans cette feuille
   (une « adresse de données »), donc AUCUN fichier à téléverser et AUCUNE
   requête réseau : environ 600 octets une fois la feuille comprimée.

   « border-image » découpe cette image en neuf cases, comme une grille de
   morpion. Les quatre cases d'angle contiennent les losanges et sont posées
   telles quelles, sans jamais se déformer ; les quatre cases de bord ne
   contiennent que des filets droits, et s'étirent autant qu'il le faut pour
   suivre la fenêtre, quelle que soit sa taille. La case du centre est vide.
   C'est ce découpage qui permet à un cadre orné de s'adapter à une fenêtre
   de n'importe quelle dimension sans qu'aucun ornement ne s'écrase.

   « border-image-slice: 40 » désigne la largeur des cases d'angle dans
   l'image ; « border-image-width: 40px » leur taille à l'écran. Les deux
   valeurs sont égales à dessein : le dessin est ainsi rendu à son échelle
   exacte, et les filets restent des cheveux d'un pixel.

   ── Portée ──────────────────────────────────────────────────────────────
   Quatre pages emploient .tuile-container et reçoivent donc le cadre :
   semestre.php, login.php, tuiler.php et oubli.php. C'est voulu : ce sont les
   quatre fenêtres du parcours d'entrée, et un cadre qui apparaîtrait puis
   disparaîtrait d'une étape à l'autre se remarquerait bien davantage que le
   cadre lui-même. Aucune autre page du site n'emploie cette classe.

   ── Précautions ─────────────────────────────────────────────────────────
   « pointer-events: none » laisse passer la souris : la couche est un décor,
   elle ne doit jamais intercepter un clic destiné à un champ ou à un bouton.
   Le cadre est purement décoratif et ne porte aucune information ; il n'a
   donc rien à annoncer à un lecteur d'écran, et un pseudo-élément vide est
   précisément ce qui convient. Il ne bouge pas et ne clignote pas : rien à
   prévoir au titre du mouvement réduit. */

.tuile-container::before {
    content       : "";
    position      : absolute;
    /* Écrit en quatre propriétés plutôt qu'avec le raccourci « inset », que
       Safari n'a reconnu qu'à partir de sa version 14.1, en 2021. La capsule
       du haut de page, plus bas dans cette feuille, emploie bien « inset » :
       ce n'est donc pas une règle absolue du site, mais ici le cadre est le
       premier ornement que voit un visiteur, et quatre lignes au lieu d'une
       est un prix dérisoire pour qu'il paraisse aussi sur un téléphone
       ancien. */
    top           : 9px;
    right         : 9px;
    bottom        : 9px;
    left          : 9px;
    pointer-events: none;
    border        : 40px solid transparent;
    border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' width='120' height='120'%3E%3Cg fill='none' stroke='%237d6428' stroke-linecap='round'%3E%3Crect x='2.5' y='2.5' width='115' height='115' stroke-width='1'/%3E%3Crect x='6.5' y='6.5' width='107' height='107' stroke-width='.6'/%3E%3Cpath stroke-width='.8' d='M14 10 18 14 14 18 10 14Z'/%3E%3Cpath stroke-width='.8' d='M106 10 110 14 106 18 102 14Z'/%3E%3Cpath stroke-width='.8' d='M14 102 18 106 14 110 10 106Z'/%3E%3Cpath stroke-width='.8' d='M106 102 110 106 106 110 102 106Z'/%3E%3C/g%3E%3C/svg%3E");
    border-image-slice : 40;
    border-image-width : 40px;
    border-image-repeat: stretch;
}

.tuile-header { margin-bottom: 2rem; text-align: center; }

.tuile-header h1 {
    font-size     : 1.55rem;
    color         : var(--couleur-primaire);
    font-weight   : normal;
    letter-spacing: .04em;
    margin-bottom : .5rem;
}

.tuile-intro {
    color      : var(--couleur-texte-doux);
    font-family: var(--police-interface);
    font-size  : .92rem;
}

/* ── FLEURON ──────────────────────────────────────────────────────────── *
 * Ornement typographique des imprimeurs anciens : point, filet, losange,
 * filet, point. Fondu en plomb au même titre qu'une lettre, il se composait
 * entre deux blocs de texte pour les séparer sans les couper ; placé au bas
 * d'une page ou en fin de chapitre, il prenait le nom de cul-de-lampe, par
 * analogie de forme avec la pièce évasée qui supporte un luminaire. Les
 * fonderies du XVIᵉ siècle en proposaient des séries entières, et Fournier le
 * Jeune en publia des catalogues raisonnés au XVIIIᵉ.
 *
 * Le dessin lui-même est en SVG, dans le corps de chaque page : il reste donc
 * net à toute taille et ne coûte aucun téléchargement. Seules ses règles de
 * couleur et de dimension figurent ici, en un seul endroit, pour servir à
 * semestre.php, tuiler.php, et à toute page qui en aurait besoin demain.
 * accueil.css redéfinit les siennes, la page d'accueil ayant sa propre
 * échelle. */

.fleuron {
    display  : block;
    width    : 60%;
    max-width: 170px;
    height   : 16px;
    margin   : 1rem auto 0;
}

.fleuron-trait   { stroke: var(--couleur-or); stroke-width: 1; }
.fleuron-losange { fill: none; stroke: var(--couleur-or); stroke-width: 1; }
.fleuron-point   { fill: var(--couleur-or); }

/* Le Delta du fleuron, substitué au losange le 31 juillet 2026 sur les pages
   du parcours d'accès. Le triangle est équilatéral, haut de 14 unités sur les
   20 que compte le dessin, et centré sur l'axe des filets : ceux-ci le
   coupent donc à mi-hauteur, exactement comme ils coupaient le losange.
   Aucun rayonnement : le Delta se donne nu, et c'est ce qui lui permet de
   rester un ornement de filet plutôt que de devenir une vignette.

   .fleuron-losange demeure et n'a pas changé d'un trait : la page d'accueil
   porte deux fleurons qui l'emploient toujours. Les deux règles cohabitent
   sans se gêner, chaque page appelant celle qui lui convient. */
.fleuron-delta   { fill: none; stroke: var(--couleur-or); stroke-width: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   LES DIDASCALIES
   ═══════════════════════════════════════════════════════════════════════════

   On appelle ici « didascalie », par emprunt au théâtre, toute indication
   adressée au lecteur qui n'appartient pas au corpus lui-même : une consigne
   d'usage, une précision de saisie, un rappel de portée. Le corpus dit ce que
   le Rite enseigne ; la didascalie dit comment lire la page.

   Ces indications étaient dispersées dans une vingtaine de classes locales,
   chacune avec sa taille, sa couleur et sa graisse. Elles sont désormais
   rendues par un seul dessin, posé ici le 30 juillet 2026 : filet d'or en
   marge gauche, fond d'or très pâle, pictogramme, texte en Garamond.

   Trois pictogrammes, un seul habillement. La couleur, la graisse et le
   cadre ne changent pas d'une variante à l'autre : l'œil reconnaît d'emblée
   la famille, le pictogramme dit seulement la fonction.

     .didascalie                      « i » cerclé   — une précision
     .didascalie.didascalie--avert    « ! » en triangle — une mise en garde
     .didascalie.didascalie--action   un pointeur   — un geste à accomplir

   Emploi. Rien d'autre à écrire que la classe : le pictogramme est dessiné
   par la feuille de style, il n'a pas à figurer dans la page.

     <p class="didascalie">Les majuscules sont facultatives.</p>
     <p class="didascalie didascalie--avert">Ces blasons ne sont pas…</p>
     <p class="didascalie didascalie--action">Cliquez sur un blason…</p>

   Pour une didascalie de plusieurs paragraphes ou une liste, employer un
   <div class="didascalie"> qui les contient tous : le pictogramme demeure
   unique, en tête du bloc.

   Le pictogramme est un masque et non une image : il prend sa couleur du
   texte qui l'entoure, et un navigateur qui ignorerait les masques affiche
   simplement la didascalie sans lui, jamais un carré vide. Le préfixe
   -webkit- est là pour les Safari un peu anciens. */

.didascalie {
    position     : relative;
    margin       : 1.1rem 0;
    padding      : .7rem .9rem .7rem 2.55rem;
    border-left  : 3px solid var(--couleur-or, #7d6428);
    border-radius: 0 var(--rayon, 6px) var(--rayon, 6px) 0;
    background   : rgba(125, 100, 40, .07);
    font-family  : var(--police-principale);
    font-size    : .95rem;
    font-weight  : 400;
    font-style   : normal;
    line-height  : 1.45;
    text-align   : left;
    color        : #4a4335;
}

/* Le pictogramme. Il est posé hors du fil du texte, en position absolue, et
   non comme premier élément d'une rangée : le texte d'une didascalie porte
   souvent des mots en gras ou en italique, et ceux-ci se seraient détachés en
   colonnes séparées si le bloc avait été composé en grille. */
.didascalie::before {
    content    : '';
    position   : absolute;
    left       : .9rem;
    top        : .82rem;
    width      : 1.05rem;
    height     : 1.05rem;
    background : var(--couleur-or, #7d6428);
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="9"/%3E%3Cpath d="M12 11v5"/%3E%3Cpath d="M12 7.6h.01"/%3E%3C/svg%3E') center / contain no-repeat;
            mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="9"/%3E%3Cpath d="M12 11v5"/%3E%3Cpath d="M12 7.6h.01"/%3E%3C/svg%3E') center / contain no-repeat;
}

.didascalie--avert::before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3.9 21.4 19.7H2.6Z"/%3E%3Cpath d="M12 9.7v4.2"/%3E%3Cpath d="M12 16.9h.01"/%3E%3C/svg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3.9 21.4 19.7H2.6Z"/%3E%3Cpath d="M12 9.7v4.2"/%3E%3Cpath d="M12 16.9h.01"/%3E%3C/svg%3E');
}

.didascalie--action::before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6.4 3.3 18.5 12.1l-5.5.7 3 6-2.4 1.1-3-6-4.2 4.1Z" fill="%23000" stroke-width="1.2"/%3E%3C/svg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6.4 3.3 18.5 12.1l-5.5.7 3 6-2.4 1.1-3-6-4.2 4.1Z" fill="%23000" stroke-width="1.2"/%3E%3C/svg%3E');
}

/* Contenu. Le gras marque les mots qui portent l'exception : il se voit aussi
   bien en noir et blanc que sur un écran mal réglé, ce qu'une couleur ne fait
   pas. Les paragraphes et les listes internes perdent leurs marges propres,
   le bloc donnant les siennes. */
.didascalie strong { font-weight: 700; }
.didascalie p       { margin: 0; }
.didascalie p + p,
.didascalie p + ul  { margin-top: .5rem; }
.didascalie ul      { margin: 0; padding-left: 1.05rem; }
.didascalie li      { margin: .12rem 0; }
.didascalie li::marker { color: var(--couleur-or, #7d6428); }

/* Sur écran étroit, on resserre : la marge intérieure d'un encadré coûte deux
   fois, à gauche et à droite, sur une colonne qui n'en a guère. */
@media (max-width: 480px) {
    .didascalie {
        padding  : .6rem .7rem .6rem 2.25rem;
        font-size: .9rem;
    }
    .didascalie::before { left: .7rem; }
}

/* Un lecteur qui imprime la page n'a que faire d'un aplat de fond : le filet
   suffit à distinguer la didascalie du corps du texte. */
@media print {
    .didascalie { background: none; }
}

.tuile-form { display: flex; flex-direction: column; gap: 1.4rem; }

.form-group { display: flex; flex-direction: column; gap: .4rem; }

.form-group label {
    font-family: var(--police-interface);
    font-size  : .92rem;
    font-weight: 600;
    color      : var(--couleur-primaire);
}

/* Champs de saisie des formulaires.
 *
 * La liste des types est explicite, et non un simple « input », parce qu'une
 * case à cocher ou un bouton radio n'ont que faire d'un rembourrage et d'un
 * fond. Elle a été étendue le 30 juillet 2026 : elle ne nommait que le type
 * « text », si bien que le champ de courriel de oubli.php et le champ de mot
 * de passe de semestre.php échappaient à la règle et reprenaient l'apparence
 * par défaut du navigateur, plus étroite et d'un autre filet. Deux champs
 * voisins ne se ressemblaient plus.
 *
 * Les types cités ici sont ceux qu'un formulaire de ce site peut employer.
 * Si vous en ajoutez un jour un autre (« tel », « url », « number »), pensez
 * à l'inscrire dans cette liste : c'est le seul endroit à toucher, et c'est
 * précisément pour cela qu'elle existe. */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="search"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group textarea,
.form-group select {
    font-family  : var(--police-principale);
    font-size    : 1rem;
    padding      : .55rem .9rem;
    border       : 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background   : var(--couleur-surface);
    color        : var(--couleur-texte);
    transition   : border-color .15s, box-shadow .15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline     : none;
    border-color: var(--couleur-primaire);
    box-shadow  : 0 0 0 3px rgba(44,62,107,.12);
}

/* Barre d'actions des formulaires d'accès (semestre.php et le formulaire de
 * questions rituelles de tuiler.php). Les boutons étaient jusqu'ici renvoyés
 * aux deux extrémités de la largeur ; ils sont désormais groupés au centre,
 * séparés d'un intervalle constant. Sur les formulaires ne comportant qu'un
 * seul bouton, celui-ci se trouve donc centré. */
.form-actions {
    display        : flex;
    justify-content: center;
    align-items    : center;
    gap            : .9rem;
    margin-top     : .5rem;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .header-inner  { flex-direction: column; align-items: flex-start; }
    /* RETIRÉ LE 4 AOÛT 2026 : .onglets { overflow-x: auto; } se trouvait ici.
     * C'était un vestige du temps où la rangée ne se repliait pas. Depuis
     * assets/onglets.css, elle passe à la ligne d'elle-même sur les petits
     * écrans : plus rien ne débordait, et la règle n'avait plus d'objet. Elle
     * était même nuisible, un conteneur à débordement rognant ce qui en sort,
     * et les bulles d'explication des onglets s'en trouvaient tronquées sur une
     * fenêtre étroite munie d'une souris. */
    /* Sur téléphone, le bloc des sélecteurs et le blason s'empilent. Les
     * quatre sélecteurs occupent toute la largeur ; le blason, lui, se
     * centre en dessous. */
    .degre-entete     { flex-direction: column; align-items: stretch; gap: 1.2rem; }
    .recherche-barre { flex-direction: column; }
    /* Le rembourrage horizontal passe de 1 à 1,25 rem pour ménager au cadre
       la place de respirer entre le bord de la fenêtre et le texte. Le
       rembourrage VERTICAL est laissé intact : la hauteur de la fenêtre ne
       change donc pas d'un pixel sur téléphone. */
    .tuile-container { margin: 1rem; padding: 1.5rem 1.25rem; }
    /* Cadre resserré à la mesure de l'écran : les losanges d'angle passent de
       40 à 26 pixels, faute de quoi ils se rejoindraient presque au sommet
       d'une fenêtre étroite. */
    .tuile-container::before {
        top   : 5px;
        right : 5px;
        bottom: 5px;
        left  : 5px;
        border-width       : 26px;
        border-image-width : 26px;
    }
    /* La bascule en colonne unique de ces deux fiches est désormais posée au
       même seuil que les Caractéristiques du degré, 480 px et non 600 :
       voir la règle « FICHES CATÉCHISME » plus haut dans ce fichier. */
}

/* ── FLÈCHE DE RETOUR EN HAUT DE PAGE ──────────────────────────────────── *
 * Capsule ronde flottante, dans l'angle inférieur droit. Elle rend surtout
 * service sur téléphone, où les pages du site se déroulent longuement, mais
 * elle sert aussi sur un grand écran, la fiche mémo ou le recueil déployé
 * pouvant compter plusieurs milliers de mots.
 *
 * Elle emprunte à la capsule dorée du site son bombé, son reflet et son
 * enfoncement au clic : c'est le dessin réservé à l'action secondaire.
 *
 * Elle est masquée par défaut, et rendue visible par assets/haut.js après
 * trois cents pixels de défilement. Si le script ne s'exécute pas, elle
 * demeure donc invisible plutôt que d'offrir un bouton inerte.
 *
 * Le décalage vers le bas au repos, puis sa remise en place, évite qu'elle
 * n'apparaisse brutalement : elle monte du bord de l'écran.
 */

.haut-de-page {
    position       : fixed;
    right          : 1.1rem;
    bottom         : 1.1rem;
    z-index        : 60;
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 2.9rem;
    height         : 2.9rem;
    padding        : 0;
    border         : 1px solid #8d7433;
    border-radius  : 50%;
    cursor         : pointer;
    color          : #2c3e6b;
    background     : linear-gradient(180deg, #e7c76c 0%, #cba845 55%, #b9932f 100%);
    box-shadow     :
        0 2px 6px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 2px rgba(0, 0, 0, .20);
    opacity        : 0;
    visibility     : hidden;
    transform      : translateY(.6rem);
    transition     : opacity .18s ease, transform .18s ease, visibility .18s;
}

.haut-de-page.visible {
    opacity   : 1;
    visibility: visible;
    transform : translateY(0);
}

.haut-de-page svg {
    width : 1.4rem;
    height: 1.4rem;
}

.haut-de-page:hover {
    background: linear-gradient(180deg, #f0d47f 0%, #d6b451 55%, #c49f36 100%);
}

.haut-de-page:focus-visible {
    outline       : 2px solid var(--couleur-primaire);
    outline-offset: 3px;
}

.haut-de-page:active {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, .35),
        inset 0 2px 5px rgba(0, 0, 0, .30);
}

/* Sur téléphone, la capsule se rapproche du bord et grossit un peu : le pouce
   d'un adulte demande quarante-quatre pixels de cible, seuil retenu par les
   recommandations d'accessibilité mobile. */
@media (max-width: 600px) {
    .haut-de-page {
        right : .8rem;
        bottom: .8rem;
        width : 3rem;
        height: 3rem;
    }
}

/* Elle ne s'imprime pas : elle n'a de sens qu'à l'écran. */
@media print {
    .haut-de-page { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .haut-de-page { transition: opacity .18s ease, visibility .18s; transform: none; }
}