/* ============================================================
THE TAROT ALCHEMIST — aliettetarot.com — refonte V1 (locale)
Système de design. Portable vers Astro : tokens + composants.
Palette : audit "Le Grand Œuvre" + Master Prompt.
============================================================ */
/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=Mulish:wght@300;400;500;600;700&display=swap');
/* ---------- Tokens ---------- */
:root{
/* Base — ivoire / parchemin chaud, lumineux */
--ivory: #FCF4E5; /* fond global */
--ivory-2: #F7EDDA; /* panneau / surface secondaire */
--parchment: #EDD9A8; /* sections chaudes, plus marquées qu'ivory-2 pour créer du rythme */
--parchment-2: #E4C990;
/* Encre — noir chaud, jamais pur */
--noir: #14110F; /* Noir d'Athanor — réservé au TEXTE (titres, strong…) sur fond clair, ne pas utiliser en fond de bloc */
--anthracite: #332F2F; /* gris anthracite (option A validée par Aliette le 2026-09-11, après test de B et C en contexte réel) — fond des blocs sombres génériques (.band--dark, .callout) */
--anthracite-gradient: linear-gradient(160deg, #14110F 0%, #332F2F 42%, #5C4726 72%, #8A6A2E 100%); /* dégradé noir/doré (2026-09-11, v2 — doré renforcé) — mêmes paliers proportionnels que le dégradé du hero Ateliers Cartomancie (noir → doré, diagonal 160deg, même teinte dorée finale #8A6A2E), #332F2F conservé comme dominante mais le doré est plus étendu/visible qu'en v1 */
--ink: #26201B; /* texte courant sur ivoire (~11:1) */
--ink-soft: #5B4F44; /* texte secondaire */
--ink-faint: #8A7C6C;
/* Or — unifié. Ornement vs texte. */
--gold: #C9A24B; /* filets, cadres, ornements, pictos (PAS le texte courant) */
--gold-line: rgba(154,110,46,.34);
--gold-deep: #91641A; /* or utilisé COMME texte / lien / bouton sur fond clair (~4.75:1 texte, ~5.2:1 fond+blanc) — teinte affinée, moins brune, plus proche du doré du symbole du header */
--gold-bright: #E7C983; /* or sur fond sombre uniquement */
/* Verts sourds — sauge / amande, avec mesure */
--sage: #7C8A6A;
--sage-deep: #58684B;
--forest: #2F3D2C; /* titres teintés nature */
/* Turquoise — Graine de Magicien UNIQUEMENT */
--turquoise: #51C0E3; /* remplissage / ornement / fond sombre */
--turquoise-deep: #2E7E97; /* texte / titres sur fond clair */
/* Rouge — La Voie Royale UNIQUEMENT (structurel) */
--rouge: #4B0909;
--rouge-mid:#6B1410;
--braise: #7E1A14;
/* Accent actif (piloté par data-theme) */
--accent: var(--gold-deep);
--accent-orn: var(--gold);
/* Typo */
--display: "Cinzel", "Trajan Pro", Georgia, serif;
--body: "Caudex", "Iowan Old Style", Georgia, "Times New Roman", serif;
--util: "Mulish", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
/* Rythme */
--pad: clamp(1.15rem, 5vw, 2.25rem);
--measure: 66ch;
--shell: 1160px;
--radius: 2px;
}
/* ---------- Reset léger ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
margin:0; background:var(--ivory); color:var(--ink);
font-family:var(--body); font-size:1.0625rem; line-height:1.78;
font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-deep); text-underline-offset:.18em; text-decoration-color:var(--gold-line); }
a:hover{ color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; color:var(--noir); margin:0; line-height:1.2; letter-spacing:.01em; }
p,ul,ol{ margin:0; }
strong{ font-weight:700; color:var(--noir); }
em{ font-style:italic; }
hr{ border:0; height:1px; background:var(--gold-line); margin:0; }
::selection{ background:rgba(201,162,75,.28); }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}
/* ---------- Layout utils ---------- */
/* 2026-09-29 (round 5, tablette réelle Lenovo A7600-F / Chrome 81 / Android 4.4.2) : chaque propriété
logique CSS (padding-inline/margin-inline/padding-block/margin-block/inset) ci-dessous est précédée
de son équivalent physique (padding-left/right, margin-left/right, padding-top/bottom, top/left/right)
avec exactement la même valeur. Raison : Chrome 81 (sorti en 2020) ne reconnaît PAS encore ces
propriétés logiques (arrivées dans Chrome 87, fin 2020) — il les ignore silencieusement, ce qui
explique les paddings/marges mesurés à 0px sur la vraie tablette malgré clamp() et les media queries
fonctionnant correctement. Un navigateur ancien applique seulement la ligne physique ; un navigateur
moderne applique la physique PUIS la logique (même valeur = aucun changement visuel). Technique de
repli standard, sans aucun risque de régression desktop/mobile. */
.shell{ max-width:var(--shell); margin-left:auto; margin-right:auto; padding-left:var(--pad); padding-right:var(--pad); margin-inline:auto; padding-inline:var(--pad); }
.shell.narrow{ max-width:720px; }
.shell.mid{ max-width:900px; }
.band{ padding-top:clamp(2.75rem,7vw,5rem); padding-bottom:clamp(2.75rem,7vw,5rem); padding-block:clamp(2.75rem,7vw,5rem); }
.band.tight{ padding-top:clamp(1.75rem,4vw,3rem); padding-bottom:clamp(1.75rem,4vw,3rem); padding-block:clamp(1.75rem,4vw,3rem); }
/* 2026-09-29 (retour tablette reelle, 3e passe) : Aliette signale sur sa vraie tablette (portrait
800px ET paysage 1280px) que les marges laterales de quasi toutes les sections (hero, bandeau
"Bienvenue", "Moi c'est Aliette", Mes Offres, Livre/Methode...) sont trop serrees -- le contenu
"arrive quasiment jusqu'au bord". Cause commune identifiee : toutes ces sections heritent leur
marge laterale de --pad via .shell (cf. plus haut) ; --pad plafonne a 2.25rem (36px) des ~720px
de largeur ecran deja -- donc, en valeur absolue, une vraie tablette de 800px affiche la MEME
marge de 36px qu'un desktop de 1920px. Sur desktop, ces 36px se noient dans le vide exterieur au
.shell (max-width:1160px) ; sur une tablette de 800px, le .shell occupe la quasi-totalite de la
largeur : ces 36px sont le SEUL espace visible, d'ou l'impression de bord. Correction : un seul
point de reglage (--pad, deja utilise par .shell/.hero-in/.footer-in/etc. partout sur le site)
augmente entre 680px et 1290px -- couvre les deux largeurs reelles de la tablette (800 portrait,
1280 paysage) -- et redevient automatiquement la valeur normale en dehors de cette plage : donc
AUCUN changement sur mobile valide (<680px) ni sur desktop valide (>1290px, cas normal d'usage
desktop). .band.tight (bandeau "Bienvenue") recoit en plus une respiration verticale complementaire
sur la meme plage, meme logique. */
@media (min-width:680px) and (max-width:1290px){
:root{ --pad: clamp(2.5rem, 6.5vw, 4rem); }
.band.tight{ padding-top:clamp(2.75rem,6vw,4rem); padding-bottom:clamp(2.75rem,6vw,4rem); padding-block:clamp(2.75rem,6vw,4rem); }
}
/* Rythme vertical : section qui prolonge la lecture de la précédente (même sujet, pas une nouvelle "respiration") plutôt qu'un vrai changement de bloc — réduit uniquement l'espace AVANT, garde l'espace normal après.
Sélecteur ".band.band--flow" (et non ".band--flow" seul) : nécessaire pour battre la spécificité de ".band.tight" (2 classes) qui fixe aussi le padding-top via son "padding-block". */
.band.band--flow{ padding-top:clamp(.75rem,2vw,1.25rem); }
/* Variante "après" de band--flow, pour le cas inverse : une section suivie d'un bloc qui doit lui "coller"
davantage qu'à la normale (ex. La Voie Royale : "Suis le guide" → bloc empreintes, pour rééquilibrer
un espace perçu comme trop grand au-dessus du bloc empreintes par rapport à l'espace en dessous). */
.band.band--flow-after{ padding-bottom:clamp(.75rem,2vw,1.25rem); }
.band--parchment{ background:var(--parchment); }
.band--ivory2{ background:var(--ivory-2); }
.band--dark{ background:var(--anthracite-gradient); color:var(--ivory-2); }
.band--dark h1,.band--dark h2,.band--dark h3{ color:var(--ivory); }
.band--dark strong{ color:var(--gold-bright); }
.band--dark .lede{ color:var(--ivory-2); }
.center{ text-align:center; }
.stack > * + *{ margin-top:1.15rem; }
[hidden]{ display:none!important; }
.visually-hidden{
position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ---------- Typo helpers ---------- */
.eyebrow{
font-family:var(--util); font-size:.72rem; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; color:var(--accent); display:block; margin-bottom:1rem;
}
.h-xl{ font-size:clamp(2rem,5.5vw,3.5rem); letter-spacing:.03em; }
.h-lg{ font-size:clamp(1.6rem,3.8vw,2.5rem); }
.h-md{ font-size:clamp(1.25rem,2.5vw,1.7rem); }
.h-sm{ font-size:1.1rem; letter-spacing:.02em; }
.lede{ font-size:clamp(1.12rem,2vw,1.3rem); line-height:1.7; color:var(--ink); }
/* Utilitaire générique : retour à la ligne volontaire, mobile uniquement (invisible en desktop
où le reste caché). Utilisé pour l'instant sur la phrase de clôture EN de Guidance. */
.only-mobile-break{ display:none; }
@media (max-width:679.98px){ .only-mobile-break{ display:inline; } }
/* Symétrique : retour à la ligne volontaire, desktop uniquement (invisible en mobile). Utilisé
pour composer le sous-titre EN du hero Accompagnements/Coaching différemment selon la largeur. */
.only-desktop-break{ display:inline; }
@media (max-width:679.98px){ .only-desktop-break{ display:none; } }
/* 2026-09-29 (retour tablette réelle) : 3e variante, tablette UNIQUEMENT (680-899.98px, même plage
que le reste des correctifs tablette de ce fichier) — invisible en mobile ET en desktop/paysage.
Utilisé sur le hero de Graine de Magicien (cf. plus bas) pour insérer un retour à la ligne propre à
cette seule largeur, distinct du retour desktop existant. */
.only-tablet-break{ display:none; }
@media (min-width:680px) and (max-width:899.98px){ .only-tablet-break{ display:inline; } }
.meta{
font-family:var(--util); font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--accent); font-variant-numeric:tabular-nums; margin-bottom:.3rem;
}
/* Un strong/em ponctuel dans un .meta (ex. « GRAAL ») doit garder la teinte dorée du reste
de la ligne plutôt que le noir de la règle strong{} globale. */
.meta strong{ color:inherit; }
/* ---------- Composition "offre" en quinconce (identité+image / texte) ---------- */
.offer-identity h2{ margin-bottom:.5rem; }
.offer-img{ max-width:min(320px,80%); margin:1.2rem 0 0; }
/* ---------- Composition "offre" v3 — grille explicite (page Accompagnements/Coaching) ----------
Même technique que .offer-row (Guidances, cf. plus bas) : le bloc identité (row 1) et
[image | texte] (row 2, même ligne de grille) alignent exactement le haut du texte sur le haut
de l'image, quelle que soit la hauteur du bloc identité — remplace l'ancien margin-top approximatif.
Ordre DOM (identité, image, texte) identique pour Le Chaudron et L'Athanor ; seule la colonne
change via --reverse, ce qui préserve l'alternance visuelle en desktop ET donne le même ordre
de lecture (infos → image → texte) sur mobile pour les deux offres. .offer-identity/.offer-img/
.offer-text-vs-image ne sont utilisées que sur cette page (vérifié), sans risque pour le reste du site. */
@media (min-width:680px){
.offer-row-accomp{ column-gap:clamp(1.6rem,4vw,3.2rem); row-gap:1.2rem; align-items:start; }
.offer-row-accomp .offer-identity{ grid-column:1; grid-row:1; }
.offer-row-accomp .offer-img{ grid-column:1; grid-row:2; margin-top:0; }
.offer-row-accomp .offer-text-vs-image{ grid-column:2; grid-row:2; margin-top:0; }
.offer-row-accomp--reverse .offer-identity,
.offer-row-accomp--reverse .offer-img{ grid-column:2; }
.offer-row-accomp--reverse .offer-text-vs-image{ grid-column:1; }
/* L'Athanor (rangée inversée) : l'image (max-width 320px) reste par défaut collée au bord GAUCHE
de sa colonne de grille (côté texte), donnant un écart texte↔image bien plus resserré que celui,
plus généreux, du Chaudron (où l'espace non utilisé de la colonne tombe naturellement du côté
opposé au texte — cette respiration généreuse du Chaudron est la référence à conserver, pas à
réduire). Même correctif que le décalage de La Boussole sur Guidances : on décale identité+image
ensemble vers la droite (elles restent alignées entre elles) pour amener le bord droit de l'image
sur le bord droit de l'encadré "À la carte" situé au-dessus, ce qui retrouve mécaniquement la
même respiration que le Chaudron. */
.offer-row-accomp--reverse .offer-identity,
.offer-row-accomp--reverse .offer-img{ margin-left:clamp(1.25rem,9vw,5.2rem); }
}
@media (max-width:679.98px){
/* Le Chaudron ET L'Athanor mobile : composition centrée (titre+infos, puis image, puis texte),
même logique de marges latérales que .offer-row sur Guidances. */
.offer-row-accomp .offer-identity{ text-align:center; }
.offer-row-accomp .offer-identity ul{ align-items:center; margin-left:auto; margin-right:auto; margin-inline:auto; }
/* Espace bloc-titre → image resserré et harmonisé entre les deux offres : le margin-top hérité
de .editorial-img (clamp 1.5rem–2.5rem) s'ajoutait au row-gap de la grille (1.4rem), d'où un
total ~46px identique mais trop généreux sur les deux blocs. On neutralise ce margin-top pour
ne garder que le row-gap. */
.offer-row-accomp .offer-img{ margin-left:auto; margin-right:auto; margin-top:0; }
.offer-row-accomp .offer-text-vs-image{ text-align:center; padding-left:.9rem; padding-right:.9rem; padding-inline:.9rem; }
.offer-row-accomp .offer-text-vs-image p{ margin-left:auto; margin-right:auto; margin-inline:auto; }
}
/* 2026-09-29 (ROUND FINAL RESPONSIVE MOBILE, demande Aliette -- Accompagnements/Coaching, Le
Chaudron/The Cauldron uniquement, pas L'Athanor/The Athanor -- memes classes .offer-row-accomp
mais scope via :not(.offer-row-accomp--reverse), qui ne cible que la 1ere rangee (Chaudron/
Cauldron), jamais la 2e (Athanor, non concernee par cette demande). */
@media (max-width:679.98px){
/* FR : respiration ajoutee entre le 1er paragraphe ("APPROCHE HOLISTIQUE...plans de travail")
et le 2e ("ACCOMPAGNEMENT AVEC GUIDANCE...") pour l'isoler visuellement comme un paragraphe a
part -- meme valeur (1.4rem) que l'espace deja present juste au-dessus de ce 1er paragraphe
(gap de la grille .grid{gap:1.4rem} entre l'image et le bloc de texte, cf. regles ci-dessus). */
body[data-lang="fr"] .offer-row-accomp:not(.offer-row-accomp--reverse) .offer-text-vs-image p:first-child + p{
margin-top:1.4rem;
}
/* EN : structure de texte differente (pas de parenthese humoristique dans le 1er paragraphe) --
la respiration demandee se situe plus loin, apres le paragraphe-titre en gras qui se termine
par "...+ ENERGY CLEARING" (2e paragraphe) et avant celui qui commence par "Thanks to..."
(3e paragraphe). Meme valeur que ci-dessus pour coherence visuelle entre les deux langues. */
body[data-lang="en"] .offer-row-accomp:not(.offer-row-accomp--reverse) .offer-text-vs-image p:nth-child(3){
margin-top:1.4rem;
}
/* FR + EN : espace legerement augmente avant le CTA final de la page ("Je me lance !"/"Let's
go!"). .final-cta porte un margin-top inline (clamp(3rem,6vw,4.5vw)) partage par de nombreuses
pages du site -- !important necessaire pour le surcharger sans toucher .final-cta ailleurs,
scope strictement a cette page via body[data-page="accompagnements"] (commun aux 2 langues,
seul data-lang differe entre les 2 fichiers). */
body[data-page="accompagnements"] .final-cta{ margin-top:3.75rem !important; }
/* DERNIER ROUND MOBILE (2026-09-29) : Guidance + Accompagnement -- le CTA WhatsApp principal
(bouton UNIQUE dans son .btn-row) heritait de la regle generique ".btn-row .btn:only-child
{width:100%}" (@media ≤520px plus bas dans ce fichier), pensee pour un CTA "pleine largeur"
-- Aliette demande ici le retour au traitement compact deja utilise ailleurs (Atout, Graine de
Magicien, La Voie Royale, Qui suis-je : bouton centre, largeur proportionnee au texte). Meme
motif exact que ces pages, applique ici sur toute la plage mobile (≤679.98px, pas seulement
≤520px) pour un rendu coherent sur tous les telephones. Scope par data-page (commun aux 2
langues) : n'affecte ni Guidance/Accompagnement desktop/tablette, ni le .btn-row generique
ailleurs sur le site. */
body[data-page="guidances"] .btn-row{ align-items:center; }
body[data-page="guidances"] .btn-row .btn{ width:auto; min-width:220px; }
body[data-page="accompagnements"] .btn-row{ align-items:center; }
body[data-page="accompagnements"] .btn-row .btn{ width:auto; min-width:220px; }
}
/* ---------- Composition "offre" v2 — grille explicite (page Guidance uniquement) ----------
.offer-row / .offer-title sont des classes propres à cette page : elles ne touchent pas
.offer-identity/.offer-text-vs-image utilisées telles quelles sur Accompagnements/Coaching.
Le titre (row 1) et [image | texte] (row 2, même ligne de grille) donnent un alignement
exact du haut du texte sur le haut de l'image, quelle que soit la largeur d'écran — plus
besoin d'une marge approximative. */
.offer-row .offer-title h2{ margin-bottom:.5rem; }
@media (min-width:680px){
.offer-row{ column-gap:clamp(1.6rem,4vw,3.2rem); row-gap:1.2rem; align-items:start; }
.offer-row .offer-title{ grid-column:1; grid-row:1; }
/* margin-top:0 : neutralise ici le margin-block de .editorial-img (qui s'appliquerait
sinon en plus du row-gap) pour que le haut de l'image tombe exactement sur la ligne
de grille — l'espacement titre→image est désormais porté par row-gap, pas par la marge. */
.offer-row .offer-img{ grid-column:1; grid-row:2; margin-top:0; }
.offer-row .prose{ grid-column:2; grid-row:2; }
.offer-row--reverse .offer-title,
.offer-row--reverse .offer-img{ grid-column:2; }
.offer-row--reverse .prose{ grid-column:1; }
/* La Boussole (mise en page inversée) : gouttière supplémentaire entre le texte (col.1) et
l'image (col.2) — titre et image décalés ensemble vers la droite pour rester alignés
l'un sur l'autre par leur bord gauche commun. Valeur calibrée pour amener le bord droit
de l'image au bord droit de la colonne (= bord droit de l'encadré "Tu repars avec" situé
au-dessus), ce qui donne mécaniquement une gouttière visuelle égale à celle de L'Étincelle. */
.offer-row--reverse .offer-title,
.offer-row--reverse .offer-img{ margin-left:clamp(1.25rem,9vw,5.2rem); }
}
@media (max-width:679.98px){
.offer-row .offer-title{ text-align:center; }
.offer-row .offer-img{
margin-left:auto; margin-right:auto;
/* Réduit l'espace titre→image (trop grand car hérité du margin-block de .editorial-img) tout
en laissant intact l'espace image→texte courant, porté par ce même margin-block côté bas. */
margin-top:.4rem;
}
/* Sur mobile, ce paragraphe joue le rôle de transition entre les deux offres : centré, comme
une bascule plutôt qu'une suite de texte courant. */
.offer-row .prose-lead{ text-align:center; }
/* Respiration latérale supplémentaire pour le texte courant uniquement (pas les images, pas
le bloc titre, qui restent alignés sur la largeur habituelle du shell). */
.offer-row .prose{ padding-left:.9rem; padding-right:.9rem; padding-inline:.9rem; }
}
/* ---------- Encart "à la carte" (bloc mis en avant, fond sombre) ---------- */
.callout{
background:var(--anthracite-gradient); color:var(--ivory-2); text-align:center;
padding:clamp(1.5rem,4vw,2.4rem) clamp(1.3rem,4vw,2.4rem);
margin-top:clamp(1.6rem,4vw,2.6rem); margin-bottom:clamp(1.6rem,4vw,2.6rem); margin-block:clamp(1.6rem,4vw,2.6rem);
}
.callout p{ color:var(--ivory-2); }
.callout .callout-lead{ font-family:var(--display); font-size:1.05rem; margin-bottom:1.1rem; }
/* 2026-09-30 (point 5 liste Aliette, ACCOMPAGNEMENT/COACHING SERVICES, TABLETTE PORTRAIT EN
UNIQUEMENT, tablette Lenovo reelle) : sur sa tablette reelle en portrait, "OBJECTIVE" se
retrouve seul sur sa propre ligne ("...WE DEFINE THE / OBJECTIVE / AND THE SEASONING TOGETHER"),
le retour a la ligne existant ( , place apres "objective", pense
pour le desktop/paysage deja valide -- non modifie ici) tombant apres un retour NATUREL du
navigateur qui coupe deja la 1re ligne avant d'atteindre ce point sur cette largeur/ce rendu de
police reels. Demande explicite : "THE OBJECTIVE AND THE SEASONING TOGETHER" doit rester groupe.
Fix scope UNIQUEMENT a cette page+langue (EN ; FR non concerne, conserve tel quel -- "..." deja
retire, cf. ailleurs) et a la plage tablette portrait (680-899.98px, meme plage que le reste des
correctifs tablette de ce fichier) : un nouveau retour a la ligne ( ,
classe utilitaire deja existante, cf. definition plus haut ~L.162, deja utilisee pour Graine de
Magicien) est insere dans le HTML AVANT "the objective" -- et le retour existant apres "objective"
(only-desktop-break, visible par defaut des 680px) est neutralise uniquement sur cette plage pour
qu'un seul point de coupure agisse a la fois, regroupant "the objective and the "seasoning"
together" sur une meme ligne. Mobile (<680px, only-tablet-break deja invisible par defaut) et
desktop/paysage (>=900px, only-desktop-break repris normalement, only-tablet-break a nouveau
invisible) strictement inchanges. */
@media (min-width:680px) and (max-width:899.98px){
body[data-page="accompagnements"][data-lang="en"] .callout-lead .only-desktop-break{ display:none; }
}
.callout .callout-title{
font-family:var(--util); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--gold-bright); margin-bottom:1rem;
}
.callout ul{
list-style:none; padding:0; margin:0 auto; max-width:46ch; text-align:left;
display:flex; flex-direction:column; gap:.7rem;
}
.callout ul li{ position:relative; padding-left:1.6rem; }
.callout ul li::before{ content:"✦"; position:absolute; left:0; top:0; color:var(--gold-bright); font-size:.75em; line-height:1.6; }
.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:1.15rem; }
/* Ligne de transition en texte courant (pas un titre) qui introduit la liste suivante — même espacement qu'un vrai changement de section, pour une lecture cohérente entre transitions comparables. */
.prose-lead{ margin-top:2.4rem; }
.prose p,.prose li{ max-width:var(--measure); }
.prose h2{ margin-top:2.4rem; }
.prose h3{ margin-top:1.9rem; font-size:clamp(1.05rem,2.2vw,1.35rem); letter-spacing:.02em; color:var(--accent); font-weight:500; }
.prose ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.prose ul li{ position:relative; padding-left:1.5rem; }
/* Puce étoile ✦ — traitement de référence du site (validé par Aliette le 2026-09-16 sur Guidances/
Accompagnements/Ateliers Cartomancie), devenu ici la puce PAR DÉFAUT de toute liste à puces
.prose (remplace l'ancien petit tiret). Mêmes valeurs que .offer-row .offer-included li::before /
l'ancienne règle scopée à Ateliers Cartomancie (désormais redondantes avec ce défaut, laissées en
place telles quelles par prudence — aucun changement visuel, aucun risque). Sans effet sur les
listes .plain (pictogramme déjà dans le texte source) ni sur .callout ul (déjà en étoile). */
.prose ul li::before{
content:"✦"; position:absolute; left:0; top:.2em; color:var(--accent-orn); font-size:.72em;
}
.prose ol{ padding-left:1.3rem; display:flex; flex-direction:column; gap:.55rem; }
/* Listes dont le contenu source porte déjà son propre pictogramme (cœur, soleil, doigt…) :
pas de tiret ajouté par-dessus. */
.prose ul.plain{ padding-left:0; }
.prose ul.plain li{ padding-left:0; }
.prose ul.plain li::before{ content:none; }
/* Bloc "prose center" (texte entièrement centré, pas juste en lecture gauche) : chaque
a son propre max-width mais pas de centrage propre par défaut — sans ça il colle au bord gauche du parent (visible surtout sur les courts éléments comme les étoiles ✦).
Le conteneur lui-même a aussi besoin de margin-inline:auto : sans ça, un .prose.center utilisé
SEUL (pas combiné à .shell, qui porte déjà ce centrage) reste ancré à gauche de son parent — bug
repéré sur Accompagnements/Coaching (bloc "Tu as déjà tous les ingrédients" + bloc CTA final),
où .prose.center n'est jamais combiné à .shell. Redondant (donc sans risque) partout où .shell
porte déjà ce centrage. */
.prose.center{ margin-left:auto; margin-right:auto; margin-inline:auto; }
.prose.center p{ margin-left:auto; margin-right:auto; margin-inline:auto; }
/* "Bienvenue chère initié·e" (Home) : à l'origine, ce corps de texte avait été agrandi (~20.8px, même
calcul que .lede) pour l'harmoniser avec le reste de la page d'accueil (Présentation, Livre 2026,
Guidebook). Round 28 (2026-09-21) : Aliette juge maintenant l'accueil globalement trop imposant par
rapport aux autres pages du site (Guidance, Accompagnement, Ateliers, Graine de Magicien, ATOUT, La
Voie Royale), qui utilisent toutes le corps de texte courant du site (1.0625rem / line-height 1.78,
cf. règle générique `body` en tête de fichier) et ne réservent .lede qu'à UNE ligne d'accroche
isolée, jamais à plusieurs paragraphes de texte courant. Revert donc ICI (accueil uniquement, via
[data-page="accueil"] — ne touche pas .band--dark .prose.center ailleurs sur le site, notamment
qui-suis-je.html, hors scope de cette passe) à la taille de corps de texte standard du site, pour
réaligner ce bandeau (5 phrases de texte courant, pas une accroche) sur le système typographique
validé partout ailleurs. */
body[data-page="accueil"] .band--dark .prose.center p{ font-size:1.0625rem; line-height:1.78; }
/* "Moi, c'est Aliette « L'Alouette »" (Home, section #presentation) : round 29 (2026-09-21) — Aliette
demande que le texte courant de cette section (les paragraphes sous le titre, y compris celui qui
portait la classe .lede) utilise exactement la même taille que le corps de texte de "Bienvenue
chère initié·e" ci-dessus (1.0625rem / line-height 1.78). Le titre "Moi, c'est Aliette..." (h2) n'est
pas concerné. Valeur fixée en rem (et non simplement héritée de `body`) pour rester identique à
Bienvenue à toutes les largeurs, y compris ≤520px où `body{font-size:1.02rem}` (règle générique plus
bas dans ce fichier) réduit légèrement le texte courant du reste du site. Scopé à cette seule
section de l'accueil, ne touche à aucune autre page ni aucune autre section. */
body[data-page="accueil"] #presentation .prose p{ font-size:1.0625rem; line-height:1.78; }
/* CTA final Accompagnements/Coaching ("Je me lance !" + "Des questions ?") : le bouton unique et
le texte d'accompagnement ne doivent pas reprendre le .btn{width:100%} générique en ≤520px (pensé
pour des .btn-row à plusieurs boutons) — ici un seul CTA, on veut un bouton proportionné et
centré, et un texte resserré plutôt qu'étalé presque bord à bord. Scopé à .final-cta pour ne
toucher aucun autre bouton du site. */
@media (max-width:520px){
.final-cta .btn-row{ align-items:center; }
.final-cta .btn{ width:auto; min-width:200px; }
.final-cta p{ max-width:30ch; margin-left:auto; margin-right:auto; margin-inline:auto; }
}
/* ---------- Ornement filet ✦ ---------- */
.rule-orn{
display:flex; align-items:center; gap:1.1rem; color:var(--accent-orn);
margin-block:clamp(1.3rem,3.5vw,2.2rem); font-size:.9rem;
}
.rule-orn::before,.rule-orn::after{
content:""; flex:1; height:1px;
background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
/* ---------- Étoile seule (sans filet) ---------- */
.orn-star{
text-align:center; color:var(--accent-orn);
margin-block:clamp(1.3rem,3.5vw,2.2rem); font-size:.9rem;
}
/* ---------- Header ---------- */
.skip-link{
position:fixed; left:.5rem; top:.5rem; z-index:300; background:var(--gold-deep); color:#fff;
padding:.7rem 1.1rem; font-family:var(--util); font-weight:600;
transform:translateY(-160%); transition:transform .2s;
}
.skip-link:focus{ transform:translateY(0); }
.site-header{
position:sticky; top:0; z-index:100;
background:rgba(252,244,229,.94); backdrop-filter:blur(8px);
border-bottom:1px solid var(--gold-line);
min-height:62px;
}
.header-in{
max-width:var(--shell); margin-left:auto; margin-right:auto; margin-inline:auto; padding:.55rem var(--pad);
display:flex; align-items:center; gap:1rem;
}
/* 2026-09-16, version définitive de la colombe : gap réduit (.6rem → .4rem) pour la rapprocher du
nom, afin qu'elle paraisse appartenir à la signature plutôt qu'être un pictogramme isolé à côté. */
.brand{ display:flex; align-items:center; gap:.4rem; text-decoration:none; flex:none; line-height:1.1; }
.brand:hover{ color:inherit; }
/* 2026-09-16 : symbole du header remplacé (cercle SVG → colombe PNG fournie par Aliette).
height fixe + width:auto conserve les proportions réelles du fichier (674×575) sans déformation ;
object-fit:contain en filet de sécurité si jamais une largeur venait à être contrainte ailleurs.
Version définitive (recolorée #91641A par Aliette) : agrandie 30px → 40px pour plus de présence,
toujours identique sur tous les breakpoints (comme l'ancien symbole circulaire). */
.brand-mark{ height:40px; width:auto; max-width:56px; flex:none; object-fit:contain; }
.brand-name{ font-family:var(--display); font-size:.98rem; letter-spacing:.12em; color:var(--noir); }
.brand-sub{ display:block; font-family:var(--util); font-weight:600; font-size:.56rem; letter-spacing:.28em; color:var(--gold-deep); margin-top:.12rem; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:.1rem; }
.nav a,.nav button.nav-link{
font-family:var(--util); font-size:.86rem; font-weight:500; letter-spacing:.02em;
color:var(--ink); background:none; border:0; cursor:pointer;
padding:.65rem .6rem; text-decoration:none; display:inline-flex; align-items:center; gap:.3rem;
min-height:44px;
}
.nav a:hover,.nav button.nav-link:hover{ color:var(--gold-deep); }
.nav a[aria-current="page"]{ color:var(--gold-deep); box-shadow:inset 0 -2px 0 var(--gold); }
.nav .caret{ width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.6; }
.dropdown{ position:relative; }
.dropdown-panel{
position:absolute; top:calc(100% + .3rem); left:50%; transform:translateX(-50%);
background:var(--ivory); border:1px solid var(--gold-line); min-width:250px; padding:.35rem;
display:none; flex-direction:column; box-shadow:0 20px 44px rgba(43,32,20,.18);
}
.dropdown[data-open="true"] .dropdown-panel{ display:flex; }
.dropdown-panel a{ padding:.6rem .8rem; min-height:0; font-size:.85rem; }
.dropdown-panel a:hover{ background:rgba(201,162,75,.12); }
.dropdown-panel .sep{ height:1px; background:var(--gold-line); margin:.3rem .5rem; }
/* Mention "100% en ligne" : non cliquable, sobre, cohérente avec les surtitres .eyebrow du site. */
.dropdown-panel .dropdown-kicker{
font-family:var(--util); font-size:.68rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--gold-deep); padding:.5rem .8rem .15rem;
}
/* Hiérarchie visible : les 3 programmes sont des sous-catégories de Formations Alchimiques */
.dropdown-panel .child{
padding-left:1.6rem; margin-left:.75rem; color:var(--ink-soft); font-size:.78rem;
border-left:1px solid var(--gold-line);
}
.lang-switch{ display:flex; align-items:center; gap:.15rem; font-family:var(--util); font-size:.82rem; font-weight:600; margin-left:1.75rem; flex:none; }
.lang-switch a{ padding:.5rem .4rem; text-decoration:none; color:var(--ink-faint); min-height:44px; display:inline-flex; align-items:center; }
.lang-switch a[aria-current="true"]{ color:var(--gold-deep); }
.lang-switch .sep{ color:var(--gold-line); }
/* 2026-09-29 : copie du selecteur de langue, dupliquee dans le header (hors .nav), pour la tablette
(cf. media query 680-899.98 plus bas). Masquee par defaut (desktop ET mobile inchanges -- desktop
affiche deja .lang-switch normalement dans .nav ; mobile continue d'utiliser exclusivement le
.lang-switch d'origine, a l'interieur du menu hamburger, comme avant). */
.lang-switch--bar{ display:none; }
.hamburger{
display:none; margin-left:auto; background:none; border:0; cursor:pointer;
font-family:var(--util); font-size:.82rem; font-weight:600; color:var(--ink);
padding:.6rem .5rem; min-height:44px; align-items:center;
}
/* 2026-09-29 (round 6, retour tablette réelle) : l'espace entre les 3 traits et le mot "Menu" était
porté par "gap" sur le conteneur flex .hamburger — hors "gap" en contexte FLEXBOX (à ne pas confondre
avec le gap de grille, supporté bien plus tôt) n'est arrivé que dans Chrome 84 (2020), donc absent de
Chrome 81 : les deux éléments se retrouvaient collés sur la vraie tablette. Remplacé par une marge
directement sur ".ham-label" (le mot "Menu") : rendu strictement identique sur tout navigateur
moderne, mais qui fonctionne aussi sur Chrome 81 puisque "margin-left" n'a jamais été une propriété
récente. */
.hamburger .ham-label{ margin-left:.4rem; }
.hamburger .bars{ width:18px; height:12px; position:relative; }
.hamburger .bars::before,.hamburger .bars::after,.hamburger .bars span{
content:""; position:absolute; left:0; right:0; height:1.5px; background:var(--ink);
}
.hamburger .bars::before{ top:0; } .hamburger .bars span{ top:5px; } .hamburger .bars::after{ bottom:0; }
@media (max-width:899.98px){
.hamburger{ display:inline-flex; }
.nav{
/* 2026-09-29 (round 5) : "inset" est lui aussi une propriété physique/logique récente (Chrome 87+,
comme padding-inline/margin-inline ci-dessus) — absente de Chrome 81, elle laissait top/left/right
à "auto", donc le panneau du menu ne se positionnait PAS réellement sous le header sur la vraie
tablette (c'est la cause la plus probable du menu qui semblait tronqué/incomplet). Repli physique
top/left/right, identique en valeur à "inset:62px 0 auto". Même principe pour max-height : "dvh"
(Chrome 108+) est remplacé par "vh" en repli pour Chrome 81, qui ne le reconnaît pas non plus. */
position:fixed; top:62px; left:0; right:0; inset:62px 0 auto; background:var(--ivory);
border-bottom:1px solid var(--gold-line); flex-direction:column; align-items:stretch;
padding:.5rem var(--pad) 1.5rem; gap:0; max-height:calc(100vh - 62px); max-height:calc(100dvh - 62px); overflow-y:auto;
}
body:not([data-menu="open"]) .nav{ display:none; }
.nav a,.nav button.nav-link{ padding:.9rem .25rem; font-size:1rem; justify-content:space-between; border-bottom:1px solid rgba(154,110,46,.14); }
.dropdown-panel{
position:static; transform:none; border:0; box-shadow:none; min-width:0; background:none;
padding:0 0 .4rem .75rem; max-height:0; overflow:hidden; display:flex;
}
.dropdown[data-open="true"] .dropdown-panel{ max-height:520px; }
.dropdown-panel a{ font-size:.92rem; }
.dropdown-panel .child{ font-size:.85rem; margin-left:.5rem; padding-left:1.2rem; }
/* FR | EN en haut du panneau une fois le menu ouvert (mobile ET tablette). Scope ".nav .lang-switch"
(et non ".lang-switch" seul) : la copie ".lang-switch--bar" (hors .nav, ajoutee plus bas) partage
la classe "lang-switch" pour son style visuel, mais ne doit PAS heriter cet order:-1, sous peine
de se retrouver affichee avant le logo au lieu de rester a cote du hamburger. */
.nav .lang-switch{ order:-1; margin-left:auto; }
}
/* 2026-09-29 : sur tablette (680-899.98px), Aliette veut FR/EN visible directement dans le header,
SANS avoir a ouvrir le menu hamburger pour decouvrir qu'une version anglaise existe (contrairement
au mobile, regle a part, non touchee ici -- cf. bloc precedent, inchange). Le .lang-switch d'origine
ci-dessus reste dans .nav, qui est display:none tant que le menu n'est pas ouvert : il etait donc
INVISIBLE par defaut sur tablette malgre le commentaire "reste visible hors hamburger" (faux : il
ne fait que passer en premiere position UNE FOIS le panneau deja ouvert). Correction : on affiche a
la place la copie .lang-switch--bar (definie plus haut, a cote de .hamburger dans le HTML), et on
masque le doublon a l'interieur du panneau pour cette plage precise, afin de ne pas l'afficher deux
fois quand le menu est ouvert. */
@media (min-width:680px) and (max-width:899.98px){
.lang-switch--bar{ display:flex; margin-left:auto; }
.hamburger{ margin-left:.5rem; }
.hamburger .ham-label{ margin-left:.55rem; }
.nav .lang-switch{ display:none; }
}
/* 2026-09-29 (ROUND FINAL RESPONSIVE MOBILE) : Aliette veut desormais le meme principe sur mobile
(<680px) : FR/EN visible directement dans le header, hors du menu hamburger, exactement comme deja
fait sur tablette ci-dessus. On reutilise le meme mecanisme (.lang-switch--bar affichee, doublon
.nav .lang-switch masque) pour eviter toute logique nouvelle. */
@media (max-width:679.98px){
/* DERNIER ROUND MOBILE (2026-09-29) : Aliette signale qu'apres le retest reel sur telephone, le
selecteur de langue -- place juste apres le logo (margin-left:auto sur lang-switch--bar) --
se retrouve trop proche de celui-ci et pas assez proche du bouton Menu. Elle demande la logique
du desktop, LOGO puis (a droite) MENU puis FR/EN. Le HTML (site.js) n'est pas modifie ici -- le
DOM reste logo / lang-switch--bar / hamburger -- on reordonne uniquement visuellement via
flexbox order (header-in est deja display:flex) : le bouton Menu (order:1) porte desormais le
margin-left:auto (pousse le groupe Menu+FR/EN tout a droite), et FR/EN (order:2) suit avec sa
propre respiration. */
.lang-switch--bar{ display:flex; order:2; margin-left:.85rem; }
.hamburger{ margin-left:auto; order:1; }
.hamburger .ham-label{ margin-left:.4rem; }
.nav .lang-switch{ display:none; }
}
/* Verification par mesure reelle (scrollWidth vs clientWidth du .header-in, pas seulement visuelle) :
avec le FR|EN maintenant visible en permanence dans le header mobile, le bloc logo (nom + sous-titre)
a sa taille d'origine ne tient plus a cote de FR|EN + bouton Menu sur la tres grande majorite des
telephones reels, pas seulement les tres petits ecrans -- debordement horizontal reel confirme a
375px (63px de trop) et encore a 428px (13px de trop, iPhone "Pro Max"), et seulement resorbe a
partir de ~460-480px. Repli continu (clamp + vw), UNIQUEMENT jusqu'a 479.98px : la taille du
logo/nom/sous-titre diminue progressivement entre 320px (le plus etroit) et 480px (ou elle rejoint
exactement la taille d'origine, donc aucune coupure visuelle brutale a la frontiere). Au-dessus de
480px (phablette/tablette portrait, largement assez de place), rien n'est modifie. */
@media (max-width:479.98px){
.header-in{ gap:.4rem; }
.brand{ gap:.3rem; }
.brand-mark{ height:clamp(30px, 10px + 6.25vw, 40px); }
.brand-name{ font-size:clamp(.68rem, .08rem + 3vw, .98rem); letter-spacing:.05em; white-space:nowrap; }
.brand-sub{ font-size:clamp(.44rem, .2rem + 1.2vw, .56rem); letter-spacing:.12em; }
.lang-switch--bar{ margin-left:.55rem; }
.lang-switch--bar a{ padding:.5rem .25rem; }
.hamburger{ padding:.6rem .15rem .6rem .25rem; }
.hamburger .ham-label{ margin-left:.3rem; }
}
/* ---------- Boutons ---------- */
/* Logique d'origine conservée : plein or-deep + texte blanc (primaire), contour or + texte or (ghost).
Seule la teinte de --gold-deep a été affinée (moins brune) — pas la logique des boutons. */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
font-family:var(--util); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
padding:.95rem 1.8rem; min-height:48px; border:1px solid var(--gold-deep); background:var(--gold-deep);
color:#fff; text-decoration:none; cursor:pointer; transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{ background:var(--noir); border-color:var(--noir); color:#fff; }
.btn--ghost{ background:none; color:var(--gold-deep); }
.btn--ghost:hover{ background:rgba(201,162,75,.14); color:var(--noir); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.8rem; }
/* 2026-09-29 (round 6, retour tablette réelle, accueil FR portrait 800px) : à cette largeur précise,
les libellés FR du hero ("Découvrir mes offres" / "Qui suis-je ?") passaient à la ligne alors que la
version EN, plus courte, tenait déjà sur une seule ligne. Réduction ciblée du gap et du padding
horizontal des boutons -- UNIQUEMENT accueil, UNIQUEMENT FR, UNIQUEMENT 680-899.98px (donc jamais en
paysage 1280px, déjà bon et non touché ici, ni en desktop/mobile/EN). Vérifié : les deux boutons
tiennent côte à côte avec ~9px de marge à 800px, sans texte coupé ni bouton trop petit. */
@media (min-width:680px) and (max-width:899.98px){
body[data-page="accueil"][data-lang="fr"] .hero--tight .btn-row{ gap:.5rem; }
body[data-page="accueil"][data-lang="fr"] .hero--tight .btn-row .btn{ padding-left:1rem; padding-right:1rem; }
}
/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:clamp(2.5rem,7vw,5rem); padding-bottom:clamp(2rem,5vw,3.75rem); padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,3.75rem); overflow:hidden; }
.hero-in{ display:grid; gap:clamp(1.75rem,5vw,3rem); align-items:center; }
/* Homepage : composition resserrée titre / carte de visite */
.hero--tight .hero-in{ gap:clamp(.5rem,1.2vw,.75rem); }
.hero--tight .hero-figure{ max-width:min(380px,72vw); }
.h-gold{ color:var(--gold-deep); }
@media (min-width:680px){ .hero-in{ grid-template-columns:1.05fr .95fr; } }
/* Homepage : resserrement accentué (2026-09-11, 2e passe) — colonne visuelle légèrement réduite pour
rapprocher la composition (image centrée à largeur fixe) du bloc texte, sans toucher la hiérarchie,
le titre ni les boutons. */
@media (min-width:680px){ .hero--tight .hero-in{ grid-template-columns:1.15fr .85fr; } }
.hero h1{ font-size:clamp(2.1rem,6vw,3.9rem); letter-spacing:.06em; color:var(--noir); }
.hero .sub{ margin-top:1.2rem; font-size:clamp(1.05rem,2vw,1.22rem); color:var(--ink); max-width:36ch; }
.hero-figure{ justify-self:center; max-width:min(360px,74vw); }
.hero-figure img{ max-height:66vh; width:auto; margin-left:auto; margin-right:auto; margin-inline:auto; }
.hero-figure .picto{ max-height:none; }
/* Motif "or alchimique" — mouvement très discret */
.sun-motif{ width:min(300px,66vw); margin-left:auto; margin-right:auto; margin-inline:auto; display:block; }
.sun-motif .rot{ transform-origin:120px 120px; animation:sun-turn 90s linear infinite; }
@keyframes sun-turn{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sun-motif .rot{ animation:none; } }
/* ---------- Cartes offres / familles ---------- */
.card{
border:1px solid var(--gold-line); background:var(--ivory-2);
padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.8rem;
transition:border-color .25s, background .25s, transform .25s;
min-width:0;
}
a.card{ text-decoration:none; color:inherit; }
a.card:hover{ border-color:var(--gold); background:#fff; transform:translateY(-2px); }
/* min-width:0 (ci-dessus) : par défaut, un élément flex/grid ne rétrécit jamais sous la largeur de son
contenu le plus large (min-width:auto implicite) — sans ça, la colonne "Accompagnements" du bloc
ci-dessous ne pouvait pas être ramenée à la même largeur que les 3 autres. overflow-wrap : permet au
mot "Accompagnements" (le plus long des 4 titres, non sécable) de passer à la ligne plutôt que de
déborder, une fois sa colonne alignée sur celle des 3 autres. */
.card h3{ font-size:1.3rem; overflow-wrap:break-word; }
.card .meta{
font-family:var(--util); font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--accent); font-variant-numeric:tabular-nums;
}
.card p{ font-size:.98rem; color:var(--ink-soft); }
.card .more{
margin-top:auto; padding-top:.4rem; font-family:var(--util); font-size:.74rem; font-weight:700;
letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.card .card-media{ margin:-1.6rem -1.5rem .4rem; aspect-ratio:16/10; overflow:hidden; background:var(--parchment-2); }
.card .card-media img{ width:100%; height:100%; object-fit:cover; }
/* 2026-09-29 (round 5, tablette réelle) : "aspect-ratio" (Chrome 88+) est absent de Chrome 81 —
sans lui, .card-media n'a plus aucune hauteur définie et se met à la hauteur naturelle de CHAQUE
image (d'où les 4 cartes "Mes Offres" mesurées à des hauteurs différentes : 290/258/516/258px au
lieu d'être identiques). Repli via l'ancienne technique "padding-top en %" (universellement
supportée), appliqué UNIQUEMENT si aspect-ratio n'est pas reconnu par le navigateur : reproduit le
même ratio 16/10 = 62.5% sans toucher au rendu des navigateurs modernes (mobile/desktop inchangés). */
@supports not (aspect-ratio:16/10){
.card .card-media{ position:relative; height:0; padding-top:62.5%; }
.card .card-media img{ position:absolute; top:0; left:0; right:0; bottom:0; }
}
.grid{ display:grid; gap:1.4rem; }
@media (min-width:680px){ .grid.two{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .grid.three{ grid-template-columns:repeat(3,1fr); } }
/* 2026-09-29 (round 6, retour tablette réelle, "Accompagnement" FR paysage) : chaque piste "1fr" d'une
grille CSS a un minimum implicite "auto" (= la largeur du contenu le plus large qu'elle contient) AVANT
la répartition de l'espace libre -- ce n'est PAS un problème de compatibilité Chrome 81, ça se reproduit
à l'identique dans un navigateur totalement moderne (vérifié). Cause exacte : "Accompagnements" est un
mot plus long, non coupable, que les 3 autres titres de carte -- sa colonne s'élargissait donc plus que
les 3 autres (264px vs 231px, mesuré à 1280px). Invisible en portrait (grille 2 colonnes, un autre
appariement de cartes par ligne) mais visible en paysage FR (grille 4 colonnes, les 4 cartes se
confrontent sur la même ligne). "minmax(0,1fr)" supprime ce minimum implicite : les 4 colonnes
deviennent alors strictement égales, quel que soit le texte -- comportement standard, aucune
dépendance à une fonctionnalité récente, donc strictement identique sur Chrome 81. */
@media (min-width:680px){ .grid.four{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1160px){ .grid.four{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.price{ font-family:var(--display); font-size:1.7rem; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1; }
/* ============================================================
Cartouche tarifaire — grammaire visuelle commune aux 3 programmes
(Graine de Magicien / Seed of a Magician, ATOUT, La Voie Royale)
2026-09-19, demande Aliette : un système reconnaissable d'un programme
à l'autre (cartouche compact, fond ivoire conservé, aucun aplat, liseré
fin, angles légèrement arrondis, jamais l'effet bouton/bloc commercial),
tout en respectant la couleur d'identité propre à chaque programme (via
border-color défini par thème, cf. plus bas). Classe générique, non
scopée à un thème : réutilisable telle quelle partout où un prix a
besoin de ce traitement. */
.price-cartouche{
display:inline-block;
margin-left:auto; margin-right:auto; margin-inline:auto;
padding:.6rem 1.9rem;
border:1.5px solid currentColor;
border-radius:14px;
background:none;
}
/* 4e passe (2026-09-19, diagnostic) : .price-cartouche est display:inline-block, donc il NE fusionne
jamais son margin-top avec le margin-bottom de l'image au-dessus (les marges ne se combinent qu'entre
boîtes de bloc adjacentes) — les deux s'ADDITIONNAIENT. Or `.price-cartouche` est un enfant direct de
`.prose`, donc la règle générale `.prose > * + *{margin-top:1.15rem}` (plus haut dans ce fichier) lui
appliquait AUSSI un margin-top de 1.15rem, en plus du margin-bottom propre à chaque juste avant
(0,5–1rem selon les passes précédentes) : le gap réellement visible = les DEUX cumulés, jamais réduit
qu'à moitié en ne touchant que l'image. On neutralise ici cette marge héritée pour que l'écart
illustration -> prix soit intégralement piloté par le margin-bottom de chaque (source unique). */
.price-cartouche{ margin-top:0; }
.price-cartouche .price{ margin:0; }
/* Variante pour un cartouche à plusieurs lignes (prix + paliers), utilisée
sur La Voie Royale : mêmes principes (liseré fin, angles arrondis,
aucun aplat), padding vertical adapté au contenu multi-lignes. */
.price-cartouche--tiers{
padding:1.1rem 1.9rem 1.25rem;
text-align:center;
}
.price-cartouche--tiers .price{ margin-bottom:.55rem; }
.price-cartouche--tiers .tiers-lead{ margin:0 0 .35rem; font-size:.85rem; color:var(--ink-soft); }
.price-cartouche--tiers .tiers-grid{ width:max-content; margin-left:auto; margin-right:auto; margin-inline:auto; }
/* ------------------------------------------------------------------
Grammaire tarifaire — rapports d'espacement communs (2026-09-19, 2e passe
Aliette : la composition de Graine de Magicien jugée trop serrée sert de
référence CORRIGÉE pour les 3 pages). Séquence commune : illustration ->
petite respiration (portée par le margin-bottom propre à chaque ,
pas ici) -> cartouche -> RESPIRATION NETTEMENT PLUS IMPORTANTE ->
catchphrase -> respiration -> CTA. Universel (non scopé par thème) :
Graine, ATOUT et La Voie Royale ont tous la même structure "cartouche
tarifaire immédiatement suivi du h2 de catchphrase". Exception ATOUT
(cf. override juste en dessous) : son h2 est suivi d'une petite phrase
et non directement du CTA.
3e passe (2026-09-19, chiffrée) : Aliette juge le rendu encore trop étiré
verticalement dans l'ensemble — cette respiration PRIX -> CATCHPHRASE est
la seule des trois à ne pas être réduite : légère AUGMENTATION demandée
ici (le gap illustration -> prix est lui réduit de moitié, cf. chaque
+ `.band--price`/`.price-diamond` plus bas).
5e passe (2026-09-19, diagnostic desktop — nouvelle cause trouvée) : après la 4e passe, le margin-
bottom CSS de chaque était identique (.75rem) sur les 3 pages et Graine de Magicien servait de
bonne référence visuelle — mais ATOUT et La Voie Royale restaient visuellement plus espacés. Cause :
chaque PNG contient sa PROPRE marge transparente intégrée sous le dessin (avant le bord réel de
l'image) et cette marge diffère fortement d'une image à l'autre — mesurée par script sur le canal
alpha : ~12% de la hauteur de l'image pour graine-2.png (référence), contre ~21,5% pour
new-atout-2.png et ~22% pour voie-royale-3.png. Le même margin-bottom CSS produisait donc un espace
RÉELLEMENT VISIBLE bien plus grand pour ces deux images, même si le gap mesuré dans le DOM était
identique. Fix : le margin-bottom de l'image (ou du diamant) est désormais NÉGATIF sur ATOUT et La
Voie Royale, calculé pour compenser précisément cette marge transparente interne au fichier image et
aligner l'espace visuel réel sur celui de Graine de Magicien (cf. chaque dans le HTML). Graine
de Magicien n'est pas touchée : son PNG est déjà rogné au plus près du dessin, d'où sa valeur de
référence (.75rem) qui reste inchangée. */
.price-cartouche + h2{
margin-top:clamp(2.75rem,6.5vw,3.75rem);
margin-bottom:clamp(2rem,5vw,3rem);
}
/* ATOUT (2026-09-19) : le h2 catchphrase "TON PLUS PRÉCIEUX ATOUT, C'EST
TOI" est suivi de la petite phrase ("Prêt.e à miser...") et non du CTA
— on conserve donc ici l'espacement d'origine (rythme standard
.prose > * + *, cf. plus haut) au lieu de la grande respiration
générique ci-dessus, qui est reportée plus bas sur .lede-inline
(juste avant le CTA). */
body[data-theme="atout"] .price-cartouche + h2{ margin-bottom:1.15rem; }
/* ATOUT, cartouche tarifaire (2026-09-19) : les deux courtes phrases
("Prêt.e à miser là-dessus ?" / "Tu as les cartes en main …", texte
inchangé) passent sur une seule ligne sur desktop grâce à flex-wrap —
simple ajustement de mise en page, aucune réécriture ; elles repassent
naturellement sur deux lignes si la largeur disponible est trop étroite
(mobile). Porte aussi la respiration avant le CTA (cf. commentaire
ci-dessus).
2026-09-29 (retour tablette réelle, round 3) : Aliette signale un espacement incohérent entre les
deux phrases sur sa vraie tablette — beaucoup trop d'espace vertical en portrait, "Tu" quasi collé
au "?" en paysage. Cause trouvée : l'espacement reposait entièrement sur "column-gap"/"row-gap" sur
un conteneur flex — or "gap" sur un conteneur flex (par opposition à un conteneur grid, qui le
supporte depuis bien plus longtemps) n'est supporté qu'à partir de Chrome 84 (mi-2020), donc
totalement absent de Chrome 81 (tablette réelle) : selon la largeur exacte et le retour à la ligne
ou non des deux phrases sur ce navigateur, le résultat variait entre "aucun espace" (phrases collées)
et un espacement imprévisible, d'où le comportement incohérent et opposé signalé en portrait/paysage.
Corrigé en abandonnant column-gap/row-gap au profit d'un simple margin physique sur chaque
(ci-
dessous) : cette marge fonctionne identiquement sur TOUT navigateur, qu'elle s'applique horizontalement
(phrases sur une seule ligne) ou verticalement (phrases sur deux lignes) — un seul mécanisme cohérent,
plus d'espacement contradictoire selon l'orientation. Testé : rendu final identique à l'ancien sur
navigateur moderne (aucun changement visuel desktop), texte inchangé. */
.lede-inline{
display:flex; flex-wrap:wrap; justify-content:center;
margin-bottom:clamp(2rem,5vw,3rem);
}
/* Specificité (0,3,1) : bat volontairement ".prose.center p{margin-inline:auto}" (0,2,1, cf. plus haut
dans ce fichier) qui, sinon, s'applique aussi à ces
(ATOUT est en "shell mid prose center") — un
margin:auto sur des enfants flex les pousse chacun aux extrémités de la ligne au lieu de les garder
groupés au centre. Sans ce fix, les deux phrases se retrouvent écartées aux deux bords au lieu de se
lire comme une seule ligne continue. Marge ci-dessous (et non plus 0) : voir commentaire ci-dessus —
remplace column-gap/row-gap (non supportés en flex sur Chrome 81) par un espacement physique
équivalent (~.4em horizontal quand les 2 phrases sont sur la même ligne, ~.3rem vertical si elles
passent sur 2 lignes), identique sur tout navigateur. */
.prose.center .lede-inline p{ margin:.15rem .2em; margin-inline:.2em; }
/* La Voie Royale (2026-09-19, demande Aliette) : diamant agrandi — classe
dédiée pour ne pas toucher .picto.sm utilisé ailleurs sur la page
(empreintes). N'affecte que la largeur/hauteur de l'image (ratio
conservé) : comme elle ne bouge que vers le bas (le haut reste fixé par
le padding-top de la section, inchangé), le diamant ne remonte pas vers
la section précédente.
4e passe (2026-09-19, diagnostic — BUG TROUVÉ) : les 2 tentatives précédentes (115–195px puis
150–245px) n'ont JAMAIS pris effet à l'affichage. Cause : `.price-diamond` (1 classe, spécificité
0,1,0) et `.picto.sm` (2 classes, 0,2,0, cf. plus bas dans ce fichier) ciblent tous les deux `width`
sur la même image — `.picto.sm` étant plus spécifique, il l'emportait TOUJOURS sur `.price-diamond`,
quel que soit l'ordre des règles dans le fichier. Le diamant est donc resté bloqué à sa toute
première taille (96–170px) pendant les 2 passes précédentes. Fix : le sélecteur inclut maintenant
`.picto.sm` pour égaler puis dépasser cette spécificité, et une échelle nettement plus grande (au-delà
même de .picto.md, 140–240px) pour une différence immédiatement perceptible. */
.picto.sm.price-diamond{ width:clamp(160px,29vw,260px); }
/* ---------- Exergue / citation ---------- */
.quote{ border-left:2px solid var(--accent-orn); padding:.3rem 0 .3rem 1.5rem; max-width:60ch; }
.quote p{ font-style:italic; font-size:1.1rem; line-height:1.75; color:var(--ink); }
.quote cite{
display:block; font-style:normal; margin-top:.85rem; font-family:var(--util); font-size:.76rem;
font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
/* ---------- Témoignages — carrousel "Nocturne dorée" ----------
Round (2026-09-25) : remplacement complet du système précédent (grille de cartes
scroll-snap ivoire + boutons prev/next carrés) par un bandeau sombre unique,
piste par piste, validé par Aliette (direction B des 3 maquettes proposées).
.testi-band et data-carousel restent les points d'accroche existants (cf. règles
de rythme vertical plus bas dans ce fichier, ex. body[data-theme="atout"]…testi-band
et guidebook->testi-band sur la home) : on ne renomme pas ces deux sélecteurs. */
.testi-band{ background:var(--anthracite-gradient); color:var(--ivory-2); }
.testi-stage{ position:relative; }
.testi-quote-mark{
position:absolute; top:-.35rem; left:-.15rem; z-index:0;
font-family:Georgia,"Iowan Old Style",serif; line-height:1; font-size:8.25rem;
color:var(--gold-bright); opacity:.11; user-select:none; pointer-events:none;
}
.testi-content{ position:relative; z-index:1; max-width:42.5rem; }
.testi-band .eyebrow{ color:var(--gold-bright); opacity:.85; }
.testi-track{ position:relative; transition:opacity .4s ease, transform .4s ease; }
.testi-track.is-fading{ opacity:0; transform:translateX(-14px); }
.testi-card{ display:none; margin:0; padding:0; border:0; }
.testi-card.is-active{ display:block; }
.testi-card p{ font-style:italic; font-size:1.12rem; line-height:1.7; margin:0; color:var(--ivory-2); }
.testi-card p + p{ margin-top:.85em; }
.testi-card .who{
display:block; margin-top:1.3rem; font-family:var(--util); font-size:.78rem; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--gold-bright);
}
.testi-controls{ display:flex; align-items:center; gap:.75rem; margin-top:1.65rem; }
.testi-arrow{
flex:0 0 auto; background:none; border:0; margin:0; padding:.5rem;
color:var(--gold-bright); font-size:1.15rem; line-height:1; cursor:pointer; opacity:.55;
transition:opacity .2s ease;
}
.testi-arrow:hover,.testi-arrow:focus-visible{ opacity:1; }
.testi-segments{ display:flex; align-items:center; gap:.45rem; flex:1; min-width:0; overflow:hidden; }
.testi-segments button{
flex:1; height:2px; min-width:1.1rem; padding:0; border:0; margin:0; cursor:pointer;
background:rgba(231,201,131,.28); transition:background .3s ease;
}
.testi-segments button.is-active{ background:var(--gold-bright); }
.testi-band[data-single] .testi-controls{ display:none; }
/* 2026-09-30 (retour Aliette) : premier essai (flex-wrap:wrap, retiré ci-dessus) corrigeait bien le
débordement horizontal, mais produisait 2-3 rangées de pastilles sur mobile et une 2e rangée
quasi pleine ressemblant à un trait horizontal parasite sous les pastilles sur desktop -- pas
acceptable visuellement. Cause exacte : 27 pastilles (home FR+EN) x min-width:1.1rem (17.6px) +
26 espaces x .45rem (7.2px) = ~673px de large minimum, alors que la largeur réellement
disponible pour .testi-segments varie de ~150-250px (mobile, flèches inclues dans le même flex)
à 648px (desktop) -- dépasse dans les deux cas. Fix définitif : classe .testi-many posée en JS
(interactions.ts) uniquement quand il y a plus de 10 témoignages (seuil choisi au-dessus du
maximum observé ailleurs sur le site) -- sur cette seule classe, le plancher min-width des
pastilles est supprimé : elles se partagent alors tout l'espace réellement disponible à parts
égales (flex:1 déjà en place, hérité, inchangé), quel que soit le nombre, garantissant TOUJOURS
une seule ligne, centrée, sans débordement, sur mobile comme desktop. Aucun effet sur les autres
carrousels du site (pas de classe .testi-many posée en dessous de 11 témoignages) : leur
min-width:1.1rem et leur gap:.45rem d'origine, déjà validés, restent strictement inchangés. */
.testi-band.testi-many .testi-segments{ gap:.2rem; }
.testi-band.testi-many .testi-segments button{ min-width:0; }
@media (min-width:680px){
.testi-quote-mark{ font-size:17.5rem; top:-2.9rem; left:-.1rem; }
.testi-controls{ margin-top:2.1rem; }
.testi-arrow{
position:absolute; top:50%; transform:translateY(-50%);
font-size:1.4rem; padding:.65rem; opacity:.5;
}
/* Décalage des flèches hors de la colonne de texte, mais jamais au-delà du
padding disponible du .shell (var(--pad)) : évite tout débordement horizontal
sur les largeurs "tablette" intermédiaires (ex. 680–900px) où --pad se réduit. */
.testi-arrow[data-prev]{ left:calc(-1 * min(3rem, var(--pad) - .25rem)); }
.testi-arrow[data-next]{ right:calc(-1 * min(3rem, var(--pad) - .25rem)); }
.testi-segments{ width:100%; }
}
/* ---------- Pictos & images éditoriales ---------- */
.picto{ display:block; margin-left:auto; margin-right:auto; margin-inline:auto; }
.picto.xs{ width:clamp(64px,12vw,110px); }
.picto.sm{ width:clamp(96px,18vw,170px); }
.picto.md{ width:clamp(140px,26vw,240px); }
.picto.wide{ width:clamp(180px,40vw,340px); }
.picto.xl{ width:clamp(210px,44vw,390px); }
.editorial-img{ margin-top:clamp(1.5rem,4vw,2.5rem); margin-bottom:clamp(1.5rem,4vw,2.5rem); margin-block:clamp(1.5rem,4vw,2.5rem); }
.editorial-img img{ width:100%; border:1px solid var(--gold-line); }
.editorial-img figcaption{ font-family:var(--util); font-size:.78rem; color:var(--ink-faint); margin-top:.5rem; }
/* Variante sans bordure : pour les compositions à fond transparent, où un
liseré rectangulaire dessinerait un cadre visible autour d'un contenu
au contour irrégulier. */
.editorial-img.no-border img{ border:none; }
.diptych{ display:grid; gap:1rem; margin-top:clamp(1.5rem,4vw,2.5rem); margin-bottom:clamp(1.5rem,4vw,2.5rem); margin-block:clamp(1.5rem,4vw,2.5rem); }
@media (min-width:680px){ .diptych{ grid-template-columns:1fr 1fr; align-items:start; } }
.diptych img{ width:100%; border:1px solid var(--gold-line); }
.diptych .di-portrait img{ aspect-ratio:3/4; object-fit:cover; }
/* Variante paysage : pour des photos dont le cadrage d'origine est horizontal (ex. scène/festival) —
évite le recadrage forcé en 3:4 qui coupait le sujet ; on respecte un ratio proche de l'original. */
@media (min-width:680px){ .diptych.diptych--landscape{ grid-template-columns:1fr 1fr; align-items:center; } }
.diptych .di-landscape img{ aspect-ratio:3/2; object-fit:cover; }
/* 2026-09-29 (round 6, propagation des fallbacks tablette validés) : même cause/solution que
.card-media (cf. plus haut) -- aspect-ratio absent de Chrome 81. Repli "padding-top en %" sur le
conteneur (.di-portrait/.di-landscape), image en position absolue par-dessus. */
@supports not (aspect-ratio:3/4){
.diptych .di-portrait{ position:relative; height:0; padding-top:133.33%; overflow:hidden; }
.diptych .di-portrait img{ position:absolute; top:0; left:0; right:0; bottom:0; }
}
@supports not (aspect-ratio:3/2){
.diptych .di-landscape{ position:relative; height:0; padding-top:66.67%; overflow:hidden; }
.diptych .di-landscape img{ position:absolute; top:0; left:0; right:0; bottom:0; }
}
/* ---------- Frise ---------- */
.timeline{ border-left:1px solid var(--gold-line); padding-left:1.6rem; margin-left:.3rem; display:flex; flex-direction:column; gap:1.7rem; }
.timeline .t-item{ position:relative; }
.timeline .t-item::before{
content:""; position:absolute; left:calc(-1.6rem - 4.5px); top:.55em; width:8px; height:8px;
border-radius:50%; background:var(--accent-orn); box-shadow:0 0 0 4px var(--ivory);
}
.timeline .t-year{ font-family:var(--display); font-size:1rem; color:var(--accent); letter-spacing:.05em; display:block; margin-bottom:.25rem; }
/* ---------- Étiquettes ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips span{ font-family:var(--util); font-size:.84rem; color:var(--ink-soft); border:1px solid var(--gold-line); padding:.4rem .8rem; line-height:1.3; }
.chips span i{ font-style:normal; color:var(--accent); }
.badge{
display:inline-flex; align-items:center; gap:.4rem; font-family:var(--util); font-size:.72rem;
font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
border:1px solid var(--gold-line); padding:.3rem .65rem;
}
.badge--fr{ color:var(--sage-deep); border-color:rgba(88,104,75,.4); }
/* Test : léger encadré doré autour d'une liste "Tu repars avec / You leave with" — même
vocabulaire visuel que .testi-card/.resource-card (filet gold-line + fond ivory-2),
volontairement discret.
Bug trouvé en vérifiant : `.prose ul{padding:0}` (specificité 0,1,1) passait après
`.offer-included{padding:...}` (0,1,0) dans la cascade — le padding n'était donc JAMAIS
réellement appliqué, d'où l'impression persistante que les tirets touchent la bordure.
Sélecteur renforcé (0,2,0) pour que le padding s'applique bel et bien. */
.offer-row .offer-included{
border:1px solid var(--gold-line);
background:var(--ivory-2);
padding:1.4rem 1.6rem 1.4rem 2.2rem;
}
/* Puce étoile ✦ (cohérence avec l'encadré "À la carte" d'Accompagnements/Coaching) à la place
du petit tiret générique de .prose ul li::before — remplace uniquement content/dimensions/couleur,
la position (left/top) et le padding-left du
restent ceux de la règle générique. Couleur
reprise de .rule-orn/.orn-star (--accent-orn), pensée pour un fond clair comme celui-ci. */
/* Sélecteur renforcé (mêmes deux classes que le fix de padding ci-dessus) : .prose ul li::before
(0,1,3) est sinon plus spécifique que .offer-included li::before (0,1,2) et gagnait la cascade. */
.offer-row .offer-included li::before{
content:"✦"; width:auto; height:auto; background:none;
color:var(--accent-orn); font-size:.72em; top:.2em;
}
/* ---------- Modules ATOUT (encadré blanc + bordure dorée) ---------- */
.module-box{ border:2px solid var(--gold); background:#fff; padding:clamp(1.4rem,4vw,2.5rem); }
.module-grid{ display:grid; gap:1.5rem 1.75rem; }
@media (min-width:680px){ .module-grid{ grid-template-columns:1fr 1fr; } }
.module{ display:flex; flex-direction:column; gap:.7rem; }
/* 2026-09-17 (Aliette, round 3) : illustration centrée horizontalement au-dessus de sa colonne de texte
(qui reste alignée à gauche) — les 5 visuels partagent le même ratio natif, donc à max-width égal ils
rendent tous à la même hauteur ; sans margin-inline:auto, l'image (plus étroite que la colonne une fois
plafonnée à 190px) restait collée à gauche au lieu d'être centrée. */
.module .m-visual{ width:100%; max-width:190px; background:#fff; margin-left:auto; margin-right:auto; margin-inline:auto; }
@media (min-width:680px){
/* 2026-09-17 (Aliette, round 3) : la "disposition quinconce" (translateY sur les modules 2 & 4,
décision V1 documentée dans PROJECT-STATE.md) est retirée — c'était la cause directe du
désalignement Module 1/Module 2 signalé (Module 2 arrivait au niveau du texte de Module 1).
Les 5 visuels ayant le même ratio natif, une fois affichés à taille égale sans transform, les
lignes image/titre/texte des modules 1↔2 et 3↔4 s'alignent naturellement (grille standard, même
hauteur de ligne). Aucune autre contrainte technique ne justifiait de la conserver. */
.module:nth-child(5){ grid-column:1/-1; max-width:320px; margin-left:auto; margin-right:auto; margin-inline:auto; text-align:center; }
}
.module h4{ font-size:1.05rem; color:var(--noir); }
.module p{ font-size:.95rem; color:var(--ink-soft); }
/* ---------- Étapes numérotées : encadré retiré (2026-09-17, Aliette) ----------
Cette présentation en carte n'avait jamais été validée. Rebelote / Reprends la main / Game Changer
utilisent maintenant le même langage typographique que "D'entrée de jeu" (h2.h-md.h-gold + p, aligné
à gauche, cf. formations-alchimiques/atout.html et en/alchemical-programs/atout.html). .steps/.step/
.step-n n'étaient utilisées que sur cette page et sont donc supprimées plutôt que laissées mortes. */
/* Titres narratifs ATOUT à deux temps ("Rebelote : Tu en as marre...", etc., round 3, 2026-09-17,
Aliette) : la partie après le ":" reste sur la même ligne (pas de saut de ligne forcé) mais légèrement
plus discrète, même famille typographique/couleur (h-gold), pour créer une hiérarchie interne subtile
sans rupture visuelle. */
.h-part2{ font-size:.8em; }
/* Rythme vertical entre les 3 titres narratifs (Rebelote / Reprends la main / Game Changer), à
l'intérieur du même bloc .prose (round 3, 2026-09-17, Aliette — l'espacement précédent, 1.8rem,
était perçu comme insuffisant). Calibré pour égaler visuellement l'écart de référence qu'Aliette a
désigné : la fin du paragraphe "D'entrée de jeu" jusqu'à la bande qui suit, qui vaut 2 × le
padding-block de .band.tight (jusqu'à 6rem en desktop) — cf. .band.tight ci-dessus. */
.narrative-gap{ margin-top:clamp(3.5rem,8vw,6rem); }
/* Séparateurs "étoile seule" (round 3 suite, 2026-09-17, Aliette) : ne concerne QUE les deux
séparateurs entre les blocs 1/2/3 du module-box ATOUT (modules→Zoom, Zoom→WhatsApp) — pas les
ornements du cluster d'intro "Contenu du jeu", ni le .rule-orn générique utilisé sur d'autres
pages (contact.html, etc.), qui reste inchangé. */
.rule-orn--star{ justify-content:center; } /* sans les traits flex:1, l'étoile perd son centrage automatique */
.rule-orn--star::before,
.rule-orn--star::after{ content:none; }
/* Round 27 (2026-09-21) : les 4 séparateurs internes de l'encadré "Contenu du jeu" / "Content"
(avant/après la liste "6 joueurs maximum…", puis entre les 3 modules) utilisaient jusqu'ici
.rule-orn (trait-étoile-trait) ou .rule-orn--star (étoile seule) — Aliette veut désormais la même
séparation sobre (simple trait, sans étoile) déjà validée sur LA VOIE ROYALE / THE ROYAL WAY
(.vr-sober-rule). Classe dédiée ATOUT reprenant exactement la même formule visuelle (dégradé doré
1px) ET la même valeur de margin-block que .rule-orn (clamp(1.3rem,3.5vw,2.2rem)) pour que les
espacements déjà validés autour de chaque séparation restent strictement identiques — seul le
glyphe central disparaît. .rule-orn / .rule-orn--star ne sont pas modifiées (générique utilisé
ailleurs sur le site + risque de régression nul en les laissant inutilisées ici). */
body[data-theme="atout"] .atout-sober-rule{
border:0; height:1px;
background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
margin-block:clamp(1.3rem,3.5vw,2.2rem);
}
/* ---------- Grille 22 arcanes ---------- */
.arcana-grid{ display:grid; gap:1px; background:var(--gold-line); border:1px solid var(--gold-line); grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
.arcana{ background:var(--ivory-2); padding:.85rem .95rem; display:flex; flex-direction:column; gap:.25rem; }
.arcana b{ font-family:var(--display); font-size:.8rem; color:var(--accent); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.arcana span{ font-size:.85rem; color:var(--ink-soft); line-height:1.35; }
/* ---------- FAQ ---------- */
.faq details{ border-bottom:1px solid var(--gold-line); }
.faq summary{
cursor:pointer; list-style:none; padding:1.3rem 2.6rem 1.3rem 0; position:relative;
font-family:var(--display); font-size:clamp(1rem,2vw,1.18rem); color:var(--noir); line-height:1.45;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-deep); }
.faq summary::after{
content:""; position:absolute; right:.35rem; top:1.7rem; width:10px; height:10px;
border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
transform:rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .answer{ padding:0 0 1.6rem; }
.faq .answer > * + *{ margin-top:.9rem; }
.faq .answer p,.faq .answer li{ font-size:.94rem; max-width:64ch; }
/* ---------- Vidéo (placeholder V1) ---------- */
.video-embed{
position:relative; aspect-ratio:16/9; width:100%; background:var(--noir); color:var(--ivory-2);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
border:1px solid var(--gold-line); text-align:center; padding:1.5rem;
}
.video-embed::before{
content:""; width:56px; height:56px; border-radius:50%; border:1.5px solid var(--gold);
background:radial-gradient(circle at 55% 50%, var(--gold) 0 8px, transparent 9px);
-webkit-mask:none;
}
.video-embed .vlabel{ font-family:var(--util); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); }
.video-embed .vhint{ font-family:var(--util); font-size:.8rem; color:var(--ink-faint); }
.video-embed.portrait{ aspect-ratio:9/16; max-width:340px; margin-left:auto; margin-right:auto; margin-inline:auto; }
/* ---------- Vidéo Mux (lecture réelle — remplace le placeholder V1 ci-dessus) ---------- */
.video-embed.is-live{ padding:0; display:block; overflow:hidden; }
.video-embed.is-live::before{ content:none; }
.video-embed.is-live mux-player{ display:block; width:100%; height:100%; }
/* ---------- Guidebook ---------- */
.guidebook-block{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
/* Le surtitre "Guidebook · 2026" est déplacé DANS .prose (1er enfant, juste avant le h2) : comme .guidebook-block est une grille "align-items:center", un élément resté hors de .prose se serait recentré indépendamment du bloc de texte, créant un grand vide au-dessus du h2 sur desktop — repère : dans le hero, le surtitre est du même bloc que le h1, donc les deux se recentrent ensemble. En le mettant dans .prose, le surtitre suit le même mouvement que le h2. On neutralise ensuite la marge générique ".prose h2{margin-top:2.4rem}" pour ne garder que le margin-bottom:1rem du surtitre — exactement le même rythme que hero eyebrow → h1. Scopé à ce bloc uniquement, pas de changement ailleurs sur le site. */
.guidebook-block .prose h2{ margin-top:0; }
@media (min-width:680px){ .guidebook-block{ grid-template-columns:1fr .92fr; } }
/* Mockup à fond transparent : pas de panneau sombre plaqué dessus. */
.guidebook-mockup{ display:flex; align-items:center; justify-content:center; padding:clamp(.5rem,2vw,1.25rem); }
.guidebook-mockup img{ width:100%; max-width:720px; }
/* ---------- Livre (Graine d'Alchimiste) — section Home FR uniquement, aucun équivalent EN ---------- */
.book-block{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
/* Même logique que .guidebook-block : le surtitre reste dans .prose pour se recentrer avec le h2,
on neutralise ensuite la marge générique ".prose h2{margin-top:2.4rem}". */
.book-block .prose h2{ margin-top:0; }
/* 2026-09-18 (retour Aliette, desktop) : colonne visuelle legerement elargie (.92fr -> 1.05fr,
guidebook-block inchange) -- a max-width:780px identique, la couverture Graine d'Alchimiste
paraissait moins presente que celle du Guidebook (bordure vegetale qui mange une partie du
cadre de l'image) ; la colonne plus large lui redonne une echelle comparable. Texte de la
4e de couverture toujours non concerne (lisibilite non requise). */
@media (min-width:680px){ .book-block{ grid-template-columns:1fr 1.05fr; } }
.book-mockup{ display:flex; align-items:center; justify-content:center; padding:clamp(.5rem,2vw,1.25rem); }
.book-mockup img{ width:100%; max-width:780px; }
/* Extrait éditorial (pas une citation attribuée) : italique conservé, sans guillemets ni filet vertical. */
.book-block .book-excerpt{ font-style:italic; font-size:1.1rem; line-height:1.75; color:var(--ink); margin-top:1.15rem; max-width:60ch; }
/* Continuité éditoriale Livre 2026 -> Guidebook 2026 (FR uniquement, les deux sections se suivent sur le même
fond ivoire) : on resserre légèrement le haut du bloc Guidebook pour que les deux publications se lisent
comme une même continuité, sans perdre toute respiration. */
body[data-lang="fr"] .band:has(> .shell.mid > .guidebook-block){ padding-top:clamp(1.75rem,4.5vw,3rem); }
/* Largeur de lecture mobile : même valeur déjà utilisée ailleurs sur le site (hero Ateliers/Formations,
.offer-row .prose, .offer-text-vs-image) pour donner au texte une respiration confortable par
rapport aux bords, plutôt que la seule marge de base du .shell. Visuel non concerné (ne bouge pas). */
@media (max-width:679.98px){
.book-block .prose{ padding-left:.9rem; padding-right:.9rem; padding-inline:.9rem; }
}
/* ---------- Ressources ---------- */
.resource-list{ display:grid; gap:1.25rem; }
.resource-card{
display:grid; grid-template-columns:96px 1fr; gap:1.2rem; align-items:start;
border:1px solid var(--gold-line); background:var(--ivory-2); padding:1.2rem 1.3rem;
text-decoration:none; color:inherit; transition:border-color .2s,background .2s;
}
.resource-card:hover{ border-color:var(--gold); background:#fff; }
@media (min-width:560px){ .resource-card{ grid-template-columns:120px 1fr; } }
.resource-card .thumb{ width:100%; border:1px solid var(--gold-line); background:#fff; }
.resource-card .r-year{ font-family:var(--util); font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--ink-faint); }
.resource-card h3{ font-size:1.15rem; margin:.15rem 0 .35rem; }
.resource-card p{ font-size:.92rem; color:var(--ink-soft); }
.resource-card .r-cta{ font-family:var(--util); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-top:.5rem; display:inline-block; }
/* ---------- Contact direct : recomposition verticale, alignée à gauche (2026-09-11) ----------
Remplace l'ancienne composition horizontale centrée (qui manquait d'un axe visuel clair, retour
d'Aliette). Étoile : même caractère "✦" et même couleur (--accent-orn) que les étoiles de séparation
de la Homepage (cf. .orn-star) — pas un nouveau symbole, juste réutilisé ici en petit picto/bullet.
Espacement intro → bloc contact (2026-09-11, correction) : l'écart visuel réel n'était pas gouverné
par ce margin-top mais par le cumul des padding-block des deux (.band puis .band.tight),
nettement plus grands — d'où l'échec de la 1re tentative (augmenter ce margin-top l'agrandissait).
Corrigé en réduisant ces deux padding via les classes .band--flow-after / .band--flow (voir contact.html),
ce margin-top ne servant plus qu'à la respiration fine entre les deux liens.
2026-09-21 (demande Aliette) : espace au-dessus de WhatsApp augmenté nettement -- Aliette a explicitement
demandé un changement "suffisamment visible pour juger la différence", pas un ajustement de quelques
pixels. .contact-list n'est utilisé que sur la page Contact (FR/EN) : la règle de base peut donc être
augmentée directement, sans avoir besoin de la scoper par thème. */
.contact-list{ display:flex; flex-direction:column; gap:1.1rem; margin-top:clamp(2.5rem,6vw,4rem); }
.contact-row{
display:flex; align-items:baseline; gap:.65rem;
text-decoration:none; color:inherit; transition:opacity .2s;
}
.contact-row:hover{ opacity:.75; }
.contact-row .contact-star{ color:var(--accent-orn); font-size:.9rem; flex:none; }
/* Même famille typographique que le h1 "Contact" (--display), mais à une taille proche du corps de texte
plutôt que celle, bien plus petite, du surtitre .eyebrow utilisé ailleurs sur le site. */
.contact-row b{
font-family:var(--display); font-weight:500; font-size:.95rem; letter-spacing:.04em;
text-transform:uppercase; color:var(--accent);
}
.contact-row span{ font-size:1.05rem; color:var(--noir); word-break:break-word; }
/* ---------- Livre à paraître (masqué par défaut) ---------- */
.book-teaser{ border:1px solid var(--gold-line); background:var(--ivory-2); padding:clamp(1.5rem,4vw,2.5rem); }
/* ---------- WhatsApp flottant ---------- */
.wa-float{
position:fixed; right:1rem; bottom:1rem; z-index:90; width:54px; height:54px; border-radius:50%;
background:#1E8A4F; display:grid; place-items:center; box-shadow:0 10px 28px rgba(0,0,0,.28);
transition:transform .2s, background .2s;
}
.wa-float:hover{ background:#25A65E; transform:scale(1.06); }
.wa-float svg{ width:28px; height:28px; fill:#fff; }
/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--gold-line); background:var(--parchment); margin-top:clamp(3rem,8vw,5.5rem); }
.footer-in{ max-width:var(--shell); margin-left:auto; margin-right:auto; margin-inline:auto; padding:clamp(2.5rem,6vw,4rem) var(--pad) 2.5rem; display:grid; gap:2.25rem; }
@media (min-width:900px){ .footer-in{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer h4{ font-family:var(--util); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.9rem; }
/* Mention "100% en ligne" dans la colonne Offres : texte seul, sans cadre (pas un badge/bouton). */
.footer-online-kicker{
display:block; font-family:var(--util); font-size:.68rem; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--gold-deep); margin:-.55rem 0 .9rem;
}
.site-footer nav{ display:flex; flex-direction:column; gap:.5rem; }
.site-footer nav a{ font-family:var(--util); font-size:.9rem; color:var(--ink-soft); text-decoration:none; }
.site-footer nav a:hover{ color:var(--gold-deep); }
/* Hiérarchie visible : les 3 formations sont des sous-catégories de "Formations Alchimiques"
(retrait + corps réduit + espacement vertical resserré, même logique que .dropdown-panel .child dans le header) */
.site-footer nav a.child{ margin-left:1.1rem; margin-top:-.1rem; font-size:.82rem; }
.site-footer nav a.child + a.child{ margin-top:-.2rem; }
.site-footer .f-sig{ font-family:var(--display); color:var(--gold-deep); letter-spacing:.12em; font-size:.95rem; display:block; margin-bottom:.7rem; }
.site-footer p{ font-size:.92rem; color:var(--ink-soft); max-width:40ch; }
.footer-bottom{ border-top:1px solid var(--gold-line); padding:1.2rem var(--pad); text-align:center; }
.footer-bottom p{ font-family:var(--util); font-size:.78rem; color:var(--ink-faint); max-width:none; }
/* ============================================================
THÈMES PAR PAGE (body[data-theme])
============================================================ */
/* défaut : ivoire + or (déjà les tokens de base) */
/* Formations Alchimiques (mère) : parchemin + panorama, PAS de rouge.
Fond calé sur la teinte réelle du panorama (échantillonnée : champ clair ~#F0D8B4,
bord ~#EFD6B0, lueur centrale plus chaude). Objectif : bords du panorama imperceptibles. */
body[data-theme="formations"]{ background:#F4E4C6; --ink:#3A2E1F; }
body[data-theme="formations"] .site-header{ background:rgba(244,228,198,.94); }
body[data-theme="formations"] .band--ivory2{ background:#FBF1DD; }
body[data-theme="formations"] .band--parchment{ background:#EFDCB8; }
/* Hero Formations Alchimiques (2026-09-18, demande Aliette) : vrai bandeau dégradé, même logique que
ATOUT/Graine (dégradé propre au hero, colonnes resserrées), mais section AUTONOME et distincte du
bandeau panorama qui suit — pas de jonction volontaire entre les deux, chaque section garde son
propre fond. Tons repris dans la palette déjà utilisée sur cette page (ivoire/parchemin/or). */
body[data-theme="formations"] .hero{
background:linear-gradient(135deg, #FBF1DD 0%, #F4E4C6 50%, #E7C983 100%);
padding-block:clamp(1.75rem,4.5vw,2.75rem) clamp(1.5rem,3.5vw,2.25rem);
}
@media (min-width:680px){
body[data-theme="formations"] .hero-in{
grid-template-columns:1fr 1fr;
gap:clamp(1.5rem,4vw,2.5rem);
max-width:54rem;
margin-inline:auto;
}
}
body[data-theme="formations"] .hero-figure{ position:relative; }
body[data-theme="formations"] .hero-figure::before{
content:"";
position:absolute; inset:-16% -6%;
background:radial-gradient(60% 60% at 50% 48%, rgba(255,250,235,.55) 0%, rgba(255,250,235,0) 72%);
z-index:-1;
pointer-events:none;
}
/* Le fichier du symbole a une marge transparente intégrée assez importante (haut/bas) — sans
correction, cette marge invisible agrandit la ligne de la grille et crée un grand vide sous le texte.
On resserre ici via une marge négative sur l'image elle-même (même technique que sur ATOUT), sans
agrandir ni recadrer le fichier. */
body[data-theme="formations"] .hero-figure img{
margin-top:clamp(-6rem,-10vw,-2.75rem);
margin-bottom:clamp(-6.5rem,-11vw,-3rem);
}
/* EN uniquement : sous-titre + badge "French only" + paragraphe explicatif étaient collés (chacun a
margin:0 par défaut) — respiration progressive entre les 3 niveaux, sans gros espace vide. */
body[data-theme="formations"] .hero .sub + p{ margin-top:1.1rem; }
body[data-theme="formations"] .hero .sub + p + p{ margin-top:.9rem; }
/* Transition texte (2026-09-18, test Aliette) : remplace provisoirement l'illustration de l'escalier
entre le hero et les 3 paliers. La règle .panorama-band ci-dessous n'est plus utilisée sur cette page
mais reste en place (rien n'est supprimé tant que ce test n'est pas validé).
2026-09-18 (2e passe) : le fond parchemin est débranché (classe .band--parchment retirée du HTML,
règle CSS ci-dessus conservée intacte pour réversibilité) — le texte repose désormais sur le fond
ivoire par défaut de la page. En conséquence, retouche typographique demandée par Aliette : plus
d'effet « citation » (t1 était en italique, t2 avait des proportions de citation). Le texte fonctionne
maintenant comme un titre/intro au bloc des 3 paliers : t1 traité comme un surtitre (sans-serif,
casse normale, léger tracking, plus de gras — même esprit que .eyebrow) et t2 comme un titre
(serif d'affichage, plus grand, interligne resserré — même esprit que .h-lg/.h-md). Texte et couleurs
inchangés (ink-soft / noir / gold-deep) : seuls famille déjà existante, graisse, taille et espacements
sont retravaillés, comme demandé. */
/* 2026-09-18 (4e passe) : espace hero -> texte de transition agrandi pour retrouver approximativement la
même respiration que celle déjà en place entre "RÉVÈLE ET RÉALISE TON JOYAU" et les 3 images de
paliers (mesurée à ~76px en desktop 1400px, contre 48px avant ce réglage). */
body[data-theme="formations"] .transition-text{
text-align:center;
padding-top:clamp(2.75rem,6vw,4.75rem);
padding-bottom:clamp(1.25rem,3vw,2rem);
}
body[data-theme="formations"] .transition-text .shell{
display:flex; flex-direction:column; gap:.6rem;
}
/* 2026-09-18 (3e passe, demande Aliette) : t1 reprend désormais la même famille que le sous-titre du
hero (.hero .sub, qui n'a pas de font-family propre et hérite donc de --body = Caudex, le serif de
lecture courante du site — pas une nouvelle famille, juste une autre des trois déjà en place).
2026-09-18 (4e passe) : graisse allégée à 400 pour retrouver la même finesse visuelle que ce même
sous-titre (qui n'a pas de font-weight propre et hérite donc du 400 par défaut du corps de texte).
2026-09-18 (8e passe, retour Aliette) : taille legerement augmentee (.95rem -> 1.05rem, desktop
uniquement -- la valeur mobile .78rem, point 4 plus bas, reste inchangee) pour donner plus de
presence/lisibilite dans l'espace disponible sous le hero. Famille, graisse (400, sans gras),
tracking et couleur INCHANGES (deja valides) ; .t2 juste en dessous non touche. */
body[data-theme="formations"] .transition-text .t1{
font-family:var(--body); font-size:1.05rem; font-weight:400; letter-spacing:.03em; color:var(--ink-soft);
}
body[data-theme="formations"] .transition-text .t2{
font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.3;
letter-spacing:.01em; color:var(--noir);
}
body[data-theme="formations"] .transition-text .t2 strong{ color:var(--gold-deep); }
/* 2026-09-18 (8e passe, retour Aliette, EN UNIQUEMENT -- la version FR a exactement le meme
au meme endroit du HTML, structure identique ; scope
body[data-lang="en"] indispensable pour ne pas faire retomber "TROIS PALIERS, UNE SEULE
VOCATION : REVELE ET REALISE TON JOYAU." sur deux lignes en desktop FR -- explicitement
exclu par Aliette : "Ne change pas la grande phrase située dessous") : sur desktop EN,
"Three levels, one mission: Reveal and embody your jewel." retombait sur deux lignes mais
coupait mal ("Reveal and" terminant la 1ere ligne). Le deja
present dans le HTML entre "mission:" et "Reveal..." (utilise par ailleurs pour le mobile,
ligne ~679.98px et en dessous) est reactive ICI, en plus, pour le desktop EN -- verifie a
toutes les largeurs desktop testees (900px a 1920px) : "REVEAL AND EMBODY YOUR JEWEL." tient
toujours proprement sur la 2e ligne sans provoquer de 3e ligne isolee. La tablette
(680-899.98px) n'est pas concernee (non demandee, retour a la ligne naturel du navigateur
laisse inchange). La classe .only-mobile-break elle-meme reste globalement inchangee pour
le reste du site (portee limitee a ce .t2 EN precis). */
@media (min-width:900px){
body[data-lang="en"] .transition-text .t2 .only-mobile-break{ display:inline; }
}
/* La section des 3 paliers suit directement le texte de transition : on resserre son padding-top pour
que les cartes remontent dans l'espace libéré par le bandeau parchemin, sans les coller au texte. */
body[data-theme="formations"] .transition-text + .band{
padding-top:clamp(1.75rem,4vw,2.75rem);
}
/* Carte Palier 3 / La Voie Royale (2026-09-18, test Aliette) : la liste des 4 niveaux (N1 à N4) était
une seule ligne dense qui alourdissait la lecture de la carte. Test demandé, sans cadre ni cartouche :
les 4 niveaux passent sur deux lignes (2 colonnes x 2 lignes), dans une taille plus petite que le
reste du texte de la carte, pour devenir une information secondaire. Aucun montant modifié, aucun
autre contenu touché.
2026-09-18 (4e passe) : la version centrée/étalée ne convenait pas — resserré et aligné à gauche,
sous "4 niveaux :", comme le reste du contenu de la carte. Colonnes à largeur de contenu (et non 1fr
1fr, qui étirait le bloc sur toute la largeur de la carte), avec un filet vertical discret (--gold-line,
déjà utilisé ailleurs comme séparateur fin, jamais comme cadre) entre les deux colonnes. */
body[data-theme="formations"] .card .tiers-lead{ margin-top:-.2rem; }
body[data-theme="formations"] .card .tiers-grid{
display:grid; grid-template-columns:max-content max-content; column-gap:.6rem; row-gap:.2rem;
justify-content:start; justify-items:start; text-align:left;
font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
body[data-theme="formations"] .card .tiers-grid span:nth-child(2n){
padding-left:.75rem; border-left:1px solid var(--gold-line);
}
/* 2026-09-29 (retour tablette réelle) : Aliette demande à garder ce principe compact "badge/étiquette"
(grille 2 colonnes x 2 lignes ci-dessus, déjà en place et non modifiée par largeur d'écran) pour les
4 paliers de La Voie Royale, et que chaque palier ("N1 — 1000 €" etc.) tienne sur une seule ligne, y
compris en portrait tablette. Le test sur ce sandbox ne reproduit pas de retour à la ligne à 800px
(la carte y mesure ~680px de large, largement suffisant pour les deux colonnes ~77px/90px) ; ce
white-space:nowrap est ajouté en renfort structurel pur (aucun effet visuel là où le texte tenait
déjà sur une ligne, donc desktop/paysage inchangés) pour garantir ce comportement quelle que soit la
mesure exacte du texte sur le navigateur réel de la tablette. */
body[data-theme="formations"] .card .tiers-grid span{ white-space:nowrap; }
/* ============================================================
Formations Alchimiques — MOBILE (2026-09-19, demande Aliette)
Desktop VALIDÉ ci-dessus, non modifié. Deux seuils, même logique que sur ATOUT :
- 899.98px : seuil propre à la composition du hero (là où hero-in repasse en 1 colonne).
- 679.98px : seuil générique du site pour les ajustements fins de lisibilité mobile
(largeur des textes, retours à la ligne volontaires, respiration des cartes).
============================================================ */
/* 1) Hero mobile : composition verticale resserrée (surtitre -> titre -> sous-titre), et espace
au-dessus/en dessous du symbole légèrement réduit (marge négative de compensation légèrement
augmentée). Hauteur du hero non forcée, seule la répartition de l'espace existant change. */
@media (max-width:899.98px){
body[data-theme="formations"] .hero .eyebrow{ margin-bottom:.6rem; }
body[data-theme="formations"] .hero .sub{ margin-top:.75rem; }
body[data-theme="formations"] .hero-in{ gap:clamp(.9rem,3.5vw,1.4rem); }
body[data-theme="formations"] .hero-figure img{
margin-top:clamp(-5rem,-13vw,-3.25rem);
margin-bottom:clamp(-5.5rem,-14vw,-3.75rem);
}
/* 2) EN uniquement (la structure FR n'a pas de
après .sub, donc cette règle ne s'y applique
jamais) : on rouvre volontairement un peu plus d'air avant le badge "French only" — c'est
l'unique espacement de ce groupe qu'Aliette veut AUGMENTER plutôt que resserrer. L'espacement
suivant (badge -> paragraphe explicatif, .sub + p + p) n'est pas touché, comme demandé. */
body[data-theme="formations"] .hero .sub + p{ margin-top:1.6rem; }
}
/* 3) Largeur / marges latérales du hero mobile (2026-09-19, 5e passe) : le contenu du hero (surtitre,
titre, sous-titre, et en EN le paragraphe explicatif sous "French only") restait trop proche des
bords. Reprise EXACTE du cadre de lecture déjà validé sur Ateliers Cartomancie pour son hero mobile
(cf. plus bas dans ce fichier, bloc "Ateliers — passe dédiée MOBILE") : padding-inline ajouté SUR
L'ENFANT (.hero-in > premier div, le bloc de texte), pas sur .hero-in/.shell eux-mêmes qui portent
déjà --pad — les deux marges s'additionnent proprement au lieu de s'écraser. Alignement à gauche
inchangé (pas de centrage : même logique que la page de référence). Le paragraphe explicatif EN
partage désormais le même cadre horizontal que le reste du hero (surtitre/titre/sous-titre/badge),
comme demandé — l'ancien resserrement isolé (max-width + centrage propre) est retiré. */
@media (max-width:679.98px){
body[data-theme="formations"] .hero-in > div:first-child{ padding-inline:.9rem; }
}
/* 3bis) Même logique pour le bloc de transition (déjà centré à toutes les largeurs) : marges
latérales réelles ajoutées sur mobile pour qu'il ne s'étale plus presque bord à bord.
padding-left/right physiques ajoutes en complement de padding-inline (meme valeur) : sans eux,
un navigateur qui ne supporte pas les proprietes logiques ignore purement cette regle et retombe
sur le padding-inline generique de .shell (var(--pad) seul, sans le supplement .85rem) -- meme
correctif deja applique a d'autres endroits du site pour cette raison. */
@media (max-width:679.98px){
body[data-theme="formations"] .transition-text .shell{
padding-left:calc(var(--pad) + .85rem); padding-right:calc(var(--pad) + .85rem);
padding-inline:calc(var(--pad) + .85rem);
}
}
/* 4) Premiere phrase de transition (t1), mobile : le "white-space:nowrap" ci-dessous (ancienne
version, "doit tenir sur une seule ligne") faisait deborder le texte hors de son cadre a .78rem
des que la largeur disponible se reduisait (mesure reelle : 28px de debordement a 375px pour la
version FR, jusqu'a 48px a 320px) -- le texte centre debordant se retrouvait ancre a gauche avec
tout le depassement pousse vers la DROITE, mangeant le padding droit et donnant l'impression d'un
bloc mal centre, collant au bord droit (signale par Aliette).
DERNIER ROUND MOBILE (2026-09-29, retour Aliette apres test reel) : le passage a un retour a la
ligne naturel (round precedent) a fait passer "transformations" seul sur une 2e ligne -- Aliette
veut retrouver la phrase entiere sur UNE SEULE ligne (comme avant), sans retour a la ligne
artificiel, et un centrage reellement correct du bloc par rapport a l'image en dessous. Solution :
taille de police fluide (clamp base sur vw), calculee pour que la phrase complete tienne toujours
sur une seule ligne dans le cadre reellement disponible (var(--pad) + .85rem de chaque cote, cf.
regle .shell juste au-dessus), avec ~3% de marge de securite, du plus petit telephone teste
(320px) jusqu'a ce que la taille de confort habituelle (.82rem) tienne naturellement (~507px) ;
au-dela, plafonnee a .82rem (jamais plus grande que la taille desktop/tablette). white-space:nowrap
reintroduit, mais cette fois sans jamais provoquer de debordement (verifie par mesure reelle
scrollWidth/clientWidth a 320/375/428/679.98px), donc plus jamais d'effet "colle au bord droit". */
@media (max-width:679.98px){
body[data-theme="formations"] .transition-text .t1{
font-size:clamp(.57rem, calc(-.103rem + 3.37vw), 1.05rem);
white-space:nowrap;
}
}
/* 5-6) Deuxième phrase de transition (t2), FR et EN, mobile : trop étalée horizontalement. Taille
réduite + retour à la ligne volontaire après "vocation :" / "mission:" via l'utilitaire générique
.only-mobile-break déjà utilisé ailleurs sur le site (invisible en desktop/tablette, actif ≤679.98px
uniquement) — texte et couleurs strictement inchangés, seul un est
ajouté dans le HTML entre les deux parties de la phrase. */
@media (max-width:679.98px){
body[data-theme="formations"] .transition-text .t2{
font-size:1.375rem;
}
}
/* 7) Cartes des 3 paliers, mobile : respiration ajoutée entre la zone tarifaire (prix, ou prix + le
détail N1-N4 pour La Voie Royale) et le début du texte de présentation qui suit. Le gap uniforme
de .card (flex, gap:.8rem) reste inchangé pour les autres transitions internes de la carte ; seule
cette jonction précise reçoit un espace supplémentaire, sur les 3 cartes de façon identique.
:not(.tiers-lead) exclut la carte Palier 3, où .price est directement suivi de .tiers-lead (le
label "4 niveaux :") et non du texte de présentation — cette carte est couverte par la 2e règle,
qui cible la vraie fin de la zone tarifaire (.tiers-grid + p). */
@media (max-width:679.98px){
body[data-theme="formations"] .card .price + p:not(.tiers-lead){ margin-top:.7rem; }
body[data-theme="formations"] .card .tiers-grid + p{ margin-top:.7rem; }
}
.panorama-band{
padding:clamp(2rem,5.5vw,3.75rem) clamp(1.25rem,5vw,2.5rem);
background:#EFD6B0;
background-image:radial-gradient(120% 90% at 50% 46%, rgba(247,226,178,.9) 0%, rgba(239,214,176,0) 70%);
display:flex;
justify-content:center;
}
/* Image de l'Escalier TRI-omphant : plafonnée en largeur pour ne plus dominer la page (2026-09-18,
demande Aliette) — elle respire désormais dans le bandeau au lieu de s'étirer bord à bord. Proportions
strictement inchangées (aucun recadrage), lisibilité des 3 paliers vérifiée à 1400/820/390px. */
.panorama-band img{ width:100%; max-width:min(880px,100%); display:block; }
/* Graine de Magicien : turquoise réservé */
body[data-theme="graine"]{ --accent:var(--turquoise-deep); --accent-orn:var(--turquoise); }
body[data-theme="graine"] .hero{
background:linear-gradient(180deg,#0C2A33 0%, #123640 46%, #14110F 100%); color:var(--ivory-2);
}
body[data-theme="graine"] .hero h1{ color:#EAF7FB; }
body[data-theme="graine"] .hero .sub{ color:#CDE9F1; }
body[data-theme="graine"] .hero .eyebrow{ color:var(--turquoise); }
body[data-theme="graine"] .price{ color:var(--turquoise-deep); }
/* Cartouche tarifaire (grammaire commune, cf. .price-cartouche plus haut) : liseré turquoise/bleu de
l'identité déjà établie pour Graine de Magicien — même paire de tons que le reste du thème
(--turquoise pour l'ornement/liseré, --turquoise-deep déjà utilisé ci-dessus pour le texte du prix). */
body[data-theme="graine"] .price-cartouche{ border-color:var(--turquoise); }
/* 2026-09-21 (revue) : les deux bandeaux sombres reprennent désormais EXACTEMENT le même dégradé
que le hero (mêmes couleurs, mêmes paliers, même orientation 180deg) — demande explicite
d'Aliette de ne pas garder une interprétation/un dégradé différent pour ces bandeaux. */
body[data-theme="graine"] .band--dark{
background:linear-gradient(180deg,#0C2A33 0%, #123640 46%, #14110F 100%);
}
body[data-theme="graine"] .band--dark h2,
body[data-theme="graine"] .band--dark h3{ color:var(--ivory-2); }
body[data-theme="graine"] .band--dark strong{ color:var(--turquoise); }
body[data-theme="graine"] .band--dark .prose ul li::before{ color:var(--turquoise); }
body[data-theme="graine"] .band--dark .lede{ color:var(--ivory-2); }
/* 2026-09-21 (revue) : deux bandeaux ("Parce qu'il n'y a pas de transformation durable…" et
"Pas de baguette magique…") avaient un espace trop important entre le début du bandeau et le
début du texte, par rapport au bandeau de référence "Sublimer le terrain de ta vie…" (qui n'a
pas de h2, seulement un ul). Cause : la marge générique ".prose h2{margin-top:2.4rem}" (cf. plus
haut) s'ADDITIONNE au padding-top du bandeau quand le h2 est le premier enfant — même bug déjà
corrigé ailleurs sur le site (.guidebook-block .prose h2, #presentation .prose > h2:first-child,
etc.). Neutralisée ici pour les deux titres concernés (et tout futur h2 en tête de bloc sur cette
page), toutes largeurs, pas de media query nécessaire. */
body[data-theme="graine"] .prose > h2:first-child{ margin-top:0; }
/* Mini-cartes : identité propre sans passer par le doré générique des cartes du site */
body[data-theme="graine"] .grid.three .card{ border-color:#1B3A44; }
body[data-theme="graine"] .grid.three .card h3{ color:var(--turquoise-deep); }
/* Autre moitié du fix ci-dessous (`.band--price` padding-top) : réduit spécifiquement le padding-bottom
de LA section des 3 mini-cartes qui précède immédiatement le bloc tarifaire — classe ajoutée dans le
HTML uniquement sur cette occurrence précise de `.band.tight` (pas sur les autres `.band.tight` de la
page, ni ailleurs sur le site). */
body[data-theme="graine"] .band--price-lead{ padding-bottom:clamp(.5rem,1.3vw,.9rem); }
/* 2026-09-21 (revue) : espace entre les textes qui respirent désormais après le 2e bandeau sombre
et le bloc des 3 étiquettes jugé trop important -- la grille elle-même portait une marge-top
inline (2rem) qui s'ADDITIONNAIT au padding-top standard de la section (.band.tight, 28px à
390px), pour un total de 60px. Retirée : le bloc retombe sur le seul padding-top standard de la
section, cohérent avec le rythme des autres transitions de la page. Desktop + mobile (pas de
media query : la demande ne distinguait pas les deux formats pour ce point). */
body[data-theme="graine"] .band--price-lead .grid.three{ margin-top:0; }
/* Cartouche tarifaire (2026-09-19, demande Aliette) : trop d'espace entre les 3 mini-cartes ci-dessus
et l'illustration des mains qui suit (section .band standard, padding-top le plus grand du système).
Remonte légèrement l'illustration en réduisant ce plancher, sans passer à l'échelle ".tight" (garde
une vraie respiration, juste moins généreuse).
2e passe (2026-09-19, Aliette juge la composition "trop serrée") : plancher réduit une nouvelle fois
pour accentuer encore le mouvement "remontée" — les rapports d'espacement PRIX -> CATCHPHRASE -> CTA
sont eux gérés par la règle générique `.price-cartouche + h2` (cf. plus haut), qui sert désormais de
référence corrigée pour ATOUT et La Voie Royale. Structure/typo des mini-cartes non touchées.
3e passe (2026-09-19, chiffrée) : au vu du rendu réel, la composition était en fait TROP étirée dans
l'ensemble — plancher réduit de moitié par rapport à la valeur précédente (demande explicite).
4e passe (2026-09-19, diagnostic — BUG TROUVÉ) : la 3e passe n'a réduit qu'UN SEUL des deux
contributeurs à cet espace. La section PRÉCÉDENTE (les 3 mini-cartes, `.band.tight`) a elle-même un
padding-bottom (`padding-block`, hérité de `.band.tight`, cf. plus haut dans ce fichier) qui s'ADDITIONNE
au padding-top de CETTE section pour former l'espace total visible — je n'avais touché que la moitié
du total. Cf. `.band--price-lead` plus bas : nouvelle classe scoped sur cette section précédente pour
réduire spécifiquement SON padding-bottom, sans toucher `.band.tight` globalement (utilisé ailleurs
sur le site). Les deux valeurs ci-dessous sont pensées ensemble pour amener le total réel à environ la
moitié de ce qu'il était après la 3e passe. */
body[data-theme="graine"] .band--price{ padding-top:clamp(.5rem,1.3vw,.9rem); }
/* 2026-09-21 (round 18, point 6) : reprend en CSS la valeur qui vivait jusqu'ici en style inline dans
le HTML (margin-bottom:.75rem sur l'image mains->prix) — un inline gagne toujours sur une règle de
feuille de style (même bug qu'aux rounds 16/17), ce qui aurait empêché tout override mobile
ci-dessous de s'appliquer. Valeur desktop inchangée (.75rem, non concernée par ce point, mobile
uniquement) ; l'override mobile (plus bas dans ce fichier) la réduit spécifiquement. */
body[data-theme="graine"] .band--price img.picto.md{ margin-bottom:.75rem; }
/* 2026-09-21 (round 17, point 1) : DESKTOP — espace entre les textes sortis du 2e bandeau et le bloc
des 3 étiquettes jugé encore trop important. Diagnostic : le round 16 avait retiré la marge-top de
la grille via CSS (`.band--price-lead .grid.three{margin-top:0}` ci-dessus) mais le `
` du HTML portait ENCORE un style inline `margin-top:2rem` — un style inline gagne toujours
sur une règle de feuille de style, donc cette marge de 32px n'avait en réalité JAMAIS été retirée
visuellement (bug non détecté au round 16). Corrigé ici en retirant l'inline du HTML (FR + EN) : la
règle CSS s'applique enfin. Combiné à une réduction ciblée du padding-top de la section, l'espace
total (padding-bottom section précédente 48px + padding-top ci-dessous + marge grille désormais
réellement à 0) passe de 128px à ~86px, soit la réduction d'environ un tiers demandée. */
@media (min-width:900px){
body[data-theme="graine"] .band--price-lead{ padding-top:1.05rem; }
}
/* 2026-09-21 (round 19, point 1) : DESKTOP — positionnement des 3 étiquettes désormais VALIDÉ (non
touché ci-dessus). Aliette demande un peu plus de respiration entre la fin du bandeau sombre
("Pas de baguette magique...") et la phrase "Tu as tant à OFFRIR AU MONDE !" qui la précède — SANS
déplacer les étiquettes. On redistribue donc l'espace À L'INTÉRIEUR de la section qui porte ces 2
paragraphes (padding-top augmenté de +16px, padding-bottom réduit d'autant, total inchangé à 96px
-> les étiquettes restent exactement à la même position absolue). Sélectionne précisément cette
section via :has(+ .band--price-lead) (celle immédiatement suivie du bloc des 3 étiquettes) — ne
touche à aucune autre section de la page. FR + EN (sélecteur non scindé par langue). */
@media (min-width:900px){
body[data-theme="graine"] section.band.tight:has(+ .band--price-lead){
padding-top:4rem;
padding-bottom:2rem;
}
}
/* 2026-09-29 (retour tablette réelle, round 2 puis round 3) : hero FR UNIQUEMENT, tablette portrait
réelle (680-899.98px) — Aliette valide que le texte ne touche plus l'illustration (correctif
round 1) mais le sous-titre tombe sur 4 lignes. Round 2 : reformulation testée sur 3 lignes, mais
Aliette signale ensuite que des mots du texte d'origine ont été supprimés ("pour reprendre", "et y
faire") — ERREUR CORRIGÉE au round 3. Le texte affiché ici est désormais EXACTEMENT la phrase
complète confirmée par Aliette au round 3 (aucun mot ajouté/retiré/reformulé par rapport à ce
qu'elle a donné) : "Œuvrer à l'intérieur pour reprendre ton pouvoir à l'extérieur et y faire germer
la magie.", simplement répartie sur 3 lignes (uniquement des , aucune modification de mots) :
"Œuvrer à l'intérieur pour reprendre" / "ton pouvoir à l'extérieur et y faire" / "germer la magie.".
2026-09-29 (round 4) : faute de frappe corrigée — "Œuvre" (impératif) remplacé par "Œuvrer"
(infinitif), seul mot concerné, conformément au texte exact redonné par Aliette ; les 3 lignes et le
reste du texte restent inchangés (toujours 3 lignes vérifiées, aucun débordement).
Portée strictement limitée au FR portrait tablette : EN portrait (déjà correct, non concerné,
sélecteur data-lang="fr"), paysage réel 1280px (déjà validé, hors plage 680-899.98px) et
desktop/mobile (hors plage) gardent le texte original inchangé ("Œuvrer à l'intérieur pour
reprendre ton pouvoir à l'extérieur, et y faire germer l'âme-agit."). Deux
distincts dans le HTML (.hero-sub-default = texte original desktop/mobile/paysage/EN,
.hero-sub-tablet-fr = texte ci-dessus avec ses propres ) ; bascule par display:none/block
ci-dessous, sans toucher à la taille de police (clamp() générique du site inchangé — vérifié : les
3 lignes tiennent dans la colonne de texte à 800px sans débordement ni retour à la ligne
supplémentaire) ni au nudge vertical de l'illustration (.hero-figure margin-top ci-dessous,
inchangé). */
body[data-theme="graine"][data-lang="fr"] .hero-sub-tablet-fr{ display:none; }
@media (min-width:680px) and (max-width:899.98px){
body[data-theme="graine"][data-lang="fr"] .hero-sub-default{ display:none; }
body[data-theme="graine"][data-lang="fr"] .hero-sub-tablet-fr{ display:block; }
}
/* 2026-09-21 (round 18, point 2 ; round 19, point 2 ; round 20, point 1) : hero desktop FR UNIQUEMENT —
sous-titre forcé sur 2 lignes ("...ton pouvoir" / "à l'extérieur, et y faire germer l'âme-agit.").
Rounds 18/19 : approche par max-width (24rem puis 26rem) — fonctionnait ici (testé 680-1200px,
plusieurs polices de repli, Range.getClientRects()) mais Aliette confirme, photo de son écran à
l'appui, que "pouvoir" reste isolé sur sa machine malgré rafraîchissement forcé confirmé. Cause
exacte non reproductible (résiste au changement de police, de largeur, de zoom testés ici) — plutôt
que de continuer à deviner un seuil numérique, on élimine la variable : le premier segment de texte
("...ton pouvoir", jusqu'au ) est enveloppé dans un span dédié (.hero-sub-line1, cf. HTML) mis en
white-space:nowrap sur cette même plage desktop — il ne peut donc plus JAMAIS se briser en deux
lignes, quelle que soit la largeur, la police ou le rendu exact. Résultat garanti par construction,
plus par ajustement empirique d'un seuil. Vérifié : le span ne déborde son conteneur à aucune largeur
entre 680 et 1440px. Texte inchangé (aucun mot ajouté/retiré/modifié), EN non concerné (sélecteur
data-lang="fr"), mobile (≤679.98px) non concerné (le lui-même reste masqué par
.only-desktop-break, et le span repasse en white-space normal).
2026-09-29 (retour tablette réelle) : Aliette signale sur sa vraie tablette (portrait 800px) le
texte du hero trop proche de l'illustration. Diagnostic : le récent élargissement de --pad sur la
plage 680-1290px (cf. règle .shell plus haut, ajoutée depuis la vérification "680 à 1440px" ci-
dessus) a réduit d'autant la largeur de la colonne de texte à 800px — le span nowrap, jusque-là
sans marge, déborde désormais réellement de sa colonne à cette largeur précise (mesuré : ~361px de
texte pour une colonne de ~336px), débordement qui grignote le vide avant l'illustration. Seuil
remonté ici de 680px à 900px (même convention tablette 680-899.98 / desktop ≥900 que le reste du
fichier) : le nowrap ne s'applique plus qu'à partir du désktop réel, où la colonne est large. La
tablette (680-899.98px, dont le portrait réel 800px) récupère un retour à la ligne dédié et propre
(cf. .only-tablet-break plus haut + ajouté dans le HTML) au lieu de reposer sur ce nowrap
devenu trop étroit pour elle. Paysage réel (1280px) reste dans la plage ≥900px, comportement
desktop inchangé (vérifié : aucun débordement à 1280px, ni à 1000px+ où la police clamp() atteint
déjà son maximum). */
@media (min-width:900px){
body[data-theme="graine"][data-lang="fr"] .hero-sub-line1{ white-space:nowrap; }
}
/* 2026-09-29 (retour tablette réelle) : sur la même largeur tablette (680-899.98px), Aliette demande
aussi un très léger repositionnement vertical de l'illustration pour mieux la centrer avec le titre
"Graine de Magicien" — pas un redimensionnement, juste un décalage vertical mesuré. Constat :
.hero-in centre chaque colonne de grille sur l'axe de la ligne (align-items:center) — l'illustration
est donc déjà centrée sur le bloc de texte ENTIER (surtitre + titre + sous-titre), mais ce bloc a
plus de hauteur SOUS le titre (sous-titre, 2-3 lignes) qu'AU-DESSUS (surtitre, 1 ligne) : le centre
du bloc tombe donc plus bas que le centre du seul titre, d'où l'écart visuel signalé. Remonté ici de
-1.75rem (mesuré : écart centre-titre/centre-illustration réduit de ~26px à ~12px, sans rogner
l'illustration ni la faire toucher le bord haut du bandeau, .hero garde overflow:hidden). Ni la
taille ni la largeur de l'image ne changent. Desktop (≥900px) et mobile (≤679.98px) non concernés —
déjà validés, gardent leurs valeurs existantes (cf. .hero-figure mobile plus bas). */
@media (min-width:680px) and (max-width:899.98px){
body[data-theme="graine"] .hero-figure{ margin-top:-1.75rem; }
}
/* 2026-09-21 (round 17, point 2) : Seed of a Magician (EN) UNIQUEMENT, desktop — très léger décalage
du bloc texte du hero (surtitre/titre/texte) vers la droite, rééquilibrage perceptuel demandé par
Aliette. Version FR non concernée (sélecteur data-lang="en"). Ne touche ni la taille ni la
hiérarchie du texte. */
@media (min-width:900px){
body[data-theme="graine"][data-lang="en"] .hero-in > div:first-child{ padding-left:1.75rem; }
}
/* ATOUT : Œuvre au Blanc — fond ivoire strict + or */
body[data-theme="atout"]{ background:#FCF4E5; --accent:var(--gold-deep); --accent-orn:var(--gold); }
/* Cartouche tarifaire (grammaire commune, cf. .price-cartouche plus haut) : liseré doré, même paire de
tons que le reste du thème ATOUT (--gold pour l'ornement/liseré, --gold-deep pour le texte du prix
via .price{color:var(--accent)} qui vaut déjà --gold-deep ci-dessus, sans override nécessaire). */
body[data-theme="atout"] .price-cartouche{ border-color:var(--gold); }
/* Nouveau cartouche 700€ (2026-09-19, demande Aliette) : placé juste après le bandeau anthracite déjà
validé (padding-top standard de la section finale, inchangé) et avant la catchphrase finale
"TON PLUS PRÉCIEUX ATOUT, C'EST TOI" / "YOUR MOST VALUABLE ATOUT IS YOU".
2e passe (2026-09-19) : les illustrations des cartes passent désormais AU-DESSUS du cartouche (même
grammaire qu'ailleurs sur la page : ILLUSTRATION -> PRIX -> CATCHPHRASE -> CTA) ; le margin-top et le
margin-bottom du h2 qui suit le cartouche sont gérés par la règle générique `.price-cartouche + h2`
et son override atout (cf. plus haut, près de .lede-inline).
3e passe (2026-09-19, chiffrée) : "padding-top standard, inchangé" ci-dessus jugé après coup trop
généreux entre la fin du bandeau sombre et les cartes — plancher réduit de moitié (même logique que
`body[data-theme="graine"] .band--price`), via la même classe générique `.band--price` désormais
ajoutée à cette section dans le HTML.
4e passe (2026-09-19, diagnostic — BUG TROUVÉ, même cause que sur Graine) : la 3e passe n'a réduit
qu'UN SEUL des deux contributeurs à cet espace — le bandeau anthracite précédent a lui-même un
padding-bottom (`.band.tight`) qui s'ADDITIONNE au padding-top de cette section. Cf.
`.band--price-lead` plus bas : nouvelle classe scoped sur CE bandeau précis (celui juste avant le
bloc tarifaire — pas les autres bandeaux sombres de la page) pour réduire spécifiquement son
padding-bottom. */
body[data-theme="atout"] .band--price{ padding-top:clamp(.75rem,1.9vw,1.35rem); }
body[data-theme="atout"] .band--price-lead{ padding-bottom:clamp(.75rem,1.9vw,1.35rem); }
/* ATOUT — hero (2026-09-17, demande d'Aliette) : image trop petite et trop à droite, titre trop à gauche.
Le hero hérite de .shell (max-width:1160px) sans max-width propre à .hero-in : sur desktop large,
les deux colonnes (texte / image) s'étirent jusqu'aux bords, ce qui isole visuellement le titre à
gauche et l'image à droite. On resserre la composition en lui donnant son propre max-width centré,
on égalise le ratio des colonnes et on agrandit l'image. Ne touche à aucun autre thème. */
body[data-theme="atout"] .hero h1{ color:var(--gold-deep); } /* 2026-09-17 (Aliette) : "ATOUT" était en noir (couleur par défaut de .hero h1) */
/* Round 3 suite (2026-09-17, Aliette) : fond du hero — Option B retenue après présentation visuelle
de 2 propositions (A "halo doré sobre" / B "dégradé camaïeu doré"). Dégradé entièrement dans les
tons ivoire/or, jamais de noir — cohérent avec l'identité "Œuvre au Blanc" d'ATOUT. Texte/couleurs
du hero inchangés (déjà lisibles sur ces tons clairs). */
body[data-theme="atout"] .hero{ background:linear-gradient(135deg, #FCF4E5 0%, #F6E6C4 50%, #E9CE95 100%); }
/* Round 3 (2026-09-17, Aliette) : hiérarchie du hero recalée sur la STRUCTURE des autres hero de
formation (Graine de Magicien, La Voie Royale, Ateliers) — h1 sans classe .h-xl (la classe de base
.hero h1 est en réalité plus grande), ajout d'un p.sub (texte déjà validé, repris tel quel de la
carte "Atout" sur la page mère formations-alchimiques.html), image passée de .picto.md à .picto.xl
(comme sur les 3 pages sœurs). Couleurs/identité dorée d'ATOUT inchangées — seule la construction
est alignée. */
body[data-theme="atout"] .hero-figure{ max-width:min(600px,85vw); } /* 2026-09-17 (Aliette) : image encore trop petite — agrandie une 3e fois (était 520px) */
body[data-theme="atout"] .hero-figure img{ max-height:82vh; }
/* Round 3 : Aliette veut l'image plus grande encore que sur Graine (qui sert de référence de
proportions, pas de plafond) — on prolonge l'échelle de .picto.xl (clamp 210–390px) selon la même
logique plutôt que de fixer une valeur arbitraire. */
body[data-theme="atout"] .hero-figure img.picto.xl{ width:clamp(230px,50vw,460px); }
/* Round 5 (2026-09-17, Aliette) : "Play Your Cards Wisely" (EN) — le round précédent avait réglé le
problème d'isolement d'un mot seul (garanti par white-space:nowrap, qui reste en place et qui
FONCTIONNE), mais la taille choisie (1.3rem/desktop, ~1rem/mobile) était trop petite : le lien visuel
avec "Atout" ne se lisait plus. Ici : texte agrandi nettement (desktop : large place disponible dans
la colonne ~376px, donc pas de raison de réduire par prudence excessive), "ATOUT" inchangé, et un
line-height resserré sur le h1 pour que les deux lignes se lisent comme UN SEUL bloc-titre. Les
deux-points après "Atout" sont retirés (demande explicite). */
body[data-theme="atout"] .hero h1{ line-height:1.05; }
body[data-theme="atout"] .hero h1 .h-part2{
display:inline-block;
white-space:nowrap;
letter-spacing:normal;
font-size:1.9rem;
margin-top:.15em;
}
@media (min-width:680px){
body[data-theme="atout"] .hero-in{
grid-template-columns:1fr 1fr;
gap:clamp(1.5rem,4vw,2.5rem);
max-width:54rem;
margin-inline:auto;
}
}
/* Round 5 : espacement du bloc candidature desktop (point 7) — encore un peu de vide au-dessus selon
Aliette malgré le resserrement du round précédent (~106px de respiration en dessous) : resserré
davantage ici, des deux côtés. */
@media (min-width:900px){
body[data-theme="atout"] section.band--flow-after{
padding-top:clamp(.6rem,1.2vw,.9rem);
padding-bottom:clamp(.7rem,1.4vw,1rem);
}
}
/* Round 10 (point 1) : espace ENTRE le bloc candidature et le bandeau sombre "Transforme ton paquet…"
jugé insuffisant par Aliette une fois ce bloc passé en bandeau anthracite. Référence donnée par
Aliette elle-même : l'espacement entre "Conditions de jeu" (fin) et le bloc candidature (début),
soit environ padding-bottom("Conditions de jeu", .band.tight par défaut) + padding-top(candidature).
On augmente ici UNIQUEMENT le padding-bottom du bloc candidature (donc l'espace AVANT le bandeau,
côté clair) pour reproduire ce même rythme — le padding-top du bandeau lui-même (espace interne,
bord du bandeau -> titre) n'est pas touché, comme demandé. Valeur de base (mobile + tablette,
<900px) ci-dessous ; la version desktop (>=900px) est juste au-dessus et reste inchangée pour le
padding-top, seul son padding-bottom est repris plus loin. */
body[data-theme="atout"] section.band--flow-after{
padding-bottom:clamp(2.5rem,6vw,3.1rem);
}
@media (min-width:900px){
body[data-theme="atout"] section.band--flow-after{
padding-bottom:clamp(3.5rem,4.4vw,4rem);
}
}
/* Round 5 (point 6) : la parenthèse explicative "(= Atout in French 😉)" après "Turn your bad hand
into an asset" ne doit jamais se couper en plein milieu ("(=" isolé d'un côté, le reste de l'autre).
Classe dédiée (et non le .h-part2 générique, partagé par des titres plus longs ailleurs sur la page
qui doivent, eux, pouvoir se couper normalement). */
body[data-theme="atout"] .h-part2-nowrap{ white-space:nowrap; }
/* ATOUT — hero MOBILE (≤899.98px, seuil propre à la composition du hero ATOUT). Hero DESKTOP (≥900px
ci-dessus) validé, non modifié. Round 5 (2026-09-17, Aliette) : hauteur totale déjà bonne, ne pas
l'augmenter — seulement mieux répartir l'espace vertical existant : un peu plus de respiration
au-dessus du surtitre (entre le header et l'eyebrow), récupérée en resserrant encore l'espace entre
les badges et l'illustration (marge négative sur .hero-figure déjà en place, légèrement augmentée).
Le fichier de l'illustration a lui-même ~28%/31% de marge transparente haut/bas intégrée (mesuré au
round précédent) — l'image n'est ni agrandie ni recadrée ici, seule sa position change. */
@media (max-width:899.98px){
/* 2026-09-21 (round 17, point 6) : padding-top légèrement augmenté (descend le bloc à partir du
surtitre, header <-> eyebrow) ; padding-bottom inchangé à l'époque.
2026-09-21 (round 19, point 7) : distribution du texte + marges du hero désormais VALIDÉES
(padding-top non touché) ; taille de l'illustration également VALIDÉE (non réduite). Il restait en
revanche trop de vide EN DESSOUS de l'illustration avant la fin du hero (mesuré : ~56px de vide
visible sous le dessin réel, une fois la marge transparente intégrée au PNG prise en compte —
cf. .hero-figure ci-dessous). padding-bottom réduit pour retirer environ un tiers de ce vide
(56px -> ~37px), combiné à une légère augmentation du margin-bottom négatif de l'illustration
(même levier). Résultat vérifié : espace au-dessus/en dessous de l'illustration quasi parfaitement
équilibré (~36px / ~37px) — pas besoin de remonter l'illustration séparément. */
body[data-theme="atout"] .hero{ padding-block:clamp(1.8rem,5.5vw,2.5rem) .25rem; }
body[data-theme="atout"] .hero-in{ gap:clamp(.4rem,1.5vw,.75rem); }
/* 2026-09-21 (round 17, point 6) : cadre de lecture confortable pour le texte du hero (même logique
que Graine/Ateliers : padding-inline additionnel sur le bloc texte, en plus du padding de base
porté par .shell), texte trop proche des bords. */
body[data-theme="atout"] .hero-in > div:first-child{ padding-inline:.9rem; }
body[data-theme="atout"] .hero-figure{
/* 2026-09-21 (round 18, point 8) : distribution du texte VALIDÉE, non touchée — illustration
encore agrandie (320px -> 345px), centrage/proportions/respiration du hero et marges mobiles
conservés. */
max-width:min(345px,66vw);
margin-top:clamp(-4.25rem,-12vw,-2.75rem);
/* round 19, point 7 : légèrement augmenté (voir .hero padding-bottom ci-dessus) pour réduire le
vide sous l'illustration d'environ un tiers. */
margin-bottom:-3.1rem;
}
body[data-theme="atout"] .hero-figure img{ max-height:52vh; }
body[data-theme="atout"] .hero-figure img.picto.xl{ width:clamp(215px,48vw,345px); }
/* 2026-09-21 (round 20, point 2) : ATOUT hero mobile FR UNIQUEMENT — centrage vertical de
l'illustration entre le badge "SUR CANDIDATURE" et le bas du hero. Taille de l'illustration NON
touchée (clamp ci-dessus inchangé) ; hero-figure de la version EN NON touché (valeurs par défaut
ci-dessus, round 19, conservées pour EN). Diagnostic : un centrage basé sur la seule zone
transparente du PNG (haut/bas quasi symétriques, ~28 %/31 %) donne des marges déjà quasi égales
ici (35.6px / 37.4px) — mais le POIDS VISUEL réel du dessin (centre de gravité pondéré par le
canal alpha, mesuré : ~52,4 % de la hauteur du fichier, donc perceptiblement plus bas que le
centre géométrique de sa zone visible à ~48,7 %) n'était, lui, pas centré dans l'espace
disponible — d'où un rendu visuellement décentré malgré des marges de boîte proches. Les valeurs
ci-dessous replacent ce centre de gravité pondéré exactement au milieu de l'espace disponible
(badge -> bas du hero), sans changer la hauteur du hero (vérifié : bas du hero strictement
identique avant/après) ni les marges latérales. */
body[data-theme="atout"][data-lang="fr"] .hero-figure{
margin-top:-3.4875rem;
margin-bottom:-2.5375rem;
}
/* Point 1 : "Play Your Cards Wisely" mobile — agrandi comme en desktop ; nowrap RETIRÉ ici
spécifiquement (Aliette : un retour à la ligne sur 2 lignes est acceptable sur mobile pour garder
une taille élégante, plutôt que de forcer une seule ligne trop petite). */
body[data-theme="atout"] .hero h1 .h-part2{
font-size:clamp(1.35rem,6.5vw,1.6rem);
white-space:normal;
display:block;
margin-top:.1em;
}
}
/* Round 11 : équilibre vertical interne du bandeau "Transforme ton paquet de merde en atout" /
"Turn your bad hand into an asset" (haut/bas autour du titre) — Aliette juge l'espace au-dessus du
titre trop important par rapport à l'espace en dessous du dernier paragraphe. Cause : le h2 hérite
de la marge générique ".prose h2{margin-top:2.4rem}" (ligne ~248), qui s'ajoute au padding-top du
bandeau — alors que les
n'ont pas de marge propre (p{margin:0} générique du site), d'où le
déséquilibre. On neutralise cette marge UNIQUEMENT pour le titre de ce bandeau (même précédent que
".guidebook-block .prose h2{margin-top:0}" plus haut), toutes largeurs — desktop/tablette utilisant
déjà le même padding-block symétrique haut/bas (.band.tight par défaut), la neutralisation seule
suffit à équilibrer. Le complément spécifique mobile (padding-top du bandeau volontairement réduit
par la règle (d) ci-dessous) est traité séparément dans le bloc mobile, point g). Espacements
extérieurs (au-dessus/en dessous du bandeau) et padding-bottom interne non touchés. */
body[data-theme="atout"] .band--dark h2{ margin-top:0; }
/* ATOUT — tablette réelle (2026-09-29, retour tablette Aliette — ROUND 1 puis ROUND 2 après retest).
Desktop (>1290px) et mobile (≤679.98px, déjà réglés ci-dessus/ci-dessous) non concernés par ce bloc.
ROUND 2 (retest réel) : Aliette signale que les 6 points ci-dessous du round 1 (a-f) n'étaient "pas
appliqués ou pas perceptibles" sur la vraie tablette, malgré leur présence dans ce fichier. Cause
trouvée : TOUTES les règles du round 1 ciblaient leurs éléments via ":has()" — pseudo-classe CSS
absente de Chrome 81 (support ajouté seulement en Chrome 105, 2022) — donc silencieusement ignorée
sur la vraie tablette (Lenovo A7600-F, Chrome 81/Android 4.4.2), qui ne voyait donc que les valeurs
par défaut jamais réduites/augmentées. Corrigé en remplaçant chaque ":has()" par une classe ajoutée
directement dans le HTML des deux fichiers atout.html (.has-vsl, .pre-module-box, .has-module-box —
.band--flow-after existait déjà) : cible EXACTEMENT le même élément unique sur tout navigateur, donc
aucun changement visuel sur le desktop/mobile déjà validés — uniquement la réparation du bug tablette.
Lettrage repris de la demande d'Aliette (A-G, round 2) :
A) VSL -> "D'entrée de jeu"/"Right from the start" (= point a du round 1) : portrait tablette
uniquement (680-899.98px), paysage régi par le bloc desktop ≥900px plus bas (corrigé aussi, le
paysage réel à 1280px entre dans ce palier).
B) "Le tout en jouant !"/"...through play" -> encadré "Contenu du jeu" (= point b) : bug :has() +
composantes jamais traitées jusqu'ici (padding-top interne du cadre, marge du titre) ajoutées.
C/D) Filet-étoile (.rule-orn--star) avant/après "2. Zoom" et avant "3. WhatsApp" (= point c) : bug
séparé, "margin-block" (propriété logique) sans équivalent physique combiné — repli en
margin-top/margin-bottom physiques.
E) Fin du cadre "Contenu du jeu" -> "Conditions de jeu" : NOUVEAU point (jamais traité au round 1).
F) Fin du bloc candidature -> bandeau "Transforme ton paquet…" (= point d) : bug :has(), portrait ET
paysage désormais couverts (paysage ≥900px également corrigé plus bas dans ce fichier).
G) Bas du bandeau final (= partie de e) : centrage texte + padding-bottom ne dépendaient PAS de
:has() et s'appliquaient déjà correctement (confirmé par Aliette) — non retouchés ici. */
@media (min-width:680px) and (max-width:899.98px){
body[data-theme="atout"] .has-vsl{ padding-bottom:1.25rem; }
body[data-theme="atout"] .has-vsl + section.band.tight{ padding-top:1.25rem; }
body[data-theme="atout"] .has-vsl + section.band.tight .prose > h2:first-child{ margin-top:1.4rem; }
body[data-theme="atout"] section.band--flow-after{ padding-bottom:3.75rem; }
}
@media (min-width:680px) and (max-width:1290px){
/* b) "Le tout en jouant !"/"All of this... through play" -> encadre "Contenu du jeu" : .pre-module-box
remplace ici le :has() en avant (repli lisible par Chrome 81, meme element cible). */
body[data-theme="atout"] .pre-module-box{ padding-bottom:1.75rem; }
/* 2026-09-29 (retest tablette reelle) : ecart encore juge trop important par Aliette malgre le point
b) ci-dessus - cause identifiee : le :has() de TOUS les points a), b), d) de ce bloc et du bloc
680-899.98px ci-dessus est totalement absent de Chrome 81 (ajoute a Chrome 105, 2022), donc ces
reglages n'ont jamais reellement ete appliques sur la vraie tablette (Lenovo A7600-F, Chrome
81/Android 4.4.2) malgre leur presence dans ce fichier - d'ou le "non applique/non perceptible"
signale au retest. Corrige ci-dessus et ci-dessous par des classes ajoutees directement dans le
HTML (.has-vsl, .pre-module-box, .has-module-box sur les concernees, et .band--flow-after
deja presente sur le bloc candidature) : meme element cible sur TOUT navigateur, donc aucun
changement visuel desktop/mobile deja valides, uniquement la reparation du bug tablette reelle.
Complement ici : l'interieur du cadre "Contenu du jeu" (padding-top du cadre + marge generique du
titre ".prose h2{margin-top:2.4rem}", jamais neutralisee ici contrairement au mobile) grossissait
silencieusement ce meme ecart ; les deux reduits ci-dessous, memes valeurs que leurs equivalents
deja valides ailleurs sur cette page (desktop pour le padding-top du cadre, video/mobile pour la
marge du titre). */
body[data-theme="atout"] .has-module-box{ padding-top:1.625rem; }
body[data-theme="atout"] .module-box .prose > h2:first-child{ margin-top:1.4rem; }
/* c/d) filet-etoile (.rule-orn--star) entre les modules : "margin-block" est une propriete logique,
absente de Chrome 81 comme margin-inline/padding-inline ailleurs sur le site (aucun equivalent
physique combine n'existe) - repli en margin-top/margin-bottom physiques, meme valeur. */
body[data-theme="atout"] .module-box .rule-orn--star{ margin-top:2.6rem; margin-bottom:2.6rem; }
body[data-theme="atout"] .band--price-lead .prose{ text-align:center; }
body[data-theme="atout"] .band--price-lead{ padding-bottom:3rem; }
/* e) fin du cadre "Contenu du jeu" -> "Conditions de jeu" : nouveau point signale au retest, jamais
traite jusqu'ici. Ecart mesure a 96px (48px padding-bottom du cadre + 12px padding-top inline de
"Conditions de jeu", deja reduit a une precedente ronde + 38.4px de marge generique ".prose
h2{margin-top:2.4rem}" jamais neutralisee pour ce titre precis). Reduit aux deux composantes
encore libres (padding-bottom du cadre + marge du titre "Conditions de jeu"), meme logique et
memes valeurs que les autres neutralisations de cette marge generique sur cette page ; le
padding-top inline de la section "Conditions de jeu" (deja a .75rem) n'est pas retouche. */
body[data-theme="atout"] .has-module-box{ padding-bottom:1.75rem; }
body[data-theme="atout"] .has-module-box + section.band.tight .prose > h2:first-child{ margin-top:1.4rem; }
}
/* ATOUT — mobile (≤679.98px, seuil générique du site).
1) Largeur/alignement des blocs de texte narratifs : resserrés + centrés, MÊME LOGIQUE que
.offer-row-accomp .offer-text-vs-image (padding-inline + margin-inline:auto sur les
). Le
sélecteur cible précisément les .shell.mid.prose des sections .band.tight "classiques" — il
EXCLUT explicitement : les bandeaux sombres .band--dark (listes ➢) via :not(.band--dark), ET tout
bloc contenant une liste
via :not(:has(ul)) — ce qui protège le bloc "Conditions de jeu".
Round 4 : marge latérale augmentée (.9rem → 1.3rem), Aliette trouvant le texte encore trop près
des bords malgré le centrage. Couvre aussi, par la même règle, le bloc candidature
(.cta-candidature, shell.mid.prose sans liste) : centré + resserré, cf. point 8.
2) Round 4 (point 4) : respiration latérale des bandeaux sombres (.band--dark), de l'encadré
"Contenu du jeu" (.module-box) et du bloc "Conditions de jeu" (liste ➢ incluse) — AUCUN
centrage ajouté ici, uniquement plus de padding latéral ; leur alignement actuel (gauche) est
conservé tel quel, comme demandé explicitement.
3) Round 4 (point 6) : le titre "Conditions de jeu" / "Game conditions" est centré sur mobile — lui
seul, pas la liste ➢ en dessous qui reste alignée à gauche (couverte par le point 2 ci-dessus).
4) Round 4 (point 8) : bloc candidature mobile — reste centré (aucun changement d'alignement),
largeur resserrée davantage, espace au-dessus et surtout en dessous réduit.
5) Round 4 (point 5) : rythme vertical — resserre 5 transitions ciblées signalées trop grandes,
repérées par leur contenu via :has() (aucune balise ajoutée dans le HTML), sans toucher aux
autres espacements déjà jugés corrects ("Prends comme référence les espacements qui
fonctionnent déjà bien" — ceux-là ne sont pas dans la liste ci-dessous, donc non touchés).
6) Bouton final ("Book a call!") : validé au round précédent, inchangé ici. */
@media (max-width:679.98px){
body[data-theme="atout"] .band.tight:not(.band--dark) .shell.mid.prose:not(:has(ul)){
text-align:center;
padding-inline:calc(var(--pad) + 1.3rem);
}
body[data-theme="atout"] .band.tight:not(.band--dark) .shell.mid.prose:not(:has(ul)) p{
margin-inline:auto;
}
body[data-theme="atout"] .shell.mid.prose.center{ padding-inline:calc(var(--pad) + 1.3rem); }
body[data-theme="atout"] .band--dark .shell.mid{ padding-inline:calc(var(--pad) + 1.1rem); }
body[data-theme="atout"] .module-box{ padding-inline:1.85rem; }
body[data-theme="atout"] .band.tight:not(.band--dark) .shell.mid.prose:has(ul){
padding-inline:calc(var(--pad) + 1.1rem);
}
body[data-theme="atout"] .band.tight:not(.band--dark) .shell.mid.prose:has(ul) h2{
text-align:center;
}
body[data-theme="atout"] .cta-candidature{ padding-inline:calc(var(--pad) + 1.5rem); }
/* a) VSL -> "D'entrée de jeu" / "Right from the start" */
body[data-theme="atout"] section.band.tight:has(.video-embed){ padding-bottom:clamp(.75rem,2vw,1.25rem); }
body[data-theme="atout"] section.band.tight:has(.video-embed) + section.band.tight{ padding-top:clamp(.75rem,2vw,1.25rem); }
/* 2026-09-21 (round 17, point 8) : cet espace restait trop généreux (62px) — même bug h2:first-child
que corrigé sur Graine (round 16) : la marge générique ".prose h2{margin-top:2.4rem}" (38.4px)
n'était pas neutralisée ici et s'additionnait aux deux padding ci-dessus (12+12=24px). Réduite
(pas neutralisée entièrement : Aliette ne demande qu'un quart de moins, pas une suppression) pour
amener le total à ~46px, soit environ un quart de moins. */
body[data-theme="atout"] section.band.tight:has(.video-embed) + section.band.tight .prose > h2:first-child{ margin-top:1.4rem; }
/* b) fin du 2e bandeau sombre ("Application only • free call") -> "Rebelote" / "Here we go again".
Round 9 (2026-09-17, Aliette) : le retour à la ligne ajouté dans "Sur candidature uniquement /
Appel gratuit et sans engagement" (2 lignes désormais) a rendu visible un déséquilibre — le
padding-bottom réduit ici (pour resserrer la transition vers "Rebelote") ne correspondait plus au
padding-top par défaut du bandeau, cassant la respiration interne haut/bas. Le padding-bottom de
CE bandeau est donc retiré (retour au padding-block symétrique par défaut de .band.tight) pour que
l'espace au-dessus et en dessous du texte soit à nouveau équivalent ; le resserrement de la
transition vers "Rebelote" reste assuré par la seule réduction du padding-top de la section
suivante ci-dessous (inchangée). */
body[data-theme="atout"] .band--dark:has(em) + section.band.tight{ padding-top:clamp(1rem,2.5vw,1.5rem); }
/* c) fin de l'encadré "Contenu du jeu" -> "Conditions de jeu" */
body[data-theme="atout"] section.band.tight:has(.module-box){ padding-bottom:clamp(1rem,2.5vw,1.5rem); }
/* 2026-09-21 (round 17, point 9) : "Le tout en jouant !" -> encadré "Contenu du jeu" — espace de 56px
réduit d'environ un quart (padding-top de la section qui contient l'encadré, réduit de 28px à
14px, seul contributeur à ce gap précis — pas de bug h2 ici, le premier enfant de l'encadré est le
module-box lui-même). */
body[data-theme="atout"] section.band.tight:has(.module-box){ padding-top:.875rem; }
/* 2026-09-21 (round 17, point 10) : à l'INTÉRIEUR de l'encadré, espace HAUT (module-box -> titre
"Contenu du jeu") beaucoup trop important (62.78px) par rapport à l'espace BAS pris comme
référence (fin du texte -> bas du cadre, 24.39px, jugé bon) — même bug h2:first-child que Graine :
la marge générique ".prose h2{margin-top:2.4rem}" n'était pas neutralisée ici et s'additionnait au
padding du cadre. Neutralisée : l'espace haut retombe sur le seul padding du cadre (~22px),
désormais très proche de la référence basse. Images internes également réduites légèrement. */
body[data-theme="atout"] .module-box .prose > h2:first-child{ margin-top:0; }
body[data-theme="atout"] .module .m-visual{ max-width:165px; }
/* 2026-09-21 (round 17, point 11) : espace avant "Conditions de jeu" (66.4px) réduit d'environ un
quart — même bug h2:first-child (marge générique non neutralisée pour CE titre précis) ;
padding-bottom du cadre "Contenu du jeu" (c, ci-dessus) et padding-top inline de la section
"Conditions de jeu" (.75rem, HTML) non touchés. */
body[data-theme="atout"] section.band.tight:has(.module-box) + section.band.tight .prose > h2:first-child{ margin-top:1.35rem; }
/* d) fin du bloc candidature -> "Transforme ton paquet…" / "Turn your bad hand…" */
body[data-theme="atout"] section:has(> .shell.mid.cta-candidature) + section.band.tight{ padding-top:clamp(1rem,2.5vw,1.5rem); }
/* e) avant la catchphrase finale "Ton plus précieux atout, c'est toi" / "Your most valuable asset is you" */
body[data-theme="atout"] section.band:not(.tight):not(.testi-band){ padding-top:clamp(1.5rem,4vw,2.25rem); }
/* 2026-09-21 (round 17, point 14) : espace au-dessus de l'illustration des cartes (zone finale)
réduit d'environ un quart par rapport à la règle générique (e) ci-dessus, propre à cette section
précise (.band--price) — ne modifie pas les autres sections concernées par la règle générique. */
body[data-theme="atout"] section.band:not(.tight):not(.testi-band).band--price{ padding-top:1.125rem; }
/* 2026-09-21 (round 17, point 14) : espace entre la catchphrase finale ("Tu as les cartes en main…"
/ "You hold'em cards…") et le CTA augmenté (portait ~32px via le rythme standard .btn-row, cf.
règle générique plus haut dans ce fichier). */
body[data-theme="atout"] .lede-inline + .btn-row{ margin-top:2.4rem; }
/* f) Round 10 (point 2) : titre du bandeau "Transforme ton paquet de merde en atout" centré sur
mobile UNIQUEMENT — exception volontaire demandée par Aliette au traitement habituel (gauche) des
titres de bandeaux sombres sur cette page. Aucun autre bandeau .band--dark de la page n'a de h2,
donc ce sélecteur ne cible que ce titre précis ; desktop/tablette non affectés (hors media query). */
body[data-theme="atout"] .band--dark h2{ text-align:center; }
/* g) Round 11 : équilibre vertical interne du bandeau (haut/bas autour du titre), mobile. La marge
générique ".prose h2{margin-top:2.4rem}" est neutralisée juste au-dessus (règle de base, toutes
largeurs) ; ici on compense le padding-top du bandeau, volontairement réduit sur mobile par la
règle (d) plus haut (transition resserrée depuis le bloc candidature), pour que l'espace HAUT
(padding-top du bandeau, marge du h2 déjà neutralisée) retombe exactement sur l'espace BAS
(padding-bottom du bandeau, inchangé) : calc() reprend exactement les deux clamp() déjà en jeu,
donc reste vrai à toute largeur mobile, pas seulement au point testé. Padding-bottom interne et
espacements extérieurs (au-dessus/en dessous du bandeau) non touchés, comme demandé. */
body[data-theme="atout"] .band--dark h2{ margin-top:calc(1.75rem - clamp(1rem,2.5vw,1.5rem)); }
/* 2026-09-21 (round 17, point 12) : le bandeau "Transforme ton paquet…" manque de respiration
INTERNE (haut 28px / bas 12px, asymétrique) — augmenté légèrement des deux côtés : +8px en haut
(via le h2, en plus du calc() d'équilibre ci-dessus) et le padding-bottom du bandeau porté à 24px
(contre 12px, hérité d'une règle générique `.band--price-lead{padding-bottom:...}` pensée pour un
tout autre espace — desktop, cf. plus haut dans ce fichier — qui rétrécissait aussi ce bandeau
sombre par effet de bord non voulu sur mobile). Bandeau pas excessivement plus haut. */
body[data-theme="atout"] .band--price-lead h2{ margin-top:calc(1.75rem - clamp(1rem,2.5vw,1.5rem) + .5rem); }
/* 2026-09-21 (round 18, point 9) : encore un peu de respiration EN BAS uniquement (fin du texte ->
bord inférieur du bandeau), 24px -> 32px. Haut (h2 ci-dessus), texte, dégradé et hauteur générale
du bandeau non retouchés au-delà de ce +8px bas.
Round 27 (2026-09-21) : encore un léger surcroît, 32px -> 40px (+8px), même levier (padding-bottom
seul) — le haut du bandeau et la position du contenu restent strictement inchangés, seule la
hauteur totale du bandeau augmente légèrement vers le bas. */
body[data-theme="atout"] .band--price-lead{ padding-bottom:2.5rem; }
body[data-theme="atout"] .btn-row{ align-items:center; }
body[data-theme="atout"] .btn-row .btn{ width:auto; min-width:220px; }
}
/* ATOUT — desktop uniquement (≥900px, seuil "desktop" générique du site — la plage tablette
680-899.98px n'est PAS concernée, elle conserve les valeurs par défaut existantes). Round 26
(2026-09-21), 3 ajustements ciblés demandés par Aliette après validation du reste de la page ;
aucun autre espacement de la page n'est touché.
1) VSL -> "D'entrée de jeu" / "Right from the start" : espace mesuré à 134.4px (padding-bottom
48px de la section vidéo + padding-top 48px de la section suivante + marge générique
".prose h2{margin-top:2.4rem}"=38.4px du h2, jamais neutralisée sur desktop jusqu'ici,
contrairement au mobile). Réduit à 70.4px (24+24+22.4), soit -64px = -47,6 % (un peu moins de
la moitié). La valeur du h2 (1.4rem) reprend exactement celle déjà validée sur mobile pour la
même marge. Rien d'autre dans ces deux sections n'est modifié ; le contenu en dessous remonte
naturellement, aucune compensation ajoutée plus bas. */
@media (min-width:900px){
body[data-theme="atout"] .has-vsl{ padding-bottom:1.5rem; }
body[data-theme="atout"] .has-vsl + section.band.tight{ padding-top:1.5rem; }
body[data-theme="atout"] .has-vsl + section.band.tight .prose > h2:first-child{ margin-top:1.4rem; }
/* 2) "...tout en jouant" / "...through play!" -> encadré "Contenu du jeu" / "Content" : espace
mesuré à 48px (= le seul padding-top de la section qui contient l'encadré ; la section
précédente ne contribue rien de mesurable à ce gap précis). Réduit à 26px, soit -22px = -45,8 %
(un peu moins de la moitié). Le contenu et le design de l'encadré lui-même (bordure, padding
interne, titre) ne sont pas touchés — seul l'espace AVANT le cadre est réduit. */
body[data-theme="atout"] .has-module-box{ padding-top:1.625rem; }
/* 3) Bandeau final "Transforme ton paquet…" / "Turn your bad hand…" : espace mesuré entre le bas
du dernier paragraphe et le bord inférieur du bandeau à 21.6px (héritage de la règle générique
.band--price-lead{padding-bottom:clamp(.75rem,1.9vw,1.35rem)} plus haut dans ce fichier).
Augmenté à 36px, soit +14.4px = +66,7 %, pour donner davantage de respiration sous le texte,
sans toucher au texte, aux couleurs, à la typographie, à la structure ni à l'identité graphique
du bandeau. Le mobile (2rem, media query dédiée ci-dessus) et la plage tablette (valeur générique
inchangée) ne sont pas concernés par cette règle, plus spécifique par l'ordre de cascade.
Round 27 (2026-09-21) : encore un léger surcroît demandé, uniquement vers le bas — 36px -> 44px
(+8px). Haut du bandeau et position du contenu non touchés (aucun autre levier modifié). */
body[data-theme="atout"] .band--price-lead{ padding-bottom:2.75rem; }
}
/* GRAINE DE MAGICIEN — mobile (≤679.98px, seuil générique du site), 2026-09-21 (revue). Zone basse
(mains -> prix -> catchphrase -> CTA -> FAQ/WhatsApp) : ATOUT pris comme référence concrète pour
la largeur/le centrage du CTA final, désormais unique sur cette page (le bouton fantôme "Voir la
FAQ" a été retiré, remplacé par le paragraphe FAQ/WhatsApp déjà validé ailleurs sur le site,
repris ici à l'identique). Même traitement qu'Atout : largeur proportionnée au texte plutôt que
pleine largeur (qui serait le comportement par défaut d'un bouton unique dans .btn-row, cf. règle
générique plus bas dans ce fichier). */
@media (max-width:679.98px){
body[data-theme="graine"] .btn-row{ align-items:center; }
body[data-theme="graine"] .btn-row .btn{ width:auto; min-width:220px; }
/* 2026-09-21 (revue) : cadre de lecture mobile trop proche des bords par endroits — reprise du
cadre confortable déjà validé ailleurs sur le site (Ressources/FAQ/Contact, Ateliers Cartomancie :
calc(var(--pad) + .9rem) en plus du padding de base porté par .shell). Concerne toute la page
(contenus courants ET texte du hero), pas une section isolée. */
body[data-theme="graine"] .shell.mid,
body[data-theme="graine"] .shell.narrow{ padding-inline:calc(var(--pad) + .9rem); }
body[data-theme="graine"] .hero-in > div:first-child{ padding-inline:.9rem; }
/* 2026-09-21 (revue) : trop d'espace au-dessus/en dessous de l'illustration du hero — référence
concrète demandée : ATELIERS CARTOMANCIE (seule autre page mobile déjà validée avec une vraie
illustration en hero). Même levier qu'Ateliers : resserrer le gap texte->image de .hero-in
(aucun overlap/margin négatif sur l'image elle-même, taille de l'illustration non touchée). */
/* 2026-09-21 (round 18, point 3) : encore BEAUCOUP trop d'espace au-dessus/en dessous de
l'illustration selon Aliette — réduit encore : gap texte->image .175rem -> .06rem (2.8px -> ~1px,
plus de la moitié du reste) ; padding-bottom du hero 1rem -> .5rem (16px -> 8px, environ moitié).
Taille/format de l'illustration non touchés.
2026-09-21 (round 19, point 3) : le gap CSS texte->image était déjà quasi nul (~1px) — le vide
restant visible autour de l'illustration venait en réalité presque entièrement de la marge
transparente intégrée au FICHIER PNG lui-même (mesuré : ~40% de hauteur transparente en haut,
~38.6% en bas de graine-1.png). Seul levier possible pour réduire ce vide "franchement" comme
demandé : tirer l'illustration vers le haut/bas via margin négatif sur .hero-figure (même
technique déjà validée sur ATOUT), qui mord dans cette marge transparente sans jamais rogner le
dessin visible. Valeurs mesurées empiriquement (Range.getClientRects() sur le texte + bbox réel du
PNG) pour retirer PLUS DE LA MOITIÉ du vide perçu au-dessus (106px -> ~46px, soit -56%) et ENVIRON
LA MOITIÉ en dessous (109px -> ~55px, soit -49%). Taille/format de l'illustration non touchés. */
body[data-theme="graine"] .hero-in{ gap:.06rem; }
body[data-theme="graine"] .hero{ padding-bottom:.5rem; }
body[data-theme="graine"] .hero-figure{ margin-top:-3.75rem; margin-bottom:-3.375rem; }
/* 2026-09-21 (revue) : les 3 étiquettes peuvent être légèrement plus compactes en hauteur --
uniquement l'espace INTERNE entre le texte bleu (h3) et le texte noir (p), pas l'espace ENTRE
les étiquettes (porté par .grid{gap:1.4rem}, non touché ici) ni leur padding externe. */
body[data-theme="graine"] .grid.three .card{ gap:.4rem; }
/* 2026-09-21 (round 18, point 5) : encore un petit resserrement supplémentaire demandé — padding-top
de la section 1.9rem -> 1rem (30.4px -> 16px), total texte->étiquettes 58px -> ~44px. Espacement
ENTRE les 3 étiquettes (.grid{gap:1.4rem} ci-dessus) non concerné. */
body[data-theme="graine"] .band--price-lead{ padding-top:1rem; }
/* 2026-09-21 (round 18, point 4) : espace vidéo -> premier paragraphe suivant (56px) jugé trop
important — référence donnée par Aliette elle-même : le rythme standard de la page (28px, cf.
.band.tight par défaut). Cible légèrement AU-DESSUS de cette référence, pas collé : padding-top
de la section suivant la vidéo réduit à .4rem (6.4px), total ~34px. */
body[data-theme="graine"] section.band.tight:has(.video-embed) + section.band.tight{ padding-top:.4rem; }
/* 2026-09-21 (round 19, point 4) : positionnement des 3 étiquettes désormais VALIDÉ (non touché
ci-dessus). Descend légèrement le bloc des 2 paragraphes ("Tu as tant à OFFRIR AU MONDE !" + "Tu
n'as pas besoin...") qui les précède, SANS déplacer les étiquettes : même logique qu'au point 1
desktop — padding-top de cette section augmenté, padding-bottom réduit d'autant (total inchangé à
56px -> position absolue des étiquettes strictement conservée). Sélectionne précisément cette
section via :has(+ .band--price-lead), ne touche à aucune autre section. */
body[data-theme="graine"] section.band.tight:has(+ .band--price-lead){
padding-top:2.625rem;
padding-bottom:.875rem;
}
/* 2026-09-21 (round 18, point 6) : zone illustration + prix pas assez harmonieuse — illustration
légèrement agrandie (140px -> 165px), bloc prix légèrement descendu (padding-top de la section
8px -> 20px) et rapproché de l'illustration (margin-bottom de l'image 12px -> 6px) pour former un
ensemble plus cohérent. Pas d'illustration immense (+18% seulement).
2026-09-21 (round 19, point 5) : encore trop petite selon Aliette — agrandie une nouvelle fois
(165px -> 200px, +21%), plancher relevé mais plafond desktop (240px) inchangé. Espace au-dessus
(dernière étiquette -> illustration) volontairement non réduit davantage : Aliette autorise
explicitement l'illustration à se rapprocher légèrement de l'étiquette du fait de sa taille
accrue, sans demander de resserrement de padding en plus. */
body[data-theme="graine"] .band--price{ padding-top:1.25rem; }
body[data-theme="graine"] .band--price img.picto.md{ width:clamp(200px,30vw,240px); margin-bottom:.4rem; }
/* 2026-09-21 (round 18, point 7) : bloc final manque encore de respiration — augmente l'espace
CATCHPHRASE -> CTA (2.75rem -> 3.25rem, 44px -> 52px) ET resserre CTA -> FAQ/WhatsApp (rythme
standard 1.15rem/18.4px -> .6rem/9.6px) pour que le bouton et la petite phrase FAQ forment un même
ensemble visuel cohérent, comme demandé. Textes, liens, couleurs et traitement du CTA inchangés. */
body[data-theme="graine"] .price-cartouche + h2{ margin-bottom:3.25rem; }
body[data-theme="graine"] .band--price .btn-row + p{ margin-top:.6rem; }
}
/* 2026-09-30 (point 9 liste Aliette, puis retour tablette Lenovo REELLE point 6) : Graine de
Magicien (FR) + Seed of a Magician (EN) — TABLETTE, portrait ET paysage — espace vidéo (VSL) ->
contenu suivant (les 3 étiquettes) jugé trop important sur cette plage. "PRENDS ATOUT COMME
REFERENCE" (demande explicite, repetee) : cf. bloc ATOUT `.has-vsl` plus haut dans ce fichier, qui
applique deux valeurs, une en portrait (1.25rem, 680-899.98px) et une en paysage/desktop (1.5rem,
>=900px) -- reprises ICI A L'IDENTIQUE (memes valeurs, meme logique de coupure a 900px), au lieu
d'une valeur unique approximative.
2026-09-30 (retour tablette Lenovo REELLE) : cette premiere version ne s'appliquait pas du tout sur
la tablette physique d'Aliette, ni en portrait ni en paysage. Deux causes cumulees : (1) le
selecteur `:has(.video-embed)` est une pseudo-classe CSS absente de Chrome 81 (ajoutee seulement en
Chrome 105, 2022) -- silencieusement ignoree sur la vraie tablette (Lenovo A7600-F, Chrome
81/Android 4.4.2), exactement le meme bug deja identifie et corrige sur ATOUT (cf. commentaire
"ROUND 2" plus haut) ; (2) la limite haute 1159.98px excluait le paysage reel (1280px). Corrige en
reprenant EXACTEMENT la meme solution qu'ATOUT : une classe `.has-vsl` ajoutee directement dans le
HTML de graine-de-magicien.astro et seed-of-a-magician.astro (sur la vidéo, remplace
entierement `:has(.video-embed)` -- meme element cible sur tout navigateur, donc aucun changement
visuel desktop/mobile deja valides) + limite haute portee a 1290px (meme marge de securite que la
reference ATOUT `.pre-module-box`, couvre desormais le paysage reel 1280px). Portee : selecteur non
scinde par langue (`data-theme="graine"` couvre FR et EN, qui partagent ce theme). Desktop reel
(>=1291px -- au-dela de cette borne, jamais touche par ce bloc -- Graine applique son propre
padding par defaut `.band.tight`, deja valide "parfait" par Aliette) volontairement NON concerne.
Mobile (<680px, reglage :has() distinct ci-dessus, non modifie ici) non concerne non plus. */
@media (min-width:680px) and (max-width:899.98px){
body[data-theme="graine"] .has-vsl{ padding-bottom:1.25rem; }
body[data-theme="graine"] .has-vsl + section.band.tight{ padding-top:1.25rem; }
}
@media (min-width:900px) and (max-width:1290px){
body[data-theme="graine"] .has-vsl{ padding-bottom:1.5rem; }
body[data-theme="graine"] .has-vsl + section.band.tight{ padding-top:1.5rem; }
}
/* La Voie Royale : rouge structurel */
body[data-theme="voie-royale"]{ background:var(--ivory); --accent:#7A1A14; --accent-orn:#7A1A14; }
body[data-theme="voie-royale"] .hero{
background:radial-gradient(120% 80% at 50% 0%, #7E1A14 0%, rgba(126,26,20,0) 60%),
linear-gradient(180deg,#61100C 0%, #4B0909 40%, #2A0605 100%);
color:var(--ivory-2);
}
body[data-theme="voie-royale"] .hero h1{ color:#F6E4D8; }
body[data-theme="voie-royale"] .hero .sub{ color:#EBC9BE; }
body[data-theme="voie-royale"] .hero .eyebrow{ color:var(--gold-bright); }
body[data-theme="voie-royale"] .price{ color:#8A2018; }
body[data-theme="voie-royale"] .quote{ border-left-color:#8A2018; }
/* 2026-09-29 (retour tablette réelle) : paragraphe "Aucun raccourci possible…"/"There are no
shortcuts…" (sous "La Voie Royale est unique"/"is unique") signalé décalé à gauche sur tablette,
FR+EN, portrait+paysage — même cause que déjà corrigée ailleurs sur le site (Ateliers Cartomancie) :
son centrage reposait uniquement sur margin-inline:auto en style inline dans le HTML, propriété
logique non supportée par le vieux navigateur de la tablette (Chrome 81) et donc silencieusement
ignorée ; le paragraphe (plus étroit que son conteneur .shell.mid une fois plafonné à 56ch) restait
alors collé au bord gauche. Classe dédiée ajoutée au HTML en remplacement du style inline, repli
physique ajouté ici. */
body[data-theme="voie-royale"] .vr-path-lead{ max-width:56ch; margin-left:auto; margin-right:auto; margin-inline:auto; }
/* Cartouche tarifaire (grammaire commune, cf. .price-cartouche plus haut) : liseré doré initialement
demandé par Aliette pour La Voie Royale (comme ATOUT).
5e passe (2026-09-19, demande Aliette) : revu — le liseré doit être ROUGE, couleur d'identité de
cette page. On reprend ici exactement le même rouge déjà utilisé sur cette page pour le prix et la
citation (#8A2018, cf. `.price` et `.quote` ci-dessus) plutôt que `--accent` (#7A1A14, plus sombre,
réservé aux titres) : le liseré du cartouche encadre ainsi le prix dans SA propre couleur. */
body[data-theme="voie-royale"] .price-cartouche{ border-color:#8A2018; }
/* Grille compacte des 4 niveaux (N1-N4) : reprend EXACTEMENT la logique/les valeurs déjà utilisées sur
la carte "Palier 3" de la page mère des Formations alchimiques (.card .tiers-grid, cf. plus haut dans
ce fichier) — même grille 2 colonnes à largeur de contenu, même filet vertical fin (--gold-line)
entre les colonnes, même échelle typographique secondaire. Redéfinie ici (plutôt que réutilisée via
sélecteur) car ce contexte n'a pas de .card ancêtre ; .price-cartouche--tiers centre le bloc entier
(cf. règle générique plus haut) sans changer l'alignement interne gauche des paires N°/prix. */
body[data-theme="voie-royale"] .tiers-grid{
display:grid; grid-template-columns:max-content max-content; column-gap:.6rem; row-gap:.2rem;
justify-content:start; justify-items:start; text-align:left;
font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
body[data-theme="voie-royale"] .tiers-grid span:nth-child(2n){
padding-left:.75rem; border-left:1px solid var(--gold-line);
}
/* Mon livre / Graine d'Alchimiste (2026-09-19, creation de page, demande Aliette) : identite propre
au livre, sur le meme modele que les autres pages "programme" (hero degrade + accent de theme).
Couleur : vert sauge/foret (--sage / --sage-deep / --forest), deja reserve dans les tokens du site
("titres teintes nature") mais jamais encore utilise ailleurs -- coherent avec l'illustration
botanique de la couverture (rameaux, feuillage) sans creer de nouvelle couleur. --accent en
--forest colore automatiquement tous les eyebrows/prix/liens de la page (regle generique
.eyebrow{color:var(--accent)}), pas besoin de surcharger chaque occurrence individuellement.
2026-09-19 (2e passe, retour Aliette apres 1ere review) : nouvelle direction pour le hero --
degrade IVOIRE -> SAUGE (camaieu clair, elegant, editorial) demande explicitement, remplace le
degrade ivoire/or type ATOUT de la 1ere passe (jugee pas assez "verte").
2026-09-19 (3e passe, retour Aliette apres 2e review) :
- Hero : degrade approfondi (le sauge clair de la 2e passe etait juge "trop pale / trop clair").
Nouvelle reference explicite d'Aliette : le vert reellement visible sur la couverture du livre
dans le mockup du hero. Verifie par extraction de couleur sur l'asset (assets/img/livre-mockup-
hero.png) : le feuillage de la couverture se situe precisement dans la famille --sage/--sage-deep/
--forest deja definie dans les tokens -- on approfondit donc le degrade existant en prolongeant
vers --sage-deep puis --forest (jamais de couleur inventee), concentre en bas/a droite du degrade
135deg (cote illustration), pour ne pas assombrir la zone de texte en haut a gauche.
- Hierarchie doree : les 3 reperes editoriaux de la page (eyebrow "Livre · 2026", "Quatrieme de
couverture", "Extraits de la preface") passent du vert (--accent/--forest, regle generique
.eyebrow{color:var(--accent)}) au dore deja etabli dans la DA (--gold-deep, meme teinte que les
liens/CTA dores du reste du site), pour creer une continuite avec le dore de la couverture et la
DA generale. Le reste de la hierarchie (h1, citation, etc.) n'est pas touche. */
body[data-theme="livre"]{
--accent:var(--forest); --accent-orn:var(--sage);
/* Degrade du hero, expose en variable pour etre reellement REUTILISE (pas reconstruit) par
d'autres blocs de la page -- demande explicite d'Aliette (7e passe) : "reutilise directement
la meme declaration / le meme systeme de background plutot que de reconstruire manuellement
un nouveau degrade ressemblant". Le hero et .band--cover pointent tous deux vers cette seule
et meme valeur : memes couleurs, memes paliers, meme orientation, garantis identiques. */
--livre-hero-gradient:linear-gradient(135deg, #FCF4E5 0%, #E9E6C9 32%, #7C8A6A 66%, #58684B 84%, #2F3D2C 100%);
}
body[data-theme="livre"] .hero{
background:var(--livre-hero-gradient);
}
body[data-theme="livre"] .hero h1{ color:var(--forest); }
body[data-theme="livre"] .eyebrow{ color:var(--gold-deep); }
/* 2e passe : cadre editorial plus genereux sur desktop pour les 3 grands blocs de texte (texte
personnel, quatrieme de couverture, extraits de la preface) -- la colonne se sentait trop etroite/
isolee a gauche dans un conteneur .shell.mid (900px) associe a .prose (max-width:66ch, mesure
generique du site, jamais surchargee ailleurs). Scope desktop uniquement (min-width:900px, seuil
deja utilise sitewide) : le mobile garde son traitement naturel (pleine largeur + padding habituel),
aucune transposition mecanique de la largeur desktop.
3e passe : Aliette demande d'aller encore plus loin, tout en gardant le texte ALIGNE A GAUCHE (pas
de centrage desktop) -- reference visuelle donnee : le bord droit du cadre editorial peut aller
jusqu'a l'aplomb de la tranche droite de la couverture avant du livre dans le mockup du hero.
Verifie par mesure directe sur la capture ecran desktop (1440px) : la tranche droite du livre de
couverture (avant qu'il ne soit recouvert par la quatrieme de couverture, derriere) se situe vers
x=1020px, l'illustration complete (couverture + quatrieme de couverture) se terminant vers x=1227px.
Important : .shell.mid est centre dans le viewport (margin-inline:auto), pas ancre a gauche -- un
elargissement du container deplace donc son bord droit plus vite que l'intuition ne le suggere.
Container elargi une 2e fois (1080px -> 1100px => bord droit du cadre ~1270px a 1440px de large,
legerement au-dela du bord droit de l'illustration complete du hero (~1227px) -- rapprochement
raisonnable de la reference donnee sans sur-corriger ni revenir en-deca de la largeur deja validee
a la passe precedente) + mesure de lecture elargie une 2e fois (74ch -> 80ch, toujours au-dela du
confort de lecture ideal 60-75ch mais Aliette privilegie explicitement la reduction de la longueur
verticale de page a la mesure stricte ici). */
@media (min-width:900px){
body[data-theme="livre"] .shell.mid{ max-width:1100px; }
body[data-theme="livre"] .prose{ max-width:80ch; }
body[data-theme="livre"] .prose p,
body[data-theme="livre"] .prose li{ max-width:80ch; }
}
/* Bloc "Quatrieme de couverture" : panneau editorial a part entiere (distinct du degrade anthracite
generique de .band--dark utilise ailleurs sur le site), qui delimite le bloc par son propre fond +
sa respiration plutot que par un separateur decoratif -- etoile ✦ et trait horizontal retires du
HTML entre ce bloc et les extraits de preface, comme demande.
7e passe (retour Aliette) : ce n'etait plus seulement une question de teinte mais d'ORIENTATION et
de DISTRIBUTION -- le degrade precedent etait vertical (180deg) alors que le hero est diagonal
(135deg), ce qui change fondamentalement sa lecture visuelle meme avec les memes couleurs. Reprend
donc ici EXACTEMENT le meme systeme que le hero via --livre-hero-gradient (variable partagee,
definie une seule fois plus haut) -- plus de reconstruction manuelle, la meme declaration est
litteralement reutilisee, garantissant memes couleurs/paliers/orientation/distribution. padding-top
legerement reduit (vs. le padding de base .band) pour que la section "commence" visuellement un peu
plus tot, sans ligne de separation. padding-bottom proche du padding de base (Aliette : "beaucoup
trop d'espace" avec un padding fortement augmente) -- le vert profond touche le texte de pres,
rappel visuel immediat du hero des le premier ecran. */
body[data-theme="livre"] .band--cover{
background:var(--livre-hero-gradient);
padding-top:clamp(1.75rem,4.5vw,3rem);
padding-bottom:clamp(3.25rem,7vw,5rem);
}
@media (max-width:679.98px){
/* ROUND FINAL RESPONSIVE (2026-09-29) : MON LIVRE MOBILE -- Aliette juge l'espace en bas du bloc
"beaucoup trop important" par rapport au haut (top 28px / bottom 72px mesures a 375px, soit un
ecart de 44px). Elle souhaite conserver VOLONTAIREMENT un peu plus de respiration en bas qu'en
haut, mais avec un ecart nettement reduit. Nouveau plancher 2.5rem/40px (vs 4.5rem/72px avant) :
top reste 28px (clamp non modifie ci-dessus), bottom passe a 40px a la plupart des largeurs
telephone (ecart 12px, ratio ~1.4x au lieu de ~2.6x) -- respiration finale toujours percue mais
nettement plus equilibree. Meme mecanique de vw-scaling progressif vers la largeur tablette
(54.4px a 679.98px) pour eviter tout saut brusque a l'approche de .band--cover desktop/tablette
(non modifie, valide). */
body[data-theme="livre"] .band--cover{ padding-bottom:clamp(2.5rem,8vw,3.5rem); }
}
/* Citation Charles Pepin : davantage de respiration avant/apres, demandee par Aliette ("un vrai
temps de respiration"). Scope a cette page uniquement (ne touche pas .quote ailleurs sur le site,
ex. qui-suis-je.html). .quote n'a pas de margin-bottom propre par defaut -- seul le margin-top
generique de ".prose > * + *" (1.15rem) cree un espace AVANT l'element suivant ; on ajoute donc
ici un vrai margin-block (haut ET bas) pour creer une respiration mesurable des deux cotes. */
body[data-theme="livre"] .quote{ margin-block:clamp(2.5rem,6vw,4rem); }
/* Hero : respiration verticale -- Aliette juge l'espace au-dessus de "LIVRE · 2026" trop genereux par
rapport a la famille de heroes deja validee (Graine de Magicien, ATOUT, La Voie Royale, Ateliers).
Diagnostic : le padding-block de la section .hero est deja identique a ces pages (aucune surcharge
ailleurs) -- l'ecart vient du centrage vertical (align-items:center, generique .hero-in) : la
colonne de texte de "Mon livre" est plus courte (pas de chips/badges comme Ateliers, sub plus court
que Voie Royale), donc le centrage cree un espace superieur/inferieur plus grand autour d'elle dans
la piste de la grille (hauteur pilotee par l'image, cf. agrandissement du mockup ci-dessous, qui
aurait encore accru cet ecart avec un centrage inchange). Fix : on decouple la position du bloc de
texte de la hauteur de l'image (align-items:start + un padding-top explicite et controle sur le
bloc de texte) plutot que de toucher au padding-block de la section, partage avec les autres pages. */
@media (min-width:900px){
body[data-theme="livre"] .hero-in{ align-items:start; }
body[data-theme="livre"] .hero-in > div:first-child{ padding-top:clamp(2.5rem,6vw,3.75rem); }
}
/* 4e passe (retour Aliette) : le HAUT du hero est desormais valide (ne plus y toucher) -- seul le BAS
reste trop genereux. Avec align-items:start (ci-dessus), la hauteur du hero est desormais pilotee
par la colonne image (plus haute que le texte) : le padding-bottom de la section .hero, lui, reste
celui, partage, de la base .hero (clamp(2rem,5vw,3.75rem), identique aux autres heroes) -- on le
reduit ici, UNIQUEMENT pour cette page, pour retrouver une respiration basse comparable a celle
observee sur Graine de Magicien (equilibre haut/bas autour du bloc titre). Padding-top de la
section non touche (regle ci-dessus, sur l'enfant, inchangee).
5e passe (retour Aliette) : reference objective donnee -- l'espace entre le haut du hero et
"LIVRE · 2026" (140px mesures) doit egaler l'espace entre la derniere ligne du sous-titre et le bas
du hero. Reduit au minimum praticable (.hero a overflow:hidden -- le padding-bottom ne peut pas
descendre sous ce qui est necessaire pour ne pas rogner l'image, qui reste plus haute que le texte
avec align-items:start : la piste de la grille est fixee par sa hauteur). Aliette a explicitement
demande de ne plus deplacer/redimensionner le mockup cette passe -- le padding-bottom est donc
reduit a son minimum praticable (quasi 0) SANS toucher a l'image : l'egalite parfaite avec le haut
(140px) n'est donc pas entierement atteignable sans reduire aussi la hauteur de l'image elle-meme
(piste independante de la respiration de la section) -- signale a Aliette plutot que fait en
silence, ecart residuel a arbitrer avec elle si encore visible apres cette passe. */
@media (min-width:900px){
body[data-theme="livre"] .hero{ padding-bottom:clamp(.25rem,.75vw,.5rem); }
}
/* Hero : mockup dedie agrandi sensiblement (agrandissement le plus marque des deux illustrations de
la page, cf. mockup de fin de page ci-dessous) -- meme logique que l'agrandissement deja applique a
ATOUT (echelle .picto.xl prolongee au-dela de son clamp d'origine), proportions de l'image
inchangees, asset non modifie.
5e passe (retour Aliette) : "ne deplace finalement plus le mockup du hero, sa position actuelle peut
rester telle quelle" -- relu attentivement : Aliette valide l'etat ACTUEL (avec la petite marge
negative de la passe precedente) et demande seulement de ne pas le deplacer DAVANTAGE. La marge
negative est donc CONSERVEE inchangee ici (pas retiree, pas augmentee). */
@media (min-width:900px){
body[data-theme="livre"] .hero-figure{ max-width:min(460px,80vw); margin-top:clamp(-1.5rem,-3vw,-.75rem); }
body[data-theme="livre"] .hero-figure img{ max-height:76vh; }
body[data-theme="livre"] .hero-figure img.picto.xl{ width:clamp(230px,46vw,420px); }
}
/* Extraits de la preface : correction de coquille typographique (retour Aliette) -- appliquee
directement dans le HTML ("medium-cartoman-cienne" -> "médium-cartomancienne", trait d'union unique,
sans coupure parasite dans "cartomancienne"), rien a faire ici en CSS.
CTA "Lire integralement" : nouveau traitement demande -- non plus dore plein mais contour vert
(meme vert que le trait vertical de la citation Charles Pepin, soit --accent-orn/--sage pour cette
page) sur fond ivoire identique au fond de page, en reprenant la classe .btn--ghost deja existante
dans le systeme (logique bouton primaire plein / bouton secondaire contour deja en place site-wide,
seule la teinte est ici recoloree en vert pour cette page). "Je l'achete" (section suivante) devient
le CTA plein vert -- les deux boutons partagent donc la meme famille chromatique verte. */
body[data-theme="livre"] .btn{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; }
body[data-theme="livre"] .btn:hover{ background:var(--forest); border-color:var(--forest); color:#fff; }
body[data-theme="livre"] .btn--ghost{ background:var(--ivory); color:var(--sage-deep); border-color:var(--sage-deep); }
body[data-theme="livre"] .btn--ghost:hover{ background:rgba(88,104,75,.12); color:var(--forest); border-color:var(--forest); }
/* Extraits de la preface : bandeau de fond pleine largeur (structure validee -- fond pleine largeur au
niveau section, texte dans un .shell.mid.prose imbrique qui reprend la largeur/alignement des
paragraphes voisins, sans bordure/liseré/boite).
7e passe (retour Aliette) : distinction explicite et importante entre les deux bandeaux de la page --
la Quatrieme de couverture reprend le DEGRADE du hero, celui-ci doit au contraire etre un APLAT UNI,
sans degrade.
8e passe (retour Aliette) : 2e aplat (#C7C9AB, echantillonne pres du surtitre/debut du titre) encore
juge "beaucoup trop fonce".
9e passe (retour Aliette) : reference tres precise cette fois -- l'EXTREMITE GAUCHE du degrade du
hero, "tout a gauche, pratiquement l'ivoire", puis tres legerement vers la droite, "le tout premier
vert extremement pale du camaieu". Echantillonne au bord gauche reel du hero (haut du degrade, la ou
il est le plus proche du pur ivoire) : ~#F7F0DE, une teinte a peine distincte du fond ivoire global
(--ivory:#FCF4E5) -- presque imperceptible, sans demarcation forte avec les sections voisines,
juste assez pour creer une respiration tres subtile, sans jamais se lire comme une nouvelle section.
Le texte perd tout traitement typographique particulier (retour Aliette : l'italique n'etait pas
demande) -- il reprend exactement le style du reste du corps de texte de la preface ; seul le fond
cree la respiration. Structure du bandeau inchangee.
10e passe (retour Aliette) : #F7F0DE juge "un peu trop clair" -- a foncer legerement, SANS revenir
au vert soutenu des tentatives precedentes (#C7C9AB, #B1B798, toutes deux rejetees "beaucoup trop
foncees"). Reste sur le meme degrade partage --livre-hero-gradient (aucune couleur inventee) : point
d'echantillonnage avance a ~20% du parcours du degrade (entre le stop 0% #FCF4E5 et le stop 32%
#E9E6C9), contre ~8% pour #F7F0DE -- un pas mesure, tres loin des ~43-50% ou se situaient les tons
rejetes. Donne #F0EBD4 : legerement plus present que #F7F0DE, mais garde la meme famille tres pale
du camaieu. Contraste texte (--ink) verifie : >13:1, tres large marge. */
body[data-theme="livre"] .excerpt-soft{
background:#F0EBD4;
margin-block:clamp(1.1rem,3vw,1.75rem) clamp(1.6rem,4.25vw,2.25rem);
padding-block:clamp(1.6rem,4.5vw,2.25rem);
}
/* 11e passe (retour Aliette) : DESKTOP uniquement -- la couleur et le texte du bandeau sont VALIDES et
inchanges ci-dessus ; seule la LARGEUR DU FOND change. Le fond ne doit plus traverser toute la
largeur de la page (bandeau plein-largeur) mais former un bloc editorial contenu, SANS deplacer le
texte d'un seul pixel. Technique : le fond plein-largeur est retire de .excerpt-soft (background:none
ci-dessous, desktop uniquement) et reporte sur un pseudo-element ::before positionne derriere le
texte, dimensionne EXACTEMENT comme la boite .shell.mid deja utilisee pour le texte lui-meme --
max-width:1100px sur cette page (surcharge livre-specifique de la valeur generique 900px, cf. plus
haut dans ce fichier), centree -- la MEME boite, pas une valeur inventee -- ce qui fait deborder le
fond d'environ --pad (jusqu'a 2.25rem, "deux doigts") de chaque cote du texte reel, exactement la
reference visuelle demandee. .excerpt-soft passe en position:relative + z-index:0 pour que le
z-index:-1 du pseudo-element reste bien scope localement (derriere le texte, devant le fond de page).
Mobile explicitement exclu : le fond plein-largeur mobile, deja valide, reste strictement inchange
(regle de base ci-dessus, non surchargee sous 900px). */
@media (min-width:900px){
body[data-theme="livre"] .excerpt-soft{
background:none;
position:relative;
z-index:0;
}
body[data-theme="livre"] .excerpt-soft::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
max-width:1100px;
margin-inline:auto;
background:#F0EBD4;
}
}
/* 2026-09-30 (point 6 liste Aliette, TABLETTE 680-1159.98px, portrait ET paysage) : Aliette signale
le bandeau vert clair ("Moi, c'est Aliette..." -> "...ou toute autre chose)") sans respiration
suffisante en portrait et carrement invisible en paysage. Portrait (680-899.98px) : la regle de
base plus haut s'applique deja (fond plein-largeur, jamais touchee par la regle >=900px
ci-dessus), mais son padding-block suit un clamp() qui vaut ~34.56px a 768px -- correct en soi,
mais jugee insuffisante par Aliette. Paysage (900-1159.98px) : bascule vers la technique
::before (11e passe ci-dessus, pensee pour le VRAI desktop >=1160px) -- le contraste entre le
fond du bandeau (#F0EBD4) et le fond de page (--ivory, tres proche en teinte) devient alors
pratiquement imperceptible a cette largeur/cette densite de pixels, d'ou le bandeau qui semble
avoir "disparu". Fix : sur toute la plage tablette (portrait + paysage), retour a la technique
plein-largeur deja validee et bien visible sur mobile (pas de ::before, pas de contrainte
max-width:1100px) + respiration fixe reprise de la valeur MAX deja validee sur desktop
(2.25rem/36px, "comme mobile/desktop" demande par Aliette), identique en portrait et en paysage.
Place apres la regle >=900px ci-dessus pour la surclasser sur la portion commune (900-1159.98px)
a specificite egale. Desktop reel (>=1160px, deja validee "parfait") strictement inchange :
conserve la technique ::before existante au-dela de cette limite. Texte et reste de la page non
touches.
2026-09-30 (retour tablette Lenovo REELLE) : aucune des corrections ci-dessus n'etait visible sur
la tablette physique d'Aliette (Chrome 81 / Android 4.4.2), ni en portrait ni en paysage. Deux
causes cumulees, independantes l'une de l'autre : (1) la tablette reelle mesure 800px de large en
portrait et 1280px en paysage (confirme par Aliette) -- 1280px tombe HORS de la plage
max-width:1159.98px ci-dessous, donc le paysage reel ne recevait jamais cette regle et retombait
sur la regle >=900px (technique ::before, pensee pour du vrai desktop large) ; (2) padding-block
est une propriete logique, non supportee avant Chrome 87 -- sur Chrome 81 elle est silencieusement
ignoree (calculee a 0), ce qui expliquait l'absence de respiration meme quand la regle s'appliquait
(portrait). Meme diagnostic que le correctif deja applique a ATOUT pour sa VSL (cf. .has-vsl plus
bas dans ce fichier) : les proprietes logiques CSS ne doivent pas etre utilisees seules sur les
zones ciblant cette tablette. Fix : (a) limite haute portee a 1290px (au lieu de 1159.98px) --
couvre desormais le paysage reel (1280px) tout en restant sous le seuil du VRAI desktop 4 colonnes
du site (1160px pour .grid.four, valeur differente et sans rapport, non modifiee) -- non, cf. note :
cette page n'a pas de grille 4 colonnes, la limite est reportee a 1290px pour englober 1280px avec
une marge de securite, exactement la meme limite haute que celle deja utilisee pour la reference
ATOUT (cf. bloc video plus bas) ; (b) padding-block remplace par les proprietes PHYSIQUES
padding-top + padding-bottom (meme valeur, 2.25rem chacune), qui fonctionnent sur Chrome 81 ;
(c) le margin-block herite de la regle de base (ligne ~2366, jamais surchargee pour cette plage)
souffre du meme probleme sur la tablette reelle -- ajoute ici en version physique (margin-top/
margin-bottom) avec les memes valeurs MAX que le clamp() d'origine, pour une vraie respiration
avant ET apres le bandeau, memes valeurs qu'attendues visuellement sur mobile/desktop haut de
fourchette. position:static et content:none (proprietes physiques/basiques) fonctionnaient deja
correctement sur Chrome 81, non modifiees. */
@media (min-width:680px) and (max-width:1290px){
body[data-theme="livre"] .excerpt-soft{
background:#F0EBD4;
padding-block:2.25rem;
padding-top:2.25rem;
padding-bottom:2.25rem;
margin-block:1.75rem 2.25rem;
margin-top:1.75rem;
margin-bottom:2.25rem;
position:static;
}
body[data-theme="livre"] .excerpt-soft::before{
content:none;
}
}
/* CTA "Lire integralement" : davantage de respiration au-dessus du bouton pour mieux separer la fin
des extraits du CTA (retour Aliette) -- scope au .btn-row de cette section precise (.band--preface,
seule section "plain band" de la page, cf. HTML) pour ne pas toucher le .btn-row generique
(margin-top:1.8rem) utilise ailleurs sur le site. */
@media (min-width:900px){
body[data-theme="livre"] .band--preface .btn-row{ margin-top:clamp(2.5rem,5vw,3.25rem); }
}
/* Fin de page (mockup + CTA) : image du livre legerement agrandie une 2e fois (agrandissement plus
leger que celui du mockup du hero ci-dessus, comme demande -- on reste sur l'echelle .picto.wide,
simplement prolongee au-dela de son clamp d'origine, sans toucher aux proportions ni a l'asset).
Espace entre le CTA "Lire integralement" (section precedente) et ce mockup reduit : convention
deja etablie sur ce projet (cf. Home EN "Ways to work with me", 2026-09-18) -- on ne touche JAMAIS
au padding-bottom de la section precedente (ecraserait sa propre respiration interne autour du CTA),
on reduit uniquement le padding-top de LA SECTION SUIVANTE. padding-bottom du bloc (respiration
sous "Je l'achete") deja resserree lors de la passe precedente, inchangee ici. */
body[data-theme="livre"] .band--cta-final{
padding-top:clamp(0rem,.5vw,.25rem);
padding-bottom:clamp(1.5rem,4vw,2.5rem);
}
/* Complement au point precedent : l'essentiel de l'espace encore percu entre le CTA et ce mockup ne
vient pas du CSS mais de l'asset lui-meme -- graine-dalchimiste-mockup.png porte une marge interne
transparente d'environ 24% de sa hauteur au-dessus de l'illustration (mesure par script, meme type
de marge deja rencontree et compensee sur atelier-2.png). Plus l'image est agrandie, plus cette
marge invisible pese en pixels -- d'ou un margin-top negatif pour "remonter" visuellement
l'illustration et absorber cette marge interne, en gardant une petite respiration residuelle.
margin par defaut (haut/bas) repris ici en CSS (etait en style inline dans le HTML).
5e passe (retour Aliette) : correction jugee insuffisante ("un bon doigt de vide en trop") --
agrandissement et remontee NETTEMENT plus marques cette fois : largeur max relevee une 3e fois
(380px -> 440px) et marge negative significativement augmentee (-70px -> -100px, absorbe une plus
grande part de la marge transparente du PNG, qui grandit elle aussi avec la taille de l'image). */
/* 7e passe (retour Aliette) : la 6e passe avait resserre l'espace sous le mockup au point qu'il
devient maintenant "un peu trop proche" de JE L'ACHETE -- Aliette valide desormais la TAILLE et le
CENTRAGE HORIZONTAL du mockup desktop (ne plus y toucher) mais veut un peu plus de respiration EN
DESSOUS, pour un equilibre visuel naturel entre les 3 elements (sans revenir au grand vide d'avant).
Seule la marge du bas est ajustee ici (-100px -> -50px) ; la marge du haut (-130px, position
verticale globale) n'est pas touchee. Point de vigilance conserve : le PNG porte une marge interne
transparente asymetrique (~24% haut / ~22% bas de sa hauteur) qui pese lourd une fois l'image
agrandie -- verifie par mesure du rendu reel (bords visibles de l'illustration), pas seulement par
les valeurs CSS. */
body[data-theme="livre"] .band--cta-final .btn-row{ margin-top:.6rem; }
@media (min-width:900px){
body[data-theme="livre"] .band--cta-final img.picto.wide{
width:clamp(230px,56vw,500px);
margin:0 auto;
margin-top:-130px;
margin-bottom:-50px;
}
}
/* ============================================================
Mon livre — MOBILE (4e passe, 2026-09-19, retour Aliette)
------------------------------------------------------------
DIAGNOSTIC (demande explicitement par Aliette avant toute correction locale) : les conventions
mobiles "cadre de lecture confortable / CTA compacts / composition de hero resserree" deja
observees sur ATOUT, Ateliers, Formations Alchimiques (listing) ne sont PAS des regles globales
heritees automatiquement -- il n'existe pas de composant/regle transverse unique qui les applique.
Ce sont, page par page, des surcharges locales scopees par theme (body[data-theme="atout"] ..., etc.),
qui reproduisent chacune la meme intention avec des valeurs proches. La base partagee (.shell,
.prose, .btn-row) ne fournit QUE : le padding lateral minimal (--pad) et, sous 520px, la mise en
colonne des CTA avec un bouton seul passant automatiquement a 100% de large
(".btn-row .btn:only-child{width:100%}", ligne ~1708) -- c'est PRECISEMENT cette derniere regle,
sans override, qui rendait "LIRE INTEGRALEMENT" et "JE L'ACHETE" pleine largeur sur cette page,
et l'absence de tout supplement de padding-inline/centrage qui rendait le texte trop etale.
"Mon livre" est une page neuve : n'ayant jamais recu ces surcharges locales (contrairement a
ATOUT/Ateliers/Formations, corrigees une a une au fil des passes precedentes), elle affichait donc
le comportement "brut" de la base commune, plus genereux/etale que la convention desormais
attendue par defaut. Un vrai correctif "a la source" (rendre .btn-row/.prose compacts par defaut
pour TOUT le site) toucherait toutes les pages deja validees sans audit possible ici -- risque
explicitement ecarte par Aliette ("sans casser les pages deja validees"). Le choix retenu :
appliquer a "Mon livre" EXACTEMENT les memes surcharges, aux memes seuils, qu'ATOUT (sa page de
reference la plus proche en structure : hero degrade + mockup + CTA + blocs de texte narratifs),
pour que le systeme reste un seul et meme motif reconnaissable partout, meme s'il reste, pour
l'instant, un motif reproduit plutot qu'un composant unique. Si Aliette souhaite un jour vraiment
unifier cela en un seul reglage global, ce serait un chantier dedie, distinct de cette page.
Deux seuils reprennent EXACTEMENT ceux d'ATOUT :
- 899.98px : composition du hero (la ou hero-in repasse en 1 colonne).
- 679.98px : cadre de lecture fin (largeur/centrage du texte, CTA compacts).
============================================================ */
/* 1) Hero mobile : composition resserree, meme logique qu'ATOUT (espace haut/bas reduit, mockup
remonte par une marge negative qui absorbe la marge transparente interne au PNG -- meme technique
que ATOUT/Formations), et AGRANDI davantage que la valeur d'ATOUT (demande explicite d'Aliette,
"agrandir le mockup du hero", en plus de la logique de composition ATOUT).
5e passe (retour Aliette) : le resserrement du haut etait alle legerement trop loin -- "LIVRE ·
2026" parait trop proche du header. Le bas (deja valide) n'est PAS touche : seule la valeur haute
du padding-block est augmentee (une respiration plus naturelle sous le header), sans recreer le
grand espace d'avant. */
@media (max-width:899.98px){
body[data-theme="livre"] .hero{ padding-block:clamp(1.9rem,5.5vw,2.6rem) clamp(.75rem,2.5vw,1.25rem); }
body[data-theme="livre"] .hero-in{ gap:clamp(.4rem,1.5vw,.75rem); }
body[data-theme="livre"] .hero-figure{
max-width:min(320px,66vw);
margin-top:clamp(-3.5rem,-10vw,-2.25rem);
margin-bottom:clamp(-3rem,-9vw,-1.75rem);
}
body[data-theme="livre"] .hero-figure img{ max-height:58vh; }
body[data-theme="livre"] .hero-figure img.picto.xl{ width:clamp(210px,48vw,330px); }
}
/* 2) Cadre de lecture mobile fin + CTA compacts : reprise EXACTE du motif ATOUT (meme selecteurs,
memes valeurs) sur les 3 blocs de texte principaux (texte personnel, quatrieme de couverture,
extraits de preface -- tous des .shell.mid.prose dans des .band, aucun ne contient de
) ET sur
les CTA. Remplace l'ancien simple "text-align:center" (3e passe) : le centrage seul ne suffisait
pas, il manquait le supplement de padding-inline qui evite au texte de toucher les bords. */
@media (max-width:679.98px){
body[data-theme="livre"] .shell.mid.prose:not(:has(ul)){
text-align:center;
padding-inline:calc(var(--pad) + 1.3rem);
}
body[data-theme="livre"] .shell.mid.prose:not(:has(ul)) p{
margin-inline:auto;
}
body[data-theme="livre"] .btn-row{ align-items:center; }
body[data-theme="livre"] .btn-row .btn{ width:auto; min-width:220px; }
/* 8e passe (retour Aliette) : "LIRE INTEGRALEMENT" doit se lire comme la CONCLUSION du bloc
"EXTRAITS DE LA PREFACE", pas comme un element de la sequence du mockup final -- bouton legerement
plus etroit + texte legerement reduit (proportions plus discretes, plus "conclusion editoriale"
que CTA principal), et remonte un peu vers la fin des extraits (marge reduite vs. la 7e passe,
qui avait ajoute trop de respiration) tout en conservant assez d'espace pour rester identifiable
comme CTA (pas colle au texte). La respiration ACTUELLEMENT plus importante se deplace APRES ce
bouton, cf. .band--cta-final juste plus bas : c'est elle qui separe desormais clairement les deux
ensembles (extraits+CTA / mockup+CTA), pas celle-ci. */
body[data-theme="livre"] .band--preface .btn-row{ margin-top:clamp(1.15rem,3.5vw,1.5rem); }
body[data-theme="livre"] .band--preface .btn-row .btn{
min-width:0;
padding:.95rem 1.7rem;
font-size:.7rem;
letter-spacing:.1em;
}
}
/* 3) Mockup de fin de page, mobile : meme logique que les mockups Home mobile (.book-mockup /
.guidebook-mockup, cf. plus bas dans ce fichier) -- agrandi, remonte par une marge negative qui
absorbe la marge transparente interne au PNG (~24% haut/bas, cf. note plus haut). Taille intermediaire,
une vraie presence sans devenir disproportionnee.
8e passe (retour Aliette) : desormais deux ENSEMBLES visuels distincts sur mobile -- (1) fin des
extraits + LIRE INTEGRALEMENT, (2) mockup + JE L'ACHETE. Le padding-top de cette section est
nettement augmente pour creer la respiration CLAIREMENT PERCEPTIBLE demandee entre les deux
ensembles (c'est elle qui porte maintenant cette separation, plutot que la marge sous le bouton
precedent).
9e passe (retour Aliette) : BUG identifie et corrige -- cette regle utilisait `max-width`, alors que
la regle generique `.picto.wide` (plus haut dans ce fichier) fixe une vraie propriete `width`
(clamp(180px,40vw,340px), qui resout a 180px sur mobile). `width` gagne toujours sur `max-width`
quand elle resout plus petit, donc TOUS les agrandissements mobiles demandes depuis plusieurs passes
n'avaient en realite jamais d'effet reel -- le mockup restait bloque a 180px quoi que la valeur de
max-width indique. Corrige en fixant directement `width`. Taille choisie pour donner enfin la
vraie presence demandee de facon repetee ; marge basse recalculee pour preserver la respiration
deja obtenue avec JE L'ACHETE (la marge transparente interne du PNG, ~22% de la hauteur, grandit en
valeur absolue avec la taille -- la marge negative du bas est donc elle aussi augmentee en
proportion, pas laissee telle quelle). Marge haute (position generale) non touchee.
10e passe (retour Aliette) : le bug corrige a la 9e passe rendait ENFIN l'agrandissement reellement
visible -- resultat juge "un tout petit peu trop grand". Reduction TRES LEGERE de la largeur
(290px/74vw -> 272px/71vw, ~5-6%). Remontee de l'ENSEMBLE mockup+CTA demandee explicitement --
obtenue en reduisant uniquement le plancher du padding-top de la section (2.5rem -> 2.15rem, seule
valeur qui compte en pratique sur mobile car 7vw/6vw restent sous ce plancher jusqu'a ~570px de
large) : deplace tout le contenu vers le haut SANS toucher aux marges internes de l'image
(margin-top:-40px / margin-bottom:-45px inchangees), pour preserver exactement la respiration
mutuelle deja validee entre le mockup et JE L'ACHETE (demande explicite : ne pas recompacter
individuellement ces deux elements).
11e passe (retour Aliette) : taille du mockup, disposition mockup/JE L'ACHETE et bouton JE L'ACHETE
tous VALIDES, inchanges. Demande uniquement de remonter ENCORE UN TOUT PETIT PEU l'ensemble
mockup+CTA, pour reduire l'espace entre LIRE INTEGRALEMENT et le mockup -- toujours en ne touchant
QUE le plancher du padding-top de cette section (convention deja etablie : jamais le padding-bottom
de la section precedente), et sans toucher aux marges internes de l'image (margin-top:-40px /
margin-bottom:-45px inchangees) pour preserver exactement la respiration mockup -> JE L'ACHETE.
Reduction moderee du plancher (2.15rem -> 1.8rem, ~16%) : garde une vraie respiration visible
apres LIRE INTEGRALEMENT (demande explicite de ne pas recoller l'image entre les deux CTA).
12e passe (retour Aliette) : composition mockup+JE L'ACHETE (taille, centrage, position et
espacement du bouton) VALIDEE, inchangee. Encore trop de vide juge entre LIRE INTEGRALEMENT et le
mockup sur la derniere capture -- nouvelle reduction du meme plancher de padding-top (1.8rem ->
1.45rem, ~19%), toujours SANS toucher aux marges internes de l'image ni au padding-bottom de la
section precedente. Reste une respiration clairement visible apres LIRE INTEGRALEMENT (demande
explicite : pas de collage).
13e passe (retour Aliette) : la 12e passe jugee imperceptible -- capture annotee (curseur/doigt)
fournie pour indiquer la hauteur cible. Mesure sur la capture : l'ecart cible entre LIRE INTEGRALEMENT
et le mockup represente environ 60% de l'ecart alors visible -- reduction nettement plus marquee
cette fois du meme plancher de padding-top (1.45rem -> 0.55rem, ~62%), translation verticale de
l'ensemble mockup+JE L'ACHETE uniquement (toujours aucune marge interne de l'image touchee, taille
et centrage du mockup inchanges, espacement mockup->JE L'ACHETE inchange, LIRE INTEGRALEMENT
non touche). Une fine respiration subsiste apres LIRE INTEGRALEMENT (pas de collage total). */
@media (max-width:899.98px){
body[data-theme="livre"] .band--cta-final{ padding-top:clamp(.55rem,1.8vw,.9rem); }
body[data-theme="livre"] .band--cta-final img.picto.wide{
width:min(272px,71vw);
margin-top:-40px;
margin-bottom:-45px;
}
}
/* Ateliers : dégradé du hero — le hero utilise désormais définitivement le dégradé global anthracite/doré
(--anthracite-gradient), validé par Aliette le 2026-09-11 après comparaison avec l'ancien dégradé
brun/chaud d'origine (testé puis écarté). Toute la page (hero + blocs .band--dark) est maintenant
alignée sur ce même traitement. */
body[data-theme="ateliers"] .hero{
background:var(--anthracite-gradient);
color:var(--ivory-2);
}
body[data-theme="ateliers"] .hero h1{ color:#F4E7C9; }
body[data-theme="ateliers"] .hero .sub{ color:#E6D3A8; }
body[data-theme="ateliers"] .hero .eyebrow{ color:var(--gold-bright); }
/* Ateliers : lisibilité des chips (encadrés "Atelier collectif / individuel") dans le hero, suite à
l'adoption définitive du dégradé global (2026-09-11) — .chips span utilise par défaut --ink-soft
(brun foncé, pensé pour fond clair), illisible ici. Texte repris aux tons ivoire déjà en place dans
ce hero (.hero h1 / .hero .sub), cadre discret repris au même ton en transparence — pas de doré ajouté. */
body[data-theme="ateliers"] .hero .chips span{ color:#E6D3A8; border-color:rgba(230,211,168,.35); }
body[data-theme="ateliers"] .hero .chips span i{ color:#F4E7C9; }
/* Ateliers — passe dédiée du 2026-09-16 (demandée par Aliette), scopée à cette seule page via
[data-theme="ateliers"] (FR + EN, identique dans les deux car même structure/CSS) :
1) Réduit l'espace vertical au-dessus de l'image dans le bloc image/texte/bouton (.band--dark) —
ne touche qu'au padding-top (le padding-bottom du bloc reste celui de .band, inchangé).
Round 2 (retour visuel d'Aliette) : resserré bien davantage que le premier essai — l'image
elle-même (atelier-2.png) a une marge interne transparente d'env. 24% de sa hauteur en haut,
ce qui ajoutait un espace "invisible" en plus du padding CSS. En le prenant en compte, ce
padding réduit rapproche l'impression visuelle du gap du haut de celle du gap du bas (sous le
bouton CTA), sans toucher au padding-bottom ni à la structure du bloc.
2) Respiration avant le titre "Grâce à la Méthode…" : Round 2 — légèrement réduite par rapport au
premier essai (jugé trop généreux), tout en restant nettement au-dessus de la marge générique
d'origine (.prose h2, 2.4rem) : un intermédiaire entre les deux, pas un retour à l'espacement
initial.
3) Respiration après le dernier point de la liste ("...ta dimension spirituelle") avant le bloc
suivant — inchangée depuis le premier essai (pas de retour d'Aliette dessus).
4) Puce étoile ✦ de la liste sous "Grâce à la Méthode…" : reprend exactement les valeurs de
contenu/couleur/taille déjà utilisées par .offer-row .offer-included li::before (Guidances /
Accompagnements) — même symbole, même --accent-orn, même taille — sans reprendre l'encadré
(bordure + fond) associé à .offer-included, qu'Aliette ne veut pas ici. Sélecteur scopé à
cette page + cette section (pas de classe .offer-included ajoutée dans le HTML). */
body[data-theme="ateliers"] .band--dark{ padding-top:clamp(.5rem,1.5vw,1rem); }
body[data-theme="ateliers"] .band.tight .prose h2{ margin-top:clamp(2.7rem,5vw,3.4rem); }
body[data-theme="ateliers"] .band.tight .prose ul li::before{
content:"✦"; width:auto; height:auto; background:none;
color:var(--accent-orn); font-size:.72em; top:.2em;
}
/* Ateliers — passe ciblée du 2026-09-16 (demandée par Aliette) :
1) Badge "English Speaker Friendly" du hero SANS cadre — exception de présentation propre à
cette page uniquement (ne pas généraliser la suppression du cadre aux autres .badge du site,
qui restent encadrés sur Guidances/Accompagnements). Seuls bordure + padding sont retirés,
la typographie (majuscules, tracking, gras) du badge est conservée. Règle conservée pour la
version EN uniquement (le badge est retiré du HTML côté FR — cf. règle transversale : ce
type de mention ne s'adresse qu'aux visiteurs de la version anglaise).
2) Encadré doré autour de "Découvre..." + la liste (le titre "Grâce à la Méthode..." reste EN
DEHORS/AU-DESSUS de l'encadré) : valeurs reprises FACTUELLEMENT de .offer-row .offer-included
(Guidances/Accompagnements) — même bordure, même fond, même padding. Classe .offer-box scopée
à cette page via [data-theme="ateliers"] : n'a aucun effet ailleurs tant qu'elle n'est pas
explicitement étendue. La respiration après le titre h2 reste celle générique de .prose (1.15rem,
cf. .prose > * + *), l'encadré devenant le prochain enfant direct du h2. La respiration
"après la liste" (avant le bandeau suivant) est désormais portée par l'encadré lui-même
(margin-bottom, ci-dessous) plutôt que par le
, puisque le
est maintenant à l'intérieur
de l'encadré et non plus le dernier enfant direct de .prose.
2026-09-16, 2e passe : desktop — l'encadré était inutilement large (pleine largeur de .prose)
et laissait un grand vide à droite des items courts. width:fit-content le redimensionne sur
son propre contenu (le vide disparaît), tout en restant aligné à gauche (comportement bloc par
défaut, pas de centrage). max-width:100% en garde-fou si un item venait à être plus long que
l'espace disponible. Mobile : largeur de l'encadré déjà jugée correcte par Aliette, non touchée
ici (pas de règle dans le media query ≤679.98px). Le padding interne gauche/droit est légèrement
réduit sur mobile uniquement pour permettre à "Découvre ou explore plus en profondeur :" /
"Discover or explore more deeply:" de tenir sur une seule ligne sans réduire la police ni
élargir l'encadré (cf. media query ci-dessous).
3) Test de mise en capitales du 1er message doré du bandeau final (desktop ET mobile, même logique
typographique des deux côtés) : classe .cta-message ajoutée uniquement sur ce paragraphe. Le
second message ("Les cartes sont entre tes mains." / "The cards are in your hands.") n'est PAS
concerné et reste en casse normale.
2026-09-16, 2e passe : max-width retiré du style inline et repris ici en CSS pour pouvoir varier
par breakpoint (base mobile resserrée ci-dessous, élargie en desktop pour laisser respirer les
sauts de ligne volontaires — cf. balises ajoutées dans le HTML
aux points de coupure demandés par Aliette). Marge sous l'image et respiration avant "Les cartes
sont entre tes mains." déplacées en CSS pour la même raison (varier par breakpoint proprement,
ce qu'un style inline ne permet pas de battre sans !important). */
/* 2026-09-17 (demandé par Aliette) : le conteneur de cette section (.shell.mid.prose) hérite de
.shell.mid un max-width:900px qui écrase (spécificité CSS : 2 classes chaînées battent 1 classe)
le max-width:66ch propre à .prose. Le conteneur restait donc correctement centré (margin-inline:
auto hérité de .shell) mais bien plus large que son contenu (paragraphe ~561px, encadré "Méthode"
~592px, tous deux alignés à gauche) : ce bloc de texte, collé au bord gauche d'un conteneur trop
large, donnait une impression de décalage vers la gauche par rapport à l'axe de la page, alors
que le conteneur lui-même était déjà bien centré. Resserré ici, desktop/tablette uniquement
(mobile non concerné : son conteneur est déjà plus étroit que 900px, pas de problème à ce
breakpoint).
2026-09-17, 2e passe (toujours demandée par Aliette) : la première valeur (max-width:44rem)
resserrait trop et faisait passer le titre "Grâce à la Méthode "The Tarot Alchemist"" sur 2 lignes
sur desktop FR (le rendu de contrôle local ne montrait pas ce retour à la ligne, mais Aliette l'a
constaté dans son propre navigateur — écart de mesure de police déjà observé par le passé entre
ce sandbox et un navigateur réel). Un essai intermédiaire avec width:fit-content (pour que le
conteneur s'adapte automatiquement à son enfant le plus large) a été écarté : il crée une
dépendance circulaire avec l'encadré "Méthode", dont la largeur (width:min(37rem,100%)) se
résout alors contre un conteneur lui-même indéterminé — l'encadré se retrouvait réduit à ~561px
au lieu des 37rem/592px déjà validés, un changement de largeur non demandé. Solution retenue :
max-width fixe, mais élargi (44rem → 48rem) pour offrir une marge de sécurité confortable par
rapport à la largeur du titre observée ici, plus white-space:nowrap sur le titre en garde-fou
structurel (il ne pourra plus jamais repasser à la ligne à ce breakpoint, quelle que soit la
police réellement rendue). Vérifié : à 48rem, l'encadré conserve bien sa largeur exacte de 592px
(37rem), le paragraphe ses 561px (66ch) — aucune largeur de contenu modifiée, seul le conteneur
qui les englobe change. margin-inline:auto conservé pour que ce conteneur reste centré comme un
bloc unique. */
@media (min-width:680px){
body[data-theme="ateliers"] .band.tight .shell.mid.prose{
max-width:48rem;
margin-inline:auto;
}
}
/* 2026-09-17, 3e passe (demandée par Aliette) : après investigation, la question "ce titre a-t-il
l'air en majuscules sur desktop ?" s'est révélée dépendre de la police RÉELLEMENT chargée par
chaque navigateur (Cinzel via Google Fonts, ou son repli local "Trajan Pro" si Cinzel ne se
charge pas — Trajan étant nativement une police tout-capitales) : deux navigateurs différents
pouvaient donc donner deux impressions différentes pour un même text-transform:none. Pour lever
toute ambiguïté, Aliette a demandé de ne plus dépendre de ce comportement de police et de forcer
EXPLICITEMENT la casse capitale par CSS (text-transform:uppercase), identique sur desktop ET
tablette (une ligne), en plus de mobile (déjà en 2 lignes, inchangé). Le palier tablette introduit
à la passe précédente (680–999.98px, qui reprenait alors le traitement mobile 2 lignes) est donc
retiré : desktop et tablette partagent maintenant exactement le même traitement (Cinzel MAJUSCULES
explicites, aligné à gauche comme avant, une seule ligne) du moment qu'on est ≥680px. Alignement,
position, espacement inchangés — seule la casse est désormais forcée plutôt que dépendante de la
police. */
@media (min-width:680px){
body[data-theme="ateliers"] .band.tight .prose h2{
text-transform:uppercase;
/* Garde-fou structurel : empêche le titre de repasser sur 2 lignes à ce breakpoint, quelle que
soit la police réellement rendue (cf. commentaire ci-dessus) — les majuscules forcées ci-dessus
étant plus larges que la casse normale, ce garde-fou est d'autant plus utile ici. */
white-space:nowrap;
}
}
body[data-theme="ateliers"] .hero .badge{ border:none; padding:0; }
body[data-theme="ateliers"] .band.tight .prose .offer-box{
border:1px solid var(--gold-line);
background:var(--ivory-2);
padding:1.4rem 1.6rem 1.4rem 2.2rem;
margin-bottom:clamp(1.5rem,4vw,2.5rem);
}
/* 2026-09-16, 3e passe : l'intro ("Découvre..."/"Discover...") et la liste n'avaient aucun espace
entre elles (p,ul{margin:0} générique du site) — ajout d'une respiration modérée, commune aux deux
breakpoints. */
body[data-theme="ateliers"] .band.tight .prose .offer-box p{ margin-bottom:.9rem; }
@media (min-width:680px){
/* fit-content (2e passe) rendait l'encadré trop étroit et incohérent en largeur entre FR et EN
(chacun se resserrant sur son propre contenu). Largeur fixe modérée à la place : plus cohérente
avec l'axe de lecture du titre au-dessus, sans retraverser toute la page.
2026-09-16, 5e passe : élargi légèrement (34rem → 37rem) pour que le bord droit se rapproche
de la fin de "Alchemist" dans le titre au-dessus, sans le dépasser largement.
2026-09-17, 4e passe (demandée par Aliette) : le passage du titre en majuscules forcées (cf.
plus haut) l'a rendu nettement plus large (mesuré : +145 à +172px selon la langue et la largeur
d'écran) — l'ancienne valeur fixe de 37rem/592px, calibrée pour l'ancien titre en casse normale,
ne suit plus son bord droit et l'encadré paraît maintenant trop étroit, cassant le rapport
visuel validé hier. Comme le titre utilise une taille de police fluide (.h-md, clamp(1.25rem,
2.5vw,1.7rem)) et non fixe, sa largeur varie en continu entre tablette et desktop (mesuré : de
~478px à 680px/800px de large, jusqu'à ~650px à partir de ~1088px, en FR — proportionnellement
à la taille de police) : une valeur fixe ne peut pas suivre ce mouvement sur toute la plage.
Remplacé par une formule clamp() qui reproduit la même courbe que le titre (mêmes points de
bascule ~800px et ~1088px), décalée d'une marge constante pour que le bord droit de l'encadré
arrive juste après la fin du titre, à chaque largeur — plutôt qu'une valeur unique correcte
à un seul point et fausse ailleurs. Marge choisie pour rester strictement à l'intérieur de la
largeur disponible du conteneur .prose (~696px maximum à partir de 768px de large) sans avoir
à l'élargir lui aussi. Cette marge tient aussi compte de l'écart de rendu de police déjà observé
entre ce sandbox de test et un navigateur réel : si l'encadré reste malgré tout un peu court par
rapport au titre une fois vérifié dans le vrai navigateur d'Aliette, la marge devra être
augmentée en conséquence (et potentiellement la largeur du conteneur avec elle). */
body[data-theme="ateliers"] .band.tight .prose .offer-box{ width:clamp(32rem, calc(59.75vw + 2.2rem), 43rem); }
/* 2026-09-17, 5e passe (demandée par Aliette) : rendu FR validé tel quel avec la formule ci-dessus.
Mais cette formule a été calculée sur la largeur du titre FR ("Grâce à la Méthode…"), plus long
que son équivalent EN ("With the Method…") — appliquée telle quelle à l'EN, l'encadré dépassait
alors trop largement la fin du titre anglais. Les deux langues doivent partager la même INTENTION
visuelle (bord droit de l'encadré proche de la fin du titre) mais pas la même largeur en pixels,
puisque les deux titres n'ont pas la même longueur. Reprise donc de la même méthode (clamp() qui
suit la courbe du titre, cf. commentaire ci-dessus) mais recalculée sur la largeur réelle du
titre EN (mesurée : ~443px à 680–800px de large, jusqu'à ~602px à partir de ~1088px), avec la
même marge constante (~35px) que celle qui vient d'être validée en FR — pour reproduire la même
intention, pas le même chiffre. Uniquement sur la page EN (via [data-lang="en"]) ; le FR n'est
pas concerné par cette règle et garde exactement sa valeur déjà validée ci-dessus. */
body[data-lang="en"][data-theme="ateliers"] .band.tight .prose .offer-box{ width:clamp(30rem, calc(55.375vw + 2.2rem), 40rem); }
/* 2026-09-16, 6e passe (desktop uniquement — mobile ne doit pas être recentré) : le cadre étant
maintenant plus large que son contenu, le bloc "Découvre…"+étoiles restait collé à gauche.
.offer-box-inner (ajouté au HTML) regroupe l'intro + la liste et se dimensionne à son propre
contenu (flex item non étiré) ; justify-content:center centre CE BLOC dans le cadre, tandis que
p/li gardent leur alignement à gauche NATUREL à l'intérieur du bloc — donc le texte lui-même
n'est pas centré, seul le bloc l'est, avec l'intro et les 3 étoiles qui restent sur un même axe
gauche commun. */
body[data-theme="ateliers"] .band.tight .prose .offer-box{ display:flex; justify-content:center; }
}
body[data-theme="ateliers"] .band--dark .cta-message{
text-transform:uppercase;
}
@media (min-width:680px){
/* 2026-09-16, 5e passe : 60ch forçait la phrase dorée FR sur 3 lignes ; élargi à 70ch pour
qu'elle tienne sur 2 lignes équilibrées, sans agrandir le texte. Vérifié que l'EN (déjà sur
2 lignes) reste bien composée à cette largeur.
2026-09-29 (retour tablette réelle) : Aliette signale la phrase décalée à gauche au lieu
d'être centrée (FR+EN, portrait+paysage, plus visible en paysage). Cause : le centrage de
CE paragraphe (plus étroit que son conteneur .shell.mid une fois plafonné à 70ch) reposait
uniquement sur margin-inline:auto en style inline dans le HTML -- propriété logique non
supportée par le vieux navigateur de la tablette (Chrome 81), donc silencieusement ignorée :
le paragraphe restait alors collé au bord gauche du conteneur (lui-même bien centré, d'où
l'illusion d'un décalage vers la gauche de la page entière). Le conteneur .shell est déjà
correctement doublé (margin-left/right:auto avant margin-inline:auto, cf. règle .shell) ;
ce paragraphe ne l'était pas. Centrage repris ici en CSS (propriétés physiques d'abord) pour
pouvoir battre le style inline sans !important -- inline style retiré du HTML en parallèle. */
body[data-theme="ateliers"] .band--dark .cta-message{ max-width:70ch; margin-left:auto; margin-right:auto; margin-inline:auto; }
}
/* 2026-09-16, 5e passe : le fichier atelier-2.png porte une marge interne transparente
(~20-24% de sa hauteur en haut ET en bas) — l'espace visuel restant après margin-bottom:0
(4e passe) venait de cette marge interne à l'image, pas d'un espacement CSS. Un margin-bottom
négatif "grignote" cette marge transparente pour rapprocher visuellement l'illustration de la
phrase dorée, sans toucher à la taille affichée de l'image elle-même. */
/* 2026-09-16, 6e passe : la 5e passe (-1.7rem / -3.2rem) resserrait légèrement trop — redonné un
peu d'air en réduisant la marge négative (ajustement fin, pas un retour à la 4e passe). */
body[data-theme="ateliers"] .band--dark .shell.mid > img.picto{ margin-bottom:-1.15rem; }
@media (min-width:680px){
body[data-theme="ateliers"] .band--dark .shell.mid > img.picto{ margin-bottom:-2.4rem; }
}
/* 2026-09-16, 3e passe : margin-top de "Les cartes sont entre tes mains."/"The cards are in your
hands." sorti du style inline (classe .cta-sub) pour pouvoir l'augmenter légèrement sur desktop
uniquement — la version inline ne pouvait pas varier par breakpoint. Base (mobile) reprend la
valeur précédente (2.4rem), inchangée. Même chose pour l'espacement avant le CTA
(.btn-row margin-top, générique 1.8rem sitewide) : augmenté sur desktop uniquement ici. */
body[data-theme="ateliers"] .band--dark .cta-sub{ margin-top:2.4rem; }
@media (min-width:680px){
body[data-theme="ateliers"] .band--dark .cta-sub{ margin-top:3rem; }
body[data-theme="ateliers"] .band--dark .btn-row{ margin-top:2.3rem; }
}
/* Ateliers — passe dédiée MOBILE du 2026-09-16 (demandée par Aliette), scopée à cette seule page.
1) Hero : composition plus compacte — le gap texte→image de .hero-in (hérité, partagé par tout
le site) est resserré ici uniquement ; l'essentiel de l'espace visuel restant vient de la
marge interne transparente de l'illustration elle-même (~20% de sa hauteur), pas du gap CSS.
Marge latérale du bloc de texte augmentée via un padding-inline ajouté SUR L'ENFANT (pas sur
.hero-in/.shell lui-même, qui porte déjà --pad) : les deux s'additionnent proprement, sans
écraser la marge de base. Alignement à gauche, dégradé et structure du hero inchangés.
2) Largeur de lecture resserrée pour les blocs de texte courants et le bandeau final : même
logique que le padding-inline:.9rem déjà établi ailleurs sur le site (.offer-row .prose,
.offer-row-accomp .offer-text-vs-image) — ici via calc(var(--pad) + .9rem) puisque ces
conteneurs portent déjà .shell (qui fixe padding-inline:var(--pad)) : calc() ADDITIONNE la
respiration supplémentaire au lieu de l'écraser.
3) 2026-09-16, 2e passe : le titre "Grâce à la Méthode…" / "With the Method…" est centré sur
mobile (lui seul — pas la phrase d'intro ni la liste au-dessus, qui restent alignées à gauche
comme sur desktop) et composé sur 2 lignes via dans le HTML
(classe utilitaire déjà existante sur le site, invisible en desktop). Le bloc encadré
"Découvre…"/"Discover…" en dessous reste, lui, aligné à gauche sur mobile ET desktop (pas de
centrage) — cf. règle .offer-box plus haut, qui ne redéfinit pas text-align.
4) Bandeau final : mêmes marges resserrées. CTA — 2026-09-16, 3e passe : la version "largeur
contrainte + retour à 2 lignes" (2e passe) est remplacée par une réduction de la taille de
police / du tracking / du padding horizontal pour que le texte tienne sur UNE SEULE ligne,
bouton centré et compact, comme demandé par Aliette. */
@media (max-width:679.98px){
/* 2026-09-16, 4e passe : hero encore un peu resserré (gap texte→image + gap entre les deux
étiquettes tarifaires), sans toucher à leur contenu/largeur/taille de texte. */
body[data-theme="ateliers"] .hero-in{ gap:.35rem; }
body[data-theme="ateliers"] .hero-in > div:first-child{ padding-inline:.9rem; }
body[data-theme="ateliers"] .hero-in .chips{ gap:.35rem; }
/* 2026-09-29 (ROUND FINAL RESPONSIVE MOBILE, demande Aliette) : illustration du hero legerement
agrandie (plancher .picto.xl generique 210px -> 230px, plafond 390px -> 350px, meme proportions),
puis hauteur du hero rééquilibree en reduisant le padding-bottom generique de .hero (clamp
2rem/32px a cette largeur) qui laissait un espace vide disproportionne sous l'image une fois
celle-ci agrandie -- reduit a 1.1rem, respiration normale conservee (pas zero).
DERNIER ROUND MOBILE (2026-09-29, retour Aliette apres test reel) : la correction ci-dessus
n'etait pas perceptible sur telephone reel. Cause reelle trouvee par analyse pixel du PNG
(meme methode que pour la lune de Ressources) : le fichier des 5 cartes comporte une marge
transparente interne d'environ 20% en haut ET en bas de son cadre -- a la taille precedente
(230px, hauteur de boite 287.5px), cela representait a lui seul ~59.6px d'espace INVISIBLE
sous l'illustration reellement visible, en plus du padding-bottom du hero (17.6px) : 77.2px
d'espace reel mesure sous le dernier pixel visible, jamais traite par la simple reduction du
padding-bottom seul (qui n'agissait que sur les 17.6px restants). Repris ici avec : 1) plancher
agrandi une nouvelle fois, cette fois de facon nettement plus perceptible (230px -> 262px, soit
+14%, plafond porte proportionnellement 350px -> 400px, memes proportions) ; 2) marge negative
ajoutee sous l'image pour absorber la quasi-totalite de sa marge transparente interne (memes
proportions ~20.7%, donc ~-4.15rem a la nouvelle taille), qui ne mord que sur du vide invisible
du fichier, jamais sur le dessin des cartes lui-meme ; 3) padding-bottom du hero legerement
remonte (1.1rem -> 1.35rem) pour conserver une respiration finale normale, desormais uniquement
composee d'espace reellement visible (~22px), au lieu d'etre noyee dans la marge transparente
du fichier. */
body[data-theme="ateliers"] .hero-figure img.picto.xl{ width:clamp(262px,54.5vw,400px); margin-top:-1.5rem; margin-bottom:-2.65rem; }
body[data-theme="ateliers"] .hero{ padding-bottom:1.35rem; }
body[data-theme="ateliers"] .band.tight .prose{ padding-inline:calc(var(--pad) + .9rem); }
body[data-theme="ateliers"] .band--dark .shell.mid{ padding-inline:calc(var(--pad) + .9rem); }
/* 4e passe : titre "Méthode" mobile testé en capitales façon desktop (Cinzel déjà hérité de
h1-h4{font-family:var(--display)} sitewide — seul text-transform manquait). */
body[data-theme="ateliers"] .band.tight .prose h2{ text-align:center; text-transform:uppercase; }
/* 4e passe : espace vide en haut du cadre "Méthode" légèrement réduit (1.4rem → 1.05rem) sans
coller le texte au bord ; l'espace intro→1ère étoile est couvert par la règle partagée
.offer-box p{margin-bottom:.9rem} ajoutée plus haut, jugée suffisante aussi en mobile. */
body[data-theme="ateliers"] .band.tight .prose .offer-box{ padding-top:1.05rem; padding-left:1.7rem; padding-right:1.1rem; }
body[data-theme="ateliers"] .band--dark .cta-message{ font-size:.82rem; line-height:1.55; letter-spacing:.01em; }
/* 4e passe : "Les cartes sont entre tes mains."/"The cards are in your hands." légèrement réduite
pour redonner la primauté visuelle à la grande phrase dorée. */
body[data-theme="ateliers"] .band--dark .cta-sub{ font-size:.95rem; }
/* justify-content:center déjà porté par le style inline existant du .btn-row de cette page — pas besoin de le redéfinir ici.
align-items:center en revanche est nécessaire : la règle générique ≤520px bascule .btn-row en
flex-direction:column (pensée pour piler plusieurs boutons), et sans cette ligne le bouton était
étiré en stretch (valeur par défaut d'align-items) sur tout l'axe transversal — ce qui annulait
silencieusement width:auto malgré la police/le padding réduits. Même correctif déjà utilisé par
.final-cta ailleurs sur le site pour exactement ce cas de figure. */
body[data-theme="ateliers"] .band--dark .btn-row{ align-items:center; }
body[data-theme="ateliers"] .band--dark .btn{
width:auto; min-width:0;
font-size:.66rem; letter-spacing:.08em; padding:.85rem 1.3rem;
white-space:nowrap;
}
}
/* Ancien dégradé spécifique à cette page retiré (2026-09-11) : il était moins perceptible/différent du
dégradé du hero ci-dessus — la page utilise maintenant le même dégradé noir/doré que tous les autres
blocs anthracite du site (--anthracite-gradient, cf. .band--dark plus haut), pour rester cohérente avec son propre hero. */
/* ---------- Dégradés réutilisables (généralisation des 2 dégradés qui fonctionnent bien) ---------- */
.band--gradient-gold{
background:linear-gradient(160deg,#14110F 0%, #2A2114 45%, #5A421E 78%, #8A6A2E 100%);
color:var(--ivory-2);
}
.band--gradient-gold h1,.band--gradient-gold h2,.band--gradient-gold h3{ color:#F4E7C9; }
/* 2026-09-29 (retour tablette réelle) : Aliette signale ce bandeau trop vif comparé au rouge profond
utilisé comme référence ailleurs sur le site. Le point chaud du radial-gradient utilisait --braise
(#7E1A14, un ember plus clair) ; remplacé par --rouge (#4B0909), le rouge profond de référence du
design system (cf. :root), déjà repris au milieu du linear-gradient juste en dessous — les deux
dégradés partagent maintenant la même teinte de référence au lieu de deux rouges différents, sans
couleur inventée. Le point de fondu du radial (rgba) est recalculé sur ce même rouge (75,9,9) pour
un dégradé cohérent. Structure/forme des dégradés (rayon, positions, alpha) inchangée. */
.band--gradient-rouge{
background:radial-gradient(120% 80% at 50% 0%, var(--rouge) 0%, rgba(75,9,9,0) 60%),
linear-gradient(180deg,#61100C 0%, var(--rouge) 40%, #2A0605 100%);
color:var(--ivory-2);
}
.band--gradient-rouge h1,.band--gradient-rouge h2,.band--gradient-rouge h3{ color:#F6E4D8; }
/* Variante dégradé de l'anthracite de référence (#282727), à tester avant harmonisation éventuelle — pas encore appliquée à une page. */
.band--gradient-anthracite{
background:linear-gradient(180deg,#332F2F 0%, #282727 55%, #1E1D1D 100%);
color:var(--ivory-2);
}
.band--gradient-anthracite h1,.band--gradient-anthracite h2,.band--gradient-anthracite h3{ color:var(--ivory); }
.band--gradient-anthracite strong{ color:var(--gold-bright); }
.band--gradient-anthracite .lede{ color:var(--ivory-2); }
.band--gradient-gold strong,.band--gradient-rouge strong{ color:var(--gold-bright); }
/* .prose p a son propre max-width (66ch) mais pas de centrage propre : sans ça, le paragraphe colle au bord gauche de son parent .shell.mid (900px) même avec text-align:center sur le parent.
2026-09-29 (retour tablette réelle) : le margin-inline:auto seul (propriété logique, non supportée
par le vieux navigateur de la tablette, Chrome 81) laissait justement ce paragraphe collé au bord
gauche sur tablette — exactement le défaut décrit plus haut, jamais corrigé côté fallback physique.
Repli physique ajouté ici (même principe que partout ailleurs dans ce fichier). */
.band--gradient-gold .prose p,.band--gradient-rouge .prose p{ margin-left:auto; margin-right:auto; margin-inline:auto; }
/* Hero Guidances — fond sombre/doré (test validé par Aliette, testé d'abord hors-site).
Réutilise .band--gradient-gold tel quel ; ces 3 lignes ajustent uniquement le contraste
de .lede/.eyebrow/.badge (pensés par défaut pour un fond clair). Composition, HTML,
proportions, alignements et typographies (Cinzel comprise) du hero restent inchangés.
Hero Accompagnements/Coaching : même principe, appliqué à ce même sélecteur — contenu et
composition propres à cette page inchangés, seul le fond change. */
.hero-guidance-gold .lede,.hero-accompagnements-gold .lede{ color:var(--ivory-2); }
.hero-guidance-gold .eyebrow,.hero-accompagnements-gold .eyebrow{ color:var(--gold-bright); }
.hero-guidance-gold .badge,.hero-accompagnements-gold .badge{ color:var(--gold-bright); border-color:rgba(231,201,131,.45); }
/* ---------- Responsive fine ---------- */
@media (max-width:520px){
body{ font-size:1.02rem; }
/* Bouton unique dans un .btn-row (CTA principal, ex. "Réserve ta guidance") : pleine largeur,
traitement inchangé. Plusieurs boutons dans un même .btn-row (ex. "Voir plus" + CTA d'achat) :
largeur proportionnée au contenu, centrés — même logique déjà validée au cas par cas sur
Accompagnements (.final-cta), Ateliers Cartomancie et Atout, désormais généralisée à tout le
site (règle transversale demandée par Aliette le 2026-09-18) pour ne plus avoir à la refaire
page par page. Les règles plus spécifiques déjà en place (.final-cta, body[data-theme="ateliers"]
.band--dark .btn, body[data-theme="atout"] .btn-row .btn) restent prioritaires et inchangées. */
.btn-row{ flex-direction:column; align-items:center; }
.btn-row .btn:only-child{ width:100%; }
.btn-row .btn:not(:only-child){ width:auto; min-width:200px; }
.resource-card{ grid-template-columns:80px 1fr; }
}
/* ============================================================
ACCUEIL FR — MOBILE, passe dediee (2026-09-18, demande Aliette, audit
via apercu interactif). Desktop VALIDE, non touche. FR uniquement
(body[data-lang="fr"]) : le hero (.hero--tight) et le bloc Guidebook
(.guidebook-block) existent aussi en EN, donc chaque regle ci-dessous
est explicitement scopee pour ne jamais atteindre l'anglais. Les
sections "Bienvenue chere initiee" et "Moi, c'est Aliette" ne sont pas
concernees et restent inchangees.
Principe : remplacer l'empilement systematique par une composition qui
conserve la relation texte/visuel du desktop la ou la largeur le
permet (cote a cote reduit, ou grille 2x2 pour la famille de 4 cartes),
plutot qu'un empilement vertical qui allonge excessivement la page.
============================================================ */
/* 1) HERO — The Tarot Alchemist : composition mobile cote a cote (texte a
gauche / carte de visite a droite, tres reduite), boutons repasses en
pleine largeur SOUS la ligne surtitre+titre/visuel plutot que coinces
dans une colonne texte tres courte a cote d'une image beaucoup plus
haute. .hero-in passe de grid (desktop) a flex ; le bloc de texte
(1er enfant) devient display:contents pour que surtitre/titre/boutons
deviennent des items directs de cette rangee flex, sans dupliquer le
HTML. Nota : le "rectangle noir" signale par Aliette autour du visuel
n'existe pas ici — l'asset home-carte-visite.png est reellement
transparent et aucune regle CSS ne pose de fond sur .hero-figure ;
l'artefact provenait uniquement de mon apercu de travail (conversion
JPEG sans alpha), corrige separement dans cet apercu. */
/* 2026-09-18 (5e passe, retour Aliette) : suppression des CTA du hero sur MOBILE
UNIQUEMENT -- FR ET EN (demande explicite, plus seulement FR comme les passes
precedentes sur cette section). Le menu hamburger donne deja acces a la
navigation ; les deux CTA alourdissaient le premier ecran. display:none (pas de
suppression du HTML) : le bloc reste normal sur desktop/tablette (>899.98px),
ou rien n'est touche. Plus aucun espace reserve a leur emplacement : le hero
mobile devient surtitre + titre + mockup uniquement, recompose ci-dessous
avec un padding-block equilibre (A = header -> surtitre =~ B = mockup ->
section suivante). Scope elargi a FR+EN : plus de prefixe body[data-lang="fr"]
sur ce bloc (uniquement ici -- les autres sections de cette feuille de style
restent scopees comme avant). */
/* 2026-09-29 (ROUND FINAL RESPONSIVE MOBILE, demande Aliette) : la composition ci-dessus
(flex-wrap + .eyebrow force en flex:1 1 100%) faisait systematiquement passer l'image
SOUS le texte des que le h1 (sur 2 lignes, "The Tarot" / "Alchemist") occupait toute la
largeur de la rangee -- plus assez de place pour que l'image tienne a cote sur la meme
ligne, d'ou le hero trop vertical signale (texte, puis grand espace ivoire, puis image
tres bas). Remplace par une vraie composition a 2 colonnes : le bloc de texte (surtitre +
titre, 1er enfant de .hero-in, garde son display:block naturel -- plus de display:contents)
et l'image forment 2 items flex cote a cote, sans wrap, l'image toujours ancree a DROITE de
la zone titre/surtitre. Alignement a gauche du texte et ses marges (padding-left/right de
.hero-in ci-dessous) inchanges. Taille/position de l'image inchangees (meme clamp qu'avant). */
@media (max-width:679.98px){
/* 2026-09-30 (point 1 liste Aliette, ACCUEIL mobile FR+EN) : espace au-dessus du hero jugé trop
important par rapport au-dessous (2rem/32px en haut contre .5rem/8px en bas, tres asymetrique).
Rééquilibré à une valeur identique de chaque côté pour une respiration visuellement équivalente
(moyenne des deux valeurs existantes). Uniquement le padding-block de la section : textes,
tailles de police, image et proportions/agencement interne du hero non touchés. Cette règle est
générique (.hero--tight, non scopée par data-page) et s'applique donc aussi à Qui suis-je/About,
mais celle-ci porte déjà sa propre surcharge plus spécifique (body[data-page="qui-suis-je"]
.hero.hero--tight, plus bas dans ce fichier, jusqu'à 899.98px) qui l'emporte : aucun effet sur
cette page, donc aucun risque de dégrader le point 5 (hero About mobile, en cours de réparation
séparément). */
.hero--tight{ padding-block:1.25rem; }
.hero--tight .hero-in{
display:flex; flex-wrap:nowrap; align-items:center; gap:.85rem;
}
.hero--tight .hero-in > div:first-child{ flex:1 1 auto; min-width:0; }
/* Espacement reduit par rapport a l'original (.22em) : dans la colonne de texte, desormais
plus etroite puisqu'elle partage la rangee avec l'image, ".22em" faisait passer le
surtitre sur 3-4 lignes. Repli a .1em/.68rem, mobile uniquement, pour qu'il tienne sur 2
lignes (parfois 3 sur les tres petits ecrans, ex. 320px) sans jamais toucher au surtitre
desktop/tablette (.72rem/.22em, regle generique .eyebrow plus haut, non modifiee). */
.hero--tight .hero-in .eyebrow{ margin-bottom:.3rem; letter-spacing:.1em; font-size:.68rem; }
.hero--tight .hero-in h1{
font-size:clamp(1.55rem,7.5vw,2.15rem); letter-spacing:.04em; line-height:1.1;
}
.hero--tight .hero-figure{
flex:0 0 auto; max-width:clamp(96px,34vw,172px); margin:0; align-self:center;
}
.hero--tight .hero-in .btn-row{ display:none; }
}
@media (max-width:679.98px){
.hero--tight .hero-in{ padding-left:calc(var(--pad) + .9rem); padding-right:calc(var(--pad) + .9rem); padding-inline:calc(var(--pad) + .9rem); }
}
/* 2) MES OFFRES / WAYS TO WORK WITH ME — grille 2x2 mobile (les deux
premieres offres en haut, les deux suivantes en dessous) plutot que 4
cartes empilees. Visuels et typographie des cartes reduits pour rester
lisibles dans une colonne deux fois plus etroite ; les libelles peuvent
revenir sur deux lignes naturellement, aucun texte modifie.
2026-09-18 (6e passe, retour Aliette) : cette regle etait ecrite scopee
body[data-lang="fr"] #offres -- elle n'atteignait donc jamais la section
equivalente EN (id="offers", traduit, pas de valeur commune possible).
Cause du bug signale ("Ways to work with me reste empile en EN") : regle
codee uniquement pour la Home FR au lieu d'etre mutualisee. Corrige en
ajoutant le second selecteur EN (memes valeurs, aucune reinterpretation)
plutot que de dupliquer un second bloc de regles. */
@media (max-width:679.98px){
body[data-lang="fr"] #offres .grid.four,
body[data-lang="en"] #offers .grid.four{
grid-template-columns:repeat(2,1fr); gap:1rem .8rem;
}
body[data-lang="fr"] #offres .card,
body[data-lang="en"] #offers .card{ padding:1rem .9rem; gap:.5rem; }
body[data-lang="fr"] #offres .card .card-media,
body[data-lang="en"] #offers .card .card-media{ margin:-1rem -.9rem .3rem; }
body[data-lang="fr"] #offres .card h3,
body[data-lang="en"] #offers .card h3{ font-size:1rem; line-height:1.25; }
body[data-lang="fr"] #offres .card p,
body[data-lang="en"] #offers .card p{ font-size:.82rem; line-height:1.42; }
body[data-lang="fr"] #offres .card .more,
body[data-lang="en"] #offers .card .more{ font-size:.66rem; letter-spacing:.12em; }
/* 2026-09-30 (point 4 liste Aliette, carte "Accompagnements", FR UNIQUEMENT) : sur cette largeur
de colonne (2 cartes/rangée), le mot "Accompagnements" (15 lettres) dépasse la largeur
disponible et se coupe au milieu avec des lettres orphelines sur la 2e ligne ("ACCOMPAGN" /
"EMENTS"). Mesuré en direct sur le rendu réel (375px) : largeur naturelle du mot ~166px pour
une largeur disponible de ~132px, soit un ratio ~0,795 — taille réduite ici à .78rem (12.48px,
ratio .78) pour tenir sur une seule ligne avec une petite marge de sécurité, UNIQUEMENT pour ce
titre précis (sélecteur par href, ne touche aucune autre carte) et UNIQUEMENT en FR (la version
EN correspondante n'est pas concernée par ce point et garde 1rem). Dimensions de la carte
(padding, gap) non modifiées. */
body[data-lang="fr"] #offres a.card[href="/accompagnements/"] h3{ font-size:.78rem; }
}
/* 2026-09-30 (point 4 liste Aliette, carte "Accompagnements", FR UNIQUEMENT, DESKTOP ≥1160px,
grille à 4 colonnes) : même mot trop long que ci-dessus (mobile), cette fois pour la colonne plus
étroite de la grille à 4 cartes/rangée. Mesuré en direct sur le rendu réel : cas le plus
défavorable à exactement 1160px (largeur naturelle ~216px pour une largeur disponible ~187,8px,
ratio ~0,868 nécessaire) ; la largeur disponible ne fait que croître au-delà (jusqu'à ~205,6px en
palier dès 1440px, shell plafonné), donc 1160px est le seul point à couvrir. Taille réduite ici à
1.1rem (17.6px, ratio ~.846 par rapport aux 1.3rem/20.8px par défaut) avec une petite marge de
sécurité. Uniquement ce titre précis, uniquement FR (EN non concerné par ce point, garde 1.3rem). */
@media (min-width:1160px){
body[data-lang="fr"] #offres a.card[href="/accompagnements/"] h3{ font-size:1.1rem; }
}
/* 3) GRAINE D'ALCHIMISTE (Livre, FR uniquement) et LA METHODE / GUIDEBOOK
(FR+EN) — 2026-09-18, 3e passe (retour Aliette) : la composition cote a
cote testee ci-dessus dans une version precedente NE FONCTIONNAIT PAS
(mockup devenu minuscule, perdu) -- ABANDONNEE. Retour a une composition
VERTICALE editoriale : surtitre, titre, sous-titre/extrait, boutons, PUIS
le mockup en dessous, dans une taille intermediaire (nettement plus
grande que la tentative cote a cote, mais moins grande que l'ancienne
version pleine largeur). .book-block/.guidebook-block redeviennent donc
simplement 1 colonne a cette largeur (comportement par defaut de la
grille, aucune regle grid-template-columns necessaire ici).
2026-09-18 (6e passe, retour Aliette) : .book-block n'existe qu'en FR
(Graine d'Alchimiste, section volontairement FR uniquement -- reste
scope body[data-lang="fr"] partout ci-dessous). .guidebook-block, en
revanche, EXISTE dans les deux langues avec une structure identique --
or toutes ses regles mobiles etaient elles aussi restees scopees
body[data-lang="fr"] par simple reconduction du scope du bloc entier,
sans raison structurelle. Cause exacte du bug signale sur "Guidebook EN"
(texte trop etale, CTA pleine largeur, mockup trop grand, espacements
incoherents) : regles ecrites uniquement pour la Home FR au lieu d'etre
mutualisees. Corrige ci-dessous en detachant les regles .guidebook-block
de leur scope FR (elles s'appliquent desormais aux deux langues, valeurs
identiques, contenu EN inchange) tout en gardant .book-block strictement
FR uniquement. */
/* Cadre de lecture mobile : meme systeme que Guidance/Accompagnement/Ateliers
(padding-inline:.9rem ajoute sur le bloc de texte, en plus du --pad du
.shell parent). Comme .prose n'est plus a cote d'un visuel, tout son
contenu (surtitre, titre, texte, boutons) partage naturellement le meme
axe gauche. */
@media (max-width:679.98px){
body[data-lang="fr"] .book-block .prose{ padding-left:.9rem; padding-right:.9rem; padding-inline:.9rem; }
.guidebook-block .prose{ padding-left:.9rem; padding-right:.9rem; padding-inline:.9rem; }
/* Mockups : taille intermediaire (INCHANGEE, deja validee), centres, sous
les boutons (ordre DOM naturel : .prose puis .book-mockup/.guidebook-mockup).
2026-09-18 (4e passe, retour Aliette) : "beaucoup trop bas", a rapprocher
des boutons. Diagnostic : l'espace CSS reel entre le bas des CTA et le
wrapper .book-mockup/.guidebook-mockup n'etait deja que de 24px (gap de
grille) -- la grande partie de l'espace PERCU vient des deux fichiers
PNG eux-memes (graine-dalchimiste-mockup.png et new-mockup-homepage*.png),
qui integrent chacun une marge transparente d'environ 22-24% de leur
hauteur en HAUT et en BAS (verifie pixel par pixel). Le CSS seul ne peut
pas supprimer cette marge interne a l'image : ce qui suit resserre tout
ce qui est resserrable cote mise en page (gap de grille, padding du
wrapper, leger chevauchement negatif sur l'image elle-meme) sans risque
de collision avec les boutons -- un ecart residuel restera visible tant
que les fichiers PNG eux-memes n'auront pas ete recadres (a valider avec
Aliette avant toute retouche d'image). */
body[data-lang="fr"] .book-block{ gap:.6rem; }
.guidebook-block{ gap:.6rem; }
body[data-lang="fr"] .book-mockup{ padding-block:0; }
.guidebook-mockup{ padding-block:0; }
body[data-lang="fr"] .book-mockup img{ max-width:min(260px,62vw); margin-block:-14px; }
.guidebook-mockup img{ max-width:min(260px,62vw); margin-block:-14px; }
/* Regle CTA "Graine d'Alchimiste" (FR uniquement, 2026-09-18, 4e passe,
retour Aliette) : "Voir plus" et "Je le veux" tiennent desormais sur UNE
seule ligne (testes et mesures a 154px chacun -- largeur identique entre
eux, la plus longue etiquette "Je le veux" (~151px de contenu naturel a
cette taille de police) tient sans avoir besoin de reduire le texte),
alignes a gauche sur le meme axe que le surtitre/titre. Le conteneur
repasse explicitement en ligne (flex-direction:row) pour annuler la
regle generique mobile qui empile les boutons en colonne en dessous de
520px. */
body[data-lang="fr"] .book-block .btn-row{
flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; gap:.75rem;
}
body[data-lang="fr"] .book-block .btn-row .btn{
width:154px; min-width:0; flex:0 0 auto;
}
/* Regle CTA "Decouvrir" / "Open the Guidebook" (FR+EN) : largeur compacte
INCHANGEE (168px, deja validee en FR) -- alignement a gauche. Le
conteneur est en flex-direction:column (regle generique mobile, un seul
bouton) : c'est align-items -- pas justify-content, qui gere l'axe
VERTICAL dans un flex column -- qui controle sa position horizontale. */
.guidebook-block .btn-row{
align-items:flex-start; justify-content:flex-start;
}
.guidebook-block .btn-row .btn{
width:168px; min-width:0; flex:0 0 auto;
}
/* 2026-09-18 (7e passe, retour Aliette) : le libelle EN "Open the
Guidebook" est remplace definitivement par "Explore" (plus court,
coherent avec "Decouvrir" en FR) -- l'exception mobile ci-dessus
(taille de texte/interlettrage reduits pour tenir sur une ligne)
n'a donc plus lieu d'etre : "Explore" tient dans la largeur standard
du CTA sans aucun ajustement typographique specifique. Supprimee. */
body[data-lang="fr"] .book-block .book-excerpt{ font-size:1rem; line-height:1.6; }
/* Respiration Livre -> Guidebook : 2026-09-18 (4e passe, retour Aliette),
revue a la baisse -- la valeur genereuse de la 3e passe (clamp(3rem,9vw,
4rem), ~48px) s'additionnait a la meme marge transparente en bas du PNG
Livre (voir note ci-dessus) pour creer un vide plus grand que voulu.
Nouvelle valeur mobile, toujours distincte du padding-top desktop
(clamp(1.75rem,4.5vw,3rem)) juste au-dessus, mais resserree. */
body[data-lang="fr"] .band:has(> .shell.mid > .guidebook-block){
padding-top:clamp(1.5rem,4vw,2rem);
}
}
/* 4) "BIENVENUE CHERE INITIEE" (FR) / "WELCOME" (EN) — le bandeau n'a pas le
contenu centre verticalement : le h2 (premier enfant) herite de ".prose
h2{margin-top:2.4rem}", pensee pour un h2 qui SUIT du texte, pas pour un h2
qui OUVRE le bloc -- d'ou un espace du haut nettement plus grand que celui
du bas (padding-block du bandeau, lui, deja symetrique). On neutralise
cette marge uniquement pour le premier enfant de ce bloc precis.
2026-09-18 (5e passe, retour Aliette) : bug identique jamais corrige sur la
section equivalente de la Home EN (meme structure .band--dark .prose.center,
meme regle inconditionnelle) -- decouvert en mesurant l'equilibre A/B du
hero EN (le hero se recompose desormais pour A+B, voir point 1). Scope
elargi a FR+EN, plus de prefixe body[data-lang="fr"] ici. */
.band--dark .prose.center > h2:first-child{ margin-top:0; }
/* 5) "MOI, C'EST ALIETTE L'ALOUETTE" (id ajoute ci-dessous en HTML pour
scoper proprement cette section) — mobile uniquement :
- espace photo -> texte resserre (l'inline style gap:clamp(2rem,5vw,4rem)
est surcharge en !important, seule facon de battre un style inline) ;
- contenu texte centre (surtitre/titre, paragraphes, "Qui je suis ?", CTA) ;
- CTA "Voir plus" repasse en format compact (comme partout ailleurs sur le
site) au lieu du plein-largeur generique reserve aux CTA UNIQUES primaires.
2026-09-18 (4e passe, retour Aliette) : le resserrement ci-dessus (gap:.9rem)
ne suffisait pas -- mesure precise a la geometrie reelle du h2 (et non du
conteneur .prose) : le veritable espace visuel photo -> texte etait de
52.78px, cause par la meme regle inconditionnelle ".prose h2{margin-top:
2.4rem}" deja identifiee et neutralisee pour "Bienvenue chere initiee"
(point 4 ci-dessus), mais jamais appliquee ici. Meme correctif : on
neutralise cette marge pour le h2 (premier enfant de .prose), PUIS on
recalibre le gap de la grille pour retrouver un espace proche de A
(44px, mesure entre le haut de la section et le haut de la photo).
2026-09-18 (5e passe, retour Aliette) : scope elargi a FR+EN (id="presentation"
ajoute aussi sur la section equivalente de la Home EN -- meme structure,
meme logique, demande explicite "meme logique sur la Home EN mobile") --
plus de prefixe body[data-lang="fr"] sur ce bloc. Nouveau : cadre de lecture
legerement resserre (padding-inline:.9rem sur .prose, meme constante
reutilisee partout ailleurs sur le site -- Guidance/Accompagnement/Ateliers/
Livre/Guidebook), sans toucher a la taille de police ; le texte reste
centre. */
#presentation .prose > h2:first-child{ margin-top:0; }
@media (max-width:679.98px){
#presentation .grid.two{ gap:2.75rem !important; }
#presentation .prose{ text-align:center; padding-left:.9rem; padding-right:.9rem; padding-inline:.9rem; }
#presentation .prose > *{ margin-left:auto; margin-right:auto; margin-inline:auto; }
#presentation .btn-row{ justify-content:center; }
#presentation .btn-row .btn{ width:auto; min-width:0; flex:0 0 auto; }
}
/* 6) ESPACEMENT GUIDEBOOK -> TEMOIGNAGES (Home uniquement, FR+EN) : 2026-09-18
(5e passe, retour Aliette) : ~50% de reduction demandee. Mesure : l'ecart
percu (mockup -> surtitre "Temoignages"/"Testimonials") etait de 89px =
44px de padding-bottom du bandeau Guidebook + 44px de padding-top du
bandeau Temoignages qui le suit directement (les deux valeurs par defaut
de .band, non modifiees jusqu'ici). Reduit a 20+24=44px (~50%), en gardant
une vraie respiration entre les deux sections. .testi-band est reutilise
sur de nombreuses autres pages (Guidances, Accompagnements, Ateliers,
Formations...) : le selecteur cible donc specifiquement le bandeau de
temoignages qui suit IMMEDIATEMENT le bloc Guidebook de la Home (selecteur
adjacent), pour ne toucher aucune autre page. */
@media (max-width:679.98px){
.band:has(> .shell.mid > .guidebook-block){ padding-bottom:1.25rem; }
.band:has(> .shell.mid > .guidebook-block) + .testi-band{ padding-top:1.5rem; }
}
/* 7) HOME EN DESKTOP — ESPACEMENT "WAYS TO WORK WITH ME" -> "GUIDEBOOK 2026" :
2026-09-18 (7e passe, retour Aliette), desktop uniquement (garde-fou
min-width:900px, seuil desktop/mobile deja utilise pour le hero -- mobile
non concerne, non modifie). Mesure avant correctif (viewport 1440px),
depuis le bas REEL des cartes (pas la boite de la section, qui inclut deja
son propre padding et fausse la mesure) jusqu'au surtitre "GUIDEBOOK ·
2026" : 253.5px = 80px de padding-bottom de #offers + 80px de padding-top
de la section Guidebook (valeurs par defaut de .band, clamp(2.75rem,7vw,
5rem)) + 93.5px lies au centrage vertical interne de .guidebook-block
(grid avec align-items:center : le mockup est plus haut que le bloc de
texte, qui est donc centre plus bas -- ecart STRUCTUREL, non lie au
padding, qu'on ne touche pas ici puisqu'Aliette demande explicitement de
ne pas modifier la composition). Consequence : la cible exacte de 80px
n'est pas atteignable par le seul espacement (93.5px de centrage a eux
seuls depassent deja 80px).
2026-09-18 (8e passe, retour Aliette -- CORRECTIF) : la 7e passe reduisait
AUSSI le padding-bottom de #offers lui-meme, ce qui ecrasait la respiration
interne en bas de "Ways to work with me" (bas des cartes -> bas de section)
bien en-deca de celle, inchangee, de "Mes offres" en FR (80px, valeur par
defaut de .band). Corrige en ne touchant plus QUE le cote "reception" de la
transition (padding-top de la section Guidebook), exactement comme le fait
deja la convention .band--flow etablie ailleurs sur le site (qui ne reduit
jamais le padding-bottom de la section precedente, seulement le padding-top
de celle qui suit). #offers retrouve donc son padding-bottom par defaut
(80px, identique a #offres en FR) -- respiration interne restauree a
l'identique de la reference FR. Le rapprochement entre les deux sections
reste malgre tout ameliore par rapport au 253.5px d'origine, uniquement via
la reduction du padding-top de Guidebook (80px -> ~20px), nouvel ecart
total ≈ 193.5px (80 + 20 + 93.5 structurel). #offers (id) et
.guidebook-block n'existent que sur la Home : selecteurs naturellement
limites a cette page, aucun autre gabarit touche. FR non concerne (la
section qui suit "Mes offres" en FR est Graine d'Alchimiste, differente,
non mentionnee par Aliette -- laissee inchangee). */
@media (min-width:900px){
body[data-lang="en"] .band:has(> .shell.mid > .guidebook-block){
padding-top:clamp(.75rem,2vw,1.25rem);
}
}
/* ------------------------------------------------------------------
Heroes RESSOURCES / FAQ / CONTACT (2026-09-21, demande Aliette) :
harmonisation avec la structure de hero deja validee ailleurs sur le site
(.hero > .shell.hero-in > [titre, .hero-figure] -- meme composition,
memes proportions, meme comportement responsive que Formations
Alchimiques / Ateliers de cartomancie / Graine d'Alchimiste). Aucune
nouvelle direction graphique : chaque page reprend l'un des DEUX univers
neutres deja valides ailleurs sur le site (jamais les univers colores
propres a une offre) --
- fond sombre anthracite/dore (meme --anthracite-gradient que Ateliers) ;
- fond clair dore/parchemin (meme degrade que Formations Alchimiques).
Choix par page (proposition, a valider par Aliette) : RESSOURCES (lune)
et CONTACT (etoile-boussole) en sombre -- univers nocturne, coherent avec
la lune et une etoile qui guide ; FAQ (soleil) en clair -- clarte du
soleil qui "eclaire" les questions.
Les 3 images (contact-hero-etoile.png / faq-hero-soleil.png /
ressources-hero-lune.png) ont ete recadrees a la marge transparente pres
(memes proportions symbole/canevas que les autres pictos de hero du site,
~72% de la largeur du fichier) : pas besoin ici de la marge negative
utilisee sur Formations/ATOUT pour compenser une marge interne trop
genereuse, le recadrage la neutralise directement a la source. */
body[data-theme="ressources"] .hero,
body[data-theme="contact"] .hero{
background:var(--anthracite-gradient);
color:var(--ivory-2);
}
body[data-theme="ressources"] .hero h1,
body[data-theme="contact"] .hero h1{ color:#F4E7C9; }
body[data-theme="ressources"] .hero .sub,
body[data-theme="contact"] .hero .sub{ color:#E6D3A8; }
body[data-theme="ressources"] .hero .eyebrow,
body[data-theme="contact"] .hero .eyebrow{ color:var(--gold-bright); }
body[data-theme="faq"] .hero{
background:linear-gradient(135deg, #FBF1DD 0%, #F4E4C6 50%, #E7C983 100%);
}
/* ------------------------------------------------------------------
Heroes RESSOURCES / FAQ / CONTACT -- passe d'AJUSTEMENTS (2026-09-21,
2e demande Aliette). Fonds et structure générale validés ci-dessus,
inchangés : cette passe ne touche qu'aux proportions, largeurs de
texte et espacements. Consigne explicite d'Aliette pour le mobile :
ne pas déduire les réglages de la version desktop, reprendre ceux
déjà validés sur les autres heroes mobiles du site (Formations
Alchimiques en particulier pour le resserrement le plus récent, cf.
bloc "Formations Alchimiques — MOBILE" plus haut dans ce fichier). */
/* FAQ desktop : nouveau surtitre en minuscules (texte déjà mis à jour
dans le HTML), au lieu du texte tout capitales hérité de .eyebrow.
2026-09-21 (3e passe) : Aliette juge le résultat trop gras pour un texte
en minuscules -- .eyebrow hérite font-weight:600 (partagé par tous les
surtitres du site, pensés pour de la capitale espacée) ; on repasse ici
en graisse normale pour ce surtitre-ci uniquement (FR + EN, via le même
sélecteur thème). */
body[data-theme="faq"] .hero .eyebrow{
text-transform:none;
letter-spacing:.01em;
font-size:.85rem;
font-weight:400;
}
/* Centrage desktop (≥900px) : chaque univers resserré très légèrement
vers le centre de la page (le hero hérite sinon de .shell seul, sans
max-width propre, cf. commentaire plus haut sur ATOUT).
2026-09-21 (3e passe) : CONTACT DESKTOP validé par Aliette et érigé en
référence -- FAQ reprend désormais EXACTEMENT son traitement (plus de
grid-template-columns/gap propres : le ratio de colonnes par défaut
1.05fr/.95fr et le gap par défaut de .hero-in s'appliquent, comme sur
Contact), au lieu de la mise en page "2 colonnes égales + gap élargi"
de la passe précédente qui resserrait trop le bloc texte vers le
centre. Ressources garde son propre placement de texte (validé tel
quel par Aliette, non concerné par ce changement). */
@media (min-width:900px){
body[data-theme="faq"] .hero-in{
max-width:64rem;
margin-inline:auto;
}
body[data-theme="contact"] .hero-in{
max-width:64rem;
margin-inline:auto;
}
body[data-theme="ressources"] .hero-in{
max-width:66rem;
margin-inline:auto;
}
/* 2026-09-21 (4e passe) : RESSOURCES DESKTOP érigé en référence VERTICALE (après CONTACT DESKTOP
validé pour le placement horizontal/proportions). Le h1 "Contact" démarrait ~45px plus bas que
le h1 "Ressources" (mesuré : 193px vs 148px depuis le haut du hero) -- Ressources a un surtitre
au-dessus de son h1, ce qui décale sa colonne texte vers le haut par rapport à Contact qui n'en a
pas ; comme les deux colonnes sont centrées verticalement (align-items:center, hero-in) dans des
heros de hauteurs différentes, ce même écart de structure se traduit par un vrai décalage visible
à l'écran. Remonté ici via transform (et non margin-top : sur un item de grid centré par
align-items:center, une marge négative interagit avec le calcul de centrage et ne déplace le
bloc que d'environ la moitié de la valeur demandée -- vérifié empiriquement : -45px de marge n'a
déplacé le h1 que de ~22px. translateY() est purement visuel, hors flux/grid, donc 1px demandé =
1px de déplacement réel), sur le premier enfant de .hero-in (le bloc texte entier : futur-surtitre
éventuel + h1 + sous-titre), sans toucher à la colonne image (centrée indépendamment). Valeur
reprise du delta mesuré, FR et EN (même décalage constaté dans les deux langues). */
/* 2026-09-21 (5e passe) : valeur assouplie de -45.2px à -35.2px (+10px, soit un descend très léger)
pour redonner un peu d'air entre le titre et l'étoile désormais remontée (cf. règles plus bas) --
cf. commentaire détaillé plus bas ("CONTACT DESKTOP -- hauteur du hero réduite"). */
body[data-theme="contact"] .hero-in > div:first-child{
transform:translateY(-35.2px);
}
}
/* Contact : la phrase d'intro (~48 caractères) était bloquée sur 2 lignes
par le plafond générique .hero .sub{max-width:36ch}, indépendamment de
la largeur de colonne réellement disponible. On lève ce plafond ici :
la 1re phrase tient désormais sur une ligne, la 2e peut utiliser plus
de largeur (seul "message" revient à la ligne si besoin, ce qui est
accepté par Aliette). */
body[data-theme="contact"] .hero .sub{ max-width:none; }
/* 2026-09-21 (4e passe) : Ressources EN -- le sous-titre passait sur 3 lignes (retour avant "except
the Guidebook") malgré une largeur de colonne suffisante, à cause du même plafond générique
.hero .sub{max-width:36ch}. FR non concerné (tient déjà sur 2 lignes avec ce plafond, et n'a pas
été validé pour être retouché) : override scopé à l'anglais uniquement, texte inchangé. */
body[data-theme="ressources"][data-lang="en"] .hero .sub{ max-width:44ch; }
/* 2026-09-21 (8e passe) : Ressources FR -- la coupure "Une méditation... Méthode" / "et trois
e-books." avait été obtenue en 7e passe via un plafond max-width:38ch, mais Aliette rapporte que
la coupure incorrecte ("...ma" / "Méthode...") réapparaît chez elle -- possiblement un cache
navigateur non rafraîchi (le lien vers styles.css n'avait jamais changé de version depuis le début
du chantier, cf. bump ?v=2 -> ?v=3 sur ressources.html), possiblement une sensibilité du plafond en
"ch" à la largeur réelle de colonne selon son environnement d'affichage. Cette fois, exigence
"impérative" et sans marge de tolérance : remplacé par un retour à la ligne FORCÉ ( ajouté dans le HTML, entre "Méthode" et "et"), qui garantit la
coupure exacte indépendamment du rendu/de la largeur -- ne compte plus sur un plafond ch fragile.
Le est masqué par défaut et n'apparaît qu'à partir de 900px (desktop), conformément à la
demande scopée "RESSOURCES FR — DESKTOP" ; le mobile n'est pas concerné et garde son retour à la
ligne naturel (plafond générique 36ch, inchangé). Plafond max-width réhaussé à 44ch (même valeur
que l'anglais) uniquement pour garantir que la 1re ligne ("Une méditation, le Guidebook de ma
Méthode", 42 caractères) tienne sans re-wrapper avant le forcé -- le plafond ne détermine
plus la coupure elle-même, il ne fait que garantir la place. */
.ressources-sub-break-fr{ display:none; }
@media (min-width:900px){
body[data-theme="ressources"][data-lang="fr"] .hero .sub{ max-width:44ch; }
body[data-theme="ressources"][data-lang="fr"] .ressources-sub-break-fr{ display:inline; }
}
/* Taille des symboles : légers ajustements demandés par Aliette.
FAQ (soleil) : légèrement agrandi, aux deux formats (desktop + mobile).
Ressources (lune) : légèrement réduite, aux deux formats -- ajustement
fin uniquement, la lune reste proche de sa taille actuelle.
Contact (étoile) : agrandie uniquement en desktop (Aliette ne demande
rien sur la taille en mobile, qui reste donc au format déjà partagé et
validé avec les autres heroes -- .picto.xl de base, plancher 210px). */
body[data-theme="faq"] .hero-figure{ max-width:min(380px,75vw); }
body[data-theme="faq"] .hero-figure img.picto.xl{ width:clamp(220px,45vw,380px); }
/* 2026-09-21 (3e passe) : lune encore trop grande -- CONTACT DESKTOP (étoile) sert désormais de
référence de proportion visuelle pour les 3 symboles. Réduction mobile ET desktop ("répercuter
cette nouvelle réduction, comme demandé également sur desktop"). */
/* 2026-09-21 (4e passe) : encore un tout petit peu trop grande au jugé d'Aliette -- réduction fine
supplémentaire du plancher mobile uniquement (260/160 -> 248/148 ; le format desktop, validé, n'est
pas concerné : il est fixé séparément ci-dessous à ≥900px et ne référence pas ces valeurs). */
/* 2026-09-21 (5e passe) : encore trop grande au jugé d'Aliette -- nouvelle réduction fine du plancher
mobile uniquement (248/148 -> 228/136 ; desktop Ressources non concerné, validé et non retouché
cette passe). */
body[data-theme="ressources"] .hero-figure{ max-width:min(228px,57vw); }
body[data-theme="ressources"] .hero-figure img.picto.xl{ width:clamp(136px,31vw,228px); }
@media (min-width:900px){
body[data-theme="contact"] .hero-figure{ max-width:min(385px,74vw); }
body[data-theme="contact"] .hero-figure img.picto.xl{ width:clamp(210px,45vw,385px); }
/* 2026-09-21 (3e passe) : soleil encore agrandi en desktop uniquement, pour une présence visuelle
comparable à l'étoile de CONTACT (référence). Mobile non concerné (mêmes valeurs qu'avant :
220px/380px). */
body[data-theme="faq"] .hero-figure{ max-width:460px; }
body[data-theme="faq"] .hero-figure img.picto.xl{ width:clamp(220px,45vw,460px); }
/* 3e passe : lune réduite en desktop aussi, même logique de référence Contact (cf. règle
non-guardée ci-dessus qui couvre déjà le mobile -- cette règle desktop-only la resserre encore
un peu plus, la colonne desktop offrant plus de place que ne l'exige la proportion cible). */
body[data-theme="ressources"] .hero-figure{ max-width:250px; }
body[data-theme="ressources"] .hero-figure img.picto.xl{ width:clamp(160px,26vw,250px); }
/* 2026-09-21 (5e passe) : FAQ DESKTOP -- Aliette juge trop d'espace vide au-dessus/en dessous du
bloc texte (surtitre+titre) par rapport à la faible quantité de contenu (pas de sous-titre sur
cette page), et demande de remonter ce bloc en utilisant Ateliers Cartomancie comme référence de
positionnement vertical (son h1 démarre à 175px du haut du hero). Mécanisme : le bloc texte et
l'image sont tous deux centrés (align-items:center) dans une rangée de grid dont la hauteur est
dictée par l'image (la plus haute des deux colonnes) ; réduire le padding-top du hero remonte donc
l'ensemble de la rangée -- texte ET symbole ensemble, sans toucher à leurs espacements internes
respectifs ni à l'alignement horizontal -- tout en réduisant d'autant la hauteur totale du hero
(les deux demandes sont donc satisfaites par un seul levier). Padding-top ramené de 5rem (80px à
1440px, valeur de base héritée de .hero) à 1rem (16px), soit -64px : nouveau h1 à ~180px du haut
(proche de la référence Ateliers 175px), hauteur du hero réduite d'autant (577.8 -> ~513.8px). */
body[data-theme="faq"] .hero{ padding-top:1rem; }
/* 2026-09-21 (7e passe) : composition et hauteur du hero FAQ desktop VALIDÉES -- micro-ajustement
uniquement : le soleil est descendu très légèrement (translateY, indépendant du texte, comme pour
l'étoile de Contact plus bas) pour se rapprocher du repère visuel donné par Aliette ("vers le haut
des lettres du sous-titre" -- FAQ n'a pas de sous-titre, repère interprété comme le bas du bloc
titre : nouveau centre visuel ~255px du haut du hero, proche du milieu vertical du h1 qui s'étend
de 180.1 à 329.9px). +20px, identique FR et EN. */
body[data-theme="faq"] .hero-figure img{ transform:translateY(20px); }
/* 2026-09-21 (5e passe) : CONTACT DESKTOP -- hauteur du hero réduite légèrement (padding-bottom
seul, qui ne fait que retirer de l'espace vide en fin de hero sans déplacer le contenu -- à la
différence du padding-top utilisé ci-dessus pour FAQ, ici on NE VEUT PAS que le texte et l'étoile
bougent ensemble : Aliette veut les découpler, cf. transforms ci-dessous). Étoile remontée
indépendamment (translateY, hors flux, n'affecte ni la taille ni le calcul de centrage) pour que
sa branche horizontale se rapproche de la zone "entre le titre et le sous-titre / juste au-dessus
du sous-titre" (centre visuel repris de 274.9px à ~242px du haut du hero). Bloc texte redescendu
très légèrement en complément (translateY, ajusté par rapport à la valeur de la passe précédente
qui l'avait remonté de 45.2px pour l'aligner sur Ressources -- ici assoupli de 10px : -45.2+10 =
-35.2px) pour un meilleur équilibre visuel entre les deux colonnes. Taille de l'étoile non touchée
(jugée bonne par Aliette). */
body[data-theme="contact"] .hero{ padding-bottom:2.2rem; }
body[data-theme="contact"] .hero-figure img{ transform:translateY(-33px); }
/* 2026-09-21 (6e passe) : RESSOURCES DESKTOP -- retour en arrière partiel : Aliette juge le hero
devenu trop réduit après la passe précédente (il ressemblait à un bandeau), et prend CONTACT
DESKTOP (validé, 504.9px) comme référence concrète de "vraie présence visuelle", alors même que
Contact contient moins de texte. Composition/alignement non touchés (padding-top et taille de la
lune inchangés, cf. règle desktop ci-dessus non modifiée) : uniquement le padding-bottom est
augmenté pour ajouter de l'espace SOUS le contenu, comme demandé explicitement ("principalement en
ajoutant de l'espace SOUS le contenu"). Base (padding-bottom hérité de .hero, 60px à 1440px) porté
à 9.5rem (152px) : nouvelle hauteur de hero ≈ 80(padding-top)+152(padding-bottom)+262.9(rangée,
dictée par la lune 250px, inchangée) ≈ 494.9px -- proche de Contact (504.9px) sans y être identique
(lune plus petite que l'étoile, donc rangée plus courte), cohérent avec les autres heroes validés. */
body[data-theme="ressources"] .hero{ padding-bottom:9.5rem; }
}
/* Mobile (≤899.98px) : hauteur générale du hero réduite en reprenant la
logique déjà validée sur Formations Alchimiques -- gap texte/image
resserré + marge négative sur l'image pour absorber sa marge
transparente interne (mesurée ~13.8% haut/bas sur mes 3 nouveaux
fichiers, contre ~19-22% sur les images de référence : valeurs
proportionnellement réduites en conséquence, à vérifier au rendu). */
@media (max-width:899.98px){
body[data-theme="ressources"] .hero-in,
body[data-theme="faq"] .hero-in,
body[data-theme="contact"] .hero-in{
gap:clamp(.9rem,3.5vw,1.4rem);
}
body[data-theme="ressources"] .hero-figure img,
body[data-theme="faq"] .hero-figure img,
body[data-theme="contact"] .hero-figure img{
margin-top:clamp(-3.5rem,-9vw,-2.3rem);
margin-bottom:clamp(-3.9rem,-10vw,-3.2rem);
}
/* 3e passe : lune encore réduite (cf. règles plus haut) -> même marge négative "mord" désormais
davantage sur une image plus petite, ce qui resserrait l'espace au-dessus (déjà validé, pas
concerné par la demande de cette passe) de 3.7px à moins de 1px. Corrigé ici pour le préserver. */
/* 2026-09-21 (4e passe) : lune redescendue légèrement (elle restait trop proche du texte), puis
répartition haut/bas rééquilibrée. Étape 1 (marge-top -.9rem/marge-bottom -3.76rem, somme
-74.56px) visait 21px de chaque côté mais calculée sur la hauteur de hero encore réduite (avant
la restauration du padding-bottom ci-dessous) -- une fois la hauteur restaurée (+12.6px, entièrement
côté bas puisque padding-bottom), mesure réelle : 21.4px au-dessus / 33.9px en dessous. Étape 2
(ici) : recentrage fin -- +6.25px de marge-top (moins négative) et -6.25px de marge-bottom (plus
négative), somme strictement préservée (-74.56px, donc hauteur du hero inchangée), pour ramener
les deux espaces à ~27.6px chacun. */
body[data-theme="ressources"] .hero-figure img{
margin-top:-.51rem;
margin-bottom:-4.15rem;
}
/* 2026-09-21 (4e passe) : taille du soleil bonne, mais Aliette demande de le descendre légèrement
pour équilibrer l'espace au-dessus/en dessous, SANS changer la hauteur du hero. Repris ici avec
des valeurs fixes (marge-top moins négative de +11px, marge-bottom plus négative de -11px : la
SOMME des deux reste strictement identique à avant -3.9rem + -3.2rem... -- cf. valeurs d'origine
ci-dessus -- donc la hauteur "consommée" par l'image dans la mise en page, et donc la hauteur du
hero, ne change pas ; seule la répartition haut/bas de cet espace, à l'intérieur, est déplacée). */
/* 2026-09-21 (8e passe) : FAQ MOBILE -- micro-remontée du soleil demandée ("très légèrement"),
hauteur du hero et taille du soleil non concernées : même technique de préservation de somme
que ci-dessus (marge-top rendue plus négative de .375rem, marge-bottom rendue moins négative
d'autant -- somme strictement inchangée à -5.5rem/-88px, donc hauteur du hero et espacement au
texte inchangés). Identique FR et EN (règle non scopée par langue). */
body[data-theme="faq"] .hero-figure img{
margin-top:-1.975rem;
margin-bottom:-3.525rem;
}
/* 2026-09-21 (3e passe) : la passe précédente ("même respiration qu'au-dessus", ~7-8px réels une
fois la marge transparente du fichier prise en compte) restait insuffisante -- Aliette demande
maintenant AU MINIMUM l'équivalent visuel d'un retour à la ligne (mesuré : line-height réel de
.hero .sub ≈ 30px à ce viewport). Padding-bottom augmenté en conséquence, par thème (valeurs
différentes car chaque symbole a désormais sa propre taille -- cf. règles plus haut -- ce qui
change de combien le padding-bottom "brut" doit dépasser le vrai gap visible ciblé). */
body[data-theme="faq"] .hero{ padding-bottom:clamp(3.2rem,7vw,4rem); }
/* 2026-09-21 (4e passe) : la réduction de taille de la lune ci-dessus (260/160 -> 248/148) a fait
baisser la hauteur auto-calculée de .hero-figure, et donc la hauteur totale du hero, de 12.6px
(mesuré : 363.8->351.2 FR, 393.7->381.1 EN) -- alors qu'Aliette demande explicitement de NE PAS
changer la hauteur du hero à cette passe. Compensation : +12.6px ajoutés aux deux bornes du
clamp (le terme vw central reste largement sous ces bornes aux largeurs mobiles concernées, donc
il continue de ne jamais s'appliquer et le MIN "augmenté" fait foi comme avant). */
/* 2026-09-21 (6e passe) : Aliette demande un tout petit agrandissement du hero MOBILE vers le bas
(plus de respiration sous la lune, taille de lune inchangée) -- +18px ajoutés aux deux bornes du
clamp ci-dessus (même logique de préservation : le terme vw central reste sous ces bornes à toutes
les largeurs mobiles concernées, donc ne s'applique jamais et le MIN augmenté fait foi comme
avant). */
/* 2026-09-21 (7e passe) : composition/taille/position de la lune VALIDÉES -- micro-ajustement
supplémentaire, encore un tout petit peu plus de respiration SOUS la lune uniquement (espace
au-dessus et taille inchangés, contenu non déplacé) : +12px de plus ajoutés aux deux bornes
(30.6px -> 42.6px), même mécanisme de préservation que ci-dessus. */
body[data-theme="ressources"] .hero{ padding-bottom:clamp(calc(3.75rem + 42.6px),7.5vw,calc(4.5rem + 42.6px)); }
body[data-theme="contact"] .hero{ padding-bottom:clamp(3.3rem,7vw,4.1rem); }
/* Contact EN uniquement : l'espace au-dessus de l'étoile paraît insuffisant comparé à
l'espacement naturel entre les lignes du texte (la dernière ligne du sous-titre EN tient sur 2
lignes au lieu de 3 en FR, cf. unique + 2e phrase qui ne se casse pas -- le même écart CSS
"lit" donc plus serré en EN). FR non concerné (espace au-dessus déjà validé, non modifié) :
marge negative réduite (donc espace agrandi) uniquement pour cette langue. */
body[data-theme="contact"][data-lang="en"] .hero-figure img{
margin-top:clamp(-1.4rem,-4vw,-.9rem);
}
}
/* Mobile (≤679.98px) : cadre de lecture du texte -- reprise EXACTE de la
marge latérale déjà validée sur Ateliers Cartomancie / Formations
Alchimiques pour leurs heroes mobiles (padding-inline:.9rem ajouté sur
l'enfant, en plus de --pad déjà porté par .shell/.hero-in). Corrige la
remarque d'Aliette sur Contact ("texte trop proche des bords"), et
applique la même cohérence aux 2 autres heroes de cette passe. */
@media (max-width:679.98px){
body[data-theme="ressources"] .hero-in > div:first-child,
body[data-theme="faq"] .hero-in > div:first-child,
body[data-theme="contact"] .hero-in > div:first-child{
padding-inline:.9rem;
}
/* 2026-09-21 (2e passe) : même resserrement de cadre de lecture appliqué aux CONTENUS SOUS LE HERO
(Aliette : "les contenus sous le hero" / "WhatsApp, email, questions, etc." étaient encore trop
proches des bords, avec un cadre visuellement moins large que celui du hero juste au-dessus --
incohérence corrigée ici en appliquant le même bonus .9rem, déjà validé ailleurs sur le site
(ateliers/formations), aux conteneurs .shell.mid (Ressources : méditation, "à lire", paragraphe
final ; FAQ : accordéon, paragraphe final) et .shell.narrow (Contact : WhatsApp/e-mail, paragraphe
FAQ). */
body[data-theme="ressources"] .shell.mid,
body[data-theme="faq"] .shell.mid{
padding-inline:calc(var(--pad) + .9rem);
}
body[data-theme="contact"] .shell.narrow{
padding-inline:calc(var(--pad) + .9rem);
}
/* 2026-09-21 (9e passe) : CONTACT MOBILE -- recentrage vertical du bloc WhatsApp/E-mail entre
deux repères FIXES (fin du hero en haut, phrase FAQ en bas), sans déplacer ni l'un ni l'autre.
Mesure : l'espace fin-de-hero -> bloc (.band.tight padding-top, 28px, classe partagée non
retouchée) + l'espace bloc -> phrase FAQ (.contact-list margin-top, 40px) donnaient 28px au-dessus
/ 40px en dessous du bloc -- non centré. Le paragraphe FAQ (margin-top:clamp(2.5rem,6vw,4rem),
40px à ce viewport, valeur partagée avec .contact-list) fixe la position de la phrase FAQ, donc
inchangé pour ne pas la déplacer. Seul .contact-list margin-top est réduit (bloc remonté) et le
paragraphe FAQ voit son propre margin-top augmenté d'autant pour compenser et garder sa position
absolue strictement identique (28+40=68px de haut, jusqu'à FAQ ; nouvelle répartition 28+26=54px
au-dessus du bloc, 54px en dessous -- bloc désormais visuellement centré, phrase FAQ non déplacée).
!important nécessaire pour l'emporter sur le style inline du paragraphe. */
body[data-theme="contact"] .contact-list{ margin-top:1.625rem; }
body[data-theme="contact"] .shell.narrow > p{ margin-top:3.375rem !important; }
/* ROUND FINAL RESPONSIVE (2026-09-29) : CONTACT MOBILE -- l'adresse e-mail (30 caracteres) ne
tenait plus sur une seule ligne aux tailles de police par defaut (elle cassait au milieu du mot,
"gmail.c" / "om"), et le libelle "E-MAIL" cassait egalement ("E-" / "MAIL"). Reduction de la
taille de police PARTAGEE par les deux lignes (etoile, libelle, valeur) -- meme regle
.contact-row b/span que WhatsApp, donc les deux lignes restent automatiquement harmonisees a la
meme taille, comme demande. white-space:nowrap ajoute sur le libelle et la valeur pour empecher
tout retour a la ligne interne : a ces tailles, l'adresse e-mail tient confortablement sur une
seule ligne des 320px de large, avec de la marge des deux cotes.
DERNIER ROUND MOBILE (2026-09-29, retour Aliette apres test reel) : la reduction ci-dessus etait
beaucoup trop forte -- Aliette confirme qu'il reste suffisamment de marge horizontale reelle sur
telephone pour agrandir. Tailles remplacees par un clamp fluide (etoile/libelle/valeur/gap) :
calcule pour rester tout juste sans debordement au plancher le plus etroit teste (320px, ~3% de
marge de securite), puis grandir progressivement avec la largeur jusqu'a rejoindre EXACTEMENT
les tailles de base non reduites (.9rem/.95rem/1.05rem/.65rem, celles deja utilisees en
desktop/tablette) vers ~421px -- au-dela, plafonne a ces memes valeurs de base (jamais plus
grand que desktop). Toujours harmonise entre WhatsApp et E-mail (memes regles partagees), toujours
sans retour a la ligne (white-space:nowrap conserve), verifie sans debordement de 320 a 679.98px. */
body[data-theme="contact"] .contact-row{ gap:clamp(.55rem, calc(.233rem + 1.584vw), .65rem); }
body[data-theme="contact"] .contact-star{ font-size:clamp(.65rem, calc(-.1475rem + 3.98vw), .9rem); }
body[data-theme="contact"] .contact-row b{ font-size:clamp(.68rem, calc(-.173rem + 4.27vw), .95rem); white-space:nowrap; }
body[data-theme="contact"] .contact-row span{ font-size:clamp(.75rem, calc(-.185rem + 4.69vw), 1.05rem); white-space:nowrap; }
/* ROUND FINAL RESPONSIVE (2026-09-29) : RESSOURCES MOBILE UNIQUEMENT -- demande explicite d'Aliette
limitee au mobile ("FR + EN, mobile"). La regle partagee ci-dessus (dans le bloc ≤899.98px, qui
couvre AUSSI la tablette pour ce hero specifique, cf. commentaire "Mobile (≤899.98px)" plus haut)
n'est PAS modifiee, pour ne pas toucher un etat tablette potentiellement deja valide -- on la
surcharge ici uniquement sous 680px. Mesure reelle a 375px avant correction : 26px au-dessus de
la lune / 56px en dessous (ecart 30px). Nouvelle repartition (marge-top rendue moins negative de
+15px, marge-bottom rendue plus negative de -15px, somme strictement preservee a -74.56px donc
hauteur du hero inchangee) : ~41px au-dessus / ~41px en dessous, verifie via analyse pixel du
PNG (bornes reelles du croissant, hors marge transparente du fichier) a 320/375px. */
body[data-theme="ressources"] .hero-figure img{
margin-top:.43rem;
margin-bottom:-5.09rem;
}
}
/* 2026-09-21 (2e passe) : vérification du dégradé demandée par Aliette -- comparaison avec la
référence Ateliers Cartomancie. Le dégradé --anthracite-gradient est défini par des paliers en
POURCENTAGE (0/42/72/100%) le long de sa ligne diagonale (160deg) : cette ligne n'a pas une longueur
fixe, elle dépend de la largeur ET de la hauteur de la boîte à laquelle le dégradé s'applique. Or le
hero Ateliers (référence validée) est nettement plus haut (~590px à 1440px de large) que les heros
Contact (~530px) et Ressources (~492px) : sur une boîte plus basse, les mêmes paliers en % tombent
à une position ABSOLUE plus proche du haut -- la zone dorée apparaît donc plus tôt / plus étendue
proportionnellement, ce qui correspond bien à ce qu'Aliette observe ("zone dorée très à droite").
Correction : paliers légèrement reculés (42/72% -> ~44/76% sur Contact, ~46/79% sur Ressources,
calculés pour repositionner le début de la zone dorée à une place comparable à la référence Ateliers
une fois ramené à la hauteur propre de chaque hero), sans toucher aux couleurs elles-mêmes ni à la
variable --anthracite-gradient partagée (toujours utilisée telle quelle sur Ateliers/.band--dark). */
body[data-theme="contact"] .hero{
background:linear-gradient(160deg, #14110F 0%, #332F2F 44%, #5C4726 76%, #8A6A2E 100%);
}
body[data-theme="ressources"] .hero{
background:linear-gradient(160deg, #14110F 0%, #332F2F 47%, #5C4726 81%, #8A6A2E 100%);
}
/* 2026-09-21 (9e passe) : RESSOURCES -- davantage d'espace entre la fin du hero et le début du
premier contenu ("Méditation guidée"), FR + EN, desktop + mobile. Référence explicite donnée par
Aliette : la respiration actuellement validée sur CONTACT entre fin de hero et début de contenu
(mesurée : 112px desktop / 68px mobile, portée uniquement par .band.tight padding-top sur cette
page). Sur Ressources, ce même espace n'était porté que par .band.tight padding-top de base (48px
desktop / 28px mobile, aucune autre marge ne contribuant) -- porté ici directement aux valeurs de
référence Contact. Le sélecteur adjacent .hero + .band.tight cible uniquement la toute première
section de contenu (méditation/vidéo), sans toucher à la 2nde section "À lire". */
body[data-theme="ressources"] .hero + .band.tight{ padding-top:4.25rem; }
@media (min-width:900px){
body[data-theme="ressources"] .hero + .band.tight{ padding-top:7rem; }
}
/* ============================================================================
LA VOIE ROYALE / THE ROYAL PATH — nouvelle section "fonctionnement"
(2026-09-21, round 21, Aliette — design validé : encadré unique continu,
fond blanc, liseré rouge = --accent déjà utilisé/validé sur cette page ;
logique de structure inspirée d'ATOUT (.module-box) mais classe dédiée
.vr-encadre pour ne JAMAIS hériter des réglages mobiles spécifiques
d'ATOUT (.module-box, .shell.mid.prose:has(ul), etc.) — l'encadré garde
sa largeur/mise en page propre, cf. consigne explicite d'Aliette. */
body[data-theme="voie-royale"] .vr-encadre{
border:2px solid var(--accent);
background:#fff;
padding:clamp(1.4rem,4vw,2.5rem);
}
/* Neutralise la marge générique ".prose h2{margin-top:2.4rem}" sur le tout premier titre de
l'encadré : sans ça, l'espace au-dessus de "La Voie Royale…" (padding du bloc + cette marge)
est mécaniquement plus grand que l'espace en dessous du dernier élément (qui n'a pas de marge
propre) — déséquilibre perçu et signalé par Aliette (surtout visible mobile, mais la cause est
la même à toutes les largeurs, donc corrigé sans media query). */
body[data-theme="voie-royale"] .vr-encadre .prose.center > h2:first-child{ margin-top:0; }
/* Largeur de lecture à l'intérieur de l'encadré : Aliette signale que certaines phrases
s'arrêtent trop tôt horizontalement alors que l'encadré a de la place. La contrainte générique
".prose{max-width:var(--measure)}" (66ch) est donc désactivée ICI UNIQUEMENT — la largeur reste
de toute façon bornée par l'encadré lui-même (~820px desktop, pleine largeur mobile moins
padding), donc pas de risque de ligne trop longue pour du texte aussi court. */
body[data-theme="voie-royale"] .vr-encadre .prose,
body[data-theme="voie-royale"] .vr-encadre .prose p,
body[data-theme="voie-royale"] .vr-encadre .prose li{
max-width:none;
}
/* Introduction "La Voie Royale…" : les 3 points doivent se percevoir comme 3 idées distinctes —
respiration légèrement augmentée entre eux (au lieu du gap générique de liste, .55rem). */
body[data-theme="voie-royale"] .vr-intro-list{ gap:1.35rem; }
/* Sous-liste "+" du Rendez-vous d'ouverture : même rythme propre que le round 21, mais SANS
retrait horizontal (round 23, point 5 — Aliette demande que les lignes "+" restent sur le même
axe vertical que la ligne "✦" qui les introduit ; .prose ul.plain a déjà padding-left:0 par
défaut, donc retirer le padding-left ici suffit à aligner tout le monde). */
body[data-theme="voie-royale"] .vr-rv-sub{
margin-top:.55rem;
padding-left:0;
gap:.5rem;
}
/* Rythme entre les 3 grands moments de "Déroulement de chacune des étapes" (Cheminement en trois
temps / À la fin de l'étape / Entre les rendez-vous) : légère respiration additionnelle pour
que les 3 ensembles soient immédiatement perceptibles comme distincts, sans créer de grand vide. */
body[data-theme="voie-royale"] .vr-step-group{ margin-top:2.15rem; }
/* Journal de bord : mise en valeur discrète (italique + fin trait vertical, rouge secondaire déjà
validé sur cette page pour .price/.quote) — volontairement PAS un
/.quote : ce n'est
pas une citation. */
body[data-theme="voie-royale"] .vr-journal{
border-left:2px solid #8A2018;
padding:.3rem 0 .3rem 1.1rem;
font-style:italic;
color:var(--ink-soft);
}
/* Séquence WhatsApp (➜) : traitement visuellement subordonné aux ✦ (déjà validé par Aliette sur
la maquette) — retrait, taille réduite, teinte atténuée. */
body[data-theme="voie-royale"] .vr-wa{
margin-top:.9rem;
padding-left:1.3rem;
font-size:.92rem;
color:var(--ink-faint);
gap:.5rem;
}
/* ---------- Mobile : cadre de lecture cohérent avec le reste du site (Guidance/Accompagnement/
Atelier Cartomancie/Atout) sur TOUT le reste de la page LA VOIE ROYALE, hors nouvel encadré
(qui garde sa propre largeur — cf. .vr-encadre ci-dessus, jamais ciblé par ces règles puisque
son .shell.mid porteur ne porte pas la classe .prose). Mêmes valeurs que le motif déjà établi
sur ATOUT (page sœur, même famille de composants). ---------- */
@media (max-width:679.98px){
body[data-theme="voie-royale"] .band.tight .shell.mid.prose:has(ul){
padding-inline:calc(var(--pad) + 1.1rem);
}
body[data-theme="voie-royale"] .band.tight .shell.mid.prose:not(:has(ul)){
padding-inline:calc(var(--pad) + 1.3rem);
}
body[data-theme="voie-royale"] .band.tight .shell.mid:not(.prose):has(> img.picto){
padding-inline:calc(var(--pad) + 1.3rem);
}
}
/* ============================================================================
LA VOIE ROYALE / THE ROYAL PATH — round 22 (2026-09-21), corrections fines
après validation du principe de l'encadré (fond blanc + liseré rouge). */
/* Point 9 : séparateur sobre (sans étoile ✦ centrale) pour encadrer l'introduction
"La Voie Royale…" / "The Royal Path…" — même poids visuel que .rule-orn (ligne
dégradée dorée) mais sans le glyphe central. */
body[data-theme="voie-royale"] .vr-sober-rule{
border:0; height:1px;
background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
margin-block:clamp(1.3rem,3.5vw,2.2rem);
}
/* Points 16/17 : respiration entre les 3 grands moments du Déroulement — légèrement
augmentée par rapport au round 21 (2.15rem -> 2.4rem), en particulier perceptible
juste après le journal de bord. */
body[data-theme="voie-royale"] .vr-step-group{ margin-top:2.4rem; }
/* Point 6 : nowrap desktop uniquement (ne force rien sur mobile, où le retour à la
ligne naturel reste acceptable). */
@media (min-width:900px){
body[data-theme="voie-royale"] .vr-nowrap-d{ white-space:nowrap; }
}
/* Points 26/28/29 : respiration additionnelle avant "Accompagnement long"/"Long-term
mentorship", "Si tu n'aimes pas lire"/"If you don't like reading" et "Prérequis"/
"Prerequisite" dans le bandeau rouge — un peu plus marquée sur mobile. */
body[data-theme="voie-royale"] .vr-red-gap{ margin-top:1.9rem; }
@media (max-width:679.98px){
body[data-theme="voie-royale"] .vr-red-gap{ margin-top:2.2rem; }
}
/* Point 31 : la phrase de continuité passe à la ligne, en plus petit, dans une teinte
secondaire discrète adaptée au fond rouge sombre (même logique atténuée que
--ink-faint sur fond clair, ici une crème assourdie pour rester lisible). */
body[data-theme="voie-royale"] .vr-continuity{
display:inline-block;
margin-top:.5rem;
font-size:.85rem;
color:rgba(247,237,218,.62);
}
/* Point 22 (round 22) : bandeau rouge — un peu plus de hauteur/respiration sur mobile.
NOTE round 24 : cette règle est désormais remplacée par les paddings mobile dédiés
(point 9 du round 24, plus bas dans ce fichier), qui gèrent haut ET bas ensemble. */
/* Point 3 : très légère réduction du haut du bloc tarifs/CTA sur mobile, pour
resserrer un peu la transition juste après le bandeau rouge. */
@media (max-width:679.98px){
body[data-theme="voie-royale"] .band--gradient-rouge + section.band.tight.band--flow{
padding-top:clamp(1.3rem,3vw,2rem);
}
}
/* Points 32/33 (round 22) : distribution verticale cadre tarifaire -> catchphrase -> CTA.
ROUND 23, point 10 : encore davantage de respiration entre le prix et la catchphrase (1.9rem
-> 2.6rem) — mais SURTOUT PAS davantage entre la catchphrase et le bouton, qui reste
inchangé à 1.7rem (consigne explicite d'Aliette).
ROUND 24, point 14 : encore plus de respiration prix -> catchphrase (2.6rem -> 3.2rem), en
FR/EN et desktop/mobile — le levier reste totalement indépendant de celui du diamant (point 13
ci-dessus) et du bouton (.vr-btn-row, toujours inchangé à 1.7rem). */
body[data-theme="voie-royale"] .vr-catchphrase{ margin-top:3.2rem; }
body[data-theme="voie-royale"] .vr-btn-row{ margin-top:1.7rem; }
/* Points 19/20 (round 22) : empreintes — rapproche le texte de l'image (compense la marge
transparente interne au PNG, ~21-23%) et agrandit légèrement l'illustration sur
desktop.
ROUND 23, point 6 : sur mobile, la réduction est allée légèrement trop loin (empreintes
presque collées au texte) — on redonne un peu de respiration, SANS revenir à l'espacement
d'origine. Le desktop (≥900px) est explicitement validé par Aliette et reste inchangé. */
body[data-theme="voie-royale"] .vr-footprints{
margin-bottom:-1.4rem;
}
@media (min-width:900px){
body[data-theme="voie-royale"] .vr-footprints{
width:clamp(150px,15vw,205px);
margin-bottom:-2.3rem;
}
}
/* ROUND 24, point 7 : sur mobile, réduction du padding-bottom de la section qui contient
l'encadré (espace au-dessus des empreintes). Conservé tel quel au round 25 (Aliette demande
explicitement de ne plus toucher les espacements de section ce round-ci). */
@media (max-width:679.98px){
body[data-theme="voie-royale"] section.band.tight:has(.vr-encadre){
padding-bottom:1.25rem;
}
}
/* ROUND 25, point 1 : TRANSLATION pure de l'illustration des empreintes vers le haut, en FR/EN
et mobile/desktop — sans changer l'espace TOTAL occupé (somme margin-top + margin-bottom
inchangée par rapport à l'état round 24 : mobile -1rem, desktop -2.3rem), uniquement
redistribuée entre le dessus (nouveau margin-top, négatif) et le dessous (margin-bottom rendu
moins négatif d'autant) pour que les empreintes se retrouvent légèrement AU-DESSUS du milieu
de leur espace disponible, sans l'atteindre exactement. Déplacement modéré (~0.6-0.7rem),
perceptible mais pas massif. */
body[data-theme="voie-royale"] .vr-footprints{
margin-top:-.65rem;
margin-bottom:-.35rem;
}
@media (min-width:900px){
body[data-theme="voie-royale"] .vr-footprints{
width:clamp(150px,15vw,205px);
margin-top:-.8rem;
margin-bottom:-1.5rem;
}
}
/* Point 1 : cadre de lecture confortable pour le texte du hero mobile (même motif que
Graine/Atout/Ateliers : padding-inline additionnel sur le bloc texte). */
@media (max-width:679.98px){
body[data-theme="voie-royale"] .hero-in > div:first-child{ padding-inline:.9rem; }
}
/* Point 2 (round 22) : illustration du hero mobile — le PNG a une marge transparente interne
d'environ 18.7% en haut / 19.5% en bas (mesuré sur le fichier). Marges négatives
pour resserrer l'espace vide au-dessus ET en dessous sans toucher au dessin visible.
ROUND 23, points 1/2 : Aliette distingue désormais explicitement FR et EN — FR doit encore
réduire (au-dessus ET en dessous) ; EN garde le même espace au-dessus (déjà bon) et ne réduit
qu'un peu en dessous. Règle scindée par [data-lang] (budget encore disponible dans la marge
transparente du PNG : ~4.2rem haut / ~4.4rem bas à cette taille mobile — les valeurs ci-dessous
restent nettement en-deçà). */
@media (max-width:679.98px){
body[data-theme="voie-royale"][data-lang="fr"] .hero-figure{
margin-top:-2.6rem;
margin-bottom:-2.7rem;
}
/* ROUND 24/25, point 3 : FR mobile est la référence visuelle validée — EN s'en rapproche
encore un peu plus ce round-ci (équilibre visuel comparable, pas une égalité numérique :
structure EN différente avec 2 étiquettes au lieu d'1, cf. .vr-hero-badges qui gère déjà sa
propre respiration). Budget de marge transparente interne du PNG (même asset, même taille
rendue 262.5px) : ~49.2px haut / ~51.2px bas — les valeurs ci-dessous restent en-deçà. */
body[data-theme="voie-royale"][data-lang="en"] .hero-figure{
margin-top:-2.75rem;
margin-bottom:-2.7rem;
}
}
/* ============================================================================
LA VOIE ROYALE / THE ROYAL PATH — round 23 (2026-09-21), dernière passe de
corrections fines après validation de la quasi-totalité du rendu par Aliette. */
/* Point 3 : badges du hero EN mobile ("French only" / "Application only") — alignés sur le
motif déjà établi sur ATOUT EN (.badge en flex, gap, margin-top:1.05rem — cf. hero d'Atout
EN, page non modifiée ici, seulement prise comme référence), + un peu de respiration
supplémentaire EN DESSOUS des badges sur mobile uniquement (avant l'image du hero qui suit
dans l'empilement), puisque cette page a deux badges (donc plus large/dense) contrairement à
la version FR qui n'en a qu'un seul. */
@media (max-width:679.98px){
body[data-theme="voie-royale"][data-lang="en"] .vr-hero-badges{ margin-bottom:.75rem; }
}
/* Point 7 : desktop uniquement — réduit légèrement l'espace AU-DESSUS des empreintes (padding-
bottom de la section qui contient l'encadré), sans toucher au gap image -> texte des
empreintes elles-mêmes (jugé bon par Aliette) ni au mobile (cf. point 6 ci-dessus, déjà
traité séparément). */
@media (min-width:900px){
body[data-theme="voie-royale"] section.band.tight:has(.vr-encadre){
padding-bottom:2rem;
}
}
/* Point 8 (round 23) : bandeau rouge — la hauteur totale (desktop) doit rester la même. Le
padding-top était jusqu'ici posé en style inline dans le HTML (retiré des deux pages) ; il
est repris ici tel quel pour ne rien changer par défaut.
ROUND 24, point 9 : Aliette précise qu'elle ne veut PAS une symétrie mathématique parfaite —
légèrement MOINS d'espace au-dessus du contenu, légèrement PLUS en dessous, de façon subtile,
sur desktop ET mobile, sans changer la hauteur totale du bandeau. Remplace la répartition
symétrique 4rem/4rem (desktop) du round 23 par une répartition légèrement asymétrique de même
somme, et ajoute l'équivalent sur mobile (jusqu'ici mobile utilisait la même formule en haut
et en bas, cf. règle .band--gradient-rouge{padding-bottom:...} plus haut dans ce fichier
round 22 — désormais remplacée ci-dessous par des valeurs propres). */
body[data-theme="voie-royale"] .band--gradient-rouge{
padding-top:clamp(2.75rem,7vw,5rem);
}
@media (max-width:679.98px){
body[data-theme="voie-royale"] .band--gradient-rouge{
padding-top:2.5rem;
padding-bottom:3rem;
}
}
@media (min-width:900px){
body[data-theme="voie-royale"] .band--gradient-rouge{
padding-top:3.75rem;
padding-bottom:4.25rem;
}
}
/* Point 9 (round 23) : diamant — un peu moins d'espace après le bandeau rouge sur mobile, en
tirant l'illustration dans sa propre marge transparente interne (~23% mesuré sur le fichier),
même principe que pour les empreintes.
ROUND 24, point 13 : encore un peu moins d'espace, AU-DESSUS ET EN DESSOUS du diamant, en FR
ET EN, desktop ET mobile — mais un ajustement fin ("un peu", pas un collage). margin-inline
déplacé ici depuis le style inline du HTML pour permettre ce contrôle responsive complet
(le HTML ne porte plus aucune marge inline sur .price-diamond). */
body[data-theme="voie-royale"] .price-diamond{
margin-inline:auto;
margin-top:-.5rem;
margin-bottom:-1.6rem;
}
@media (max-width:679.98px){
body[data-theme="voie-royale"] .price-diamond{
margin-top:-1.3rem;
margin-bottom:-1.5rem;
}
}
@media (min-width:900px){
body[data-theme="voie-royale"] .price-diamond{
margin-top:-1.8rem;
margin-bottom:-2.4rem;
}
}
/* Point 11 : respiration supplémentaire entre la catchphrase/bouton final et le paragraphe
FAQ/WhatsApp qui clôt la page — SANS toucher à l'espace catchphrase -> bouton (.vr-btn-row,
inchangé, cf. point 10 plus haut). */
body[data-theme="voie-royale"] .vr-faq-gap{ margin-top:2.1rem; }
/* Point 12 : le bouton final ("Je réserve mon appel" / "Book a call") est seul dans son
.btn-row, donc hérite par défaut de la règle générique ".btn-row .btn:only-child{width:100%}"
(mobile, cf. plus haut dans ce fichier) — trop large. Même correctif déjà appliqué sur
ATOUT/GRAINE : largeur proportionnée au contenu, largeur mini alignée sur le reste du site. */
@media (max-width:679.98px){
body[data-theme="voie-royale"] .btn-row{ align-items:center; }
body[data-theme="voie-royale"] .btn-row .btn{ width:auto; min-width:220px; }
}
/* ============================================================
QUI SUIS-JE ? / MON HISTOIRE — ABOUT / MY STORY (round 30, 2026-09-21)
Intervention de fond validée par Aliette, scopée à body[data-page="qui-suis-je"] uniquement
(FR qui-suis-je.html + EN en/about.html partagent le même data-page) — ne touche aucune autre
page. Résumé : hero incarné avec photo (composant .hero/.hero-in générique du site, déjà utilisé
ailleurs, plutôt qu'un nouveau système), résolution de la répétition visuelle "Qui suis-je ?"/
"Qui je suis ?" (structure/hiérarchie uniquement, texte inchangé), largeur de lecture mobile
alignée sur Guidance/Accompagnement/Ateliers Cartomancie (mesurée sur ces 3 pages : leurs
paragraphes de récit ont tous une marge mobile de --pad + .9rem, cf. déjà en place sur Ateliers
ligne ~2385 — reproduit ici à l'identique, ces 3 pages de référence ne sont pas modifiées),
photo supplémentaire apropos-3-web.jpg (seul asset "apropos-*" non déjà réutilisé dans une des
planches-collage existantes) intégrée dans "L'Alouette : mon nom d'oiseau" (section jusqu'ici
sans image), apropos-5.jpg conservé (section "De la quête à la transmission"). */
/* Hero : composant .hero/.hero--tight générique (texte + photo), remplace l'ancien bloc texte
seul centré. Alignement à gauche du bloc texte (le composant .hero générique est déjà pensé
pour du texte aligné à gauche face à une image, cf. accueil/atout/voie-royale). */
body[data-page="qui-suis-je"] .hero-in > div:first-child{ text-align:left; }
/* Round 32, point 4 (demande Aliette) : le paragraphe de présentation ("Je me définis
volontiers...") gardait la taille agrandie de .lede (clamp(1.12rem,2vw,1.3rem)), ce qui le
faisait lire comme un sous-titre plutôt que du texte courant — "enlève le caractère gras...
traité comme du texte courant". Ramené ici à la taille de base du corps de texte du site
(1.0625rem/1.78, celle de .prose p), en dehors du gabarit .lede pour cette page. */
body[data-page="qui-suis-je"] .hero .lede{
margin-inline:0; max-width:42ch; color:var(--ivory-2);
font-size:1.0625rem; line-height:1.78; font-weight:400;
}
/* "Qui je suis ?"/"Who am I?" : reprise en écho du h1 juste au-dessus. Round 32, point 3 :
doit avoir EXACTEMENT la même taille/graisse/style que le corps de texte qui l'entoure —
désormais cohérent avec le paragraphe .lede ci-dessus, ramené lui aussi à cette même taille
de base (round 32, point 4) : les deux lignes du hero sont maintenant strictement identiques
en taille, graisse et style, toutes deux alignées sur le texte courant du site. */
body[data-page="qui-suis-je"] .hero-echo{
font-family:var(--body); font-style:normal; font-weight:400;
font-size:1.0625rem; line-height:1.78; letter-spacing:0;
color:var(--ivory-2); margin-top:.55rem;
}
/* ============================================================
ROUND 31 — 2e passe de corrections (2026-09-21), demandée par Aliette après relecture du
round 30 sur FR/EN desktop+mobile. Résumé des points traités ici (CSS) : (1) vrai hero avec
dégradé anthracite/doré (identique à --anthracite-gradient déjà utilisé sur Ateliers/.band--dark),
photo nettement réduite ; (3/4) "Appelez-moi..." converti en
côté HTML — la couleur unique
est fixée ici (même doré que "pont entre ciel et terre", qui utilise déjà .band--dark
strong{color:var(--gold-bright)} plus haut dans ce fichier) ; (6) respiration réduite avant
"Mes mille vies" ; (7/9/10) compositions photo légèrement descendues ; (12) respiration accrue
du bandeau final "Ma vision" ; (14) CTA mobile compact, même logique que ATOUT/Graine/Voie
Royale (cf. leurs règles body[data-theme="X"] .btn-row plus haut) ; (15) rectangle ivoire
résiduel sous la dernière section sombre, mobile ET desktop — la marge sitewide
.site-footer{margin-top:...} (ligne ~897, valable sur toutes les pages) crée un espace de
fond ivoire entre et le footer ; invisible sur les pages qui se terminent par une
section claire, mais visible ici car la page se termine par .band--dark. Neutralisée
uniquement pour cette page. Aucune autre page n'est concernée par les règles ci-dessous. */
/* --- (1) Hero : dégradé anthracite/doré, texte clair, photo réduite --- */
body[data-page="qui-suis-je"] .hero{
background:var(--anthracite-gradient);
color:var(--ivory-2);
}
body[data-page="qui-suis-je"] .hero .eyebrow{ color:var(--gold-bright); }
body[data-page="qui-suis-je"] .hero h1{ color:#F4E7C9; }
/* Photo nettement réduite (desktop/tablette) — l'ancienne valeur générique de .hero--tight
(min(380px,72vw)) rendait la photo trop imposante par rapport au bloc de texte, demande
explicite de réduction. Round 32 : remplacée par la version détourée/fond transparent
(apropos-portrait-cutout.png, proportions 553×640, différentes du carré d'origine) — la
bordure/anneau doré ajoutée en round 31 est retirée (elle dessinait un rectangle visible
autour de l'image, exactement ce qu'Aliette ne veut plus voir avec un détourage). Round 33,
point 1 : le round 32 (200px -> 215px) est allé légèrement trop loin ("légèrement trop
grande") — ramenée à une taille intermédiaire entre les deux (215px -> 207px). */
body[data-page="qui-suis-je"] .hero-figure{ max-width:min(207px,33vw); }
/* Composition resserrée (round 32) : le shell hero par défaut (1160px) laissait trop de vide
entre le bloc de texte et la photo, une fois celle-ci réduite — la page paraissait "éparse".
Resserré à une largeur qui rapproche réellement texte et photo, tout en gardant les deux
colonnes lisibles. */
@media (min-width:900px){
body[data-page="qui-suis-je"] .hero .shell.hero-in{ max-width:840px; }
/* Round 33, point 2 : micro-décalage du bloc surtitre/titre/texte de présentation vers la
gauche, pour un meilleur équilibre visuel avec la photo — desktop uniquement, la photo et
la composition mobile ne sont pas concernées par ce point. */
body[data-page="qui-suis-je"] .hero-in > div:first-child{ margin-left:-1rem; }
}
@media (max-width:899.98px){
/* Round 34, points 2/3 : jusqu'ici l'eyebrow occupait seule toute la largeur (règle générique
.hero--tight .hero-in .eyebrow{flex:1 1 100%}), au-dessus de la ligne titre+photo — la photo
et le bloc surtitre/titre se lisaient donc comme deux éléments disjoints plutôt qu'une seule
composition. Remplacement du flex générique par une grille dédiée à cette page (mobile
uniquement, desktop non concerné) : surtitre + titre forment une colonne de texte, la photo
occupe la colonne de droite sur la MÊME hauteur que ce bloc (2 lignes de grille), les deux
étant ainsi visuellement alignés sur un même plan plutôt que superposés. Texte de présentation
et écho repris en dessous, pleine largeur, inchangés dans leur logique. */
/* Round 35 : les 2 lignes de la grille round 34 étaient toutes deux "auto", et la photo
(grid-row:1/3) forçait leur somme à correspondre exactement à sa propre hauteur (108.3px)
— l'espace "en trop" non réclamé par le texte se répartissait alors implicitement ENTRE le
surtitre et le titre plutôt qu'au-dessus du bloc, ce qui couplait involontairement la
position du bloc de texte à la hauteur de la photo. Remplacé par des lignes de hauteur FIXE
(dont la somme égale exactement la hauteur actuelle de la photo, donc AUCUN changement pour
la photo, ni en taille ni en position verticale) : la ligne 1 est dimensionnée pour que le
surtitre (aligné en bas de cette ligne) place le bloc surtitre+titre avec son centre vertical
approximativement au niveau du haut de l'épaule dans la photo (~63% de sa hauteur), la ligne
2 accueille le titre (aligné en haut) avec l'espacement surtitre/titre déjà établi (.2rem,
valeur déjà utilisée round 34, non modifiée ici) — les lignes fixes ne "s'étirent" plus,
donc ce positionnement est désormais indépendant de la photo. */
/* 2026-09-30 (retour Aliette, point 3 liste réelle) : la grille dédiée (rounds 34/35, ci-dessus
en commentaire dans l'historique) plaçait eyebrow/h1/lede/hero-echo via grid-row/grid-column —
mais aucun de ces éléments n'est un enfant DIRECT de la grille .hero-in (ils sont tous imbriqués
dans le
englobant, lui seul étant le véritable item de grille) : grid-row/grid-column et
align-self n'ont donc jamais eu d'effet réel sur leur position (seules les propriétés "normales"
comme text-align/margin s'appliquaient). Résultat sur mobile réel : le texte se contentait d'un
flux bloc normal dans la 1re ligne de la grille (qui s'étirait pour tout contenir), tandis que la
2e ligne (minmax(47.5px,auto)), non réclamée par un véritable enfant, restait vide sous le bloc de
texte — d'où le hero "beaucoup trop haut" avec une "grande zone vide" signalés, en plus du texte
centré (text-align:center ci-dessous) au lieu d'aligné à gauche comme demandé.
Remplacé par le layout générique déjà utilisé partout ailleurs sur le site pour .hero--tight en
mobile (une seule rangée flex, cf. règle générique plus haut ~L.3050) : eyebrow/h1/lede/hero-echo
restent dans le flux normal du
de texte (aligné à gauche via la règle générique
.hero-in > div:first-child{text-align:left}, L.4077, déjà en place), le portrait reste à droite
sur la même ligne — hauteur du hero déterminée uniquement par le contenu réel du texte, sans
ligne de grille vide. Tablette portrait (680-899.98px, bloc suivant) et desktop/paysage (≥900px)
ne sont pas concernés par ce bloc, strictement inchangés. */
body[data-page="qui-suis-je"] .hero-in .lede{ text-align:left; margin-top:.6rem; }
body[data-page="qui-suis-je"] .hero-in .hero-echo{ text-align:left; margin-top:.1rem; margin-bottom:0; }
/* Portrait : même taille que la version précédente (round 33, point 1 — clamp(74px,24vw,120px),
non modifiée), simplement recentré verticalement sur toute la hauteur du bloc de texte (désormais
potentiellement plus haut puisqu'il inclut lede + hero-echo) via align-items:center hérité de la
règle générique, au lieu d'un alignement en haut forcé qui n'avait de toute façon aucun effet réel. */
body[data-page="qui-suis-je"] .hero-figure{ max-width:clamp(74px,24vw,120px); margin:0; }
}
/* 2026-09-29 (retour tablette réelle) : Aliette signale le hero PORTRAIT (800px) cassé — surtitre
invisible, titre coupé/collé sous le header. Paysage (1280px) déjà correct, non concerné (≥900px,
hors de portée du bloc ci-dessus). Cause : le bloc ≤899.98px ci-dessus (pensé et réglé pour le
MOBILE téléphone) place surtitre+titre dans une grille à HAUTEUR FIXE (60.8px + 47.5px, cf.
commentaire round 35 ci-dessus) — au portrait tablette, "Qui suis-je ?" est rendu dans une taille
de police plus grande qu'au mobile (clamp() vw-dépendant) et dépasse ces 108.3px fixes ; le hero
ayant overflow:hidden (cf. .hero générique), le dépassement (le haut du bloc surtitre+titre,
surtitre compris) est purement invisible. Plutôt que recalculer une 2e paire de hauteurs fixes
propre à la tablette, le portrait retrouve ici la composition standard à 2 colonnes déjà utilisée
partout ailleurs sur le site (texte à gauche, photo à droite, hauteur de ligne naturelle/auto) —
la même composition que le paysage déjà validé, simplement plus étroite. Uniquement 680-899.98px :
le mobile réel (<680px, réglages ci-dessus) et le paysage réel (≥900px, gabarit desktop par défaut)
restent strictement inchangés. */
@media (min-width:680px) and (max-width:899.98px){
body[data-page="qui-suis-je"] .hero-in{
display:grid;
grid-template-columns:1.15fr .85fr;
grid-template-rows:none;
}
body[data-page="qui-suis-je"] .hero-in .eyebrow{ grid-column:auto; grid-row:auto; align-self:auto; margin-bottom:1rem; }
body[data-page="qui-suis-je"] .hero-in h1{ grid-column:auto; grid-row:auto; align-self:auto; margin-top:0; }
body[data-page="qui-suis-je"] .hero-in .lede{ grid-column:auto; grid-row:auto; text-align:left; }
body[data-page="qui-suis-je"] .hero-in .hero-echo{ grid-column:auto; grid-row:auto; text-align:left; }
body[data-page="qui-suis-je"] .hero-figure{
grid-column:auto; grid-row:auto; justify-self:auto; align-self:auto; margin:0;
max-width:min(207px,33vw);
}
}
/* 2026-09-30 (retour Aliette, dernier point isolé) : hero mobile désormais validé dans sa structure/
dimensions/alignement/espacement (bloc ≤899.98px plus haut, non retouché) -- EN UNIQUEMENT (FR non
concerné, texte différent/plus court, pas de souci signalé), les retours à la ligne du paragraphe de
présentation restaient maladroits : "and an" se retrouvait seul sur sa propre ligne, juste au-dessus
de "energy practitioner…" (le lien insécable déjà posé entre ces deux mots, cf. HTML, les empêche de
se séparer l'un de l'autre mais ne les empêche pas d'isoler "and an" quand le couple entier ne tient
plus sur la ligne précédente). Micro-ajustement AUTORISÉ explicitement (taille de police légèrement
réduite, EN mobile uniquement) : 17px -> 16px (1.0625rem -> 1rem, -6 %, la plus petite réduction qui
suffise -- vérifié en direct : 16.5px et au-dessus reproduisent encore la coupure "and an" / "energy
practitioner…", 16px est le premier palier qui regroupe "and" sur la ligne précédente). line-height
(1.78, sans unité dans la règle de base) suit proportionnellement, aucun ajout nécessaire. Texte
inchangé (aucun mot ajouté/retiré/reformulé).
IMPORTANT : placé ici dans un bloc ≤679.98px DÉDIÉ et SÉPARÉ du bloc ≤899.98px plus haut (plutôt
qu'ajouté À L'INTÉRIEUR de ce bloc comme au premier essai) -- ce bloc ≤899.98px couvre AUSSI la
tablette portrait (680-899.98px) sur les propriétés qu'il ne redéfinit pas lui-même, et le bloc
680-899.98px qui le suit ne redéfinit pas font-size sur .lede : une règle ajoutée dans le bloc
≤899.98px aurait donc involontairement fuité jusqu'en tablette portrait (vérifié en direct : 16px
au lieu des 17px attendus à 800px de large avant cette correction), en violation explicite de "NE
TOUCHE PAS tablette/desktop". Un vrai ≤679.98px isole strictement ce changement au mobile téléphone,
sans toucher tablette ni desktop. */
@media (max-width:679.98px){
body[data-page="qui-suis-je"][data-lang="en"] .hero-in .lede{ font-size:1rem; }
}
/* Round 34, point 1 : EN mobile uniquement — "But that is what I do." doit former sa propre
ligne complète (au lieu de se terminer sur un orphelin "what I do." après un retour à la ligne
naturel), tout en restant un texte courant (pas de nouvel élément/paragraphe). Un entoure
ce segment dans le HTML (en/about.html uniquement, FR non touché) et devient display:block
uniquement sur mobile — pas de en dur qui aurait aussi affecté le desktop (non concerné
par ce point). */
@media (max-width:899.98px){
body[data-page="qui-suis-je"][data-lang="en"] .hero-lede-break{ display:block; }
}
/* --- (3/4) "Appelez-moi Aliette L'Alouette !" / "Call me Aliette L'Alouette!" : n'est plus un
(cf. HTML), traité comme un paragraphe signature avec un espacement propre et UNE seule
couleur dorée, identique à celle de "pont entre ciel et terre" (--gold-bright, déjà utilisée
par .band--dark strong) — résout le "double doré" signalé par Aliette. */
body[data-page="qui-suis-je"] .signature-line{
color:var(--gold-bright);
font-weight:600;
letter-spacing:.02em;
margin-top:clamp(1.9rem,4.5vw,2.75rem);
}
/* --- (4) Bandeau "L'Alouette" : la photo apropos-3-web.jpg est retirée du HTML (round 31) — le
bandeau se termine désormais juste après le texte, avec une respiration légèrement plus
généreuse en bas qu'en haut (id posé sur la section dans le HTML, FR + EN). */
body[data-page="qui-suis-je"] #section-alouette{ padding-bottom:clamp(2.6rem,6vw,4rem); }
/* --- (6/8, round 31+32) Respiration avant "Mes mille vies"/"My thousand lives" (id posé sur la
section dans le HTML) — encore légèrement réduite en round 32 (retour Aliette : toujours un
peu trop d'espace par rapport à la référence "avant Le réveil des sens subtils"). --- */
body[data-page="qui-suis-je"] #mille-vies{ padding-top:clamp(.75rem,2vw,1.3rem); }
/* Round 33, point 7 : desktop non concerné (retour Aliette limité au mobile) — mobile encore
réduit plus bas dans ce fichier, dans le bloc @media(max-width:899.98px) dédié aux
espacements mobiles (point 5 round 32 + point 7 round 33). */
/* Round 34, point 4 : diagnostic complet demandé par Aliette (measure réellement calculé dans le
navigateur, pas seulement lu le CSS). Cause réelle trouvée : la comparaison ne portait pas sur
la bonne paire de valeurs. La référence citée ("fin du bandeau sombre" -> h2) inclut le
padding-bottom du bandeau PRÉCÉDENT (#section-alouette, déjà réduit) + le padding-top de la
section suivante + le margin-top générique du h2. Mais l'espace "actuel" (dernier paragraphe de
#section-reveil -> h2 "Mes mille vies") inclut de la même façon le padding-bottom de
#section-reveil — qui, lui, n'avait JAMAIS été touché (il hérite tel quel du padding-block
générique de .band.tight, 28px mobile / 48px desktop) — PLUS le padding-top de #mille-vies
(déjà réduit deux fois) + le même margin-top de h2. Résultat mesuré : réduire uniquement le
padding-top de #mille-vies (rounds 32/33) ne pouvait jamais suffire, puisque le vrai surplus
se trouvait dans le padding-bottom NON MODIFIÉ de #section-reveil (28px mobile / 48px desktop,
contre seulement 17.6px / 48px pour le padding-top de #section-alouette utilisé côté
référence). Corrigé ici à la source : padding-bottom de #section-reveil réduit pour que le
total (padding-bottom #section-reveil + padding-top #mille-vies + margin-top du h2, identique
des deux côtés) corresponde à la référence mesurée — vérifié dans le navigateur : 56px vs 56px
(mobile), 86px vs 86px (desktop) après correction. FR + EN, desktop + mobile. */
body[data-page="qui-suis-je"] #section-reveil{ padding-bottom:clamp(.8rem,1.9vw,1.7rem); }
/* --- (7) Compositions photo légèrement descendues par défaut : plus d'espace au-dessus, moins
en dessous — classe utilitaire de base, affinée individuellement ci-dessous (round 32, points
9/10/11) pour chacune des 3 figures concernées, qui n'appellent plus le même traitement. --- */
body[data-page="qui-suis-je"] .editorial-img.nudge-down{
margin-top:clamp(2rem,5vw,3.1rem);
margin-bottom:clamp(.9rem,2.4vw,1.5rem);
}
/* Round 32, point 9 : composition "chanteuse" (Mes mille vies) légèrement remontée sur mobile —
espace au-dessus très légèrement réduit pour un meilleur équilibre avec l'espace en dessous,
sans toucher au desktop ni à la taille/composition de l'image. */
@media (max-width:899.98px){
body[data-page="qui-suis-je"] .img-chanteuse{ margin-top:clamp(1.5rem,4vw,2.4rem); }
}
/* Round 32, point 10 : composition "cartomancie" (L'appel) — surtout plus d'espace AU-DESSUS ;
l'espace en dessous n'est pas réduit (repris à une valeur légèrement supérieure, jamais
inférieure, à la base .nudge-down). */
body[data-page="qui-suis-je"] .img-cartomancie{
margin-top:clamp(2.6rem,6vw,3.8rem);
margin-bottom:clamp(1.1rem,2.8vw,1.7rem);
}
/* Round 32, point 11 : image après "Loi Universelle de Correspondances"/"Universal Law of
Correspondence" (De la quête à la transmission) — micro-ajustement supplémentaire, un peu
plus d'espace au-dessus seulement, sans créer un grand vide. */
body[data-page="qui-suis-je"] .img-transmission{ margin-top:clamp(2.3rem,5.4vw,3.4rem); }
/* --- (12) Bandeau final "Ma vision"/"My vision" : davantage de respiration en haut et en bas,
pour une vraie conclusion visuelle (id posé sur la section dans le HTML). --- */
body[data-page="qui-suis-je"] #ma-vision{
padding-top:clamp(3.1rem,6.5vw,4.5rem);
/* Round 33, point 10 : respiration sous le CTA final légèrement augmentée — mesurée : le
padding-bottom précédent (2.4-3.4rem) restait inférieur au padding-top (3.1-4.5rem) à
toutes les largeurs, alors que la demande est l'inverse (bas légèrement supérieur au
haut). Desktop et mobile vérifiés : 5rem > 4.5rem (desktop), 3.4rem > 3.1rem (mobile). */
padding-bottom:clamp(3.4rem,7vw,5rem);
}
/* --- (13/14, round 32) "Qui est avec moi ?"/"Who's with me?" : sorti du gabarit .lede (qui le
distinguait en taille du reste du corps de texte de la section) — traité comme une petite
accroche finale en capitales, avec une respiration nette au-dessus pour bien la détacher du
paragraphe précédent et annoncer la signature qui suit. Le reste du corps de texte de "Ma
vision" (les 3 paragraphes courants) n'a par ailleurs aucune classe/taille spécifique : il
partage déjà uniformément la taille de base du site. */
body[data-page="qui-suis-je"] .vision-cta-line{
margin-top:clamp(2.5rem,5.5vw,3.5rem);
text-transform:uppercase;
letter-spacing:.06em;
font-weight:600;
color:var(--ivory);
}
/* --- (15) Signature graphique (asset fourni par Aliette, remplace le texte) : structure
texte -> QUI EST AVEC MOI -> respiration -> signature -> respiration -> bouton. Taille
adaptée sans déformation (ratio conservé via width/height HTML + max-width CSS uniquement). */
body[data-page="qui-suis-je"] .closing-signature{
display:block;
width:auto;
max-width:min(300px,62vw);
height:auto;
margin:clamp(1.6rem,4vw,2.3rem) auto clamp(1.5rem,3.5vw,2.1rem);
}
/* Round 33, point 9 : signature légèrement trop grande sur mobile uniquement — desktop
inchangé (règle ci-dessus conservée telle quelle), asset/proportions/placement non touchés,
uniquement le plafond de taille mobile réduit. Round 34, point 5 : micro-réduction
supplémentaire (230px -> 220px), toujours mobile uniquement, position/espacements/asset
non touchés — uniquement la taille. */
@media (max-width:899.98px){
body[data-page="qui-suis-je"] .closing-signature{ max-width:min(220px,51vw); }
}
/* --- (14) CTA final mobile compact : même logique déjà validée sur ATOUT/Graine/Voie Royale
(bouton unique repris à une largeur auto avec min-width, plutôt que 100% par défaut). --- */
@media (max-width:679.98px){
body[data-page="qui-suis-je"] .btn-row{ align-items:center; }
body[data-page="qui-suis-je"] .btn-row .btn{ width:auto; min-width:220px; }
}
/* --- (15) Rectangle ivoire résiduel : neutralise la marge sitewide du footer sur cette seule
page (la page se termine par .band--dark, donc cette marge exposait un bandeau de fond ivoire
entre la section sombre et le footer — invisible sur les pages qui se terminent par une
section claire, d'où l'absence de règle générique). Sans effet sur les autres pages. --- */
body[data-page="qui-suis-je"] .site-footer{ margin-top:0; }
/* Largeur de lecture mobile : reprend explicitement la valeur déjà validée sur Guidance/
Accompagnement/Ateliers Cartomancie (marge = --pad + .9rem sur le texte courant) — le projet
n'a pas de règle globale unique pour ça, cf. déjà en place body[data-theme="ateliers"]
.band.tight .prose ligne ~2385. Ici .prose est directement sur le même élément que .shell.narrow
(contrairement à Ateliers), d'où le sélecteur unique ci-dessous qui couvre toutes les sections
texte de la page, claires et sombres. */
@media (max-width:679.98px){
body[data-page="qui-suis-je"] .band.tight .shell.narrow.prose{ padding-inline:calc(var(--pad) + .9rem); }
}
/* --- (round 32, point 5) Réduction MODÉRÉE de l'espace mobile au-dessus de plusieurs titres de
section — id posés sur les sections concernées dans le HTML. Ne touche pas au padding-bottom
(qui reste symétrique/partagé avec les autres sections .band.tight), uniquement au padding-top,
et uniquement sur mobile (desktop inchangé). --- */
@media (max-width:899.98px){
body[data-page="qui-suis-je"] #section-enfant{ padding-top:clamp(1rem,3vw,1.5rem); }
body[data-page="qui-suis-je"] #section-reveil{ padding-top:clamp(1.1rem,3vw,1.6rem); }
body[data-page="qui-suis-je"] #section-appel{ padding-top:clamp(1.1rem,3vw,1.6rem); }
body[data-page="qui-suis-je"] #section-quete{ padding-top:clamp(1.1rem,3vw,1.6rem); }
/* --- (point 6) Espace réduit sous les photos d'enfance sur mobile, composition inchangée. --- */
body[data-page="qui-suis-je"] .enfance-img{ margin-bottom:clamp(.85rem,2.2vw,1.3rem); }
/* Round 33, point 7 : espace avant "Mes mille vies"/"My thousand lives" encore réduit sur
mobile (retour Aliette : toujours trop d'espace malgré la réduction round 32) — desktop non
concerné, la règle de base ci-dessus (hors media query) reste inchangée à cette largeur. */
body[data-page="qui-suis-je"] #mille-vies{ padding-top:clamp(.3rem,1vw,.6rem); }
}
/* Lisibilité des sections sombres (point 5 de la passe) : la section "L'Alouette : mon nom
d'oiseau" contient une citation (.quote), qui hérite par défaut de `.quote p{color:var(--ink)}`
— pensé pour fond clair. Sur `.band--dark`, ce texte anthracite sur fond anthracite était
quasi illisible. Même logique de correctif déjà appliquée à .lede/.h1-h3/strong pour
`.band--dark` (plus haut dans ce fichier), reprise ici pour .quote, scopée à cette page (c'est
la seule où .quote se trouve actuellement dans un .band--dark). */
body[data-page="qui-suis-je"] .band--dark .quote p{ color:var(--ivory-2); }
body[data-page="qui-suis-je"] .band--dark .quote cite{ color:rgba(247,237,218,.68); }
/* Hero mobile : la règle générique ".hero--tight .hero-in" (≤899.98px, plus haut dans ce
fichier) passe le bloc de texte en display:contents et ne fixe un `order` explicite que sur
.eyebrow/h1/.hero-figure — pensée à l'origine pour un hero eyebrow+h1 sans paragraphe
supplémentaire (accueil). qui-suis-je est le premier hero--tight avec des paragraphes après le
h1 (.lede + .hero-echo) : sans order explicite ceux-ci héritent d'order:0 et remontaient donc
AVANT l'eyebrow/h1 dans l'ordre visuel mobile. Scopé à cette page (ne touche pas la règle
générique, donc aucun effet sur l'accueil ni les autres pages utilisant .hero--tight). */
@media (max-width:899.98px){
body[data-page="qui-suis-je"] .hero-in .lede{ order:4; flex:1 1 100%; max-width:none; }
body[data-page="qui-suis-je"] .hero-in .hero-echo{ order:5; flex:1 1 100%; }
}
/* ROUND 36 — 2026-09-25, demande d'Aliette : "cadre / bloc visuel vide" repéré juste avant le
footer, sous la section Témoignages. Même cause déjà documentée et corrigée pour qui-suis-je
plus haut (cf. commentaire "Rectangle ivoire résiduel") : la marge sitewide
.site-footer{margin-top:...} (ligne ~937) crée un espace de fond ivoire entre et le
footer, invisible sur les pages qui se terminent par une section claire, mais visible sur
toute page qui se termine par une section à fond sombre — ici .testi-band (dégradé anthracite,
cf. .testi-band{background:var(--anthracite-gradient)} plus haut). Contrairement au correctif
qui-suis-je (scopé par data-page à une seule page), .testi-band clôt la quasi-totalité des
pages du site (les deux accueils + toutes les pages d'offres/formations, FR & EN) : la règle
ci-dessous neutralise donc la marge de façon générique, via :has(), pour toute page dont
se termine par .testi-band — sans media query, donc identique desktop/tablette/mobile — plutôt
que de dupliquer un correctif par page. N'affecte aucune page qui ne se termine pas par
.testi-band (la marge sitewide reste inchangée ailleurs). */
main:has(> .testi-band:last-child) + .site-footer{ margin-top:0; }
/* 2026-09-29 (round 5, tablette réelle) : ":has()" (Chrome 105+) est totalement absent de Chrome 81 —
la règle ci-dessus ne s'applique donc jamais sur la vraie tablette, d'où le rectangle blanc de 64px
mesuré entre Témoignages et le footer (= le margin-top normal, jamais neutralisé). ":has()" ne peut
pas être remplacé par un simple repli CSS (il n'existe pas d'équivalent physique comme pour
padding-inline/inset) : la classe ci-dessous, à ajouter dans le HTML du