/* Nouvelle présentation du site (document 17 ; maquette retenue par le responsable le 24/10/2026). Feuille AJOUTÉE à
   celle du thème (theme.css de YOOtheme/UIkit, inchangée) : nouveaux blocs (préfixe « om- »), confort de lecture de
   toutes les pages, mise en page des articles, crypte des grades, pied de page. En-tête et menus : ceux du site. */
:root {
  --om-or: #b8976a;          /* or des titres du site */
  --om-or-fonce: #806800;    /* or foncé des petits titres (sommaire) */
  --om-rouge: #a31c2b;       /* rouge des titres d'articles */
  --om-texte: #2e2e2e;
  --om-gris: #6b6b6b;
  --om-fond: #f6f4ef;
  --om-filet: #e4ddd0;
}

/* ---------- Rangées : toujours pleines ---------- */
.om-rangee-4, .om-rangee-3 { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .om-rangee-4, .om-rangee-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .om-rangee-4 { grid-template-columns: repeat(4, 1fr); } .om-rangee-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Petits éléments communs ---------- */
.om-h1 { font-family: Lora, serif; font-size: clamp(32px, 5vw, 46px); color: var(--om-or); margin: 0 0 12px; }
.om-chapo { font-size: 18px; line-height: 1.6; color: var(--om-texte); max-width: 46rem; margin: 0; }
.om-surtitre { font: 600 12px/1.4 Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--om-or-fonce); margin: 0 0 6px; }
.om-meta { font-size: 14px; color: var(--om-gris); margin: 12px 0 0; }
.om-centre { text-align: center; margin: 30px 0 0; }
.om-titre-section { font-family: Lora, serif; font-size: 26px; color: var(--om-texte); margin: 44px 0 22px; display: flex; align-items: center; gap: 16px; }
.om-titre-section::after { content: ""; flex: 1; height: 1px; background: var(--om-filet); }
.om-titre-section:first-child { margin-top: 0; }

/* ---------- Cartes de textes ---------- */
.om-carte { background: #fff; border: 1px solid var(--om-filet); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.om-carte:hover { box-shadow: 0 10px 28px rgba(60, 45, 20, .12); transform: translateY(-2px); }
.om-carte-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--om-fond); }
.om-carte-image img { width: 100%; height: 100%; object-fit: cover; }
.om-carte-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.om-carte-titre { font-family: Lora, serif; font-size: 20px; line-height: 1.3; margin: 0 0 10px; }
.om-carte-titre a { color: var(--om-rouge); }
.om-carte-texte { font-size: 15.5px; line-height: 1.55; color: var(--om-texte); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Accueil ---------- */
.om-hero { position: relative; text-align: center; padding: 36px 0 44px; }
.om-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.82)); }
.om-hero > * { position: relative; }
.om-hero .titre-ordre { margin: 0 0 18px; }
.om-hero-embleme { width: 180px; height: auto; display: block; margin: 0 auto 18px; }
.om-hero-phrase { font-family: Lora, serif; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--om-texte); max-width: 44rem; margin: 0 auto; }
.om-porte { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border: 1px solid var(--om-filet); border-top: 3px solid var(--om-or);
  background: #fff; color: var(--om-texte); text-decoration: none !important; transition: box-shadow .2s; }
.om-porte:hover { box-shadow: 0 10px 28px rgba(60, 45, 20, .12); }
.om-porte-titre { font-family: Lora, serif; font-size: 23px; color: var(--om-rouge); }
.om-porte-texte { font-size: 16px; line-height: 1.55; flex: 1; }
.om-porte-action { font: 600 13px Poppins, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--om-or-fonce); }
.om-une { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--om-filet); padding: 24px; }
@media (min-width: 900px) { .om-une { grid-template-columns: 1.1fr 1fr; padding: 32px; } }
.om-une-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.om-une-titre { font-family: Lora, serif; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; margin: 0 0 14px; }
.om-une-titre a { color: var(--om-rouge); }
.om-une p { font-size: 17px; line-height: 1.6; color: var(--om-texte); }

