: même marge
basse, même interligne, même chasse. Aucun pixel ne bouge. */
.baseline{margin-top:16px;margin-bottom:18px;line-height:1.7;letter-spacing:normal}
.baseline .b1{font-family:'Allura',cursive;font-size:clamp(24px,3vw,34px);color:var(--bleu);display:block}
.baseline .b2{font-family:'Allura',cursive;font-size:clamp(24px,3vw,34px);color:var(--orange);display:block}
/* ---------- le claim, sans encadré (mail du 06/08) ----------
Le bandeau bleu a disparu : « pas dans un encadré mais en gras ».
Reste UNE ligne, centrée comme le bouton dans son ovale orange juste
dessous, avec une flèche à part qui pointe vers ce bouton. */
.claim-nu{
margin:6px 0 6px;
}
.claim-nu strong{
display:inline-block;
font-size:clamp(25px,3.5vw,37px);font-weight:800;letter-spacing:-.02em;
line-height:1.18;color:var(--bleu);max-width:27ch;
/* deux lignes de longueur égale plutôt qu'une longue et un moignon :
sans ça, sa phrase se coupait en trois, « Retrouvez votre » puis
« énergie » tout seul. */
text-wrap:balance;
}
/* Ses deux exclamations n'en font plus qu'une : les deux couleurs de sa
carte tiennent la coupure à la place du point d'exclamation perdu. */
.claim-nu strong span{color:var(--orange)}
/* Élément à part dans le même paragraphe (donc dans le même bloc animé
au défilement) : bloc de largeur fixe centré par margin auto, pas
par le flex qui décalait tout avant le 07/08. */
.fl-vers-cta{display:block;margin:6px auto 0}
.fl-vers-cta path{stroke-dasharray:1;animation:am-trace .58s both cubic-bezier(.3,.75,.35,1)}
.fl-vers-cta path:nth-child(2){animation-duration:.2s;animation-delay:.44s}
.reveal .fl-vers-cta path{animation-play-state:paused}
.reveal.vu .fl-vers-cta path{animation-play-state:running}
/* ---------- grilles / cartes ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:700px){.g2,.g4{grid-template-columns:1fr}}
.card{
background:#fff;border:2px solid var(--trait);border-radius:20px;padding:26px 28px;
transition:.2s;
}
.card:hover{border-color:var(--bleu-clair);transform:translateY(-3px);box-shadow:0 12px 30px rgba(27,60,146,.09)}
.card h3{margin-bottom:10px}
.card p{color:var(--encre-2);font-size:.9em;margin:0}
.card .num{
display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
background:var(--bleu);color:#fff;font-weight:900;font-size:19px;margin-bottom:16px;
}
/* ---------- les 4 rôles ---------- */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
@media(max-width:900px){.roles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.roles{grid-template-columns:1fr}}
.role{border:3px solid var(--c);border-radius:20px;padding:24px 22px;background:#fff;position:relative}
.role .tag{
font-size:12.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:#fff;background:var(--c);padding:4px 12px;border-radius:20px;display:inline-block;margin-bottom:14px;
}
.role p{margin:0;font-size:.87em;color:var(--encre-2);line-height:1.6}
.role svg{width:38px;height:38px;margin-bottom:10px;display:block}
/* ---------- étapes ---------- */
.etape{
display:grid;grid-template-columns:78px 1fr;gap:24px;align-items:start;
padding:30px 0;border-bottom:2px solid var(--trait);
}
.etape:last-child{border-bottom:0}
@media(max-width:640px){.etape{grid-template-columns:1fr;gap:12px}}
/* Les 4 bulles parcourent l'arc-en-ciel du logo, de gauche à droite
(bleu → cyan → vert → jaune → orange → rouge → magenta), en dégradé
qui respire lentement — appel du 01/08. */
@keyframes am-degrade{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.etape .rond{
width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
font-weight:700;font-size:26px;color:#fff;
background:linear-gradient(125deg,var(--c1),var(--c2) 50%,var(--c1));
background-size:230% 230%;
animation:am-degrade 9s ease-in-out infinite;
box-shadow:0 6px 18px color-mix(in srgb,var(--c1) 34%,transparent);
--c1:#1D49A7;--c2:#2FA3D8;
}
.etape:nth-child(2) .rond{--c1:#2E9E6E;--c2:#8CC63F;animation-delay:-2.25s}
.etape:nth-child(3) .rond{--c1:#F2B705;--c2:#F26A2E;animation-delay:-4.5s}
.etape:nth-child(4) .rond{--c1:#E8352E;--c2:#D6336C;animation-delay:-6.75s}
/* même typo que les sous-titres (manuscrite), en plus petit — appel du 01/08 */
.etape h3{
font-family:'Architects Daughter',cursive;font-weight:400;letter-spacing:0;
font-size:clamp(25px,3.1vw,34px);margin-bottom:8px;
}
/* « La question centrale : » a disparu : c'est une flèche courbe qui
annonce la question. Sa pointe arrive pile au milieu de la hauteur
de la première ligne, sans la toucher. */
.etape .question{
position:relative;padding-left:50px;
/* 24 px et pas 23 : à partir de 24 px la norme de lisibilité passe de
4,5:1 à 3:1, et l'orange d'Anouk (3,71:1 sur crème) devient conforme
SANS toucher sa couleur. Un pixel plutôt qu'un orange assombri. */
font-family:'Architects Daughter',cursive;font-size:24px;color:var(--orange);
margin:0 0 14px;line-height:1.35;
}
.fl-courbe{position:absolute;left:0;top:calc(1.35em / 2);transform:translateY(-50%);overflow:visible}
.fl-courbe path{stroke-dasharray:1;animation:am-trace .58s both cubic-bezier(.3,.75,.35,1)}
.fl-courbe path:nth-child(2){animation-duration:.2s;animation-delay:.44s}
.fl-courbe path:nth-child(4){animation-duration:.2s;animation-delay:.62s}
.fl-courbe path:nth-child(3){animation-delay:.18s}
.reveal .fl-courbe path{animation-play-state:paused}
.reveal.vu .fl-courbe path{animation-play-state:running}
/* les amorces « Nous travaillerons sur : », « Nous surmonterons : »…
— une seule taille pour les quatre (harmonisation du 01/08) */
.etape .amorce{color:var(--encre-2);font-size:.9em;margin:0 0 12px}
.etape ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
/* Dans SON dossier ces items sont écrits avec des tirets (« - Votre
identité », « - Vos peurs »). Sa consigne du 01/08 — « tous les tirets
et toutes les puces du site deviennent UNE MÊME étoile » — s'applique
donc ici aussi : la pastille garde sa forme, le tiret redevient l'étoile. */
.etape ul li{
background:var(--bleu-voile);color:var(--bleu);font-weight:700;font-size:15.5px;
padding:6px 15px 6px 12px;border-radius:20px;
display:inline-flex;align-items:center;gap:7px;
}
.etape ul li::before{content:"";width:14px;height:14px;flex:none}
/* ---------- auto-test ---------- */
.test{background:#fff;border:3px solid var(--bleu);border-radius:24px;padding:34px 32px;max-width:760px;margin:0 auto}
.test h3{text-align:center;margin-bottom:6px}
.test .sub{text-align:center;color:var(--encre-2);margin-bottom:22px}
.test label{
display:flex;gap:14px;align-items:flex-start;cursor:pointer;
padding:14px 16px;border:2px solid var(--trait);border-radius:14px;margin-bottom:10px;
font-size:.92em;transition:.16s;
}
.test label:hover{border-color:var(--bleu-clair);background:var(--bleu-voile)}
.test input{
appearance:none;width:24px;height:24px;min-width:24px;margin-top:2px;
border:2.5px solid var(--gris-clair);border-radius:7px;cursor:pointer;transition:.16s;
}
.test input:checked{background:var(--vert);border-color:var(--vert)}
.test input:checked::after{content:"✓";color:#fff;font-weight:900;display:grid;place-items:center;height:100%;font-size:15px}
.test label:has(input:checked){border-color:var(--vert);background:#EDFAF3}
.test .resultat{
margin-top:20px;padding:24px;border-radius:16px;background:var(--orange-voile);
border:2px solid var(--orange);text-align:center;
display:none;
}
.test .resultat.on{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.test .resultat p{color:var(--encre);font-weight:700;font-size:1em}
/* ---------- modalités ---------- */
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.modes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.modes{grid-template-columns:1fr}}
.mode{text-align:center;padding:28px 20px;border:2px solid var(--trait);border-radius:20px;background:#fff}
/* la couleur de chaque carte = celle de son pictogramme (survol) */
.mode:nth-child(1){--c:var(--bleu)}
.mode:nth-child(2){--c:var(--orange)}
.mode:nth-child(3){--c:var(--vert)}
.mode:nth-child(4){--c:var(--magenta)}
.mode svg{width:46px;height:46px;margin:0 auto 14px;display:block}
.mode b{display:block;font-size:.97em;color:var(--bleu);margin-bottom:4px;transition:color .25s}
.mode span{font-size:.82em;color:var(--encre-2)}
/* ---------- citations ---------- */
.citation{
text-align:center;max-width:800px;margin:0 auto;
font-family:'Allura',cursive;font-size:clamp(27px,3.8vw,42px);
line-height:1.4;color:var(--bleu);
}
.citation.orange{color:var(--orange)}
section.bleu .citation{color:#fff}
/* « le mettre en gras et en plus grand » — ses deux citations bleues
(mail du 11/08). Allura n'existe qu'en une seule graisse : demander
font-weight:700 ne charge aucun fichier, le navigateur FABRIQUE un
faux gras en dédoublant le glyphe — sur un script fin, les boucles
se bouchent et les déliés bavent. On épaissit donc le TRAIT lui-même
(-webkit-text-stroke, repris par tous les navigateurs depuis 2021) :
la lettre garde exactement son dessin, elle prend juste du corps.
paint-order:stroke fill pose le trait SOUS le remplissage, sinon
l'épaississement mange l'intérieur des lettres. */
.citation.forte{
font-size:clamp(33px,5.1vw,58px);
-webkit-text-stroke:.8px currentColor;
paint-order:stroke fill;
/* Agrandie, elle ne tenait plus dans les 800 px de .citation : le
dernier mot partait seul sur une 3e ligne, sous un
qui en
annonçait deux. La boîte suit la taille du texte. */
max-width:1040px;
}
/* Le mot « avec » de sa citation. Souligné depuis le 11/08 ; le
soulignement est décalé vers le bas, sans ça il traverse les jambages
du script.
🆕 12/08 — il était en MAJUSCULES, elle l'a repris : « la typologie ne
donne pas super en majuscule alors peut-être mieux en minuscule gras ».
Retour aux minuscules, et le « gras » se fait comme pour la citation
entière : on épaissit le TRAIT (Allura n'a pas de graisse, un
font-weight:700 ferait fabriquer un faux gras qui bouche les boucles).
1,5px contre 0,8px pour le reste de la phrase : le mot pèse plus
lourd, mais il reste de la même écriture. */
.citation .avec{
font-weight:inherit;
-webkit-text-stroke:1.5px currentColor;
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:.08em;
}
/* ---------- listes texte ---------- */
.prose{max-width:74ch}
.prose p{font-size:.97em;color:var(--encre)}
.prose .fort{font-size:1.1em;font-weight:700;color:var(--bleu)}
/* Le « NON » qui répond à ses deux questions (mail du 11/08 : « mettre
en-dessous en Maj: NON »). Seul sur sa ligne, à la taille du texte
courant, il se lisait comme un mot oublié entre deux paragraphes.
Il prend donc la couleur d'accent et du corps : c'est une réponse
qui tranche, elle doit s'entendre.
⚠ Il a d'abord été composé dans Architects Daughter, la police des
titres — mauvais choix, corrigé le 11/08 : cette écriture manuscrite
dessine son O nettement plus petit et plus bas que ses N, si bien que
le mot se lisait « NoN ». Passe encore dans « FAQ » ou « AM-BOOST »,
qu'on reconnaît d'un bloc ; pas dans un mot de trois lettres dont
toute la force est d'être asséné. Il prend donc Quicksand en gras,
qui aligne les trois capitales — et c'est déjà la police de ses
majuscules du paragraphe juste en dessous (UNIQUE, RESSOURCES,
REGARD EXTERIEUR, DEBLOQUER) : le bloc devient cohérent.
🆕 12/08 — Anouk : « Le NON le mettre comme ça mais = Non (en
minuscule) ». Le mot garde donc son corps et son orange, il perd
seulement ses capitales. L'interlettrage de +.04em partait avec :
il aérait des majuscules, il déchirait un mot en minuscules.
🆕 14/08 — Le N tranche que « en minuscule » voulait bien dire TOUT
en minuscules : « Non » devient « non ». Corps, orange et place
inchangés ; seule la capitale saute. */
.prose p.non-tranche{
margin:20px 0 18px;font-weight:700;
font-size:1.75em;line-height:1;color:var(--orange);
/* 14/08 — décalé vers la droite (Le N) : le mot n'est plus dans l'axe
du paragraphe, il est le point d'arrivée de la flèche. Le retrait
laisse la place au coude ; le mot reste court, il ne se coupe pas. */
position:relative;padding-left:54px;
}
/* La flèche qui descend de sous le « o » de « Sommes » et coude vers le
« non ». Elle est posée en absolu pour ne rien pousser dans le fil du
texte : le paragraphe garde sa place, même si la flèche disparaît.
Les trois nombres ci-dessous sont mesurés, pas estimés — et ils vont
ensemble, changer la taille les décale tous :
· 44 px (dessin de 60) → le trait fait 0,73 de son gabarit ;
· left:9px → le montant tombe à 16,7 px du bord du paragraphe,
soit l'aplomb du « o » de « Sommes » (mesuré au Range, identique
à 3 px près sur téléphone : un seul réglage suffit) ;
· top:-13px → la pointe arrive au milieu de la hauteur des lettres
minuscules, et le haut du trait démarre dans la marge, sous les
jambages de « capables », jamais dedans. */
.fl-non{position:absolute;left:9px;top:-13px;overflow:visible}
.fl-non path{stroke-dasharray:1;animation:am-trace .5s both cubic-bezier(.3,.75,.35,1)}
.fl-non path:nth-child(2){animation-duration:.18s;animation-delay:.42s}
/* Les 2 questions qui préparent le « Non » : elles restent bleues (c'est
la voix d'appui du paragraphe) mais passent en italique gras — on doit
entendre qu'elles sont POSÉES, pas affirmées. Demande du 11/08. */
.prose p.non-avant{color:var(--encre-2);font-style:italic;font-weight:700}
/* Et la phrase qui suit le « Non » : c'est celle qui résume son métier
(« Parce qu'à deux c'est plus facile »). En orange gras, elle sort du
paragraphe. plutôt qu'un : c'est bien une emphase forte,
les lecteurs d'écran doivent l'entendre aussi. Demande du 11/08. */
.prose .non-apres{color:var(--orange);font-weight:700}
.liste-nue{margin:0 0 20px;padding:0;list-style:none}
.liste-nue li{
padding:9px 0 9px 32px;position:relative;font-size:.97em;border-bottom:1px solid var(--trait);
}
.liste-nue li:last-child{border-bottom:0}
.liste-nue li::before{
content:"";position:absolute;left:1px;top:16px;width:17px;height:17px;
}
/* Variante pour les énumérations courtes arrivées le 06/08 (« ne plus
douter », « une transition de vie »…) : mêmes étoiles, mais sans les
filets de séparation — sur des bouts de 3 mots ils dessinaient un
tableau. Lignes resserrées, étoile recalée sur la première ligne. */
.liste-nue.serree li{border-bottom:0;padding:5px 0 5px 30px}
.liste-nue.serree li::before{top:10px}
.deux-listes .liste-nue{margin-bottom:26px}
.situations{display:flex;flex-wrap:wrap;gap:11px;margin-top:14px;justify-content:center}
.situations span{
display:inline-flex;align-items:center;gap:9px;
background:#fff;border:2px solid var(--bleu);color:var(--bleu);font-weight:700;
padding:9px 20px;border-radius:30px;font-size:17px;
}
.situations span::before{content:"";width:16px;height:16px;flex:none}
/* « Je ne cherche pas à… » : ce sont les deux phrases en creux,
leur étoile reste en retrait pour ne pas les mettre en avant. */
.liste-nue.sourdine li::before{filter:grayscale(1);opacity:.42}
/* ═══ L'ÉTOILE — le motif unique du site (appel du 01/08) ═══
Elle remplace tous les tirets et toutes les puces. Elle scintille
UNE fois quand son bloc arrive à l'écran, puis ne bouge plus jamais :
un pictogramme, pas un gyrophare. */
@keyframes am-scintille{
0% {opacity:0; transform:scale(.15) rotate(-80deg)}
55% {opacity:1; transform:scale(1.32) rotate(10deg)}
76% {opacity:1; transform:scale(.93) rotate(-2deg)}
100%{opacity:1; transform:scale(1) rotate(0deg)}
}
.hero .questions li::before,
.liste-nue li::before,
.etape ul li::before,
.situations span::before{
background:var(--etoile) center/contain no-repeat;
transform-origin:center;
animation:am-scintille .62s both cubic-bezier(.3,1.15,.4,1);
}
/* tant que le bloc est sous l'écran, l'étoile attend son tour */
.reveal li::before,.reveal span::before,
li.reveal::before,span.reveal::before{animation-play-state:paused}
.reveal.vu li::before,.reveal.vu span::before,
li.reveal.vu::before,span.reveal.vu::before{animation-play-state:running}
/* ---------- le dessin d'Anouk (accueil) ----------
Repris TEL QUEL (sa demande du 30/07). En pleine largeur sur grand
écran ; sur téléphone, le paysage serait illisible → trois volets
verticaux découpés dans la même image, rien n'est redessiné.
🆕 14/08 : un 4ᵉ volet ferme la série — la phrase de fin, reprise
d'un seul tenant (voir tools/volet-phrase.py). */
.dessin-anouk{margin:0}
.dessin-anouk img{width:100%;border-radius:18px}
.dessin-volets{display:none}
@media(max-width:700px){
.dessin-anouk .dessin-large{display:none}
.dessin-volets{display:grid;gap:16px}
}
/* Le dessin a quitté l'accueil : il ouvre « Qui suis-je », plus large
que le reste du site pour être vraiment en évidence (appel du 01/08). */
.wrap.large{max-width:1260px}
/* ---------- « Qui suis-je » : la photo en haut à gauche ---------- */
.entete-anouk{
display:grid;grid-template-columns:minmax(190px,300px) 1fr;
gap:38px;align-items:center;text-align:left;
}
.entete-anouk .portrait{
width:100%;border-radius:24px;
box-shadow:0 20px 44px rgba(33,48,110,.20);
}
/* le bloc se rétrécit sur le nom : le trait dessous fait sa largeur exacte */
.entete-anouk .nom-bloc{width:fit-content;max-width:100%}
.entete-anouk .brush-rule{width:100%;margin:0 0 16px}
@media(max-width:760px){
.entete-anouk{grid-template-columns:1fr;gap:22px;text-align:center;max-width:340px;margin:0 auto}
.entete-anouk .nom-bloc{margin:0 auto}
.entete-anouk .brush-rule{margin:0 auto 14px}
}
/* ---------- « ou » : le pivot entre les deux accompagnements ---------- */
.ou{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}
.ou::before,.ou::after{content:"";height:2px;border-radius:2px;background:var(--trait)}
.ou span{font-family:'Architects Daughter',cursive;font-size:32px;color:var(--orange);line-height:1}
/* ---------- « au service de la personne » ----------
Elle portait une double flèche dessinée ; retirée le 02/08 (demande
de Le N). La phrase se tient seule, un cran plus grande que le corps
de texte — c'est la conclusion du bloc « Mon approche ». */
.outils{margin:0;font-size:1.05em;line-height:1.6}
/* ---------- FAQ ---------- */
.faq details{
border:2px solid var(--trait);border-radius:16px;padding:18px 24px;margin-bottom:12px;background:#fff;
transition:border-color .25s;
}
.faq details[open]{border-color:var(--bleu-clair)}
.faq summary{
cursor:pointer;font-weight:800;font-size:1em;color:var(--bleu);list-style:none;
display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
/* le « + » pivote pour devenir une croix : même glyphe, donc le mouvement se voit */
.faq summary::after{
content:"+";color:var(--orange);font-size:28px;font-weight:400;line-height:1;
transition:transform .28s cubic-bezier(.3,.8,.35,1);
}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq details p{margin:14px 0 0;color:var(--encre-2);font-size:.92em}
/* ---------- contact ----------
La colonne de gauche est une colonne flex dont l'encadré prend tout le
reste de la hauteur : il descend donc exactement jusqu'à la base du
bouton « Envoyer » d'en face. Le contenu, lui, est centré dedans —
étiré aux quatre coins il aurait paru vide, centré il paraît posé. */
.col-contact{display:flex;flex-direction:column}
.col-contact .contact-box{flex:1;align-content:center;gap:20px}
.contact-box{
background:#fff;border:3px solid var(--orange);border-radius:24px;
padding:34px;display:grid;gap:14px;max-width:520px;
}
.contact-box .rappel{margin:6px 0 0;font-size:.9em;color:var(--encre-2)}
/* min-height : appeler ou écrire depuis un téléphone, c'est L'action
de cette page — la cible doit être franche. */
.contact-box a{display:flex;gap:14px;align-items:center;min-height:48px;font-size:20px;font-weight:800;color:var(--bleu)}
.contact-box a:hover{color:var(--orange)}
.contact-box svg{width:26px;height:26px;flex:none}
form.contact{display:grid;gap:16px;max-width:520px}
form.contact label{font-weight:800;font-size:16px;color:var(--bleu);display:block;margin-bottom:6px}
form.contact input,form.contact textarea{
width:100%;font-family:inherit;font-size:.9em;padding:13px 16px;
border:2px solid var(--trait);border-radius:13px;background:#fff;color:var(--encre);
}
/* Au clavier, on doit VOIR où on est : un simple changement de bordure
ne suffit pas (il se confond avec le survol). Anneau bleu franc. */
form.contact input:focus-visible,form.contact textarea:focus-visible{
outline:3px solid var(--bleu);outline-offset:2px;border-color:var(--bleu);
}
form.contact input:focus,form.contact textarea:focus{border-color:var(--bleu)}
/* même règle pour tout ce qui se navigue au clavier */
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible{
outline:3px solid var(--bleu);outline-offset:3px;border-radius:6px;
}
/* sur fond noir, le liseré bleu ne se voit pas : il passe au blanc */
footer.site a:focus-visible{outline-color:#fff}
form.contact textarea{min-height:110px;resize:vertical}
/* ---------- footer ---------- */
footer.site{background:var(--noir);color:#B8BEC9;padding:56px 0 34px;margin-top:0}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:820px){footer.site .wrap{grid-template-columns:1fr;gap:26px}}
/* h3 depuis le 02/08 (les niveaux de titre ne sautent plus) — le rendu
ne bouge pas d'un pixel, la taille est forcée ici. */
footer.site :is(h3,h4){color:#fff;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
/* padding généreux : au doigt, un lien de 35 px de haut se rate. 11 px
de part et d'autre amènent la cible à 49 px. */
footer.site a{color:#B8BEC9;display:block;padding:11px 0;font-size:16px}
footer.site a:hover{color:var(--orange-clair)}
footer.site .bas{
border-top:1px solid #3A3F4A;margin-top:34px;padding-top:22px;
font-size:15px;color:#7C8494;text-align:center;
}
footer.site .sig{font-family:'Allura',cursive;font-size:26px;color:#fff;margin-bottom:10px;display:block}
/* ===========================================================
ANIMATIONS — v3
===========================================================
Règle : une animation doit DIRE quelque chose, sinon elle dégage.
Le propos de la carte de visite, c'est le mouvement
(« Comprendre ouvre des perspectives · Agir trace le chemin »).
Donc trois gestes, et rien d'autre :
1. ça se PEINT — les pinceaux se posent comme sur la carte
2. ça se DIT DANS L'ORDRE — comprendre d'abord, agir ensuite
3. ça se TRACE — le trajet en 4 étapes se dessine au défilement
Rien ne boucle, rien ne clignote, rien ne rebondit deux fois.
Tout est coupé si le visiteur a demandé « moins d'animations » (voir tout en bas).
=========================================================== */
@keyframes am-monte {from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none}}
@keyframes am-trait {from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)}}
/* Le geste des deux coins descend : sur la carte, la brosse part du haut
et file vers le bas. On dévoile donc de haut en bas, plus de gauche à
droite comme quand les coins étaient des arcs à 45°. */
/* Les marges négatives d'arrivée : le voile de couleur de la variante
« Souffle » déborde volontairement du pinceau, et un clip-path à
inset(0 0 0 0) le rognerait au ras du cadre.
03/08 — « backwards » plutôt que « both ». L'état d'arrivée ne rogne
rien du tout : c'est un cadre plus grand que le voile lui-même. Mais
avec « both » il restait collé aux deux pinceaux du haut de page POUR
TOUJOURS, et un navigateur qui voit une découpe la réapplique à chaque
fois qu'il repeint la zone — pendant tout le reste de la visite. En
« backwards », le geste démarre exactement pareil et, une fois joué,
l'élément redevient un rectangle ordinaire. Même animation à l'œil,
un calcul de moins à chaque défilement. */
@keyframes am-pinceau-g{from{clip-path:inset(-60% -300% 100% -60%)} to{clip-path:inset(-60% -300% -330% -60%)}}
@keyframes am-pinceau-d{from{clip-path:inset(-330% -60% 100% -300%)} to{clip-path:inset(-330% -60% -60% -300%)}}
@keyframes am-coche {from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)}}
@keyframes am-ecrit {from{-webkit-mask-position:100% 0;mask-position:100% 0}
to {-webkit-mask-position:0 0; mask-position:0 0}}
/* ---------- 1. le coup de pinceau se peint ----------
Il part du bord et file vers l'intérieur, dans le sens du geste. */
.hero .brush-tl{animation:am-pinceau-g 1.6s .05s backwards cubic-bezier(.25,.75,.3,1)}
.hero .brush-br{animation:am-pinceau-d 1.6s .25s backwards cubic-bezier(.25,.75,.3,1)}
/* ---------- 2. le haut de page arrive dans l'ordre de lecture ----------
Base commune à toutes les pages : chaque bloc du hero se pose à la suite. */
.hero > .wrap > *{animation:am-monte .7s both cubic-bezier(.22,.75,.3,1)}
.hero > .wrap > *:nth-child(1){animation-delay:.06s}
.hero > .wrap > *:nth-child(2){animation-delay:.22s}
.hero > .wrap > *:nth-child(3){animation-delay:.38s}
.hero > .wrap > *:nth-child(4){animation-delay:.54s}
.hero > .wrap > *:nth-child(5){animation-delay:.70s}
.hero > .wrap > *:nth-child(6){animation-delay:.86s}
.hero > .wrap > .brush-rule{animation:am-trait .85s .30s both cubic-bezier(.22,.75,.3,1)}
/* Accueil : la carte de visite se rejoue. Le logo, puis la promesse
en DEUX temps — « Comprendre… » d'abord, « Agir… » ensuite — puis l'appel. */
.hero > .wrap > .logo-hero {animation-delay:.05s}
.hero > .wrap > .baseline {animation:none}
/* Le sous-titre s'écrit (30/07, demande Le N) : un voile révèle chaque
ligne de gauche à droite, comme un mot tracé à la main. Une fois, au
chargement — rien ne boucle. Navigateur sans mask : texte simplement
visible, rien de masqué. */
.hero .baseline .b1,
.hero .baseline .b2{
-webkit-mask-image:linear-gradient(100deg,#000 46%,rgba(0,0,0,0) 54%);
mask-image:linear-gradient(100deg,#000 46%,rgba(0,0,0,0) 54%);
-webkit-mask-size:250% 100%;mask-size:250% 100%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
animation:am-ecrit .85s .30s both ease-in-out;
}
.hero .baseline .b2{animation-delay:.80s}
.hero > .wrap > .rule-carte{animation:am-trait .85s .78s both cubic-bezier(.22,.75,.3,1)}
.hero > .wrap > .accroche {animation-delay:.95s}
/* Les 4 questions arrivent plus vite qu'avant (appel du 01/08),
et chaque étoile scintille juste après sa ligne. */
.hero > .wrap > .questions {animation:none}
.hero .questions li {animation:am-monte .42s both cubic-bezier(.22,.75,.3,1)}
.hero .questions li:nth-child(1){animation-delay:1.00s}
.hero .questions li:nth-child(2){animation-delay:1.07s}
.hero .questions li:nth-child(3){animation-delay:1.14s}
.hero .questions li:nth-child(4){animation-delay:1.21s}
.hero .questions li:nth-child(1)::before{animation-delay:1.10s}
.hero .questions li:nth-child(2)::before{animation-delay:1.17s}
.hero .questions li:nth-child(3)::before{animation-delay:1.24s}
.hero .questions li:nth-child(4)::before{animation-delay:1.31s}
/* ---------- 3. apparition des blocs au défilement ----------
Posé par assets/anim.js, qui ne masque que ce qui est sous l'écran. */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.vu{
opacity:1;transform:none;
transition:opacity .6s cubic-bezier(.22,.75,.3,1),transform .6s cubic-bezier(.22,.75,.3,1);
transition-delay:var(--d,0s);
}
/* ---------- 4. le trajet en 4 étapes se trace ----------
Le fil relie une étape à la suivante et prend la couleur des deux ronds.
Il ne se dessine que quand l'étape est atteinte : le chemin se fait en marchant. */
.etape{position:relative}
.etape::before{
content:"";position:absolute;left:31px;top:102px;bottom:-32px;width:4px;border-radius:4px;
background:linear-gradient(180deg,#2FA3D8,#2E9E6E);
transform:scaleY(1);transform-origin:top center;
}
.etape:nth-child(2)::before{background:linear-gradient(180deg,#8CC63F,#F2B705)}
.etape:nth-child(3)::before{background:linear-gradient(180deg,#F26A2E,#E8352E)}
.etape:last-child::before{display:none}
.etape.reveal::before{transform:scaleY(0)}
.etape.reveal.vu::before{transform:scaleY(1);transition:transform .9s cubic-bezier(.3,.7,.3,1) .18s}
/* le numéro se pose avant que le fil ne reparte */
.etape .rond{transform-origin:center}
.etape.reveal .rond{transform:scale(.55);opacity:.35}
.etape.reveal.vu .rond{
transform:scale(1);opacity:1;
transition:transform .6s cubic-bezier(.2,1.5,.4,1) .05s,opacity .4s .05s;
}
@media(max-width:640px){.etape::before{display:none}}
/* ---------- 5. le trait de pinceau sous la navigation ----------
Il se peint de gauche à droite au survol, comme les coins de la carte. */
.nav nav a{position:relative;padding-bottom:5px}
.nav nav a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
background:linear-gradient(90deg,var(--orange),var(--magenta));
transform:scaleX(0);transform-origin:left center;
transition:transform .3s cubic-bezier(.22,.75,.3,1);
}
.nav nav a:hover::after{transform:scaleX(1)}
/* sans JavaScript, pas de trait glisseur : l'onglet actif garde son trait fixe */
html:not(.js) .nav nav a[aria-current]::after{transform:scaleX(1)}
/* Le trait qui glisse (30/07, demande Le N) : UN seul trait pinceau pour
la tranche active, déplacé par le scroll-spy de menu.js. La classe
« pret » n'arrive qu'après le premier placement : pas de glissade
fantôme depuis le bord gauche au chargement. */
html.js .nav nav .glisseur{
position:absolute;height:3px;border-radius:3px;pointer-events:none;
background:linear-gradient(90deg,var(--orange),var(--magenta));
}
html.js .nav nav .glisseur.pret{
transition:left .45s cubic-bezier(.22,.75,.3,1),width .45s cubic-bezier(.22,.75,.3,1);
}
@media(max-width:880px){
/* en liste verticale (menu replié), le trait n'a pas de sens */
html.js .nav nav .glisseur{display:none}
}
.logo img{transition:transform .3s cubic-bezier(.22,.75,.3,1)}
.logo:hover img{transform:translateY(-2px)}
/* ---------- 6. réactions au survol ---------- */
.role,.mode{transition:transform .22s cubic-bezier(.22,.75,.3,1),box-shadow .22s,border-color .22s}
.role:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(33,37,46,.10)}
.mode:hover{transform:translateY(-4px);border-color:var(--bleu-clair);box-shadow:0 14px 30px rgba(27,60,146,.10);
/* navigateurs récents : bord + ombre teintés à la couleur du picto */
border-color:color-mix(in srgb,var(--c) 50%,#fff);
box-shadow:0 14px 30px color-mix(in srgb,var(--c) 16%,transparent)}
.mode:hover b{color:var(--c)}
/* le pictogramme se redessine trait par trait au survol
(pathLength="1" dans le SVG : dasharray 1 = le trait entier) */
@keyframes am-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mode svg > *{stroke-dasharray:1}
.mode:hover svg > :nth-child(1){animation:am-trace .5s ease both}
.mode:hover svg > :nth-child(2){animation:am-trace .5s ease .15s both}
.mode:hover svg > :nth-child(3){animation:am-trace .5s ease .3s both}
.mode:hover svg > :nth-child(4){animation:am-trace .5s ease .45s both}
.mode:hover svg > :nth-child(5){animation:am-trace .5s ease .6s both}
.mode:hover svg > :nth-child(6){animation:am-trace .5s ease .75s both}
.situations span{transition:transform .2s cubic-bezier(.22,.75,.3,1)}
.situations span:hover{transform:translateY(-2px)}
/* ---------- 7. l'auto-test : la coche se pose ---------- */
.test input:checked::after{animation:am-coche .3s cubic-bezier(.2,1.5,.4,1) both}
.faq details[open] p{animation:am-monte .35s both cubic-bezier(.22,.75,.3,1)}
/* ---------- 8. respect du réglage système ----------
« Réduire les animations » (macOS / iOS / Windows) : tout s'arrête,
et rien ne reste masqué. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-delay:0s!important;
transition-duration:.001ms!important;transition-delay:0s!important;
}
.reveal{opacity:1!important;transform:none!important}
.etape::before{transform:scaleY(1)!important}
.etape .rond{transform:none!important;opacity:1!important}
html{scroll-behavior:auto}
}
/* ===========================================================
TÉLÉPHONE — v1, écrit après mesure (banc Chrome, écrans réels
320 / 375 / 390 / 430 / 768 / 1440 px).
Le site est consulté majoritairement au téléphone. Trois principes :
1. RIEN sous 44 px au doigt — c'est le minimum Apple ;
2. l'écran est petit : on retire du vide, pas du contenu ;
3. le pouce tape en bas de l'écran : les boutons y sont pleine largeur.
=========================================================== */
/* ---------- 1. cibles tactiles ---------- */
@media(max-width:880px){
/* bandeau noir : ne subsiste que sur questions.html, lue par Anouk
sur son téléphone — donc un texte un peu plus grand. */
#brouillon{font-size:15px;padding:11px 18px;gap:12px}
}
/* ---------- 2. respiration : moins de marges perdues ---------- */
@media(max-width:560px){
section{padding:52px 0}
section.tight{padding:38px 0}
.wrap{padding:0 20px}
.claim-nu strong{max-width:none}
.card{padding:20px 18px;border-radius:16px}
.test{padding:22px 16px;border-radius:18px}
.contact-box{padding:24px 20px;border-radius:18px}
.faq details{padding:16px 18px}
.role{padding:18px 20px}
}
@media(max-width:400px){.wrap{padding:0 16px}}
/* ---------- 3. le pouce : les boutons prennent toute la largeur ---------- */
@media(max-width:520px){
.btns{flex-direction:column;align-items:stretch;gap:12px}
.btn{width:100%;justify-content:center;padding:16px 22px}
}
/* ---------- 4. grilles : 4 modalités = 2×2, pas 4 blocs empilés ----------
Empilées, les 4 cartes faisaient 760 px de défilement pour quatre mots. */
@media(max-width:520px){
.modes{grid-template-columns:repeat(2,1fr);gap:12px}
.mode{padding:18px 10px}
.mode svg{width:36px;height:36px;margin-bottom:10px}
.mode b{font-size:.84em;line-height:1.3}
.mode span{font-size:.76em;line-height:1.45}
.roles{gap:12px}
.grid{gap:14px}
}
@media(max-width:340px){.modes{grid-template-columns:1fr}}
/* ---------- 5. les pinceaux cadrent, ils n'envahissent pas ----------
Sur téléphone le clamp les tient déjà à 104-122 px : le seul réglage
qui reste utile est de les alléger pour que le texte passe devant. */
@media(max-width:560px){
.brush-corner{opacity:.82}
}
/* ---------- 6. hero : le message arrive plus vite ----------
Mesuré : la première phrase était à 728 px du haut, soit presque
un écran entier de logo avant de comprendre de quoi il s'agit. */
@media(max-width:560px){
.hero{padding:34px 0 44px}
.logo-hero{width:min(200px,58vw)}
.hero .accroche{margin:28px auto 24px;line-height:1.28}
.hero .questions{gap:9px}
.hero .questions li{font-size:.92em;grid-template-columns:16px 1fr;gap:7px}
.hero .questions li::before{width:16px;height:16px;margin-top:calc((1.55em - 16px) / 2)}
.baseline{margin-top:12px}
}
/* ---------- 7. étapes : le numéro ne mange pas la ligne ---------- */
@media(max-width:560px){
.etape{padding:24px 0}
.etape .rond{width:52px;height:52px;font-size:21px}
.etape .question{font-size:20px}
.etape ul li{font-size:14.8px;padding:6px 13px}
}
/* ---------- 8. étiquettes de situations ---------- */
@media(max-width:560px){
.situations{gap:9px}
.situations span{font-size:15.5px;padding:8px 15px}
.lede{font-size:.97em}
.prose p{font-size:.92em}
.liste-nue li{font-size:.92em}
.citation{line-height:1.35}
}
/* ══════════════════════════════════════════════════════════════════════
9. iPHONE — LA COUCHE TACTILE (audit du 02/08)
══════════════════════════════════════════════════════════════════════
Tout ce qui suit corrige des défauts qui ne se voient sur AUCUNE
capture d'écran : ils ne se sentent qu'avec un doigt, sur un vrai
téléphone. Mesurés un par un dans un iPhone simulé avant d'écrire
une seule ligne. */
/* ---------- 9.1 le survol qui reste collé ----------
Mesuré : 22 règles :hover, dont 7 qui déplacent l'élément, et AUCUNE
règle :active. Sur iOS un doigt qui touche une carte déclenche le
survol — et il RESTE collé jusqu'au prochain appui ailleurs : la carte
reste soulevée, le picto reste redessiné, l'ombre reste posée.
On ne réécrit pas les 22 règles (le survol à la souris est très bien) :
on les neutralise là où il n'y a pas de souris, et on rend l'appui
lui-même — un enfoncement court, qui repart quand le doigt repart. */
@media (hover:none){
/* le survol ne peut plus rester accroché */
.btn-primary:hover{background:var(--orange);transform:none;box-shadow:0 6px 22px rgba(232,98,42,.32)}
.btn-ghost:hover{background:var(--papier);color:var(--bleu)}
.card:hover{transform:none;box-shadow:none;border-color:var(--trait)}
.role:hover,.situations span:hover{transform:none;box-shadow:none}
.logo:hover img{transform:none}
.mode:hover{transform:none;box-shadow:none;border-color:var(--trait)}
.mode:hover b{color:inherit}
.mode:hover svg > *{animation:none}
.test label:hover{border-color:var(--trait);background:transparent}
.nav nav a:hover::after{transform:scaleX(0)}
.contact-box a:hover,footer.site a:hover{color:inherit}
/* …et c'est l'APPUI qui répond, à la milliseconde où le doigt touche */
.btn:active{transform:scale(.97)}
.card:active,.role:active,.mode:active,.test label:active{
transform:scale(.985);border-color:var(--bleu-clair);
}
.situations span:active{transform:scale(.96)}
.faq summary:active,.contact-box a:active,
footer.site a:active,.nav nav a:active{opacity:.55}
}
/* ---------- 9.2 le flash gris d'iOS ----------
iOS pose de lui-même un rectangle terne sur la cible pendant ~200 ms.
Il est rectangulaire — donc il déborde de tous nos angles arrondis —
et il écrase le retour d'appui du 9.1, qui est plus fin. On le coupe
uniquement là où on a déjà prévu mieux. */
a,button,summary,label,input,textarea,
.card,.role,.mode,.situations span{-webkit-tap-highlight-color:transparent}
/* ---------- 9.3 l'encoche ----------
Mesuré : 0 règle env(safe-area) dans toute la feuille. Un iPhone à
encoche COUCHÉ perd 59 px sur le côté : la première lettre de chaque
ligne passait dessous. max() garde la marge actuelle partout ailleurs —
sur un écran sans encoche env() vaut 0, donc rien ne bouge d'un pixel. */
.wrap{
padding-left:max(26px,env(safe-area-inset-left));
padding-right:max(26px,env(safe-area-inset-right));
}
@media(max-width:400px){
.wrap{
padding-left:max(16px,env(safe-area-inset-left));
padding-right:max(16px,env(safe-area-inset-right));
}
}
/* la barre d'accueil (le trait noir en bas de l'iPhone) ne doit pas
recouvrir la dernière ligne du pied de page */
footer.site{padding-bottom:max(34px,calc(env(safe-area-inset-bottom) + 20px))}
/* ---------- 9.4 l'iPhone couché ----------
Mesuré : l'entête collant faisait 63 px sur les 390 px de haut d'un
iPhone 14 en paysage — 16 % de l'écran mangés en permanence par une
barre. Sous 460 px de haut, elle se serre à 46 px (12 %), et le menu
déplié devient défilant : quatre liens de 54 px ne tiennent pas dans
ce qui reste. */
@media (orientation:landscape) and (max-height:460px){
.nav .wrap{padding-top:4px;padding-bottom:4px}
.logo img{height:26px}
html.js .burger{height:40px}
html.js .nav nav{max-height:calc(100dvh - 52px);overflow-y:auto;overscroll-behavior:contain}
html.js .nav nav a{min-height:44px;padding-top:9px;padding-bottom:9px}
}
/* ---------- 9.5 les cibles trop fines ----------
Apple demande 44 px. Mesurés en dessous : une question de FAQ (32 px
de haut à 430 px de large) et l'adresse mail des mentions légales
(21 px — une ligne de texte nue). Le pied de page, lui, était déjà bon.
Enfermé dans (hover:none) EXPRÈS : à la souris on vise au pixel, la
règle des 44 px n'a pas lieu d'être. Mesuré : sans ce garde-fou, la
ligne « Contact » des mentions passait de 49 à 71 px sur grand écran.
Le bureau validé le 01/08 ne bouge donc pas d'un pixel. */
@media (hover:none){
.faq summary{min-height:44px}
li > a[href^="mailto:"],li > a[href^="tel:"],
p > a[href^="mailto:"],p > a[href^="tel:"]{display:inline-block;padding:11px 0}
}
/* ---------- 9.6 le menu déplié ne fait plus glisser la page ----------
Panneau ouvert, un doigt qui va au bout de la liste continuait sur la
page derrière (le « scroll chaining » d'iOS) : on croyait fermer le
menu, on partait au milieu du texte. Il s'arrête maintenant au bord. */
html.js .nav nav.ouvert{overscroll-behavior:contain}
/* NOTE, pas un défaut du site : le volet « Mon approche » est affiché à
56 % de sa taille (640 px de source pour 358 px à l'écran, sur un
écran qui en demande 1074). Son texte fin est donc un peu doux sur un
iPhone Retina. Ça ne se corrige pas en CSS — il faudrait le fichier
d'origine d'Anouk en plus grand. Le dessin n'est PAS retouché. */