/* faf-service.css — design system boho "Zoe Spirit" des pages services. Scopé sous .faf-page, sauf mention contraire dans les blocs concernés. TENU À LA MAIN. Ce fichier a été généré à l'origine par scripts/gen-boho-css.php depuis docs/constellations-proposal-v3.html, et cet en-tête disait de relancer le générateur plutôt que d'éditer. Ce n'est plus vrai, et le suivre effacerait la moitié du fichier : plus de 30 Ko ont été écrits ici depuis le 05/08/2026 — fonds de héro éditables, arches, `.faf-inline` transparent, tableau des tarifs de la FAQ, plan Leaflet — qui n'existent pas dans la maquette. Le générateur subsiste pour COMPARER quand la maquette évolue : il écrit docs/deploy/faf-service.generated.css, hors du thème, et chiffre l'écart. Ce qui doit être repris se reporte ensuite à la main. */ .faf-page{ }.faf-page *{box-sizing:border-box}html{scroll-behavior:smooth}.faf-page{margin:0; background:var(--paper); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.82; -webkit-font-smoothing:antialiased; overflow-x:hidden}.faf-page a{color:inherit}.faf-page img{max-width:100%; display:block}.faf-page h1,.faf-page h2,.faf-page h3{margin:0; font-weight:400; color:var(--clay-deep); line-height:1.12}.faf-page .eyebrow{font-family:var(--script); font-size:40px; color:var(--sienna); line-height:1; margin:0 0 4px}.faf-page .kicker{font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:10.5px; font-weight:600; color:var(--clay); margin:0 0 16px}.faf-page .script{font-family:var(--script)}.faf-page .orn{display:inline-flex; align-items:center; gap:14px; color:var(--gold)}.faf-page .orn::before,.faf-page .orn::after{content:""; height:1px; width:52px; background:linear-gradient(90deg,transparent,var(--gold))}.faf-page .orn::after{background:linear-gradient(90deg,var(--gold),transparent)}.faf-page .orn svg{width:26px; height:26px}.faf-page .underline{display:block; width:118px; height:12px; margin-top:12px; color:var(--sienna)}.faf-page .center .orn,.faf-page .center .underline{margin-left:auto; margin-right:auto}.faf-page .btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; border-radius:100px; padding:15px 30px; transition:.3s cubic-bezier(.2,.7,.2,1); border:1.5px solid transparent}.faf-page .btn--primary{background:var(--teal); color:#fff!important; box-shadow:0 10px 28px -10px rgba(88,172,159,.7)}.faf-page .btn--primary:hover{background:var(--teal-dark); transform:translateY(-2px)}.faf-page .btn--ghost{background:transparent; color:var(--clay-deep)!important; border-color:var(--clay)}.faf-page .btn--ghost:hover{background:var(--nude); border-color:var(--clay-deep)}.faf-page .btn svg{width:14px;height:14px}.faf-page .reveal{opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}.faf-page .reveal.in{opacity:1; transform:none}.faf-page .hd{position:absolute; top:0; left:0; right:0; z-index:40}.faf-page .hd-in{max-width:var(--wrap); margin:0 auto; padding:24px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px}.faf-page .hd-logo{font-family:var(--display); font-weight:600; font-size:27px; color:var(--ink); text-decoration:none}.faf-page .hd-logo span{color:var(--teal)}.faf-page .hd-nav{display:flex; gap:30px; align-items:center}.faf-page .hd-nav a{font-size:13.5px; font-weight:500; color:var(--ink-soft); text-decoration:none}.faf-page .hd-nav a:hover,.faf-page .hd-nav a.on{color:var(--clay-deep)}.faf-page .hd-cta{padding:11px 22px; font-size:11px}@media(max-width:900px){.faf-page .hd-nav a:not(.hd-cta){display:none}}.faf-page .hero{position:relative; min-height:98vh; display:flex; align-items:center; overflow:hidden; background:radial-gradient(120% 90% at 78% 12%, var(--nude) 0%, var(--sand) 46%, var(--paper) 100%)}.faf-page .hero-in{position:relative; z-index:3; max-width:var(--wrap); margin:0 auto; padding:126px 30px 74px; display:grid; grid-template-columns:1.02fr 1fr; gap:44px; align-items:center; width:100%}.faf-page .hero-copy{max-width:560px}.faf-page .hero h1{font-family:var(--display); font-weight:500; font-size:clamp(54px,7.2vw,96px); color:var(--clay-deep); line-height:.96; margin-bottom:14px}.faf-page .hero h1 em{font-style:italic; color:var(--clay)}.faf-page .hero-tag{font-family:var(--display); font-style:italic; font-size:clamp(21px,2.6vw,27px); color:var(--ink); line-height:1.42; margin:0 0 24px; max-width:27ch}.faf-page .hero-lead{font-size:17px; color:var(--text); max-width:42ch; margin:0 0 32px}.faf-page .hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}.faf-page .hero-meta{display:flex; gap:9px; flex-wrap:wrap}.faf-page .chip{display:inline-flex; align-items:center; gap:0; background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:100px; padding:9px 16px; font-size:12.5px; font-weight:500; color:var(--ink-soft); backdrop-filter:blur(4px)}.faf-page .chip b{color:var(--clay-deep); font-weight:600; display:contents}.faf-page .chip svg{width:15px;height:15px;color:var(--teal);margin-right:8px}.faf-page .hero-photo{position:relative; justify-self:end; width:100%; max-width:440px}.faf-page .hero-photo .sun{position:absolute; right:-14px; top:-46px; width:96px; height:96px; color:var(--gold); opacity:.9; z-index:2; animation:spin 60s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.faf-page .hero-frame{position:relative; border-radius:220px 220px 24px 24px; overflow:hidden; border:1px solid var(--nude-deep); box-shadow:0 46px 90px -44px rgba(120,80,45,.7); aspect-ratio:3/4}.faf-page .hero-frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 8px rgba(255,255,255,.9); border-radius:inherit; pointer-events:none}.faf-page .hero-frame img{width:100%; height:100%; object-fit:cover; object-position:center 16%; transform:scale(1.08); animation:sz 14s ease-out forwards}@keyframes sz{to{transform:scale(1)}}.faf-page .hero-card{position:absolute; left:-24px; bottom:38px; background:var(--cream); border:1px solid var(--nude-deep); border-radius:16px; padding:14px 20px; box-shadow:0 24px 48px -26px rgba(120,80,45,.55)}.faf-page .hero-card .st{color:var(--gold); font-size:14px; letter-spacing:1.5px}.faf-page .hero-card b{display:block; font-family:var(--display); font-weight:600; font-size:20px; color:var(--ink); margin-top:2px}.faf-page .hero-card span{font-size:12px; color:var(--ink-muted)}.faf-page .scrollcue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; font-family:var(--script); font-size:32px; color:var(--clay); display:flex; flex-direction:column; align-items:center; gap:4px}.faf-page .scrollcue span{width:1px; height:40px; background:linear-gradient(var(--clay),transparent); animation:cue 2s ease-in-out infinite}@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}@media(max-width:900px){.faf-page .hero{min-height:auto}.faf-page .hero-in{grid-template-columns:1fr; padding-top:74px; gap:40px}.faf-page .hero-photo{max-width:340px; justify-self:center; order:-1}.faf-page .scrollcue{display:none}}.faf-page .marie{position:relative; background:var(--sand)}.faf-page .marie-grid{max-width:1340px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:stretch}.faf-page .marie-photo{position:relative; min-height:580px; background:url('/wp-content/uploads/2026/02/Marie_Garbar_Face_a_Face_Leernes_1.jpg') center/cover}.faf-page .marie-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,var(--sand))}.faf-page .marie-inset{position:absolute; right:-72px; bottom:60px; width:214px; border-radius:150px 150px 18px 18px; overflow:hidden; border:7px solid var(--cream); box-shadow:0 30px 60px -28px rgba(120,80,45,.6); z-index:2}.faf-page .marie-inset img{aspect-ratio:3/3.7; object-fit:cover; object-position:center 14%}.faf-page .marie-body{padding:82px 72px 82px 100px; display:flex; flex-direction:column; justify-content:center}.faf-page .marie-body h2{font-family:var(--display); font-weight:500; font-size:clamp(34px,4vw,50px); color:var(--clay-deep); margin:10px 0 22px; line-height:1.06}.faf-page .marie-body p{margin:0 0 18px; font-size:16.5px}.faf-page .marie-sign{font-family:var(--script); font-size:68px; color:var(--clay); line-height:.8; margin-top:10px}.faf-page .marie-role{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-top:6px}@media(max-width:900px){.faf-page .marie-grid{grid-template-columns:1fr}.faf-page .marie-photo{min-height:340px}.faf-page .marie-photo::after{background:linear-gradient(0deg,var(--sand),transparent 55%)}.faf-page .marie-inset{display:none}.faf-page .marie-body{padding:54px 30px 62px}}.faf-page .intro{max-width:840px; margin:0 auto; padding:92px 30px 4px; text-align:center}.faf-page .intro .lead{font-family:var(--display); font-size:clamp(26px,3.2vw,35px); color:var(--ink); line-height:1.42; margin:22px 0 0; font-weight:400}.faf-page .formats{max-width:var(--wrap); margin:0 auto; padding:64px 30px 30px}.faf-page .formats-h{text-align:center; margin-bottom:48px}.faf-page .formats-h h2{font-family:var(--display); font-weight:500; font-size:clamp(32px,4vw,48px); color:var(--clay-deep); margin:6px 0 0}.faf-page .formats-h p{color:var(--ink-soft); max-width:560px; margin:16px auto 0}.faf-page .formats-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px}.faf-page .fmt{background:var(--cream); border:1px solid var(--nude-deep); border-radius:28px; overflow:hidden; box-shadow:0 34px 68px -46px rgba(120,80,45,.6); display:flex; flex-direction:column; transition:.4s}.faf-page .fmt:hover{transform:translateY(-6px); box-shadow:0 46px 84px -42px rgba(120,80,45,.65)}.faf-page .fmt-img{height:300px; overflow:hidden; position:relative; border-radius:0 0 40px 40px}.faf-page .fmt-img img{width:100%; height:100%; object-fit:cover; transition:.7s cubic-bezier(.2,.7,.2,1)}.faf-page .fmt:hover .fmt-img img{transform:scale(1.06)}.faf-page .fmt-flag{position:absolute; top:20px; left:20px; background:rgba(252,248,241,.94); color:var(--clay-deep); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:8px 16px; border-radius:100px}.faf-page .fmt-body{padding:30px 34px 34px; display:flex; flex-direction:column; flex:1}.faf-page .fmt h3{font-family:var(--display); font-weight:600; font-size:32px; color:var(--clay-deep); margin-bottom:2px}.faf-page .fmt-sub{font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:600; color:var(--sienna); margin-bottom:16px}.faf-page .fmt p{margin:0 0 18px; font-size:15.5px; color:var(--ink-soft)}.faf-page .fmt ul{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px}.faf-page .fmt li{position:relative; padding-left:28px; font-size:15px}.faf-page .fmt li::before{content:""; position:absolute; left:3px; top:9px; width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:rgba(88,172,159,.12); border:1.5px solid var(--teal)}.faf-page .fmt-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:20px; border-top:1px solid var(--line-soft)}.faf-page .fmt-price{font-family:var(--display); font-weight:600; font-size:32px; color:var(--clay-deep); line-height:1}.faf-page .fmt-price small{display:block; font-family:var(--sans); font-weight:400; font-size:12px; color:var(--ink-muted); margin-top:4px}@media(max-width:900px){.faf-page .formats-grid{grid-template-columns:1fr}}.faf-page .content{max-width:var(--wrap); margin:0 auto; padding:82px 30px 20px}.faf-page .split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:74px}.faf-page .split.rev .split-media{order:2}.faf-page .split-media{position:relative; border-radius:200px 200px 26px 26px; overflow:hidden; border:1px solid var(--nude-deep); box-shadow:0 34px 68px -46px rgba(120,80,45,.6); aspect-ratio:4/3.6}.faf-page .split.rev .split-media{border-radius:26px 26px 200px 200px}.faf-page .split-media img{width:100%; height:100%; object-fit:cover}.faf-page .split h2{font-family:var(--display); font-weight:500; font-size:clamp(30px,3.6vw,44px); color:var(--clay-deep); margin-bottom:16px; line-height:1.08}.faf-page .split p{margin:0 0 16px}.faf-page .split strong{color:var(--ink); font-weight:600}.faf-page .split .lead-para{font-family:var(--display); font-size:24px; color:var(--ink); line-height:1.5}.faf-page .ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px}.faf-page .ul li{position:relative; padding-left:30px; font-size:16px}.faf-page .ul li::before{content:""; position:absolute; left:4px; top:9px; width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:rgba(88,172,159,.12); border:1.5px solid var(--teal)}.faf-page .deroule{max-width:var(--wrap); margin:0 auto; padding:20px 30px 64px}.faf-page .deroule-h{text-align:center; margin-bottom:44px}.faf-page .deroule-h h2{font-family:var(--display); font-weight:500; font-size:clamp(30px,3.6vw,44px); color:var(--clay-deep)}.faf-page .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}.faf-page .step{background:var(--cream); border:1px solid var(--nude-deep); border-radius:22px; padding:30px 26px; box-shadow:0 22px 48px -42px rgba(120,80,45,.55)}.faf-page .step-n{font-family:var(--script); font-size:52px; color:var(--sienna); line-height:.7; margin-bottom:14px}.faf-page .step h3{font-family:var(--display); font-weight:600; font-size:22px; color:var(--clay-deep); margin-bottom:6px}.faf-page .step p{margin:0; font-size:14.5px; color:var(--ink-soft)}@media(max-width:900px){.faf-page .split{grid-template-columns:1fr; gap:34px}.faf-page .split.rev .split-media{order:0}.faf-page .steps{grid-template-columns:1fr 1fr}}@media(max-width:600px){.faf-page .steps{grid-template-columns:1fr}}.faf-page .band{position:relative; min-height:74vh; display:flex; align-items:center; justify-content:center; text-align:center; background:url('https://www.face-a-face.be/wp-content/uploads/2025/11/cherry-blossom-tree-1225186_640.jpg') center 30%/cover; background-attachment:fixed}.faf-page .band::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(241,227,213,.74),rgba(228,209,191,.84))}.faf-page .band-in{position:relative; max-width:820px; padding:86px 30px}.faf-page .band blockquote{font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(28px,4.6vw,48px); color:var(--clay-deep); line-height:1.3; margin:24px 0 0}.faf-page .band cite{display:block; margin-top:24px; font-family:var(--script); font-size:24px; color:var(--sienna)}@media(max-width:900px){.faf-page .band{background-attachment:scroll; min-height:auto}}.faf-page .tm{background:var(--sand)}.faf-page .tm-in{max-width:var(--wrap); margin:0 auto; padding:92px 30px}.faf-page .tm-head{text-align:center; max-width:640px; margin:0 auto 50px}.faf-page .tm-head h2{font-family:var(--display); font-weight:500; font-size:clamp(32px,4vw,48px); color:var(--clay-deep); margin:6px 0 14px}.faf-page .tm-rate{display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft)}.faf-page .stars{color:var(--gold); letter-spacing:2px}.faf-page .tm-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:900px; margin:0 auto}.faf-page .tm-card{background:var(--cream); border:1px solid var(--nude-deep); border-radius:26px; padding:42px; position:relative; box-shadow:0 30px 62px -48px rgba(120,80,45,.6)}.faf-page .tm-card::before{content:"\201C"; position:absolute; top:18px; right:32px; font-family:var(--display); font-size:110px; color:var(--nude-deep); line-height:1}.faf-page .tm-card .stars{font-size:15px; margin-bottom:18px}.faf-page .tm-quote{font-family:var(--display); font-style:italic; font-size:23px; line-height:1.5; color:var(--ink); margin:0 0 26px; position:relative}.faf-page .tm-auth{display:flex; align-items:center; gap:13px; padding-top:20px; border-top:1px solid var(--line-soft)}.faf-page .tm-ini{width:46px; height:46px; border-radius:50%; background:var(--nude); color:var(--clay-deep); font-family:var(--display); font-weight:600; display:flex; align-items:center; justify-content:center; font-size:20px}.faf-page .tm-auth strong{display:block; font-size:14px; color:var(--ink)}.faf-page .tm-auth span{font-size:12.5px; color:var(--ink-muted)}@media(max-width:900px){.faf-page .tm-grid{grid-template-columns:1fr}}.faf-page .faq{max-width:800px; margin:0 auto; padding:92px 30px 20px}.faf-page .faq h2{font-family:var(--display); font-weight:500; font-size:clamp(30px,3.6vw,44px); color:var(--clay-deep); text-align:center; margin-bottom:8px}.faf-page .faq details{border-bottom:1px solid var(--line); padding:6px 0}.faf-page .faq summary{cursor:pointer; list-style:none; padding:18px 34px 18px 4px; position:relative; font-weight:600; color:var(--ink); font-size:17px}.faf-page .faq summary::-webkit-details-marker{display:none}.faf-page .faq summary::after{content:"+"; position:absolute; right:6px; top:15px; font-family:var(--display); font-size:30px; color:var(--sienna); transition:.25s}.faf-page .faq details[open] summary::after{transform:rotate(45deg)}.faf-page .faq details p{margin:0 4px 20px; color:var(--ink-soft); font-size:15.5px}.faf-page .rel{max-width:var(--wrap); margin:0 auto; padding:78px 30px}.faf-page .rel-h{text-align:center; margin-bottom:46px}.faf-page .rel-h h2{font-family:var(--display); font-weight:500; font-size:clamp(30px,3.6vw,44px); color:var(--clay-deep); margin:6px 0}.faf-page .rel-h p{color:var(--ink-soft); margin:16px auto 0; max-width:520px}.faf-page .rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}.faf-page .rel-card{display:block; background:var(--cream); border:1px solid var(--nude-deep); border-radius:24px; overflow:hidden; text-decoration:none; transition:.35s; box-shadow:0 24px 52px -46px rgba(120,80,45,.55)}.faf-page .rel-card:hover{transform:translateY(-6px); box-shadow:0 40px 70px -42px rgba(120,80,45,.6)}.faf-page .rel-img{height:190px; overflow:hidden}.faf-page .rel-img img{width:100%; height:100%; object-fit:cover; transition:.6s}.faf-page .rel-card:hover .rel-img img{transform:scale(1.07)}.faf-page .rel-body{padding:24px 26px 28px}.faf-page .rel-badge{font-family:var(--sans); text-transform:uppercase; letter-spacing:.15em; font-size:10.5px; font-weight:600; color:var(--teal); display:block; margin-bottom:10px}.faf-page .rel-body h3{font-family:var(--display); font-weight:600; font-size:25px; color:var(--clay-deep); margin-bottom:8px}.faf-page .rel-body p{font-size:14.5px; color:var(--ink-soft); margin:0 0 14px}.faf-page .rel-arr{font-size:12px; font-weight:600; color:var(--clay-deep); text-transform:uppercase; letter-spacing:.1em}@media(max-width:900px){.faf-page .rel-grid{grid-template-columns:1fr}}.faf-page .cta{position:relative; overflow:hidden; min-height:62vh; display:flex; align-items:center; justify-content:center; text-align:center; background:url('https://www.face-a-face.be/wp-content/uploads/2025/11/a374d90e-d45b-4533-b3e6-b707cd99cc89-1024x585.jpeg') center/cover}.faf-page .cta::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(74,58,42,.58),rgba(74,58,42,.7))}.faf-page .cta-in{position:relative; z-index:2; max-width:760px; padding:96px 30px; color:#fff}.faf-page .cta .eyebrow{color:#EAD6BE; font-size:52px}.faf-page .cta h2{font-family:var(--display); font-weight:500; font-size:clamp(40px,5.4vw,62px); color:#fff; margin-bottom:18px}.faf-page .cta p{color:rgba(255,255,255,.92); font-size:18px; max-width:50ch; margin:0 auto 32px}.faf-page .cta .btn--primary{font-size:14px; padding:17px 40px}.faf-page .cta-info{margin-top:32px; display:flex; gap:30px; justify-content:center; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.85)}.faf-page .cta-info a,.faf-page .cta-info a:hover{color:#fff; text-decoration:none !important}.faf-page .ft{background:var(--ink); color:rgba(255,255,255,.7)}.faf-page .ft-in{max-width:var(--wrap); margin:0 auto; padding:52px 30px; display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center; font-size:14px}.faf-page .ft-logo{font-family:var(--display); font-weight:600; font-size:25px; color:#fff}.faf-page .ft-logo span{color:var(--teal)}.faf-page .sticky-cta{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60; display:none}@media(max-width:900px){.faf-page .sticky-cta{display:inline-flex}}.faf-page .pagenav{position:fixed; left:24px; top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:column; gap:2px; padding:18px 16px; background:rgba(252,248,241,.72); border:1px solid var(--nude-deep); border-radius:18px; backdrop-filter:blur(6px); box-shadow:0 20px 44px -34px rgba(120,80,45,.5)}.faf-page .pagenav .lbl{font-family:var(--script); font-size:22px; color:var(--sienna); margin-bottom:8px; padding-left:14px; line-height:1}.faf-page .pagenav a{font-family:var(--sans); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-muted); text-decoration:none; padding:7px 0 7px 14px; border-left:1.5px solid var(--nude-deep); transition:.2s}.faf-page .pagenav a:hover,.faf-page .pagenav a.on{color:var(--clay-deep); border-left-color:var(--teal)}@media(max-width:1499px){.faf-page .pagenav{display:none}}.faf-page .valid{background:#211d18; color:#e9e2d7; font-size:14px; line-height:1.7}.faf-page .valid-in{max-width:var(--wrap); margin:0 auto; padding:40px 30px}.faf-page .valid h4{color:#fff; font-size:14px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.12em}.faf-page .valid code{background:#332d25; padding:2px 7px; border-radius:5px; color:#9ad3c8; font-size:12.5px}.faf-page .valid ul{margin:10px 0 22px; padding-left:20px}.faf-page .valid li{margin-bottom:6px}.faf-page .valid .tag{display:inline-block; background:#332d25; color:#d4a96a; border-radius:100px; padding:3px 12px; font-size:12px; margin:3px 4px 3px 0} /* ============ Overrides d'intégration (bloc HTML dans Elementor) ============ */ /* Pleine largeur : casse le conteneur Elementor "boxé". */ .faf-page{ width:calc(100vw - var(--sb, 0px)) !important; max-width:calc(100vw - var(--sb, 0px)) !important; margin-left:calc(50% - 50vw + var(--sb, 0px) / 2) !important; margin-right:calc(50% - 50vw) !important; } /* Fragment .faf-page inséré DANS une colonne native (chips, photo hero) : remplit la colonne, pas de plein écran. */ .faf-page.faf-inline{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } /* Ancres (sommaire, boutons #formats/#faq…) : compenser le header fixe (~96px) au scroll. */ html{ scroll-padding-top:112px; } /* Sommaire en rail fixe : retiré. --------------------------------------------------------------------------- Il s'affichait au-delà de 1500px, en pariant qu'une fenêtre large laisse une marge gauche libre. Ce pari est faux depuis la refonte : les heros sont pleine largeur et leur texte commence à 26px du bord — mesuré à 1920px, le rail le recouvrait encore de 162px. Aucune largeur ne lui donne la place, il n'y a donc pas de seuil à relever. Le sommaire reste accessible partout par la tuile flottante en bas à gauche (`.faf-tocnav`, faf-tools.js), qui reprend ces mêmes entrées et ne recouvre rien. Ce bloc reste dans le DOM : c'est lui qui sert de source aux entrées. --------------------------------------------------------------------------- Le masquer ici suffit à réveiller la tuile : syncTocButton() ne l'efface que lorsque la source est visible ET persistante. */ .faf-page .pagenav{ display:none !important; } /* Sommaire : fondu quand le footer entre dans le viewport (évite l'overlap du logo FaF). Classe .is-hidden posée par faf-service.js. */ .faf-page .pagenav{ transition:opacity .28s ease, visibility .28s ease; } .faf-page .pagenav.is-hidden{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } /* Heros .faf-page (guidance, hypersensibilité) sur le nouveau fond image : arche alignée sur les autres (pas de cadre blanc interne, ombre douce) + chips en pastille crème nette au lieu de translucide. */ /* Cause racine du « fond dans le masque » : le wrapper .faf-page.faf-inline a un fond crème opaque (hérité de .faf-page) qui remplissait les coins arrondis de l'arche → transparent, le fond de section passe derrière. */ .faf-page.faf-inline{ background:transparent !important; } /* Définition des arches sur le nouveau fond image (TOUS les heros) : fine bague crème + ombre douce, pour que l'arche se détache du fond sans l'effet « gros cadre blanc / sticker ». */ .faf-page .hero-frame{ box-shadow:0 40px 74px -42px rgba(120,80,45,.62) !important; border-color:#E4D1BF !important; } .faf-page .hero-frame::after{ display:block !important; box-shadow:inset 0 0 0 4px rgba(252,248,241,.82) !important; } .faf-native-arch img, .faf-native-arch-rev img{ border:4px solid rgba(252,248,241,.85) !important; box-shadow:0 40px 74px -42px rgba(120,80,45,.6) !important; } .faf-page .hero .chip{ background:rgba(252,248,241,.9) !important; border-color:var(--nude-deep) !important; } /* Heros faf-native : premier titre remonté un peu en mobile (moins d'espace mort sous le header) */ @media(max-width:900px){ .elementor-top-section:has(.faf-native-h1){ padding-top:22px !important; } } /* Desktop : garder de l'air sous le header/carte-logo (l'icône inline avait trop rapproché l'eyebrow) */ @media(min-width:901px){ .elementor-top-section:has(.faf-native-h1){ padding-top:70px !important; } } /* Header maquette retiré → réduire l'espace haut du hero. */ .faf-page .hero-in{ padding-top:40px !important; } /* CTA flottant redondant masqué. */ .faf-page .sticky-cta{ display:none !important; } /* Hero H1 un peu plus petit + interligne resserré. */ .faf-page .hero h1{ font-size:clamp(42px, 5.6vw, 80px) !important; line-height:.9 !important; } /* Chips : "Individuel/Séance" seul sur la 1re ligne, timing + lieu ensemble en dessous. */ .faf-page .hero-meta{ gap:8px !important; } .faf-page .hero-meta{ flex-wrap:wrap !important; } .faf-page .hero-meta .chip{ padding:8px 14px !important; font-size:12.5px !important; white-space:nowrap !important; } /* ============ Widgets Elementor NATIFS (hors .faf-page, via classes CSS) ============ */ /* Section native au fond boho */ .faf-sec{ background:#FBF6EE; } .faf-sec-sand{ background:#F5EBDD; } /* Accent manuscrit + titres natifs */ /* .elementor-element pour battre la spécificité du kit Elementor (typographie). */ .elementor-element.faf-native-eyebrow .elementor-heading-title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-style:italic !important; font-weight:500 !important; letter-spacing:.012em !important; font-size:31px !important; color:#C0855A !important; line-height:1 !important; } .elementor-element.faf-native-h2 .elementor-heading-title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:500 !important; font-size:clamp(30px,3.6vw,44px) !important; color:#95633A !important; } .elementor-element.faf-native-lead .elementor-widget-container>*{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:24px !important; color:#3E362D !important; line-height:1.5 !important; } .elementor-element.faf-native-text .elementor-widget-container{ font-family:'Raleway',sans-serif; font-size:17px; color:#5E5347; line-height:1.8; } /* FAQ : widget Toggle natif */ .elementor-element.faf-faq{ max-width:780px; margin:0 auto; } .elementor-element.faf-faq .elementor-toggle-item{ border-bottom:1px solid rgba(62,54,45,.10); } .elementor-element.faf-faq .elementor-tab-title{ font-family:'Raleway',sans-serif !important; font-weight:600 !important; color:#3E362D !important; font-size:17px !important; padding:18px 4px !important; } .elementor-element.faf-faq .elementor-tab-title .elementor-toggle-icon{ color:#C0855A !important; } .elementor-element.faf-faq .elementor-tab-content{ font-family:'Raleway',sans-serif !important; color:#6E6155 !important; font-size:15.5px !important; line-height:1.7 !important; } /* Sections texte natives (2 colonnes : Image en arche + prose) */ .faf-native-sec{ background:#FBF6EE; } .faf-native-arch img{ border-radius:200px 200px 26px 26px !important; border:1px solid #E4D1BF; box-shadow:0 34px 68px -46px rgba(120,80,45,.6); } .faf-native-arch-rev img{ border-radius:26px 26px 200px 200px !important; border:1px solid #E4D1BF; box-shadow:0 34px 68px -46px rgba(120,80,45,.6); } /* Alternance texte/image : les blocs dont l'image porte .faf-flip passent image à gauche (desktop). Mobile inchangé (stack DOM). */ @media(min-width:901px){ .elementor-top-section:has(.faf-flip) > .elementor-container{ flex-direction:row-reverse; } } /* Images en arche : plus hautes et légèrement moins larges en desktop (équilibre avec la colonne texte). */ @media(min-width:901px){ .faf-native-arch img, .faf-native-arch-rev img{ width:90%; margin-inline:auto; min-height:490px; object-fit:cover; } } .elementor-element.faf-native-lead .elementor-widget-container p{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:24px !important; color:#3E362D !important; line-height:1.5 !important; } .elementor-element.faf-native-lead .script,.elementor-element.faf-native-lead em{ font-family:var(--script, "Cormorant Garamond", Georgia, serif) !important; color:#C0855A !important; font-style:normal !important; } .elementor-element.faf-native-text .elementor-widget-container{ font-family:'Raleway',sans-serif; color:#5E5347; font-size:17px; line-height:1.8; } .elementor-element.faf-native-text p{ margin:0 0 16px; } .elementor-element.faf-native-text strong{ color:#3E362D; } .elementor-element.faf-native-text ul{ list-style:none; padding:0; margin:16px 0; } .elementor-element.faf-native-text li{ position:relative; padding-left:30px; margin-bottom:11px; } .elementor-element.faf-native-text li::before{ content:""; position:absolute; left:4px; top:11px; width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:rgba(88,172,159,.12); border:1.5px solid #58AC9F; } /* Titres natifs complémentaires */ .elementor-element.faf-native-h1 .elementor-heading-title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:500 !important; font-size:clamp(40px,6vw,74px) !important; color:#95633A !important; line-height:.98 !important; } .elementor-element.faf-native-h3 .elementor-heading-title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:600 !important; font-size:22px !important; color:#95633A !important; } /* Centrage natif (titres + texte) */ .faf-native-center .elementor-heading-title{ text-align:center !important; } .faf-native-center .elementor-widget-container{ text-align:center !important; } .elementor-element.faf-native-lead.faf-native-center .elementor-widget-container{ max-width:640px; margin-left:auto; margin-right:auto; } /* Badge numéro d'étape */ .elementor-element.faf-native-stepn .elementor-heading-title{ display:flex; align-items:center; justify-content:center; width:54px; height:54px; line-height:1; margin:0 auto 16px; text-align:center; border-radius:50%; background:rgba(192,133,90,.12); border:1px solid rgba(192,133,90,.32); font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:600 !important; font-size:26px !important; color:#C0855A !important; } /* Boutons natifs boho */ .elementor-element.faf-native-btn .elementor-button{ background:#58AC9F !important; color:#fff !important; border-radius:999px !important; font-family:'Raleway',sans-serif !important; font-weight:600 !important; letter-spacing:.02em !important; padding:15px 32px !important; box-shadow:0 16px 30px -16px rgba(88,172,159,.9) !important; transition:transform .25s ease, background .25s ease; } .elementor-element.faf-native-btn .elementor-button:hover{ transform:translateY(-2px); background:#3d8579 !important; color:#fff !important; border-color:#3d8579 !important; } .elementor-element.faf-native-btn-light .elementor-button{ background:#FBF6EE !important; color:#95633A !important; } .elementor-element.faf-native-btn-ghost .elementor-button{ background:transparent !important; color:#95633A !important; border:1px solid rgba(150,90,45,.4) !important; box-shadow:none !important; } /* Bouton d'inscription conditionnel ([faf_book_cta]). Quand plus rien n'est ouvert, son libellé change — « Être prévenu de la prochaine date » — et la note dit pourquoi : sans elle, le repli passe pour l'action normale de la page. */ .faf-cta-note{ font-family:'Raleway',sans-serif; font-size:13px; color:#8A7A6B; margin:10px 0 0; } /* Sur la bande d'appel à l'action, le fond est clay : l'encre par défaut y devient illisible. `#reserver` est l'ancre que portent toutes les pages de service. */ #reserver .faf-cta-note{ color:#F0D9C4; } /* ===== HARMONISATION TYPO — échelle unique (8 tailles), front only. Cursive Parisienne gardée, corps 16px. ===== */ :root{ --fs-display:clamp(40px,6vw,60px); --fs-h2:clamp(30px,3.6vw,46px); --fs-h3:22px; --fs-lead:24px; /* Accroches. La réduction tentée le 01/08 partait d'une observation faite sur la SEULE ligne longue du site — celle du hero d'accueil, ~70 caractères, qui pesait autant que son titre. Les 87 accroches des pages de services font 8 à 32 caractères : la même correction les a rétrécies sans qu'aucune n'ait le défaut qu'elle corrigeait. Échelle d'origine rétablie. */ --fs-script:clamp(30px,3.4vw,40px); --fs-body:16px; --fs-small:14px; --fs-label:11.5px; } .elementor-element.faf-native-eyebrow .elementor-heading-title{ font-size:var(--fs-script) !important; } .elementor-element.faf-native-h1 .elementor-heading-title{ font-size:var(--fs-display) !important; font-weight:500 !important; } .elementor-element.faf-native-h2 .elementor-heading-title{ font-size:var(--fs-h2) !important; font-weight:500 !important; } .elementor-element.faf-native-h3 .elementor-heading-title{ font-size:var(--fs-h3) !important; font-weight:500 !important; } .elementor-element.faf-native-lead .elementor-widget-container p{ font-size:var(--fs-lead) !important; } .elementor-element.faf-native-text .elementor-widget-container{ font-size:var(--fs-body) !important; } .elementor-element.faf-native-role .elementor-widget-container p, .elementor-element.faf-band-cite .elementor-widget-container p{ font-size:var(--fs-label) !important; font-weight:600 !important; letter-spacing:.14em !important; } /* Section CTA sur fond clay : texte crème (spécificité .elementor-element pour battre h2/lead) */ .elementor-element.faf-native-onclay .elementor-heading-title,.elementor-element.faf-native-onclay .elementor-widget-container,.elementor-element.faf-native-onclay .elementor-widget-container p{ color:#FBF6EE !important; } .elementor-element.faf-native-eyebrow.faf-native-onclay .elementor-heading-title{ color:#F0D9C4 !important; } .elementor-element.faf-native-contact .elementor-widget-container{ font-family:'Raleway',sans-serif; font-size:15px; } .elementor-element.faf-native-contact a{ color:#FBF6EE !important; text-decoration:underline; margin:0 8px; } /* Déroulé : cartes d'étapes empilées en mobile */ @media(max-width:767px){ .elementor-element.faf-native-h1 .elementor-heading-title{ font-size:clamp(34px,10vw,52px) !important; } } /* Hero natif : kicker, accent script du H1, accroche, boutons inline, chips */ .elementor-element.faf-native-kicker .elementor-heading-title{ font-family:'Raleway',sans-serif !important; font-weight:600 !important; font-size:12.5px !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#A98D74 !important; margin-top:2px; } .elementor-element.faf-native-h1 .elementor-heading-title em{ font-family:'Cormorant Garamond',Georgia,serif !important; font-style:italic !important; font-weight:500 !important; color:#C0855A !important; } .elementor-element.faf-native-tag .elementor-widget-container p{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:22px !important; font-style:italic; color:#6E6155 !important; line-height:1.4 !important; margin:6px 0 4px; } .elementor-element.faf-hero-btn{ display:inline-block !important; width:auto !important; margin:6px 12px 6px 0 !important; } .elementor-element.faf-hero-btn .elementor-button{ width:auto !important; } .faf-hero-chips{ margin-top:10px; } /* Témoignages : widget Posts (skin cards) stylé boho */ .faf-tm-grid .elementor-post__card{ border:none !important; border-radius:20px !important; overflow:hidden; background:#fff; box-shadow:0 24px 50px -30px rgba(120,80,45,.28); } .faf-tm-grid .elementor-post__thumbnail{ padding-bottom:62% !important; } .faf-tm-grid .elementor-post__avatar,.faf-tm-grid .elementor-post__meta-data{ display:none !important; } .faf-tm-all{ text-align:center; margin-top:34px; } /* Témoignages : pas de photos clients → masquer les avatars (home + pages). */ .faf-tm-avatar{ display:none !important; } .faf-tm-grid .elementor-post__badge{ background:#FBF6EE !important; color:#95633A !important; font-family:'Raleway',sans-serif !important; font-weight:600 !important; font-size:11px !important; letter-spacing:.03em; border-radius:999px !important; box-shadow:0 6px 16px -8px rgba(120,80,45,.5); } .faf-tm-grid .elementor-post__text{ padding:22px 22px 26px !important; } .faf-tm-grid .elementor-post__title{ margin:0 0 8px !important; } .faf-tm-grid .elementor-post__title a{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:600 !important; font-size:21px !important; color:#95633A !important; line-height:1.28 !important; } .faf-tm-grid .elementor-post__excerpt p{ font-family:'Raleway',sans-serif !important; font-size:15px !important; color:#6E6155 !important; line-height:1.7 !important; margin:0; } .faf-tm-grid .elementor-post__read-more{ font-family:'Raleway',sans-serif !important; color:#C0855A !important; font-weight:600 !important; text-decoration:none; } /* Marie native : signature + rôle + photo (fond CSS partagé) */ .elementor-element.faf-native-sign .elementor-heading-title{ font-family:var(--script, "Cormorant Garamond", Georgia, serif) !important; font-size:clamp(30px,3.2vw,42px) !important; color:#C0855A !important; margin-top:8px !important; line-height:.9 !important; } .elementor-element.faf-native-role .elementor-widget-container p{ font-family:'Raleway',sans-serif !important; font-size:12.5px !important; letter-spacing:.12em; text-transform:uppercase; color:#A98D74 !important; margin:6px 0 0 !important; } /* Photo Marie : conserve le fondu vers le sable d'origine (.faf-page .marie-photo::after), remplit la colonne */ .faf-inline .marie-photo{ height:100%; min-height:520px; } /* Intro : ornement + lead centré grand format + accent script (fidèle au design v3) */ .faf-orn{ text-align:center; } .faf-orn svg{ width:32px; height:38px; margin:0 auto 14px; display:block; opacity:.85; } /* Flourish "underline" sous les titres de section (formats, déroulé, FAQ) */ .faf-ul{ text-align:center; margin:4px 0 18px; } .faf-ul svg{ width:116px; height:12px; } .elementor-element.faf-native-intro .elementor-widget-container{ max-width:840px; margin:0 auto; } .elementor-element.faf-native-intro .elementor-widget-container p{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:clamp(26px,3.2vw,35px) !important; color:#3E362D !important; line-height:1.42 !important; font-weight:400 !important; text-align:center !important; margin:0 !important; } .elementor-element.faf-native-intro .script,.elementor-element.faf-native-intro em{ font-family:var(--script, "Cormorant Garamond", Georgia, serif) !important; font-style:normal !important; color:#C0855A !important; font-size:1.18em !important; } /* Cartes formats / services liés : image, badge, sous-titre, prix, flèche */ .elementor-element.faf-card-img img{ border-radius:16px !important; aspect-ratio:16/10; object-fit:cover; width:100%; } .elementor-element.faf-card-flag .elementor-heading-title{ display:inline-block; font-family:'Raleway',sans-serif !important; font-weight:600 !important; font-size:11.5px !important; letter-spacing:.05em; text-transform:uppercase; color:#95633A !important; background:rgba(192,133,90,.14); border-radius:999px; padding:5px 13px; margin-top:16px !important; } .elementor-element.faf-card-sub .elementor-widget-container p{ font-family:'Raleway',sans-serif !important; font-size:13px !important; letter-spacing:.03em; text-transform:uppercase; color:#A98D74 !important; margin:8px 0 4px !important; } .elementor-element.faf-card-price .elementor-widget-container p{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:600 !important; font-size:30px !important; color:#95633A !important; margin:14px 0 12px !important; } .elementor-element.faf-card-price small,.faf-card-price span{ display:block; font-family:'Raleway',sans-serif !important; font-size:12px !important; font-weight:400; color:#A98D74; letter-spacing:.02em; margin-top:2px; } /* Cartes services (rel) : bouton "Réserver →" en bas + grille souple 3/rangée qui wrappe (3+2) */ .elementor-element.faf-rel-arr{ margin-top:auto !important; } .elementor-element.faf-rel-arr .elementor-button{ padding:9px 20px !important; font-size:13px !important; } .elementor-inner-section > .elementor-container{ flex-wrap:wrap; justify-content:center; row-gap:22px; } .elementor-inner-section .elementor-column.elementor-col-33{ flex:0 1 calc(33.333% - 16px) !important; max-width:calc(33.333% - 16px) !important; min-width:250px; } .elementor-inner-section .elementor-column > .elementor-element-populated,.elementor-inner-section .elementor-column > .elementor-widget-wrap{ height:100%; display:flex; flex-direction:column; } .elementor-inner-section .elementor-column .elementor-element-populated > .elementor-widget-wrap{ flex:1; } @media(max-width:600px){ .elementor-inner-section .elementor-column.elementor-col-33{ flex:1 1 100% !important; max-width:100% !important; min-width:0; } } /* Bandeau citation natif (fond image de section + overlay) */ .elementor-element.faf-band-quote .elementor-heading-title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-style:italic; font-weight:400 !important; font-size:clamp(26px,3.4vw,42px) !important; color:#FBF6EE !important; line-height:1.3 !important; text-align:center; max-width:840px; margin:0 auto; } .elementor-element.faf-band-cite .elementor-widget-container p{ font-family:'Raleway',sans-serif !important; font-size:13px !important; letter-spacing:.09em; text-transform:uppercase; color:rgba(251,246,238,.82) !important; text-align:center; margin-top:18px !important; } /* Hero natif : verrouille la répartition 56/44 (sinon la colonne texte écrase la photo en flexbox). ───────────────────────────────────────────────────────────────────────────── CIBLAGE PAR RANG, PAS PAR `elementor-col-*`. Ces classes n'existent QUE sur le site public : c'est le rendu PHP d'Elementor qui les pose, à partir de `_column_size`. Dans l'éditeur, le widget est construit en JavaScript et la classe n'est jamais émise — le sélecteur ne matchait donc pas, la colonne perdait sa largeur et s'effondrait à la taille de son contenu (83 px mesurés sur /hypersensibilite, soit une photo de 63 px). D'où le hero minuscule dans l'éditeur alors que la page publique était juste. Deux raisons de ne pas simplement rajouter la classe côté éditeur : elle vient d'Elementor, et `elementor-col-42` / `-58` n'ont de toute façon AUCUNE règle dans la CSS d'Elementor (les largeurs définies s'arrêtent à 10, 11, 12, 14, 16, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 83, 90, 100). Ces trois lignes sont la seule chose qui donne une largeur à ces colonnes, ici comme en public. L'ordre est vérifié sur les 21 sections concernées : `#faf-hero` est toujours [texte, photo] sur 14 pages, `#faf-marie` toujours [photo, texte] sur 7. */ @media(min-width:768px){ #faf-hero > .elementor-container > .elementor-column{ min-width:0 !important; } #faf-hero > .elementor-container > .elementor-column:nth-child(1){ width:56% !important; max-width:56% !important; flex:0 0 56% !important; } #faf-hero > .elementor-container > .elementor-column:nth-child(2){ width:44% !important; max-width:44% !important; flex:0 0 44% !important; } /* Section Marie : même verrouillage (sinon la colonne photo s'effondre à 0 → image invisible). */ #faf-marie > .elementor-container > .elementor-column{ min-width:0 !important; } #faf-marie > .elementor-container > .elementor-column:nth-child(1){ width:42% !important; max-width:42% !important; flex:0 0 42% !important; } #faf-marie > .elementor-container > .elementor-column:nth-child(2){ width:58% !important; max-width:58% !important; flex:0 0 58% !important; } } /* ───────────────────────────────────────────────────────────────────────────── Séances de groupe — shortcode [faf_group_events] Deux natures de carte : une date réservable (teal), et le groupe privé qui se demande (clay). Elles se lisent côte à côte sur grand écran ; en une seule colonne pleine largeur, chacune formait un bandeau et la comparaison — la décision réelle du visiteur — devenait impossible d'un coup d'œil. ───────────────────────────────────────────────────────────────────────────── */ .faf-events { display: grid; /* `min(320px, 100%)` et non `320px` : une piste figée reste à 320px même quand le conteneur est plus étroit, et déborde alors de la fenêtre. Sur un téléphone de 360px, marges comprises, c'est exactement le cas. */ grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; /* Pas d'`align-items: start` : les cartes s'étirent à la même hauteur, ce qui aligne leurs boutons sur une seule ligne. Sinon chaque carte colle ses actions à son propre bas, et deux voisines les décalent de 50 px. */ margin: 28px 0; } .faf-event { display: flex; flex-direction: column; height: 100%; padding: 24px 26px 26px; background: var(--cream); border: 1px solid var(--sand-deep); border-radius: 16px; } /* Complet : la carte reste lisible mais cesse d'appeler le regard. */ .faf-event.is-full { opacity: .62; } /* La pastille dit une NATURE, elle n'appelle aucun geste. Pleine et arrondie, elle avait le poids d'un bouton et entrait en concurrence avec les vraies actions plus bas. Réduite à une mention discrète précédée d'un point de couleur. */ .faf-event-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-bottom: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--teal-dark); background: none; padding: 0; } .faf-event-badge:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .faf-event-badge.is-private { color: var(--clay-deep); } .faf-event-title { margin: 0 0 14px; font-size: 1.4rem; line-height: 1.22; } .faf-event-meta { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; } .faf-event-meta li { display: grid; grid-template-columns: 20px 1fr; /* le texte long s'aligne sous lui-même, jamais sous l'icône */ align-items: start; gap: 10px; font-size: .95rem; line-height: 1.45; } /* Trait vectoriel : hérite de la couleur du texte, suit la taille de police. */ .faf-event-ic { width: 17px; height: 17px; margin-top: .15em; color: var(--teal); flex: 0 0 auto; } .faf-event--private .faf-event-ic { color: var(--clay); } /* Les actions restent en bas, quelles que soient les hauteurs de texte : deux cartes voisines gardent leurs boutons alignés. */ .faf-event-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; } .faf-event-cta { display: inline-block; padding: 11px 20px; border-radius: 999px; background: var(--teal); border: 1px solid var(--teal); color: #fff !important; font-size: .88rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; transition: background .2s, border-color .2s; } .faf-event-cta:hover { background: var(--teal-dark); border-color: var(--teal-dark); } .faf-event--private { background: var(--sand); border-color: var(--nude-deep); } .faf-event--private .faf-event-cta { background: var(--clay); border-color: var(--clay); } .faf-event--private .faf-event-cta:hover { background: var(--clay-deep); border-color: var(--clay-deep); } /* Formule complète : présente, explicite, non cliquable. */ .faf-event-cta.is-disabled { background: transparent; border-color: var(--sand-deep); color: var(--ink) !important; opacity: .7; cursor: default; } /* Définitions des formules : une note, pas un paragraphe — elle éclaire le choix sans repousser les boutons hors de l'écran. */ .faf-event-roles-def { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: rgba(88, 172, 159, .07); font-size: .85rem; line-height: 1.45; } .faf-event-roles-def dt { font-weight: 600; color: var(--teal-dark); } .faf-event-roles-def dd { margin: 0 0 8px; color: var(--ink); } .faf-event-roles-def dd:last-child { margin-bottom: 0; } /* Seule occupante de la grille, la phrase s'alignait à gauche d'une piste de 320px au milieu d'une section centrée : elle paraissait mal placée plutôt que sobre. */ .faf-events-empty { font-size: .95rem; margin: 0 0 6px; grid-column: 1 / -1; text-align: center; } /* Sans date programmée et sans carte « groupe privé » — le cas des ateliers d'écriture — le bloc se réduirait à une phrase et le visiteur n'aurait plus rien à faire de sa visite. La seule suite possible reste centrée sous elle. */ .faf-events-empty-cta { grid-column: 1 / -1; margin: 0; text-align: center; } .faf-events-empty-cta .faf-event-cta { display: inline-flex; } /* ─── Alerte d'ouverture de date ──────────────────────────────────────────── Le formulaire prend la place laissée vide par l'absence de séance. Il n'est donc pas un encart ajouté à la page mais ce qui reste à faire quand il n'y a rien à réserver : même carte, même largeur que les séances qu'il remplace. */ /* Le formulaire est posé DANS la grille des séances : sans cette règle il n'en occupe qu'une piste de 320px, et le champ d'e-mail passe sous son bouton dans une carte deux fois trop étroite. Il remplace la liste, il en prend la largeur. */ .faf-events-alerte { grid-column: 1 / -1; max-width: 560px; width: 100%; margin: 8px auto 0; } /* Page dédiée : le formulaire est le contenu, pas un encart. Il reste borné — un champ d'e-mail sur 1180px de large est illisible. */ .elementor-element.faf-alerte-page .elementor-widget-container { max-width: 620px; margin: 0 auto; } .faf-alerte { background: #fff; border: 1px solid var(--nude-deep); border-radius: 22px; padding: 30px 30px 26px; box-shadow: 0 24px 52px -46px rgba(120, 80, 45, .55); text-align: center; } .faf-alerte-titre { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.5rem; color: var(--clay-deep); margin: 0 0 8px; } .faf-alerte-texte { font-size: .95rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 20px; } .faf-alerte-themes { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; text-align: left; } .faf-alerte-themes label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .95rem; } /* Le champ et le bouton sur une ligne, et la ligne entière sous 520px : un bouton comprimé à côté d'un champ d'e-mail devient illisible. */ .faf-alerte-ligne { display: flex; gap: 10px; flex-wrap: wrap; } /* !important comme pour le bouton : le Kit Elementor déclare ses propres champs de formulaire (angles droits, fond blanc, bordure grise) avec une spécificité qui bat une simple classe. Sans cela le champ ne ressemble pas au bouton posé juste à côté. */ .faf-alerte-ligne input[type="email"] { flex: 1 1 220px; min-width: 0; border: 1px solid var(--nude-deep) !important; border-radius: 100px !important; padding: 13px 20px !important; font-family: inherit; font-size: .95rem; background: var(--paper, #FBF6EE) !important; color: var(--ink); } .faf-alerte-ligne input[type="email"]:focus { outline: 2px solid var(--teal); outline-offset: 1px; } /* !important : le Kit Elementor style tous les