/* ---------- Palette « Salon littéraire » : ivoire chaud, encre vert profond, terre cuite. Volontairement différente du marine + or de Cours Sigma : les deux sites doivent se distinguer d'un coup d'œil. ---------- */ :root { --ink: #16302a; --ink-rgb: 22, 48, 42; /* même couleur que --ink, pour les rgba() translucides */ --ink-soft: #46615a; --ivory: #faf8f3; --sand: #edf0e8; /* bande alternée : ivoire un peu plus vert/soutenu */ --gold: #a94f2e; /* terre cuite ; nom conservé, il est cité partout */ --gold-rgb: 169, 79, 46; /* même couleur que --gold, pour les rgba() translucides */ --line: #e3e6dd; --white: #ffffff; --gold-clair: #d97b52; /* terre cuite eclaircie : lisible sur le vert profond, et couleur des filets et lisereas sur fond clair */ /* Couleur des grands chiffres (01/02/03). Calculée, pas choisie : l'or clair plafonne à 2,69:1 même opaque, très en dessous des 3:1 exigés pour un grand caractère. Celle-ci donne 3,02:1 sur le sable et 3,20:1 sur l'ivoire — les deux fonds où les chiffres apparaissent. */ --chiffre: #ba775c; --radius: 3px; /* Filet de separation : depuis la refonte, c'est LUI qui structure la page — a la place des cartes blanches arrondies a ombre douce, qui sont le tic visuel des pages engendrees a la chaine. */ --filet: #dcdfd3; --maxw: 1100px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--ivory); } body { margin: 0; font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: transparent; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0; } a { color: inherit; text-decoration: none; } a[href]:not(.btn):hover { text-decoration: underline; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .accent { color: var(--gold); } .eyebrow { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; } /* ---------- Boutons ---------- */ .btn { display: inline-block; padding: 14px 28px; border-radius: 2px; font-weight: 600; font-size: .9rem; letter-spacing: .02em; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; border: 1.5px solid var(--ink); } .btn-primary { background: var(--gold); color: #ffffff; border-color: var(--gold); } .btn-primary:hover { background: #8c3f22; border-color: #8c3f22; color: #fff; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } /* ---------- En-tête ---------- */ header { position: sticky; top: 0; z-index: 50; background: rgba(250,248,243,.94); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; } .brand { display: flex; align-items: center; font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; cursor: pointer; user-select: none; } .brand span { color: var(--gold); } /* ---- Σ interactif : logo doré qui s'anime au survol de la marque ---- */ /* La marque est un D calligraphié FIGÉ EN TRACÉ SVG, et non une lettre écrite dans une police d'écriture manuscrite : une telle police n'existe ni sur un Mac ni sur un téléphone, et le navigateur y aurait remplacé le D calligraphié par un D ordinaire. Un tracé, lui, ne se substitue pas. */ .brand .sigma-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.62em; height: 1.62em; border-radius: .46em; margin-right: 9px; background: rgba(var(--gold-rgb),.11); color: var(--gold); transition: transform .4s cubic-bezier(.2,.85,.3,1.5), background .4s ease, box-shadow .4s ease; } .brand .sigma-mark .d-mark { width: 1.04em; height: 1.04em; fill: currentColor; } .brand:hover .sigma-mark { transform: rotate(-7deg) scale(1.12); background: rgba(var(--gold-rgb),.19); box-shadow: 0 3px 16px rgba(var(--gold-rgb),.32); } .nav-links { display: flex; gap: 16px; align-items: center; } .nav-links a { font-size: .88rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .nav-links a:hover { color: var(--ink); } .nav-links .btn { padding: 10px 20px; } /* `.nav-links a` l'emporte sur `.btn-primary` (specificite) : sans cette ligne, le bouton de l'en-tete garde la couleur d'un lien et devient illisible sur le fond terre cuite. */ .nav-links a.btn-primary { color: #fff; } /* ---------- Sélecteur de langue (menu déroulant) ---------- Un seul bouton affiche la langue courante ; les trois choix n'apparaissent qu'au clic. Remplace les trois pastilles côte à côte : l'en-tête y gagne ~90 px, ce qui compte surtout sur téléphone. */ .lang-switch { position: relative; display: inline-flex; } .lang-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 2px; background: var(--white); box-shadow: inset 0 1px 2px rgba(var(--ink-rgb),.04); 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); } /* Le menu reste dans le DOM (les liens / , /en/ , /ru/ posés par build.py doivent rester lisibles par les robots) mais invisible et non cliquable tant qu'il n'est pas ouvert — visibility, pas seulement opacity. */ .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: 3px; 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: 2px; 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-btn.active { background: var(--ink); color: var(--ivory); } /* Après génération (build.py), les entrées du menu sont de vrais liens. */ .lang-menu a[href].lang-btn:hover { text-decoration: none; } /* ---------- Hero ---------- */ .hero { padding: 56px 0 28px; } .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; } /* Sur mobile la carte disparaît : le hero passe en pleine largeur et tout se centre */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .hero-card { display: none; } .hero-copy { text-align: center; } .hero p.lead { margin-left: auto; margin-right: auto; } .hero .cta-row { justify-content: center; } .foot { justify-content: center; text-align: center; } .foot-links { justify-content: center; } } .hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); } .hero p.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 560px; margin: 22px 0 34px; } .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .hero-note { margin-top: 22px; font-size: .9rem; color: var(--ink-soft); } /* Carte visuelle du hero */ .hero-card { position: relative; background: var(--ink); color: var(--ivory); border-radius: 3px; padding: 36px 34px; overflow: hidden; border-top: 3px solid var(--gold-clair); } .hero-card .eyebrow { color: var(--gold); position: relative; } .hero-card ul { list-style: none; margin: 18px 0 0; padding: 0; position: relative; } .hero-card li { position: relative; padding: 11px 0 11px 30px; color: #cfded7; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .98rem; transition: color .2s, padding-left .2s; cursor: default; } .hero-card li:last-child { border-bottom: none; } /* Un filet, pas une coche. La coche en tete de ligne est, avec les icones au trait, le marqueur le plus reconnaissable des pages de vente fabriquees en serie : on la remplace par un tiret typographique. */ .hero-card li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 15px; height: 2px; background: var(--gold-clair); transition: width .2s ease, background .2s ease; } .hero-card li:hover { color: #fff; padding-left: 36px; } .hero-card li:hover::before { width: 24px; background: var(--ivory); } .hero-card-glyph { position: absolute; right: -6px; top: -46px; line-height: 1; pointer-events: none; } .hero-card-glyph .d-mark { width: 190px; height: 190px; fill: rgba(var(--gold-rgb),.13); } .hero-card-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: #9db3aa; position: relative; letter-spacing: .02em; } /* Une seule règle pour les étoiles (hero et futurs témoignages) */ .stars { color: var(--gold); letter-spacing: 2px; } /* ---------- Sections ---------- */ /* 34 px de chaque côté = 68 px entre deux sections. Volontairement serré : depuis que les fonds alternent, c'est le changement de couleur qui sépare les chapitres, pas le vide. (À 46 px, il y avait jusqu'à 107 px de blanc entre deux sections.) */ section { padding: 34px 0; scroll-margin-top: 84px; } /* Bandes de fond alternées : chaque chapitre de la page a sa teinte, ce qui marque nettement les transitions au défilement (surtout sur mobile). */ #cours, #avis, #methode, #tarifs, #reserver { background: var(--sand); } #comment, #examens, #ressources, #faq, #contact { background: var(--ivory); } /* Respiration sombre au milieu de la page : le Parcours devient une bande vert profond pleine largeur */ #parcours { background: var(--ink); padding: 46px 0; } /* ⚠️ LISIBILITÉ SUR LES DEUX BANDES SOMBRES. La terre cuite de la palette (#a94f2e) ne donne que 2,58:1 sur le vert profond — sous le seuil de lisibilité, y compris pour un grand titre. On l'éclaircit UNIQUEMENT là, en redéfinissant la variable sur les deux conteneurs concernés : tout ce qui l'utilise à l'intérieur suit d'un coup, y compris les couleurs écrites en dur dans le texte traduit. #d97b52 sur #16302a = 4,63:1, au-dessus du seuil pour tout texte. */ .hero-card, #parcours { --gold: var(--gold-clair); --gold-rgb: 217, 123, 82; } /* Liseré doré très discret entre deux bandes. `section[id]` plutôt que la liste des 11 identifiants : une nouvelle section est couverte d'office. Le hero n'a pas d'id, il reste intact. */ section[id] { border-top: 1px solid rgba(var(--gold-rgb),.16); } #cours { border-top: none; } /* ---------- Longs paragraphes : ligne courte, alignés à gauche ---------- Depuis la refonte, toute la page est calée à gauche ; il ne reste ici qu'à borner la longueur de ligne (~62 signes = confort de lecture) et à aérer l'interligne des deux seuls blocs de texte suivi. */ .parcours p, .orient > div:not(.price-card) p { max-width: 62ch; line-height: 1.72; } /* ---------- Titre de chapitre ---------- Sept sections partageaient le meme bloc CENTRE : sur-titre en capitales, titre a empattements, phrase grise. Repete de haut en bas, ce gabarit est la signature la plus visible d'une page engendree automatiquement. On passe a une manchette de journal : tout est cale a gauche, le chapo part a droite sur la meme ligne de base, et un filet ferme l'ensemble. */ .section-head { max-width: none; margin: 0 0 30px; text-align: left; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: end; column-gap: 44px; row-gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--filet); } .section-head .eyebrow { grid-column: 1 / -1; } .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 2px 0 0; letter-spacing: -.01em; } .section-head p { color: var(--ink-soft); font-size: 1rem; margin: 0 0 7px; max-width: 46ch; } /* Un chapitre sans chapô (la FAQ) : le titre prend toute la largeur au lieu de se serrer sur la moitié gauche devant une colonne vide. */ .section-head h2:last-child { grid-column: 1 / -1; } @media (max-width: 780px) { .section-head { grid-template-columns: 1fr; row-gap: 10px; } .section-head p { margin-bottom: 0; } } /* ---------- Grilles à 3 colonnes ---------- UNE seule déclaration et UN seul point de rupture pour les 4 grilles. Avant, .res-grid et .tarifs-grid se redéclaraient plus bas à l'identique (avec un gap différent). Depuis la refonte, .tarifs-grid a disparu : les tarifs sont une liste à points de conduite (.prix). */ .res-grid, .avis-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .res-grid, .avis-grid, .orient { grid-template-columns: 1fr; } } /* ---------- Cartes ---------- Seules les ressources gardent l'ancien gabarit. Trois chapitres partageaient la meme grille de trois cartes blanches arrondies : c'est cette repetition qui donnait a la page une allure de patron. Chaque chapitre a desormais SA mise en page — voir .niveaux, .steps, .principes et .prix ci-dessous. */ .res { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); /* Propriétés nommées, pas `transition: .2s` (= anime tout). Seule la bordure change au survol depuis la refonte. */ transition: border-color .2s ease; } .res:hover { border-color: var(--gold); } /* ---------- Les niveaux (chapitre « Les cours ») ---------- Des rangees de registre plutot que des cartes : le niveau tient la colonne de gauche, le contenu se lit d'une traite a droite. Aucune boite, aucune ombre — des filets, comme un programme imprime. */ .niveaux { border-top: 1px solid var(--filet); } .niv { display: grid; grid-template-columns: 215px minmax(0,1fr); column-gap: 40px; padding: 20px 4px; border-bottom: 1px solid var(--filet); transition: background .25s ease; } .niv:hover { background: rgba(var(--gold-rgb),.05); } .niv-cl { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; font-weight: 600; line-height: 1.15; color: var(--ink); } .niv-rg { display: block; margin-top: 3px; font-size: .73rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .niv-b h3 { font-size: 1.1rem; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; margin: 0 0 6px; } .niv-b p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.62; } @media (max-width: 700px) { .niv { grid-template-columns: 1fr; row-gap: 10px; } } /* ---------- Les principes (chapitre « Methode ») ---------- Encore une autre mise en page : gros chiffre a gauche, texte long a droite. Deux chapitres voisins ne doivent jamais se ressembler. */ .principe { display: grid; grid-template-columns: 84px minmax(0,1fr); column-gap: 26px; align-items: baseline; padding: 22px 4px; border-top: 1px solid var(--filet); } .principe:last-child { border-bottom: 1px solid var(--filet); } .principe .pn { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 3.1rem; font-weight: 700; line-height: .9; color: var(--chiffre); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .principe h3 { font-size: 1.4rem; margin: 0 0 6px; } .principe p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; max-width: 68ch; } @media (max-width: 700px) { .principe { grid-template-columns: 1fr; row-gap: 6px; } .principe .pn { font-size: 2.2rem; } } /* ---------- Les tarifs ---------- Une liste a points de conduite, comme une carte de restaurant : le prix tombe en bout de ligne. Rien ne ressemble a une grille de formules d'abonnement, et la colonne « en avant » disparait — mettre un tarif en avant est un reflexe de page de vente, pas de professeur. */ .prix .pl { display: flex; align-items: baseline; gap: 10px; padding: 15px 4px; border-top: 1px solid var(--filet); } .prix .pl:last-child { border-bottom: 1px solid var(--filet); } /* ⚠️ `flex: none` faisait déborder la page en russe entre 621 et 720 px : les libellés y sont plus longs et poussaient le prix hors de l'écran. `min-width: 0` autorise le libellé à revenir à la ligne dans sa colonne. */ .prix .pq { flex: 0 1 auto; min-width: 0; } .prix .pq b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 600; letter-spacing: .01em; } .prix .pq i { font-style: normal; color: var(--ink-soft); font-size: .9rem; margin-left: 12px; } /* Les points de conduite mangent l'espace restant. Gris propre, plus marqué que --filet : un pointillé disparaît là où un trait plein se voit encore. */ .prix .pd { flex: 1 1 auto; border-bottom: 1px dotted #c8ccbd; transform: translateY(-5px); min-width: 20px; } .prix .pv { flex: none; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.75rem; font-weight: 700; color: var(--ink); white-space: nowrap; line-height: 1; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .prix .pv small { font-family: 'Inter', system-ui, sans-serif; font-size: .8rem; font-weight: 500; color: var(--ink-soft); } @media (max-width: 780px) { .prix .pl { flex-wrap: wrap; } .prix .pd { display: none; } .prix .pq { flex: 1 1 100%; } } /* ---------- Parcours ---------- */ /* Le bloc n'a plus besoin de son propre fond : la section entière est marine */ /* Le chapitre biographique passe en deux colonnes decalees : le titre tient la gauche, le recit la droite. C'est le seul endroit de la page ou le texte occupe une colonne etroite — la variation est voulue. */ .parcours { color: var(--ivory); text-align: left; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); column-gap: 56px; align-items: start; } @media (max-width: 860px) { .parcours { grid-template-columns: 1fr; row-gap: 6px; } } .parcours h2 { color: var(--ivory); font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 10px 0 0; } .parcours p { color: #c6d6cf; font-size: 1.03rem; } /* Signature : la seule mention nominative de la page. Un site tenu par quelqu'un se signe ; un gabarit, non. */ .signature { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; color: var(--gold-clair); line-height: 1.2; } .signature small { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: #8ea59c; margin-top: 8px; font-weight: 600; } /* Les trois reperes chiffres ne sont plus une bande de gros nombres centres (autre tic de gabarit) mais une ligne de notes separees par des filets. */ .stats { display: flex; gap: 0; margin-top: 30px; flex-wrap: wrap; row-gap: 16px; } .stat { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.16); } .stat:first-child { padding-left: 0; border-left: none; } .stat .n { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; color: var(--gold-clair); font-weight: 700; line-height: 1.2; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .stat .l { font-size: .8rem; color: #9db3aa; } /* ---------- Orientation ---------- */ .orient { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold-clair); border-radius: 3px; padding: 34px; text-align: left; } @media (max-width: 860px) { .orient { grid-template-columns: 1fr; } } .orient h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 14px; } .orient p { color: var(--ink-soft); } .price-card { text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; background: var(--ivory); } .price-card .price { font-family: 'Cormorant Garamond', serif; font-size: 2.9rem; font-weight: 700; color: var(--ink); line-height: 1.05; margin: 6px 0 0; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } /* Durée : sortie du prix pour ne plus hériter de la police à empattements. Petites capitales espacées = discret, et ça équilibre le gros chiffre. */ .price-card .price-meta { margin: 8px 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .price-card .btn { margin-top: 20px; width: 100%; padding: 12px 20px; font-size: .9rem; } .price-card .pc-note { margin: 12px 0 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.5; } /* ---------- Réservation ---------- Le calendrier n'est plus chargé automatiquement : c'est une ressource externe lourde (embed 90 Ko + page 1,1 Mo) qui n'aboutit pas sur les connexions lentes ou instables, et s'affichait alors à moitié. On propose donc DEUX chemins explicites, et le calendrier ne part qu'AU CLIC. */ .booking { text-align: center; } .book-choices { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 0 auto; } .book-choice { flex: 1 1 300px; background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 24px 22px; text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .book-choice:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 26px rgba(var(--ink-rgb), .09); } .book-choice h3 { margin: 0 0 8px; font-size: 1.06rem; } .book-choice p { margin: 0 0 16px; font-size: .87rem; color: var(--ink-soft); line-height: 1.55; } .book-choice .btn { width: 100%; } /* Mention sous le bouton du calendrier : prévient d'un chargement lent AVANT le clic, au lieu de laisser l'utilisateur devant un vide. */ .book-note { margin: 14px 0 0; font-size: .8rem; color: var(--ink-soft); } /* Zone du calendrier : vide et sans hauteur réservée tant qu'on n'a pas cliqué (c'est ce qui supprime le grand trou blanc et l'attente inutile). */ #cal-inline { width: 100%; } #cal-inline.est-charge { min-height: 480px; overflow: auto; margin-top: 22px; } #cal-attente { margin-top: 18px; font-size: .88rem; color: var(--ink-soft); } #cal-attente[hidden] { display: none; } /* filet : rien ne doit annuler [hidden] */ /* Calendrier masqué parce qu'il n'a pas su se charger. Masqué et NON détruit : s'il finit par arriver, on le réaffiche. */ #cal-inline.est-masque { display: none; } /* Bloc d'échec : le visiteur ne reste jamais devant un calendrier à moitié dessiné, il reçoit une explication et un chemin qui fonctionne. */ #cal-echec { max-width: 520px; margin: 22px auto 0; padding: 22px 20px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; text-align: center; } #cal-echec[hidden] { display: none; } /* Message affiché d'emblée : il doit venir AVANT les deux cartes, sinon le visiteur voit un choix sans savoir pourquoi. */ body.cal-prealable .cal-wrap { display: flex; flex-direction: column; } body.cal-prealable .cal-wrap > #cal-echec { order: -1; margin: 0 auto 20px; } /* Le bouton de l'encadré ferait doublon : la carte juste en dessous porte déjà le même appel à l'action, en doré. */ body.cal-prealable #cal-echec .btn { display: none; } body.cal-prealable #cal-echec .ce-texte { margin-bottom: 0; } #cal-echec .ce-titre { margin: 0 0 8px; font-weight: 600; } #cal-echec .ce-texte { margin: 0 0 16px; font-size: .87rem; color: var(--ink-soft); line-height: 1.55; } /* Le calendrier n'aboutit pas → le formulaire passe devant, dans TOUTES les langues (la langue choisie ne dit rien de la qualité de la connexion). Ne coûte rien aux visiteurs pour qui le calendrier fonctionne : chez eux la classe n'est jamais posée. */ body.cal-injoignable #book-cal-card { order: 2; } body.cal-injoignable #book-msg-card { order: 1; } body.cal-injoignable #book-cal-btn { background: transparent; color: var(--ink); border-color: var(--line); } body.cal-injoignable #book-cal-btn:hover { border-color: var(--gold); color: var(--gold); background: transparent; transform: none; } body.cal-injoignable #book-msg-btn { background: var(--gold); color: #ffffff; border-color: var(--gold); } body.cal-injoignable #book-msg-btn:hover { background: #8c3f22; border-color: #8c3f22; color: #fff; } /* Sur la page russophone, le formulaire est mis en avant par défaut (bouton doré) et le calendrier en second : c'est le chemin le plus fiable pour ce public. Repose sur posé par build.py. */ html[lang="ru"] #book-cal-card { order: 2; } html[lang="ru"] #book-msg-card { order: 1; } html[lang="ru"] #book-cal-btn { background: transparent; color: var(--ink); border-color: var(--line); } html[lang="ru"] #book-cal-btn:hover { border-color: var(--gold); color: var(--gold); background: transparent; transform: none; } html[lang="ru"] #book-msg-btn { background: var(--gold); color: #ffffff; border-color: var(--gold); } html[lang="ru"] #book-msg-btn:hover { background: #8c3f22; border-color: #8c3f22; color: #fff; } /* ---------- Avis ---------- ⚠️ GABARIT : ces règles ne ciblent rien tant qu'aucun vrai témoignage n'est publié (le bloc .avis est en commentaire dans le HTML). À garder : elles servent le jour où un avis validé est collé. */ .avis { padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; margin: 0; } .avis p { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.6; font-style: italic; } .avis .who { margin-top: auto; font-size: .88rem; color: var(--ink-soft); font-weight: 600; } /* ---------- Ressources ---------- */ .res { display: block; padding: 22px 20px; } .res .tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold); } .res h3 { font-size: 1.4rem; margin: 10px 0 8px; } .res p { margin: 0; color: var(--ink-soft); font-size: .95rem; } /* GABARIT : lien « voir le produit », pour quand une ressource sera en vente (aujourd'hui les 6 cartes portent .res-soon et n'ont pas de lien). */ .res .go { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--ink); font-size: .9rem; } .res .go::after { content: " →"; color: var(--gold); } .res.res-soon:hover { border-color: var(--line); cursor: default; } /* Etiquette, pas pastille arrondie. */ .res .soon { display: inline-block; margin-top: 16px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } /* ---------- Formulaire de contact ---------- */ .contact-form { max-width: 640px; margin: 0 auto; display: grid; gap: 13px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-clair); border-radius: 3px; padding: 26px; } @media (max-width: 560px) { .contact-form { padding: 22px 18px; } } .contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 620px) { .contact-form .row2 { grid-template-columns: 1fr; } } /* Nom · Email · Niveau sur UNE seule ligne : économise une rangée entière. Le niveau est un menu déroulant court, il n'a pas besoin de toute la largeur. */ .contact-form .row3 { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 14px; } @media (max-width: 700px) { .contact-form .row3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .contact-form .row3 { grid-template-columns: 1fr; } } .contact-form label { display: grid; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); align-content: start; } .contact-form input, .contact-form select, .contact-form textarea { font-family: inherit; font-size: .98rem; padding: 11px 13px; border: 1px solid var(--line); border-radius: 2px; background: var(--ivory); color: var(--ink); width: 100%; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .contact-form textarea { resize: vertical; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #97a8a1; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.15); } .contact-form button { justify-self: stretch; margin-top: 4px; cursor: pointer; } /* Les icones au trait ont ete retirees de la page : bulle, loupe, livre, etoile, ampoule, horloge, ecran... Ce jeu d'icones (Lucide, Feather et leurs clones) est le marqueur numero un du « site fabrique par une machine ». Rien ne les remplace : la typographie suffit. */ /* ---------- Comment ca se passe ---------- Les trois pastilles rondes 01/02/03 reliees par un fil colore forment un motif de gabarit. Trois colonnes separees par un filet vertical disent la meme chose, sans boite et sans effet. */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--filet); } .step { position: relative; padding: 24px 32px 8px; text-align: left; border-left: 1px solid var(--filet); } .step:first-child { border-left: none; padding-left: 4px; } @media (max-width: 780px) { .steps { grid-template-columns: 1fr; } .step, .step:first-child { border-left: none; padding: 20px 4px 8px; border-top: 1px solid var(--filet); } .steps .step:first-child { border-top: none; } } .step .num { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 700; color: var(--chiffre); line-height: .9; margin: 0 0 12px; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; transition: color .25s ease; } .step:hover .num { color: var(--gold); } .step h3 { font-size: 1.3rem; margin: 0 0 8px; } .step p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; } /* ---------- Encart confiance (section Avis) ---------- */ /* GABARIT (aucun bloc de confiance sur cette page pour l'instant) : liste a deux colonnes, filets et tirets — surtout pas six cases a coche. */ .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 46px; } @media (max-width: 700px) { .trust-grid { grid-template-columns: 1fr; } } .trust-item { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--filet); } /* Même tiret que dans la carte du hero, en pseudo-élément : six vides en moins dans le HTML. */ .trust-item::before { content: ""; flex: none; width: 15px; height: 2px; background: var(--gold-clair); position: relative; top: -.3em; } .trust-item .txt { font-size: .93rem; color: var(--ink); font-weight: 500; } /* ---------- FAQ ---------- */ /* Deux colonnes sur grand écran : la FAQ tient sur moitié moins de hauteur. align-items:start évite que les questions fermées s'étirent à la hauteur d'une question ouverte. */ .faq { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; } @media (max-width: 820px) { .faq { grid-template-columns: 1fr; } } .faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; transition: border-color .2s; } .faq details[open] { border-color: var(--gold); } .faq summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 14px 24px 14px 0; list-style: none; position: relative; text-align: left; font-size: .95rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0; top: 11px; color: var(--gold); font-size: 1.4rem; line-height: 1; transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { margin: 0 0 16px; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; text-align: left; } /* ---------- Pied de page ---------- */ footer { border-top: 1px solid var(--line); padding: 30px 0; } .foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--ink-soft); font-size: .9rem; } .d-pied { width: .95em; height: .95em; fill: var(--gold); vertical-align: -.15em; margin-right: 2px; } .foot-links { display: flex; gap: 20px; flex-wrap: wrap; } .foot-links a { color: var(--ink-soft); } .foot-links a:hover { color: var(--gold); } /* Lien Trustpilot : un simple lien stylé, PAS le widget (payant) */ .tp-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .tp-link svg { width: 15px; height: 15px; flex: none; } /* Bouton « déposer un avis sur Trustpilot » (section Avis) */ .tp-cta-wrap { text-align: center; margin: 0 0 18px; } .tp-cta { display: inline-flex; align-items: center; gap: 9px; } .tp-cta svg { width: 17px; height: 17px; flex: none; } .tp-ou { text-align: center; color: var(--ink-soft); font-size: .92rem; margin: 0 0 14px; } /* ---------- Accessibilité : contour clavier + lien d'évitement ---------- */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .stars-input input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--ivory); padding: 10px 18px; border-radius: 0 0 10px 10px; font-size: .9rem; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 0; } /* ---------- Menu mobile (burger) ---------- */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: transparent; border: none; cursor: pointer; padding: 9px; margin-left: 2px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .28s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Le menu déroulant doit rester sous l'en-tête quelle que soit la langue */ .mobile-menu { position: absolute; top: 72px; left: 0; right: 0; z-index: 49; background: rgba(250,248,243,.98); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .32s ease; } .mobile-menu.open { max-height: 460px; box-shadow: 0 20px 40px -24px rgba(var(--ink-rgb),.3); } .mobile-menu .wrap { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 16px; } .mobile-menu a { padding: 15px 2px; font-size: 1.02rem; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a.btn { margin-top: 14px; text-align: center; color: #ffffff; border-bottom: none; } /* Bascule en menu burger a 1020 px (contre 880 avant). Le seuil est calé sur le RUSSE, dont les libellés sont les plus longs (« Профориентация », « Первый контакт ») : à 880 px le menu débordait et créait une barre de défilement horizontale sur toute la page. */ @media (max-width: 1020px) { .nav-toggle { display: flex; } /* `:not(.lang-btn)` INDISPENSABLE : après génération, les boutons de langue sont des . Sans cette exception ils seraient masqués avec les liens de navigation et un visiteur sur téléphone ne pourrait plus changer de langue (il ne resterait que l'icône de globe). */ .nav-links a:not(.lang-btn) { display: none; } } @media (min-width: 1021px) { .mobile-menu { display: none; } } /* ---------- Téléphones : l'en-tête doit tenir sur une seule ligne ---------- Marque + sélecteur de langue + burger réclamaient 419 px alors qu'un iPhone n'offre que 345 à 399 px de contenu → barre de défilement horizontale sur TOUTE la page, dans les 3 langues. Le menu déroulant a réglé l'essentiel (un seul code de langue affiché) ; on resserre quand même le bouton pour garder de la marge. */ @media (max-width: 520px) { .wrap { padding: 0 16px; } .nav { gap: 8px; } .brand { font-size: 1.18rem; } .lang-toggle { padding: 6px 9px 6px 8px; font-size: .74rem; } .nav-toggle { width: 38px; height: 38px; padding: 7px; margin-left: 0; } } /* Très petits écrans (iPhone SE 1ʳᵉ génération, 320 px) */ @media (max-width: 360px) { .wrap { padding: 0 12px; } .brand { font-size: 1.05rem; } .lang-globe { display: none; } .lang-toggle { padding: 5px 8px; font-size: .7rem; } .nav-toggle { width: 34px; height: 34px; padding: 6px; } /* Un mot russe long ne tient pas dans un titre à cette largeur : « подготовительные » rend 325 px en Cormorant 2rem pour 296 px disponibles, et c'est TOUTE la page qui se met à défiler de côté. Mesuré au navigateur sur /ru/ à 320 px. hyphens:auto coupe proprement parce que build.py pose bien . */ h1, h2 { overflow-wrap: break-word; hyphens: auto; } } /* ---------- Bouton « retour en haut » ---------- */ .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--gold); border: 1px solid var(--gold); font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; box-shadow: 0 10px 26px -12px rgba(var(--ink-rgb),.5); } .to-top.show { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--gold); color: var(--ink); } /* ---------- Apparition au défilement (désactivée si mouvement réduit) ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ---------- Signature hero : symboles mathématiques flottants (filigrane doré) ---------- */ .hero { position: relative; } .hero .wrap { position: relative; z-index: 1; } .math-field { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; } .math-sym { position: absolute; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: rgba(var(--gold-rgb),.055); line-height: 1; user-select: none; } @media (prefers-reduced-motion: no-preference) { .math-sym { animation: floatSym ease-in-out infinite; } @keyframes floatSym { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-26px) rotate(6deg); } 100% { transform: translateY(0) rotate(0deg); } } /* Entrée en cascade des éléments du hero */ .hero-copy > * { opacity: 0; animation: heroRise .85s cubic-bezier(.2,.7,.3,1) forwards; } .hero-copy > .eyebrow { animation-delay: .10s; } .hero-copy > h1 { animation-delay: .24s; } .hero-copy > .lead { animation-delay: .42s; } .hero-copy > .cta-row { animation-delay: .58s; } .hero-copy > .hero-note { animation-delay: .72s; } .hero-card { opacity: 0; animation: heroRise .95s cubic-bezier(.2,.7,.3,1) .5s forwards; } @keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } } @media (max-width: 560px) { .math-sym.hide-mobile { display: none; } } /* Perf : on fige l'animation des symboles quand le hero n'est plus visible */ .math-field.paused .math-sym { animation-play-state: paused; } /* ---------- Formulaire d'avis : notation en étoiles ---------- */ .form-status { display: none; margin: 16px 0 0; text-align: center; font-weight: 600; } .field-label { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; } .stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-start; } .stars-input input { position: absolute; opacity: 0; pointer-events: none; } .stars-input label { display: inline-block; font-size: 2rem; line-height: 1; color: var(--line); cursor: pointer; padding: 0 3px; margin: 0; text-transform: none; letter-spacing: normal; transition: color .15s ease, transform .1s ease; } .stars-input label:hover, .stars-input label:hover ~ label, .stars-input input:checked ~ label { color: var(--gold); } .stars-input label:active { transform: scale(1.2); } .review-intro { max-width: 620px; margin: 34px auto 18px; text-align: center; } .review-intro h3 { font-size: 1.5rem; margin-bottom: 6px; } .review-intro p { color: var(--ink-soft); font-size: .98rem; } /* ---------- Easter egg : clic sur le D → pluie de lettres accentuées ---------- */ .burst-sym { position: fixed; z-index: 200; pointer-events: none; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: var(--gold); transform: translate(-50%, -50%); animation: burstFly 1.1s ease-out forwards; } @keyframes burstFly { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(0deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(180deg); } }