/* Christel Louvet · thème du site + socle commun (therapeute-club/socle) */ /* THÈME du site de Christel Louvet (dossier 815) · maquette D, validée par William le 20/09/2026. C'est la seule partie qui change d'une cliente à l'autre : le moteur vit dans therapeute-club/socle/monteur.py et la structure dans socle/socle.css, qui ne portent aucune couleur ni aucune police en dur. Le monteur colle ce fichier DEVANT socle.css pour écrire site/styles.css (monteur.py, méthode `styles`). Deux conséquences à ne pas perdre : 1. les chemins de polices sont relatifs à site/styles.css, donc `fonts/...` et jamais `../site/fonts/...` (c'est aussi ce que contrôle socle/verif-socle.mjs, ligne 44) ; 2. le thème étant AVANT le socle, une règle qui doit gagner contre le socle porte le préfixe `:root` (même règle, un cran de spécificité en plus). C'est ce que fait le bloc 2. Palette : SA charte de 2020 (sources/charte/da-p3.png, identite-visuelle-2020.pdf). Pétrole #006170, cyan #24B2BF, anis #D5E06F, anthracite #343434. Aucun sauge, aucun ambre, aucun beige, aucune crème : ce sont les couleurs de l'agence, pas les siennes. Contrastes calculés (WCAG 2.1, sur fond blanc sauf mention) : pétrole 7,13:1 · anthracite 12,45:1 · encre-2 5,65:1 · encre-3 5,31:1 · blanc sur pétrole 7,13:1 · anis sur pétrole 5,00:1. Le cyan ne fait que 2,56:1 : il ne porte jamais de texte et ne remplit jamais un bouton, il reste en filets, bordures, points et survols. */ /* ============================ 1 · Les polices, en local ============================ Fraunces (titres) et Source Sans 3 (texte courant), servies par le site lui-même : aucun appel à fonts.googleapis.com ni à fonts.gstatic.com (site/fonts/POLICES.md). Fichiers variables : un seul fichier par sous-ensemble couvre les graisses 400 à 600. Fraunces porte en plus l'axe opsz (9 à 144), que les navigateurs ajustent seuls. */ @font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/Fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/Fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/SourceSans3-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/SourceSans3-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ======================= 2 · Les jetons que le socle consomme ======================= Les noms viennent du socle (socle/theme-modele.css) : ils disent un RÔLE, pas une couleur. « rouge » = la couleur d'action, ici le pétrole. « eau », « rose » et « gris » = les trois fonds clairs qui distinguent les types de pages ; chez elle, trois nuances de sa charte, jamais un rose ni un beige. */ :root{ /* Sa charte, valeurs exactes. */ --petrole:#006170; --petrole-fonce:#004A56; --petrole-clair:#0B7D8E; --cyan:#24B2BF; --anis:#D5E06F; --anthracite:#343434; /* Surfaces et textes. */ --blanc:#FFFFFF; --encre:#343434; /* texte courant · 12,45:1 sur blanc */ --encre-2:#5A6A6D; /* texte secondaire · 5,65:1 blanc, 5,11:1 voile, 4,89:1 rose */ --encre-3:#5F6E71; /* petits textes · 5,31:1 blanc, 4,80:1 voile, 4,59:1 rose */ --eau:#EDF5F6; /* le voile bleuté de la maquette D */ --eau-fonce:#DCEAEC; --eau-texte:#006170; /* 7,13:1 sur blanc */ --rose:#E4F1F2; /* pas un rose : le cyan très dilué, pour les pages d'offre */ --rose-fonce:#D5E06F; /* l'anis, et seulement là : le surlignage d'une phrase forte */ --gris:#F2F5F6; --gris-fonce:#E3E9EA; --gris-texte:#004A56; /* 9,93:1 sur blanc */ --rouge:#006170; /* la couleur d'action : titres, boutons, liens, flèches */ --rouge-2:#004A56; /* son survol · 9,93:1 sur blanc */ --rouge-pale:#DCEFF2; /* fond des pastilles · pétrole dessus : 6,00:1 */ /* Versions en composantes (rouge, vert, bleu) pour les transparences du socle. */ --encre-rvb:52,52,52; --rouge-rvb:0,97,112; --rouge-2-rvb:0,74,86; --ligne:rgba(0,97,112,.20); --ligne-fine:rgba(0,97,112,.10); --ombre:0 1px 2px rgba(0,97,112,.06),0 12px 32px -20px rgba(0,97,112,.45); --ombre-haute:0 1px 2px rgba(0,97,112,.06),0 22px 44px -24px rgba(0,97,112,.6); --r:6px; /* maquette D : des angles nets, pas des galets */ --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* Rythme vertical de la maquette D. */ --e1:24px; --e2:40px; --e3:64px; --e4:96px; --gouttiere:20px; --entete:66px; } @media (min-width:768px){:root{--gouttiere:40px;--entete:80px}} /* ==================== 3 · Sa direction artistique, sur le socle ==================== Le socle est neutre en couleur mais pas en forme : il porte encore les rondeurs et l'échelle du premier site (rayons de 18 à 40 px, titres très grands). Ces règles ramènent l'ensemble à la maquette D. Le préfixe `:root` sert uniquement à passer devant le socle. */ /* Les titres prennent le pétrole, le texte reste anthracite. Les titres posés en blanc par le socle sur un fond sombre gardent leur blanc : leur règle a la même spécificité et vient après. */ :root h1,:root h2,:root h3{color:var(--rouge);font-weight:500;letter-spacing:-.012em} /* L'échelle typographique et le rythme de la maquette D. */ :root .enveloppe{max-width:1160px} :root .section{padding-block:clamp(56px,8vw,var(--e4))} :root .heros h1{font-size:clamp(2.25rem,6.2vw,4rem);line-height:1.05;letter-spacing:-.022em} :root .heros__chapo{margin-top:var(--e1);font-size:clamp(1.0625rem,1.7vw,1.25rem);line-height:1.6;color:var(--encre);max-width:36em} :root .titre-section{font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.12;margin-top:16px} :root .chapeau{font-size:1.0625rem;line-height:1.6;color:var(--encre-2);max-width:32em} :root .entete-section{margin-bottom:var(--e2)} /* Le rayon de 6 px partout où le socle en avait un plus rond. Les pastilles, les points et les ronds de flèche restent des cercles : la maquette D en a aussi. */ :root .bouton,:root .panneau,:root .mm-soin,:root .panneau__cote,:root .pm2__motif,:root .pm2__aide, :root .pm-motif,:root .faq details,:root .encadre-medecin,:root .prose blockquote,:root .mtc__encadre, :root .jalon,:root .limites__icone,:root .adresse,:root .motif__icone,:root .galerie img, :root .page-photo,:root .page-tete__portrait,:root .seance__photo,:root .venir__acces figure, :root .carte-flottante,:root .carte-flottante__icone{border-radius:var(--r)} /* Le rideau qui ouvre une photo suit le même rayon (socle : --r-photo, 28 px par défaut). */ :root .page-photo,:root .page-tete__portrait,:root .seance__photo,:root .galerie figure, :root .venir__acces figure,:root .qui__portrait{--r-photo:var(--r)} /* Un prix écrit en toutes lettres (« Tarif sur demande », « Sur devis ») ne tient pas sur une ligne dans une carte de téléphone. Le socle l'empêchait de revenir à la ligne, ce qui poussait la grille 25 px au-delà de l'écran à 390 px (mesuré, corrigé, remesuré : 415 px puis 390 px). */ :root .soin__tete{flex-wrap:wrap;row-gap:10px} :root .soin__prix{white-space:normal} /* Le cyan, en signal seulement : le point des pastilles et les filets. Jamais un fond de bouton. */ :root .pastille::before{background:var(--cyan)} :root .nav__lien:hover{border-bottom-color:var(--cyan)} /* Le pied de page sur le voile bleuté, comme dans la maquette. */ :root .pied{background:var(--eau);border-top:1px solid var(--ligne-fine)} /* Le bandeau de rendez-vous des pages intérieures passe de l'anthracite au pétrole : c'est le bloc de couleur de la maquette D. Le bouton d'appel s'inverse (blanc sur pétrole), sinon il disparaîtrait dans le fond. Contrastes : blanc sur pétrole 7,13:1, pétrole sur blanc 7,13:1, pétrole pâle sur pétrole 6,00:1. */ :root .rdv.rdv--seul{background:var(--rouge);box-shadow:0 30px 60px -30px rgba(var(--rouge-rvb),.55)} :root .rdv--seul::before{background:var(--anis);opacity:.16} :root .rdv--seul .rdv__sous{color:rgba(255,255,255,.9)} :root .rdv--seul .bouton--rouge{background:#fff;color:var(--rouge);box-shadow:none} :root .rdv--seul .bouton--rouge:hover{background:var(--rouge-pale);color:var(--rouge-2)} /* ============ 4 · Les blocs propres à son accueil (gabarits/accueil.html) ============ Rien ici ne sert aux pages intérieures : ces classes n'existent que dans son gabarit d'accueil. Mobile d'abord, les points de rupture sont ceux de la maquette D. */ /* Ouverture sans photo : le texte prend toute la largeur, un halo cyan au loin. */ .heros{overflow:hidden} .heros::before{content:"";position:absolute;top:-220px;right:-160px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle at center,rgba(36,178,191,.16),rgba(36,178,191,0) 68%);pointer-events:none} .heros .enveloppe{position:relative} .heros--large .heros__grille{grid-template-columns:minmax(0,1fr)} @media (min-width:980px){:root .heros--large .heros__grille{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:56px}} /* Le sur-titre d'une section : petites capitales pétrole et le petit carré anis du logo. */ .sur-titre{display:flex;align-items:center;gap:10px;margin:0;color:var(--rouge)} .sur-titre::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--anis);transform:rotate(45deg);flex:none} /* Une remarque courte, tenue par un filet de 3 px. */ .note-filet{margin-top:var(--e1);padding-left:16px;border-left:3px solid var(--cyan);color:var(--encre-2);max-width:40em} .note-filet--anis{border-left-color:var(--anis);color:var(--encre)} .note-filet--encadree{padding:16px 18px;background:var(--eau);border-radius:var(--r);border-left:3px solid var(--rouge);color:var(--encre)} /* Deux cartes côte à côte : l'hésitation entre le bilan et la reconversion. */ .duo{display:grid;gap:16px;margin-top:var(--e2)} .duo__carte{padding:clamp(22px,3vw,32px);border-top:3px solid var(--rouge)} .duo__carte:last-child{border-top-color:var(--cyan)} .duo__carte h3{font-size:1.3125rem;line-height:1.25;margin-bottom:12px} .duo__carte p{color:var(--encre-2);margin-bottom:14px} @media (min-width:760px){.duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}} /* Une photo et un texte, côte à côte. */ .paire{display:grid;gap:var(--e2)} .paire__photo{margin:0;border-radius:var(--r);overflow:hidden;background:var(--eau);box-shadow:var(--ombre-haute);--r-photo:var(--r)} .paire__photo img{display:block;width:100%;height:auto} .paire__texte h2{margin-bottom:16px} .paire__texte p{color:var(--encre-2)} .paire__actions{margin-top:var(--e1);display:flex;flex-wrap:wrap;gap:12px} @media (min-width:860px){.paire{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--e4);align-items:center}} /* Ce qu'elle écrit de son travail, en carte blanche au filet cyan. */ .citation{margin:var(--e1) 0 0;padding:20px 22px;background:#fff;border-radius:var(--r);border-left:3px solid var(--cyan);box-shadow:var(--ombre)} .citation blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.4;color:var(--rouge)} .citation figcaption{margin-top:10px;font-size:.875rem;color:var(--encre-2)} /* Le bandeau pétrole des séances et des tarifs : les cartes restent blanches, le texte autour passe en blanc. Blanc à 90 % sur pétrole : 6,11:1. Anis sur pétrole : 5,00:1. */ .fond-petrole{background:var(--rouge)} /* Seul le titre DE LA SECTION passe en blanc : les cartes restent blanches, leurs titres restent pétrole. Sans cette limite, un h3 de carte devenait blanc sur blanc (mesuré). */ .fond-petrole .entete-section h2,.fond-petrole .entete-section h3,.fond-petrole .entete-section .titre-section{color:#fff} .fond-petrole .sur-titre{color:var(--anis)} .fond-petrole .chapeau{color:rgba(255,255,255,.9);max-width:36em} .fond-petrole .pastille{background:rgba(255,255,255,.12);color:#fff} .fond-petrole .pastille::before{background:var(--anis)} .fond-petrole .soin--vedette{box-shadow:inset 0 0 0 2px var(--cyan),var(--ombre)} .fond-petrole .bande-note{margin:var(--e2) 0 0;color:rgba(255,255,255,.9);max-width:46em} .fond-petrole .lien-texte{color:var(--anis)} .fond-petrole .lien-texte:hover{color:#fff} /* Le bandeau de prise de contact garde sa respiration sous le bloc photo + texte. */ .paire+.rdv{margin-top:clamp(40px,6vw,var(--e3))} /* Son pictogramme a la place du point de l'en-tete (maquette D, validee le 20/09). Le socle pose un rond de couleur ; ici, c'est sa main qui tient ce role. */ .entete .marque__point,.pied .marque__point{ width:26px;height:26px;border-radius:0;background:transparent;box-shadow:none; background-image:url("images/sigle-88.webp");background-size:contain; background-repeat:no-repeat;background-position:center} /* Dans l'en-tete pose sur le petrole, la main du sigle (#006480) disparaissait sur le fond (#0c3138). Variante claire fabriquee depuis sources/charte/logo-extrait : la main passe en cyan tres pale, la croix s'eclaircit d'un cran, les points anis ne bougent pas. Le pied de page reste sur fond clair, il garde le sigle d'origine. Source : sources/travail/sigle-clair.png */ .pied .marque__point{background-image:url("images/sigle-88.webp")} /* 22/09, demande de Christel : « faire en sorte que mon logo soit plus visible ? ». L'en-tête ne portait que son pictogramme, en 26 px, avec son nom composé en Fraunces, qui est la police du site et non celle de son logo. À la place : SON logo, découpé et recomposé en deux blocs par outils-logo.py (pictogramme + trait + lettrage « Christel LOUVET »), en 44 px de haut. Les deux dernières lignes de son logo d'origine, « Coach professionnelle & consultante RH », restent écartées : à cette hauteur elles tombent sous 7 px. C'est la ligne « Coach professionnelle certifiée · Nice », à côté, qui dit la même chose en restant lisible. Le nom composé disparaît de l'affichage, puisque le lettrage le porte désormais ; il ne manque à personne pour autant, le lien entier porte son aria-label (config.py, marque.aria). */ :root .entete .marque__point{width:156px;height:44px;margin-top:0; background-image:url("images/logo-entete-clair-132.webp")} :root .entete .marque__nom{display:none} :root .entete .marque{align-items:center} :root .entete .marque__texte{padding-top:0} :root .entete .marque__sous{font-size:.8125rem} @media (max-width:900px){:root .entete .marque__point{width:121px;height:34px}} /* Sous 480 px, le logo et la mention ne tiennent plus côte à côte avec le bouton d'appel : la mention s'efface, le logo reste entier. */ @media (max-width:479px){:root .entete .marque__sous{display:none}} /* 28/09 : l'onglet « Mon approche » élargit le menu de 150 px. Entre 1180 px (le menu complet s'affiche) et 1599 px, le logo, la mention, six entrées et le bouton d'appel ne tiennent plus sur une ligne : le bouton sortait de l'écran à 1280 px (mesuré). La mention s'efface sur cette plage, le logo reste entier ; elle revient au-delà, et sous 1180 px avec le menu mobile. */ /* 05/10 : septième onglet (« Confiance en soi ») : la plage s'étend à 1 799 px, et sous 1 440 px les onglets se resserrent (13 px de marge de chaque côté → 9 px). Mesuré : à 1 180 px, le bouton d'appel débordait de 22 px ; à 1 600 px, de 18 px. */ @media (min-width:1180px) and (max-width:1799px){:root .entete .marque__sous{display:none}} @media (min-width:1180px) and (max-width:1439px){:root .entete .nav__lien{padding:0 9px} :root .entete .nav__lien::after{left:9px;right:9px}} /* Le pied de page reçoit le même bloc, dans ses couleurs d'origine : le fond y est clair. */ :root .pied .marque__point{width:156px;height:44px;margin-top:0; background-image:url("images/logo-entete-132.webp")} :root .pied .marque__nom{display:none} :root .pied .marque{align-items:center} :root .pied .marque__texte{padding-top:0} /* La ligne d'entreprise du pied portait son logo complet (96 x 30) enfermé dans un carré de 44 x 44 : il en sortait écrasé et illisible. Le carré est fait pour une vignette carrée, on lui donne donc son pictogramme. `content` remplace la source sans toucher au socle, qui écrit lui-même les attributs width et height de cette image. */ :root .pied__cabinet img{content:url("images/sigle-88.webp");object-fit:contain;padding:7px} /* Sur telephone, la photo passe sous le texte et garde son cadrage d'origine : le fichier est carre, un recadrage en 5/4 lui coupait le haut du crane. */ @media (max-width:979px){.heros__photo{max-width:440px;margin:32px auto 0} .heros__photo img{aspect-ratio:4/5}} /* La ligne qui expose au controle (doctrine du copy, § 3 et § 9.4) : discrete, mais la. Sur ce marche, un numero verifiable vaut dix adjectifs. */ .note-discrete{margin-top:var(--e1);font-size:.8125rem;line-height:1.5;color:var(--encre-3);max-width:34em} .heros__action{margin-top:var(--e2)} /* Les reperes du hero : un filet au-dessus, et le losange anis du logo. */ .heros--large .heros__reperes{margin-top:var(--e2);padding-top:18px;border-top:1px solid var(--ligne)} .heros__reperes li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--anis);transform:rotate(45deg);flex:none} /* Un seul appel a l'action dans le hero, a la premiere personne, avec le numero ecrit : c'est la regle commune aux leaders du marche. La duree annoncee et le « sans engagement » sont ce qui abaisse le plus la barriere, d'apres les pages qui convertissent. */ .heros__action{margin-top:var(--e2);display:flex;align-items:center;gap:16px;flex-wrap:wrap} /* ------------------------------------------------------------------------------------------ Le hero en aplat petrole (choisi par William le 20/09 devant trois fonds). Raison : sur les sites mesures, le fond n'est jamais blanc pur, et un aplat pleine largeur est l'un des cinq details qui separent un site remarquable d'un site correct. La palette petrole + cyan est celle d'opoint.ca, primee. La photo devient la seule zone claire. ------------------------------------------------------------------------------------------ */ .heros{background:#0c3138;color:#fff} :root .heros h1{color:#fff} /* 22/09 : l'intitulé demandé par Christel fait 51 signes. En un seul bloc à 4 rem, il tenait sur quatre lignes et repoussait tout le reste sous la ligne de flottaison. Le lieu passe donc sur la deuxième ligne du titre, plus petit : ce sont les mêmes mots, dans le même ordre. Le socle colore cette deuxième ligne en encre secondaire, illisible sur le pétrole. */ :root .heros h1 .h1-suite{color:rgba(255,255,255,.82);font-size:.58em;margin-top:.22em} .heros .heros__chapo{color:rgba(255,255,255,.88)} .heros--large .heros__reperes{color:rgba(255,255,255,.78);border-top-color:rgba(255,255,255,.18)} /* le bouton passe en cyan sur le sombre : 6,9:1 avec son encre, largement au-dessus du seuil */ .heros .bouton--rouge{background:var(--cyan);color:#06232a;box-shadow:none} .heros .bouton--rouge:hover{background:#3cc3cf;transform:translateY(-1px)} /* le halo lointain passe a l'anis, seule touche chaude sur le bloc sombre */ .heros::before{background:radial-gradient(circle at center,rgba(213,224,111,.18),rgba(213,224,111,0) 68%)} .heros__photo{box-shadow:0 30px 70px -40px rgba(0,0,0,.6);background:#fff} /* Les puces du hero : ce pour quoi on vient, pas ce qu'elle vend. Le losange anis est le marqueur du logo. Le texte tient dans un span : sinon le gras et la suite deviennent deux elements du flex, et l'ecart de 12 px s'installe avant la virgule. */ .heros__puces{list-style:none;margin:var(--e2) 0 0;padding:22px 0 0; border-top:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:14px;max-width:34em} .heros__puces li{display:flex;align-items:flex-start;gap:12px;font-size:1.0625rem;line-height:1.45; color:rgba(255,255,255,.9)} .heros__puces li::before{content:"";margin-top:.55em;width:7px;height:7px;border-radius:2px; background:var(--anis);transform:rotate(45deg);flex:none} .heros__puces b{font-weight:600;color:#fff} @media (max-width:559px){.heros__puces li{font-size:1rem}} /* ================== 9 · L'EN-TETE, EN PETROLE SUR TOUTES LES PAGES ================== Choix de William le 21/09 (proposition P1). Le socle sert le meme en-tete a tous les sites : barre blanche, deux menus deroulants, pastille d'appel a droite (socle/monteur.py, entete()). Rien ici ne change cette structure, qui est partagee ; seule la peau change, chez elle seule. Le fond passe en petrole plein : sur l'accueil il rejoint le hero et les deux ne font plus qu'un bloc, sur les quatorze autres pages, qui ouvrent sur du blanc, il forme un bandeau. Une barre transparente etait exclue : les pages interieures n'ont pas de hero sombre (.page-tete n'a pas de fond), le menu blanc y serait devenu illisible. */ :root .entete{background:#0c3138;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} :root .entete.defile,:root .entete.deploye{background:#0c3138;box-shadow:0 1px 0 rgba(213,224,111,.45); -webkit-backdrop-filter:none;backdrop-filter:none} :root .entete .marque__nom{color:#fff} :root .entete .marque__sous{color:rgba(255,255,255,.72)} :root .entete .marque:hover .marque__sous{color:rgba(255,255,255,.92)} /* blanc a 86 % sur petrole : 6,1:1, au-dessus du seuil AA pour du texte courant */ :root .entete .nav__lien{color:rgba(255,255,255,.86)} :root .entete .nav__lien:hover,:root .entete .nav__lien[aria-expanded="true"]{color:#fff} :root .entete .nav__lien::after{background:var(--anis)} /* la pastille pleine deviendrait invisible sur le petrole : elle passe en contour blanc */ :root .entete__appel{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)} :root .entete__appel:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)} :root .burger span{background:#fff} /* sur l'accueil, le hero enchaine sans couture : le socle laissait une respiration en haut */ :root .heros--large{padding-top:0} /* ================== 10 · LES DEUX PANNEAUX DU MENU, REORGANISES ================== Constat de William le 21/09 sur captures : le rail de prix aligne a droite creusait un vide au milieu du panneau, les phrases des motifs etaient coupees en plein mot, la carte « Vous hesitez ? » tombait seule sur une deuxieme ligne avec deux colonnes vides a cote, et la fiche contact gardait une ligne blanche la ou son adresse manque. Trois reorganisations comparees dans maquettes/menu/ ; R2 retenue. Comme pour l'en-tete, rien du socle n'est touche : tout se joue dans son theme. */ /* 21/09, deuxieme temps : l'adresse du cabinet est publiee, le retour a la ligne entre la rue et la ville sert de nouveau. Les deux regles qui le masquaient sont retirees. */ /* Audit du 21/09 : le numero du pied de page mesurait 87 x 21 px, sous le minimum de 24 x 24 de la regle WCAG 2.5.8. C'est un lien isole dans son paragraphe, il ne beneficie donc pas de l'exception prevue pour les liens en pleine phrase. */ :root .pied a[href^="tel:"]{display:inline-flex;align-items:center;min-height:24px} /* Les accompagnements : la duree et le prix passent sous le nom, le rail disparait. 21/09, deuxieme temps : l'adresse et les horaires ont fait grandir la carte de contact a 460 px, alors que la liste n'en fait que 207. Sur deux colonnes elle laissait 210 px de vide sous elle. Elle repasse donc sur UNE colonne, et le panneau se resserre de 1000 a 760 px : les cinq accompagnements remplissent la colonne de haut en bas, la carte est a cote, et il n'y a plus de blanc nulle part. Quatre mises en page comparees dans maquettes/menu/. */ :root .panneau--soins{width:min(760px,calc(100vw - 80px));grid-template-columns:minmax(0,1fr) 270px} :root .panneau--soins>div:first-child>ul{display:grid;grid-template-columns:1fr;gap:2px} :root .mm-soin{display:block;min-height:0;padding:11px 16px} :root .mm-soin__nom{display:block;font-size:1.125rem} :root .mm-soin__info{display:block;margin-top:1px} /* Par ou commencer : les trois colonnes restent larges, donc les phrases tiennent en entier (plus aucune coupure), et la carte d'aide devient un bandeau sur toute la largeur. */ :root .pm2__aide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:18px;margin-top:4px} :root .pm2__aide-texte{margin:0;flex:1} :root .pm2__aide .bouton{flex:none} :root .pm2__phrase{-webkit-line-clamp:3} /* la fleche ne s'affichait qu'au survol : a la souris on ne voyait pas que c'etaient des liens. Et le socle la centrait verticalement : sur un titre de deux lignes (« Reconversion professionnelle ») elle descendait d'un cran et ne s'alignait plus avec les deux autres. */ :root .pm2__nom{align-items:flex-start} :root .pm2__nom svg{opacity:.45;translate:0 0;margin-top:.3em;flex:none} /* Le bloc « Qui vous repondra » a le texte a gauche et la photo a droite, l'inverse du bloc « La joindre » juste en dessous. Sans cette regle, le texte heritait de la colonne etroite (.85fr) et ses deux boutons passaient l'un sous l'autre. Ici c'est le texte qui prend la largeur, la photo la colonne etroite : les deux blocs donnent la meme place a la prose. */ @media (min-width:860px){ :root .paire:has(> .paire__texte:first-child){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} } /* ================== 11 · LES GRILLES DE CARTES, SANS TROU ================== Revue du 21/09 : le socle pose .grille-soins sur trois colonnes au-dela de 1080 px, sans traiter le nombre de cartes. Resultat sur ce site : cinq cartes donnaient 3 + 2 avec un creneau vide, quatre donnaient 3 + 1 toute seule, deux laissaient une colonne vide a droite. Neuf emplacements concernes sur les quinze pages. Trois mises en page comparees dans maquettes/grilles/ ; retenue : deux lignes de deux pour quatre cartes, la seule ou les titres tiennent sur une ligne. Le socle n'est pas touche, les regles ne valent que chez elle. */ @media (min-width:1080px){ /* cinq cartes : trois puis deux a egalite, comme le socle le fait deja pour .grille-motifs */ :root .grille-soins:has(> :nth-child(5)):not(:has(> :nth-child(6))){grid-template-columns:repeat(6,minmax(0,1fr))} :root .grille-soins:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{grid-column:span 2} :root .grille-soins:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4), :root .grille-soins:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5){grid-column:span 3} /* quatre cartes : deux lignes de deux */ :root .grille-soins:has(> :nth-child(4)):not(:has(> :nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr))} /* deux cartes : elles prennent la largeur au lieu de laisser une colonne vide */ :root .grille-soins:not(:has(> :nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))} } /* ================== 12 · LES BLOCS QUI METTENT LE TEXTE EN MOUVEMENT ================== Revue du 21/09 : aucune des quinze pages ne declenchait un seul bloc visuel du socle. Le socle sait pourtant faire une frise numerotee animee (### 1., ### 2., ...), des tableaux, une FAQ en accordeons. Il ne fallait rien coder, seulement ecrire les textes pour. Ici, le seul ajustement d'affichage : la colonne d'intitules d'un tableau ne se coupe pas en deux sur ordinateur (« Ce qu'il / regarde » devenait bancal). */ @media (min-width:760px){:root .tableau td:first-child{white-space:nowrap}} /* ================== 13 · L'APPEL AU MILIEU DE LA PAGE ================== Demande de William le 21/09 : structurer les pages comme des landing pages. Le manque le plus couteux n'etait pas le ton, c'etait la place des appels a l'action : un seul, tout en bas, apres 6 500 px sur la page bilan. Un lecteur decide au tiers de la page n'avait rien sous la main. Un encart est desormais pose au milieu de chaque page (config.py, "encarts"). Il ne reprend PAS le petrole du bandeau de contact du bas, sinon les deux se concurrencent : fond eau, filet anis a gauche, bouton plein. */ .appel-milieu{margin:var(--e2) 0;padding:24px 26px;background:var(--eau); border-left:3px solid var(--anis);border-radius:0 var(--r) var(--r) 0; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px} .appel-milieu__texte{margin:0;flex:1 1 20em;min-width:0;font-size:1.0625rem;line-height:1.5; color:var(--encre);max-width:34em} :root .appel-milieu__bouton{flex:none;background:var(--petrole);color:#fff} :root .appel-milieu__bouton:hover{background:#00505d} @media (max-width:559px){.appel-milieu{padding:20px} :root .appel-milieu__bouton{width:100%;justify-content:center}} /* ================== 14 · LES LISTES DU SOCLE NE SONT PAS DES LISTES DE PROSE ================== Signalé par William le 21/09 sur la frise de la page « séance de coaching » : le trait vertical passait à côté des pastilles, et il dépassait sous la dernière. Cause : la règle de ce thème « .prose ul, .prose ol { padding-left: 1.25em } » s'applique aussi aux listes que le socle transforme en composants. Elle est plus spécifique (0,1,1) que le « padding:0 » que le socle pose sur .deroule (0,1,0), donc elle gagne quel que soit l'ordre des fichiers. Résultat mesuré : pastilles à 49 px du bord, trait à 23 px, soit 24 px d'écart ; et le cache blanc qui doit arrêter le trait sous la dernière pastille tombait lui aussi à côté, d'où le bout de trait qui dépassait. Les jalons datés de la page « à propos » subissaient le même décalage. */ :root .prose ol.deroule, :root .prose ul.jalons, :root .prose ul.raisons, :root .prose ul.tarifs{padding-left:0} /* et le socle ajoute lui-même un retrait de .2em à tout li de prose : il restait 3 px d'écart entre le trait et le centre des pastilles. Neutralisé pour ces listes seulement. */ :root .prose ol.deroule > li, :root .prose ul.jalons > li, :root .prose ul.raisons > li, :root .prose ul.tarifs > li{padding-left:0;margin-bottom:0} /* 21/09 : « Vingt minutes, sans engagement » a ete retire du hero, sur decision de William. Le site ne promet aucune duree ni aucune gratuite a sa place : elle ne l'avait jamais validee, et la regle maison veut que rien ne soit gratuit sur un site client. La classe qui l'habillait est retiree avec elle. */ /* ================== 15 · SES AVIS GOOGLE ================== 21/09. Trois avis sur l'accueil, deux sur la page bilan (config.py, AVIS et bloc_avis). Les étoiles sont en pétrole et non en jaune : le jaune « avis Google » ferait un badge publicitaire, et sa charte n'en a pas. La mention légale sous les avis reste lisible, jamais en gris pâle : c'est une obligation d'information, pas une note de bas de page à cacher. */ .avis .titre-section{margin-bottom:var(--e2)} .avis__grille{display:grid;gap:18px;grid-template-columns:1fr} @media (min-width:860px){.avis__grille--3{grid-template-columns:repeat(3,minmax(0,1fr))} .avis__grille--2{grid-template-columns:repeat(2,minmax(0,1fr))} /* 22/09 : quatre avis sur l'accueil, en deux rangées de deux. En quatre colonnes, celui d'Erine C. (quatre paragraphes) faisait une colonne deux fois plus haute que les autres. */ .avis__grille--4{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Un avis seul (page sonothérapie) ne s'étale pas sur toute la largeur : il garde la longueur de ligne du reste de la page. */ .avis__grille--1{max-width:44em} .avis__carte{margin:0;padding:26px 24px 22px;background:#fff;border-radius:var(--r); box-shadow:var(--ombre);display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--anis)} .avis__note{margin:0;font-size:1rem;letter-spacing:.14em;color:var(--petrole)} .avis__texte{margin:0;padding:0;border:0;font-style:normal;font-size:1rem;line-height:1.6;color:var(--encre);flex:1} .avis__auteur{display:flex;flex-direction:column;gap:2px;font-size:.875rem;color:var(--encre-2)} .avis__auteur b{font-weight:600;color:var(--encre)} .avis__mention{margin:var(--e2) 0 0;max-width:52em;font-size:.875rem;line-height:1.55;color:var(--encre-2)} /* dans le corps d'une page, la colonne est étroite : une carte par ligne, et les titres du bloc reprennent ceux de la prose */ .prose .avis{margin:var(--e2) 0} :root .prose .avis__grille{grid-template-columns:1fr} .prose .avis .titre-section{font-size:inherit} .prose .avis__carte{background:var(--eau);box-shadow:none} /* La prose du socle habille tout
d'une boîte colorée (.prose blockquote) et grise tout

