: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); } /* Pas de margin-right ici : l'écart avant le sélecteur de langue vient du `gap` de l'en-tête (16 px), exactement comme sur la page d'accueil. */ .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; } /* Repère « vous êtes ici » : sans lui, on ne sait plus sur quelle page on est */ .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; } /* Sous 1020 px les libellés ne tiennent plus (le russe est le plus long) : on garde uniquement le bouton d'action et le sélecteur de langue. */ @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; } } /* Très petits écrans : logo + langues seulement, sinon l'en-tête déborde et toute la page se met à défiler horizontalement. */ /* ⚠️ 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 la page d'accueil (un bouton = la langue courante, les trois choix au clic). */ .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); } 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; } h2 { font-size:clamp(1.5rem,3vw,1.9rem); margin:38px 0 12px; } h3 { font-size:1.2rem; margin:24px 0 6px; } p { margin:0 0 16px; } ul { margin:0 0 16px; padding-left:0; list-style:none; } li { position:relative; padding:7px 0 7px 22px; color:var(--ink-soft); } li::before { content:"—"; position:absolute; left:0; color:var(--gold); } strong { color:var(--ink); } /* Photo d'illustration : width/height en dur pour que le navigateur reserve la place avant le chargement (pas de saut de mise en page). */ figure { margin:30px 0; } figure img { width:100%; height:auto; display:block; border-radius:var(--radius); border:1px solid var(--line); } figcaption { margin-top:10px; font-size:.86rem; color:var(--ink-soft); text-align:center; } .resume { background:var(--sand); border-radius:var(--radius); padding:22px 26px; margin:0 0 32px; } .resume-titre { font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 8px; } .resume ul { margin:0; } .resume li { padding:6px 0 6px 22px; } /* ---------- Encadrés ---------- Trois variantes seulement. Au-delà, la couleur ne veut plus rien dire et le lecteur cesse de la lire comme une information. */ .encadre { background:var(--sand); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; padding:20px 24px; margin:26px 0; } .encadre p:last-child { margin-bottom:0; } .encadre-titre { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold); margin:0 0 8px; } /* Vécu / anecdote : c'est la variante par défaut (bord doré, fond sable). */ .encadre.cle { background:#eef3ee; border-left-color:#4a7a5c; } .encadre.cle .encadre-titre { color:#3d6b4e; } .encadre.retenir { background:var(--white); border:1px solid var(--line); border-left:3px solid var(--ink); } .encadre.retenir .encadre-titre { color:var(--ink); } /* ---------- Carte de formule ---------- Le tableau symbole / signification / unité est ce qui distingue une formule utile d'une formule décorative — c'est presque toujours la variable non définie qui bloque l'élève. */ .formule { background:var(--white); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px; margin:26px 0; box-shadow:0 10px 26px -22px rgba(var(--ink-rgb),.5); } .formule-nom { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold); margin:0 0 4px; } .formule-corps { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.5rem; text-align:center; color:var(--ink); margin:14px 0 6px; line-height:1.4; } .formule-vars { width:100%; border-collapse:collapse; margin-top:12px; font-size:.86rem; } .formule-vars td { padding:7px 8px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; } .formule-vars tr:last-child td { border-bottom:none; } .formule-vars .sym { width:7rem; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.05rem; color:var(--ink); } .formule-vars .unite { width:5rem; text-align:right; color:var(--gold); white-space:nowrap; } @media (max-width:520px) { .formule-vars .sym { width:4.5rem; } .formule-vars .unite { width:3.5rem; } } /* ---------- 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); } /* ---------- Suite de lecture ---------- */ .suite { border-top:1px solid var(--line); margin-top:42px; padding-top:22px; } .suite-lien { display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); color:inherit; transition:border-color .25s ease, transform .25s ease; } .suite-lien:hover { text-decoration:none; border-color:var(--gold); transform:translateY(-2px); } .suite-fleche { font-size:1.2rem; color:var(--gold); flex:none; } .suite-label { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; } .suite-titre { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.12rem; font-weight:600; color:var(--ink); } /* 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; } } /* ⚠️ 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:44px 0 10px; } .cta h2 { color:var(--ivory); margin:0 0 10px; } .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 { 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; } } .d-pied { width:.95em; height:.95em; fill:var(--gold); vertical-align:-.15em; margin-right:2px; }