/* ============================================================
CROIRE EN SOI by David Nakamura — styles communs
Palette, typographies et composants partagés par toutes les pages.
Zones à personnaliser signalées par des commentaires "MODIFIER".
------------------------------------------------------------
BASCULE DE TEINTE — point A du cahier des charges (5.2, annexe C).
Deux variables commandent toute la teinte du site : héros, halo du
cercle « Respire », hovers et dégradés en dérivent par color-mix().
Nuance --vert-dominante --vert-dominante-2
N1 Feuille profonde #3E5A2C MODIFIER (non fourni)
N2 Pastèque (défaut) #6F9A3D #5E8533
N3 Pomme claire #A6C93F MODIFIER (non fourni)
Pour basculer : changer ces deux valeurs dans :root, rien d'autre.
MODIFIER : le CdC ne fournit le second ton que pour N2. Si le client
retient N1 ou N3, demander le ton foncé correspondant — ne pas
l'inventer. --pomme reste l'accent quelle que soit la nuance.
Aucune couleur hexadécimale ne doit exister hors de :root.
============================================================ */
:root{
/* ---- bascule de teinte : voir l'en-tête du fichier ---- */
--vert-dominante:#6F9A3D; /* dominante : bas du héros, sections vertes */
--vert-dominante-2:#5E8533; /* second ton : dégradés, hovers */
/* ---- palette de marque (annexe C du CdC) ---- */
--pomme:#A6C93F; /* accent : CTA, cercle Respire, focus, traits */
--pomme-fonce:#5F7A1E; /* pomme foncé — texte accent sur fond clair (AA) */
--vigne:#1C2A1F; /* vert vigne profond — fonds prestige */
--vigne-2:#24352A; /* vigne éclairci — panneaux, hovers */
--champagne:#C9B27C; /* filets, eyebrows, touche luxe */
--ivoire:#F6F7F1; /* fond clair légèrement vert */
--ivoire-2:#EEF0E6; /* fond clair alternatif */
--encre:#161F19; /* texte principal sur clair */
--pierre:#5C685C; /* texte secondaire sur clair (AA) */
--brume:#B9C2B4; /* texte secondaire sur foncé (AA) */
--blanc:#FFFFFF; /* blanc franc : cartes « étapes », texte des pétales */
--erreur:#E8A2A2; /* messages d'erreur du formulaire (sur vigne) */
/* ---- couleurs des cinq éléments (CdC 5.2) ----
Secondaires : jamais en fond de section, jamais en texte courant. */
--el-feu:#B75C3C; /* feu — arts martiaux */
--el-terre:#8A6B3A; /* terre — sport */
--el-eau:#2E6E7E; /* eau — bien-être */
--el-air:#5A7186; /* air — yoga */
--el-bois:#2E4636; /* bois — voyages & retraites */
/* ---- tons dérivés : recalculés seuls à la bascule ---- */
--pomme-clair:color-mix(in srgb, var(--pomme) 65%, white); /* cœur du halo « Respire » */
--vert-halo:color-mix(in srgb, var(--pomme) 30%, var(--vert-dominante)); /* couronne du halo */
--vert-hero:color-mix(in srgb, var(--vert-dominante) 30%, var(--vigne)); /* fond du héros : vert profond, porte champagne 4,60:1 / ivoire 8,84:1 / brume 5,19:1 */
--pomme-encre:color-mix(in srgb, var(--pomme-fonce) 80%, var(--vigne)); /* accent texte sur --ivoire-2 : --pomme-fonce n'y tient que 4,25:1, celui-ci 5,31:1 */
--erreur-encre:color-mix(in srgb, var(--erreur) 45%, var(--vigne)); /* erreurs du formulaire sur fond clair : --erreur y tombe à 1,93:1, celui-ci 5,39:1 */
--ligne:rgba(22,31,25,.14);
--ligne-sombre:rgba(246,247,241,.16);
/* Rendu v2 : Zen Antique pour TOUS les titres, Jost pour les textes.
Marcellus et Yuji Syuku ont ete retirees du Google Fonts des
15 pages : la premiere n'etait plus qu'un repli, la seconde n'etait
appelee nulle part. Ne pas les remettre dans la pile sans les
recharger.
Zen Antique reste en second dans --f-body : Jost n'a aucun glyphe
CJK, or les kanji de .nav-mobile a small et de .footer-elements sont
rendus en --f-body. Le navigateur bascule sur elle pour ces seuls
caracteres, y compris en texte mixte.
Couverture laine verifiee sur le subset latin de Zen Antique
(unicode-range U+0000-00FF, U+0131, U+0152-0153) : e accent aigu,
grave, circonflexe, a, c cedille et le ligature oe sont tous
presents. Aucun repli n'est necessaire pour le francais. */
--f-display:"Zen Antique",serif;
--f-body:"Jost","Zen Antique",system-ui,sans-serif;
--w-light:300;
--w-regular:400;
--w-medium:500;
--w-max:1200px;
--pad:clamp(1.25rem,4vw,3rem);
--h-header:5rem; /* hauteur du header non réduit (mesurée : 76 px ≥ 1080 px, 79 px en dessous) */
--r:4px; /* rayon d'angle général : cartes, panneaux (CdC 5.1, 5.5) */
--r-btn:8px; /* rayon des boutons uniquement : .btn et .nav-cta */
--dur:.7s;
--ease:cubic-bezier(.22,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Barre de défilement : double écriture, la standard pour Firefox et la
préfixée pour Chrome, Edge et Safari. Jamais masquée. */
html{scrollbar-color:var(--vert-dominante-2) var(--ivoire-2);scrollbar-width:thin}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:var(--ivoire-2)}
html::-webkit-scrollbar-thumb{background:var(--vert-dominante-2);border-radius:5px}
html::-webkit-scrollbar-thumb:hover{background:var(--vert-dominante)}
body{
margin:0;background:var(--ivoire);color:var(--encre);
font-family:var(--f-body);font-weight:var(--w-regular);font-size:1.125rem;
line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:var(--w-regular);line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:.02em}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
p{margin:0 0 1.1em}
strong{font-weight:var(--w-medium)}
:focus-visible{outline:2px solid var(--pomme);outline-offset:3px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--vigne);color:var(--ivoire);padding:.6rem 1rem;z-index:200}
.skip-link:focus{left:0}
/* ---------- utilitaires ---------- */
.wrap{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;
color:var(--champagne);font-weight:var(--w-regular);display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--champagne)}
.on-light .eyebrow,.eyebrow.dark{color:var(--pomme-fonce)}
.on-light .eyebrow::before,.eyebrow.dark::before{background:var(--pomme-fonce)}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.75;font-weight:var(--w-light)}
.muted{color:var(--pierre)}
.center{text-align:center}
.section{padding-block:clamp(4.5rem,9vw,8rem)}
.section--dark{background:var(--vert-hero);color:var(--ivoire)}
.section--dark .muted{color:var(--brume)}
.section--tint{background:var(--ivoire-2)}
.grid-2{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr}
.grid-3{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:820px){
.grid-2{grid-template-columns:1fr 1fr;align-items:center}
.grid-3{grid-template-columns:repeat(3,1fr)}
/* Alternance gauche/droite : intervertit les deux colonnes sans toucher au
HTML, donc sans changer l'ordre de lecture pour un lecteur d'écran. */
.grid-2--inverse > *:first-child{order:2}
}
/* Mobile : l'image passe systématiquement au-dessus du texte, quel que soit
son rang dans le HTML — cinq des huit grilles ont le texte en premier.
Le DOM reste inchangé : à la voix, le titre est toujours lu avant l'image. */
@media(max-width:819px){
.grid-2 > :has(img),.grid-2 > :has(.ph){order:-1}
}
/* ---------- boutons ---------- */
/* Un seul bouton pour tout le site : aplat --pomme vif, texte --blanc,
sans contour. Au survol l'aplat s'assombrit en --pomme-fonce, le texte
reste blanc.
ATTENTION — écart accessibilité assumé par le client : le blanc sur
--pomme n'est qu'à 1,90:1, très en deçà des 4,5:1 exigés par le §10.4 du
cahier des charges et vérifiés en recette au §13. L'état de survol, lui,
est conforme (blanc sur --pomme-fonce, 4,90:1). Voir B10 du backlog.
Le remplissage se détache bien de son fond : 7,89:1 sur --vigne,
4,99:1 sur le héros. .btn--solid et .btn--ghost ne se distinguent plus. */
.btn{
display:inline-block;padding:1.05rem 2.4rem;border:0;border-radius:var(--r-btn);
font-family:var(--f-body);font-weight:var(--w-medium);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;
text-decoration:none;cursor:pointer;
background:var(--pomme);color:var(--blanc);
transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--pomme-fonce);color:var(--blanc);transform:translateY(-1px)}
/* .btn--line n'est pas un bouton plein mais un lien souligné : il doit
reprendre la couleur de son contexte et n'avoir aucun aplat. */
.btn--line{border:none;padding:0;background:none;font-weight:var(--w-regular);letter-spacing:.22em;font-size:.82rem;text-transform:uppercase;text-decoration:none;position:relative;color:inherit}
.btn--line::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--champagne);transform-origin:left;transition:transform .4s var(--ease)}
.btn--line:hover::after{transform:scaleX(.35)}
/* ---------- header ---------- */
/* Le header porte sa propre couche sombre en permanence : sur le héros clair,
la marque et la nav en --ivoire tomberaient à 2,7:1 sans elle. */
.site-header{
position:fixed;inset:0 0 auto;z-index:90;
background:color-mix(in srgb, var(--vigne) 96%, transparent);backdrop-filter:blur(8px);
padding:1.1rem 0;transition:box-shadow .4s,padding .4s;
}
.site-header.is-solid{padding:.7rem 0;box-shadow:0 1px 0 var(--ligne-sombre)}
/* Barre de progression de lecture. Placée DANS le header en position absolue
plutôt qu'en fixed à top:var(--h-header) : le header passe de 76 à 63 px
quand il se réduit au scroll, et une barre fixée à 80 px laisserait alors
17 px de page entre le header et elle. En absolu elle reste collée. */
.barre-lecture{
position:absolute;left:0;right:0;bottom:0;height:3px;z-index:91;
background:var(--pomme);transform:scaleX(0);transform-origin:left;
pointer-events:none;transition:transform .15s var(--ease);
}
@media(prefers-reduced-motion:reduce){.barre-lecture{transition:none}}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ivoire);line-height:1.1}
.brand b{font-family:var(--f-display);font-weight:var(--w-regular);font-size:1.45rem;letter-spacing:.14em;text-transform:uppercase}
.brand span{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);margin-top:.25rem}
/* L'écart entre liens se resserre avant que la police bouge : à 1080 px la
marque agrandie ne laisse que ~749 px à la nav, pour ~737 px nécessaires
(chevron du menu déroulant compris). */
.nav-desktop{display:none;gap:clamp(.55rem,1.15vw,1.6rem);align-items:center}
.nav-desktop a,.nav-desktop .nav-drop-btn{color:var(--ivoire);text-decoration:none;font-size:.98rem;font-weight:var(--w-regular);letter-spacing:.04em;text-transform:none;position:relative;padding-bottom:.3rem}
.nav-desktop a::after,.nav-desktop .nav-drop-btn::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--pomme);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-desktop a:hover::after,.nav-desktop a[aria-current="page"]::after,
.nav-desktop .nav-drop-btn:hover::after,.nav-desktop .nav-drop-btn[aria-current="page"]::after,
.nav-drop.is-open .nav-drop-btn::after{transform:scaleX(1)}
/* ---------- Menu déroulant « Pratiques » (desktop ≥ 1080 px) ---------- */
/* min-width portee de 14 a 17 rem : « Activite Physique Adaptee » mesure
~200 px a .94rem, soit ~256 px avec le kanji, le gap et les paddings —
14 rem (224 px) le faisait passer a la ligne. Le panneau est en position
absolue : il s'etale vers la droite et n'ajoute AUCUN pixel a la barre du
header, dont la marge n'est que de ~12 px a 1080 px (voir .nav-desktop). */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{
font-family:inherit;background:none;border:0;cursor:pointer;padding-inline:0;
display:inline-flex;align-items:center;gap:.3rem;
}
/* Chevron : deux filets 1 px, pas d'icône de bibliothèque (DA). */
.nav-drop-btn .chev{
width:.4rem;height:.4rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
transform:rotate(45deg) translate(-.06em,-.1em);transition:transform .3s var(--ease);
}
.nav-drop.is-open .nav-drop-btn .chev{transform:rotate(-135deg) translate(-.06em,-.1em)}
.nav-drop-panel{
position:absolute;top:calc(100% + .9rem);left:0;min-width:17rem;z-index:95;
background:var(--vigne-2);border:1px solid var(--ligne-sombre);border-radius:var(--r);
padding:.4rem;display:grid;gap:.1rem;
}
.nav-drop-panel[hidden]{display:none}
.nav-drop-panel a{
display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:var(--r);
font-size:.94rem;letter-spacing:.02em;transition:background .25s var(--ease);
}
.nav-drop-panel a::after{display:none}
.nav-drop-panel a:hover,.nav-drop-panel a:focus-visible{background:var(--vigne)}
.nav-drop-tout{
border-top:1px solid var(--ligne-sombre);margin-top:.25rem;padding-top:.75rem!important;
font-size:.78rem!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--champagne)!important;
}
/* Le panneau porte desormais DEUX pieds de menu (« Toutes les pratiques » et
« Interventions en structures »). Sans cette regle chacun tracerait son
propre filet, soit deux traits a .25rem d'ecart : le second reprend le
groupe ouvert par le premier au lieu d'en ouvrir un nouveau. */
.nav-drop-tout + .nav-drop-tout{
border-top:0;margin-top:0;padding-top:.35rem!important;
}
/* Kanji des éléments éclaircis de 22 % : en teinte pure ils tombent à 2,3-2,6:1
sur --vigne-2 et se lisent comme des taches. Éclaircis : 3,6 à 4,2:1.
.k--feu manquait depuis l'origine : 火 est pose sur toutes les pages mais
n'avait aucune regle, il heritait donc de --ivoire et tranchait avec les
trois autres. Ajoute sur le meme modele. */
.k--feu{color:color-mix(in srgb, var(--el-feu) 78%, white)}
.k--terre{color:color-mix(in srgb, var(--el-terre) 78%, white)}
.k--eau{color:color-mix(in srgb, var(--el-eau) 78%, white)}
.k--air{color:color-mix(in srgb, var(--el-air) 78%, white)}
.nav-drop-panel .k{font-family:var(--f-display);font-size:1.15rem;line-height:1}
/* 育 « eduquer » signe les interventions en structures. Il ne fait pas partie
des cinq elements : il prend le champagne des pieds de menu, pas une teinte
d'element, pour ne pas laisser croire a une sixieme voie de la roue. */
.nav-mobile .nav-sub[href="interventions.html"]{color:var(--champagne)}
/* CTA du header : même règle que les .btn — aplat --pomme, texte blanc. */
.nav-cta{background:var(--pomme);color:var(--blanc)!important;border:0;border-radius:var(--r-btn);padding:.55rem clamp(.85rem,1.1vw,1.2rem)}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--pomme-fonce);color:var(--blanc)!important}
.nav-toggle{
background:none;border:0;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;gap:0;
}
.nav-toggle span{display:block;width:26px;height:1.5px;background:var(--ivoire);margin:3.5px 0;transition:transform .4s var(--ease),opacity .3s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* Bascule burger / nav desktop. DOIT rester après .nav-toggle : même
spécificité, c'est l'ordre qui tranche. Placée avant (défaut V5), la règle
display:grid de .nav-toggle l'emportait et le burger s'affichait aussi
au-dessus de 1080 px, par-dessus la nav desktop. */
@media(min-width:1080px){.nav-desktop{display:flex}.nav-toggle{display:none}}
.nav-mobile{
position:fixed;inset:0;background:var(--vigne);z-index:80;display:flex;flex-direction:column;
justify-content:center;padding:6rem var(--pad) 3rem;
overflow-y:auto;overscroll-behavior:contain; /* 12 entrées : 722 px mesurés
pour 667 de haut à 375x667 — le menu défile, c'était déjà le cas à 11
entrées (700 px). Aucun débordement horizontal : mesuré à 320, 360,
390 et 414 px, scrollWidth == clientWidth. */
opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.nav-open .nav-mobile{opacity:1;visibility:visible}
.nav-mobile a{
color:var(--ivoire);text-decoration:none;font-family:var(--f-display);
font-size:clamp(1.6rem,6vw,2.2rem);padding:.45rem 0;border-bottom:1px solid var(--ligne-sombre);
display:flex;justify-content:space-between;align-items:baseline;
transform:translateY(14px);opacity:0;transition:transform .5s var(--ease),opacity .5s;
}
.nav-mobile a small{font-family:var(--f-body);font-size:.8rem;letter-spacing:.28em;color:var(--champagne);text-transform:uppercase}
.nav-open .nav-mobile a{transform:none;opacity:1}
.nav-open .nav-mobile a:nth-child(2){transition-delay:.05s}
.nav-open .nav-mobile a:nth-child(3){transition-delay:.1s}
.nav-open .nav-mobile a:nth-child(4){transition-delay:.15s}
.nav-open .nav-mobile a:nth-child(5){transition-delay:.2s}
.nav-open .nav-mobile a:nth-child(6){transition-delay:.25s}
.nav-open .nav-mobile a:nth-child(7){transition-delay:.3s}
.nav-open .nav-mobile a:nth-child(8){transition-delay:.35s}
.nav-open .nav-mobile a:nth-child(9){transition-delay:.4s}
.nav-open .nav-mobile a:nth-child(10){transition-delay:.45s}
.nav-open .nav-mobile a:nth-child(11){transition-delay:.5s}
/* 12e entree : « Interventions en structures ». Le menu mobile passe de 11 a
12 lignes ; il reste en overflow-y:auto, le depassement a 375x667 defile. */
.nav-open .nav-mobile a:nth-child(12){transition-delay:.55s}
/* Sous-entrées « Pratiques » : pas de menu déroulant sur mobile, on déplie. */
.nav-mobile .nav-sub{
font-family:var(--f-body);font-size:1rem;font-weight:var(--w-light);
padding:.55rem 0 .55rem 1.4rem;min-height:44px;align-items:center;
border-bottom:0;color:var(--brume);gap:.7rem;justify-content:flex-start;
}
.nav-mobile .nav-sub .k{font-family:var(--f-display);font-size:1.2rem;line-height:1}
.nav-mobile .nav-sub + :not(.nav-sub){border-top:1px solid var(--ligne-sombre)}
body.nav-open{overflow:hidden}
/* ---------- héros ---------- */
.hero{
min-height:100svh;display:grid;align-content:center;position:relative;overflow:hidden;
background:var(--vigne);color:var(--ivoire);padding-top:6rem;
}
.hero--page{min-height:72svh;padding-bottom:4rem}
.hero .eyebrow{color:var(--champagne)}
.hero .lead{color:var(--brume);max-width:38rem}
.kanji-bg{
position:absolute;right:-4%;top:50%;transform:translateY(-50%);
font-family:var(--f-display);font-size:clamp(16rem,42vw,34rem);line-height:1;
color:color-mix(in srgb, var(--ivoire) 4.5%, transparent);user-select:none;pointer-events:none;
}
.hero-rule{width:5.5rem;height:1px;background:var(--champagne);margin:2rem 0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
/* ---------- filigranes & marqueurs d'élément ---------- */
.el-mark{
font-family:var(--f-display);font-size:2.2rem;color:var(--pomme-fonce);
display:inline-flex;align-items:center;gap:1rem;margin-bottom:1rem;
}
.section--dark .el-mark{color:var(--pomme)}
.el-mark small{font-family:var(--f-body);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pierre)}
.section--dark .el-mark small{color:var(--brume)}
/* ---------- cartes rubriques ---------- */
.cards{display:grid;gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
@media(min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
/* .cards--3 bascule des 900 px, .cards--5 seulement a 1080. Les deux
partageaient une meme media query a 1080 : trois cartes restaient donc
sur deux colonnes de 760 a 1079 px, avec une cellule vide bien visible
(fond --ligne) sur interventions, coaching et voyages. A 900 px chaque
carte dispose de ~275 px, soit ~217 px de texte hors padding : verifie,
aucun debordement. Ne pas refusionner ces deux regles — a 900 px,
.cards--5 donnerait cinq colonnes de ~165 px. */
@media(min-width:900px){.cards--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.cards--5{grid-template-columns:repeat(5,1fr)}}
.card{
background:var(--ivoire);padding:2.2rem 1.8rem;position:relative;overflow:hidden;
text-decoration:none;display:flex;flex-direction:column;min-height:280px;
transition:background .5s var(--ease);
}
.card:hover{background:var(--vigne);color:var(--ivoire)}
.card .k{font-family:var(--f-display);font-size:3rem;color:var(--pomme-fonce);transition:color .5s}
.card:hover .k{color:var(--pomme)}
.card h3{margin-top:auto}
.card p{font-size:.92rem;color:var(--pierre);transition:color .5s;margin:0}
.card:hover p{color:var(--brume)}
.card .go{margin-top:1.2rem;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne)}
.card{outline:1px solid transparent;outline-offset:-8px;transition:background .5s var(--ease),outline-color .5s var(--ease)}
.card:hover,.card:focus-visible{outline-color:var(--champagne)}
/* ---------- listes élégantes ---------- */
.fine-list{list-style:none;margin:0;padding:0}
.fine-list li{padding:1rem 0;border-bottom:1px solid var(--ligne);display:flex;gap:1.1rem;align-items:baseline}
.section--dark .fine-list li{border-color:var(--ligne-sombre)}
.fine-list .n{font-family:var(--f-display);color:var(--pomme-fonce);min-width:2.2rem}
.section--dark .fine-list .n{color:var(--pomme)}
/* ---------- images / placeholders ---------- */
/* MODIFIER : remplacer chaque .ph par une vraie
Les chemins prévus sont indiqués en commentaire dans chaque page. */
.ph{
background:linear-gradient(135deg,var(--vigne-2),var(--vigne));
aspect-ratio:4/5;display:grid;place-items:center;position:relative;color:var(--brume);
}
.ph--wide{aspect-ratio:16/9}
.ph--sq{aspect-ratio:1}
.ph span{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;text-align:center;padding:1rem}
.ph::after{content:"";position:absolute;inset:10px;border:1px solid var(--ligne-sombre)}
/* ---------- tableau tarifs ---------- */
.pricing{width:100%;border-collapse:collapse}
/* Le tableau vit désormais sur fond clair (services). Les tons de la version
sombre y tombaient à 1,92:1 pour les en-têtes et 1,76:1 pour les prix ;
la base passe donc en clair et la version sombre devient la surcharge. */
.pricing th,.pricing td{text-align:left;padding:1.4rem .6rem;border-bottom:1px solid var(--ligne);vertical-align:top}
.pricing th{font-family:var(--f-body);font-weight:var(--w-regular);font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pomme-encre)}
.pricing .offer{font-family:var(--f-display);font-size:1.25rem}
.pricing .price{font-family:var(--f-display);font-size:1.4rem;color:var(--pomme-fonce);white-space:nowrap}
.pricing .free{color:var(--pomme-fonce)}
.section--dark .pricing th,.section--dark .pricing td{border-bottom-color:var(--ligne-sombre)}
.section--dark .pricing th{color:var(--champagne)}
.section--dark .pricing .price,.section--dark .pricing .free{color:var(--pomme)}
/* ---------- blog ---------- */
.post-list{display:grid;gap:1px;background:var(--ligne);border-block:1px solid var(--ligne)}
.post-item{background:var(--ivoire);padding:2.4rem 0;display:grid;gap:.6rem;text-decoration:none;transition:padding-left .4s var(--ease)}
.post-item:hover{padding-left:1.2rem}
.post-item .meta{font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;color:var(--pierre)}
.article{max-width:44rem;margin-inline:auto}
.article h2{margin-top:2.4rem}
.article blockquote{margin:2rem 0;padding-left:1.4rem;border-left:1px solid var(--champagne);font-family:var(--f-display);font-size:1.3rem;line-height:1.5}
/* ---------- formulaire ---------- */
.form{display:grid;gap:1.4rem;max-width:40rem}
/* Même bascule que le tableau : le formulaire de contact est passé sur fond
clair. Sur ivoire, la saisie en --ivoire tombait à 1,05:1, les libellés à
1,92:1 et les erreurs à 1,93:1. Base claire, surcharge sombre conservée. */
.field label{display:block;font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;color:var(--pomme-encre);margin-bottom:.5rem}
.field input,.field select,.field textarea{
width:100%;background:transparent;border:0;border-bottom:1px solid var(--ligne);
color:var(--encre);font-family:var(--f-body);font-size:1.05rem;font-weight:var(--w-light);padding:.7rem 0;
transition:border-color .3s;
}
.field select option{color:var(--encre)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pomme-fonce)}
.field .err{display:none;color:var(--erreur-encre);font-size:.85rem;margin-top:.4rem}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--erreur-encre)}
.field.is-invalid .err{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden} /* honeypot anti-spam */
.form-status{font-size:.95rem;color:var(--pomme-fonce);min-height:1.4em}
/* Succes et echec se distinguent autrement que par le seul texte. Meme
bascule que .field .err juste au-dessus : le formulaire est sur fond
clair, ou --erreur ne tient que 1,93:1 — c'est --erreur-encre qu'il faut
(5,39:1). --erreur ne revient que sur fond sombre, ou il est concu. */
.form-status.is-ok{color:var(--pomme-fonce)}
.form-status.is-erreur{color:var(--erreur-encre)}
.section--dark .form-status.is-ok{color:var(--pomme)}
.section--dark .form-status.is-erreur{color:var(--erreur)}
form button[disabled]{opacity:.6;cursor:progress}
.section--dark .field label{color:var(--champagne)}
.section--dark .field input,.section--dark .field select,.section--dark .field textarea{
border-bottom-color:var(--ligne-sombre);color:var(--ivoire);
}
.section--dark .field input:focus,.section--dark .field select:focus,.section--dark .field textarea:focus{border-color:var(--pomme)}
.section--dark .field .err{color:var(--erreur)}
.section--dark .field.is-invalid input,.section--dark .field.is-invalid select,.section--dark .field.is-invalid textarea{border-color:var(--erreur)}
.section--dark .form-status{color:var(--pomme)}
/* ---------- bandeau CTA ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band .kanji-bg{font-size:clamp(10rem,26vw,20rem);right:auto;left:-2%}
/* ---------- alternance clair / sombre : composants qui changent de fond ----------
L'accueil alterne strictement sombre et clair. Trois composants sont partagés
avec d'autres pages et doivent donc s'adapter par leur contexte, jamais par
une classe posée dans le balisage. */
/* Journal sur fond sombre. .post-list peint son fond derrière les items pour
dessiner les filets par le gap de 1 px ; avec des items transparents ce fond
transparaîtrait partout. On supprime donc le gap et on sépare les items par
un filet. blog.html, dont la liste est sur .on-light, n'est pas concerné. */
.section--dark .post-list{background:transparent;border-block-color:var(--ligne-sombre);gap:0}
.section--dark .post-item{background:transparent;border-bottom:1px solid var(--ligne-sombre)}
.section--dark .post-item:last-child{border-bottom:0}
.section--dark .post-item .meta{color:var(--brume)}
/* Eyebrow sur section teintée. Défaut d'origine : --champagne n'y est qu'à
1,80:1, et --pomme-fonce, calibré pour --ivoire, seulement à 4,25:1.
--pomme-encre tient 5,31:1. Doit rester APRÈS .on-light .eyebrow : même
spécificité, c'est l'ordre qui tranche pour le CTA final qui porte les deux
classes. Corrige aussi arts-martiaux, coaching, pratiques et workshop. */
.section--tint .eyebrow{color:var(--pomme-encre)}
.section--tint .eyebrow::before{background:var(--pomme-encre)}
/* Même correction pour les numéros des listes : --pomme-fonce n'est qu'à
4,25:1 sur --ivoire-2, --pomme-encre y tient 5,30:1. */
.section--tint .fine-list .n{color:var(--pomme-encre)}
/* La rangée de kanji sert aussi de signature dans le corps des pages : en
--champagne elle disparaît sur fond clair (1,92:1). Décorative et
aria-hidden, mais elle doit rester visible. */
.on-light .footer-elements,.section--tint .footer-elements{color:var(--pomme-encre)}
/* Filigrane sur fond clair : l'aplat ivoire y est invisible, le kanji passe en
contour vigne à 12 %. Ne vise que le CTA final : les autres .cta-band
(arts-martiaux, pratiques) restent sombres. */
.on-light .kanji-bg{
color:transparent;
-webkit-text-stroke:1px color-mix(in srgb, var(--vigne) 12%, transparent);
}
/* ---------- footer ---------- */
.site-footer{background:var(--vigne);color:var(--brume);padding:4rem 0 2.5rem;border-top:1px solid var(--ligne-sombre)}
.footer-grid{display:grid;gap:2.5rem}
@media(min-width:820px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.site-footer h4{color:var(--ivoire);font-size:1rem;letter-spacing:.14em;text-transform:uppercase}
.site-footer a{color:var(--brume);text-decoration:none}
.site-footer a:hover{color:var(--pomme)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer-elements{font-family:var(--f-display);font-size:1.4rem;letter-spacing:.6em;color:var(--champagne);margin-top:1rem}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--ligne-sombre);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem}
/* ---------- Icônes sociales du pied de page (CdC 6.8, 9.3) ----------
SVG dessinés à la main, aucune bibliothèque : carré arrondi pour Instagram,
le f pour Facebook, un @ tracé, un combiné pour WhatsApp. 24 px de dessin
dans une cible de 44 px, trait 1,5 px en currentColor.
Trois icônes à chaque largeur : l'arobase remplace WhatsApp à partir de
56 rem, le numéro n'ayant d'intérêt que sur mobile.
--brume sur le vigne du pied de page : 8,17:1 ; --pomme au survol : 7,89:1. */
.social{display:flex;align-items:center;gap:.25rem}
.social a{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px; /* cible tactile, CdC 10.5 */
color:var(--brume);transition:color .3s var(--ease);
}
.social a:hover,.social a:focus-visible{color:var(--pomme)}
.social svg{width:24px;height:24px;display:block}
/* .social a impose display:inline-flex avec une specificite (0,1,1) :
les regles de bascule doivent donc etre au moins aussi specifiques. */
.social a.social-mail{display:none}
@media(min-width:56rem){
.social a.social-mail{display:inline-flex}
.social a.social-whatsapp{display:none}
}
/* ---------- préloader (animation d'ouverture) ---------- */
.loader{
position:fixed;inset:0;z-index:300;background:var(--vigne);
display:grid;place-items:center;transition:transform 1s var(--ease);
}
.loader.is-done{transform:translateY(-100%)}
.loader-in{text-align:center;color:var(--ivoire)}
.loader-kanji{
font-family:var(--f-display);font-size:clamp(4rem,12vw,7rem);color:var(--pomme);
opacity:0;transform:scale(.86);transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}
.loader.step-1 .loader-kanji{opacity:1;transform:none}
.loader-title{
font-family:var(--f-display);font-size:clamp(1.6rem,5vw,3rem);letter-spacing:.22em;
text-transform:uppercase;margin-top:1.2rem;display:flex;justify-content:center;gap:.06em;
}
.loader-title span{opacity:0;transform:translateY(.5em);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.loader.step-2 .loader-title span{opacity:1;transform:none}
.loader-by{
font-size:.82rem;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne);
margin-top:1rem;opacity:0;transition:opacity .8s .1s;
}
.loader-rule{width:0;height:1px;background:var(--champagne);margin:1.4rem auto 0;transition:width 1s var(--ease)}
.loader.step-3 .loader-by{opacity:1}
.loader.step-3 .loader-rule{width:7rem}
body.is-loading{overflow:hidden}
/* ---------- reveals au scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
.rv{opacity:1;transform:none}
.loader{display:none}
}
/* ---------- Images de contenu (intégration) ---------- */
.section:has(.kanji-bg){position:relative;overflow:hidden}
.grid-2 img.portrait{aspect-ratio:4/5;max-width:24rem;margin-inline:auto}
.grid-2 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
box-shadow:0 20px 50px -30px rgba(18,36,30,.5)}
.card-img{width:calc(100% + 3.2rem);max-width:none;margin:-2rem -1.6rem 1.2rem;
aspect-ratio:16/10;object-fit:cover}
/* ============================================================
HYBRIDE — Héros V1 (cercle Respire + éventail des éléments),
étapes zéro friction, dragon au scroll. Palette pastèque.
============================================================ */
/* ---------- Héros : vert profond, textes clairs (CdC 6.1, 6.2) ----------
Le fond sombre est ce qui rend possible le trio demandé : eyebrow doré
--champagne 4,60:1, titre --ivoire 8,84:1, lead --brume 5,19:1. Sur le vert
clair précédent, ces trois couleurs tombaient à 1,42 / 2,74 / 1,61:1.
Écart assumé au §6.1, qui prévoyait le héros sur la dominante N2 claire.
Aucune surcharge de couleur ici : les règles de base de .hero suffisent
(eyebrow champagne, lead brume, hero-rule champagne, kanji ivoire 4,5 %),
et le bouton secondaire reprend sa variante sombre via sa classe .on-dark
— voile d'ivoire 16 %, texte --ivoire, 5,72:1. */
/* Fond partagé par le héros d'accueil et ceux des pages intérieures : une
seule déclaration, aucune duplication. Les couleurs de texte viennent déjà
des règles de base de .hero (eyebrow champagne, lead brume, titre ivoire,
filet champagne) et le filigrane de son aplat ivoire à 4,5 %. */
.hero--v1,.hero--page{
background:
radial-gradient(58rem 58rem at 50% 118%, color-mix(in srgb, var(--pomme) 28%, transparent), transparent 60%),
var(--vert-hero);
}
.hero--v1{padding-block:calc(var(--h-header) + 1.5rem) 3rem;min-height:0;text-align:center}
/* Boutons du héros : capitalisation simple et corps 0,98 rem, soit 60 px de
haut — le §6.2 en exige 52 au minimum. Le principal ne bouge pas : aplat
--pomme, texte --vigne, 7,89:1, et sa limite contre le fond passe de
1,55:1 sur le vert clair à 5,01:1 ici. */
.hero--v1 .btn,.hero--page .btn{text-transform:none;font-size:.98rem;letter-spacing:.04em}
/* Seule exception au trio : le hint est bas dans le héros, là où le halo pomme
éclaircit le fond jusqu'à rgb(68,93,43). --brume y tombe à 4,02:1, mesuré au
pixel sur la capture ; --ivoire tient 6,85:1 au même endroit. */
.hero--v1 .respire-hint{color:var(--ivoire)}
.hero--v1 .wrap{display:flex;flex-direction:column;align-items:center}
.hero--v1 .lead{margin-inline:auto;max-width:44rem}
.hero--v1 h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.hero--v1 .hero-rule{margin-inline:auto}
.hero--v1 .hero-ctas{justify-content:center}
/* Desktop : deux colonnes, héros contenu dans 100 svh header compris.
Le cercle est plafonné par la hauteur libre — c'est ce plafond qui
supprime le débordement constaté à 1280x800 et 1920x1080. */
@media(min-width:64rem){
.hero--v1{
min-height:100svh;
padding-block:calc(var(--h-header) + 1.5rem) 2rem;
text-align:left;
}
.hero--v1 .wrap{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
grid-auto-rows:min-content;align-content:center;
gap:0 clamp(2rem,4vw,5rem);
}
/* L'eyebrow occupe les DEUX colonnes. Dans la seule colonne de texte,
« Grabels · Montpellier — Corps, mental, émotionnel » demande 624 px
(571 de texte + 52,8 de filet et gouttiere) pour 433 disponibles a
1024 px et 585 a 1280 : elle passait sur deux lignes a toute largeur
desktop. Le cercle occupe une colonne fixe de 468 px, la colonne de
texte ne peut donc pas s'elargir — c'est la pleine largeur ou rien.
Pas de white-space:nowrap : sous 64 rem l'eyebrow doit se replier. */
.hero--v1 .eyebrow{grid-area:1/1/2/-1}
.hero--v1 h1{grid-area:2/1}
.hero--v1 .hero-rule{grid-area:3/1;margin-inline:0}
.hero--v1 .lead{grid-area:4/1;margin-inline:0;max-width:none}
.hero--v1 .hero-ctas{grid-area:5/1;justify-content:flex-start}
.hero--v1 .hero-cercle{grid-column:2;grid-row:2/span 4;align-self:center;display:grid;justify-items:center}
.hero--v1 .respire-zone{margin:0}
}
/* ---------- Cercle Respire + éventail ---------- */
/* --zone commande le cercle, le rayon de l'éventail et la taille des pétales.
Mobile : valeurs V5 inchangées. Desktop : plafonné par la hauteur libre
(voir la requête ≥ 64 rem plus haut), --zone y vaut 29 rem au maximum. */
.respire-zone{--zone:min(31rem,88vw);
position:relative;margin:1.6rem auto .6rem;
width:var(--zone);height:var(--zone);display:grid;place-items:center}
/* Le bouton et le conteneur des pétales occupent la MÊME cellule. Sans cette
ligne, la grille leur crée deux rangées : le bouton se centre dans la
rangée 1 et se retrouve 62 px au-dessus du centre de la zone à 1280 px,
alors que les pétales, en position absolue, tournent autour de ce centre.
Le cercle « Respire » n'était donc pas concentrique à l'éventail. */
.respire-zone > *{grid-area:1/1}
.respire{
--d:min(14.5rem,46vw);
width:var(--d);height:var(--d);border-radius:50%;
background:radial-gradient(circle at 50% 42%, var(--pomme-clair) 0%, var(--vert-halo) 45%,
color-mix(in srgb, var(--vert-dominante-2) 15%, transparent) 72%, transparent 76%);
border:1px solid color-mix(in srgb, var(--pomme-clair) 60%, transparent);
display:grid;place-items:center;cursor:pointer;
font-family:var(--f-display);letter-spacing:.42em;text-indent:.42em;
color:var(--vigne);font-size:1.05rem;text-transform:uppercase; /* 9,95:1 sur le cœur du halo (était --ivoire, 1,41:1) */
animation:respire-pulse 5.5s ease-in-out infinite;
transition:transform .5s ease;
}
.respire:hover{transform:scale(1.03)}
.respire:focus-visible{outline:2px solid var(--pomme);outline-offset:6px}
@keyframes respire-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--pomme) 25%, transparent)}50%{box-shadow:0 0 0 2.2rem transparent}}
.respire-hint{color:var(--brume);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.4rem}
/* pétales : cachés au centre, déployés en fleur.
--rayon = rayon de l'éventail. Ne pas le renommer --r : ce jeton-la est le
rayon d'angle du site (:root), utilise par .btn et .etape. */
/* Placement polaire : on centre le pétale sur le centre de la zone, on pivote
de --a, on avance de --rayon, puis on annule la rotation pour que le pétale
reste droit. Les cinq rayons sont donc identiques par construction — aucun
cosinus, aucune coordonnée saisie à la main, et plus besoin du repli
@supports pour les navigateurs sans cos()/sin(). */
.petale{
position:absolute;left:50%;top:50%;
--rayon:min(12.3rem,36vw);--pd:min(7rem,22vw);
width:var(--pd);height:var(--pd);
border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.1rem;text-decoration:none;color:var(--blanc);text-align:center;
transform:translate(-50%,-50%) rotate(var(--a)) translate(0) rotate(calc(-1 * var(--a))) scale(.2);
opacity:0;visibility:hidden;
transition:transform .55s cubic-bezier(.2,.9,.3,1.15),opacity .4s,visibility 0s .55s;
box-shadow:0 14px 30px -14px rgba(0,0,0,.45);
}
.petale .kj{font-size:1.45rem;line-height:1}
.petale .el{font-size:.6rem;font-weight:var(--w-medium);letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.petale .pr{font-family:var(--f-display);font-size:.8rem;line-height:1.15;padding-inline:.4rem}
/* Le petale Terre porte desormais « Activite Physique Adaptee » : 25 signes
contre 5 pour « Sport ». A .8rem le libelle passait a 4 lignes et debordait
du disque de min(7rem,22vw). A .72rem il tient en 3 lignes (~40 px de haut,
le mot le plus long mesure ~47 px pour 99 px utiles) et le disque reste
equilibre face aux quatre autres. */
.petale--terre .pr{font-size:.72rem}
.petale:hover{filter:brightness(1.12)}
.petale:focus-visible{outline:2px solid var(--blanc);outline-offset:3px}
.respire-zone.is-open .petale{
transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--rayon)) rotate(calc(-1 * var(--a))) scale(1);
opacity:1;visibility:visible;transition-delay:var(--dl),var(--dl),0s;
}
.petale--feu{background:var(--el-feu);--a:-90deg;--dl:.02s}
.petale--terre{background:var(--el-terre);--a:-18deg;--dl:.09s}
.petale--eau{background:var(--el-eau);--a:54deg;--dl:.16s}
.petale--air{background:var(--el-air);--a:126deg;--dl:.23s}
.petale--bois{background:var(--el-bois);--a:198deg;--dl:.30s}
/* Desktop : cercle, rayon de l'éventail et pétales dérivés de --zone.
À 496 px de zone ces formules redonnent exactement les valeurs V5
(232 / 196,8 / 112 px) ; elles ne divergent que sur écran court, là où
le héros débordait. Doit rester APRÈS .respire et .petale : même
spécificité, c'est l'ordre qui tranche. */
@media(min-width:64rem){
.respire-zone{--zone:min(29rem, 42vw, calc(100svh - var(--h-header) - 6rem))}
.respire{--d:calc(var(--zone) * .4677)}
.petale{--rayon:calc(var(--zone) * .3968);--pd:calc(var(--zone) * .2258)}
}
@media(prefers-reduced-motion:reduce){
.respire{animation:none}
.petale{transition:opacity .2s,visibility 0s}
}
/* ---------- Trois étapes, zéro friction ---------- */
.etapes{display:grid;gap:1.3rem;margin-top:2.6rem}
@media(min-width:56rem){.etapes{grid-template-columns:repeat(3,1fr)}}
.etape{
background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
padding:1.9rem 1.7rem;text-align:left;
}
.etape{transition:transform .35s var(--ease),border-color .35s var(--ease)}
.etape:hover{transform:translateY(-6px);border-color:var(--pomme)}
@media(prefers-reduced-motion:reduce){
.etape:hover{transform:none}
}
.etape h3{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem}
.etape h3 .num{color:var(--pomme-fonce);font-size:1.05em}
.etape p{margin:0;color:var(--pierre);font-size:.98rem}
/* ---------- Dragon d'encre (CdC 6.6) ----------
Illustration originale en image, un exemplaire par bord. main.js n'en
affiche qu'un à la fois et alterne le côté à chaque section claire.
Chaque image est décalée de 78 % de sa largeur vers l'extérieur : seule sa
partie intérieure — la tête et le haut du corps — reste dans la marge.
Le pourcentage porte sur la largeur rendue de l'image, elle-même déduite de
la hauteur, donc il s'adapte tout seul au format de la fenêtre.
45 % et 55 % ont été mesurés : insuffisants à 1280 px (voir le rapport). */
.dragon{
position:fixed;top:var(--h-header);height:calc(100vh - var(--h-header));width:auto;
z-index:5;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
}
.dragon--droite{right:0;transform:translateX(78%)}
/* scaleX(-1) d'abord : la translation suit ensuite l'axe inversé et pousse
l'image vers l'extérieur gauche, tête tournée vers le contenu. */
.dragon--gauche{left:0;transform:scaleX(-1) translateX(78%)}
/* Paliers : plus l'écran est large, plus la marge est grande et plus le dragon
peut entrer dans le cadre. Le décalage porte sur la largeur rendue de
l'image, elle-même déduite de la hauteur : il suit donc le format d'écran.
55 % et non 40 % à 90 rem : à 1440 x 900 la marge n'est que de 168 px, et
40 % laisserait 180 px visibles — 12 px de chevauchement sur le texte. */
@media(min-width:90rem){
.dragon--droite{transform:translateX(55%)}
.dragon--gauche{transform:scaleX(-1) translateX(55%)}
}
@media(min-width:120rem){
.dragon--droite{transform:translateX(8%)}
.dragon--gauche{transform:scaleX(-1) translateX(8%)}
}
.dragon.is-visible{opacity:.2}
@media(max-width:78rem){.dragon{display:none}}
@media(prefers-reduced-motion:reduce){.dragon{transition:none}}
.brand{white-space:nowrap}
.nav-desktop a{white-space:nowrap}
/* Portrait en medaillon : petit cercle, filet pomme, pulsation lente. */
.grid-2 img.avatar{
width:11rem;max-width:11rem;aspect-ratio:1;border-radius:50%;object-fit:cover;
border:2px solid var(--pomme);box-shadow:none;margin:0 0 2rem;
animation:avatar-pulse 5.5s ease-in-out infinite;
}
@keyframes avatar-pulse{
0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--pomme) 45%, transparent)}
50%{box-shadow:0 0 0 1.4rem transparent}
}
@media(prefers-reduced-motion:reduce){.grid-2 img.avatar{animation:none}}
/* --f-titre n'a jamais existe dans :root. La declaration etait donc
invalide au calcul et font-family retombait sur inherit : h1 et le titre
du preloader s'affichaient en Jost (herite de body) au lieu de la police
de titre, alors que h2/h3/h4 etaient bien en Zen Antique. Corrige. */
h1,.loader-title{font-family:var(--f-display)}