/* ========================================================================== foubet-therapie.com — feuille de style unique -------------------------------------------------------------------------- Étape 2 de docs/direction-artistique.md §9 : substitution des jetons, correction des contrastes, normalisation des rayons, installation de Newsreader. Aucune valeur en dur hors des jetons ci-dessous et des dimensions de composant explicitement justifiées. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Fonte de titrage — Newsreader, self-hostée Sous-ensemble latin de Google Fonts (SIL OFL). Romain variable 400-500 ; italique statique 400, le seul poids italique employé sur le site. -------------------------------------------------------------------------- */ @font-face{ font-family:'Newsreader'; src:url('/assets/fonts/newsreader-var.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; } @font-face{ font-family:'Newsreader'; src:url('/assets/fonts/newsreader-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } /* -------------------------------------------------------------------------- 1. Jetons — docs/direction-artistique.md §2 -------------------------------------------------------------------------- */ :root{ /* Encre — structure, titres, fonds sombres */ --encre-900:#22303D; --encre-800:#2C3A49; --encre:#37485C; --encre-600:#4A5C71; /* Crème — fonds clairs */ --creme:#F1EFE6; --creme-carte:#E9E6D8; --blanc-casse:#FBFAF5; /* Sauge — accent */ --sauge-900:#414A32; --sauge-texte:#55603F; /* tout texte sauge sur fond clair */ --sauge:#6F7C5A; /* filets, icônes, aplats décoratifs uniquement */ --sauge-clair:#A6B295; /* titrage sur fond encre, 24 px et plus */ --kaki:#B4B99E; /* surtitres sur fond encre : 4,6:1 et plus */ --sauge-voile:rgba(111,124,90,.20); /* Sable — accent secondaire */ --sable:#CBBDA3; /* Texte */ --texte:#39434F; --texte-doux:#5A6470; --texte-inverse:#F1EFE6; --texte-inverse-doux:#BCC3B4; /* Filets */ --filet:rgba(55,72,92,.12); --filet-inverse:rgba(255,255,255,.16); /* Typographie */ --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --t-xs:0.76rem; /* 12.9px — eyebrow, libellés */ --t-sm:0.88rem; /* 15px — légendes, notes */ --t-base:1rem; /* 17px — corps */ --t-lg:1.15rem; /* 19.5px — chapô, intertitres */ --t-xl:1.45rem; /* 24.6px — h3 */ --t-2xl:1.85rem; /* 31.5px — h2 */ --t-3xl:2.6rem; /* 44px — h1 */ --lh-corps:1.65; --lh-titre:1.2; --lh-chapo:1.45; --mesure:34em; /* 68 caractères maximum sur du texte suivi */ /* Espacement — échelle dérivée de 4px */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --e-9:88px; --e-10:120px; /* Rayons */ --r-sm:6px; /* badges, puces */ --r-md:12px; /* cartes, images, encadrés — valeur par défaut */ --r-lg:20px; /* blocs pleine largeur */ --r-pill:999px; /* boutons uniquement */ /* Ombres */ --ombre-1:0 2px 8px rgba(34,48,61,.06); --ombre-2:0 10px 28px rgba(34,48,61,.10); --ombre-3:0 20px 48px rgba(34,48,61,.16); /* Largeur de page */ --max:1120px; } /* -------------------------------------------------------------------------- 1 bis. Jetons complémentaires Valeurs que §2 ne couvre pas encore mais dont le code a besoin. Regroupées ici plutôt que dispersées en dur. À arbitrer et à remonter en §2. -------------------------------------------------------------------------- */ :root{ --blanc:#fff; --creme-voile:rgba(241,239,230,.92); /* fond d'en-tête translucide */ --blanc-voile:rgba(255,255,255,.97); /* bandeau d'adresse sur la carte */ --filet-fort:rgba(55,72,92,.30); /* bordure de bouton fantôme, fond clair */ --filet-inverse-fort:rgba(255,255,255,.50); /* idem, fond sombre */ --encre-voile:rgba(55,72,92,.06); /* survol de bouton fantôme */ --blanc-voile-leger:rgba(255,255,255,.12); --duree:.3s; /* §8 : 300 ms maximum */ --t-titre-section:2.3rem; /* 39px — titre de section sous un surtitre */ } /* -------------------------------------------------------------------------- 2. Base La racine passe à 106.25% pour que 1rem vaille 17px sans imposer une taille absolue : le réglage de taille du navigateur reste respecté. -------------------------------------------------------------------------- */ *{box-sizing:border-box} html{font-size:106.25%;scroll-behavior:smooth} /* l'en-tête collant fait 70px : sans marge de défilement, chaque ancre du sommaire amène le titre visé sous la barre, donc invisible */ [id]{scroll-margin-top:calc(70px + var(--e-5))} body{margin:0;font-family:var(--sans);color:var(--texte);background:var(--creme);line-height:var(--lh-corps);font-size:var(--t-base);-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:var(--lh-titre);color:var(--encre-900);margin:0} p{margin:0 0 1.1em} /* Typographie : titres équilibrés, paragraphes sans mot isolé en dernière ligne (complète les espaces insécables posées dans le HTML). */ h1,h2,h3,h4{text-wrap:balance} p,li,dd,figcaption,summary{text-wrap:pretty} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--e-5)} /* Surtitre et titre de section. Le surtitre était gras et très espacé, le titre fin et à peine plus grand : les deux se disputaient l'œil. Le titre prend du corps (39 px, graisse 500, interlignage serré). */ .eyebrow{margin:0 0 var(--e-3);font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:var(--t-xs);font-weight:600;color:var(--sauge-texte)} .eyebrow + h2{margin-top:0;font-size:clamp(var(--t-xl),3.6vw,var(--t-titre-section));font-weight:500;line-height:1.12;letter-spacing:-.01em} :focus-visible{outline:3px solid var(--sauge-texte);outline-offset:2px;border-radius:var(--r-sm)} .hero :focus-visible,.story :focus-visible,.bandeau-rdv :focus-visible,.pied :focus-visible{outline-color:var(--sable)} /* -------------------------------------------------------------------------- 3. En-tête et navigation -------------------------------------------------------------------------- */ /* Le flou est porté par un pseudo-élément, pas par le header lui-même : backdrop-filter crée un bloc conteneur pour les descendants en position fixed, ce qui écrasait le panneau de navigation mobile à 89 px de haut (il se calculait sur la barre de 70 px au lieu de l'écran). */ header{position:sticky;top:0;z-index:50;background:var(--creme-voile);border-bottom:1px solid var(--filet)} header::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(8px);pointer-events:none} .bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:var(--e-4)} /* La barre est plus large que la colonne de contenu : marque, sept entrées de menu et bouton demandent 1 171 px, la colonne n'en offre que 1 072. */ header .wrap.bar{max-width:1400px} /* Entre 1 240 et 1 439 px, la ligne « Thérapie psycho-corporelle » sous le nom est masquée (comme en mobile) : elle libère 150 px pour les huit entrées. */ @media(max-width:1439px){header .brand small{display:none}} .brand{display:flex;align-items:center;gap:var(--e-3);text-decoration:none;flex:none} .brand img{width:44px;height:44px;flex:none} .brand b{font-family:var(--sans);font-weight:600;letter-spacing:.02em;color:var(--encre);font-size:var(--t-base);line-height:1.15} .brand small{display:block;font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--texte-doux);font-weight:600;margin-top:var(--e-1)} /* La marque ne se laisse pas écraser par la navigation : sans ces deux règles, « Thérapie psycho-corporelle » passait sur trois lignes et débordait de la barre de 70 px. */ .brand span{white-space:nowrap} .btn{display:inline-block;background:var(--encre);color:var(--blanc-casse);text-decoration:none;padding:var(--e-3) var(--e-5);border-radius:var(--r-pill);font-family:var(--sans);font-size:var(--t-sm);font-weight:600;letter-spacing:.02em;transition:background var(--duree),transform var(--duree);border:none;cursor:pointer} .btn:hover{background:var(--encre-800);transform:translateY(-1px)} /* .btn.solid doit rester APRÈS .btn:hover : specificité égale (0,2,0), c'est l'ordre qui décide. Le fond passe de --sauge à --sauge-texte : blanc sur --sauge ne donnait que 4,27, contre 6,42 ici (§1, contraste n°2). */ .btn.solid{background:var(--sauge-texte)} .btn.ghost{background:transparent;color:var(--encre);border:1.5px solid var(--filet-fort)} .btn.ghost:hover{background:var(--encre-voile)} /* §7 impose 44px de cible tactile : le rembourrage compact de l'en-tête donnait 41px. min-height plutôt qu'un rembourrage plus épais, pour ne pas alourdir la barre. */ .nav-cta{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;padding:var(--e-2) var(--e-4)} /* --- Navigation déroulante ------------------------------------------------- Fonctionne sans JavaScript. En bureau les sous-menus s'ouvrent au survol et au focus clavier, en CSS pur. En mobile, le panneau plein écran n'existe que si le script a posé .js sur : sans script, la navigation reste dépliée sous l'en-tête, longue mais entièrement utilisable. -------------------------------------------------------------------------- */ .nav-bouton{display:none} /* n'apparaît que si .js */ .nav-liste{display:flex;align-items:center;gap:var(--e-4);list-style:none;margin:0;padding:0} .nav-groupe{position:relative} .nav a{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--texte-doux);text-decoration:none} .nav-lien{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;border-bottom:1.5px solid transparent} .nav-lien:hover{color:var(--encre);border-color:var(--sauge)} .nav-lien.active,.nav-lien[aria-current="page"]{color:var(--encre);border-color:var(--sauge)} /* chevron des entrées à sous-menu, tracé en CSS : pas d'icône à charger */ .nav-groupe>.nav-lien::after{content:"";width:6px;height:6px;margin-left:var(--e-2);border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)} .nav-sous{position:absolute;top:100%;left:calc(var(--e-4) * -1);min-width:250px;list-style:none;margin:0;padding:var(--e-3) 0;background:var(--blanc-casse);border:1px solid var(--filet);border-radius:var(--r-md);box-shadow:var(--ombre-2);z-index:60;opacity:0;visibility:hidden;transform:translateY(var(--e-1));transition:opacity var(--duree),transform var(--duree),visibility var(--duree)} .nav-groupe:hover>.nav-sous,.nav-groupe:focus-within>.nav-sous{opacity:1;visibility:visible;transform:none} .nav-sous a{display:flex;align-items:center;min-height:44px;padding:0 var(--e-4)} .nav-sous a:hover{color:var(--encre);background:var(--creme-carte)} .nav-sous .nav-pilier{font-weight:600;color:var(--encre);border-bottom:1px solid var(--filet)} /* « Tarifs et rendez-vous » mène à la même page que le bouton « Prendre rendez-vous » posé juste à côté. En barre de bureau le doublon est retiré : marque, six entrées et bouton tiennent alors en 1 023 px, dans une colonne de 1 053 à 1 072 px. L'entrée reste dans le panneau mobile et le pied. */ /* Groupe de boutons. Valeur unifiée : le héros utilisait 14px, les autres 12. */ .actions{display:flex;gap:var(--e-3);flex-wrap:wrap} /* -------------------------------------------------------------------------- 4. Héros Tout le texte du héros prend --texte-inverse : il repose sur une photo, donc sur un fond imprévisible. --texte-inverse-doux y ferait perdre de la marge de contraste, ce qui n'est pas acceptable ici. — accueil uniquement -------------------------------------------------------------------------- */ /* Hauteur d'un écran d'ordinateur portable, comme le site précédent (793 px sur un écran de 900) : 88 % de la fenêtre, plafonné pour les très grands moniteurs. Le haut de la section suivante reste visible sous le bandeau. */ .hero{position:relative;color:var(--blanc-casse);overflow:hidden;isolation:isolate;background:var(--encre-900);padding:0;display:flex;align-items:center;min-height:min(88vh,960px);min-height:min(88svh,960px)} .hero .bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;z-index:0} /* Voile uni : forme imposée par direction-artistique §5, en remplacement des deux dégradés empilés. Un voile unique est la seule forme dont le contraste se calcule, et les text-shadow qui rattrapaient l'ancien réglage sont donc supprimés — un contraste maîtrisé n'a pas besoin d'ombre portée. OPACITÉ : .70, et non le .62 que propose §5. Mesuré sur les pixels de cabinet-strasbourg.jpg composités avec ce voile : à .62 l'eyebrow tombe à 3,54 sur 20,6 % de sa surface, la ligne de mots-clés à 3,84 et le sous-titre à 3,60, pour un seuil de 4,5. À .70 le pire cas remonte à 4,51. §7 impose que tout texte atteigne AA et présente cette règle comme une part du message, pas comme une case à cocher : elle prime sur une valeur d'opacité. Ne pas revenir à .62 sans changer de photo — et sans remesurer. */ .hero .veil{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:1;background:rgba(34,48,61,.70)} .hero .wrap{position:relative;z-index:2;width:100%;padding:var(--e-8) var(--e-5)} .hero .eyebrow{color:var(--texte-inverse)} .hero h1{color:var(--blanc);font-size:clamp(var(--t-2xl),4.6vw,3.4rem);margin:var(--e-4) 0 0;max-width:17ch} .hero .h1-kw{display:block;font-family:var(--sans);font-size:clamp(var(--t-base),1.9vw,var(--t-lg));font-weight:600;letter-spacing:.03em;color:var(--texte-inverse);margin-top:var(--e-4);line-height:var(--lh-chapo)} .hero .lede{font-family:var(--serif);font-style:italic;font-size:clamp(var(--t-lg),2.4vw,var(--t-xl));color:var(--texte-inverse);max-width:36ch;margin:var(--e-4) 0 0;line-height:var(--lh-chapo)} .hero .sub{letter-spacing:.02em;color:var(--texte-inverse);margin:var(--e-4) 0 var(--e-5);font-size:var(--t-sm);max-width:44ch} .hero .actions{gap:var(--e-3)} .hero .btn.solid{background:var(--sauge-texte)} .hero .btn.solid:hover{background:var(--sauge-900)} .hero .btn.ghost{color:var(--blanc);border-color:var(--filet-inverse-fort)} .hero .btn.ghost:hover{background:var(--blanc-voile-leger)} /* -------------------------------------------------------------------------- 5. Bandeau de titre — pages internes -------------------------------------------------------------------------- */ .pagehead{background:var(--encre);color:var(--texte-inverse)} /* Bandeau titre : un vrai bandeau. Fil d'Ariane discret, titre dense et large, chapô en serif italique comme la citation de l'accueil. */ .pagehead .wrap{padding:var(--e-6) var(--e-5) var(--e-8)} .pagehead .eyebrow{color:var(--kaki)} .pagehead h1{color:var(--blanc);font-size:clamp(var(--t-2xl),5vw,3.1rem);font-weight:500;line-height:1.08;letter-spacing:-.015em;max-width:22ch;margin:0} .pagehead p{color:var(--texte-inverse-doux);max-width:56ch;margin:var(--e-4) 0 0;font-size:var(--t-lg);line-height:var(--lh-chapo)} .pagehead .chapo{font-family:var(--serif);font-style:italic;font-size:clamp(var(--t-lg),2.2vw,var(--t-xl));color:var(--texte-inverse);max-width:46ch;margin:var(--e-5) 0 0} .pagehead .faits{margin-top:var(--e-6)} /* Bandeau titre avec photo — pages d'entrée. Même principe que le héros de l'accueil : photo en fond, voile uni à .70 (seuil AA démontré pour le texte clair sur n'importe quelle photo), et tout le texte en --texte-inverse ou blanc. Le fil d'Ariane repasse donc du ton doux au ton clair. */ .pagehead-image{position:relative;overflow:hidden;isolation:isolate;background:var(--encre-900)} .pagehead-image .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:0} .pagehead-image .veil{position:absolute;inset:0;z-index:1;background:rgba(34,48,61,.70)} .pagehead-image .wrap{position:relative;z-index:2} .pagehead-image .fil-ariane a,.pagehead-image .fil-ariane li+li::before{color:var(--texte-inverse)} /* Faits posés dans un bandeau photo (/tarifs-et-rendez-vous) : libellés en ton clair, le ton doux ne garantit pas AA sur une photo. */ .pagehead-image .fait .k{color:var(--texte-inverse)} .pagehead-image .bg-stress{object-position:50% 62%} .pagehead-image .bg-cabinet{object-position:50% 46%} /* Cadrage des photos de sous-pages : la zone utile de chaque photo (le phare, le cerf, les mains) reste dans la bande visible du bandeau. */ .pagehead-image .bg-hypervigilance{object-position:50% 40%} .pagehead-image .bg-stress-au-travail{object-position:50% 45%} .pagehead-image .bg-sommeil-et-tension{object-position:50% 60%} .pagehead-image .bg-anxiete-et-corps{object-position:50% 0%} .pagehead-image .bg-traumatisme-et-corps{object-position:50% 65%} .pagehead-image .bg-traumatisme-repete{object-position:50% 60%} .pagehead-image .bg-corps-en-alerte{object-position:40% 35%} .pagehead-image .bg-aidants{object-position:50% 75%} /* Photos retournées (ambulance, funambule) : le sujet, à gauche sur la photo d'origine, serait caché derrière le titre. */ .pagehead-image .bg-miroir{transform:scaleX(-1)} /* -------------------------------------------------------------------------- 6. Sections -------------------------------------------------------------------------- */ section{padding:var(--e-9) 0} /* 6.1 — Présentation (accueil) */ .about{background:var(--creme)} .about .grid{display:flex;flex-wrap:wrap;gap:var(--e-7);align-items:flex-start} .about .grid>*{flex:1 1 380px} figure.portrait{margin:0} figure.portrait img{width:100%;height:auto;aspect-ratio:845/890;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--ombre-3)} /* Citation sous le portrait : serif italique, centrée, bornée à une mesure courte pour tenir en trois lignes équilibrées sous la photo. */ figure.portrait figcaption{margin:var(--e-5) auto 0;max-width:38ch;font-family:var(--serif);font-style:italic;font-size:var(--t-lg);line-height:var(--lh-chapo);color:var(--encre);text-align:center;text-wrap:balance} /* Le texte de présentation dépasse largement le portrait : en bureau, le portrait reste dans le champ pendant la lecture. Pas en mobile, où les blocs s'empilent et où un portrait collant recouvrirait le texte. */ @media(min-width:821px){.about figure.portrait{position:sticky;top:calc(70px + var(--e-6))}} .about h2{margin:0 0 var(--e-5)} .badges{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-5)} .badge{display:inline-flex;align-items:center;gap:var(--e-2);background:var(--creme-carte);border:1px solid var(--filet);border-radius:var(--r-sm);padding:var(--e-2) var(--e-4);font-size:var(--t-sm);font-weight:600;color:var(--encre);letter-spacing:.01em} .badge svg{flex:none} /* 6.2 — Parcours (accueil) */ .story{background:var(--encre);color:var(--texte-inverse)} .story h2{color:var(--blanc)} .story .eyebrow{color:var(--kaki)} .story .grid{display:flex;flex-wrap:wrap;gap:var(--e-7)} .story .grid>*{flex:1 1 380px} .story p{color:var(--texte-inverse-doux)} .story .col h2{margin:0 0 var(--e-5)} /* En bureau, les deux colonnes partagent les mêmes rangées (surtitre, titre, texte) : le texte de droite commence à la hauteur de celui de gauche, même quand les deux titres n'ont pas le même nombre de lignes. */ @media(min-width:821px){ .story .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-7);row-gap:0} .story .col{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start} } .col-texte p:last-child{margin-bottom:0} /* Même couleur que les paragraphes voisins ; seule l'amorce en gras ressort, comme un intertitre. */ .check{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-4)} .check li{font-size:var(--t-base);color:var(--texte-inverse-doux)} .check strong{color:var(--blanc);font-weight:600} .check svg{flex:none;margin-top:var(--e-1)} /* 6.3 — Déroulé, cartes */ .approach{background:var(--creme)} .lead-in{max-width:var(--mesure)} .lead-in h2{margin:0} .cards{display:flex;flex-wrap:wrap;gap:var(--e-5);margin-top:var(--e-7)} .cards>.card{flex:1 1 240px} .card{background:var(--blanc-casse);border:1px solid var(--filet);border-radius:var(--r-md);padding:var(--e-6) var(--e-5);box-shadow:var(--ombre-1)} .card .num{font-family:var(--serif);font-size:var(--t-sm);color:var(--sauge-texte);letter-spacing:.14em} .card h3{font-size:var(--t-lg);margin:var(--e-2) 0 var(--e-3)} .card p{font-size:var(--t-sm);color:var(--texte-doux);margin:0} /* 6.4 — Bandeau infos pratiques */ .practical{margin-top:var(--e-7);background:var(--encre);color:var(--texte-inverse);border-radius:var(--r-md);padding:var(--e-6);display:flex;flex-wrap:wrap;gap:var(--e-4) var(--e-7);align-items:center;justify-content:space-between} .practical .facts{display:flex;flex-wrap:wrap} .practical .fact{min-width:0;margin:var(--e-2) var(--e-7) var(--e-2) 0} .practical .fact{display:flex;flex-direction:column;gap:var(--e-1)} .practical .cta-call{white-space:nowrap} /* 6.6 — Contact, carte, coordonnées */ .contact{background:var(--encre);color:var(--texte-inverse)} .contact h2{color:var(--blanc);font-size:clamp(var(--t-xl),3.4vw,var(--t-2xl))} .contact .eyebrow{color:var(--kaki)} .contact .grid{display:flex;flex-wrap:wrap;gap:var(--e-7);align-items:center;margin-top:var(--e-3)} .contact .grid>*{flex:1 1 380px} .mapcard{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--ombre-2);background:var(--creme-carte)} .mapcard iframe{display:block;width:100%;height:330px;border:0} .mapcard .addr{background:var(--blanc-voile);padding:var(--e-3) var(--e-4);font-size:var(--t-sm);color:var(--texte);display:flex;justify-content:space-between;align-items:center;gap:var(--e-3)} .mapcard .addr a{color:var(--encre);font-weight:600;text-decoration:none;white-space:nowrap;border-bottom:1.5px solid var(--sauge)} .clist{list-style:none;margin:0 0 var(--e-6);padding:0;display:grid;gap:var(--e-5)} .clist li{display:flex;gap:var(--e-4);align-items:flex-start} .clist .ic{width:42px;height:42px;border-radius:50%;background:var(--sauge-voile);display:grid;place-items:center;flex:none} .clist .k{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.15em;color:var(--texte-inverse-doux);font-weight:600} .clist .v{font-size:var(--t-lg);color:var(--texte-inverse)} .clist a{color:var(--texte-inverse);text-decoration:none;border-bottom:1px solid var(--sauge-clair)} /* Bouton fantôme sur fond sombre. Même idiome que .hero .btn.ghost. */ .contact .btn.ghost{color:var(--blanc);border-color:var(--filet-inverse-fort)} /* 6.7 — Mentions légales (accueil) */ .legal{background:var(--creme);padding:var(--e-8) 0} .legal h2{font-size:var(--t-lg);margin-bottom:var(--e-4)} .legal .box{max-width:var(--mesure);font-size:var(--t-sm);color:var(--texte-doux);line-height:1.7} .legal .box p{margin:0 0 var(--e-3)} /* 6.8 — Le cabinet (contact) */ .two-photo{display:flex;flex-wrap:wrap;gap:var(--e-7);align-items:center} .two-photo>*{flex:1 1 360px} .two-photo h2{margin:0 0 var(--e-4)} .cabphoto{margin:0} .cabphoto img{width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--ombre-3)} /* bloc portrait suivi du corps d'article : une respiration, sans quoi le sommaire colle à la photo (/qui-suis-je) */ .two-photo + .article{margin-top:var(--e-8)} /* 6.9 — Cartes de questions (faq) */ .faqcards>.card{flex:1 1 300px} .faqcards .card h2{font-size:var(--t-lg);margin:0 0 var(--e-3);line-height:1.3} /* -------------------------------------------------------------------------- 6.10 — Pages intérieures Même grammaire que l'accueil : blocs pleine largeur alternant beige et bleu, blocs à cartes en beige, dernier bloc beige avant le pied. Chaque bloc est une grille : titre à gauche (collant en bureau), texte à droite à la mesure de lecture. Plusieurs grilles dans un même bloc sont séparées par un filet. Les sections courtes deviennent des .info-bloc. -------------------------------------------------------------------------- */ .page-bloc{background:var(--creme);padding:var(--e-8) 0} .page-bloc-encre{background:var(--encre);color:var(--texte-inverse-doux)} .page-bloc-encre h2,.page-bloc-encre strong{color:var(--blanc)} .page-bloc-encre .eyebrow,.bandeau-rdv .eyebrow{color:var(--kaki)} .page-bloc-encre .page-texte a{color:var(--blanc);text-decoration-color:var(--sauge-clair)} .page-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--e-5) var(--e-8);align-items:start} .page-grille+.page-grille{margin-top:var(--e-8);padding-top:var(--e-8);border-top:1px solid var(--filet)} .page-bloc-encre .page-grille+.page-grille{border-top-color:var(--filet-inverse)} .page-titre h2,.titre-section{font-size:clamp(var(--t-xl),3.6vw,var(--t-titre-section));font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0} .titre-section{margin-bottom:var(--e-4)} .page-titre .sommaire{margin:var(--e-6) 0 0} .page-texte{max-width:var(--mesure)} .page-texte>:first-child{margin-top:0} .page-texte>:last-child{margin-bottom:0} @media(min-width:821px){.page-titre{position:sticky;top:calc(70px + var(--e-6))}} /* Petit bloc d'information complémentaire, beige, liseré sauge. Même rendu sur fond beige et sur fond bleu : ses couleurs sont fixées ici. */ .info-bloc,.temoin-cadre{margin-top:var(--e-6);background:var(--creme-carte);border-left:4px solid var(--sauge);border-radius:var(--r-md);padding:var(--e-5) var(--e-6);font-size:var(--t-sm);color:var(--texte);max-width:var(--mesure)} .info-bloc p,.temoin-cadre p{margin:0} .info-bloc p+p{margin-top:var(--e-3)} .info-bloc .info-bloc-titre{font-family:var(--serif);font-size:var(--t-lg);font-weight:500;line-height:var(--lh-titre);color:var(--encre-900);margin:0 0 var(--e-3)} .info-bloc strong,.temoin-cadre strong{color:var(--encre)} .page-bloc-encre .info-bloc a,.page-bloc-encre .temoin-cadre a{color:var(--encre);text-decoration-color:var(--sauge)} /* Pages filles d'une page d'entrée : en cartes, comme sur l'accueil. */ .page-texte .liste-formes{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--e-4)} .page-texte .liste-formes li{border-left:0;padding:var(--e-5);background:var(--blanc-casse);border:1px solid var(--filet);border-radius:var(--r-md);font-size:var(--t-sm);color:var(--texte-doux)} .page-texte .liste-formes a{display:block;margin-bottom:var(--e-2);text-decoration:none} .page-texte .liste-formes strong{font-family:var(--serif);font-size:var(--t-lg);font-weight:500;line-height:var(--lh-titre);color:var(--encre-900)} .page-texte .liste-formes a:hover strong{text-decoration:underline;text-decoration-color:var(--sauge)} /* Fil d'Ariane — obligatoire en niveau 2 et 3. Posé dans .pagehead, donc sur fond encre : les jetons inverses s'imposent. */ .fil-ariane{margin:0 0 var(--e-6)} .fil-ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);list-style:none;margin:0;padding:0;font-size:var(--t-xs)} .fil-ariane li{display:flex;align-items:center;gap:var(--e-2)} .fil-ariane li+li::before{content:"›";color:var(--texte-inverse-doux)} .fil-ariane a{display:inline-flex;align-items:center;min-height:var(--e-5);color:var(--texte-inverse-doux);text-decoration:none;border-bottom:1px solid transparent} .fil-ariane a:hover{color:var(--texte-inverse);border-bottom-color:var(--sauge-clair)} .fil-ariane [aria-current]{display:inline-flex;align-items:center;min-height:var(--e-5);color:var(--texte-inverse)} /* Corps d'article — mesure de lecture bornée à 68 caractères */ .article{max-width:var(--mesure)} .article h2{font-size:var(--t-2xl);margin:var(--e-8) 0 var(--e-4)} .article h3{font-size:var(--t-lg);margin:var(--e-6) 0 var(--e-3)} .article>:first-child{margin-top:0} .article ul{margin:0 0 1.1em;padding-left:var(--e-5);display:grid;gap:var(--e-2)} .chapo{font-size:var(--t-lg);line-height:var(--lh-chapo);color:var(--texte-inverse-doux);max-width:56ch;margin:var(--e-4) 0 0} /* Sommaire ancré — au-delà de 800 mots */ .sommaire{background:var(--blanc-casse);border:1px solid var(--filet);border-radius:var(--r-md);padding:var(--e-5) var(--e-6);margin:0 0 var(--e-7);max-width:var(--mesure)} .sommaire-titre{font-family:var(--sans);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.15em;font-weight:600;color:var(--sauge-texte);margin:0 0 var(--e-2)} .sommaire ol{margin:0;padding-left:var(--e-5);display:grid} .sommaire a{display:inline-block;padding:var(--e-2) 0;color:var(--texte);text-decoration:none;border-bottom:1px solid transparent} .sommaire a:hover{border-bottom-color:var(--sauge)} /* Liste du bloc « ce que vous vivez peut-être ». Pas de puce ronde : un filet sauge et beaucoup d'air, pour que chaque description ait le temps d'être reconnue. C'est le bloc qui déclenche l'appel (seo-local §5). */ .liste-vecu{list-style:none;margin:0 0 1.1em;padding:0;display:grid;gap:var(--e-4)} .liste-vecu li{position:relative;padding-left:var(--e-5)} .liste-vecu li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--sauge)} /* Liste des pages filles sur une page pilier */ .liste-formes{list-style:none;margin:0 0 1.1em;padding:0;display:grid;gap:var(--e-3)} .liste-formes li{padding-left:var(--e-5);border-left:2px solid var(--filet)} .liste-formes strong{color:var(--encre)} /* Citation — phrase-clé, serif italique, filet sauge */ .citation{margin:var(--e-6) 0;padding-left:var(--e-5);border-left:3px solid var(--sauge);font-family:var(--serif);font-style:italic;font-size:var(--t-lg);line-height:var(--lh-chapo);color:var(--encre);max-width:var(--mesure)} .citation p{margin:0} /* Accordéon —
natif : aucun script, accessible d'origine, et le contenu reste indexable même replié. */ .accordeon{display:grid;gap:var(--e-3);max-width:var(--mesure)} .accordeon details{background:var(--blanc-casse);border:1px solid var(--filet);border-radius:var(--r-md)} .accordeon summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);min-height:44px;padding:var(--e-3) var(--e-5);cursor:pointer;list-style:none} .accordeon summary::-webkit-details-marker{display:none} .accordeon summary h3{font-size:var(--t-lg);margin:0} .accordeon summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--sauge-texte);border-bottom:1.5px solid var(--sauge-texte);transform:translateY(-2px) rotate(45deg);transition:transform var(--duree)} .accordeon details[open] summary::after{transform:translateY(2px) rotate(-135deg)} .accordeon .reponse{padding:0 var(--e-5) var(--e-5)} .accordeon .reponse>:last-child{margin-bottom:0} /* Bandeau rendez-vous — section pleine largeur, source unique appelée par toutes les pages de motif. Remplace la duplication du bloc .practical. */ .bandeau-rdv{background:var(--encre);color:var(--texte-inverse);padding:var(--e-8) 0} /* Composition centrée : titre, faits séparés par des filets verticaux, bouton. Le bouton isolé au bord droit laissait un grand vide au milieu. */ .bandeau-rdv .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--e-6);text-align:center} .bandeau-rdv h2{color:var(--blanc);font-size:clamp(var(--t-xl),3.6vw,var(--t-titre-section));font-weight:500;line-height:1.12;margin:0 0 var(--e-6)} .bandeau-rdv .faits{justify-content:center;gap:var(--e-4) 0} .bandeau-rdv .fait{align-items:center;padding:0 var(--e-6)} .bandeau-rdv .fait+.fait{border-left:1px solid var(--filet-inverse)} .bandeau-rdv .fait .v{font-size:var(--t-lg)} /* .faits est autonome : le bandeau rendez-vous et le bandeau de titre de /tarifs-et-rendez-vous l'emploient tous les deux. Composant de fond encre : ses couleurs sont les jetons inverses. */ .faits{display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-7)} .fait{display:flex;flex-direction:column;gap:var(--e-1)} .practical .fact .k,.fait .k{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.15em;color:var(--texte-inverse-doux);font-weight:600} .practical .fact .v,.fait .v{font-size:var(--t-base);color:var(--blanc);font-family:var(--serif)} .bandeau-rdv .actions{flex:none;justify-content:center} /* Motifs liés — l'organe de maillage interne le plus rentable du site. Bloc de fin de section, et non section autonome : deux sections crème consécutives empileraient 176px de respiration. */ .motifs-lies{margin-top:var(--e-8);padding-top:var(--e-7);border-top:1px solid var(--filet)} /* Quand le bloc ouvre sa section (accueil), la section fournit déjà l'espace : sans cette règle, 225 px de vide et un filet précédaient le surtitre. */ .wrap>.motifs-lies:first-child{margin-top:0;padding-top:0;border-top:0} .cartes-motifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e-5);margin-top:var(--e-6)} .carte-motif{display:flex;flex-direction:column;gap:var(--e-2);background:var(--blanc-casse);border:1px solid var(--filet);border-radius:var(--r-md);padding:var(--e-5);text-decoration:none;transition:border-color var(--duree),box-shadow var(--duree),transform var(--duree)} .carte-motif:hover{border-color:var(--sauge);box-shadow:var(--ombre-2);transform:translateY(-2px)} .carte-motif h3{font-size:var(--t-lg);margin:0} .carte-motif p{font-size:var(--t-sm);color:var(--texte-doux);margin:0} .carte-motif .fleche{margin-top:auto;padding-top:var(--e-2);font-size:var(--t-sm);font-weight:600;color:var(--sauge-texte)} /* Phrase de renvoi vers le silo des publics, placée après les cartes */ .motifs-lies>p:not(.eyebrow){margin:var(--e-5) 0 0;font-size:var(--t-sm);color:var(--texte-doux);max-width:var(--mesure)} /* Témoin de cadre — mention de non-substitution, obligatoire en bas de chaque page de motif (positionnement.md §1). Version condensée de .frame. */ .temoin-cadre{background:var(--creme-carte);border-left:4px solid var(--sauge);border-radius:var(--r-md);padding:var(--e-5);max-width:var(--mesure);font-size:var(--t-sm);color:var(--texte)} .temoin-cadre p{margin:0} .temoin-cadre strong{color:var(--encre)} /* -------------------------------------------------------------------------- 6.11 — Réservation en ligne (/contact uniquement) Cal.com intégré en