:root { --ink:#16302a; --ink-rgb:22,48,42; --ink-soft:#46615a; --ivory:#faf8f3; --sand:#edf0e8; --gold:#a94f2e; --gold-clair:#d97b52; --gold-rgb:169,79,46; --line:#e3e6dd; --white:#fff; --radius:3px; /* Arrondi des boutons et des pastilles. Séparé de --radius pour que « arrondir un peu plus » reste UNE valeur à changer, et non soixante littéraux répartis dans vingt-six fichiers. */ --radius-btn:2px; } * { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--ivory); } body { margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--ink); line-height:1.72; -webkit-font-smoothing:antialiased; } .wrap { max-width:760px; margin:0 auto; padding:0 24px; } h1,h2,h3 { font-family:'Cormorant Garamond',Georgia,serif; line-height:1.15; margin:0; font-weight:600; } a { color:var(--gold); text-decoration:none; } a:hover { text-decoration:underline; } header { position:sticky; top:0; z-index:50; background:rgba(251,250,247,.94); border-bottom:1px solid var(--line); } header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; max-width:1100px; } .brand { display:flex; align-items:center; font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:700; color:var(--ink); white-space:nowrap; } .brand:hover { text-decoration:none; } .brand .sigma-mark { display:inline-flex; align-items:center; justify-content:center; width:1.62em; height:1.62em; border-radius:.46em; margin-right:9px; flex:none; background:rgba(var(--gold-rgb),.11); color:var(--gold); } .brand .d-mark { width:1.04em; height:1.04em; fill:currentColor; } .brand span { color:var(--gold); } .nav-links { display:flex; align-items:center; gap:16px; margin-left:auto; } .nav-links a { font-size:.88rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; } .nav-links a:hover { color:var(--ink); text-decoration:none; } .nav-links a.actif { color:var(--ink); font-weight:600; border-bottom:2px solid var(--gold); padding-bottom:2px; } .btn-nav { padding:9px 18px; border-radius:var(--radius-btn); background:var(--gold); color:#ffffff !important; font-weight:600; } .btn-nav:hover { background:#8c3f22; color:#fff !important; } @media (max-width:1020px) { .nav-links a:not(.btn-nav) { display:none; } } @media (max-width:560px) { .nav-links { margin-right:8px; } .btn-nav { padding:8px 13px; font-size:.8rem; } } /* ⚠️ 460 px, PAS 420. Entre 421 et 445 px, la marque, le bouton d'action et le sélecteur de langue ne tenaient plus sur une ligne : le sélecteur sortait de l'écran et toute la page défilait horizontalement. Mesuré au navigateur : 446 px de contenu pour 430 px de fenêtre. */ @media (max-width:460px) { .wrap { padding:0 12px; } .brand { font-size:1.05rem; } .nav-links { display:none; } .lang-globe { display:none; } .lang-toggle { padding:5px 8px; font-size:.7rem; } } @media (max-width:420px) { /* Un mot russe long ne tient pas dans 296 px : mesure faite au navigateur, « Подготовительный » rend 336 px en Cormorant 2rem. Sans ces deux règles, toute la page défile horizontalement sur un téléphone étroit. hyphens:auto coupe proprement parce que build.py pose bien . */ h1 { font-size:1.75rem; overflow-wrap:break-word; hyphens:auto; } h2 { overflow-wrap:break-word; hyphens:auto; } } /* Sélecteur de langue : même menu déroulant que le reste du site. */ .lang-switch { position:relative; display:inline-flex; } .lang-toggle { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:var(--radius-btn); background:var(--white); padding:7px 11px 7px 10px; font-family:inherit; font-size:.8rem; font-weight:600; letter-spacing:.03em; color:var(--ink); cursor:pointer; line-height:1.4; transition:border-color .25s ease, color .25s ease, background .25s ease; } .lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color:var(--gold); color:var(--gold); background:rgba(var(--gold-rgb),.06); } .lang-globe { width:14px; height:14px; color:var(--ink-soft); flex:none; transition:color .25s ease; } .lang-toggle:hover .lang-globe, .lang-toggle[aria-expanded="true"] .lang-globe { color:var(--gold); } .lang-caret { width:10px; height:10px; flex:none; color:var(--ink-soft); transition:transform .25s ease, color .25s ease; } .lang-toggle[aria-expanded="true"] .lang-caret { transform:rotate(180deg); color:var(--gold); } .lang-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:132px; display:flex; flex-direction:column; gap:2px; padding:6px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 38px -18px rgba(var(--ink-rgb),.45); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease; } .lang-switch.open .lang-menu { opacity:1; visibility:visible; transform:none; } .lang-btn { display:block; width:100%; text-align:left; background:transparent; border:none; padding:9px 12px; border-radius:var(--radius-btn); font-family:inherit; font-size:.84rem; font-weight:600; color:var(--ink-soft); cursor:pointer; line-height:1.4; white-space:nowrap; transition:color .2s ease, background .2s ease; } .lang-btn:hover:not(.active) { color:var(--gold); background:rgba(var(--gold-rgb),.10); } .lang-menu a[href].lang-btn:hover { text-decoration:none; } .lang-btn.active { background:var(--ink); color:var(--ivory); } /* ---------- Fil d'Ariane ---------- Doublé en données structurées par build.py : les deux décrivent le même chemin, sinon Google affiche autre chose que ce que le visiteur lit. */ .fil { font-size:.82rem; color:var(--ink-soft); margin:0 0 18px; } .fil a { color:var(--ink-soft); } .fil a:hover { color:var(--gold); } .fil .sep { margin:0 7px; color:var(--line); } .fil [aria-current="page"] { color:var(--ink); } main { padding:44px 0 20px; } .eyebrow { font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 10px; } h1 { font-size:clamp(2rem,4.4vw,2.9rem); margin-bottom:16px; } .chapeau { font-size:1.12rem; color:var(--ink-soft); margin:0 0 34px; } p { margin:0 0 16px; } /* ---------- Cartes de guides ---------- Toute la carte est cliquable : sur téléphone, viser un lien de trois mots dans un pavé de texte est le premier motif d'échec au doigt. */ .guides { display:grid; gap:16px; margin:0 0 40px; } .guide-carte { display:block; position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px 20px; color:inherit; overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .guide-carte:hover { text-decoration:none; border-color:var(--gold); box-shadow:0 18px 38px -24px rgba(var(--ink-rgb),.45); transform:translateY(-2px); } .guide-carte::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); opacity:0; transition:opacity .25s ease; } .guide-carte:hover::before { opacity:1; } .guide-niveau { display:inline-flex; align-items:center; gap:9px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold); margin:0 0 8px; } .guide-niveau::before { content:""; width:16px; height:1px; background:var(--gold); } .guide-carte h2 { font-size:1.32rem; margin:0 0 8px; } .guide-carte p { font-size:.94rem; color:var(--ink-soft); margin:0 0 14px; line-height:1.6; } .guide-lire { font-size:.86rem; font-weight:600; color:var(--gold); } .guide-carte:hover .guide-lire { color:#8c3f22; } /* Prochain guide : bordure discontinue = promesse, pas lien mort. */ .guide-carte.a-venir { background:var(--sand); border-style:dashed; cursor:default; } .guide-carte.a-venir:hover { transform:none; box-shadow:none; border-color:var(--line); } .guide-carte.a-venir::before { display:none; } .guide-carte.a-venir h2 { color:var(--ink-soft); } /* ⚠️ NE PAS eclaircir --gold sur tout le bloc : le bouton peint son FOND avec, et son texte est blanc — il tomberait a 3,04:1 (mesure). Seuls les liens en ligne du texte ont besoin de la teinte claire : la terre cuite normale ne donne que 2,58:1 sur ce fond sombre. */ .cta a:not(.btn) { color: var(--gold-clair); } .cta { background:var(--ink); color:var(--ivory); border-radius:var(--radius); padding:34px 30px; text-align:center; margin:10px 0; } .cta h2 { color:var(--ivory); margin:0 0 10px; font-size:1.6rem; } .cta p { color:#c6d6cf; max-width:52ch; margin:0 auto 20px; } .btn { display:inline-block; padding:13px 26px; border-radius:var(--radius-btn); font-weight:600; font-size:.95rem; background:var(--gold); color:#ffffff; border:1.5px solid var(--gold); } .btn:hover { background:#8c3f22; border-color:#8c3f22; color:#fff; text-decoration:none; } footer { border-top:1px solid var(--line); padding:26px 0; margin-top:34px; font-size:.88rem; color:var(--ink-soft); } footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; max-width:1100px; } footer a { color:var(--ink-soft); } footer a:hover { color:var(--gold); } /* Lien Trustpilot : un simple lien stylé, PAS le widget (payant) */ .tp-link { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .tp-link svg { width:14px; height:14px; flex:none; } a:focus-visible, .btn:focus-visible, button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; } @media (max-width:520px) { .wrap { padding:0 16px; } .brand { font-size:1.18rem; } .lang-toggle { padding:6px 9px 6px 8px; font-size:.74rem; } } /* Apparition douce — uniquement si le visiteur ne demande pas moins d'animation */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .reveal.in { opacity:1; transform:none; } } .d-pied { width:.95em; height:.95em; fill:var(--gold); vertical-align:-.15em; margin-right:2px; }