/* Theme Name: child Description: dt-the7 Template: dt-the7 */ /* ---- Bloc page-title (en-tête de page) — restyling cream + eyebrow + ornement pêche ---- */ .page-title.solid-bg, #page .page-title.solid-bg { background: var(--cream) !important; background-image: none !important; border-bottom: 0; padding: 56px 0 52px; position: relative; overflow: hidden; } .page-title.solid-bg::after { content: ""; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; background: var(--peach-soft); opacity: 0.55; pointer-events: none; z-index: 0; } .page-title.solid-bg .wf-wrap, .page-title.solid-bg .page-title-head { position: relative; z-index: 1; } .page-title-head.hgroup { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .page-title-head::before { /* Eyebrow contextuel : contenu injecté via souad-page-title.php (style dynamique ). Sans correspondance dans le mapping, l'eyebrow reste vide (content non défini). */ font-family: inherit; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; line-height: 1; display: inline-block; } #page .page-title.solid-bg h1, .page-title.solid-bg h1 { margin: 0; padding: 0; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; color: var(--ink); line-height: 1.15; border-bottom: 0; } .page-title-head.hgroup::after { content: ""; display: block; width: 60px; height: 2px; background: var(--peach); border-radius: 2px; margin-top: 6px; } @media (max-width: 720px) { .page-title.solid-bg { padding: 40px 0 38px; } .page-title.solid-bg::after { width: 160px; height: 160px; top: -60px; right: -60px; } } /* Sur la home, le hero remplit déjà le rôle de bloc titre — on masque la page-title. Le H1 reste dans le DOM pour qu'il soit accessible (non supprimé), mais visuellement on ne le rend pas. Le H1 visible est désormais celui du shortcode [hero_home]. */ body.home .page-title.solid-bg, body.page-id-9 .page-title.solid-bg { display: none; } /* ---- Palette officielle Souad Tamazight ---- */ :root { --peach: #FFBD59; /* accent principal (logo, soulignés, hover) */ --peach-soft: #FFE6BC; /* version diluée (fonds doux, hover lights) */ --ink: #083434; /* texte foncé / titres / signatures */ --teal: #0ea5a1; /* turquoise / prix / accents secondaires */ --meta: #6b7280; /* méta-données, dates, labels secondaires */ --border: #e5e7eb; /* bordures neutres des cards */ --paper: #ffffff; /* fond cards */ --cream: #FAF7F2; /* fond doux / sections alternées */ } .page-title h1, .page-title h1 *, .page-title h1 a:hover, #page .page-title .entry-title { line-height:2em; } h2, h3 { border-bottom: 1px var(--peach) solid; width: fit-content; } #content a { color: #000 !important; } #content a:hover { color: var(--peach) !important; text-decoration: none !important; } h2.h2_centre { text-align: center !important; width: 100% !important; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--peach) !important; text-decoration-thickness: 1px !important; } .miniatures h2 { text-align: center !important; width: 100% !important; border-bottom: 0 !important; } #content img { border-radius: 20px; } /* ---- Override WPForms : aligner les boutons sur l'identité Souad ---- */ .wpforms-container { --wpforms-button-background-color: var(--peach); --wpforms-button-border-color: var(--peach); --wpforms-button-text-color: var(--ink); --wpforms-page-break-color: var(--peach); } .wpforms-container .wpforms-submit:hover, .wpforms-container .wpforms-submit:focus { background-color: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; } /* Page Vos avis — mur de citations */ .avis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 32px 0 48px; } .avis-card { position: relative; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 38px 28px 22px; margin: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .avis-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } .avis-card::before { content: "\201C"; position: absolute; top: -6px; left: 16px; font-family: Georgia, "Times New Roman", serif; font-size: 84px; line-height: 1; color: var(--peach); opacity: 0.85; pointer-events: none; } .avis-card blockquote { margin: 0 0 18px; padding: 0; border: 0; font-style: normal; color: var(--ink); line-height: 1.6; quotes: none; } .avis-card blockquote::before, .avis-card blockquote::after { content: none; } .avis-card blockquote p { margin: 0; padding: 0; } .avis-card figcaption { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 12px; border-top: 1px solid var(--peach); } .avis-card figcaption strong { color: var(--ink); font-weight: 600; } .avis-card figcaption span { color: var(--meta); font-size: 0.9em; font-style: italic; } @media (max-width: 600px) { .avis-grid { gap: 18px; margin: 24px 0 32px; } .avis-card { padding: 32px 22px 20px; } .avis-card::before { font-size: 70px; } } /* Page Massage — grille de vignettes circulaires */ .miniatures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 20px; margin: 32px 0 16px; } .miniatures-grid .vignette { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; transition: transform 0.25s ease; } .miniatures-grid .vignette:hover { transform: translateY(-3px); } #content .miniatures-grid .vignette img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); margin: 0 0 14px; display: block; } .miniatures-grid .vignette figcaption { color: var(--ink); font-weight: 600; font-size: 0.98rem; line-height: 1.35; max-width: 180px; } @media (max-width: 480px) { .miniatures-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } #content .miniatures-grid .vignette img { width: 130px; height: 130px; } } /* Bloc CTAs duaux cabinet/distance — pages services duales (Reiki, Chamanisme) */ .modalites-cta { margin: 2.5em 0 1em; padding: 32px 26px 30px; background: var(--cream); border: 1px solid var(--border); border-radius: 16px; } .modalites-cta__titre { margin: 0 0 24px; text-align: center; font-size: 1.05rem; color: var(--ink); font-weight: 600; letter-spacing: 0.01em; } .modalites-cta__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } #content .modalites-cta__card, #content .modalites-cta__card:hover { display: flex; flex-direction: column; gap: 6px; padding: 28px 24px 24px; background: var(--paper); border: 1px solid var(--border); border-radius: 14px; text-decoration: none !important; color: var(--ink) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; position: relative; overflow: hidden; } #content .modalites-cta__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ink); transition: background 0.18s ease; } #content .modalites-cta__card--distance::before { background: var(--peach); } #content .modalites-cta__card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8, 52, 52, 0.08); } #content .modalites-cta__card--cabinet:hover { border-color: var(--ink); } #content .modalites-cta__card--distance:hover { border-color: var(--peach); } .modalites-cta__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 6px; flex-shrink: 0; } .modalites-cta__card--cabinet .modalites-cta__icon { background: rgba(8, 52, 52, 0.08); color: var(--ink); } .modalites-cta__card--distance .modalites-cta__icon { background: var(--peach-soft); color: var(--ink); } .modalites-cta__icon svg { width: 22px; height: 22px; display: block; } .modalites-cta__kicker { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); font-weight: 700; } .modalites-cta__title { font-size: 1.25rem; color: var(--ink); font-weight: 600; line-height: 1.25; } .modalites-cta__desc { color: var(--meta); font-size: 0.95rem; margin-bottom: 14px; line-height: 1.45; } .modalites-cta__btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: auto; padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; line-height: 1; transition: background 0.18s ease, color 0.18s ease; } #content .modalites-cta__card--cabinet .modalites-cta__btn { background: var(--ink); color: #fff !important; } #content .modalites-cta__card--cabinet:hover .modalites-cta__btn { background: #0c4a4a; } #content .modalites-cta__card--distance .modalites-cta__btn { background: var(--peach); color: var(--ink) !important; } #content .modalites-cta__card--distance:hover .modalites-cta__btn { background: #ffaa2a; } @media (max-width: 720px) { .modalites-cta { padding: 24px 18px; } .modalites-cta__grid { grid-template-columns: 1fr; gap: 14px; } .modalites-cta__title { font-size: 1.15rem; } } /* Hero d'accueil — shortcode [hero_home] */ .hero-home { display: grid; grid-template-columns: minmax(220px, 35%) 1fr; gap: 44px; align-items: center; margin: 0 0 3em; padding: 36px 32px; background: linear-gradient(135deg, var(--cream) 0%, #fff 100%); border: 1px solid var(--border); border-radius: 20px; position: relative; overflow: hidden; } .hero-home::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--peach-soft); opacity: 0.6; pointer-events: none; z-index: 0; } .hero-home > * { position: relative; z-index: 1; } .hero-home__media { display: flex; justify-content: center; } #content .hero-home__media img { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 0 14px 36px rgba(8, 52, 52, 0.12); margin: 0; display: block; } .hero-home__content { display: flex; flex-direction: column; gap: 14px; } .hero-home__kicker { margin: 0; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; } #content .hero-home h1.hero-home__title, #content .hero-home h2.hero-home__title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; color: var(--ink); font-weight: 700; border-bottom: 0; width: auto; } .hero-home__accroche { margin: 0; font-size: 1.08rem; line-height: 1.55; color: var(--ink); max-width: 50ch; } .hero-home__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } #content .hero-home__btn, #content .hero-home__btn:hover { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 24px 14px; border-radius: 14px; text-decoration: none !important; line-height: 1.2; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; min-width: 200px; } #content .hero-home__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(8, 52, 52, 0.14); } #content .hero-home__btn--cabinet, #content .hero-home__btn--cabinet:hover { background: var(--ink); color: #fff !important; } #content .hero-home__btn--distance, #content .hero-home__btn--distance:hover { background: var(--peach); color: var(--ink) !important; } .hero-home__btn-kicker { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; opacity: 0.85; } .hero-home__btn-label { font-size: 1rem; font-weight: 600; } @media (max-width: 860px) { .hero-home { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; text-align: center; } .hero-home__content { align-items: center; } #content .hero-home__media img { max-width: 200px; } .hero-home__accroche { max-width: 100%; } .hero-home__ctas { justify-content: center; } } @media (max-width: 480px) { #content .hero-home__btn { min-width: 100%; align-items: center; } } /* Grille de services — shortcode [services_grid] (home) */ .services-grid { margin: 3em 0; } .services-grid + .services-grid { margin-top: 2em; } .services-grid__head { text-align: center; margin-bottom: 28px; } .services-grid__eyebrow { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; } #content .services-grid .services-grid__heading { display: inline-block; margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--peach); padding-bottom: 4px; width: auto; } .services-grid__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .services-grid--distance .services-grid__cards { grid-template-columns: repeat(auto-fit, minmax(260px, 380px)); justify-content: center; } #content .service-card, #content .service-card:hover { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 24px 20px 22px; background: var(--paper); border: 1px solid var(--border); border-radius: 16px; text-decoration: none !important; color: var(--ink) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; position: relative; overflow: hidden; } #content .service-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(8, 52, 52, 0.10); border-color: var(--peach); } .service-card__media { width: 130px; height: 130px; border-radius: 50%; overflow: hidden; background: var(--cream); box-shadow: 0 6px 16px rgba(8, 52, 52, 0.10); flex-shrink: 0; display: block; } #content .service-card .service-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; transition: transform 0.4s ease; } #content .service-card:hover .service-card__media img { transform: scale(1.06); } .service-card__body { display: flex; flex-direction: column; gap: 6px; align-items: center; flex: 1; } .service-card__title { font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.25; } .service-card__desc { font-size: 0.92rem; line-height: 1.5; color: var(--meta); flex-grow: 1; } .service-card__cta { margin-top: 6px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--peach); transition: letter-spacing 0.2s ease; } #content .service-card:hover .service-card__cta { letter-spacing: 0.12em; } .services-grid--distance .service-card { border-top: 4px solid var(--peach); } @media (max-width: 600px) { .services-grid__cards { grid-template-columns: repeat(2, 1fr); gap: 14px; } .services-grid--distance .services-grid__cards { grid-template-columns: 1fr; } .service-card { padding: 20px 16px 18px; } .service-card__media { width: 110px; height: 110px; } .service-card__title { font-size: 1.05rem; } .service-card__desc { font-size: 0.88rem; } } /* Footer 3 colonnes — Cabinet Nanterre / À distance / Naviguer Injecté via mu-plugin souad-footer.php (v2). Compact et orienté positionnement. */ #footer .souad-footer { width: 100%; padding: 44px 0 24px; color: var(--ink); font-size: 0.92rem; } .souad-footer__cols { display: grid; grid-template-columns: 1.15fr 1fr 0.7fr; gap: 36px; align-items: start; } .souad-footer__col { min-width: 0; } #footer .souad-footer__heading { margin: 0 0 14px; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--peach); font-weight: 700; border-bottom: 1px solid var(--peach); padding-bottom: 8px; width: auto; display: flex; align-items: center; gap: 8px; } .souad-footer__heading-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--peach); flex-shrink: 0; } .souad-footer__heading-icon svg { width: 14px; height: 14px; display: block; } .souad-footer__addr { margin: 0 0 12px; font-style: normal; line-height: 1.5; font-size: 0.9rem; color: var(--ink); } #footer .souad-footer__addr a, #footer .souad-footer__addr a:hover { color: var(--ink) !important; text-decoration: none !important; border-bottom: 0; } #footer .souad-footer__addr a:hover { color: var(--peach) !important; } .souad-footer__sub { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.5; color: var(--meta); } .souad-footer__contact { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .souad-footer__contact li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; } .souad-footer__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--peach-soft); color: var(--ink); flex-shrink: 0; } .souad-footer__icon svg { width: 12px; height: 12px; display: block; } #footer .souad-footer__contact a, #footer .souad-footer__list a { color: var(--ink) !important; text-decoration: none !important; transition: color 0.15s ease; border-bottom: 0; } #footer .souad-footer__contact a:hover, #footer .souad-footer__list a:hover { color: var(--peach) !important; } .souad-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; } .souad-footer__list--services { margin-top: 4px; } .souad-footer__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; } #footer .souad-footer__cta, #footer .souad-footer__cta:hover { color: var(--ink) !important; text-decoration: none !important; border-bottom: 0; } #footer .souad-footer__cta:hover { color: var(--peach) !important; } .souad-footer__cta-arrow { display: inline-flex; align-items: center; transition: transform 0.18s ease; } .souad-footer__cta-arrow svg { width: 14px; height: 14px; display: block; } .souad-footer__cta:hover .souad-footer__cta-arrow { transform: translateX(3px); } .souad-footer__signature { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 0.86rem; } .souad-footer__signature-name { font-weight: 700; letter-spacing: 0.03em; color: var(--ink); } .souad-footer__signature-sep { color: var(--peach); } .souad-footer__signature-tagline { color: var(--meta); font-style: italic; letter-spacing: 0.01em; } @media (max-width: 860px) { .souad-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 28px; } .souad-footer__col--nav { grid-column: 1 / -1; } } @media (max-width: 560px) { #footer .souad-footer { padding: 32px 0 20px; } .souad-footer__cols { grid-template-columns: 1fr; gap: 28px; } .souad-footer__col--nav { grid-column: auto; } .souad-footer__signature { margin-top: 24px; gap: 6px; } } /* ─── Variante minimaliste du footer (pages AR uniquement) ─────────── */ /* 1 bloc centré, pas de 3-colonnes : coordonnées + 2 liens (Accueil, Contact) + signature. Toutes les autres pages (FR) gardent le footer complet inchangé. */ #footer .souad-footer--minimal { text-align: center; } .souad-footer__minimal-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 520px; margin: 0 auto; padding: 8px 0 4px; } .souad-footer--minimal .souad-footer__addr { font-style: normal; display: inline-flex; align-items: flex-start; gap: 8px; margin: 0; } .souad-footer--minimal .souad-footer__addr-icon { display: inline-flex; margin-top: 2px; color: var(--peach); } .souad-footer--minimal .souad-footer__addr-icon svg { width: 18px; height: 18px; } #footer .souad-footer--minimal .souad-footer__addr a { color: var(--ink) !important; text-decoration: none !important; line-height: 1.5; border-bottom: 0; } #footer .souad-footer--minimal .souad-footer__addr a:hover { color: var(--peach) !important; } .souad-footer--minimal .souad-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; } .souad-footer--minimal .souad-footer__contact li { display: inline-flex; align-items: center; gap: 6px; } .souad-footer--minimal .souad-footer__icon { display: inline-flex; color: var(--peach); } .souad-footer--minimal .souad-footer__icon svg { width: 16px; height: 16px; } #footer .souad-footer--minimal .souad-footer__contact a { color: var(--ink) !important; text-decoration: none !important; border-bottom: 0; font-size: 0.92rem; } #footer .souad-footer--minimal .souad-footer__contact a:hover { color: var(--peach) !important; } .souad-footer__nav-min { list-style: none; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px solid var(--border); display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; width: 100%; max-width: 360px; } .souad-footer__nav-min li { display: inline; } #footer .souad-footer__nav-min a { color: var(--ink) !important; text-decoration: none !important; border-bottom: 0; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; } #footer .souad-footer__nav-min a:hover { color: var(--peach) !important; } .souad-footer--minimal .souad-footer__signature { margin-top: 16px; } /* CTA sticky contextuel — mu-plugin souad-cta-sticky.php */ .souad-cta-sticky { position: fixed; right: 24px; bottom: 24px; z-index: 9000; width: min(320px, calc(100vw - 48px)); padding: 16px 18px 14px; background: var(--paper); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 40px rgba(8, 52, 52, 0.18); opacity: 0; transform: translateY(16px); transition: opacity 0.28s ease, transform 0.28s ease; pointer-events: none; } .souad-cta-sticky.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .souad-cta-sticky::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--peach); border-radius: 16px 16px 0 0; } .souad-cta-sticky__close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--meta); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .souad-cta-sticky__close:hover, .souad-cta-sticky__close:focus-visible { background: var(--cream); color: var(--ink); outline: none; } .souad-cta-sticky__close svg { width: 14px; height: 14px; } .souad-cta-sticky__lead { margin: 0 0 12px; padding-right: 28px; font-weight: 700; color: var(--ink); font-size: 0.98rem; line-height: 1.3; } .souad-cta-sticky__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #content .souad-cta-sticky__btn, .souad-cta-sticky__btn, .souad-cta-sticky__btn:hover { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px 9px; border-radius: 12px; text-decoration: none !important; font-size: 0.86rem; font-weight: 600; line-height: 1.15; text-align: center; transition: transform 0.15s ease, filter 0.15s ease; } .souad-cta-sticky__btn:hover { transform: translateY(-1px); filter: brightness(0.97); } .souad-cta-sticky__btn--cabinet, .souad-cta-sticky__btn--cabinet:hover { background: var(--ink); color: #fff !important; } .souad-cta-sticky__btn--distance, .souad-cta-sticky__btn--distance:hover { background: var(--peach); color: var(--ink) !important; } .souad-cta-sticky__btn--full { flex-direction: row; gap: 8px; padding: 12px 16px; width: 100%; font-size: 0.95rem; } .souad-cta-sticky__btn-icon { display: inline-flex; align-items: center; justify-content: center; } .souad-cta-sticky__btn-icon svg { width: 18px; height: 18px; display: block; } .souad-cta-sticky__btn--full .souad-cta-sticky__btn-icon svg { width: 16px; height: 16px; } /* Sur mobile, garder l'aperçu compact en bas-droite — éviter de chevaucher le bouton .scroll-top de The7 (à droite, en bas) en se positionnant à gauche. */ @media (max-width: 600px) { .souad-cta-sticky { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 14px 14px 12px; } .souad-cta-sticky__lead { font-size: 0.92rem; margin-bottom: 10px; } .souad-cta-sticky__btn { font-size: 0.82rem; padding: 9px 6px 8px; } .souad-cta-sticky__btn--full { padding: 11px 14px; font-size: 0.92rem; } } /* Page Me contacter — cards 3 méthodes + callout distance */ .contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 36px 0 48px; } #content .contact-method, #content .contact-method:hover { display: flex; flex-direction: column; gap: 6px; padding: 28px 24px 24px; background: var(--paper); border: 1px solid var(--border); border-radius: 16px; text-decoration: none !important; color: var(--ink) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; position: relative; overflow: hidden; } #content .contact-method::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--peach); transform: scaleX(0.18); transform-origin: left; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } #content .contact-method:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(8, 52, 52, 0.10); border-color: var(--peach); } #content .contact-method:hover::before { transform: scaleX(1); } .contact-method__icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--peach-soft); color: var(--ink); margin-bottom: 6px; transition: background 0.2s ease; } #content .contact-method:hover .contact-method__icon { background: var(--peach); } .contact-method__icon svg { width: 22px; height: 22px; } .contact-method__kicker { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); font-weight: 700; } .contact-method__value { font-size: 1.1rem; color: var(--ink); font-weight: 600; line-height: 1.35; margin-top: 2px; } .contact-method__note { margin-top: 8px; font-size: 0.85rem; color: var(--meta); } .contact-form-section { margin: 48px 0 36px; padding: 36px 32px; background: var(--cream); border: 1px solid var(--border); border-radius: 16px; } .contact-form-section__heading { margin: 0 0 8px; font-size: 1.4rem; color: var(--ink); font-weight: 700; border-bottom: 0; width: auto; } .contact-form-section__lead { margin: 0 0 24px; color: var(--meta); font-size: 0.98rem; } .contact-distance-callout { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin: 32px 0; padding: 22px 26px; background: linear-gradient(135deg, var(--peach-soft) 0%, var(--cream) 100%); border: 1px solid var(--peach-soft); border-radius: 16px; } .contact-distance-callout__icon { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper); color: var(--ink); flex-shrink: 0; } .contact-distance-callout__icon svg { width: 22px; height: 22px; } .contact-distance-callout__body { min-width: 0; } .contact-distance-callout__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--ink); } .contact-distance-callout__desc { margin: 0; font-size: 0.92rem; color: var(--ink); line-height: 1.5; opacity: 0.85; } #content .contact-distance-callout__btn, #content .contact-distance-callout__btn:hover { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 999px; background: var(--ink); color: #fff !important; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; white-space: nowrap; transition: background 0.18s ease, transform 0.18s ease; } #content .contact-distance-callout__btn:hover { background: #0c4a4a; transform: translateY(-1px); } @media (max-width: 720px) { .contact-form-section { padding: 26px 20px; } .contact-distance-callout { grid-template-columns: auto 1fr; gap: 14px 16px; } .contact-distance-callout__btn { grid-column: 1 / -1; justify-self: stretch; } } /* Bloc témoignages home — shortcode [testimonials_home] */ .testimonials-home { margin: 3.5em 0 3em; padding: 48px 32px; background: var(--cream); border-radius: 20px; position: relative; overflow: hidden; } .testimonials-home::before { content: ""; position: absolute; top: -120px; left: -100px; width: 280px; height: 280px; border-radius: 50%; background: var(--peach-soft); opacity: 0.5; pointer-events: none; z-index: 0; } .testimonials-home > * { position: relative; z-index: 1; } .testimonials-home__head { text-align: center; margin-bottom: 32px; } .testimonials-home__eyebrow { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; } #content .testimonials-home__heading { display: inline-block; margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.95rem); color: var(--ink); font-weight: 700; border-bottom: 0; width: auto; line-height: 1.2; } .testimonials-home__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-bottom: 32px; } .testimonial-card { position: relative; margin: 0; padding: 32px 26px 24px; background: var(--paper); border: 1px solid var(--border); border-radius: 16px; display: flex; flex-direction: column; gap: 18px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(8, 52, 52, 0.08); } .testimonial-card__mark { position: absolute; top: -2px; left: 18px; font-family: Georgia, "Times New Roman", serif; font-size: 70px; line-height: 1; color: var(--peach); opacity: 0.85; pointer-events: none; font-weight: 700; } #content .testimonial-card .testimonial-card__quote { margin: 0; padding: 0; border: 0; font-style: normal; color: var(--ink); line-height: 1.55; font-size: 0.98rem; quotes: none; flex-grow: 1; } .testimonial-card__quote::before, .testimonial-card__quote::after { content: none; } .testimonial-card__caption { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--peach); } .testimonial-card__name { font-weight: 700; color: var(--ink); font-size: 0.95rem; } .testimonial-card__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--meta); } .testimonial-card__service { color: var(--peach); font-weight: 600; } .testimonial-card__sep { opacity: 0.6; } .testimonials-home__more { margin: 0; text-align: center; } #content .testimonials-home__more-link, #content .testimonials-home__more-link:hover { display: inline-block; padding: 11px 24px; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; color: var(--ink) !important; font-weight: 600; font-size: 0.92rem; text-decoration: none !important; transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease; } #content .testimonials-home__more-link:hover { border-color: var(--peach); background: var(--peach-soft); transform: translateY(-1px); } @media (max-width: 600px) { .testimonials-home { padding: 36px 18px; margin: 2.5em 0 2em; } .testimonials-home__grid { gap: 16px; margin-bottom: 24px; } .testimonial-card { padding: 28px 22px 20px; } .testimonial-card__mark { font-size: 56px; left: 16px; } } /* ---- Bloc coordonnées dans le menu (side-header + mobile) ---- Reprend le langage visuel du footer : icône peach-soft ronde + texte ink. S'applique : - au header latéral gauche (.masthead.side-header .mini-widgets) - au menu mobile déroulant (.dt-mobile-header .mini-widgets, .mobile-mini-widgets-in-menu — où The7 injecte les widgets via JS) */ .masthead.side-header .mini-widgets, .dt-mobile-header .mini-widgets, .mobile-mini-widgets-in-menu { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 24px; margin-top: 22px; position: relative; } .masthead.side-header .mini-widgets::before, .dt-mobile-header .mini-widgets::before, .mobile-mini-widgets-in-menu::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 1px; background: var(--border); } .masthead.side-header .mini-widgets > .mini-contacts, .dt-mobile-header .mini-widgets > .mini-contacts, .mobile-mini-widgets-in-menu > .mini-contacts { display: flex; align-items: flex-start; gap: 5px; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 0.88rem; line-height: 1.45; color: var(--ink); font-style: normal; letter-spacing: 0.01em; background: transparent; } .masthead.side-header .mini-widgets > .mini-contacts.phone, .dt-mobile-header .mini-widgets > .mini-contacts.phone, .mobile-mini-widgets-in-menu > .mini-contacts.phone { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; } .masthead.side-header .mini-widgets > .mini-contacts.email, .dt-mobile-header .mini-widgets > .mini-contacts.email, .mobile-mini-widgets-in-menu > .mini-contacts.email { word-break: break-word; } .masthead.side-header .mini-widgets > .mini-contacts > i, .dt-mobile-header .mini-widgets > .mini-contacts > i, .mobile-mini-widgets-in-menu > .mini-contacts > i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--peach-soft); color: var(--ink); font-size: 12px; flex-shrink: 0; margin: 0 !important; padding: 0 !important; line-height: 1; transition: background-color 0.2s ease, color 0.2s ease; } .masthead.side-header .mini-widgets > .mini-contacts:hover > i, .dt-mobile-header .mini-widgets > .mini-contacts:hover > i, .mobile-mini-widgets-in-menu > .mini-contacts:hover > i { background: var(--peach); } .masthead.side-header .mini-widgets > .mini-contacts a, .dt-mobile-header .mini-widgets > .mini-contacts a, .mobile-mini-widgets-in-menu > .mini-contacts a { color: var(--ink); text-decoration: none; border-bottom: 0; transition: color 0.15s ease; } .masthead.side-header .mini-widgets > .mini-contacts a:hover, .dt-mobile-header .mini-widgets > .mini-contacts a:hover, .mobile-mini-widgets-in-menu > .mini-contacts a:hover { color: var(--peach); } /* ---- Menu principal (side-header) — petite finition sobre ---- Item actif : pastille peach discrète à gauche. Sous-menu : fond cream très doux, hover peach-soft. */ .masthead .main-nav > li.current-menu-item > a, .masthead .main-nav > li.current_page_item > a { color: var(--ink); } .masthead .main-nav > li.current-menu-item > a .menu-text, .masthead .main-nav > li.current_page_item > a .menu-text { position: relative; } .masthead .main-nav > li.current-menu-item > a .menu-text::before, .masthead .main-nav > li.current_page_item > a .menu-text::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--peach); margin-right: 8px; vertical-align: middle; transform: translateY(-1px); } .masthead .sub-nav .menu-item > a:hover { color: var(--peach) !important; } /* ---- Bloc « 2 modes » : cabinet à Nanterre vs séance à distance ---- Pose le positionnement double dès l'entrée. Mode courant mis en avant par .is-current (border peach + badge). Auto-injecté via mu-plugin sur les 7 pages cabinet et les 4 pages distance. */ .souad-modes { margin: 56px auto 40px; max-width: 1100px; padding: 0 16px; } .souad-modes__head { text-align: center; margin-bottom: 28px; } .souad-modes__eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; margin: 0 0 10px; } .souad-modes__heading { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); margin: 0 auto 12px; line-height: 1.2; border-bottom: 0; width: auto; text-align: center; } .souad-modes__amp { color: var(--peach); font-style: italic; font-weight: 500; } .souad-modes__sub { margin: 0 auto; max-width: 720px; color: var(--meta); font-size: 0.98rem; line-height: 1.55; } .souad-modes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; } .souad-modes__card { position: relative; background: var(--paper); border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .souad-modes__card:hover { border-color: var(--peach); box-shadow: 0 6px 24px rgba(8, 52, 52, 0.06); transform: translateY(-2px); } .souad-modes__card.is-current { border-color: var(--peach); background: var(--cream); box-shadow: 0 4px 18px rgba(255, 189, 89, 0.18); } .souad-modes__badge { position: absolute; top: -12px; left: 24px; display: inline-block; background: var(--peach); color: var(--ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .souad-modes__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--peach-soft); color: var(--ink); } .souad-modes__icon svg { width: 22px; height: 22px; display: block; } .souad-modes__kicker { margin: 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--peach); } .souad-modes__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--ink); line-height: 1.3; border-bottom: 0; width: auto; } .souad-modes__addr { margin: 0; font-style: normal; color: var(--ink); font-size: 0.98rem; line-height: 1.5; font-weight: 500; } .souad-modes__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; color: var(--meta); line-height: 1.45; } .souad-modes__list li { position: relative; padding-left: 18px; } .souad-modes__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--peach); } .souad-modes__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 13px 20px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; border: 1px solid transparent; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } #content .souad-modes__cta, #content .souad-modes__cta:hover { text-decoration: none !important; } .souad-modes__cta-arrow { display: inline-flex; align-items: center; transition: transform 0.18s ease; } .souad-modes__cta-arrow svg { width: 18px; height: 18px; display: block; } .souad-modes__cta:hover .souad-modes__cta-arrow { transform: translateX(3px); } .souad-modes__cta--cabinet, #content .souad-modes__cta--cabinet, #content .souad-modes__cta--cabinet:hover { background: var(--ink); color: #fff !important; border-color: var(--ink); } #content .souad-modes__cta--cabinet:hover { background: var(--peach); color: var(--ink) !important; border-color: var(--peach); } .souad-modes__cta--distance, #content .souad-modes__cta--distance, #content .souad-modes__cta--distance:hover { background: transparent; color: var(--ink) !important; border-color: var(--ink); } #content .souad-modes__cta--distance:hover { background: var(--ink); color: #fff !important; border-color: var(--ink); } @media (max-width: 720px) { .souad-modes { margin: 40px auto 28px; } .souad-modes__grid { grid-template-columns: 1fr; gap: 26px; margin-top: 24px; } .souad-modes__card { padding: 28px 22px 22px; } .souad-modes__badge { left: 18px; } } /* ---- Bloc « Venir au cabinet » (transports + parking) ---- Ancrage local concret pour SEO Nanterre + UX pratique. */ .souad-access { margin: 48px auto 32px; max-width: 980px; padding: 32px 28px; background: var(--cream); border-radius: 18px; border: 1px solid var(--border); } .souad-access__head { text-align: center; margin-bottom: 24px; } .souad-access__eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; margin: 0 0 8px; } .souad-access__heading { margin: 0 0 12px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: var(--ink); border-bottom: 0; width: auto; text-align: center; line-height: 1.2; } .souad-access__addr { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 500; color: var(--ink); } #content .souad-access__addr a, #content .souad-access__addr a:hover { color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--peach) !important; text-underline-offset: 3px; text-decoration-thickness: 2px; } #content .souad-access__addr a:hover { color: var(--peach) !important; } .souad-access__addr-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--peach); } .souad-access__addr-icon svg { width: 18px; height: 18px; display: block; } .souad-access__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .souad-access__item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 16px; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; } .souad-access__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--peach-soft); color: var(--ink); flex-shrink: 0; } .souad-access__icon svg { width: 18px; height: 18px; display: block; } .souad-access__label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--peach); font-weight: 700; } .souad-access__detail { font-size: 0.92rem; color: var(--ink); line-height: 1.5; } @media (max-width: 720px) { .souad-access { padding: 26px 20px; margin: 36px auto 24px; } .souad-access__grid { grid-template-columns: 1fr; gap: 14px; } .souad-access__item { padding: 16px 16px 14px; } } /* ---- FAQ pages cabinet (accordion natif
/) ---- */ .souad-faq { margin: 32px auto 48px; max-width: 980px; padding: 0 16px; } .souad-faq__head { text-align: center; margin-bottom: 24px; } .souad-faq__eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; margin: 0 0 8px; } .souad-faq__heading { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: var(--ink); border-bottom: 0; width: auto; text-align: center; line-height: 1.2; } .souad-faq__list { display: flex; flex-direction: column; gap: 12px; } .souad-faq__item { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .souad-faq__item:hover { border-color: var(--peach); } .souad-faq__item[open] { border-color: var(--peach); box-shadow: 0 4px 18px rgba(8, 52, 52, 0.05); } .souad-faq__q { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-weight: 600; font-size: 1rem; color: var(--ink); user-select: none; } .souad-faq__q::-webkit-details-marker { display: none; } .souad-faq__chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--peach); transition: transform 0.18s ease; flex-shrink: 0; } .souad-faq__chevron svg { width: 18px; height: 18px; display: block; } .souad-faq__item[open] .souad-faq__chevron { transform: rotate(180deg); } .souad-faq__a { padding: 0 22px 20px; color: var(--ink); font-size: 0.97rem; line-height: 1.6; } #content .souad-faq__a a, #content .souad-faq__a a:hover { color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--peach) !important; text-underline-offset: 2px; } #content .souad-faq__a a:hover { color: var(--peach) !important; } @media (max-width: 720px) { .souad-faq { margin: 28px auto 40px; } .souad-faq__q { padding: 16px 18px; font-size: 0.96rem; } .souad-faq__a { padding: 0 18px 16px; font-size: 0.94rem; } } /* ---- Page FAQ complète (/faq/) — mu-plugin souad-faq-page.php ---- Reprend les patterns souad-faq mais structuré en sections + nav d'ancrage. */ .souad-faq-page { margin: 24px auto 40px; max-width: 1000px; padding: 0 16px; } .souad-faq-page__head { text-align: center; margin-bottom: 28px; } .souad-faq-page__eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; margin: 0 0 8px; } .souad-faq-page__heading { margin: 0 auto 14px; font-size: clamp(1.55rem, 2.8vw, 2.1rem); color: var(--ink); border-bottom: 0; width: auto; line-height: 1.2; } .souad-faq-page__lead { margin: 0 auto; max-width: 700px; color: var(--meta); font-size: 1rem; line-height: 1.55; } #content .souad-faq-page__lead a, #content .souad-faq-page__lead a:hover { color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--peach) !important; text-underline-offset: 2px; } .souad-faq-page__nav { margin: 28px 0 36px; padding: 18px 22px; background: var(--cream); border: 1px solid var(--border); border-radius: 14px; } .souad-faq-page__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; } .souad-faq-page__nav li { margin: 0; } #content .souad-faq-page__nav a, #content .souad-faq-page__nav a:hover { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; color: var(--ink) !important; font-size: 0.86rem; font-weight: 600; text-decoration: none !important; border-bottom: 0 !important; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } #content .souad-faq-page__nav a:hover { border-color: var(--peach); background: var(--peach-soft); color: var(--ink) !important; } .souad-faq-page__section { margin: 0 0 36px; scroll-margin-top: 80px; } .souad-faq-page__section-title { margin: 0 0 16px; font-size: 1.35rem; color: var(--ink); border-bottom: 1px solid var(--peach); padding-bottom: 8px; width: fit-content; } .souad-faq-page__list { display: flex; flex-direction: column; gap: 10px; } .souad-faq-page__item { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .souad-faq-page__item:hover { border-color: var(--peach); } .souad-faq-page__item[open] { border-color: var(--peach); box-shadow: 0 4px 18px rgba(8, 52, 52, 0.05); } .souad-faq-page__q { list-style: none; cursor: pointer; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-weight: 600; font-size: 0.98rem; color: var(--ink); user-select: none; } .souad-faq-page__q::-webkit-details-marker { display: none; } .souad-faq-page__chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--peach); transition: transform 0.18s ease; flex-shrink: 0; } .souad-faq-page__chevron svg { width: 18px; height: 18px; display: block; } .souad-faq-page__item[open] .souad-faq-page__chevron { transform: rotate(180deg); } .souad-faq-page__a { padding: 0 22px 18px; color: var(--ink); font-size: 0.96rem; line-height: 1.6; } .souad-faq-page__a ul { margin: 4px 0; padding: 0 0 0 18px; list-style: disc; } .souad-faq-page__a li { margin: 4px 0; } #content .souad-faq-page__a a, #content .souad-faq-page__a a:hover { color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--peach) !important; text-underline-offset: 2px; border-bottom: 0 !important; } #content .souad-faq-page__a a:hover { color: var(--peach) !important; } @media (max-width: 720px) { .souad-faq-page { margin: 16px auto 32px; } .souad-faq-page__nav { padding: 14px 16px; } .souad-faq-page__section { margin: 0 0 28px; } .souad-faq-page__section-title { font-size: 1.2rem; } .souad-faq-page__q { padding: 14px 18px; font-size: 0.94rem; } .souad-faq-page__a { padding: 0 18px 14px; font-size: 0.93rem; } } /* ---- Page Mentions légales (/mentions-legales/) — mu-plugin souad-mentions-legales.php ---- */ .souad-legal { margin: 24px auto 56px; max-width: 880px; padding: 0 16px; color: var(--ink); line-height: 1.65; } .souad-legal__head { text-align: center; margin-bottom: 36px; } .souad-legal__eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--peach); font-weight: 700; margin: 0 0 8px; } .souad-legal__heading { margin: 0 auto 14px; font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--ink); border-bottom: 0; width: auto; line-height: 1.2; } .souad-legal__lead { margin: 0 auto 10px; max-width: 640px; color: var(--meta); font-size: 0.97rem; line-height: 1.55; } .souad-legal__updated { margin: 6px 0 0; font-size: 0.82rem; color: var(--meta); font-style: italic; } .souad-legal__section { margin: 0 0 36px; scroll-margin-top: 80px; } .souad-legal__section-title { margin: 0 0 16px; font-size: 1.2rem; color: var(--ink); border-bottom: 1px solid var(--peach); padding-bottom: 8px; width: fit-content; font-weight: 700; } .souad-legal__body { margin: 0; } .souad-legal__body p { margin: 0 0 0.9em; font-size: 0.97rem; } .souad-legal__body p:last-child { margin-bottom: 0; } .souad-legal__body h3 { margin: 22px 0 8px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--peach); font-weight: 700; border-bottom: 0; width: auto; } .souad-legal__body ul { margin: 0 0 0.9em 1.1em; padding: 0; } .souad-legal__body li { margin: 0 0 6px; font-size: 0.97rem; } .souad-legal__idcard { margin: 0; padding: 18px 22px; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--peach); border-radius: 12px; display: grid; gap: 0; } .souad-legal__idrow { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .souad-legal__idrow:last-child { border-bottom: 0; } .souad-legal__idlabel { margin: 0; font-size: 0.84rem; color: var(--meta); font-weight: 600; letter-spacing: 0.02em; } .souad-legal__idvalue { margin: 0; font-size: 0.97rem; color: var(--ink); } #content .souad-legal__idvalue a, #content .souad-legal__idvalue a:hover, #content .souad-legal__body a, #content .souad-legal__body a:hover { color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--peach) !important; text-underline-offset: 2px; border-bottom: 0 !important; } #content .souad-legal__idvalue a:hover, #content .souad-legal__body a:hover { color: var(--peach) !important; } @media (max-width: 720px) { .souad-legal { margin: 16px auto 40px; } .souad-legal__idcard { padding: 14px 16px; } .souad-legal__idrow { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; } .souad-legal__idlabel { font-size: 0.78rem; } .souad-legal__idvalue { font-size: 0.95rem; } } /* ---- Tableaux de tarifs (shortcode [souad_tarifs]) — mu-plugin souad-tarifs.php ---- */ .souad-tarifs { margin: 1.5em auto; max-width: 640px; padding: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(8, 52, 52, 0.04); } .souad-tarifs__caption { display: block; margin: 0; padding: 14px 22px; background: var(--peach-soft); color: var(--ink); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-align: left; border-bottom: 1px solid var(--peach); } .souad-tarifs__table { width: 100%; margin: 0; border-collapse: collapse; background: transparent; } .souad-tarifs__row { border-bottom: 1px dashed var(--border); } .souad-tarifs__row:last-child { border-bottom: 0; } .souad-tarifs__label { text-align: left; vertical-align: middle; padding: 14px 22px; font-weight: 400; width: 100%; } .souad-tarifs__name { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.3; } .souad-tarifs__meta { display: block; margin-top: 2px; color: var(--meta); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.01em; } .souad-tarifs__price { text-align: right; vertical-align: middle; padding: 14px 22px 14px 12px; white-space: nowrap; color: var(--teal); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .souad-tarifs__footnote { margin: 0; padding: 12px 22px; background: var(--cream); border-top: 1px solid var(--border); color: var(--meta); font-size: 0.86rem; line-height: 1.5; font-style: italic; } @media (max-width: 560px) { .souad-tarifs__caption { padding: 12px 16px; font-size: 0.95rem; } .souad-tarifs__label { padding: 12px 16px; } .souad-tarifs__price { padding: 12px 16px 12px 8px; font-size: 1rem; } .souad-tarifs__name { font-size: 0.96rem; } .souad-tarifs__meta { font-size: 0.8rem; } .souad-tarifs__footnote { padding: 10px 16px; font-size: 0.82rem; } } /* ───────────────────────────────────────────────────────────────── Sélecteur de langue (FR / AR) — souad-arabe.php Item ajouté en fin de menu principal, admin-only. Doit s'intégrer visuellement comme un séparateur/footer du menu. ───────────────────────────────────────────────────────────────── */ .menu-item.souad-lang-switcher { list-style: none; margin-top: 14px; padding: 14px 16px 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; } .menu-item.souad-lang-switcher::before { display: none !important; content: none; } .souad-lang__label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); font-weight: 700; opacity: 0.85; } .souad-lang__links { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--cream); border: 1px solid var(--border); border-radius: 999px; font-size: 0.84rem; line-height: 1; } .souad-lang__sep { color: var(--meta); opacity: 0.6; font-weight: 700; margin: 0 1px; } .souad-lang__flag { font-size: 0.95em; margin-right: 4px; filter: saturate(0.9); } #site-navigation .souad-lang__link, #main-nav .souad-lang__link, .menu-item.souad-lang-switcher .souad-lang__link, .souad-lang__link, .souad-lang__link:hover, .souad-lang__link:focus { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; color: var(--ink) !important; text-decoration: none !important; border-bottom: 0 !important; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; transition: background 0.15s ease, color 0.15s ease; } .souad-lang__link:hover { color: var(--peach) !important; background: rgba(255, 189, 89, 0.12); } .souad-lang__link.is-active { background: var(--peach); color: var(--ink) !important; cursor: default; } .souad-lang__link.is-active:hover { background: var(--peach); color: var(--ink) !important; } /* Si le menu a un fond foncé (header dark), garder lisibilité */ .dark-bg .souad-lang__label, .dark-skin .souad-lang__label { color: rgba(255,255,255,0.65); } .dark-bg .souad-lang__links, .dark-skin .souad-lang__links { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); } .dark-bg .souad-lang__link, .dark-skin .souad-lang__link { color: #fff !important; } .dark-bg .souad-lang__link.is-active, .dark-skin .souad-lang__link.is-active { background: var(--peach); color: var(--ink) !important; } /* ───────────────────────────────────────────────────────────────── Pages arabes (RTL) — body.lang-ar ───────────────────────────────────────────────────────────────── */ /* On NE met PAS `direction: rtl` sur le body : The7 positionne le side-header via CSS Grid (grid-template-areas avec colonnes ordonnées "header-side page-inner"). Mettre direction:rtl sur le parent grid inverserait les colonnes → side-header à droite et footer décalé (bug observé sur /ar/contact/). Le `` posé par Polylang suffit pour activer le rendu bidi des textes arabes ; on ne fait que forcer l'alignement à droite du contenu textuel. */ body.lang-ar { text-align: right; } body.lang-ar #content, body.lang-ar .entry-content, body.lang-ar .souad-ar { direction: rtl; } /* Sur la home arabe UNIQUEMENT, masquer le bloc page-title (H1 + eyebrow injecté par The7) — le titre est déjà rendu dans .souad-ar-hero__title. On scope à body.home pour ne pas casser le H1 des autres pages AR (ex: /ar/contact/) qui doivent garder leur page-title. */ body.lang-ar.home .page-title, body.lang-ar.home #page .page-title { display: none !important; } .souad-ar { max-width: 920px; margin: 0 auto; padding: 0 16px 40px; font-family: "Segoe UI", "Tahoma", "Geneva", "Arial", sans-serif; line-height: 1.8; color: var(--ink); } .souad-ar-hero { display: grid; grid-template-columns: minmax(220px, 35%) 1fr; gap: 44px; align-items: center; margin: 0 0 3em; padding: 36px 32px; background: linear-gradient(225deg, var(--cream) 0%, #fff 100%); border: 1px solid var(--border); border-radius: 20px; position: relative; overflow: hidden; } .souad-ar-hero::before { content: ""; position: absolute; top: -60px; /* miroir RTL : cercle pêche en haut à gauche au lieu de droite */ left: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--peach-soft); opacity: 0.6; pointer-events: none; z-index: 0; } .souad-ar-hero > * { position: relative; z-index: 1; } .souad-ar-hero__media { display: flex; justify-content: center; } #content .souad-ar-hero__media img { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 0 14px 36px rgba(8, 52, 52, 0.12); margin: 0; display: block; } .souad-ar-hero__content { display: flex; flex-direction: column; gap: 14px; /* en RTL, on aligne le contenu à droite (début de la lecture) */ align-items: flex-start; text-align: right; } .souad-ar-hero__kicker { margin: 0; font-size: 0.78rem; letter-spacing: 0.18em; color: var(--peach); font-weight: 700; } #content .souad-ar .souad-ar-hero__title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.25; color: var(--ink); font-weight: 700; border-bottom: 0; width: auto; } .souad-ar-hero__lead { margin: 0; font-size: 1.08rem; line-height: 1.7; color: var(--ink); max-width: 50ch; } .souad-ar-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .souad-ar-btn, #content .souad-ar-btn, #content .souad-ar-btn:hover { display: inline-flex; flex-direction: column; /* RTL : début = droite */ align-items: flex-end; gap: 2px; padding: 13px 24px 14px; border-radius: 14px; text-decoration: none !important; border: 0 !important; border-bottom: 0 !important; line-height: 1.2; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; min-width: 200px; } #content .souad-ar-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(8, 52, 52, 0.14); } /* spécificité forte (3 classes + #content) pour battre la règle générique `body.lang-ar #content a { color: var(--ink) !important }` */ #content .souad-ar .souad-ar-btn.souad-ar-btn--cabinet, #content .souad-ar .souad-ar-btn.souad-ar-btn--cabinet:hover { background: var(--ink); color: #fff !important; } #content .souad-ar .souad-ar-btn.souad-ar-btn--cabinet:hover { background: #0c4a4a; } #content .souad-ar .souad-ar-btn.souad-ar-btn--distance, #content .souad-ar .souad-ar-btn.souad-ar-btn--distance:hover { background: var(--peach); color: var(--ink) !important; } #content .souad-ar .souad-ar-btn.souad-ar-btn--distance:hover { background: #ffaa2a; } .souad-ar-btn__kicker { font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 600; opacity: 0.85; } .souad-ar-btn__label { font-size: 1rem; font-weight: 600; } @media (max-width: 860px) { .souad-ar-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; text-align: center; } .souad-ar-hero__content { align-items: center; text-align: center; } #content .souad-ar-hero__media img { max-width: 200px; } .souad-ar-hero__lead { max-width: 100%; } .souad-ar-hero__ctas { justify-content: center; } } @media (max-width: 480px) { #content .souad-ar-btn { min-width: 100%; align-items: center; } } .souad-ar-section { margin: 0 0 36px; } .souad-ar-section h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--ink); border-bottom: 1px solid var(--peach); padding-bottom: 8px; width: fit-content; margin: 0 0 16px; display: inline-block; } .souad-ar-section h3 { font-size: 1.1rem; color: var(--ink); margin: 0 0 10px; } .souad-ar-section p { margin: 0 0 0.9em; } .souad-ar-services { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .souad-ar-services li { margin: 0; padding: 8px 16px; background: var(--cream); border: 1px solid var(--border); border-radius: 999px; font-weight: 600; font-size: 0.92rem; color: var(--ink); } .souad-ar-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .souad-ar-mode { padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 10px rgba(8,52,52,0.04); } .souad-ar-mode h3 { margin-top: 0; } .souad-ar-mode__addr { font-family: "Segoe UI", sans-serif; color: var(--ink); margin: 0 0 8px; font-weight: 600; } .souad-ar-contact__list { list-style: none; margin: 0 0 18px; padding: 0; } .souad-ar-contact__list li { margin: 0 0 8px; padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 8px; } .souad-ar-contact__note { margin: 18px 0 0; padding: 12px 16px; background: var(--peach-soft); border-right: 3px solid var(--peach); border-radius: 8px; font-size: 0.9rem; color: var(--ink); font-style: italic; } /* Style des liens du contenu RTL : scope à `.souad-ar` (le wrapper de la home AR) pour ne pas affecter les liens stylés des autres pages AR (notamment les cards .contact-method qui ont leur propre design). */ body.lang-ar .souad-ar a { color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--peach) !important; text-underline-offset: 3px; border-bottom: 0 !important; } body.lang-ar .souad-ar-btn, body.lang-ar .souad-ar-btn:hover { text-decoration: none !important; } /* Garde-fou couleur des boutons-liens en AR : force le texte blanc sur les boutons à fond foncé (var(--ink)), quelle que soit la cascade — utile si un autre stylesheet ou un cache navigateur injecte un `color: var(--ink)` global sur les en contexte RTL. La spécificité (body.lang-ar + #content + classe) bat toutes les règles génériques `#content a {…}`. */ body.lang-ar #content .contact-distance-callout__btn, body.lang-ar #content .contact-distance-callout__btn:hover, body.lang-ar #content .modalites-cta__btn--cabinet, body.lang-ar #content .modalites-cta__btn--cabinet:hover, body.lang-ar #content .hero-home__btn--cabinet, body.lang-ar #content .hero-home__btn--cabinet:hover, body.lang-ar #content .souad-modes__cta--cabinet, body.lang-ar #content .souad-modes__cta--cabinet:hover { color: #fff !important; } /* Même logique pour les CTAs "distance" qui ont un fond peach clair : texte foncé attendu, pas blanc. On les blinde aussi. */ body.lang-ar #content .modalites-cta__btn--distance, body.lang-ar #content .modalites-cta__btn--distance:hover, body.lang-ar #content .hero-home__btn--distance, body.lang-ar #content .hero-home__btn--distance:hover, body.lang-ar #content .souad-modes__cta--distance { color: var(--ink) !important; }