/*
Theme Name: Andraud Ostéopathe
Theme URI: https://www.osteopathe-saintetienne.fr
Author: Thomas Andraud
Description: Thème bloc sur mesure pour le cabinet d'ostéopathie de Thomas Andraud, Saint-Étienne.
Version: 1.0.3
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andraud-osteo
Tags: block-theme, full-site-editing, business, one-column
*/

:root{
  --marine:#192231; --nuit:#111722; --creme:#fbf9f5; --sable:#f4ede2;
  --or:#cba160; --or-fonce:#b88d4c; --gris:#687282; --trait:#e5dacb;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--marine);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
a{text-decoration:none;color:inherit}
:where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0}
figure.wp-block-image{margin:0}
.wp-site-blocks{padding:0}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px;width:100%}

/* ---------- En-tête ---------- */
header.wp-block-template-part{position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.barre-info{background:var(--marine);color:rgba(255,255,255,.8);font-size:11px}
.barre-info-rangee{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-block:8px}
.barre-info a{color:#fff;font-weight:600}
.entete{background:#fff;border-bottom:1px solid var(--trait)}
.entete-rangee{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px}
.marque-nom{font-family:var(--serif);font-size:1.3rem;letter-spacing:.16em;line-height:1.2;white-space:nowrap}
.marque-nom a:hover{color:var(--or)}
.marque-sous{font-size:10px;letter-spacing:.25em;color:var(--gris);font-weight:500;white-space:nowrap}
.menu{flex:1;justify-content:flex-end;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.menu .wp-block-navigation-item__content{font-size:11px;text-decoration:none}
.menu .wp-block-navigation-item__content:hover{color:var(--or)}
.menu .wp-block-navigation__container{gap:22px;flex-wrap:nowrap}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open{background-color:var(--marine)!important;color:#fff!important}

/* ---------- Boutons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:16px!important;align-items:center}
.btns.centre{justify-content:center}
.wp-block-button .wp-block-button__link{border-radius:2px;padding:14px 32px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:.2s;border:0}
.wp-block-button.b-rond .wp-block-button__link{border-radius:999px;text-transform:none;letter-spacing:0;font-size:14px}
.wp-block-button.b-or .wp-block-button__link{background:var(--or);color:var(--nuit)}
.wp-block-button.b-or .wp-block-button__link:hover{background:var(--or-fonce)}
.wp-block-button.b-marine .wp-block-button__link{background:var(--marine);color:#fff}
.wp-block-button.b-marine .wp-block-button__link:hover{background:var(--nuit)}
.wp-block-button.b-fantome .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.wp-block-button.b-fantome .wp-block-button__link:hover{background:rgba(255,255,255,.1)}
.entete-cta .wp-block-button .wp-block-button__link{padding:10px 24px;font-size:11px;white-space:nowrap}

/* ---------- Sections ---------- */
.sec{padding-block:112px}
.sec.sable{background:#f5efe5;border-block:1px solid #ede3d5}
.sec.creme{background:var(--creme)}
.sec.sable2{background:#f6efe4;border-top:1px solid #ebdccb}
.sec.nuit2{background:#1c2434;color:#fff}
.sec.marine{background:var(--marine);color:#fff}
.sec.sombre{background:#18212e;color:#fff}
.sec h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:.5em}
.sec h3{font-size:1.3rem;margin-bottom:.5em}
.sec p{margin-bottom:1em}
.clair{color:#fff}
.chapeau-clair{color:#d5dbe4;font-weight:300}
.centre{text-align:center}
.entete-section{max-width:42rem;margin:0 auto 56px}
.entete-section p:last-child{margin-bottom:0}
.pastille{display:inline-block;padding:4px 14px;border:1px solid rgba(25,34,49,.25);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.1em;margin-bottom:1.2em!important}
.pastille.or{border-color:var(--or);color:#d4b27b;letter-spacing:.2em}
.pastille.sur-sombre{border-color:rgba(255,255,255,.25);color:var(--or)}
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grille4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.duo.seul{grid-template-columns:minmax(0,46rem);justify-content:center}
.discret{color:var(--gris)}
.duo.inverse{grid-template-columns:5fr 7fr}
.photo{border-radius:32px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.15);border:1px solid var(--trait);max-width:460px;width:100%;margin-inline:auto;background:var(--sable)}
.photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.photo.carre img{aspect-ratio:1/1}
.logo-pied{max-width:260px;margin-inline:auto;border-radius:24px;overflow:hidden;border:2px solid rgba(203,161,96,.6);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.logo-pied img{width:100%;display:block}

/* Hero */
.hero{background:radial-gradient(ellipse at 70% 20%,#2a3850 0%,#192231 60%);color:#fff;text-align:center;padding:120px 24px;min-height:620px;display:flex;align-items:center}
.hero-in{max-width:56rem;margin:0 auto}
.hero.wp-block-cover{padding:120px 24px;align-items:center}
.surtitre{font-family:var(--serif);color:#d4b27b;letter-spacing:.25em;text-transform:uppercase;font-size:1rem;margin-bottom:0}
.hero h1{color:#fff;font-size:clamp(2rem,5vw,3.6rem);font-weight:400;margin:.4em 0 .5em;line-height:1.18}
.hero-texte{color:rgba(255,255,255,.9);font-weight:300;font-size:1.1rem;max-width:42rem;margin:0 auto 2em}
.rassure{background:#faf6f0;border-bottom:1px solid #ebdccb;padding-block:28px}
.rassure-t{font-family:var(--serif);font-weight:500;text-align:center;margin:0}
.rassure-s{font-size:12px;color:var(--gris);text-align:center;margin:0}

/* Stats */
.stats{gap:12px;margin-top:8px}
.stat{background:#fff;border:1px solid var(--trait);border-radius:16px;padding:14px;text-align:center}
.sec .stat p{margin:0}
.stat-l{font-size:10px;letter-spacing:.1em;color:var(--gris);font-weight:600}
.stat-v{font-weight:700;font-size:1.05rem;margin-top:4px!important}

/* Cartes */
.carte{background:#f6f2ea;color:#1a2230;border-radius:28px;padding:32px;box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .3s}
.carte:hover{transform:translateY(-4px)}
.carte::before{content:"";display:block;width:36px;height:4px;background:var(--or);border-radius:2px;margin-bottom:18px}
.sec .carte h3{font-weight:700}
.sec .carte p{font-size:14px;color:#4b5563;margin:0}
.carte.etape{background:#faf6f0;border-radius:32px;position:relative;min-height:300px}
.sec .etape-n{position:absolute;top:18px;right:24px;font-family:var(--serif);font-weight:700;font-size:3rem;color:#e5dacb;margin:0;line-height:1}
.sec .etiquette{display:inline-block;margin-top:20px;padding:4px 14px;border-radius:999px;background:#f4ede2;font-size:11px;font-weight:600;color:var(--marine)}
.sec .carte p.etiquette{color:var(--marine);font-size:11px;margin-top:20px}
.centre-cta{margin-top:56px}
.ligne-prix{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center;margin-top:56px}
.sec .ligne-prix p{margin:0;color:#d5dbe4;font-size:14px;font-weight:500}

/* Liste */
.liste-or{list-style:none;padding:0;margin:16px 0}
.liste-or li{position:relative;padding-left:28px;margin-bottom:16px;color:rgba(25,34,49,.8)}
.liste-or li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--or)}

/* Avis */
.avis{background:#fff;border:1px solid #e8ded0;border-radius:16px;padding:32px;transition:box-shadow .2s}
.avis:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.sec .etoiles{color:var(--or);letter-spacing:2px}
.sec .citation{font-style:italic;color:var(--gris);font-size:14px;margin-bottom:1.5em}
.sec .auteur{font-size:12px;font-weight:600;margin:0}

/* FAQ */
.faq{margin-bottom:24px}
.faq .wp-block-details{background:#fff;border:1px solid #ebdccb;border-radius:16px;padding:16px 24px;margin-bottom:12px}
.faq summary{font-weight:600;cursor:pointer}
.sec .faq .wp-block-details p{font-size:14px;color:var(--gris);margin:10px 0 0}

/* Contact / pied */
.embleme{width:260px;aspect-ratio:3/4;border:2px solid rgba(203,161,96,.6);border-radius:24px;background:rgba(17,23,34,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.3);margin-inline:auto}
.embleme-anneau{width:128px;height:128px;border:1px solid rgba(203,161,96,.5);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:24px}
.sec .embleme p{margin:0}
.emb-ta{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--or);letter-spacing:.1em}
.emb-petit{font-size:9px;letter-spacing:.2em;color:rgba(203,161,96,.8)}
.emb-titre{font-family:var(--serif);letter-spacing:.2em;font-size:1.1rem}
.emb-do{letter-spacing:.3em;font-size:12px;color:var(--or);font-weight:700}
.contact-split{grid-template-columns:5fr 7fr}
.sec .contact-ligne{font-weight:600;margin-bottom:12px}
.contact-ligne a:hover{color:var(--or)}
.mentions{background:#18212e;color:rgba(251,249,245,.5);font-size:12px;border-top:1px solid rgba(255,255,255,.1);padding-block:28px}
.mentions-rangee{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.mentions a{margin-left:20px}
.mentions a:hover{color:#fff}

:where(a,button,summary):focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:900px){
  .grille3,.grille4,.duo,.duo.inverse,.contact-split{grid-template-columns:1fr}
  .duo.inverse .photo{order:2}
  .sec{padding-block:72px}
  .entete .entete-cta{display:none}
  .barre-info-rangee{justify-content:center;text-align:center}
  .marque-nom{font-size:1rem;letter-spacing:.1em}
  .marque-sous{font-size:8px;letter-spacing:.15em}
  .menu{flex:0}
  .mentions-rangee{justify-content:center}
  .mentions a{margin:0 10px}
}