|
|
| (4 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| /*************************************************************** | | /* =============================================================== |
| ⚜️ THEME OFFICIEL — ALFI ROYAL CSS ⚜️ | | ⚜️ STYLE GLOBAL ROYAL ALFI — Version 2026 |
| Association des Lignages de France et de l’International
| | =============================================================== */ |
| Style graphique : Monarchie spirituelle – Élégance française
| |
| Version : 1.4 (mars 2026, justification + harmonisation visuelle) | |
| ****************************************************************/
| |
|
| |
|
| /* ======================= BASE GÉNÉRALE ======================= */
| | #alfi-index { |
| body {
| | position: sticky; |
| font-family: "Crimson Pro", serif;
| | top: 0; |
| font-size: 17px;
| | z-index: 100; |
| line-height: 1.6;
| |
| color: #2a1b0a; /* Brun noble */
| |
| background-color: #fffdf8; /* Blanc parchemin */
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| /* ======================= JUSTIFICATION TYPOGRAPHIQUE ======================= */
| |
| .mw-parser-output p,
| |
| .mw-parser-output li,
| |
| .mw-parser-output .thumbcaption,
| |
| .mw-parser-output .gallerytext,
| |
| .mw-parser-output td {
| |
| text-align: justify;
| |
| text-justify: inter-word;
| |
| hyphens: auto;
| |
| -webkit-hyphens: auto;
| |
| -ms-hyphens: auto;
| |
| }
| |
| | |
| /* Exceptions pour les éléments courts ou centrés */
| |
| .mw-parser-output blockquote,
| |
| .mw-parser-output .ordo,
| |
| .mw-parser-output .signature-alfi,
| |
| .mw-parser-output .toc,
| |
| #toc h2 {
| |
| text-align: left; | |
| hyphens: manual; | |
| }
| |
| | |
| /* Sur petit écran, éviter la justification rigide */
| |
| @media (max-width: 480px) {
| |
| .mw-parser-output p,
| |
| .mw-parser-output li,
| |
| .mw-parser-output .thumbcaption {
| |
| text-align: left;
| |
| }
| |
| }
| |
| | |
| /* Classes utilitaires */
| |
| .justify { text-align: justify !important; hyphens: auto; }
| |
| .no-justify { text-align: left !important; }
| |
| | |
| /* ======================= TITRES PRINCIPAUX ======================= */
| |
| h1, h2, h3, h4, h5 {
| |
| font-family: "EB Garamond", serif;
| |
| color: #2a1b0a;
| |
| text-transform: none;
| |
| line-height: 1.3;
| |
| word-wrap: break-word;
| |
| }
| |
| | |
| /* ⚜️ Titre royal — équilibré + filet doré */
| |
| h1 {
| |
| font-size: 1.55em;
| |
| font-weight: 700; | |
| text-align: center; | | text-align: center; |
| margin: 0.8em auto 0.4em; | | background: #fffdf8e8; |
| padding-bottom: 0.4em; | | backdrop-filter: blur(6px); |
| position: relative; | | border-bottom: 2px solid #d4af37; |
| max-width: 90%; | | box-shadow: 0 3px 12px rgba(212,175,55,0.25); |
| | padding: 25px 15px; |
| | margin-bottom: 35px; |
| | font-family: 'EB Garamond','Garamond',serif; |
| } | | } |
|
| |
|
| /* Filet doré lumineux sous le titre */
| | .lettre-alfi { |
| h1::after {
| | background: linear-gradient(180deg,#f8f2d0,#f6e27f); |
| content: "";
| | border: 1px solid #d4af37; |
| display: block;
| | border-radius: 6px; |
| width: 100px;
| | padding: 7px 12px; |
| height: 2px;
| | font-size: 17px; |
| background: linear-gradient(to right, #d4af37, #f6e27f, #d4af37); | | font-weight: bold; |
| margin: 10px auto 0 auto;
| | color: #3a260b; |
| border-radius: 2px;
| | box-shadow: 0 0 5px rgba(212,175,55,0.25); |
| box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
| | transition: all 0.3s ease; |
| }
| | text-decoration: none; |
| | | display: inline-block; |
| /* Sous-titres harmonieux */
| |
| h2 {
| |
| font-size: 1.35em;
| |
| font-weight: 600;
| |
| border-left: 4px solid #d4af37; | |
| padding-left: 8px; | |
| margin-top: 1.2em; | |
| }
| |
| | |
| h3 {
| |
| font-size: 1.18em; | |
| font-weight: 600; | |
| color: #3b2a0b; | |
| margin-top: 1em;
| |
| }
| |
| | |
| /* ✅ Responsive */
| |
| @media (max-width: 600px) {
| |
| h1 { font-size: 1.3em; line-height: 1.2; }
| |
| h2 { font-size: 1.1em; }
| |
| h3 { font-size: 1em; }
| |
| }
| |
| | |
| /* ======================= 🎇 TITRES ALFI SECONDAIRES — Doré lumineux ======================= */
| |
| .titre-alfi {
| |
| font-family: "EB Garamond", serif;
| |
| font-size: 1.25em;
| |
| font-weight: 600;
| |
| color: #2a1b0a;
| |
| text-transform: none;
| |
| letter-spacing: 0.02em;
| |
| margin-top: 1.2em;
| |
| margin-bottom: 0.5em;
| |
| position: relative;
| |
| padding-left: 16px;
| |
| border-left: 3px solid transparent;
| |
| }
| |
| | |
| /* Filet doré lumineux à gauche */
| |
| .titre-alfi::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 0;
| |
| top: 0.2em;
| |
| bottom: 0.1em;
| |
| width: 4px;
| |
| background: linear-gradient(to bottom, #f6e27f, #d4af37, #f6e27f);
| |
| border-radius: 2px;
| |
| box-shadow: 0 0 6px rgba(212, 175, 55, 0.4); | |
| }
| |
| | |
| /* Première lettre dorée */
| |
| .titre-alfi::first-letter {
| |
| color: #d4af37; | |
| font-size: 1.35em; | |
| font-weight: 700; | |
| } | | } |
| | | .lettre-alfi:hover { |
| /* Effet lumineux au survol */
| | background: linear-gradient(180deg,#fff8cc,#f9e27a); |
| .titre-alfi:hover { | | color: #a40000; |
| text-shadow: 0 0 6px rgba(246, 226, 127, 0.6); | | box-shadow: 0 0 12px rgba(212,175,55,0.6), 0 0 4px #fff8cc inset; |
| transition: text-shadow 0.3s ease; | | transform: translateY(-1px); |
| } | | } |
|
| |
|
| /* ======================= CITATIONS & ÉPIGRAPHES ======================= */
| | .bouton-footer { |
| blockquote {
| | display: inline-block; |
| font-family: "Cormorant Garamond", serif; | | margin: 0 10px; |
| font-size: 1.05em; | | padding: 8px 14px; |
| font-style: italic; | | color: #3a260b; |
| color: #4b3621; | | font-weight: bold; |
| background-color: #fefaf3; | | text-decoration: none; |
| border-left: 4px solid #d4af37; | |
| margin: 1em 2em;
| |
| padding: 0.8em 1.2em;
| |
| }
| |
| | |
| /* ======================= TABLE DES SOMMAIRES ======================= */
| |
| #toc, .toc {
| |
| background: #f9f6ef;
| |
| border: 1px solid #d4af37; | | border: 1px solid #d4af37; |
| border-radius: 8px; | | border-radius: 8px; |
| font-family: "EB Garamond", serif; | | background: linear-gradient(180deg,#f9eeb8,#f6e27f); |
| padding: 10px 15px; | | transition: all 0.3s ease; |
| margin: 1em auto; | | box-shadow: 0 0 6px rgba(212,175,55,0.25); |
| width: 80%;
| |
| } | | } |
| | | .bouton-footer:hover { |
| #toc h2 {
| | background: linear-gradient(180deg,#fff7c6,#fbe88f); |
| text-align: center; | | color: #a40000; |
| color: #2a1b0a; | | box-shadow: 0 0 12px rgba(212,175,55,0.6); |
| border: none; | | transform: translateY(-1px); |
| font-weight: 700; | |
| font-size: 1.15em;
| |
| } | | } |
|
| |
|
| /* ======================= LIENS ======================= */
| | #alfi-footer { |
| a, a:visited { color: #7a4e00; text-decoration: none; }
| | position: fixed; |
| a:hover { color: #d4af37; text-decoration: underline; }
| | bottom: 0; |
| | | left: 0; |
| /* ======================= TABLEAUX ======================= */
| | width: 100%; |
| table { border-collapse: collapse; background-color: #fffefb; }
| | background: rgba(255,253,248,0.85); |
| | | backdrop-filter: blur(5px); |
| th {
| | border-top: 2px solid #d4af37; |
| background-color: #f6ecd4; | | box-shadow: 0 -2px 8px rgba(212,175,55,0.25); |
| color: #2a1b0a; | |
| font-family: "EB Garamond", serif; | |
| font-weight: 600; | |
| border-bottom: 2px solid #d4af37; | |
| }
| |
| | |
| td, th {
| |
| border: 1px solid #e2c885; | |
| padding: 6px 10px;
| |
| }
| |
| | |
| /* ======================= CITATION ROYALE (“ordo”) ======================= */
| |
| .ordo {
| |
| font-family: "Cinzel", serif;
| |
| text-align: center; | | text-align: center; |
| color: #3b2a0b; | | padding: 10px 0; |
| background: #fdf8ee;
| | font-family: 'EB Garamond',serif; |
| border: 2px solid #d4af37;
| | z-index: 99; |
| border-radius: 10px;
| |
| padding: 15px;
| |
| margin: 1.5em auto;
| |
| width: 80%;
| |
| font-size: 1.1em;
| |
| }
| |
| | |
| /* ======================= HEADER / BANNIÈRE ======================= */
| |
| #mw-head, .mw-header {
| |
| background-color: #f8f5e8;
| |
| border-bottom: 3px solid #d4af37;
| |
| }
| |
| | |
| #p-logo a {
| |
| background-image: url("https://wiki.alfinternational.eu/images/logo_alfi_gold.png");
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| }
| |
| | |
| /* ======================= MENUS & INTERFACE ======================= */
| |
| .vector-menu-content,
| |
| #p-navigation,
| |
| #p-personal {
| |
| font-family: "Lato", sans-serif; | |
| font-size: 14px; | |
| } | | } |
|
| |
|
| .vector-menu-content a { color: #3b2a0b; }
| | @media (max-width:600px) { |
| .vector-menu-content a:hover { color: #d4af37; }
| | #recherche-alfi { width:90%; font-size:16px; } |
| | | .lettre-alfi { font-size:18px; padding:9px 13px; } |
| /* ======================= SIGNATURE FINALE ======================= */
| |
| .signature-alfi {
| |
| text-align: center;
| |
| font-family: "Cinzel", serif;
| |
| font-size: 1em; | |
| margin-top: 2em;
| |
| color: #2a1b0a;
| |
| } | | } |
|
| |
| .signature-alfi::before { content: "⚜️ "; color: #d4af37; }
| |
| .signature-alfi::after { content: " ⚜️"; color: #d4af37; }
| |
/* ===============================================================
⚜️ STYLE GLOBAL ROYAL ALFI — Version 2026
=============================================================== */
#alfi-index {
position: sticky;
top: 0;
z-index: 100;
text-align: center;
background: #fffdf8e8;
backdrop-filter: blur(6px);
border-bottom: 2px solid #d4af37;
box-shadow: 0 3px 12px rgba(212,175,55,0.25);
padding: 25px 15px;
margin-bottom: 35px;
font-family: 'EB Garamond','Garamond',serif;
}
.lettre-alfi {
background: linear-gradient(180deg,#f8f2d0,#f6e27f);
border: 1px solid #d4af37;
border-radius: 6px;
padding: 7px 12px;
font-size: 17px;
font-weight: bold;
color: #3a260b;
box-shadow: 0 0 5px rgba(212,175,55,0.25);
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.lettre-alfi:hover {
background: linear-gradient(180deg,#fff8cc,#f9e27a);
color: #a40000;
box-shadow: 0 0 12px rgba(212,175,55,0.6), 0 0 4px #fff8cc inset;
transform: translateY(-1px);
}
.bouton-footer {
display: inline-block;
margin: 0 10px;
padding: 8px 14px;
color: #3a260b;
font-weight: bold;
text-decoration: none;
border: 1px solid #d4af37;
border-radius: 8px;
background: linear-gradient(180deg,#f9eeb8,#f6e27f);
transition: all 0.3s ease;
box-shadow: 0 0 6px rgba(212,175,55,0.25);
}
.bouton-footer:hover {
background: linear-gradient(180deg,#fff7c6,#fbe88f);
color: #a40000;
box-shadow: 0 0 12px rgba(212,175,55,0.6);
transform: translateY(-1px);
}
#alfi-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255,253,248,0.85);
backdrop-filter: blur(5px);
border-top: 2px solid #d4af37;
box-shadow: 0 -2px 8px rgba(212,175,55,0.25);
text-align: center;
padding: 10px 0;
font-family: 'EB Garamond',serif;
z-index: 99;
}
@media (max-width:600px) {
#recherche-alfi { width:90%; font-size:16px; }
.lettre-alfi { font-size:18px; padding:9px 13px; }
}