/* ========================================================================== THÈME « tacadence-v2026 » — Ta Cadence Naturopathie, fertilité, cycle féminin et périnatalité (Juliane). Direction : « la cadence, pas le chronomètre » — sortir du comptage anxieux (tests, calendriers) pour retrouver un rythme propre. Registre intime, à un public souvent en situation de fragilité : aucune promesse, aucun compteur, aucune urgence. ── État au 11/08/2026 ──────────────────────────────────────────────────── Étapes 3 à 5 de la routine (docs/CLIENTS.md, phase 4) : polices, jetons, composants et les six styles de section. Restent les surcharges de gabarit, s'il en faut — et la recette, qui est la phase 5. La source fait foi : clients/dev-tacadence/.internal/graphiques/maquettes/ maquette.css, validée avec la cliente. Les valeurs sont RECOPIÉES, pas réinterprétées — deux fichiers qui divergent, c'est une maquette qui ment. ── Ce qui a été ADAPTÉ, et non copié ───────────────────────────────────── La maquette invente des classes que le socle n'émet jamais. Les recopier telles quelles aurait donné un thème qui ne peint rien sur le vrai site, sans que rien ne le signale. Correspondances retenues : .tc-list → .section-intro/-outro ul, .gap-page-intro/-outro ul, .gap-legal-content ul (les vrais conteneurs de texte riche du socle) .tc-center → porté par les styles eux-mêmes (.t-hero-clair, .t-hero-image, .t-nuit) : le socle n'émet aucune classe de centrage .tc-hero-actions → .section-heading-cta .tc-cookie-* → .gap-cookie-* address.tc-clean → address .tc-price, .tc-mt-*, .tc-icon, .tc-eyebrow-center → SUPPRIMÉES, aucun émetteur côté socle Ne sont pas reprises non plus : les règles `.has-bg-image` / `.bg-overlay` et le repli mobile du fond fixe. gap.css les porte déjà et le thème arrive APRÈS lui ; la maquette devait les redéclarer parce qu'elle ne charge pas gap.css. Deux sources pour une même règle, c'est une divergence en attente. ── Ce qu'il ne faut pas faire ici ──────────────────────────────────────── · Ne JAMAIS redéclarer les --gap-* de marque : dépréciés (un « rouge » qui contient du bleu est un piège de relecture). · Les visuels sont des MÉDIAS de l'instance, jamais un background-image de thème : sinon « je clique sur l'image et je la remplace » devient faux. · Icônes : App\Core\Icon (SVG Feather, currentColor), jamais un émoji. ========================================================================== */ /* ========================================================================== POLICES — livrées par la graphiste le 07/08/2026, toutes deux sous licence SIL Open Font License 1.1 : auto-hébergement autorisé, rien à acheter. Converties en WOFF2 et sous-classées par plage Unicode (232 ko au total). Auto-hébergées, jamais un CDN : la CSP les refuserait, et une police tierce fait fuiter l'adresse IP de chaque visiteuse — ce qui, sur un site de fertilité et de périnatalité, n'est pas une donnée anodine. ⚠️ DEUX PIÈGES DE CETTE PAIRE, tous deux invisibles à la relecture du code : 1. Instrument Serif n'a QU'UNE graisse : 400. Tout titre qui demande 600 ou 700 déclenche un faux gras fabriqué par le navigateur. Les petits titres passent donc en Work Sans 600 — voir --font-body. 2. Elle a en revanche une VRAIE italique dessinée. C'est la seule variation qu'elle autorise, et c'est ce qui rend l'emphase possible dans un titre (charte §03, arbitrée avec la cliente le 09/08). Les `font-synthesis` plus bas interdisent au navigateur d'en inventer une si un fichier venait à manquer : mieux vaut un titre droit qu'un titre faux. ========================================================================== */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/worksans-var-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: 'Work Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/worksans-var-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: 'Work Sans'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/worksans-italic-var-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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/instrumentserif-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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/instrumentserif-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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/instrumentserif-italic-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; } /* ========================================================================== JETONS — la palette de la graphiste, relevée dans SES fichiers (logo et illustrations SVG de .internal/charte/livraison-graphiste/). Jetons de RÔLE uniquement. Ses noms de couleurs (« Vert », « Bleu »…) restent en commentaire : ils servent à parler avec elle, pas à coder — et son « Bleu » est un vert d'eau, ce qui suffit à expliquer la règle. ========================================================================== */ :root{ /* Marqueur : permet de vérifier que le thème est bien chargé. */ --gap-theme: "tacadence-v2026"; --color-primary: #475645; /* « Vert » de la charte (sauge) */ --color-primary-hover: #333F2E; /* assombri — hors charte, dérivé pour le survol */ --color-secondary: #A72929; /* « Bordeaux » — couleur d'ACTION */ --color-secondary-hover: #8E2222; /* assombri (8,74:1) — dérivé pour le survol */ /* ⚠️ Corail : DÉCORATIF, ou texte sur fond sombre UNIQUEMENT. Sur Papier il tombe à 1,9:1 — illisible. La charte en fait aussi une couleur rare : « un aplat de corail perdrait sa force à être partout ». */ --color-accent: #FF9C7B; --color-ink: #1D2419; /* Encre */ --color-surface: #FAF9F5; /* Papier */ --color-surface-alt: #FEFBF9; /* Crème — le blanc cassé de son logo, jamais #FFF */ --color-surface-raised: #DFE5DE; /* « Bleu » de la charte (vert d'eau) */ /* ⚠️ Anis : NE PORTE JAMAIS DE TEXTE (1,45:1). Sur fond anis, le secondaire s'écrit en vert, pas en mousse. Fond de section, à doser. */ --color-surface-warm: #E1D27F; /* Brume — ajoutée à la demande de la cliente (09/08/2026). Le seul VRAI bleu de la palette. RÔLE : marquer le contenu FACTUEL (déontologie, moyens de paiement, mutuelles) au milieu d'un site qui parle au registre intime. ⚠️ ENCART CADRÉ UNIQUEMENT, jamais en fond de .page-section. Papier, Crème, Eau et Brume sont quatre tons entre 87 et 97 % de luminosité : en défilement l'œil ne les distingue plus, et un daltonien rouge-vert encore moins. C'est le cadre qui distingue, pas la teinte. */ --color-surface-info: #ECF0F5; --color-border: #E3E1D7; /* Lin */ --color-muted: #5B6355; /* Mousse */ --color-info: #475645; /* = Vert */ --tc-nuit: #1F2E1F; /* fond sombre — plus riche que l'encre, à garder rare */ --tc-border-field: #7C8574; /* Lichen */ --tc-success: #2F7A4A; /* Pousse */ --tc-danger: #B42318; /* Alerte */ --color-flourish-1: var(--color-primary); --color-flourish-2: var(--color-secondary); --color-flourish-3: var(--color-accent); --font-body: 'Work Sans', system-ui, sans-serif; --font-display: 'Instrument Serif', Georgia, serif; --tc-container: 1140px; /* largeur de lecture, reprise de la maquette validée */ --radius: 1rem; /* coins généreux : aucun angle droit dans sa marque */ --radius-sm: .6rem; --shadow-sm: 0 2px 10px rgba(29,36,25,.06); --shadow-md: 0 14px 34px rgba(29,36,25,.10); } /* ========================================================================== GARDE-FOUS TYPOGRAPHIQUES Ils ne « font » rien de visible tant que tout va bien. Ils empêchent le navigateur de FABRIQUER ce que la police n'a pas — un faux gras se remarque, une fausse italique moins, et les deux trahissent la charte. ========================================================================== */ h1, h2, .display-title{ font-synthesis-weight: none; } em, i{ font-synthesis-style: none; } /* L'emphase dans un titre : la seule variation qu'Instrument Serif autorise (charte §03, arbitrée avec la cliente le 09/08/2026). Aucune couleur, aucun soulignement — deux signaux pour une seule emphase, et le lecteur ne sait plus lequel écouter. */ h1 em, h2 em, .display-title em{ font-style: italic; font-weight: 400; } /* ========================================================================== SUR-TITRE — variante C « Italique signature », arbitrée le 11/08/2026. ⚠️ POURQUOI C N'A PAS DE SÉLECTEUR D'ATTRIBUT, et les autres si. La maquette bascule ses quatre variantes avec un mot sur . Le socle ne sait PAS faire ça : rien ne permet à un thème de poser une classe ou un attribut sur (layouts/public.php n'y met que `admin-edit-mode`). Le crochet est arbitré et attend dans la réserve. En attendant, C s'applique par défaut — sans attribut — et les trois autres restent écrites sous [data-eyebrow="…"] : le jour où le crochet existe, elles s'activent SANS ÊTRE RÉÉCRITES. Basculer aujourd'hui coûte une retouche ici ; demain, un réglage. RESET & BASE ========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ font-family: var(--font-body); color: var(--color-ink); background: var(--color-surface); line-height: 1.65; -webkit-font-smoothing: antialiased; margin: 0; } img{ max-width: 100%; height: auto; display: block; } a{ color: var(--color-primary); text-decoration-thickness: 1.5px; text-underline-offset: 2px; transition: color var(--transition); } a:hover{ color: var(--color-primary-hover); } .container{ max-width: min(var(--tc-container), 100% - 2.4rem); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline: 3px solid var(--color-secondary); /* PAS --color-accent : échoue le contraste non textuel (2,04:1) — charte §2.4 */ outline-offset: 2px; border-radius: 4px; } /* ========================================================================== TYPOGRAPHIE — charte §3.3, révisée le 07/08/2026 pour les polices réelles. Partage des rôles, imposé par les fontes elles-mêmes : - **Instrument Serif** (400 uniquement) porte les GRANDS titres — h1, h2, display. C'est une sérif d'affichage à fort contraste : elle vit au-dessus de ~1,6rem et s'étiole en dessous. - **Work Sans** (variable 100-900) porte tout le reste, y compris h3/h4 et les titres de cartes : là, il faut du gras pour hiérarchiser, et Instrument Serif n'en a pas. Aucun titre ne demande 600/700 en Instrument Serif : le navigateur fabriquerait un faux gras (glyphes épaissis mécaniquement). ========================================================================== */ h1, h2{ font-family: var(--font-display); font-weight: 400; line-height: 1.18; letter-spacing: normal; /* pas de resserrement : une sérif n'en a pas besoin (charte §3.3) */ color: var(--color-ink); margin: 0 0 .6rem; } h3, h4{ font-family: var(--font-body); font-weight: 600; line-height: 1.35; color: var(--color-ink); margin: 0 0 .6rem; } h1{ font-size: clamp(2.3rem, 4.6vw, 3.05rem); } h2{ font-size: clamp(1.75rem, 3.3vw, 2.3rem); } h3{ font-size: 1.2rem; } h4{ font-size: 1.05rem; } .display-title{ font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 3.9rem); line-height: 1.1; color: var(--color-ink); } /* HIÉRARCHIE DES TITRES — corrigée le 18/08/2026 (audit de fidélité). Le socle pose `display-title` sur la zone-titre de TOUTE section : le H1 du hero comme le H2 d'une section de contenu. La maquette ne réserve la grande taille (≈3,9rem) qu'au H1 de hero ; ses titres de SECTION sont des

simples à ≈2,3rem. Sans ces règles, tous les H2 de section sortaient à la taille du hero — ~70 % trop gros, la hiérarchie aplatie sur les 7 pages. */ .page-section h2.display-title{ font-size: clamp(1.75rem, 3.3vw, 2.3rem); line-height: 1.18; } /* Le hero de « À propos » n'est pas un grand hero mais un titre modeste posé à côté du portrait : la maquette le bride à ≈2,6rem (style inline). C'est le seul H1 en `t-portrait` ; (0,3,1) l'emporte sur la règle des H2 comme sur la définition de base. */ .page-section.t-portrait h1.display-title{ font-size: clamp(2rem, 3.6vw, 2.6rem); } .lead{ font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--color-muted); max-width: 54ch; } p{ margin: 0 0 1rem; } p:last-child{ margin-bottom: 0; } .section-intro ul, .section-outro ul, .gap-page-intro ul, .gap-page-outro ul, .gap-legal-content ul, .gap-card-text ul{ margin: .8rem 0 1rem; padding-left: 1.3rem; } .section-intro li, .section-outro li, .gap-page-intro li, .gap-page-outro li, .gap-legal-content li{ margin-bottom: .5rem; color: var(--color-ink); } /* Un LIEN dans un texte de contenu. `a{}` plus haut le pose déjà en vert souligné — il n'était donc pas nu. Mais ces textes-là sont en Mousse (`.section-outro`, `.gap-card-text` : color var(--color-muted)), et le vert du lien ne se détache du gris du texte qu'à 1,25:1 — mesuré le 26/08/2026, #475645 sur #5B6355. WCAG demande 3:1 pour qu'une couleur distingue À ELLE SEULE ; ici le soulignement fait le travail, donc rien d'illégal. Mais un lien qui INVITE — « Prends rendez-vous et parlons-en » — n'avait pas le poids d'une invitation dans un thème où toute invitation est une pilule verte. On lui donne la graisse et un peu d'air sous le trait ; on garde le soulignement, seul indicateur non coloré. Même liste de conteneurs que la règle des listes ci-dessus : c'est le vocabulaire des textes riches du thème. `:not(.btn)` épargne les boutons, qui portent déjà leur traitement (et n'ont pas de soulignement). */ .section-intro a:not(.btn), .section-outro a:not(.btn), .gap-page-intro a:not(.btn), .gap-page-outro a:not(.btn), .gap-legal-content a:not(.btn), .gap-card-text a:not(.btn){ font-weight: 600; text-underline-offset: 3px; } /* ========================================================================== SUR-TITRE (eyebrow) — TROIS PROPOSITIONS, à trancher par la cliente -------------------------------------------------------------------------- L'arc générique de la première version ne disait rien de la marque, et son SVG portait #C23A16 EN DUR — une couleur qui n'est dans aucune palette (héritage d'une dérivation abandonnée quand la charte de la graphiste est arrivée). Les trois variantes ci-dessous puisent dans SON vocabulaire : l'amande peinte de `3-Formes/`, la tige des illustrations florales. La variante se choisit par un attribut sur — un seul mot à changer par page, et la planche de style les fait basculer en direct : l'amande, reprise du geste peint filet + graine corail, casse normale Instrument Serif italique, souligné ← recommandée l'existant, pour comparaison Plus aucun fichier SVG : les glyphes sont dessinés en CSS ou masqués sur `currentColor`, donc ils suivent la couleur du texte — y compris sur fond Nuit, où le sur-titre passe au corail. C'est ce que l'arc en dur ne savait pas faire (il fallait un second fichier, `arc-eyebrow-clair.svg`). ========================================================================== */ .section-eyebrow{ display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem; font-family: var(--font-body); font-weight: 600; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary); } .t-nuit .section-eyebrow{ color: var(--color-accent); } /* ── A · ARC (l'existant) ───────────────────────────────────────────────── Masqué sur currentColor plutôt que peint dans le fichier : même dessin, mais il suit enfin la palette. */ [data-eyebrow="arc"] .section-eyebrow::before{ content: ""; display: inline-block; width: 26px; height: 11px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M2,3 Q14,13 26,3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M2,3 Q14,13 26,3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; } /* ── B · PÉTALE ─────────────────────────────────────────────────────────── L'amande de `forme-anis-feuille`, réduite à un glyphe : deux coins ronds opposés, inclinée comme la feuille peinte. Dessinée en CSS, aucun fichier. */ [data-eyebrow="petale"] .section-eyebrow::before{ content: ""; display: inline-block; width: 13px; height: 13px; flex: 0 0 auto; background: currentColor; border-radius: 62% 0 62% 0; transform: rotate(-12deg); } /* ── C · FILET ET GRAINE ────────────────────────────────────────────────── Un trait fin qui s'achève sur une graine corail. Casse normale et non capitales : plus proche du tutoiement, moins « rubrique de magazine ». */ [data-eyebrow="filet"] .section-eyebrow{ text-transform: none; letter-spacing: .01em; font-size: .95rem; gap: .55rem; } [data-eyebrow="filet"] .section-eyebrow::before{ content: ""; display: inline-block; width: 32px; height: 8px; flex: 0 0 auto; background: linear-gradient(currentColor, currentColor) left center / 23px 1.5px no-repeat, radial-gradient(circle 4px at calc(100% - 4px) 50%, var(--color-accent) 98%, transparent 100%); } /* Sur fond Nuit, la graine corail se détache déjà : rien à corriger. */ /* ── D · ITALIQUE SIGNATURE (recommandée) ───────────────────────────────── Aucun glyphe. Le sur-titre passe à l'italique d'Instrument Serif — la SEULE graisse alternative que la police possède (elle n'a pas de gras), donc la seule variation typographique que la charte autorise vraiment. Souligné d'un trait souple repris de la tige des illustrations. Le trait est masqué sur currentColor : il vire au corail sur fond Nuit comme le texte. */ .section-eyebrow{ flex-direction: column; align-items: flex-start; gap: .15rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.35rem; letter-spacing: .005em; text-transform: none; line-height: 1.15; } .section-eyebrow::after{ content: ""; display: block; align-self: stretch; height: 6px; background-color: currentColor; opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1,4.2 Q26,1.2 50,3.4 T99,2.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1,4.2 Q26,1.2 50,3.4 T99,2.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } /* Centré : le hero clair et les titres de section centrés alignent le tout. */ .t-hero-clair .section-eyebrow, .t-hero-image .section-eyebrow, .t-nuit .section-eyebrow{ align-items: center; } .text-muted{ color: var(--color-muted) !important; } .t-nuit .text-muted, .t-nuit .lead{ color: rgba(255,255,255,.82) !important; } /* ========================================================================== RYTHME DES SECTIONS — alternance des fonds (charte §4 : « la respiration ») ========================================================================== */ .page-section{ padding: clamp(3.2rem, 7vw, 5.5rem) 0; } .page-section.section-sm{ padding: clamp(2.2rem, 4.5vw, 3.2rem) 0; } /* En-tête de section CENTRÉ par défaut. Relevé dans la maquette le 17/08/2026 : 17 en-têtes sur 18 portent `tc-center`. Le seul qui ne l'a pas est celui de « Qui suis-je ? », posé à côté du portrait — et celui-là ne passe pas par `.section-heading` (son titre vit dans le bloc, gabarit « Liste »). Centrer ici ne le touche donc pas. Le commentaire d'en-tête de ce fichier disait que `tc-center` était « porté par les styles eux-mêmes (hero, nuit) ». C'était vrai pour ces trois-là et faux pour les quinze autres, restées alignées à gauche alors que la maquette les centre. */ .section-heading{ max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); margin-inline: auto; text-align: center; } /* LONGUEUR DE LIGNE. La maquette pose son texte dans une colonne de 8 sur 12 (parfois 9), centrée — jamais sur toute la largeur du conteneur. Sans cette règle, une liste de huit puces s'étirait sur 1200 px : lisible en diagonale, pas en lecture. Ne vise QUE la colonne unique d'une rangée sans image (`col-12`) : les rangées à deux colonnes (`col-md-6`) et les grilles de cartes (`col`) gardent la pleine largeur, comme dans la maquette. */ @media (min-width: 992px){ .page-section .row.align-items-center > .col-12{ max-width: 66.6667%; margin-inline: auto; } } /* BOUTON D'UN BLOC SANS IMAGE — centré, comme la maquette. Le gabarit `featured` aligne la rangée de boutons à gauche (`d-flex align-items-center`), ce qui convient à un bloc À IMAGE (le bouton suit le texte, dans sa colonne). Mais un bloc SANS image rend une colonne unique `col-12`, centrée : la maquette y pose le bouton dans un `.text-center` (hero clair, « te guider », « fait pour toi si… »). On centre donc la rangée CTA de ce seul cas — les blocs à image, en col-md-6/col-lg-*, ne sont pas touchés. Vaut pour ce thème comme pour les prochains : c'est le motif « section centrée » de la charte. */ .page-section .row.align-items-center > .col-12 > .d-flex.flex-wrap.align-items-center{ justify-content: center; } /* (Le centrage des trois ouvertures est désormais le cas GÉNÉRAL — voir `.section-heading` plus haut. Ces trois sélecteurs n'ont plus d'objet.) */ .section-intro{ margin-top: 1rem; color: var(--color-muted); max-width: 60ch; } .section-outro{ margin-top: 1.6rem; color: var(--color-muted); max-width: 60ch; } /* Les CONCLUSIONS de section sont centrées : c'est le cas des six qui existent dans la maquette, sans exception. */ .section-intro, .section-outro{ margin-inline: auto; text-align: center; } /* La phrase de RELANCE qui ferme quatre sections du « Chemin » — « J'ai envie d'avancer sereinement vers mon projet bébé ». La maquette la pose en vert, italique et demi-gras. Elle se reconnaît à son : c'est la seule marque que le texte riche du socle conserve (les classes sont retirées à l'enregistrement). Les autres conclusions — « Paiement en plusieurs fois possible. » — n'en portent pas et restent donc sobres, comme dans la maquette. */ .section-outro em{ font-style: italic; font-weight: 600; color: var(--color-primary); } .bg-light-custom{ background: var(--color-surface); } .bg-white-custom{ background: var(--color-surface-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } /* .bg-raised-custom : extension du patron .bg-*-custom du socle pour le jeton --color-surface-raised (Eau) — pas d'équivalent existant, charte §4. */ .bg-raised-custom{ background: var(--color-surface-raised); } .bg-dark-custom, .t-nuit{ background: var(--tc-nuit); color: #fff; } .bg-dark-custom h1, .bg-dark-custom h2, .bg-dark-custom h3, .bg-dark-custom p, .bg-dark-custom li, .t-nuit h1, .t-nuit h2, .t-nuit h3, .t-nuit p, .t-nuit li{ color: #fff; } .bg-dark-custom a:not([class*="btn"]), .t-nuit a:not([class*="btn"]){ color: var(--color-accent); } /* ========================================================================== BOUTONS — pilule pleine (charte §4 : « aucun angle droit »). Contour rebasculé sur --color-primary comme silliere-v2026 (gap.css lie l'outline à secondary par défaut ; les deux thèmes le replacent sur l'action fréquente et neutre, pas l'accent rare). ========================================================================== */ .btn-gap-primary, .btn-gap-secondary, .btn-gap-outline, .btn-gap-ghost{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; min-height: 46px; padding: .75rem 1.7rem; font-family: var(--font-body); font-weight: 600; font-size: .95rem; line-height: 1.2; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn-gap-primary{ background: var(--color-primary); color: #fff; } .btn-gap-primary:hover{ background: var(--color-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-gap-secondary{ background: var(--color-secondary); color: #fff; } .btn-gap-secondary:hover{ background: var(--color-secondary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-gap-outline{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-gap-outline:hover{ background: var(--color-primary); color: #fff; } .btn-gap-ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .btn-gap-ghost:hover{ background: rgba(255,255,255,.15); border-color: #fff; color: #fff; } /* Bouton d'en-tête de section (silliere : gap-heading-cta) */ .gap-heading-cta{ margin-top: 1.2rem; } /* Sa CELLULE est un frère de `.section-heading`, donc hors de la colonne que celle-ci centre (ligne ~458 : margin-inline auto + text-align center). Le bouton restait donc aligné à GAUCHE partout — sauf dans les héros, où `.t-hero-clair` et `.t-hero-image` le recentraient chacun de leur côté. Le défaut ne s'était jamais montré parce que les deux seuls boutons de section du site (accueil, « Le Chemin vers la Vie ») vivent justement dans des héros. Constaté le 26/08/2026 en ouvrant le réglage de position : le premier bouton posé hors héros serait tombé à gauche, seul élément non centré d'une section entièrement centrée. Le centrage devient donc le cas GÉNÉRAL, comme pour l'en-tête et les conclusions ; les deux règles de héros n'ont plus d'objet mais ne gênent pas — elles disent la même chose. ⚠️ Sauf sous `.t-marquee`, où le socle place ce bouton en 2e COLONNE d'une grille (gap.css) : y forcer le centrage du texte décalerait le bouton dans sa cellule. */ .page-section:not(.t-marquee) .section-heading-cta{ text-align: center; } /* ========================================================================== NAVIGATION — papier translucide + flou (reprise du mécanisme silliere-v2026, recoloré). Logo RÉEL (fichier SVG, pas un texte). Lien actif marqué du point du logo, pas d'un soulignement droit. ========================================================================== */ .gap-navbar{ position: sticky; top: 0; z-index: 1030; background: rgba(250,249,245,.92); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--color-border); height: 76px; display: flex; align-items: center; } .gap-navbar .nav-logo{ display: inline-flex; align-items: center; } .gap-navbar .nav-logo img{ height: 42px; width: auto; } .gap-navbar .navbar-toggler{ border: 0; background: transparent; padding: .3rem; line-height: 0; cursor: pointer; } .gap-navbar .navbar-toggler-icon{ width: 26px; height: 26px; display: inline-block; background: no-repeat center / 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231D2419' stroke-width='2.4' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); } .navbar-nav{ list-style: none; margin: 0; padding: 0; } .gap-navbar .nav-link{ position: relative; font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--color-ink); padding: .5rem .8rem; border-radius: 999px; text-decoration: none; transition: color var(--transition), background var(--transition); } .gap-navbar .nav-link:hover{ color: var(--color-primary); background: rgba(71,86,69,.06); } .gap-navbar .nav-link.active{ color: var(--color-primary); font-weight: 700; } .gap-navbar .nav-link.active::after{ content: ""; position: absolute; left: 50%; bottom: .1rem; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } .gap-navbar .gap-nav-cta{ display: inline-flex; align-items: center; min-height: 40px; padding: .55rem 1.25rem; border-radius: 999px; background: var(--color-secondary); color: #fff; font-weight: 600; font-size: .88rem; text-decoration: none; transition: background var(--transition); } .gap-navbar .gap-nav-cta:hover{ background: var(--color-secondary-hover); color: #fff; } @media (max-width: 991.98px){ .gap-navbar .navbar-collapse{ position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface-alt); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: .5rem 1.25rem 1.5rem; display: none; } /* ⚠️ `.show` / `.collapsing`, et NON `.is-open`. La maquette ouvrait son menu avec sa propre classe, posée par son propre JS (`data-tc-nav-toggle`). Le socle, lui, s'appuie sur le collapse de Bootstrap : `data-bs-toggle="collapse"`, qui pose `.show` — et `.collapsing` pendant l'animation de hauteur. Recopier `.is-open` laissait donc le menu FERMÉ POUR TOUJOURS sur téléphone : le bouton répondait, la classe changeait, et aucune règle ne la voyait. Signalé par Pierre-Louis depuis son téléphone le 11/08/2026. */ .gap-navbar .navbar-collapse.show, .gap-navbar .navbar-collapse.collapsing{ display: block; } .gap-navbar .navbar-nav{ flex-direction: column; gap: 0; } .gap-navbar .nav-link{ display: block; padding: .85rem .5rem; border-bottom: 1px solid var(--color-border); border-radius: 0; } .gap-navbar .nav-link.active::after{ left: .5rem; bottom: .95rem; transform: none; } .gap-navbar .navbar-collapse .gap-nav-cta{ margin-top: 1rem; justify-content: center; width: 100%; } } @media (min-width: 992px){ .gap-navbar .navbar-toggler{ display: none; } .gap-navbar .navbar-collapse{ display: flex !important; align-items: center; margin-left: auto; } .gap-navbar .navbar-nav{ display: flex; flex-direction: row; gap: .1rem; margin-right: 1.5rem; } } /* ========================================================================== HERO (featured, variante hero) — fond Eau, clair (charte §6 : « cabinet lumineux, pas salle d'attente »). ========================================================================== */ .t-hero-clair{ background: var(--color-surface-raised); padding: clamp(3.2rem, 7vw, 5rem) 0 clamp(2.6rem, 5vw, 4rem); } .t-hero-clair .display-title{ max-width: 18ch; margin-inline: auto; } .t-hero-clair .lead{ margin: 1.1rem auto 0; max-width: 52ch; } .t-hero-clair .section-eyebrow{ justify-content: center; } /* Le bouton d'en-tête (`section-heading-cta`) est un FRÈRE de `.section-heading`, hors de la zone centrée ; `.t-hero-clair` ne pose pas text-align:center sur la section (contrairement à `.t-hero-image`), le bouton restait donc à gauche. */ .t-hero-clair .section-heading-cta{ text-align: center; } /* ========================================================================== HERO À FOND FIXE (page d'accueil) — demandé le 09/08/2026. « Titre sur toute la largeur, avec une image fixe dans le fond », dans l'esprit du site actuel. ── Ceci n'est pas un décor de maquette ─────────────────────────────────── Tout ce bloc REPRODUIT ce que le socle rend déjà pour une section dont le fond est une image (SectionRenderer::sectionStyles / overlayRgba). Rien n'est à développer : la section porte `has-bg-image`, les styles de fond sont posés en ligne par le socle, et le voile est un
dont la couleur vient des réglages. Les règles ci-dessous ne sont là que parce que la maquette ne charge pas gap.css. Correspondance avec les réglages du back-office : Fond de la section .......... Image (bg_style) Image ....................... médiathèque (bg_image) Fixation .................... Fixe (bg_attachment) Voile ....................... 65 %, Crème (bg_overlay / bg_overlay_color) Hauteur minimale ............ 74 vh (min_height_vh) Autrement dit : Juliane peut changer l'image, le voile et la hauteur elle-même, sans nous. ── Le voile n'est pas cosmétique ───────────────────────────────────────── Sans lui, le vert de la charte sur la feuille corail de l'image plafonne à 3,83:1 — sous le seuil AA pour le sous-titre (le grand titre, lui, passe). Le voile Crème à 65 % ramène l'ensemble de la zone entre 6,0 et 6,9:1. Changer l'image de fond pour une photo sombre demandera de rouvrir ce calcul, ou de passer le texte en crème sur voile foncé. ========================================================================== */ /* La géométrie (`.bg-overlay`, le repli mobile du fond fixe) n'est pas reprise ici : gap.css la porte déjà, et le thème arrive après lui. ── LA COULEUR DU TEXTE, elle, DOIT être reprise ────────────────────────── Défaut corrigé le 17/08/2026, trouvé au rendu et pas à la relecture : le grand titre de l'accueil s'affichait EN BLANC sur le voile crème — c'est-à-dire presque invisible. gap.css pose `.page-section.has-bg-image { color:#fff }` pour les titres, la tagline, l'étiquette et `.text-muted`. La règle est juste pour le cas qu'elle vise — une photo sombre sous un voile sombre. Ici le voile est CRÈME à 76 % : le texte doit rester encre. J'avais écrit, en commentaire, que gap.css « portait déjà » ces règles et qu'il n'y avait donc rien à reprendre. C'était vrai pour la géométrie et faux pour la couleur : gap.css ne portait pas la même règle, il portait la règle CONTRAIRE. Un commentaire rassurant qui masquait un défaut. Sélectivité : `.page-section.has-bg-image h1` pèse (0,2,1) — il faut donc au moins autant, d'où `.page-section.t-hero-image` en tête de chaque sélecteur. Pas de `!important` : la spécificité suffit et se relit. Les contrastes MESURÉS le 09/08 sur les pixels composés — 12,99:1 pour le titre, 5,09:1 pour le sous-titre — l'ont été sur CES couleurs-là. Elles ne sont donc pas un choix d'ambiance : elles sont ce qui a été vérifié. */ .page-section.t-hero-image, .page-section.t-hero-image h1, .page-section.t-hero-image h2, .page-section.t-hero-image h3, .page-section.t-hero-image .display-title{ color: var(--color-ink); } .page-section.t-hero-image .lead, .page-section.t-hero-image .text-muted, .page-section.t-hero-image .gap-tagline{ color: var(--color-muted) !important; } /* Même cause pour le sur-titre : gap.css le passe à `--color-flourish-3` dès qu'il y a un fond image. Il reste bordeaux, comme partout ailleurs. */ .page-section.t-hero-image .section-eyebrow{ color: var(--color-secondary); } /* ── Le bouton d'ouverture ───────────────────────────────────────────────── Le socle rend le bouton d'EN-TÊTE de section en contour (`btn-gap-outline gap-heading-cta`), et gap.css le repasse en blanc sur fond image : on obtenait un contour blanc translucide sur voile crème, à peine visible. La maquette met un bouton PLEIN dans ses deux ouvertures, mais pas de la même couleur — vert sur l'accueil, bordeaux sur « Le Chemin ». Le style de la section suffit à les distinguer, sans toucher au socle. */ .page-section.t-hero-image .gap-heading-cta{ background: var(--color-primary); color: #fff; border-color: transparent; } /* Au SURVOL, le sélecteur du repos ne suffit pas. gap.css repeint tout bouton contour survolé sur fond image — `.page-section.has-bg-image .btn-gap-outline:not(.gap-formule *):hover`, spécificité 0,5,0, car `:not()` compte son argument — et battait la règle du thème (0,4,0) : le bouton vert devenait blanc translucide, texte blanc sur voile crème, invisible. Mesuré le 11/09/2026 (retour d'éditeur n° 1 de Juliane). Même sélecteur que le liseré plus bas, `:hover` en plus : 0,5,1. */ .page-section.t-hero-image a.btn-gap-outline.gap-heading-cta:hover{ background: var(--color-primary-hover); color: #fff; border-color: transparent; } .t-hero-clair .gap-heading-cta{ background: var(--color-secondary); color: #fff; border-color: transparent; } .t-hero-clair .gap-heading-cta:hover{ background: var(--color-secondary-hover); color: #fff; border-color: transparent; } /* ── Les boutons d'un BLOC CTA suivent la maquette, pas le socle ─────────── Relevé le 17/08/2026 sur les trois blocs CTA de la maquette (clôture du Chemin, prise de rendez-vous, sortie de Merci) : la première action y est TOUJOURS bordeaux — l'« action » de la charte — là où le socle la peint en vert ; la deuxième y est un contour, là où le socle la remplit. On repeint par CONTEXTE (data-template, posé par le socle sur la section) plutôt que de surcharger le gabarit : trois règles contre un fork. */ .page-section[data-template="cta-block"] .btn-gap-primary{ background: var(--color-secondary); } .page-section[data-template="cta-block"] .btn-gap-primary:hover{ background: var(--color-secondary-hover); } .page-section[data-template="cta-block"] .btn-gap-secondary{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .page-section[data-template="cta-block"] .btn-gap-secondary:hover{ background: var(--color-primary); color: #fff; } /* ── Un bouton de section qui mène à la RÉSERVATION est une action ───────── Même règle de charte que ci-dessus (« la première action est bordeaux »), appliquée là où elle manquait : le bouton d'en-tête, que le socle rend toujours en contour vert. Le problème, mesuré le 27/08/2026 sur les six boutons de section du site : quatre mènent à la prise de rendez-vous (accueil, Le Chemin, À la carte, Témoignages) et deux mènent simplement à une autre page (Le Chemin, Témoignages). Hors héros, les quatre se rendaient À L'IDENTIQUE — même contour vert pour « Réserver une séance » et pour « Découvrir Le Chemin vers la Vie ». Sur « À la carte », les deux se suivent à 507 px : rien ne disait lequel était l'action et lequel la porte de sortie. Le critère est la DESTINATION, pas le gabarit — c'est ce qui distingue cette règle de celle du bloc CTA. Un bouton qui envoie réserver est une action, où qu'il soit posé. Contrastes vérifiés (WCAG AA) : blanc sur bordeaux 7,02:1 ; bordeaux sur Eau 5,48:1, sur Crème 6,81:1, sur Papier 6,66:1. Survol #8E2222 : 8,74:1. ⚠️ Les HÉROS sont exclus : ils ont déjà leur traitement, et pour de bonnes raisons — `.t-hero-image` peint en vert plein parce que le bouton se pose sur une photo, `.t-hero-clair` peint déjà en bordeaux. `[class*="t-hero"]` couvre les deux. Deux sélecteurs parce que le socle rend ce bouton en pour le visiteur et en (+ pastille de lien) en mode édition : sans le second, l'éditrice verrait un contour vert là où le visiteur voit une action. */ .page-section:not([class*="t-hero"]) .section-heading-cta:has(a[href*="prendre-rendez-vous"]) .gap-heading-cta, .page-section:not([class*="t-hero"]) .section-heading-cta:has(.gap-cta-link[data-url*="prendre-rendez-vous"]) .gap-heading-cta{ background: var(--color-secondary); color: #fff; border-color: transparent; } .page-section:not([class*="t-hero"]) .section-heading-cta:has(a[href*="prendre-rendez-vous"]) .gap-heading-cta:hover, .page-section:not([class*="t-hero"]) .section-heading-cta:has(.gap-cta-link[data-url*="prendre-rendez-vous"]) .gap-heading-cta:hover{ background: var(--color-secondary-hover); color: #fff; border-color: transparent; } /* Sur fond Nuit, contours et « troisième action » deviennent des fantômes clairs — c'est ce que fait la clôture de la maquette. `.page-section.t-nuit` : trois « niveaux classe », comme la règle de contexte ci-dessus — à égalité, celle-ci gagne parce qu'elle vient après. */ .page-section.t-nuit .btn-gap-secondary, .page-section.t-nuit .btn-gap-outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .page-section.t-nuit .btn-gap-secondary:hover, .page-section.t-nuit .btn-gap-outline:hover{ background: rgba(255,255,255,.15); border-color: #fff; color: #fff; } /* ── Deux boutons de rangée suivent la maquette, section par section ─────── Le gabarit featured rend le bouton d'un bloc en vert plein, et c'est le bon défaut. La maquette validée fait DEUX exceptions, que rien dans les données ne distingue — on les épingle donc par leur ancre (html_id), en le disant : · « Un accompagnement pour te guider pas à pas » : bordeaux plein ; · « Cet accompagnement est fait pour toi si… » : contour. Si l'une de ces sections change d'ancre, l'exception tombe et le bouton revient au défaut vert — visible, pas silencieux. */ .page-section:has(.gap-section-anchor[id="tc-accueil-guider"]) .btn-gap-primary{ background: var(--color-secondary); } .page-section:has(.gap-section-anchor[id="tc-accueil-guider"]) .btn-gap-primary:hover{ background: var(--color-secondary-hover); } .page-section:has(.gap-section-anchor[id="tc-chemin-pour-toi"]) .btn-gap-primary{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .page-section:has(.gap-section-anchor[id="tc-chemin-pour-toi"]) .btn-gap-primary:hover{ background: var(--color-primary); color: #fff; } /* La phrase de clôture de « Cet accompagnement est fait pour toi si… » — « Si tu t'es reconnue… ». La maquette la pose DANS le bloc, centrée, AVANT le bouton (et non en conclusion de section après lui). Elle vit donc dans le corps de l'item (dernier

après la liste) : un

ne peut pas porter de classe qui survive à une réédition, on la centre donc depuis le thème. Ne touche que cette section — ailleurs, les paragraphes de corps restent à gauche. */ .page-section:has(.gap-section-anchor[id="tc-chemin-pour-toi"]) .col-12 > .mb-3 > p{ text-align: center; } /* Le titre occupe TOUTE la largeur : pas de colonne, pas de max-width en ch. C'est ce qui distingue ce hero de .t-hero-clair, dont le titre est bridé à 18ch pour tenir en trois lignes à côté d'une illustration. */ .t-hero-image{ text-align: center; } .t-hero-image .display-title{ max-width: none; font-size: clamp(2.5rem, 6.4vw, 4.6rem); margin: 0 auto; text-wrap: balance; /* évite la ligne orpheline d'un seul mot */ } .t-hero-image .lead{ margin: 1.3rem auto 0; max-width: 46ch; } .t-hero-image .section-eyebrow{ justify-content: center; margin-bottom: 1.1rem; } .t-hero-image .section-heading-cta{ margin-top: clamp(1.6rem, 3vw, 2.4rem); } /* LA LARGEUR DE L'EN-TÊTE — corrigée le 17/08/2026, signalée par Pierre-Louis : « le H1 de la page d'accueil est sur 2 lignes sur la maquette, il en prend 3 sur le site ». La maquette ne met PAS d'enveloppe .section-heading dans ses heroes : son titre s'étale sur le conteneur (~72rem). Le socle, lui, enveloppe toujours l'en-tête — et le plafond générique de 46rem s'appliquait donc au seul titre du site qui est censé occuper TOUTE la largeur. Le « max-width:none » posé sur .display-title ne pouvait rien y faire : c'est son PARENT qui était étroit. */ .page-section.t-hero-image .section-heading{ max-width: none; } /* ========================================================================== TROIS VARIATIONS PROPOSÉES (11/08/2026) — pas encore validées. Elles ne rejouent pas un habillage existant : elles s'ajoutent aux trois styles déjà en service, pour des situations que la maquette ne couvre pas encore. Écrites ici pour que la cliente les VOIE avant qu'on les code. Aucune ne touche à une couleur de fond : la couleur est un axe séparé du socle (bg_style + bg_color), et un style qui se résumerait à un fond n'aurait rien à faire dans ce menu. ========================================================================== */ /* `reperes` — énumérer sans photo. Le rendu de carte par défaut impose une carte-service illustrée à une liste de six lignes courtes ; ici, plus de cadre ni de fond, l'icône seule ancre chaque repère. */ /* `overflow:hidden` et `height:100%` viennent de la carte À IMAGE, où ils servent à ce que la vignette épouse le rayon du cadre. Sans cadre ni image ils n'ont plus d'objet, et ils COUPENT le texte : un repère de trois lignes perdait la dernière, silencieusement (constaté au rendu, pas déduit). */ .t-reperes .gap-card{ background: transparent; border: 0; overflow: visible; height: auto; } .t-reperes .gap-card-body{ padding: 0; gap: .45rem; } .t-reperes .gap-card-icon{ width: 34px; height: 34px; margin-bottom: .1rem; } .t-reperes .gap-card-icon svg{ width: 17px; height: 17px; } .t-reperes .gap-card-title{ font-size: 1rem; line-height: 1.45; } .t-reperes .gap-card-text{ font-size: .88rem; } /* `citation-unique` — un seul témoignage, en grand. Le cadre disparaît : à cette taille il enfermerait la citation au lieu de la porter. Guillemet corail, décoratif (::before, jamais lu par un lecteur d'écran). */ .t-citation-unique .gap-quote{ max-width: 44rem; margin-inline: auto; padding: 0; background: transparent; text-align: center; align-items: center; gap: 1.4rem; } .t-citation-unique .gap-quote-text{ font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.45; } .t-citation-unique .gap-quote-text::before{ content: "«"; display: block; font-family: var(--font-display); font-style: normal; font-size: 3.2rem; line-height: .6; color: var(--color-accent); margin-bottom: .6rem; } .t-citation-unique .gap-quote-auteur{ justify-content: center; margin-top: 0; } /* `faq-lignes` — FAQ longue. Le rendu par défaut encadre CHAQUE question : au-delà de la dizaine, la page devient une pile de rectangles. Ici, un simple filet entre les questions. */ .t-faq-lignes .gap-accordion{ gap: 0; } .t-faq-lignes .gap-accordion-item{ border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--color-border); } .t-faq-lignes .gap-accordion-item:first-child{ border-top: 1px solid var(--color-border); } .t-faq-lignes .gap-accordion-q{ padding-inline: 0; } /* Le retrait latéral vit sur `.gap-accordion-a`, pas sur son corps : sans ce sélecteur-ci, la réponse restait décalée de 1,35rem par rapport à sa question, alors que tout l'intérêt du style est l'alignement au filet. */ .t-faq-lignes .gap-accordion-a{ padding-inline: 0; } /* Le lien seul qui ferme une réponse d'accordéon (« Je choisis Élan Complet ») est un BOUTON dans la maquette. Le type FAQ n'a pas de champ bouton : le lien vit donc dans la réponse, et le texte riche du socle ne garde aucune classe. On le reconnaît à sa position — seul dans le dernier paragraphe — et on lui rend son habillage. Un lien AU FIL du texte n'est pas touché. VERT, pas bordeaux : la maquette pose btn-gap-primary sur ces deux boutons — je l'avais peint en bordeaux de mémoire, corrigé le 17/08 (relevé, pas supposé). */ .gap-accordion-a-body > p:last-child > a:only-child{ display: inline-block; margin-top: .4rem; padding: .7rem 1.5rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .95rem; text-decoration: none; } .gap-accordion-a-body > p:last-child > a:only-child:hover{ background: var(--color-primary-hover); color: #fff; } /* ========================================================================== ENCART (`encart`) — le `.tc-note-info` de la maquette, oublié au premier passage. La maquette l'emploie DEUX fois, et jamais par goût : · « Informations pratiques » (À la carte) — tarifs, moyens de paiement, remboursement mutuelle ; · « Cadre professionnel » (À propos) — code de déontologie, syndicat. Chaque fois, du VÉRIFIABLE au milieu d'un récit : la boîte dit « ceci se contrôle », et c'est pour ça qu'elle existe. La Brume (#ECF0F5) est le seul ton de la charte réservé aux encarts — il ne sert à rien d'autre. Ce style habille le CONTENU, pas le titre : le socle rend le titre de section au-dessus de la rangée, hors de la boîte — exactement la disposition de la maquette sur « Mes engagements en naturopathie ». ⚠️ Le PREMIER paragraphe du contenu tient lieu d'étiquette (« Informations pratiques »). C'est une convention, pas une magie : un paragraphe ajouté avant lui prendrait sa place. Dit ici parce que rien ne le signale à l'écran de saisie. ========================================================================== */ .t-encart .row > [class*="col-"]{ background: var(--color-surface-info); border: 1px solid #C9D6E4; border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3.5vw, 2.2rem); max-width: 46rem; margin-inline: auto; } .t-encart .row > [class*="col-"] > :last-child{ margin-bottom: 0; } .t-encart p{ color: var(--color-ink); } /* L'étiquette : Work Sans 600, pas Instrument Serif — c'est une étiquette, pas un titre éditorial (et Instrument Serif n'a pas de gras). */ .t-encart .mb-3 > p:first-child{ margin: 0 0 .7rem; font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); } /* ========================================================================== CADRE D'ILLUSTRATION (`illustration`) — le `.tc-illu-frame` de la maquette. Les dessins au trait de la graphiste n'ont pas de fond : posés nus sur la page, ils flottent. Le cadre leur donne la surface qui leur manque, sans toucher au dessin lui-même — qui reste un MÉDIA remplaçable depuis la médiathèque, pas un décor CSS. `object-fit: contain` et non `cover` : un dessin recadré perd son sujet. ========================================================================== */ .t-illustration .gap-featured-img{ width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) + .25rem); background: var(--color-surface-raised); padding: clamp(1.5rem, 4vw, 2.6rem); object-fit: contain; } /* ========================================================================== PORTRAIT 3⁄4 (`portrait`) — le cadrage des deux portraits de Juliane. Ses photos sont des PAYSAGES (1189 × 850) ; la maquette les recadre en portrait 3⁄4 à côté du texte (« Je me présente », « Qui suis-je ? »). Sans ce style, l'image s'affichait couchée — une page visiblement différente de celle que la cliente a validée. `object-fit: cover` + le point focal de la médiathèque (object-position posé par le socle) : le recadrage reste pilotable photo par photo. ========================================================================== */ .t-portrait .gap-featured-img{ width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* ========================================================================== COMPARATIF DE FORMULES (gabarit `pricing` du socle) — habillage Ta Cadence. Ce gabarit existe dans le socle et n'a JAMAIS servi sur ce site : les formules sont aujourd'hui rendues en cartes, avec les prix récapitulés trois sections plus bas. Les règles ci-dessous existent pour que la planche puisse montrer l'autre présentation et faire trancher la cliente. DOM repris à la lettre de app/Views/sections/templates/pricing.php : .gap-formule(-avant) > .gap-formule-badge / -nom / -prix / -accroche / -liste > li > .gap-formule-coche / -pied. Deux points de charte : · le NOM de formule vit sous 1,6 rem → Work Sans 600, pas Instrument Serif (qui n'a pas de gras et fabriquerait un faux gras) ; · le PRIX est un chiffre d'affichage → Instrument Serif 400, que la charte destine explicitement aux « grands titres, chiffres ». ========================================================================== */ .gap-formule{ display: flex; flex-direction: column; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: calc(var(--radius) + .25rem); padding: 1.9rem 1.6rem 1.6rem; position: relative; } /* Mise en avant : le filet bordeaux suffit. Pas de fond coloré — la carte doit rester lisible, et la couleur du fond est un axe qui ne dépend pas de ce gabarit. */ .gap-formule--avant{ border-color: var(--color-secondary); border-width: 1.5px; } .gap-formule-badge{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--color-secondary); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; } .gap-formule-nom{ font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; color: var(--color-ink); margin-bottom: .35rem; } .gap-formule-prix{ font-family: var(--font-display); font-weight: 400; font-size: 2.5rem; line-height: 1.05; color: var(--color-primary); margin-bottom: .5rem; } .gap-formule-accroche{ color: var(--color-muted); line-height: 1.6; margin-bottom: 1.1rem; } .gap-formule-liste{ list-style: none; padding: 0; margin: 0 0 1.4rem; } .gap-formule-liste li{ display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; line-height: 1.6; margin-bottom: .55rem; } .gap-formule-coche{ flex: 0 0 auto; color: var(--color-primary); margin-top: .15rem; } .gap-formule-coche svg{ display: block; } .gap-formule-pied{ margin-top: auto; } .gap-formule-pied .btn-gap-primary, .gap-formule-pied .btn-gap-outline{ width: 100%; } /* ========================================================================== FEATURED (image + texte / texte seul) ========================================================================== */ .gap-featured-img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) + .25rem); display: block; } .gap-photo-caption{ position: absolute; left: 1rem; bottom: 1rem; background: var(--color-surface-alt); color: var(--color-ink); font-size: .78rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; box-shadow: var(--shadow-sm); } .gap-photo-wrap{ position: relative; } /* ========================================================================== CARTES (gap-card) ========================================================================== */ /* RANGÉE INCOMPLÈTE CENTRÉE. Une grille dont la dernière rangée n'est pas pleine (voire une carte unique, comme « La sophro-relaxation ») laissait sa ou ses cartes orphelines calées à gauche ; la maquette les centre (`row justify-content-center`). `justify-content: center` s'applique par LIGNE de flex : les rangées pleines somment déjà 100 % et ne bougent pas, seule la ligne incomplète se recentre. Vaut pour ce thème et les prochains. */ .page-section[data-template="card-grid"] .row{ justify-content: center; } .gap-card{ background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: calc(var(--radius) + .1rem); overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: none; transition: box-shadow var(--transition), transform var(--transition); } .gap-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); } .gap-card-img-wrap{ aspect-ratio: 4 / 3; overflow: hidden; } .gap-card-img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* ⚠️ `.gap-card .gap-card-*` et non `.gap-card-*` : gap.css cible ces trois éléments AVEC leur parent (0,2,0). Un simple sélecteur de classe (0,1,0) perd malgré sa position plus tardive — la spécificité bat l'ordre. La maquette ne pouvait pas le voir : elle ne charge pas gap.css. Constaté au banc d'essai le 11/08/2026, sur le titre de carte qui sortait en Instrument Serif 700, c'est-à-dire en FAUX GRAS que la charte interdit. */ .gap-card .gap-card-body{ padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .gap-card-icon{ width: 42px; height: 42px; border-radius: 50%; background: var(--color-surface-raised); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: .3rem; } .gap-card-icon svg{ width: 20px; height: 20px; } /* Work Sans et non Instrument Serif : à 1,15rem la sérif d'affichage perd son dessin, et le 600 nécessaire ici n'existe pas dans la fonte. */ .gap-card .gap-card-title{ font-family: var(--font-body); font-size: 1.12rem; font-weight: 600; color: var(--color-ink); margin: 0; } .gap-card .gap-card-text{ color: var(--color-muted); font-size: .93rem; line-height: 1.6; margin: 0; } .pill{ display: inline-block; font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; } .pill-signature{ background: rgba(194,58,22,.1); color: var(--color-secondary); } /* Depuis le 17/08/2026 le socle distingue DEUX familles d'étiquette (champ « Style de l'étiquette », rendu `pill-green` / `pill-green pill-accent`). Correspondance avec la maquette : discrète = `pill-option` (vert d'eau), mise en avant = `pill-signature` (corail). */ .pill-option, .gap-card .pill-green{ background: var(--color-surface-raised); color: var(--color-primary); } .gap-card .pill-green.pill-accent{ background: rgba(194,58,22,.1); color: var(--color-secondary); } /* La ligne de PRIX d'une carte (« Individuelle 1h30 : 85€ »). Le socle la rend dans le champ « Accroche » (subtitle), qu'il habille en `small text-muted` — c'est-à-dire en gris, plus petit que le texte courant. Sur une page de prestations, le tarif est une information de premier plan, et la maquette le pose en corps de texte normal. On rétablit ça. Sélecteur à trois classes (0,4,0) : gap.css tient `.small` et `.text-muted`, et l'ordre des feuilles ne suffirait pas à départager `.text-muted`. */ .gap-card .gap-card-body > p.small.text-muted.mb-1{ /* La LIGNE DE PRIX des cartes (champ « Accroche »). La maquette la pose en BORDEAUX gras (.tc-price = --color-secondary, 700, 1rem) : le tarif ressort en couleur d'action. Le commentaire précédent croyait à tort qu'elle était en corps de texte normal — corrigé le 18/08/2026 (audit de fidélité). !important : gap.css force `.text-muted{ color … !important }`. */ color: var(--color-secondary) !important; font-size: 1rem; font-weight: 700; } /* ========================================================================== CORRECTIONS D'AUDIT (18/08/2026) — écarts relevés page par page contre la maquette validée. Regroupées ici pour la relecture ; theme.css étant chargé après gap.css, la place dans le fichier n'affecte pas la cascade. ========================================================================== */ /* CARTE DE COORDONNÉES (Contact) — la maquette en fait un encart au fond Eau, arrondi, avec une icône bordeaux par ligne. Le socle rend les lignes `.gap-map-coord--addr/--tel/--mail` nues ; les modificateurs existent pour que le thème les habille. Icônes Feather posées en masque (currentColor impossible sur un ::before sans SVG dans le DOM). Valeurs : maquette.css. */ .gap-map-info{ display: flex; flex-direction: column; justify-content: center; } .gap-map-coords{ background: var(--color-surface-raised); border-radius: calc(var(--radius) + .1rem); padding: 1.6rem; } .gap-map-coords-title{ margin: 0 0 1rem; font-size: 1.05rem; } .gap-map-coords-list{ font-style: normal; display: grid; gap: .8rem; } .gap-map-coord{ display: flex; align-items: center; gap: .65rem; color: var(--color-ink); font-weight: 600; font-size: .95rem; text-decoration: none; } a.gap-map-coord:hover{ color: var(--color-primary); } .gap-map-coord::before{ content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: var(--color-secondary); -webkit-mask: var(--tc-coord-icon) no-repeat center / contain; mask: var(--tc-coord-icon) no-repeat center / contain; } .gap-map-coord--addr{ --tc-coord-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .gap-map-coord--tel{ --tc-coord-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); } .gap-map-coord--mail{ --tc-coord-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); } /* NEWSLETTER DU PIED — le socle rend le formulaire en `form.d-flex` (pas `.newsletter-form`), donc les règles habillées du thème ne s'appliquaient pas : champ blanc Bootstrap et bouton rouge vif sur le pied sombre. On cible le DOM réellement émis (le formulaire pointe vers …/newsletter/inscription). */ .gap-footer form[action*="newsletter"] .form-control{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: var(--radius-sm, .6rem); } .gap-footer form[action*="newsletter"] .form-control::placeholder{ color: rgba(255,255,255,.45); } .gap-footer form[action*="newsletter"] .btn{ background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; border-radius: var(--radius-sm, .6rem); } .gap-footer form[action*="newsletter"] .btn:hover{ background: var(--color-secondary-hover); border-color: var(--color-secondary-hover); color: #fff; } /* COMPARATIF « Pour résumer » (Chemin) — la maquette bride la rangée des trois cartes à 58rem, centrée ; le socle l'étale sur tout le conteneur. */ .page-section[data-template="pricing"] > .container > .row{ max-width: 58rem; margin-inline: auto; } /* BOUTON DE HERO SUR IMAGE (accueil) — la maquette le veut vert PLEIN, sans contour. gap.css `.has-bg-image .btn-gap-outline` (0,4,0) imposait un liseré blanc translucide ; on remonte la spécificité pour le supprimer. */ .page-section.t-hero-image a.btn-gap-outline.gap-heading-cta{ border-color: transparent; } /* FILETS des sections Crème — la maquette (bg-white-custom) borde le haut et le bas d'un filet 1px Lin ; le fond uni du socle ne les posait pas. */ .page-section.gap-bg-uni.gap-bg-creme{ border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } /* ENCART « Témoignages fictifs » (Témoignages) — dans la maquette il tient dans la même section que la grille de citations ; le socle en fait deux sections à pleine hauteur, ~10rem de vide entre les deux. On resserre. */ .page-section.t-encart{ padding-bottom: clamp(1rem, 2vw, 1.5rem); } .page-section.t-encart + .page-section[data-template="quotes"]{ padding-top: 0; } /* BLOC DE SORTIE de « Merci » — la maquette le pose en `section-sm` (compact, une phrase + trois boutons). Le CMS n'expose pas cette compacité en réglage ; on la porte par l'ancre de la section. */ .page-section:has(.gap-section-anchor[id="tc-merci-sortie"]){ padding-top: clamp(2.2rem, 4.5vw, 3.2rem); padding-bottom: clamp(2.2rem, 4.5vw, 3.2rem); } .gap-card .mt-auto-cta{ margin-top: auto; padding-top: .6rem; } .gap-card .btn-gap-primary, .gap-card .btn-gap-outline{ width: 100%; } /* ========================================================================== ACCORDÉON (gap-accordion) —

/ natif ========================================================================== */ .gap-accordion{ max-width: 52rem; margin: 0 auto; display: grid; gap: .8rem; } .gap-accordion-item{ border: 1px solid var(--color-border); border-radius: calc(var(--radius) - .1rem); background: var(--color-surface-alt); overflow: hidden; } .gap-accordion-q{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.1rem 1.35rem; font-family: var(--font-body); /* question d'accordéon : lisibilité avant effet */ font-weight: 600; font-size: 1.02rem; color: var(--color-ink); cursor: pointer; list-style: none; } .gap-accordion-q::-webkit-details-marker{ display: none; } .gap-accordion-chevron{ flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg); transition: transform var(--transition); } .gap-accordion-item[open] .gap-accordion-chevron{ transform: rotate(-135deg); } .gap-accordion-a{ padding: 0 1.35rem 1.3rem; } .gap-accordion-a-body{ color: var(--color-muted); max-width: 62ch; } .gap-accordion-a-body ul{ margin: .6rem 0 1rem; padding-left: 1.2rem; } .gap-accordion-a-body li{ margin-bottom: .4rem; } /* ========================================================================== CHIFFRES (gap-stats) — point corail au lieu du filet gauche technique ========================================================================== */ .gap-stats{ margin: 0 auto; } .gap-stat{ padding: .5rem; text-align: center; } .gap-stat-num{ position: relative; display: inline-block; padding-top: 1rem; font-family: var(--font-display); /* grande taille : le domaine d'Instrument Serif */ font-weight: 400; font-size: clamp(2.3rem, 5.2vw, 3.2rem); line-height: 1; color: var(--color-primary); } .gap-stat-num::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); } .gap-stat-label{ margin-top: .5rem; font-size: .92rem; font-weight: 600; color: var(--color-ink); } /* ========================================================================== TÉMOIGNAGE / CITATION (gap-quote) — fond Eau, sans filet, Literata italique ========================================================================== */ .gap-quote{ height: 100%; padding: 1.7rem 1.7rem 1.5rem; background: var(--color-surface-raised); border-radius: calc(var(--radius) + .1rem); display: flex; flex-direction: column; gap: 1.1rem; margin: 0; } .gap-quote-text{ margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; /* l'italique d'Instrument Serif n'existe qu'en 400 */ font-size: 1.25rem; line-height: 1.5; color: var(--color-ink); } .gap-quote-auteur{ display: flex; align-items: center; gap: .75rem; margin-top: auto; } .gap-quote-img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; } .gap-quote-initiales{ width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: .95rem; } .gap-quote-qui{ display: flex; flex-direction: column; } .gap-quote-nom{ font-weight: 700; color: var(--color-ink); font-size: .92rem; } .gap-quote-role{ font-size: .82rem; color: var(--color-muted); } /* ========================================================================== FORMULAIRE DE CONTACT (gap-contact-form) ========================================================================== */ .gap-contact-form{ background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: calc(var(--radius) + .2rem); padding: clamp(1.6rem, 3vw, 2.3rem); box-shadow: var(--shadow-sm); } .gap-contact-form .form-label{ font-weight: 700; font-size: .88rem; color: var(--color-ink); margin-bottom: .35rem; display: inline-block; } .gap-contact-form .form-control, .gap-contact-form textarea{ width: 100%; border: 1.5px solid var(--tc-border-field); border-radius: var(--radius-sm); padding: .65rem .9rem; font-family: var(--font-body); font-size: .95rem; color: var(--color-ink); background: var(--color-surface-alt); transition: border-color var(--transition), box-shadow var(--transition); } .gap-contact-form textarea{ min-height: 9rem; resize: vertical; } .gap-contact-form .form-control:focus, .gap-contact-form textarea:focus{ outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(71,86,69,.16); } .gap-contact-form .text-danger{ color: var(--tc-danger); } /* ========================================================================== PIED DE PAGE (gap-footer) ========================================================================== */ .gap-footer{ background: var(--color-ink); color: rgba(255,255,255,.82); padding: 3.5rem 0 1.5rem; } .gap-footer a{ color: rgba(255,255,255,.82); text-decoration: none; } .gap-footer a:hover{ color: #fff; } .gap-footer h5{ color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; } /* Le socle sert le MÊME fichier (logo.png) dans la barre et dans le pied, et gap.css blanchit celui du pied — `brightness(0) invert(1)` — parce que le pied est sombre. C'est exactement le `logo-footer-blanc.svg` de la graphiste : mêmes tracés, aplat blanc. On garde donc le filtre et on ne reprend que l'opacité : gap.css l'assourdit à .9, la maquette le pose plein. */ .gap-footer .footer-logo img{ height: 40px; width: auto; opacity: 1; } .gap-footer .footer-tagline{ color: rgba(255,255,255,.55); font-size: .85rem; line-height: 1.6; margin-top: .8rem; } .gap-footer .social-links{ display: flex; gap: .7rem; margin-top: 1.1rem; } .gap-footer .social-link{ width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .gap-footer .social-link:hover{ background: var(--color-secondary); } .gap-footer .social-link svg{ width: 16px; height: 16px; } .gap-footer ul.footer-nav{ list-style: none; margin: 0; padding: 0; font-size: .88rem; } .gap-footer ul.footer-nav li{ margin-bottom: .55rem; } .gap-footer address{ font-style: normal; font-size: .88rem; line-height: 1.9; color: rgba(255,255,255,.75); } .gap-footer address a{ display: block; } .gap-footer .newsletter-text{ color: rgba(255,255,255,.55); font-size: .85rem; margin-bottom: .8rem; } .gap-footer .newsletter-form{ display: flex; gap: .5rem; } .gap-footer .newsletter-form input{ flex: 1; min-width: 0; padding: .55rem .8rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font-size: .88rem; } .gap-footer .newsletter-form input::placeholder{ color: rgba(255,255,255,.45); } .gap-footer .newsletter-form button{ flex: 0 0 auto; padding: .55rem 1rem; border-radius: var(--radius-sm); border: 0; background: var(--color-secondary); color: #fff; font-weight: 600; font-size: .85rem; cursor: pointer; } .footer-divider{ border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 2.6rem 0 1.4rem; } .footer-legal-menu{ display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .82rem; margin-bottom: 1.4rem; } .footer-bottom{ display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; color: rgba(255,255,255,.55); } .footer-bottom a{ color: rgba(255,255,255,.55); } .footer-bottom .footer-bottom-links{ display: flex; gap: 1.2rem; } .gap-footer .disclaimer{ font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.6; max-width: 60rem; margin: 0 auto 2.2rem; text-align: center; padding-top: 2rem; border-top: 1px dashed rgba(255,255,255,.16); } /* ========================================================================== BANDEAU RGPD (statique — décoratif dans la maquette) ========================================================================== */ .gap-cookie-banner{ position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 640px; margin: 0 auto; background: var(--color-ink); color: rgba(255,255,255,.9); border-radius: calc(var(--radius) + .1rem); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-lg); display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: space-between; font-size: .85rem; z-index: 1040; } .gap-cookie-banner .gap-cookie-actions{ display: flex; gap: .6rem; flex-wrap: wrap; } .gap-cookie-banner button{ border-radius: 999px; border: 0; padding: .5rem 1rem; font-weight: 600; font-size: .82rem; cursor: pointer; } .gap-cookie-accept{ background: var(--color-secondary); color: #fff; } .gap-cookie-decline{ background: rgba(255,255,255,.12); color: #fff; } /* ========================================================================== DOCUMENTS LÉGAUX — le formulaire cité DANS un texte ========================================================================== L'article 14 des CGV n'est pas de la prose : c'est un formulaire de rétractation à recopier, avec ses champs à remplir. Rendu comme un paragraphe de plus, il se perd au milieu de treize articles de texte serré — or c'est justement la partie qu'une cliente doit repérer, et vite. Ni Bootstrap ni gap.css ne stylent
(constaté le 25/08/2026), d'où cette règle : un encart sur fond Eau, cadré, qui se lit comme un document dans le document. Portée volontairement étroite (.gap-legal-content) : ailleurs sur le site, une citation reste une citation. */ .gap-legal-content blockquote{ background: var(--color-surface-info); border: 1px solid var(--color-border); border-radius: calc(var(--radius) + .1rem); padding: 1.4rem 1.6rem; margin: 1.2rem 0 0; } .gap-legal-content blockquote > :last-child{ margin-bottom: 0; } /* Les champs à compléter : une ligne par champ, sans puce — ce sont des intitulés suivis d'un blanc, pas une énumération. */ .gap-legal-content blockquote ul{ list-style: none; padding-left: 0; } .gap-legal-content blockquote li{ border-bottom: 1px dashed var(--color-border); padding-bottom: .45rem; margin-bottom: .7rem; } /* ========================================================================== UTILITAIRES divers de mise en page (compléments légers à Bootstrap) ========================================================================== */ address{ font-style: normal; } /* ========================================================================== RESPONSIVE — ajustements mobiles complémentaires (Bootstrap gère le reste) ========================================================================== */ @media (max-width: 575.98px){ .page-section{ padding: clamp(2.4rem, 9vw, 3.4rem) 0; } .gap-contact-form{ padding: 1.3rem; } .footer-bottom{ flex-direction: column; align-items: flex-start; } .gap-cookie-banner{ flex-direction: column; align-items: stretch; } }