/* ---------- Bibliothèque : en-tête, filtre par thème (sans script : cases à cocher et :has) ---------- */
.om-entete-page { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.om-recherche { width: 100%; max-width: 360px; }
.om-filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.om-filtre-case { position: absolute; opacity: 0; pointer-events: none; }
.om-filtre { cursor: pointer; padding: 8px 16px; border: 1px solid var(--om-or); border-radius: 999px; font: 500 14px Poppins, sans-serif;
  color: var(--om-or-fonce); background: #fff; user-select: none; }
.om-filtre span { opacity: .7; margin-left: 4px; }
.om-filtre-case:checked + .om-filtre { background: var(--om-or); color: #fff; }
.om-filtre-case:focus-visible + .om-filtre { outline: 2px dotted #262626; outline-offset: 2px; }
.om-biblio:has(#om-f-arcana:checked) .om-carte:not([data-theme="arcana"]),
.om-biblio:has(#om-f-grades:checked) .om-carte:not([data-theme="grades"]),
.om-biblio:has(#om-f-histoire:checked) .om-carte:not([data-theme="histoire"]),
.om-biblio:has(#om-f-traditions:checked) .om-carte:not([data-theme="traditions"]) { display: none; }

/* ---------- Évènements : mur d'affiches ---------- */
.om-evt { display: flex; flex-direction: column; }
.om-evt-affiche { display: block; aspect-ratio: 4 / 5; background: #fff; border: 1px solid var(--om-filet); padding: 10px; margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(60, 45, 20, .10); transition: transform .2s, box-shadow .2s; }
.om-evt-affiche:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(60, 45, 20, .18); }
.om-evt-affiche img { width: 100%; height: 100%; object-fit: contain; }
.om-evt-photo img { object-fit: cover; }
.om-evt-titre { font-family: Lora, serif; font-size: 20px; line-height: 1.3; margin: 0 0 8px; color: var(--om-texte); }
.om-evt-texte { font-size: 15.5px; line-height: 1.55; color: var(--om-texte); margin: 0; }
.om-evt-lien { margin: 10px 0 0; font: 500 14px Poppins, sans-serif; }
.om-prochain { border: 2px dashed var(--om-or); background: #fffdf8; padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; min-height: 280px; }
.om-prochain-titre { font-family: Lora, serif; font-size: 22px; line-height: 1.3; color: var(--om-rouge); margin: 4px 0 10px; }
.om-prochain p:last-child { font-size: 15.5px; line-height: 1.55; margin: 0; }

/* ---------- Nous rejoindre ---------- */
.om-etape { padding: 22px 20px 20px; border: 1px solid var(--om-filet); background: #fff; }
.om-etape h2 { font-family: Lora, serif; font-size: 21px; margin: 8px 0 8px; }
.om-etape p { font-size: 16px; line-height: 1.55; margin: 0; color: var(--om-texte); }
.om-etape-num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--om-or); color: #fff; font: 600 16px Poppins, sans-serif; }
.om-contact { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 22px 24px; margin-top: 30px;
  background: var(--om-fond); border-left: 3px solid var(--om-or); }
.om-contact p { margin: 0; flex: 1 1 320px; font-size: 16px; line-height: 1.55; color: var(--om-texte); }
.om-contact strong { font-family: Lora, serif; font-size: 19px; font-weight: 400; }
.om-deux-colonnes { display: grid; gap: 0 48px; grid-template-columns: 1fr; margin-top: 48px; }
@media (min-width: 960px) { .om-deux-colonnes { grid-template-columns: 1fr 1fr; } }
.om-deux-colonnes p { font-size: 16.5px; line-height: 1.65; color: var(--om-texte); }
.om-question { border-bottom: 1px solid var(--om-filet); padding: 14px 0; }
.om-question summary { cursor: pointer; font-family: Lora, serif; font-size: 18px; color: var(--om-texte); }
.om-question p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; }
.om-question summary :is(h3, h4) { display: inline; font: inherit; color: inherit; margin: 0; }
/* « Nous rejoindre » : deux colonnes, le texte « Qui frappe à la porte » et les questions fréquentes en trois groupes */
.om-frappe p { font-size: 17px; line-height: 1.7; color: var(--om-texte); }
@media (min-width: 640px) { .om-frappe p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }
.om-faq-groupe + .om-faq-groupe { margin-top: 30px; }
/* Colonne de gauche : le texte, la pyramide des grades en petit, puis le contact du Grand Secrétariat */
.om-frappe .om-contact { margin-top: 28px; }
.om-frappe .om-contact p { flex-basis: 100%; }
.om-frappe-texte { position: relative; z-index: 1; }   /* le texte reste au-dessus de la pointe de la pyramide */
.om-pyramide { margin: -5% auto 0; max-width: 520px; text-align: center; }   /* la pointe, vide, remonte jusqu'à la dernière ligne du texte (proportionnel à la largeur) */
.om-pyramide img { display: block; width: 100%; height: auto; }
.om-pyramide figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--om-gris); }
.om-faq-groupe > h3 { font: 600 13px Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--om-or-fonce); margin: 0 0 4px; }
.om-question p + p { margin-top: 10px; }

/* ---------- Pied de page : un petit plan du site en quatre colonnes ---------- */
.om-pied { background: #232323; color: #cfc6b4; padding: 44px 0 18px; font-size: 15px; }
.om-pied-grille { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .om-pied-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .om-pied-grille { grid-template-columns: repeat(4, 1fr); } }
.om-pied a { color: #e6d9bd; }
.om-pied a:hover { color: #fff; }
.om-pied ul { list-style: none; padding: 0; margin: 0; }
.om-pied li { margin: 0 0 8px; }
.om-pied-titre { font: 600 12px Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--om-or); margin: 0 0 14px; }
.om-pied-ordre { text-align: center; }   /* le sceau et sa légende, centrés l'un sous l'autre */
.om-pied-ordre img { display: block; margin: 0 auto 12px; }
.om-pied-ordre p { font-family: Lora, serif; line-height: 1.5; margin: 0; }
.om-pied-bas { border-top: 1px solid #3a3a3a; margin: 30px 0 0; padding-top: 16px; font-size: 13px; text-align: center; }

/* ---------- Confort de lecture : le texte d'un vrai article, en lettres plus grandes et plus foncées, aligné à gauche,
   en lignes d’environ 70 signes (les articles ont leur colonne de 900 px, plus bas). Les alignements « justifié » écrits dans
   le texte sont neutralisés. ---------- */
.om-lecture #tm-main .uk-width-expand\@m > .uk-panel { max-width: 44rem; margin-left: auto; margin-right: auto; }
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel,
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel p,
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel div,
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel li { font-family: Lora, Georgia, serif; font-size: 18.5px; line-height: 1.75; color: var(--om-texte); font-weight: 400; }
.om-lecture #tm-main .uk-text-success[style*="padding-left"] { padding-left: 1.4em !important; border-left: 3px solid var(--om-or); font-style: italic; color: #4a3f2a !important; }
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel h2,
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel h3 { color: var(--om-texte); margin-top: 1.8em; }
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel .tm-sommaire li { font-family: Poppins, sans-serif; font-size: 15px; line-height: 1.5; }
.om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel .tm-dates { font-family: Poppins, sans-serif; font-size: 14px; }
@media (max-width: 640px) {
  .om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel p,
  .om-lecture #tm-main :is(.uk-width-expand\@m, .om-article-grille) > .uk-panel div { font-size: 17.5px; }
}

/* Confort de lecture étendu à TOUTES les pages de la maquette (L'Ordre, parcours, grades, Rencontres…) : paragraphes et
   blocs de texte en Lora, plus grands et plus foncés, alignés à gauche. Les cartes, légendes, menus, sommaires et
   petits libellés gardent leur style. */
.om-lecture #tm-main :is(p, li, div[style*="text-align"]):not(.uk-card *, .uk-overlay *, .el-meta, .el-title, .tm-sommaire *, .om-suite *, .om-art-entete *, .uk-nav *, .tm-dates, figcaption, table *, .uk-text-meta, .uk-text-small, .om-sans-lecture *) {
  font-family: Lora, Georgia, serif; font-size: 17.5px; line-height: 1.75; color: var(--om-texte); font-weight: 400; }
/* Alignement (choix du responsable, 24/10/2026) : texte justifié, avec coupure des mots en fin de ligne, sur ordinateur
   et tablette ; aligné à gauche sur téléphone, où les colonnes étroites creuseraient de grands blancs entre les mots. */
@media (min-width: 640px) {
  .om-lecture #tm-main :is(p, div[style*="text-align"]):not(.uk-card *, .uk-overlay *, .el-meta, .el-title, .tm-sommaire *, .om-suite *, .om-art-entete *, .uk-nav *, .tm-dates, figcaption, table *, .uk-text-meta, .uk-text-small, .om-sans-lecture *, [style*="center"], [style*="right"], .uk-text-center, .uk-text-center *) {
    text-align: justify !important; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
}
@media (max-width: 639px) {
  .om-lecture #tm-main .uk-text-justify, .om-lecture #tm-main [style*="justify"] { text-align: left !important; }
}
.om-lecture #tm-main :is(h1, h2, h3) { color: var(--om-texte); }
@media (max-width: 640px) { .om-lecture #tm-main :is(p, li, div[style*="text-align"]):not(.uk-card *, .uk-overlay *, .el-meta, .el-title, .tm-sommaire *, .om-suite *, .om-art-entete *, .uk-nav *, .tm-dates, figcaption, table *, .om-sans-lecture *) { font-size: 17px; } }

/* ---------- Articles (S052, troisième essai) : la mise en page des revues ----------
   Deux largeurs seulement : la colonne de texte (900 px, environ 100 signes par ligne en 19 px : choix du responsable, un peu au-delà de la fourchette de 45 à 90 signes) et la largeur élargie
   (1 140 px) pour l'image d'en-tête et les rangées d'illustrations. En-tête dans l'ordre classique : surtitre, titre, chapô,
   auteur, dates ; puis l'image ; puis le sommaire en encadré. La colonne de droite disparaît. « À lire ensuite » ferme
   l'article sur une bande claire, de toute la largeur. */
.om-article-grille { display: grid; max-width: 1140px; margin: 0 auto; width: 100%;
  grid-template-columns: [large-start] minmax(0, 1fr) [texte-start] min(900px, 100%) [texte-end] minmax(0, 1fr) [large-end]; }
.om-article-grille > * { grid-column: texte; margin-left: 0; margin-right: 0; max-width: none; }
.om-article-grille > :is(.om-art-image, .uk-margin.uk-text-center) { grid-column: large; }
.om-article-grille > .om-suite { grid-column: 1 / -1; }
.om-article #tm-main .uk-section { padding-top: 48px; padding-bottom: 0; }

.om-art-entete { text-align: center; margin: 0 0 14px; }
.om-art-entete .om-surtitre { margin-bottom: 14px; }
.om-article #tm-main .om-art-entete h1 { font-family: Lora, serif; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.15; font-weight: 400; color: var(--om-texte); margin: 0 0 18px; }
.om-article #tm-main .om-art-chapo { font: italic 400 21px/1.5 Lora, serif !important; color: #5a4e3c !important; text-align: center !important; margin: 0 auto 4px; }
.om-article #tm-main .tm-bloc-gras { margin: 18px 0 0; }
.om-article #tm-main .tm-bloc-gras > div { font: 600 13px/1.4 Poppins, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: var(--om-or-fonce) !important; text-align: center !important; }
.om-article #tm-main .tm-dates { font: 400 13px Poppins, sans-serif !important; letter-spacing: .06em; color: var(--om-gris) !important; text-align: center; margin-top: 6px; }
.om-art-image { margin: 34px 0 40px; text-align: center; }
.om-art-image img { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 640px; height: auto; }

/* Texte : 19 px, interligne 1,6, paragraphes espacés ; intertitres nets ; sommaire en encadré clair */
.om-article #tm-main .uk-panel :is(p, li, div[style*="text-align"]):not(.tm-dates, .tm-sommaire *, .om-surtitre, .om-art-chapo, .uk-text-meta, .uk-card *) {
  font-size: 19px !important; line-height: 1.62 !important; }
.om-article #tm-main .uk-panel p { margin: 0 0 1.1em; }
.om-article #tm-main .uk-panel h2 { font-family: Lora, serif; font-size: 29px; line-height: 1.25; font-weight: 400; color: var(--om-texte); margin: 1.9em 0 .7em; text-align: left !important; }
.om-article #tm-main .uk-panel h3 { font-family: Lora, serif; font-size: 23px; color: var(--om-texte); margin: 1.6em 0 .6em; text-align: left !important; }
.om-article #tm-main .tm-sommaire { background: var(--om-fond); border-left: 3px solid var(--om-or); padding: 20px 26px 18px; margin: 0 0 36px; }
.om-article #tm-main .tm-sommaire li { font: 400 15.5px/1.5 Poppins, sans-serif; margin-top: 6px; }
.om-article #tm-main .uk-panel img { max-width: 100%; height: auto; }

/* Fin de l'article */
.om-suite { margin: 64px 0 0; padding: 52px 0 60px; background: var(--om-fond); box-shadow: 0 0 0 100vmax var(--om-fond); clip-path: inset(0 -100vmax); }
.om-suite .om-titre-section { margin-top: 0; }
.om-precedent-suivant .uk-pagination { gap: 18px; margin: 56px 0 0; justify-content: space-between; flex-wrap: nowrap; }
.om-precedent-suivant .uk-pagination > li:only-child { margin-left: auto; }
.om-precedent-suivant .uk-pagination > li > a { height: 100%; box-sizing: border-box; }
.om-article #tm-main .om-art-entete h1 { text-transform: none !important; }
.om-precedent-suivant .uk-pagination > li { padding-left: 0; }
.om-precedent-suivant .uk-pagination > li > a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 24px; border: 1px solid var(--om-filet);
  background: #fff; font: 600 12px Poppins, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--om-or-fonce); }
.om-precedent-suivant .uk-pagination > li > a:hover { box-shadow: 0 8px 22px rgba(60, 45, 20, .12); text-decoration: none; }
.om-precedent-suivant .uk-pagination [uk-pagination-next], .om-precedent-suivant .uk-pagination [uk-pagination-previous] { display: none; }
.om-pagination-titre { display: block; font: 400 17px/1.3 Lora, serif; letter-spacing: 0; text-transform: none; color: var(--om-rouge); }
@media (max-width: 639px) {
  .om-article #tm-main .uk-panel :is(p, li, div[style*="text-align"]):not(.tm-dates, .tm-sommaire *, .om-surtitre, .om-art-chapo, .uk-text-meta, .uk-card *) { font-size: 17.5px !important; }
  .om-article #tm-main .om-art-chapo { font-size: 18.5px !important; }
}
.om-precedent-suivant .uk-pagination > li { flex: 1 1 0; }
.om-precedent-suivant .uk-pagination > li:only-child { flex: 0 1 50%; }
.om-article-grille > .uk-panel { max-width: none; margin-left: 0; margin-right: 0; }
.om-article #tm-main .tm-sommaire { display: block !important; width: auto; box-sizing: border-box; text-align: left; }

/* Lettrine : une seule, au début du premier paragraphe. Sur « Mot du Grand Maître », la lettrine s'appliquait aussi au
   titre (le « L » de « Le mot »), d'où deux grandes majuscules l'une à côté de l'autre. */
.om-lecture #tm-main .uk-dropcap::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: inherit; }
.om-lecture #tm-main .uk-dropcap > p:first-of-type::first-letter { float: left; font-size: 4.2em; line-height: 1; margin: 6px 10px 0 0; }

/* ---------- Accueil : l'Ordre en quelques mots (textes de l'ancien accueil) ---------- */
.om-quelques-mots h3 { font-family: Lora, serif; font-size: 21px; color: var(--om-rouge); margin: 0 0 10px; }
.om-quelques-mots p { font-size: 16px; line-height: 1.65; color: var(--om-texte); margin: 0; }
.om-quelques-mots .om-lire { margin-top: 12px; font: 500 14px Poppins, sans-serif; }
@media (min-width: 640px) { .om-quelques-mots p:not(.om-lire) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }

/* ---------- Nous rejoindre : les gravures ---------- */
.om-gravures { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-top: 52px; }
@media (min-width: 960px) { .om-gravures { grid-template-columns: repeat(5, 1fr); } }
.om-gravure { margin: 0; }
.om-gravure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 6px 18px rgba(60, 45, 20, .14); }
.om-gravure figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--om-gris); }

/* ---------- Téléphone : cartes et fiches en largeur, image à gauche, pour des pages moins longues ---------- */
@media (max-width: 639px) {
  .om-carte { display: grid; grid-template-columns: 112px 1fr; align-items: start; }
  .om-carte-image { width: 112px; height: 112px; aspect-ratio: auto; }
  .om-carte-image img { width: 112px; height: 112px; }
  .om-carte-corps { padding: 12px 14px; }
  .om-carte-titre { font-size: 18px; margin-bottom: 6px; }
  .om-carte-texte { font-size: 15px; -webkit-line-clamp: 3; }
  .om-carte .om-meta { margin-top: 8px; font-size: 13px; }
  .om-rangee-4, .om-rangee-3 { gap: 16px; }
  .om-porte { padding: 16px 18px; gap: 6px; }
  .om-porte-titre { font-size: 21px; }
  .om-evt { display: grid; grid-template-columns: 104px 1fr; column-gap: 14px; align-items: start; }
  .om-evt > :not(.om-evt-affiche) { grid-column: 2; }
  .om-evt-affiche { grid-row: 1 / span 4; padding: 4px; margin: 0; }
  .om-evt-titre { font-size: 18px; }
  .om-evt-texte { font-size: 15px; }
  .om-prochain { min-height: 0; padding: 18px; }
  .om-pied-grille { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .om-pied-ordre { grid-column: 1 / -1; }
  .om-pied-ordre img { width: 110px; height: auto; }
}
.om-centre .uk-button { line-height: 1.4; padding-top: 10px; padding-bottom: 10px; }

/* ---------- La crypte des grades (accueil) : un mur de pierre sombre, des niches voûtées cerclées d'or comme dans la
   pyramide des grades ; seule la niche du centre est éclairée, d'une lumière de lampe. Défilement : crypte.js. Sans
   script, la rangée se parcourt en faisant glisser (défilement horizontal). ---------- */
.om-crypte { --om-ecart: 220px; --om-hauteur: 330px; --om-texte-crypte: #efe4cc; background: #1e1b17; padding: 44px 0 0; overflow: hidden; }
.om-crypte .om-titre-section { color: var(--om-texte-crypte); margin: 0 0 18px; }
.om-crypte .om-titre-section::after { background: #4a4031; }
.om-crypte-scene { position: relative; height: var(--om-hauteur); outline: none; overflow: hidden; }
.om-crypte-scene:focus-visible { box-shadow: inset 0 0 0 2px var(--om-or); }
.om-crypte-mur { position: absolute; inset: 0; background-color: #2b251e;
  background-image: radial-gradient(ellipse 380px 260px at 50% 45%, rgba(233, 196, 110, .22), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56'%3E%3Cpath d='M0 .5H120M0 28.5H120M.5 0V28M60.5 0V28M30.5 28V56M90.5 28V56' stroke='%23191511' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: 0 0, var(--om-defile, 0) 0; }
.om-crypte-piste { position: relative; display: flex; gap: 52px; height: 100%; box-sizing: border-box; padding: 34px 40px 0; overflow-x: auto; scroll-snap-type: x mandatory; }
.om-niche-lien { flex: none; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; text-decoration: none !important; }
.om-niche { position: relative; width: 168px; height: 196px; border-radius: 84px 84px 3px 3px; box-sizing: border-box; padding: 34px 16px 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#15120e, #2a241c); border: 3px solid #8a7350; box-shadow: 0 0 0 5px #3a3228, 0 0 0 6.5px #8a7350, inset 0 10px 18px rgba(0, 0, 0, .5); }
.om-niche img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; pointer-events: none; filter: drop-shadow(0 5px 8px rgba(40, 26, 5, .35)); }
.om-medaillon { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 40% 35%, #a92a33, #7a161d); border: 2px solid #d9b45f; color: #f6ead0; font: 700 12px/26px Lora, serif; text-align: center; }
.om-tablette { width: 196px; height: 9px; margin-top: 6px; background: linear-gradient(#a98a55, #6d5532); border-radius: 1px; box-shadow: 0 3px 4px rgba(60, 40, 10, .25); }
.om-crypte-legende { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; text-align: center; z-index: 200; pointer-events: none; width: min(460px, 80%); }
.om-crypte-degre { display: block; font: 600 12px Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e9c77e; }
.om-crypte-nom { display: block; font: 400 23px/1.25 Lora, serif; color: var(--om-texte-crypte); margin-top: 3px; }
.om-crypte-fleche { position: absolute; top: 42%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--om-or); z-index: 210; cursor: pointer;
  background: rgba(30, 27, 23, .8); color: #e9c77e; font: 400 27px/1 Lora, serif; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; }
.om-crypte-fleche[hidden] { display: none; }
.om-crypte-fleche:hover { background: var(--om-or); color: #fff; }
.om-crypte-gauche { left: 2.5%; }
.om-crypte-droite { right: 2.5%; }
/* Avec le script : la rangée défile à la main (flèches, glisser, clavier), le grade suivant arrive par la droite */
.om-crypte-scene.est-actif { touch-action: pan-y; user-select: none; cursor: grab; }
.om-crypte-scene.est-actif.est-tire { cursor: grabbing; }
.om-crypte-scene.est-actif .om-crypte-piste { display: block; padding: 0; overflow: visible; position: absolute; inset: 0; }
.om-crypte-scene.est-actif .om-niche-lien { position: absolute; left: 0; top: 34px; will-change: transform; filter: brightness(calc(.42 + .58 * var(--om-proche, 0))); }
.om-crypte-scene.est-actif .om-niche-lien.est-centre .om-niche { background: radial-gradient(ellipse at 50% 60%, #f3d48c, #a77c37 45%, #3a2c18 80%); border-color: #d9b45f; }
@media (max-width: 639px) { .om-crypte { --om-ecart: 190px; } }

/* ---------- Parcours initiatique : l'échelle des Hauts Grades (S080) ----------
   La légende juste avant le tableau ; trois marques au lieu des couleurs vives d'origine (rouge, violet) :
   médaillon plein (initiation rituelle), médaillon cerclé (circonstances particulières), numéro simple (communication).
   Deux familles, comme sur la pyramide : maçonnerie philosophique (4e-33e), maçonnerie hermétique (34e-97e). */
.om-echelle-intro > p { font-size: 17px; line-height: 1.7; color: var(--om-texte); }
/* Clé de lecture du tableau : une information secondaire, en petit, sur une seule bande en tête du tableau ;
   trois colonnes séparées d'un filet sur ordinateur, l'une sous l'autre sur téléphone */
.om-cle { grid-column: 1 / -1; border-bottom: 1px solid var(--om-filet); padding: 0 0 16px; }
.om-cle-titre { margin: 0 0 10px; font: 600 11.5px Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--om-or-fonce); }
.om-cle ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px 0; grid-template-columns: 1fr; }
@media (min-width: 960px) { .om-cle ul { grid-template-columns: repeat(3, 1fr); } .om-cle li + li { border-left: 1px solid var(--om-filet); } .om-cle li { padding: 0 20px; } .om-cle li:first-child { padding-left: 0; } }
.om-cle li { display: flex; gap: 10px; align-items: flex-start; }
.om-cle li p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--om-gris); }
.om-cle li strong { color: var(--om-texte); font-weight: 600; }
.om-cle .om-degre-num { width: 24px; height: 24px; font-size: 10.5px; }
@media (max-width: 639px) { .om-famille { padding: 18px 16px 4px; } }
.om-echelle { display: grid; gap: 22px 28px; margin-top: 28px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .om-echelle { grid-template-columns: 1fr 2fr; } }
.om-famille { background: #fff; border: 1px solid var(--om-filet); border-top: 3px solid var(--om-or); padding: 22px 24px 8px; }
.om-famille-titre { font: 400 24px/1.3 Lora, serif; color: var(--om-texte); margin: 0 0 16px; }
.om-famille-titre span { display: block; font: 600 12px Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--om-or-fonce); margin-top: 4px; }
.om-famille-colonnes { display: grid; gap: 0 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .om-famille-colonnes-2 { grid-template-columns: 1fr 1fr; } }
.om-atelier { margin: 0 0 20px; }
.om-atelier h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--om-filet); font: 600 13px Poppins, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--om-rouge); }
.om-atelier h4 span { font-weight: 400; letter-spacing: .04em; color: var(--om-gris); text-transform: none; }
.om-degres { list-style: none; padding: 0; margin: 0; }
.om-degre { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.om-degre-nom { flex: 1; font-size: 14.5px; line-height: 1.4; color: var(--om-gris); }
.om-degre-num { flex: none; width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  font: 600 11.5px Lora, serif; color: var(--om-gris); }
/* Initiation rituelle : le médaillon rouge et or de la pyramide */
.om-degre-rituel .om-degre-num { background: radial-gradient(circle at 40% 35%, #a92a33, #7a161d); border: 2px solid #d9b45f; color: #f6ead0; }
/* Circonstances particulières : médaillon cerclé d'or */
.om-degre-particulier .om-degre-num { border: 2px solid #c9a96a; color: var(--om-or-fonce); background: #fffdf8; }
/* Tous les noms de grades ont la même apparence : seul le médaillon du numéro distingue les degrés. Les grades qui
   ont leur page restent des liens, révélés au passage de la souris. */
.om-degre-nom a { color: inherit; text-decoration: none; }
.om-degre-nom a:hover, .om-degre-nom a:focus-visible { color: var(--om-rouge); text-decoration: underline; text-underline-offset: 3px; }
/* Progression initiatique : texte de lecture, la condition d'accès soulignée d'or au lieu du rouge */
.om-souligne { font-weight: 600; background: linear-gradient(transparent 62%, rgba(201, 169, 106, .35) 62%); }

/* ---------- Fondu léger à l'arrivée, le même sur toutes les pages (S087) : le contenu de la page apparaît en 0,8 s.
   Il remplace les apparitions de l'ancien site, réglées bloc par bloc (fondus et glissements). Il est coupé pour les
   visiteurs qui ont demandé à leur appareil de réduire les animations. ---------- */
@keyframes om-fondu { from { opacity: 0; } to { opacity: 1; } }
#tm-main { animation: om-fondu .8s linear both; }
@media (prefers-reduced-motion: reduce) { #tm-main { animation: none; } }

/* ---------- Page de référence « Le rite de Memphis-Misraïm » (document 18, rang 1) : encadré « En bref » et frise
   chronologique (horizontale sur ordinateur, verticale sur téléphone). ---------- */
.om-article #tm-main .om-en-bref { background: var(--om-fond); border-left: 3px solid var(--om-or); padding: 20px 26px 6px; margin: 0 0 36px; }
.om-article #tm-main .om-en-bref-titre { font: 600 13px/1.4 Poppins, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: var(--om-or-fonce) !important; margin: 0 0 10px !important; }
.om-frise { list-style: none; margin: 10px 0 44px; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; border-left: 2px solid var(--om-or); }
.om-frise li { position: relative; padding: 0 0 18px 22px; margin: 0; }
.om-frise li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--om-or); }
.om-frise li.om-frise-ordre::before { background: var(--om-rouge); border-color: var(--om-rouge); }
.om-frise-annee { display: block; font: 600 17px/1.3 Lora, serif; color: var(--om-rouge); }
.om-frise-texte { display: block; font: 400 14.5px/1.45 Poppins, sans-serif; color: var(--om-texte); }
@media (min-width: 960px) {
  .om-frise { grid-template-columns: repeat(6, 1fr); row-gap: 26px; border-left: 0; }
  .om-frise li { padding: 22px 14px 0 0; border-top: 2px solid var(--om-or); }
  .om-frise li::before { left: 0; top: -8px; }
}
.om-legende-frise { font: 400 13px/1.4 Poppins, sans-serif; color: var(--om-gris); margin: -30px 0 40px; }
.om-legende-frise span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--om-rouge); margin-right: 6px; vertical-align: 0; }
.om-article #tm-main .om-sources li { font: 400 15px/1.5 Poppins, sans-serif !important; margin-bottom: 6px; }
.om-portraits { align-items: end; margin: 10px 0 30px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 960px) { .om-portraits { grid-template-columns: repeat(4, 1fr); } }
.om-portraits figure { margin: 0; text-align: center; }
.om-portraits img { display: block; margin: 0 auto 8px; max-height: 190px; width: auto; }
.om-portraits figcaption { font: 400 13px/1.35 Poppins, sans-serif; color: var(--om-gris); }
/* Image isolée légendée dans le texte d’un article (sceau de la Parfaite Union…) */
.om-figure { margin: 30px auto 36px; text-align: center; }
.om-figure img { display: block; margin: 0 auto 10px; max-width: 100%; height: auto; }
.om-figure figcaption { font: 400 13px/1.4 Poppins, sans-serif; color: var(--om-gris); }
/* Variante sur le côté : le texte l’entoure à partir de la tablette ; l’intertitre suivant repasse dessous */
@media (min-width: 640px) {
  .om-figure-cote { float: right; width: 230px; margin: 6px 0 18px 32px; }
  .om-figure-cote ~ :is(h2, h3) { clear: both; }
}
/* Note sur l’auteur en fin des études signées (décision 0043) */
.om-article #tm-main .uk-panel p.om-note-auteur.om-note-auteur { margin: 40px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--om-filet); font: 400 15px/1.55 Poppins, sans-serif !important; color: var(--om-gris); text-align: left !important; }