(.prose p). Plus spécifiques que les classes des avis, elles gagnaient : la citation se retrouvait dans une boîte à l'intérieur de la carte, et les étoiles viraient au gris. On reprend la main avec :root, un cran de spécificité au-dessus. */ :root .prose .avis__texte{margin:0;padding:0;border-radius:0;background:none;font-family:inherit; font-size:1rem;line-height:1.6;color:var(--encre)} :root .prose .avis__note{margin:0;color:var(--petrole)} :root .prose .avis__mention{margin:var(--e1) 0 0;color:var(--encre-2)} /* ================== 16 · LES ÉTOILES DU HERO ================== 21/09, demande de William. Sous le bouton d'appel, à la place de la phrase des vingt minutes : c'est là qu'on hésite avant de cliquer. Étoiles en anis, seule couleur chaude de sa charte et lisible sur le pétrole (5,00:1). C'est un lien vers sa fiche : la note se vérifie d'un clic. */ .heros__action{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px} .heros__avis{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none; color:rgba(255,255,255,.88);font-size:.9375rem} .heros__avis b{font-weight:600;color:#fff} .heros__etoiles{font-size:1.125rem;letter-spacing:.08em;color:var(--anis);line-height:1} .heros__avis:hover span:last-child{text-decoration:underline;text-underline-offset:3px} /* ================== 17 · SES RÉSEAUX, EN BOUTONS ================== */ .reseaux{margin-top:var(--e2)} .reseaux__intro{margin:0 0 10px;font-size:.875rem;font-weight:600;letter-spacing:.02em;color:var(--encre-2)} .reseaux__boutons{display:flex;flex-wrap:wrap;gap:10px} .reseau{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px; border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--ligne);color:var(--encre); font-weight:600;font-size:.9375rem;text-decoration:none;transition:box-shadow .25s ease,transform .25s ease} .reseau svg{width:20px;height:20px;flex:none} .reseau--linkedin svg{color:#0a66c2} .reseau--instagram svg{color:#c13584} .reseau--facebook svg{color:#1877f2} /* 29/09, Christel : « Vous n’avez pas besoin de devenir quelqu’un d’autre pour avancer » en gros et en couleur, en tête de « Mon approche ». Fraunces pétrole, un trait anis dessous. */ :root .prose p.approche-accroche,:root .contenu__carte--offre>.prose>.bloc:first-child p.approche-accroche:first-of-type{font-family:var(--serif);font-size:clamp(1.625rem,3.4vw,2.5rem);line-height:1.2;font-weight:500;color:var(--petrole);margin:0 0 var(--e2);max-width:22ch;text-wrap:balance} :root .prose .approche-accroche::after{content:"";display:block;width:64px;height:4px;border-radius:2px;background:var(--anis);margin-top:18px} /* 28/09 : la fin de son texte « Mon approche », une ligne par pas, en Fraunces pétrole. */ .prose .approche-pas{font-family:var(--serif);font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.75;color:var(--petrole);padding-left:18px;border-left:3px solid var(--anis)} .reseau:hover{box-shadow:inset 0 0 0 1px var(--petrole);transform:translateY(-1px)} :root .prose .reseaux{margin:var(--e1) 0 0} :root .prose .reseau{color:var(--encre)} /* dans le pied, les deux liens gardent leur texte et gagnent une icone, sans toucher au socle */ .pied a[href*="linkedin.com"],.pied a[href*="instagram.com"],.pied a[href*="facebook.com"],.pied a[href*="google.com/maps"]{ display:inline-flex;align-items:center;gap:8px} .pied a[href*="linkedin.com"]::before,.pied a[href*="instagram.com"]::before,.pied a[href*="facebook.com"]::before,.pied a[href*="google.com/maps"]::before{ content:"";width:16px;height:16px;flex:none;background:currentColor; -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat} .pied a[href*="linkedin.com"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E")} .pied a[href*="instagram.com"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E")} .pied a[href*="facebook.com"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E")} .pied a[href*="google.com/maps"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 20.9l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E")} /* ================== 18 · LE HERO, EN MOUVEMENT ================== Demande de William le 21/09. Tenu dans socle/ANIMATIONS.md, et deux corrections d'abord : - le bloc du bouton d'appel n'apparait plus en fondu. Il porte le NUMÉRO DE TÉLÉPHONE et la NOTE Google, et les règles maison interdisent d'animer un numéro ou une information de confiance. C'était une infraction, et c'est moi qui l'avais créée ; - chaque effet ajouté vient du catalogue maison, aucun n'est décoratif, aucun ne dure plus de 1,3 s, aucun ne déplace un contenu déjà lu, et tous s'effacent si l'appareil demande moins de mouvement. Ajouts : 1. la thèse, « Rarement un échec. », reçoit le soulignement anis qui se dessine (catalogue : « la phrase forte de l'accueil, le surlignage se dessine ») ; 2. les quatre puces arrivent une à une, et leur losange anis éclôt (catalogue : « une liste à puces, apparition décalée »). */ .heros__these span{position:relative;white-space:nowrap} .heros__these span::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.14em; border-radius:2px;background:var(--anis)} .js .heros__these span::after{transform:scaleX(0);transform-origin:left center; transition:transform 1.1s cubic-bezier(.16,1,.3,1) .55s} .js .heros__these.vu span::after{transform:none} /* la liste elle-même reste visible : ce sont ses puces qui arrivent */ :root .js .heros__puces.apparait{opacity:1;transform:none} .js .heros__puces li{opacity:0;transform:translateY(10px); transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)} .js .heros__puces.vu li{opacity:1;transform:none} .js .heros__puces li::before{transform:rotate(45deg) scale(0); transition:transform .45s cubic-bezier(.34,1.56,.64,1)} .js .heros__puces.vu li::before{transform:rotate(45deg) scale(1)} .js .heros__puces.vu li:nth-child(1),.js .heros__puces.vu li:nth-child(1)::before{transition-delay:.45s} .js .heros__puces.vu li:nth-child(2),.js .heros__puces.vu li:nth-child(2)::before{transition-delay:.55s} .js .heros__puces.vu li:nth-child(3),.js .heros__puces.vu li:nth-child(3)::before{transition-delay:.65s} .js .heros__puces.vu li:nth-child(4),.js .heros__puces.vu li:nth-child(4)::before{transition-delay:.75s} @media (prefers-reduced-motion:reduce){ .js .heros__these span::after{transform:none;transition:none} .js .heros__puces li,.js .heros__puces li::before{opacity:1;transform:none;transition:none} .js .heros__puces li::before{transform:rotate(45deg)} } /* ================== 19 · LE BLOG (21/09/2026) ================== « À lire sur le blog » : l'encart qui mène d'une page de prestation à l'article qui la prolonge (config.lire_aussi). Il vit dans la prose : on y annule le soulignement et la couleur que la prose donne aux liens, d'où le :root. Plus discret que l'appel au milieu, qui reste le seul appel à l'action de la page : un simple filet, pas de fond. */ .lire-aussi{margin:var(--e2) 0;padding:18px 22px;border:1px solid var(--ligne);border-radius:var(--r); display:flex;flex-direction:column;gap:6px} .lire-aussi__sur{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)} :root .prose a.lire-aussi__lien{font-family:var(--serif);font-size:1.25rem;line-height:1.25;font-weight:400; color:var(--petrole);text-decoration:none;display:inline-flex;min-height:40px;align-items:center} :root .prose a.lire-aussi__lien:hover{text-decoration:underline;text-underline-offset:4px} .lire-aussi__texte{color:var(--encre-2);font-size:.975rem;line-height:1.5} /* ================== 20 · LA PAGE DU BLOG : « À LA UNE » (21/09/2026) ================== Retenue par William parmi trois propositions (A à la une, B mosaïque, C sommaire éditorial), sur la page de comparaison du 21/09. Même balisage que l'atelier : ce qu'elle publiera elle-même prend la même mise en page. Les deux autres restent dans variantes-blog/construire-variantes.py. */ /* ===== PAGE DU BLOG, proposition A · À la une, retenue par William (21/09/2026) ===== */ :root .contenu__carte--blog .prose{max-width:none} :root .contenu__carte--blog .prose>.bloc:first-child p{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.38;color:var(--encre);max-width:34rem;margin:0} :root .contenu__carte--blog .articles .articles__titre{font-family:var(--serif);color:var(--encre);transition:color .25s} :root .contenu__carte--blog .articles a.articles__lien:hover .articles__titre{color:var(--petrole)} /* A · À LA UNE : le dernier article en grand, les autres en grille de trois, sans cadre. */ :root .contenu__carte--blog .prose h2{font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);margin:44px 0 22px;padding-top:30px;border-top:1px solid var(--ligne-fine)} /* 21/09 : l'introduction est remontée dans le haut de page ; « Les articles » ouvre donc la carte, sans filet au-dessus. */ :root .contenu__carte--blog .prose>.bloc:first-child h2{margin-top:0;padding-top:0;border-top:0} :root .contenu__carte--blog .prose ul.articles{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px} :root .contenu__carte--blog .articles .articles__un:first-child{grid-column:1/-1} :root .contenu__carte--blog .articles a.articles__lien{display:flex;flex-direction:column;align-items:stretch;gap:10px;height:100%;padding:0;border:0;border-radius:0;box-shadow:none} :root .contenu__carte--blog .articles .articles__image{aspect-ratio:16/10;border-radius:18px;margin-bottom:8px} :root .contenu__carte--blog .articles .articles__titre{font-size:1.3rem;line-height:1.22} :root .contenu__carte--blog .articles .articles__resume{font-size:.9375rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} :root .contenu__carte--blog .articles .motif__suite{margin-top:auto;padding-top:6px} @media (min-width:900px){ :root .contenu__carte--blog .articles .articles__un:first-child a.articles__lien{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:44px;row-gap:14px;align-items:start;padding-bottom:40px;border-bottom:1px solid var(--ligne-fine)} :root .contenu__carte--blog .articles .articles__un:first-child .articles__image{grid-row:1/5;aspect-ratio:4/3;margin:0;border-radius:24px} :root .contenu__carte--blog .articles .articles__un:first-child .articles__meta{margin-top:12px} :root .contenu__carte--blog .articles .articles__un:first-child .articles__titre{font-size:clamp(1.75rem,2.8vw,2.375rem);line-height:1.1} :root .contenu__carte--blog .articles .articles__un:first-child .articles__resume{font-size:1.0625rem;-webkit-line-clamp:5} } @media (max-width:899px){:root .contenu__carte--blog .prose ul.articles{grid-template-columns:minmax(0,1fr);gap:36px}} /* ================== 21 · LE HAUT DE LA PAGE DU BLOG : « PLEIN CADRE » (21/09/2026) ================== Retenu par William parmi trois propositions (1 pétrole, 2 plein cadre, 3 couverture claire). La photo des volets (photos["/blog/"] dans config.py) couvre le haut de page, retournée pour que la fenêtre passe à droite ; le texte se pose sur le mur baigné de lumière, sous un voile blanc qui garde le contraste. Sur un téléphone, la photo repasse sous le texte. Les deux autres restent dans variantes-blog/construire-heros.py. */ /* HERO 2 · PLEIN CADRE : la photo couvre le haut de page, le texte se pose sur le mur baigné de lumière. */ :root main:has(.contenu__carte--blog) .page-tete .page-photo img{transform:scaleX(-1)} @media (min-width:700px){ :root main:has(.contenu__carte--blog) .page-tete{position:relative;overflow:hidden;min-height:clamp(480px,50vw,660px);display:flex;flex-direction:column;justify-content:center} :root main:has(.contenu__carte--blog) .page-tete .page-photo{position:absolute;inset:0;margin:0;border-radius:0;--r-photo:0px;aspect-ratio:auto;z-index:0} :root main:has(.contenu__carte--blog) .page-tete .page-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,0) 72%)} :root main:has(.contenu__carte--blog) .page-tete .ariane,:root main:has(.contenu__carte--blog) .page-tete .page-tete__grille{position:relative;z-index:1} :root main:has(.contenu__carte--blog) .page-tete .page-tete__sous{color:var(--encre);max-width:28rem} } @media (max-width:699px){:root main:has(.contenu__carte--blog) .page-tete .page-photo{aspect-ratio:4/3;border-radius:22px;margin-top:28px}} /* ================== 22 · LE BLOG MIS EN AVANT DANS « PAR OÙ COMMENCER » (21/09/2026) ================== William : « mettre en avant la partie blog, peut-être à droite, en bleu foncé ». Les trois motifs gardent leurs colonnes ; le blog (socle : liens_motifs, marqué pm2__extra) devient une carte pétrole foncé en quatrième colonne, sur toute la hauteur. Le panneau s'élargit de 960 à 1 100 px : le menu ne s'affiche qu'à partir de 1 180 px de large, il tient donc toujours dans l'écran. */ :root .panneau--motifs.pm2{width:min(1100px,calc(100vw - 80px))} :root .panneau ul.pm2__grille{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,.9fr)} :root .pm2__phrase{-webkit-line-clamp:4} :root .pm2__grille>li.pm2__extra{grid-column:4;grid-row:1} :root .pm2__extra .pm2__motif{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;padding:22px 22px 22px;background:var(--petrole-fonce);border-radius:16px} :root .pm2__extra .pm2__motif:hover,:root .pm2__extra .pm2__motif:focus-visible{background:var(--petrole)} :root .pm2__extra .pm2__motif::before{content:"À lire";position:absolute;top:20px;left:22px;font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--anis)} :root .pm2__extra .pm2__motif::after{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;background:rgba(36,178,191,.22);pointer-events:none} :root .pm2__extra .pm2__nom{color:#fff;font-size:1.4rem} :root .pm2__extra .pm2__nom svg{color:var(--anis);opacity:1} :root .pm2__extra .pm2__phrase{color:rgba(255,255,255,.84)} /* ================== 23 · SA CITATION FÉTICHE (22/09/2026) ================== Demandée par Christel le 22/09 au soir, en même temps que « je la trouve un peu triste, serait-il possible de faire quelque chose de moins uniforme ? ». La bande répond aux deux : elle porte ses mots à elle, et elle casse le rythme des autres sections (pas de sur-titre, pas de titre, pas de grille, une seule colonne centrée sur un lavis d'anis). L'anis est la seule couleur chaude de sa charte ; dilué à ce point (#F7F9EA), il reste très au-dessus du seuil de contraste avec le pétrole foncé qui porte le texte (9,3:1 mesuré ; 5,3:1 pour la signature, en petit). Le nom de classe est `bande-citation` et non `citation` : `.citation` existe déjà plus haut (une petite carte de citation, bord cyan et ombre portée) et la bande en héritait. RÉDUITE le 22/09 au soir, deuxième regard de William : « cette partie prend trop de place, cela casse la conversion ». Elle mesurait 449 px sur grand écran et 323 px sur téléphone, soit un écran de défilement entier posé entre sa présentation et ses avis, juste avant la bande qui vend. Trois choses la faisaient grandir, toutes retirées : la respiration de section (jusqu'à 96 px en haut et en bas), le guillemet ouvrant qui occupait une ligne à lui seul au-dessus du texte, et une colonne étroite de 34 em qui coupait la phrase en quatre lignes. Maintenant : respiration courte, guillemet en ligne dans le texte, colonne de 52 em. La phrase tient en deux lignes, et la citation reste entière, sans un mot changé. */ .bande-citation{background:#F7F9EA;border-top:1px solid rgba(213,224,111,.7);border-bottom:1px solid rgba(213,224,111,.7)} /* le `:root` passe devant la respiration que le thème donne à toutes les sections (section 3) */ :root .section.bande-citation{padding-block:clamp(26px,3vw,38px)} .bande-citation__bloc{margin:0 auto;max-width:52em;text-align:center} .bande-citation__texte{margin:0;padding:0;border:0;font-family:var(--serif);font-weight:400; font-size:clamp(1.0625rem,.95rem + .5vw,1.3rem);line-height:1.45;color:var(--petrole-fonce)} /* Le guillemet ouvrant, en anis, posé DANS la ligne : il ne prend plus de hauteur. `line-height:0` l'empêche d'écarter la première ligne du reste du paragraphe. */ .bande-citation__texte::before{content:"“";color:var(--anis);font-family:var(--serif); font-size:1.6em;line-height:0;vertical-align:-.28em;margin-right:.08em} .bande-citation__source{margin-top:10px;font-family:var(--sans);font-size:.6875rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2)} /* Le losange anis des puces du premier écran, en petit, à la place du filet qui ajoutait 15 px. */ .bande-citation__source::before{content:"";display:inline-block;width:6px;height:6px; margin-right:9px;vertical-align:.1em;border-radius:2px;transform:rotate(45deg);background:var(--anis)} /* ================== 24 · SON BLOC DE CONTACT, TÉLÉPHONE ET E-MAIL (22/09/2026) ================== William : « je veux quelque chose de vivant, ajoute l'e-mail ». Le bloc du socle posait une pastille, un titre, le numéro et un bouton, tout serré à gauche, et laissait la moitié droite vide. Ici, deux voies à égalité, posées dans cette moitié : on appelle, ou on écrit. Le HTML vient de config.py, carte_contact(). Structure commune aux deux versions du site ; l'habillage retenu le 23/09 est en fin de fichier. */ .rdv--voies{display:grid;gap:28px} @media (min-width:860px){ :root .rdv--voies{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:48px;align-items:center} } .rdv--voies h3{margin-top:16px} .rdv--voies .rdv__sous{margin:0;max-width:34em;color:var(--encre-2)} .rdv__voies{display:grid;gap:14px} /* Une voie : l'icône, ce qu'on lit, la flèche. La ligne entière est cliquable, et fait au moins les 44 px de haut que demande la règle WCAG 2.5.8 sur la taille des cibles. */ .rdv__voie{display:flex;align-items:center;gap:16px;min-height:68px;padding:14px 18px; border-radius:var(--r);background:var(--eau);text-decoration:none;color:var(--encre); box-shadow:inset 0 0 0 1px var(--ligne-fine); transition:background .2s ease,box-shadow .2s ease,transform .2s ease} .rdv__voie:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--ligne),var(--ombre);transform:translateY(-1px)} .rdv__icone{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%; background:#fff;color:var(--petrole);box-shadow:inset 0 0 0 1px var(--ligne-fine)} .rdv__icone svg{width:21px;height:21px} .rdv__voie:hover .rdv__icone{background:var(--anis);color:var(--petrole-fonce);box-shadow:none} .rdv__voie-texte{display:flex;flex-direction:column;gap:2px;min-width:0} /* L'adresse est longue : elle se coupe proprement plutôt que d'élargir la carte. */ .rdv__voie-texte b{font-weight:600;font-size:1.0625rem;line-height:1.25;overflow-wrap:anywhere} .rdv__voie-texte span{font-size:.875rem;color:var(--encre-3)} .rdv__voie-fleche{margin-left:auto;flex:none;color:var(--petrole);opacity:.55; transition:opacity .2s ease,transform .2s ease} .rdv__voie-fleche svg{width:20px;height:20px;display:block} .rdv__voie:hover .rdv__voie-fleche{opacity:1;transform:translateX(3px)} @media (max-width:399px){.rdv__voie-texte b{font-size:1rem}} /* SOCLE · structure et composants communs à tous les sites clients. Ne contient AUCUNE couleur en dur ni aucune police : tout passe par les jetons de theme.css. Extrait le 2026-09-17 d'un site du parc (histoire : socle/README.md). AUCUNE donnée de cliente ici : ce fichier part dans chaque site (neutralite.mjs le vérifie). */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 12px)} body{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--encre);margin:0;letter-spacing:-.01em;text-wrap:balance} p{margin:0 0 1em;text-wrap:pretty} p:last-child{margin-bottom:0} strong{font-weight:600} :focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:8px} .saut{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--encre);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none} .saut:focus{left:12px} .enveloppe{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gouttiere)} .section{padding-block:clamp(72px,9vw,128px)} .fond-eau{background:var(--eau)} .fond-rose{background:var(--rose)} .fond-gris{background:var(--gris)} /* Pastilles */ .pastille{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;line-height:1.3;background:var(--rouge-pale);color:var(--rouge)} .pastille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pastille--eau{background:#fff;color:var(--eau-texte)} .pastille--rose{background:#fff;color:var(--rouge)} .pastille--gris{background:#fff;color:var(--gris-texte)} .pastille--simple::before{display:none} /* Titres */ .titre-section{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.08;margin-top:18px} .chapeau{font-size:clamp(1.0625rem,1.4vw,1.1875rem);color:var(--encre-2);max-width:36em} /* Boutons */ .bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--sans);font-size:1rem;font-weight:600;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease,color .2s ease} .bouton svg{width:18px;height:18px;flex:none} .bouton--rouge{background:var(--rouge);color:#fff;box-shadow:0 8px 20px -8px rgba(var(--rouge-rvb),.55)} .bouton--rouge:hover{background:var(--rouge-2);transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(var(--rouge-rvb),.6)} .bouton--clair{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--ligne),var(--ombre)} .bouton--clair:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px rgba(var(--encre-rvb),.16),var(--ombre-haute)} .bouton--petit{min-height:44px;padding:0 20px;font-size:.9375rem} .lien-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--encre);text-decoration:none;min-height:44px;border-bottom:0} .lien-fleche span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:2px;transition:background-size .25s ease} .lien-fleche svg{width:18px;height:18px;transition:transform .25s ease;color:var(--rouge)} .lien-fleche:hover svg{transform:translateX(4px)} /* ============ En-tête ============ */ .entete{position:sticky;top:0;z-index:50;height:var(--entete);transition:background-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease} .entete.defile{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--ligne)} .entete .enveloppe{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px} .marque{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px} .marque__point{width:10px;height:10px;border-radius:50%;background:var(--rouge);flex:none;box-shadow:0 0 0 4px var(--rouge-pale)} .marque__nom{font-family:var(--serif);font-size:1.375rem;line-height:1;letter-spacing:-.01em;white-space:nowrap} .nav{display:none} .nav__liste{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px} .nav__item{position:relative} .nav__item--large{position:static} .nav__lien{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:0;background:none;font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--encre-2);text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .3s ease} .nav__lien::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:1px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)} .nav__lien:hover,.nav__lien[aria-expanded="true"]{color:var(--encre)} .nav__lien:hover::after,.nav__lien[aria-expanded="true"]::after{transform:scaleX(1)} .nav__lien svg{width:12px;height:12px;transition:transform .35s ease} .nav__lien[aria-expanded="true"] svg{transform:rotate(180deg)} .nav__lien--declencheur::after{right:31px} .entete.deploye{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 1px 0 var(--ligne)} .entete__grille{position:relative} .entete__actions{display:flex;align-items:center;gap:8px} .entete__appel{display:none} .petites-caps{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2} /* Méga-menu */ .panneau{position:absolute;top:calc(50% + 34px);z-index:60;background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(var(--encre-rvb),.06),0 30px 60px -24px rgba(var(--encre-rvb),.24);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s} .panneau::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} .panneau.ouvert{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease} .panneau--soins,.panneau--motifs{left:0;right:0;margin-inline:auto;width:min(1000px,calc(100vw - 80px));padding:14px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px} .panneau ul{list-style:none;margin:0;padding:0} .panneau__titre{margin:0;padding:14px 18px 10px;color:var(--encre-3)} .mm-soin{display:flex;align-items:baseline;justify-content:space-between;gap:24px;min-height:52px;padding:12px 18px;border-radius:12px;text-decoration:none;transition:background-color .25s ease} .mm-soin:hover,.mm-soin:focus-visible{background:var(--eau)} .mm-soin__nom{font-family:var(--serif);font-size:1.25rem;line-height:1.2;color:var(--encre)} .mm-soin__info{font-size:.875rem;color:var(--encre-3);white-space:nowrap;font-variant-numeric:tabular-nums} .panneau__cote{background:var(--eau);border-radius:14px;display:flex;flex-direction:column} .pb-cote{padding:26px 24px 20px} .pb-etiquette{color:var(--eau-texte);margin:0} .pb-tel{font-family:var(--serif);font-size:2rem;line-height:1.1;color:var(--encre);text-decoration:none;margin-top:12px;white-space:nowrap} .pb-tel:hover{color:var(--rouge)} .pb-sous{margin:4px 0 0;font-size:.875rem;color:var(--encre-2)} .panneau ul.pb-horaires{margin-top:20px;border-top:1px solid rgba(var(--encre-rvb),.1)} .pb-horaires li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(var(--encre-rvb),.1);font-size:.875rem;color:var(--encre-2);font-variant-numeric:tabular-nums} .pb-horaires li span:last-child{color:var(--encre);font-weight:500} .pb-lieu{display:flex;align-items:flex-start;line-height:1.5;gap:8px;margin:14px 0 0;font-size:.875rem;color:var(--encre-2)} .pb-lieu svg{width:16px;height:16px;margin-top:3px;flex:none;color:var(--rouge)} .pb-actions{margin-top:auto;padding-top:22px;display:grid;gap:6px} .pb-actions .bouton{width:100%} .pb-actions .lien-fleche{justify-self:center;font-size:.9375rem} .pm-motif{display:flex;align-items:center;gap:18px;padding:14px 18px;border-radius:12px;text-decoration:none;transition:background-color .25s ease} .pm-motif:hover,.pm-motif:focus-visible{background:var(--eau)} .pm-motif__texte{flex:1 1 auto;min-width:0} .pm-motif__nom{display:block;font-family:var(--serif);font-size:1.25rem;line-height:1.2;color:var(--encre)} .pm-motif__phrase{display:block;margin-top:3px;font-size:.875rem;line-height:1.45;color:var(--encre-3)} .pm-motif__soins{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px} .pm-motif__etiquette{font-size:.75rem;color:var(--encre-3);margin-right:2px} .pm-pilule{font-size:.75rem;font-weight:500;line-height:1;padding:5px 10px;border-radius:999px;background:var(--eau);color:var(--eau-texte);white-space:nowrap} .pm-motif:hover .pm-pilule{background:#fff} .pm-motif__fleche{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--encre);box-shadow:inset 0 0 0 1px var(--ligne);transition:background-color .25s ease,color .25s ease} .pm-motif__fleche svg{width:15px;height:15px} .pm-motif:hover .pm-motif__fleche{background:var(--rouge);color:#fff;box-shadow:none} .pm-cote__texte{margin:10px 0 0;font-family:var(--serif);font-size:1.3rem;line-height:1.25;color:var(--encre)} .pm .pb-tel{margin-top:16px;font-size:1.75rem} .panneau--motifs.pm2{display:block;width:min(960px,calc(100vw - 80px));padding:14px 14px 16px} .pm2 .panneau__titre{padding:12px 18px 8px} .panneau ul.pm2__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px} .pm2__motif{display:block;height:100%;padding:16px 18px 18px;border-radius:14px;text-decoration:none;transition:background-color .25s ease} .pm2__motif:hover,.pm2__motif:focus-visible{background:var(--eau)} .pm2__nom{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:1.2rem;line-height:1.2;color:var(--encre)} .pm2__nom svg{width:15px;height:15px;color:var(--rouge);opacity:0;translate:-6px 0;transition:opacity .25s ease,translate .35s cubic-bezier(.16,1,.3,1)} .pm2__motif:hover .pm2__nom svg,.pm2__motif:focus-visible .pm2__nom svg{opacity:1;translate:0 0} .pm2__phrase{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:.875rem;line-height:1.45;color:var(--encre-3)} .pm2__aide{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px 18px;border-radius:14px;background:var(--eau)} .pm2__aide-titre{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.2;color:var(--encre)} .pm2__aide-texte{margin:0 0 6px;font-size:.875rem;line-height:1.45;color:var(--encre-2)} /* les lignes des menus arrivent en cascade */ .panneau>div>ul>li{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)} .panneau.ouvert>div>ul>li{opacity:1;transform:none} .panneau.ouvert>div>ul>li:nth-child(2){transition-delay:.04s}.panneau.ouvert>div>ul>li:nth-child(3){transition-delay:.08s}.panneau.ouvert>div>ul>li:nth-child(4){transition-delay:.12s}.panneau.ouvert>div>ul>li:nth-child(5){transition-delay:.16s}.panneau.ouvert>div>ul>li:nth-child(6){transition-delay:.2s} /* Burger + menu téléphone plein écran */ .burger{width:48px;height:48px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--ligne);color:var(--encre);display:inline-grid;place-items:center;cursor:pointer;position:relative;z-index:60;margin-right:-4px} .burger span{position:absolute;left:15px;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .burger span:nth-child(1){top:20px} .burger span:nth-child(2){top:27px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)} .menu-mobile{position:fixed;inset:0;z-index:40;background:#fff;padding-top:var(--entete);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s} .menu-mobile.ouvert{opacity:1;visibility:visible;transition:opacity .35s ease} .menu-mobile__defile{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px var(--gouttiere) 28px;border-top:1px solid var(--ligne)} .menu-mobile__groupe{margin:28px 0 6px;color:var(--encre-3)} .menu-mobile ul{list-style:none;margin:0;padding:0} .menu-mobile li{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)} .menu-mobile.ouvert li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 32ms + 80ms)} .menu-mobile li+li{border-top:1px solid var(--ligne)} .menu-mobile ul a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;font-family:var(--serif);font-size:1.3125rem;line-height:1.2;text-decoration:none;color:var(--encre)} .menu-mobile__prix{font-family:var(--sans);font-size:.9375rem;color:var(--encre-3);white-space:nowrap;font-variant-numeric:tabular-nums} .menu-mobile__bas{flex:none;padding:14px var(--gouttiere) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ligne);display:grid;grid-template-columns:minmax(0,1fr);gap:8px;background:#fff} .menu-mobile__bas .bouton{min-height:50px;padding:0 20px;width:100%} .menu-mobile__infos{grid-column:1/-1;margin:2px 0 0;font-size:.875rem;color:var(--encre-3);text-align:center} html.menu-ouvert,body.menu-ouvert{overflow:hidden} @media (min-width:1180px){ .entete__grille{display:grid!important;grid-template-columns:1fr auto 1fr} .nav{display:block} .entete__actions{justify-self:end} .burger,.menu-mobile{display:none} .entete__appel{display:inline-flex} } /* ============ Héros ============ */ .heros{padding-block:clamp(24px,5vw,72px) clamp(56px,9vw,120px);position:relative} .heros__grille{display:grid;gap:48px;align-items:center} .heros__texte .pastille{margin-bottom:22px} .heros h1{font-size:clamp(2.5rem,5vw,4.25rem);line-height:1.02;letter-spacing:-.02em} .heros h1 .h1-suite{display:block;color:var(--encre-2);font-size:.62em;line-height:1.15;margin-top:.35em;letter-spacing:-.01em} .heros h1 .h1-suite em{font-style:normal;color:var(--rouge)} .heros__chapo{margin-top:24px;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--encre-2);max-width:32em} .heros__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px} @media (max-width:559px){.heros__actions .bouton{flex:1 1 100%}.heros__reperes{gap:10px 18px}} .heros__reperes{margin:36px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.9375rem;color:var(--encre-2)} .heros__reperes li{display:flex;align-items:center;gap:8px} .heros__reperes svg{width:18px;height:18px;color:var(--eau-texte);flex:none} .cadre{position:relative;isolation:isolate;margin:0 8px 8px 0} .cadre__fond{position:absolute;z-index:-1;inset:28px -8px -8px 28px;border-radius:32px;background:var(--eau)} .cadre__rond{position:absolute;z-index:-1;width:88px;height:88px;border-radius:50%;background:var(--rose);top:-20px;right:18%} .cadre__point{position:absolute;z-index:2;width:14px;height:14px;border-radius:50%;background:var(--rouge);top:22px;right:-4px;box-shadow:0 0 0 6px #fff} .cadre__photo{border-radius:28px;overflow:hidden;aspect-ratio:4/3.3;background:var(--encre);box-shadow:var(--ombre-haute)} .cadre__photo img{width:100%;height:100%;object-fit:cover;object-position:38% 55%} .carte-flottante{position:absolute;z-index:3;left:16px;bottom:16px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:14px 18px;box-shadow:var(--ombre-haute);display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px)} .carte-flottante__icone{width:44px;height:44px;border-radius:14px;background:var(--rouge-pale);color:var(--rouge);display:grid;place-items:center;flex:none} .carte-flottante__icone svg{width:22px;height:22px} .carte-flottante__haut{font-size:.8125rem;color:var(--encre-3);line-height:1.3} .carte-flottante__bas{font-family:var(--serif);font-size:1.25rem;line-height:1.2} @media (min-width:980px){ .heros__grille{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:64px} .cadre{margin:0 0 20px 0} .cadre__fond{inset:48px -24px -24px 48px;border-radius:40px} .cadre__photo{aspect-ratio:4/4.6;border-radius:32px} .cadre__photo img{object-position:30% 50%} .carte-flottante{left:-40px;bottom:48px;padding:16px 22px} } /* ============ Motifs ============ */ .entete-section{display:grid;gap:20px;margin-bottom:48px} @media (min-width:980px){ .entete-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:end;margin-bottom:64px} .entete-section .chapeau{padding-bottom:6px} } .grille-motifs{display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:640px){.grille-motifs{grid-template-columns:repeat(2,minmax(0,1fr))}.grille-motifs>:last-child{grid-column:1/-1}} @media (min-width:980px){ .grille-motifs{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} .grille-motifs>*{grid-column:span 2} .grille-motifs>:nth-child(4),.grille-motifs>:nth-child(5){grid-column:span 3} } .carte{background:#fff;border-radius:var(--r);box-shadow:var(--ombre);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)} a.carte{text-decoration:none;color:inherit;display:flex;flex-direction:column} a.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-haute)} .motif{padding:28px;min-height:100%} .motif__icone{width:52px;height:52px;border-radius:16px;background:var(--eau);color:var(--eau-texte);display:grid;place-items:center;margin-bottom:24px} .motif__icone svg{width:26px;height:26px} .motif h3{font-size:1.625rem;line-height:1.15;margin-bottom:10px} .motif p{color:var(--encre-2);font-size:1rem;line-height:1.6;margin-bottom:24px;text-wrap:wrap;max-width:32em} .motif__suite{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:.9375rem;font-weight:600;color:var(--encre)} .rond-fleche{width:40px;height:40px;border-radius:50%;background:var(--eau);color:var(--encre);display:grid;place-items:center;transition:background-color .25s,color .25s,transform .25s} .rond-fleche svg{width:18px;height:18px} a.carte:hover .rond-fleche{background:var(--rouge);color:#fff} /* ============ Séance ============ */ .seance__grille{display:grid;gap:48px} .seance__citation{font-family:var(--serif);font-size:clamp(1.5rem,2.3vw,1.9rem);line-height:1.2;color:var(--encre);margin:28px 0 20px;letter-spacing:-.01em} .seance__citation .guillemet{color:var(--rouge)} .seance__intro{color:var(--encre-2);max-width:30em} .etapes{display:grid;gap:16px;counter-reset:etape} .etape{position:relative;padding:32px 28px 30px;border-radius:var(--r);background:var(--gris)} .etape:nth-child(2){background:var(--eau)} .etape__tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .etape__num{font-family:var(--serif);font-size:1rem;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--rouge)} .etape__icone{width:40px;height:40px;color:var(--encre-2)} .etape h3{font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.15;margin-bottom:12px} .etape p{color:var(--encre-2);font-size:1rem} .phrase-forte{margin-top:clamp(56px,7vw,96px);text-align:center;font-family:var(--serif);font-size:clamp(1.875rem,4.2vw,3.25rem);line-height:1.12;letter-spacing:-.015em;max-width:18em;margin-inline:auto} .phrase-forte span{position:relative;white-space:nowrap} .phrase-forte span::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.34em;background:var(--rose-fonce);z-index:-1;border-radius:4px} .phrase-forte{position:relative;z-index:0} @media (min-width:980px){ .seance__grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:96px;align-items:start} .seance__gauche{position:sticky;top:calc(var(--entete) + 40px)} .etapes{gap:20px} .etape{padding:40px 40px 38px} .etape:nth-child(2){margin-left:48px} } /* ============ Soins ============ */ .grille-soins{display:grid;gap:16px} @media (min-width:700px){.grille-soins{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1080px){.grille-soins{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}} .soin{padding:28px;min-height:100%} .soin__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px} .soin__duree{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--encre-2);background:var(--gris);padding:6px 12px;border-radius:999px;line-height:1.3} .soin__duree svg{width:14px;height:14px;flex:none} .soin__prix{font-family:var(--serif);font-size:1.75rem;line-height:1;color:var(--encre);white-space:nowrap} .soin h3{font-size:1.5rem;line-height:1.18;margin-bottom:10px} .soin p{font-size:1rem;color:var(--encre-2);margin-bottom:24px} .soin .motif__suite .rond-fleche{background:var(--rose)} .soin--vedette{background:#fff;box-shadow:inset 0 0 0 2px var(--rouge),var(--ombre)} .soin--vedette .soin__duree{background:var(--rouge-pale);color:var(--rouge)} .soin--vedette .soin__prix{color:var(--rouge)} .soin--vedette .rond-fleche{background:var(--rouge)!important;color:#fff} /* ============ Médecine chinoise ============ */ .mtc{display:grid;gap:40px} .mtc__question{display:none;position:relative;padding:36px 30px;border-radius:var(--r);background:var(--rose);overflow:hidden} .mtc__question::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;border:28px solid rgba(255,255,255,.55);right:-60px;bottom:-70px} .mtc__question p{position:relative;z-index:1;font-family:var(--serif);font-size:clamp(1.625rem,2.8vw,2.25rem);line-height:1.2;margin:0} .mtc__question small{display:block;font-family:var(--sans);font-size:.875rem;color:var(--encre-2);margin-bottom:14px;letter-spacing:.01em} .mtc__texte p{color:var(--encre-2)} .mtc__encadre{margin:28px 0;padding:20px 22px;border-radius:18px;background:var(--gris);display:flex;gap:14px;align-items:flex-start;color:var(--encre)} .mtc__encadre svg{width:22px;height:22px;flex:none;color:var(--gris-texte);margin-top:3px} .mtc__encadre p{color:var(--encre-2);margin:0} .lien-texte{color:var(--rouge);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px} .lien-texte:hover{color:var(--rouge-2)} @media (min-width:980px){ .mtc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:center} .mtc__question{display:block;padding:48px 44px;margin-top:40px} } /* ============ Qui je suis ============ */ .qui{display:grid;gap:20px} .qui__carte{padding:32px 28px} .qui__carte p{color:var(--encre-2)} .qui__carte .titre-section{margin-bottom:24px} .qui__citation{padding:32px 28px;border-radius:var(--r);background:var(--rouge);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden} .qui__citation::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);right:-70px;top:-70px} .qui__citation svg{width:40px;height:40px;opacity:.9} .qui__citation blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.75rem,2.8vw,2.375rem);line-height:1.15;position:relative} .qui__citation figcaption{font-size:.9375rem;opacity:.9} .jalons{list-style:none;margin:0;padding:0;display:grid;gap:12px} .jalon{background:#fff;border-radius:20px;padding:20px 22px;box-shadow:var(--ombre);display:flex;gap:18px;align-items:baseline} .jalon__chiffre{font-family:var(--serif);font-size:1.75rem;line-height:1;color:var(--gris-texte);min-width:4.2em;white-space:nowrap} .jalon__texte{font-size:.9375rem;line-height:1.5;color:var(--encre-2)} @media (min-width:980px){ .qui{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto;gap:20px} .qui__carte{grid-row:1/3;padding:56px 56px 52px} .qui__citation{padding:40px} } /* ============ Ce que je ne fais pas ============ */ .limites{display:grid;gap:24px;align-items:center;padding:32px 28px;border-radius:var(--r);background:#fff;box-shadow:var(--ombre-haute)} .limites__icone{width:56px;height:56px;border-radius:18px;background:var(--gris);color:var(--gris-texte);display:grid;place-items:center} .limites__icone svg{width:28px;height:28px} .limites h2{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.1} .limites p{color:var(--encre-2);margin:0} .limites strong{color:var(--encre)} .limites a{color:var(--rouge);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px} @media (min-width:860px){.limites{grid-template-columns:auto minmax(0,.8fr) minmax(0,1.4fr);gap:40px;padding:44px 48px}} /* ============ Venir ============ */ .venir{display:grid;gap:20px} .venir__carte{padding:32px 28px} .venir__carte p{color:var(--encre-2)} .adresse{display:flex;gap:14px;align-items:flex-start;margin:28px 0;padding:18px 20px;border-radius:18px;background:var(--eau)} .adresse svg{width:22px;height:22px;color:var(--eau-texte);flex:none;margin-top:3px} .adresse strong{display:block;font-size:1.0625rem;color:var(--encre)} .adresse span{color:var(--encre-2);font-size:.9375rem} .horaires{list-style:none;margin:24px 0 0;padding:0} .horaires li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--ligne);font-size:1rem} .horaires li:last-child{border-bottom:1px solid var(--ligne)} .horaires span:first-child{font-weight:500} .horaires span:last-child{color:var(--encre-2);text-align:right;font-variant-numeric:tabular-nums} .horaires li.ferme span{color:var(--encre-3);font-weight:400} .rdv{padding:36px 28px;border-radius:var(--r);background:#fff;box-shadow:var(--ombre);position:relative;overflow:hidden} .rdv::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:var(--rose);right:-50px;top:-50px;z-index:0} .rdv>*{position:relative;z-index:1} .rdv h3{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;margin:18px 0 14px;max-width:12em} .rdv__num{display:block;font-family:var(--serif);font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;color:var(--encre);text-decoration:none;margin:20px 0 24px;white-space:nowrap} .rdv__num:hover{color:var(--rouge)} .rdv__actions{display:grid;gap:12px} .rdv__actions .bouton{width:100%} @media (min-width:980px){ .venir{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:stretch} .venir__carte{padding:52px 56px} .rdv{padding:52px 48px;align-self:start;position:sticky;top:calc(var(--entete) + 32px)} .rdv__actions{grid-template-columns:1fr 1fr} } /* ============ Pied ============ */ .pied{padding-block:56px 40px;border-top:1px solid var(--ligne)} .pied__grille{display:grid;gap:32px} .pied__marque .marque{margin-bottom:12px} .pied p,.pied li{color:var(--encre-2);font-size:.9375rem;line-height:1.6} .pied h4{margin:0 0 12px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)} .pied ul{list-style:none;margin:0;padding:0} .pied ul a{display:inline-flex;min-height:36px;align-items:center;text-decoration:none} .pied ul a:hover{color:var(--rouge)} .pied__bas{margin-top:40px;padding-top:24px;border-top:1px solid var(--ligne);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.875rem;color:var(--encre-3)} .pied__bas a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center} .pied__grille{grid-template-columns:1fr 1fr} .pied__marque{grid-column:1/-1} @media (min-width:860px){.pied__grille{grid-template-columns:1.4fr 1fr 1fr 1fr}.pied__marque{grid-column:auto}.pied__grille--sans-motifs{grid-template-columns:1.4fr 1fr 1fr}} /* Barre d'appel mobile */ .barre-appel{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 32px -8px rgba(var(--encre-rvb),.28),inset 0 0 0 1px var(--ligne);transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.7,.2,1)} .barre-appel.visible{transform:none} .barre-appel .bouton{min-height:48px} .barre-appel .bouton--clair{box-shadow:none;background:var(--eau);padding:0 18px} @media (min-width:980px){.barre-appel{display:none}} @media (max-width:979px){.pied{padding-bottom:110px}} /* Apparitions */ .js .apparait{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .js .apparait.vu{opacity:1;transform:none} .js .apparait[data-delai="1"]{transition-delay:.08s} .js .apparait[data-delai="2"]{transition-delay:.16s} .js .apparait[data-delai="3"]{transition-delay:.24s} .js .apparait[data-delai="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important} .js .apparait{opacity:1;transform:none} a.carte:hover,.bouton:hover{transform:none} } /* ================================================================ Pages intérieures, dans la charte de la maquette C validée par William le 16/09/2026 ================================================================ */ .ariane{font-size:.875rem;color:var(--encre-3);margin-bottom:6px} .ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px} .ariane li{display:flex;align-items:center;gap:8px} .ariane li+li::before{content:"·";color:var(--encre-3)} .ariane a{color:var(--encre-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .ariane a:hover{color:var(--rouge)} .ariane [aria-current]{color:var(--encre-3)} .page-tete{padding-block:clamp(8px,2vw,24px) clamp(48px,6vw,88px)} .page-tete__grille{display:grid;gap:32px;align-items:end} .page-tete .pastille{margin-top:10px} .page-tete h1{font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:1.05;letter-spacing:-.02em;margin-top:18px;max-width:15em} .page-tete .heros__actions{margin-top:28px} @media (min-width:980px){.page-tete__grille.avec-fiche{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px}} .fiche{padding:26px 26px 22px;position:relative;overflow:hidden} .fiche{border-top:4px solid var(--rouge)} .fiche>*{position:relative;z-index:1} .fiche__haut{font-size:.8125rem;color:var(--encre-3);letter-spacing:.02em} .fiche__prix{font-family:var(--serif);font-size:2.6rem;line-height:1.05;color:var(--encre);margin:6px 0 4px} .fiche__duree{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--encre-2);background:var(--gris);padding:6px 12px;border-radius:999px} .fiche__duree svg{width:14px;height:14px} .fiche .bouton{width:100%;margin-top:20px} .fiche__liste{list-style:none;margin:14px 0 0;padding:0} .fiche__liste li+li{border-top:1px solid var(--ligne)} .fiche__liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;text-decoration:none;color:var(--encre);font-weight:500} .fiche__liste a span{color:var(--encre-3);font-size:.875rem;font-weight:400;white-space:nowrap} .fiche__liste a:hover{color:var(--rouge)} .contenu__carte{padding:clamp(28px,5.5vw,72px)} .prose{max-width:44rem} .prose h2{font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.12;margin:56px 0 18px} .prose>.bloc:first-child h2{margin-top:0} .prose h3{font-size:1.4rem;line-height:1.22;margin:32px 0 10px} .prose p,.prose li{color:var(--encre-2)} .prose p{margin:0 0 1em} .prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.1em} .prose li{margin-bottom:.45em;padding-left:.2em} .prose li::marker{color:var(--rouge)} .prose strong{color:var(--encre)} .prose a{color:var(--rouge);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px} .prose a:hover{color:var(--rouge-2)} .prose blockquote{margin:28px 0;padding:24px 28px;border-radius:20px;background:var(--rose)} .prose blockquote p{font-family:var(--serif);font-size:1.4rem;line-height:1.3;color:var(--encre)} .tableau{overflow-x:auto;margin:20px 0 28px} .prose table{width:100%;border-collapse:collapse;font-size:.9375rem} .prose th{text-align:left;font-weight:600;color:var(--encre-3);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;padding:10px 14px 10px 0;border-bottom:1px solid var(--ligne)} .prose td{padding:12px 14px 12px 0;border-bottom:1px solid var(--ligne);vertical-align:top;color:var(--encre)} .prose td a{display:inline-flex;align-items:center;min-height:40px} /* la liste du blog (monteur.liste_articles, et l'atelier qui dessine la même) : elle vit dans la prose, on y annule donc ce que la prose donne aux listes et aux liens */ .prose ul.articles{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:14px} .prose .articles li.articles__un{margin:0;padding:0} .prose .articles li.articles__un::marker{content:none} .prose a.articles__lien{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border-radius:22px;border:1px solid var(--ligne);color:var(--encre);font-weight:400;text-decoration:none;transition:border-color .25s,box-shadow .25s} .prose a.articles__lien:hover{color:var(--encre);border-color:transparent;box-shadow:var(--ombre)} .articles__titre{font-family:var(--serif);font-size:1.35rem;line-height:1.2;color:var(--encre)} .articles__resume{color:var(--encre-2);font-size:.975rem;line-height:1.55} .articles .motif__suite{margin-top:4px} .articles__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)} .articles__rubrique{color:var(--rouge)} /* sa vignette : à gauche sur un écran assez large, au-dessus sur un téléphone */ .articles__image{display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--eau)} .articles__image img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.16,1,.3,1)} .prose a.articles__lien:hover .articles__image img{scale:1.04} @media (min-width:700px){ .prose a.articles__lien:has(.articles__image){display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:24px;row-gap:8px;align-items:start} .prose a.articles__lien:has(.articles__image) .articles__image{grid-row:1/5} } /* le sommaire d'un article (monteur.sommaire_article, et l'atelier qui dessine le même). Sur un téléphone, un encadré en tête de l'article ; sur un grand écran, une colonne qui reste à portée pendant la lecture. La section en cours s'allume et un filet se remplit au défilement (socle.js) : c'est la structure du texte qui s'anime, jamais un décor. */ .sommaire{margin:0 0 36px;padding:20px 22px;border:1px solid var(--ligne);border-radius:var(--r)} .sommaire__titre{margin:0 0 6px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)} .sommaire__liste{list-style:none;margin:0;padding:0;counter-reset:som} .sommaire__liste li{counter-increment:som} .sommaire__liste a{display:flex;gap:10px;align-items:baseline;min-height:40px;padding:8px 0;color:var(--encre-2);text-decoration:none;font-size:.9375rem;line-height:1.35;transition:color .25s} .sommaire__liste a::before{content:counter(som,decimal-leading-zero);flex:none;min-width:1.7em;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--encre-3);transition:color .25s} .sommaire__liste a:hover{color:var(--encre)} .sommaire__liste a.est-courant{color:var(--encre);font-weight:600} .sommaire__liste a.est-courant::before{color:var(--rouge)} @media (min-width:1100px){ .contenu__carte--article{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:48px;align-items:start} .contenu__carte--article>.prose{grid-column:2;min-width:0} .contenu__carte--article .sommaire{position:sticky;top:calc(var(--entete) + 28px);margin:0;padding:0 0 0 18px;border:0;border-left:2px solid var(--ligne);border-radius:0} .contenu__carte--article .sommaire::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:calc(var(--lu,0) * 100%);background:var(--rouge);transition:height .2s linear} } @media (prefers-reduced-motion:reduce){.sommaire__liste a,.sommaire__liste a::before,.sommaire::before,.articles__image img{transition:none}} .encadre-medecin{margin:48px 0;padding:clamp(24px,3.5vw,36px);border-radius:22px;background:var(--gris)} .encadre-medecin h2{margin-top:0!important;font-size:clamp(1.5rem,2.4vw,1.875rem);display:flex;gap:14px;align-items:center} .encadre-medecin h2::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 5px #fff} .encadre-medecin p:last-child,.encadre-medecin ul:last-child{margin-bottom:0} .faq{display:grid;gap:12px;margin-top:6px} .faq details{background:var(--gris);border-radius:18px;padding:0 22px;transition:background-color .2s} .faq details[open]{background:var(--eau)} .faq summary{list-style:none;cursor:pointer;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;color:var(--encre);padding:14px 0} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--serif);font-size:1.7rem;color:var(--rouge);line-height:1;flex:none} .faq details[open] summary::after{content:"\2212"} .faq details>div{padding:0 0 20px} .faq details p{margin:0} .lies{padding-block:clamp(64px,8vw,112px) 0} .lies .entete-section{margin-bottom:36px} .rdv--seul{margin-top:clamp(56px,7vw,96px)} @media (min-width:980px){.rdv--seul{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;padding:56px}.rdv--seul .rdv__actions{min-width:340px}} .page-legale .contenu__carte{box-shadow:none} /* retouches après captures (16/09) */ .rdv__num{display:inline-flex;align-items:center;min-height:44px} .contenu__carte .prose{margin-inline:auto} @media (max-width:640px){.ariane [aria-current]{display:none}.ariane li:nth-last-child(2)::after{content:none}} /* fiche « Les séances proposées » plus lisible (17/09) */ .fiche--motif{padding:28px 28px 24px} .fiche__titre{font-family:var(--serif);font-size:1.55rem;line-height:1.15;color:var(--encre);margin:0 0 6px} .fiche--motif .fiche__liste{margin-top:8px} .fiche--motif .fiche__liste a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center;padding:16px 0;min-height:72px} .fiche--motif .fiche__nom{grid-column:1;grid-row:1;font-family:var(--serif);font-size:1.22rem;line-height:1.2;color:var(--encre);white-space:normal} .fiche--motif .fiche__infos{grid-column:1;grid-row:2;font-size:.9375rem;color:var(--encre-2);white-space:normal} .fiche--motif .fiche__infos strong{color:var(--rouge);font-weight:600} .fiche--motif .rond-fleche{grid-column:2;grid-row:1/3;background:var(--eau)} .fiche--motif .fiche__liste a:hover .fiche__nom{color:var(--rouge)} .fiche--motif .fiche__liste a:hover .rond-fleche{background:var(--rouge);color:#fff} /* sous le nom : la spécialité et la ville, sur tous nos sites (décision du 17/09) */ .marque{align-items:flex-start} .marque__texte{display:flex;flex-direction:column;gap:5px;padding-top:2px} .marque__point{margin-top:8px} .marque__sous{font-family:var(--sans);font-size:.75rem;line-height:1.2;font-weight:500;letter-spacing:.01em;color:var(--encre-3);white-space:nowrap} .marque:hover .marque__sous{color:var(--encre-2)} @media (max-width:359px){.marque__sous{font-size:.6875rem}} /* ================= Photos (17/09) : vraies photos de Frédérique, illustrations sans visage ailleurs ================= */ .page-photo{margin:clamp(36px,4.5vw,64px) 0 0;border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:var(--eau)} .page-photo img,.seance__photo img,.qui__portrait img,.page-tete__portrait img,.venir__acces img,.galerie img{display:block;width:100%;height:100%;object-fit:cover} @media (min-width:700px){.page-photo{aspect-ratio:21/9}} .page-tete__portrait{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;width:100%;max-width:440px;justify-self:end;background:var(--eau);box-shadow:14px 14px 0 var(--eau)} @media (max-width:979px){.page-tete__portrait{justify-self:start;max-width:360px}} .galerie{display:grid;gap:14px;margin:8px 0 48px;grid-template-columns:1fr} @media (min-width:560px){.galerie--2{grid-template-columns:1fr 1fr}} .galerie figure{margin:0} .galerie img{aspect-ratio:4/3;border-radius:18px;height:auto} .galerie figcaption{margin-top:8px;font-size:.875rem;color:var(--encre-3)} .seance__photo{margin:clamp(40px,5vw,72px) 0 0;border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:var(--eau)} @media (min-width:700px){.seance__photo{aspect-ratio:21/9}} .qui__portrait{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--eau)} @media (min-width:980px){ .qui{grid-template-rows:auto auto auto} .qui__carte{grid-row:1/4} .qui__portrait{aspect-ratio:1/1} } .venir__acces{display:grid;gap:14px;grid-template-columns:1fr} .venir__acces figure{margin:0;border-radius:22px;overflow:hidden;background:#fff;position:relative} .venir__acces img{aspect-ratio:4/3;height:auto} .venir__acces figcaption{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:.9375rem;font-weight:500;color:var(--encre)} .venir__acces figcaption span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--rouge);color:#fff;font-size:.8125rem;font-weight:600} @media (min-width:700px){.venir__acces{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:980px){.venir__acces{grid-column:1/-1}} .page-tete__grille:has(.page-tete__portrait){align-items:center} /* nom et logo du cabinet dans le pied de page (validé le 17/09) */ .pied__cabinet{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--encre)!important} .pied__cabinet img{width:44px;height:44px;flex:none;border-radius:12px;background:#fff;padding:4px;box-shadow:0 0 0 1px var(--ligne)} /* images en : l'enveloppe ne doit pas casser les hauteurs à 100 % (17/09) */ picture{display:contents} /* la carte « Prendre rendez-vous » de l'accueil ne colle plus au défilement : elle passait sous les photos d'accès */ @media (min-width:980px){.venir .rdv{position:relative;top:auto}} @media (min-width:560px){.galerie--3{grid-template-columns:repeat(3,minmax(0,1fr))}} /* en-tête avec fiche : le titre en haut, la photo dessous, la fiche à droite sur toute la hauteur (17/09) */ .page-tete__grille.avec-photo{grid-template-areas:"texte" "fiche" "photo";align-items:start} .avec-photo>.page-tete__texte{grid-area:texte} .avec-photo>.fiche{grid-area:fiche} .avec-photo>.page-photo{grid-area:photo;margin:0} @media (min-width:980px){ .page-tete__grille.avec-fiche.avec-photo{grid-template-areas:"texte fiche" "photo fiche";row-gap:40px} .avec-photo>.page-photo{aspect-ratio:16/10} .avec-photo>.fiche{position:sticky;top:calc(var(--entete) + 24px)} } /* ====================================================================== Animations premium (17/09). Uniquement transform, clip-path et opacité (fluide, sans recalcul de mise en page). Tout est coupé si l'appareil demande moins de mouvement. ====================================================================== */ /* 1. Photos : un rideau qui s'ouvre, l'image qui se pose (léger dézoom) */ .page-photo{--r-photo:28px}.seance__photo{--r-photo:28px}.cadre__photo{--r-photo:28px}.page-tete__portrait{--r-photo:28px} .qui__portrait{--r-photo:var(--r)}.venir__acces figure{--r-photo:22px}.galerie figure{--r-photo:18px} .js .revele{clip-path:inset(7% 7% 7% 7% round var(--r-photo,24px));transition:clip-path 1.3s cubic-bezier(.16,1,.3,1) var(--delai,0s)} .js .revele img{scale:1.16;transition:scale 1.8s cubic-bezier(.16,1,.3,1) var(--delai,0s)} .js .revele.vu{clip-path:inset(0 0 0 0 round var(--r-photo,24px))} .js .revele.vu img{scale:1} /* au survol des vignettes, l'image avance doucement */ .js .venir__acces .revele.vu img,.js .galerie .revele.vu img{transition:scale .9s cubic-bezier(.16,1,.3,1)} .js .venir__acces .revele.vu:hover img,.js .galerie .revele.vu:hover img{scale:1.05} /* 2. Grands titres : chaque mot monte de sous sa ligne */ .js [data-mots].mots .mot{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .16em;margin:-.12em 0 -.16em} .js [data-mots].mots .mot>span{display:inline-block;translate:0 108%;transition:translate 1s cubic-bezier(.16,1,.3,1)} .js [data-mots].mots-vus .mot>span{translate:0 0} /* 3. La phrase forte de l'accueil : le surlignage se dessine */ .js .phrase-forte span::after{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .45s} .js .phrase-forte.vu span::after{transform:none} /* 4. Boutons rouges : un reflet traverse au survol */ .bouton--rouge{position:relative;overflow:hidden;isolation:isolate} .bouton--rouge::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);translate:-130% 0;transition:translate .9s cubic-bezier(.16,1,.3,1);pointer-events:none} .bouton--rouge:hover::after{translate:130% 0} /* 5. Flèches : elles avancent au survol */ .rond-fleche svg,.pm-motif__fleche svg{transition:translate .35s cubic-bezier(.16,1,.3,1)} a:hover .rond-fleche svg{translate:3px 0} /* 6. Questions fréquentes : la réponse se déplie en douceur (navigateurs récents) */ :root{interpolate-size:allow-keywords} .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.16,1,.3,1),content-visibility .45s allow-discrete} .faq details[open]::details-content{block-size:auto} .faq summary::after{transition:rotate .35s cubic-bezier(.16,1,.3,1)} .faq details[open] summary::after{rotate:180deg} @media (prefers-reduced-motion:no-preference){ /* 7. La carte « 1 h · 60 € » de l'accueil flotte très légèrement */ .carte-flottante{animation:flotte 7s ease-in-out 1.5s infinite} @keyframes flotte{50%{translate:0 -7px}} /* 8. Grandes photos : léger effet de profondeur au défilement (navigateurs qui le permettent) */ @supports (animation-timeline:view()){ .page-photo.vu img,.seance__photo.vu img{scale:1.08;animation:profondeur linear both;animation-timeline:view();animation-range:cover 0% cover 100%} @keyframes profondeur{from{translate:0 -3.5%}to{translate:0 3.5%}} } } @media (prefers-reduced-motion:reduce){ .js .revele{clip-path:none}.js .revele img{scale:1} .js .phrase-forte span::after{transform:none} .bouton--rouge::after{display:none} } /* bandeau « Prendre rendez-vous » en fin de page (17/09) : bleu nuit, équilibré, décor contenu dans la carte */ .rdv.rdv--seul{position:relative;top:auto;display:grid;gap:28px;align-items:center;background:var(--encre);color:#fff;box-shadow:0 30px 60px -30px rgba(var(--encre-rvb),.55);padding:clamp(32px,5vw,64px);overflow:hidden;isolation:isolate} .rdv--seul::after{width:420px;height:420px;right:-140px;top:-220px;background:rgba(255,255,255,.05);z-index:-1} .rdv--seul::before{content:"";position:absolute;z-index:-1;width:260px;height:260px;border-radius:50%;background:var(--rouge);opacity:.16;left:-110px;bottom:-150px} .rdv--seul>*{z-index:auto} .rdv--seul .pastille{background:rgba(255,255,255,.1)!important;color:#fff} .rdv--seul h3{color:#fff;margin:16px 0 10px;max-width:none} .rdv__sous{margin:0;color:rgba(255,255,255,.72);max-width:28em} .rdv__droite{display:grid;gap:18px} .rdv--seul .rdv__num{color:#fff;margin:0;font-size:clamp(2rem,4.2vw,3rem)} .rdv--seul .rdv__num:hover{color:var(--rouge-pale)} .rdv--seul .rdv__actions{grid-template-columns:1fr 1fr;min-width:0} .rdv--seul .bouton--clair{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)} .rdv--seul .bouton--clair:hover{background:rgba(255,255,255,.08)} @media (min-width:980px){ .rdv.rdv--seul{grid-template-columns:minmax(0,1fr) auto;gap:64px;padding:64px 72px} .rdv--seul .rdv__droite{min-width:360px} } /* « Qui je suis » de l'accueil, recomposé (17/09) : portrait + citation à gauche, texte + dates à droite, sans vide */ .qui.qui--v2{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);grid-template-rows:none} .qui--v2 .qui__carte{grid-row:auto} .qui__visuel{position:relative} .qui--v2 .qui__portrait{aspect-ratio:4/5;border-radius:var(--r)} .qui--v2 .qui__citation{position:relative;margin:-72px 16px 0!important;padding:26px 28px;gap:14px;z-index:2;box-shadow:0 24px 48px -24px rgba(var(--rouge-2-rvb),.55)} .qui--v2 .qui__citation svg{width:28px;height:28px} .qui--v2 .qui__citation blockquote{font-size:clamp(1.4rem,2.2vw,1.85rem)} .qui__droite{display:grid;gap:16px;align-content:center} @media (min-width:700px){.qui--v2 .jalons{grid-template-columns:1fr 1fr}.qui--v2 .jalon{flex-direction:column;gap:8px}} @media (min-width:980px){ .qui.qui--v2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center} .qui--v2 .qui__portrait{aspect-ratio:4/5} .qui--v2 .qui__citation{position:absolute;left:-28px;right:auto;bottom:-28px;margin:0!important;max-width:78%} .qui--v2 .qui__carte{grid-row:auto;padding:52px 56px 48px} .qui__visuel{margin:0 0 28px 28px} } /* cascade d'apparition pour la grille « Ce qui vous amène » (17/09) */ .pm2__grille>li{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)} .panneau.ouvert .pm2__grille>li{opacity:1;transform:none} .panneau.ouvert .pm2__grille>li:nth-child(2){transition-delay:.04s}.panneau.ouvert .pm2__grille>li:nth-child(3){transition-delay:.08s}.panneau.ouvert .pm2__grille>li:nth-child(4){transition-delay:.12s}.panneau.ouvert .pm2__grille>li:nth-child(5){transition-delay:.16s}.panneau.ouvert .pm2__grille>li:nth-child(6){transition-delay:.2s} /* ================= Bienfaits attendus, dans la fiche des soins (17/09) ================= */ .bienfaits{margin:22px 0 4px;padding-top:20px;border-top:1px solid var(--ligne)} .bienfaits__titre{margin:0 0 12px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--encre-3)} .bienfaits__renvoi{color:var(--rouge);text-decoration:none;margin-left:2px} .bienfaits__liste{list-style:none;margin:0;padding:0;display:grid;gap:10px} .bienfaits__liste li{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem;line-height:1.4;color:var(--encre)} .bienfaits__coche{flex:none;width:22px;height:22px;border-radius:50%;background:var(--eau);color:var(--eau-texte);display:grid;place-items:center;margin-top:-1px} .bienfaits__coche svg{width:13px;height:13px} .bienfaits__note{margin:14px 0 0;font-size:.75rem;line-height:1.45;color:var(--encre-3)} /* les coches se dessinent l'une après l'autre quand la fiche apparaît */ .js .fiche .bienfaits__liste li{opacity:0;translate:-6px 0;transition:opacity .5s ease,translate .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(.35s + var(--i,0) * .12s)} .js .fiche.vu .bienfaits__liste li{opacity:1;translate:0 0} .js .fiche .bienfaits__coche path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .5s ease;transition-delay:calc(.55s + var(--i,0) * .12s)} .js .fiche.vu .bienfaits__coche path{stroke-dashoffset:0} .bienfaits__liste li .bienfaits__coche path{transition-delay:inherit} /* ================= Déroulé animé des séances (17/09) ================= */ .deroule{list-style:none;margin:30px 0 8px;padding:0;position:relative;--progres:0} .deroule::before,.deroule::after{content:"";position:absolute;left:23px;top:24px;bottom:40px;width:2px;border-radius:2px} .deroule::before{background:var(--ligne)} .deroule::after{background:var(--rouge);transform-origin:top;transform:scaleY(var(--progres));transition:transform .15s linear} .deroule__etape{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:22px;padding-bottom:32px} .deroule__etape:last-child{padding-bottom:0} .deroule__num{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--ligne);display:grid;place-items:center;font-family:var(--serif);font-size:1.3rem;line-height:1;color:var(--encre-3);transition:background-color .5s ease,color .5s ease,box-shadow .5s ease,scale .5s cubic-bezier(.16,1,.3,1)} .deroule__num::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rouge);opacity:0;pointer-events:none} .deroule__etape.atteinte .deroule__num{background:var(--rouge);color:#fff;box-shadow:0 0 0 6px var(--rouge-pale)} .deroule__etape.active .deroule__num{scale:1.06} .deroule__etape.active .deroule__num::after{animation:onde 2.4s ease-out infinite} @keyframes onde{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}} .deroule__corps{padding-top:8px} .prose .deroule__corps h3,.deroule__corps h3{margin:0 0 8px} .deroule__corps p:last-child{margin-bottom:0} .js .deroule__corps{opacity:.3;translate:0 12px;transition:opacity .7s ease,translate .9s cubic-bezier(.16,1,.3,1)} .js .deroule__etape.atteinte .deroule__corps{opacity:1;translate:0 0} .deroule--accueil{margin-top:0} .deroule--accueil .deroule__corps h3{font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2} .deroule--accueil .deroule__corps p{color:var(--encre-2)} @media (prefers-reduced-motion:reduce){.js .deroule__corps{opacity:1;translate:0 0}.deroule__etape.active .deroule__num::after{animation:none}} /* la ligne de la frise s'arrête au dernier rond */ .deroule::before,.deroule::after{z-index:0} .deroule__etape:last-child::after{content:"";position:absolute;z-index:1;left:18px;top:50px;bottom:-40px;width:12px;background:#fff} /* ================= Tarifs animés (17/09) ================= */ .prose .tarifs{list-style:none;margin:26px 0 22px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .prose .tarifs li{margin:0} .tarif{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px 20px 18px!important;border-radius:20px;background:var(--gris);overflow:hidden} .tarif__cadran{width:46px;height:46px;margin-bottom:10px;rotate:-90deg} .tarif__fond{fill:none;stroke:#fff;stroke-width:5} .tarif__arc{fill:none;stroke:var(--rouge);stroke-width:5;stroke-linecap:round;stroke-dashoffset:calc(var(--tour) * (1 - var(--part)))} .tarif__duree{font-size:.9375rem;font-weight:600;color:var(--encre-2)} .tarif__prix{font-family:var(--serif);font-size:2.3rem;line-height:1.05;color:var(--encre);font-variant-numeric:tabular-nums} .tarif--forfait{background:var(--encre)} .tarif--forfait .tarif__duree{color:rgba(255,255,255,.78)} .tarif--forfait .tarif__prix{color:#fff} .tarif__etiquette{margin-bottom:12px;padding:5px 11px;border-radius:999px;background:var(--rouge);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.04em} .tarif__gain{margin-top:6px;font-size:.8125rem;line-height:1.4;color:rgba(255,255,255,.7)} .prose .tarifs li::marker{content:none} .js .tarifs .tarif{opacity:0;translate:0 14px;transition:opacity .6s ease,translate .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * .1s)} .js .tarifs.vu .tarif{opacity:1;translate:0 0} .js .tarifs .tarif__arc{stroke-dashoffset:var(--tour);transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1);transition-delay:calc(.25s + var(--i,0) * .1s)} .js .tarifs.vu .tarif__arc{stroke-dashoffset:calc(var(--tour) * (1 - var(--part)))} /* ================= Méthode Vodder : le geste en mouvement (17/09) ================= */ .geste{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;margin:28px 0 8px;padding:20px 26px;border-radius:22px;background:var(--eau)} .geste__dessin{width:120px;height:120px;overflow:visible} .geste__piste{fill:none;stroke:rgba(35,97,78,.28);stroke-width:1.5;stroke-dasharray:3 6} .geste__onde{fill:none;stroke:var(--eau-texte);stroke-width:1.5;opacity:0;transform-origin:100px 100px} .geste__main circle{fill:var(--rouge)} .geste__main{transform-origin:100px 100px} .prose .geste__mots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .prose .geste__mots li{margin:0;padding:8px 16px;border-radius:999px;background:#fff;font-family:var(--serif);font-size:1.3rem;line-height:1.1;color:var(--encre-3)} .prose .geste__mots li::marker{content:none} @media (prefers-reduced-motion:no-preference){ .geste__main{animation:tourne 6s cubic-bezier(.45,.05,.55,.95) infinite} .geste__onde{animation:onde-geste 6s ease-out infinite} .geste__onde--2{animation-delay:2s}.geste__onde--3{animation-delay:4s} .prose .geste__mots li{animation:mot-actif 6s ease-in-out infinite} .prose .geste__mots li:nth-child(2){animation-delay:2s}.prose .geste__mots li:nth-child(3){animation-delay:4s} @keyframes tourne{to{rotate:360deg}} @keyframes onde-geste{0%{scale:.6;opacity:0}15%{opacity:.7}60%,100%{scale:2.1;opacity:0}} @keyframes mot-actif{0%,40%,100%{color:var(--encre-3);background:#fff}8%,30%{color:#fff;background:var(--rouge)}} } @media (max-width:520px){.geste{grid-template-columns:1fr;justify-items:center;text-align:center}.prose .geste__mots{justify-content:center}} /* ================= Ce qui vous amène : cartes animées (17/09) ================= */ .prose .raisons{list-style:none;margin:24px 0 26px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .prose .raisons li{margin:0} .prose .raisons li::marker{content:none} .prose .raison{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ligne);color:var(--encre);line-height:1.45;transition:box-shadow .3s ease,translate .4s cubic-bezier(.16,1,.3,1)} .prose .raison:hover{box-shadow:0 18px 36px -22px rgba(var(--encre-rvb),.35),0 0 0 1px var(--ligne);translate:0 -2px} .raison__icone{flex:none;width:40px;height:40px;border-radius:12px;background:var(--rouge-pale);color:var(--rouge);display:grid;place-items:center} .raison__icone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .js .prose .raisons .raison{opacity:0;translate:0 14px;transition:opacity .6s ease,translate .8s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;transition-delay:calc(var(--i,0) * .12s)} .js .prose .raisons.vu .raison{opacity:1;translate:0 0} .js .raisons .raison__icone path{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 1.2s ease;transition-delay:calc(.3s + var(--i,0) * .12s)} .js .raisons.vu .raison__icone path{stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){.js .tarifs .tarif,.js .prose .raisons .raison{opacity:1;translate:0 0}.js .tarifs .tarif__arc{stroke-dashoffset:calc(var(--tour) * (1 - var(--part)))}.js .raisons .raison__icone path{stroke-dashoffset:0}} /* retouches après captures (17/09) : forfait en bandeau, cartes compactes sur téléphone, geste plus grand */ .tarifs--4 .tarif--forfait{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px;align-items:center} .tarifs--4 .tarif--forfait .tarif__etiquette{margin:0;grid-row:1/3} .tarifs--4 .tarif--forfait .tarif__duree{grid-column:2;grid-row:1} .tarifs--4 .tarif--forfait .tarif__gain{grid-column:2;grid-row:2;margin:0} .tarifs--4 .tarif--forfait .tarif__prix{grid-column:3;grid-row:1/3} @media (max-width:560px){ .prose .tarifs--4{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .tarifs--4 .tarif:not(.tarif--forfait){padding:14px 12px 12px!important;border-radius:16px} .tarifs--4 .tarif:not(.tarif--forfait) .tarif__cadran{width:32px;height:32px;margin-bottom:6px} .tarifs--4 .tarif:not(.tarif--forfait) .tarif__prix{font-size:1.55rem} .tarifs--4 .tarif:not(.tarif--forfait) .tarif__duree{font-size:.8125rem} .tarifs--4 .tarif--forfait{grid-template-columns:minmax(0,1fr) auto;row-gap:4px} .tarifs--4 .tarif--forfait .tarif__etiquette{grid-row:1;grid-column:1;justify-self:start;margin-bottom:6px} .tarifs--4 .tarif--forfait .tarif__duree{grid-column:1;grid-row:2} .tarifs--4 .tarif--forfait .tarif__gain{grid-column:1/-1;grid-row:3} .tarifs--4 .tarif--forfait .tarif__prix{grid-column:2;grid-row:1/3;font-size:1.9rem} } .geste{grid-template-columns:170px minmax(0,1fr);padding:22px 30px} .geste__dessin{width:170px;height:170px} .geste__piste{stroke-width:2} .geste__onde{stroke-width:2} @media (max-width:520px){.geste{grid-template-columns:1fr}} .geste__centre{fill:var(--eau-texte);opacity:.5} @keyframes onde-geste{0%{scale:.3;opacity:0}15%{opacity:.8}60%,100%{scale:1.75;opacity:0}} /* sous-titre sous le H1 des pages de soin (17/09) */ .page-tete__sous{margin:18px 0 0;max-width:34em;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;color:var(--encre-2)} /* cartes de tarifs : mêmes blancs que le reste du site, un seul accent rouge (17/09) */ .tarif{background:#fff!important;box-shadow:0 0 0 1px var(--ligne)} .tarif__fond{stroke:rgba(var(--encre-rvb),.1)} .tarif__duree{color:var(--encre-3);font-weight:500} .tarif--forfait{background:var(--encre)!important;box-shadow:none} .tarif--forfait .tarif__duree{color:rgba(255,255,255,.8);font-weight:600} /* ================= Carte du cabinet et liens Google (17/09) ================= */ .carte-lieu{margin:24px 0 8px} .carte-lieu__ouvrir{width:100%;min-height:200px;display:flex;align-items:center;gap:16px;padding:22px 24px;border:0;border-radius:22px;cursor:pointer;text-align:left;font-family:var(--sans);background:var(--eau);color:var(--encre);transition:box-shadow .3s ease,translate .3s ease} .carte-lieu__ouvrir:hover{box-shadow:0 18px 36px -24px rgba(var(--encre-rvb),.4);translate:0 -2px} .carte-lieu__fond{flex:none;width:56px;height:56px;border-radius:18px;background:#fff;color:var(--rouge);display:grid;place-items:center} .carte-lieu__fond svg{width:26px;height:26px} .carte-lieu__texte{display:grid;gap:4px} .carte-lieu__texte strong{font-family:var(--serif);font-size:1.35rem;font-weight:400} .carte-lieu__texte span{font-size:.9375rem;color:var(--encre-2)} .carte-lieu__cadre{width:100%;height:340px;border:0;border-radius:22px;display:block;background:var(--eau)} .carte-lieu__note{margin:10px 0 0;font-size:.8125rem;color:var(--encre-3)} .liens-lieu{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px} .venir__carte .liens-lieu{margin:24px 0 0} .liens-lieu .bouton{box-shadow:inset 0 0 0 1px var(--ligne)} /* un seul tarif : une carte en bandeau plutôt qu'un grand carré vide (17/09) */ .prose .tarifs--1{grid-template-columns:minmax(0,1fr)} .tarifs--1 .tarif{flex-direction:row;align-items:center;gap:20px;padding:18px 24px!important} .tarifs--1 .tarif__cadran{margin:0} .tarifs--1 .tarif__duree{flex:1 1 auto;font-size:1.0625rem} .tarifs--1 .tarif__prix{font-size:2rem} /* trois points par séance, dans la carte des pages « Ce qui vous amène » (17/09) */ .fiche--motif .fiche__liste a{grid-template-rows:auto auto auto;row-gap:6px;padding:18px 0} .fiche--motif .fiche__points{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .fiche__point{font-size:.75rem;line-height:1.25;padding:5px 10px;border-radius:999px;background:var(--eau);color:var(--eau-texte)} .fiche--motif .rond-fleche{grid-row:1/4} .fiche--motif .fiche__liste a:hover .fiche__point{background:#fff}