/* ============================================================ AFFINAGE ESTHÉTIQUE — 03/08/2026 Chargée en dernier : elle gagne la cascade sans toucher aux feuilles existantes, et se retire en supprimant une ligne du . Chaque bloc répond à un défaut constaté à l'écran (captures 03/08). ============================================================ */ /* ---------- 1. ICÔNES : trait fin doré, plus aucun emoji système ---------- Les emojis Noto sortaient en bleu vif (patte, souffle) et vert criard (arbres) au milieu d'une palette sable / sauge / or. */ .ico-nature { display: block; vector-effect: non-scaling-stroke; } .soin-card .soin-icon { color: var(--terre-sacree-dark, #A65F42); } .soin-card.signature .soin-icon { color: var(--lumiere-doree, #D4AF6A); } /* Rien à styler pour les « promesses » : sur les 3 cartes, une seule portait un emoji (🍃), les deux autres l'astérisque signature ❋. Un SVG à sa place aurait mesuré 30 px contre 57 px pour un ❋ et fait remonter le titre du milieu. Les trois portent désormais le même symbole — c'est l'emoji qui était l'anomalie, pas l'astérisque. */ .faq-category-icon { font-size: 17px; color: var(--lumiere-doree, #D4AF6A); opacity: 0.85; } .temoin-invite-modes .ico-nature { display: inline-block; vertical-align: -3px; margin-right: 3px; opacity: 0.7; } /* ---------- 2. « Qui je suis » : les portraits accompagnent la lecture ---------- 2 photos (331 px) face à 1 306 px de texte laissaient toute la moitié gauche vide sur ~1 000 px. En sticky, elles restent en regard du récit. Prérequis : `overflow-x: hidden` sur body (emilie-base.css:13 et emilie-luxe.css:26) fait du body un conteneur de défilement et neutralise position:sticky pour TOUS ses descendants. `clip` coupe le débordement horizontal sans créer ce conteneur — même protection, sticky préservé. Sous @supports : les navigateurs sans `clip` gardent `hidden` et le comportement actuel, jamais de scroll horizontal accidentel. */ @supports (overflow-x: clip) { html, body { overflow-x: clip; } } @media (min-width: 981px) { .about-portraits { position: sticky; top: 104px; } } /* ---------- 3. Cartes « 4 souffles » : titres alignés ---------- « III · TROISIÈME SOUFFLE » passait sur 2 lignes, « I · PREMIER » sur une : Libérer et Incarner retombaient 38 px plus bas que Accueillir et Écouter. */ .souffle-card .souffle-roman { /* letter-spacing 0.32em faisait passer les libellés III et IV sur 2 lignes ; resserré, ils tiennent tous sur une seule. */ letter-spacing: 0.2em; /* filet si un libellé repasse quand même sur 2 lignes (écrans étroits) : line-height 22.1px pour 13px de corps, soit 3.4em pour deux lignes. */ min-height: 3.4em; display: flex; align-items: center; justify-content: center; } /* ---------- 3 bis. Cartes « Lignée & transmission » : même défaut ---------- « HEURES DE / TRANSMISSION » et « ENSEIGNEMENTS / COMPLETS » tiennent sur 2 lignes, « LECTURE VIBRATOIRE » et « PROTOCOLES CONCRETS » sur une seule : les descriptions des cartes 3 et 4 démarraient 22 px plus haut. Ces cartes n'ont que des styles en ligne — d'où le ciblage positionnel. */ .lignee-grid > article > div:nth-of-type(2) { /* deux lignes mesurées à 44 px pour line-height 22.1px, soit 3.4em */ min-height: 3.4em; display: flex; align-items: center; justify-content: center; } /* ---------- 4. Galerie : colonnes réellement équilibrées ---------- */ .galerie-grid { column-fill: balance; orphans: 1; widows: 1; } /* ---------- 5. Séances : plus de case orpheline ---------- 5 cartes sur 3 colonnes laissaient un trou béant en bas à droite. La dernière rangée se centre au lieu de s'aligner à gauche. */ @media (min-width: 981px) { .soins-grid { display: flex; flex-wrap: wrap; justify-content: center; } .soins-grid > .soin-card { flex: 0 1 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); } } /* ---------- 6. Formulaire : les 3 derniers éléments « bruts » de la page ---------- Deux feuilles verrouillent déjà ces champs en !important : emilie-luxe.css:358 .contact-form input/select/textarea { background; border } emilie-da.css:225 input, textarea, select { border-radius: 14px } À !important égal c'est la spécificité qui départage : nos sélecteurs sont plus spécifiques, mais sans !important ils perdaient en silence (chevron absente, case ronde et jamais dorée une fois cochée). Les espaces du data-URI sont encodés %20 : non encodés, l'URL est rejetée. */ .contact-form .form-row select { -webkit-appearance: none !important; -moz-appearance: none; appearance: none !important; padding-right: 42px; /* chevron dessinée, aux couleurs du site, au lieu de celle du système */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%206.2L8%2010.2L12%206.2'%20fill='none'%20stroke='%23C17A5A'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 15px center !important; background-size: 15px !important; cursor: pointer; } .contact-form .form-row textarea { resize: vertical; /* le handle diagonal natif disparaît */ min-height: 140px; } .form-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .contact-form .form-consent input[type="checkbox"] { -webkit-appearance: none !important; -moz-appearance: none; appearance: none !important; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; border: 1px solid rgba(212, 175, 106, 0.55) !important; border-radius: 6px !important; background: rgba(245, 240, 232, 0.10) !important; position: relative; cursor: pointer; transition: background 260ms ease, border-color 260ms ease; } .contact-form .form-consent input[type="checkbox"]:hover { border-color: var(--lumiere-doree, #D4AF6A) !important; background: rgba(212, 175, 106, 0.14) !important; } .contact-form .form-consent input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--lumiere-doree, #D4AF6A), var(--terre-sacree, #C17A5A)) !important; border-color: transparent !important; } .contact-form .form-consent input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; /* pas de !important ici : il porterait aussi sur border-width et la coche redeviendrait un carré plein. Aucune règle concurrente sur ce ::after. */ border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(43deg); } .contact-form .form-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--lumiere-doree, #D4AF6A); outline-offset: 3px; } /* ---------- 7. Compteur du carrousel : ramené dans le champ ---------- Perché à 8 px du haut à droite, il flottait seul très au-dessus des cartes. */ .testi-counter { top: auto; bottom: 16px; right: 26px; } @media (max-width: 720px) { .testi-counter { bottom: 10px; right: 16px; } } /* ---------- 8. Footer : le disclaimer doit se lire ---------- Cormorant italique 13 px à 56 % d'opacité sur brun sombre : au ras du lisible, pour une mention qui a une portée légale. Sans-serif, un peu plus grand, un peu plus contrasté — sans devenir un élément d'appel. */ footer .footer-disclaimer { font-family: 'Manrope', sans-serif; font-style: normal; font-size: 13.5px; line-height: 1.7; color: rgba(245, 240, 232, 0.74); max-width: 860px; margin: 0 auto; } /* ---------- 9. Typographie : séparateurs jamais orphelins ---------- */ .nowrap { white-space: nowrap; } .hero-tagline, .hero-words, .section-sub, .section-title { text-wrap: balance; } /* ---------- 10. MOBILE ---------- */ @media (max-width: 480px) { /* La marque avait disparu : il ne restait qu'une boussole écrasée entre deux grosses pastilles. Elle revient en version courte. */ .nav-brand-text { display: inline-block; font-size: 13.5px; line-height: 1; white-space: nowrap; } .nav-brand-text em { display: none; } .nav-brand { gap: 7px !important; } .nav-brand .logo-mark, .nav-brand .logo-mark svg { width: 26px !important; height: 26px !important; } .nav-cta-compact { padding: 7px 11px !important; font-size: 10.5px !important; } .burger-label { font-size: 10.5px; } /* letter-spacing 0.38em faisait déborder « S'ÉCOUTER · SE GUÉRIR · S'ÉVEILLER » sur deux lignes, en laissant un « · » orphelin en fin de première ligne. Resserré, les trois mots tiennent sur une seule ligne (282 px pour 312). */ .hero-words { letter-spacing: 0.15em; } } @media (max-width: 720px) { /* Corps à 17px / 1.85 non réduit en mobile : la page montait à 23 300 px et chaque carte devenait interminable. */ .about-text p, .soin-card p, .promesse-card p, .souffle-card p { font-size: 15.5px; line-height: 1.68; } .about-mots-perso p { font-size: 15.5px; line-height: 1.68; } } /* ============================================================ VAGUE 2 — 2026-08-03 (session reprise après coupure) Typographie : vrais italiques, charte tenue partout, polices allégées. ============================================================ */ /* ---------- 11. La famille serif n'était jamais définie ---------- `emilie-da.css` déclare `font-family: var(--font-serif, Cormorant, Garamond, serif)` à 3 endroits. La variable n'existe nulle part et « Cormorant » (sans « Garamond ») n'est PAS la famille chargée : ces textes tombaient donc en serif système (Times). Définir la variable répare les 3 d'un coup. */ :root { --font-serif: 'Cormorant Garamond', Garamond, serif; } /* Le bouton « Témoigner » et son ❋ n'héritaient d'aucune famille : ils prenaient le serif générique du navigateur. */ .temoin-invite-btn { font-family: 'Manrope', sans-serif; } .temoin-invite-btn .ico { font-family: 'Cormorant Garamond', Garamond, serif; } /* Les 3 boutons de fermeture « × » sortaient en Arial (aucune famille déclarée sur un