@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Mulish:wght@400;500;600;700&display=swap');

/* ==========================================================================
   AU-DELÀ DU SON — « L'onde qui ramène à soi »  (David Blum · région Yverdon)
   Un seul motif relie tout l'univers : l'ONDE CONCENTRIQUE — les arcs du logo,
   la ride sur l'eau du lac, le bol tibétain vu de dessus, le son qui se propage.
   Palette chaude échantillonnée sur le logo (cuivre/terre) + les bols en bronze.
   Compo radiale : le hero rayonne d'un point de calme ; alternance sable / nuit bronze.
   ========================================================================== */

:root{
  /* --- 7 clés (mapping client-config.php) — chaud, méditatif --- */
  --color-background: #F6F1E8;  /* sable / lin chaud : la rive, la base calme        */
  --color-surface:    #EDE4D6;  /* argile clair : cartes, sections alternées         */
  --color-primary:    #382C21;  /* bronze profond (patine des bols, bois) : titres   */
  --color-text:       #2E261F;  /* brun-encre chaud : corps de texte (11:1)          */
  --color-muted:      #7C6F60;  /* taupe : légendes, secondaire (4.6:1)              */
  --color-border:     #E3D8C7;  /* filet discret                                     */
  --color-accent:     #A9631F;  /* cuivre profond : CTA, liens, eyebrows (5.1:1)     */
  --accent-glow:      #C88A44;  /* cuivre plus clair : ondes, accent sur fond sombre */
  --night:            #241B14;  /* nuit bronze : la bande sombre (lac au crépuscule) */

  --font-heading: 'Newsreader', Georgia, serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;

  --maxw: 1400px;
  --header-h: 88px;

  /* L'onde — un arc dessiné (écho des arcs du logo), réutilisé sous les eyebrows */
  --onde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='9' viewBox='0 0 132 9'%3E%3Cpath d='M2 6.5C24 1 44 1 66 4.2 88 7.4 108 7.4 130 2.2' fill='none' stroke='%23A9631F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --onde-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='9' viewBox='0 0 132 9'%3E%3Cpath d='M2 6.5C24 1 44 1 66 4.2 88 7.4 108 7.4 130 2.2' fill='none' stroke='%23C88A44' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Reset --- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:clip; }        /* clip, PAS hidden : hidden casserait le header sticky */
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body{
  margin:0;
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:17.5px;
  font-weight:400;
  line-height:1.72;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* --- Largeur : fluide + plafonnée --- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,44px);
}
.section{ padding-block:clamp(72px,9vw,128px); position:relative; }
.section.bg-surface{ background:var(--color-surface); }

/* --- Nuit bronze : la bande sombre (une par page, c'est un accent) --- */
.section.bg-dark{
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent-glow) 16%, transparent), transparent 46%),
    var(--night);
  color:#E9DECD;
  font-weight:500;                 /* clair sur sombre : on compense l'amincissement */
}
.section.bg-dark h1,.section.bg-dark h2,.section.bg-dark h3,.section.bg-dark h4{ color:#F5ECDD; }
.section.bg-dark .lead{ color:#EADFCE; }
.section.bg-dark .card p,.section.bg-dark p{ color:#E9DECD; }
.section.bg-dark .eyebrow{ color:var(--accent-glow); background-image:var(--onde-glow); }
.section.bg-dark .more{ color:var(--accent-glow); border-bottom-color:color-mix(in srgb,var(--accent-glow) 40%,transparent); }
.section.bg-dark .more:hover{ border-bottom-color:var(--accent-glow); }
.section.bg-dark .btn-primary{ background:var(--accent-glow); color:#241B14; border-color:var(--accent-glow); }
.section.bg-dark .btn-primary:hover{ background:color-mix(in srgb,var(--accent-glow) 85%,white); }
.section.bg-dark .btn-ghost{ color:#F5ECDD; border-color:color-mix(in srgb,#F5ECDD 45%,transparent); }
.section.bg-dark .btn-ghost:hover{ border-color:#F5ECDD; background:color-mix(in srgb,#F5ECDD 8%,transparent); }
.section.bg-dark .card{ background:color-mix(in srgb,#F5ECDD 6%,transparent); border-color:rgba(245,236,221,.14); }
.section.bg-dark em{ color:var(--accent-glow); }

/* --- Typographie --- */
h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--color-primary);
  font-weight:500;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.7rem,6vw,4.7rem); font-weight:400; }
h2{ font-size:clamp(2rem,4vw,3.1rem); font-weight:400; }
h3{ font-size:clamp(1.28rem,2vw,1.62rem); line-height:1.25; }
h4{ font-size:1.02rem; letter-spacing:0; }
p{ margin:0 0 1.15em; }
p,.lead{ max-width:63ch; }
.lead{
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  line-height:1.66;
  color:color-mix(in srgb,var(--color-text) 90%,white);
}
em{ font-style:italic; color:var(--color-accent); }
.center{ text-align:center; }
.center p,.center .lead,.center .eyebrow{ margin-inline:auto; }

/* --- Intitulé de section + L'ONDE (signature) --- */
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:1.5rem;
  padding-bottom:12px;
  background:var(--onde) no-repeat left bottom / 132px 9px;
}
.center .eyebrow{ background-position:center bottom; }

/* --- Boutons --- */
.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.1rem; }
.center .actions{ justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding:15px 30px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.98rem;
  letter-spacing:.01em;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn-sm{ padding:11px 22px; font-size:.9rem; }
.btn-primary{ background:var(--color-accent); color:#FCF7EF; border-color:var(--color-accent); }
.btn-primary:hover{ background:color-mix(in srgb,var(--color-accent) 86%,black); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--color-primary); border-color:var(--color-border); }
.btn-ghost:hover{ border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); }

/* --- « en savoir plus » --- */
.more{
  display:inline-block;
  font-weight:700;
  font-size:.95rem;
  color:var(--color-accent);
  text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb,var(--color-accent) 35%,transparent);
  padding-bottom:2px;
  transition:border-color .25s ease;
}
.more:hover{ border-bottom-color:var(--color-accent); }

/* ==========================================================================
   HEADER (sticky) — plomberie standardisée
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--color-background) 88%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
}
.site-header .wrap{
  min-height:var(--header-h);
  display:flex; align-items:center; gap:26px;
}
.brand{ display:inline-flex; align-items:center; flex-shrink:0; }
.brand img{ height:62px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.main-nav a{
  font-weight:600; font-size:.98rem; text-decoration:none; color:var(--color-text);
  padding:6px 0; position:relative; transition:color .2s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--color-accent); border-radius:2px; transition:right .28s ease;
}
.main-nav a:hover{ color:var(--color-accent); }
.main-nav a:hover::after,.main-nav a.active::after{ right:0; }
.main-nav a.active{ color:var(--color-accent); }
.header-cta{ display:flex; align-items:center; gap:14px; }

.burger{
  display:none; width:44px; height:44px; padding:10px; background:none; border:0; cursor:pointer;
}
.burger span{ display:block; height:2px; background:var(--color-primary); border-radius:2px; margin:5px 0; transition:.3s; }

/* ==========================================================================
   HERO — radial : le titre au centre calme, l'onde qui se propage
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:grid; place-items:center; text-align:center;
  padding-block:clamp(48px,8vh,96px);
}
.hero-rings{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 44%,
    transparent 0 57px,
    color-mix(in srgb,var(--color-accent) 13%,transparent) 57px 58.5px,
    transparent 58.5px 59px);
  -webkit-mask:radial-gradient(circle at 50% 44%, #000 8%, transparent 70%);
          mask:radial-gradient(circle at 50% 44%, #000 8%, transparent 70%);
}
.ripple{
  position:absolute; left:50%; top:44%; width:130px; height:130px;
  transform:translate(-50%,-50%); z-index:1; pointer-events:none;
}
.ripple span{
  position:absolute; inset:0; border-radius:50%;
  border:1.6px solid color-mix(in srgb,var(--color-accent) 45%,transparent);
  opacity:0; animation:ripple 7s ease-out infinite;
}
.ripple span:nth-child(2){ animation-delay:2.33s; }
.ripple span:nth-child(3){ animation-delay:4.66s; }
@keyframes ripple{
  0%{ transform:scale(.28); opacity:.5; }
  75%{ opacity:0; }
  100%{ transform:scale(5.2); opacity:0; }
}
.hero .wrap{ position:relative; z-index:2; }
.hero .actions{ justify-content:center; }
.hero h1{ margin-bottom:.3em; }
.hero .lead{ margin-left:auto; margin-right:auto; max-width:52ch; }

/* ==========================================================================
   Sections composables
   ========================================================================== */
/* Split 2 colonnes */
.split-2{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split-2 img{ border-radius:16px; box-shadow:0 24px 60px -30px rgba(56,44,33,.5); }
.split-2 .figure-round img{ border-radius:20px; }

/* Grille de cartes */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--color-background);
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:34px 30px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.bg-surface .card{ background:#F6F1E8; }
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(56,44,33,.55); }
.card .price{ display:block; margin-top:14px; font-weight:700; color:var(--color-accent); font-size:1.02rem; }
.card .card-ico{ width:44px; height:44px; margin-bottom:18px; color:var(--color-accent); }

/* Liste de bienfaits (puces graphiques → figées à l'intégration) */
.tags{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  font-size:.82rem; font-weight:600; color:var(--color-muted);
  border:1px solid var(--color-border); border-radius:999px; padding:5px 13px;
}

/* En-tête des pages intérieures — garde le motif de l'onde en fond */
.page-head{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(64px,9vw,116px); }
.page-head .hero-rings{ -webkit-mask:radial-gradient(circle at 50% 40%,#000 4%,transparent 66%); mask:radial-gradient(circle at 50% 40%,#000 4%,transparent 66%); }
.page-head .wrap{ position:relative; z-index:2; }
.page-head .lead{ margin-inline:auto; }

/* Bloc chiffres / étapes (le parcours d'une séance) */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px; }
.step .decor{ margin-bottom:16px; }
.ring-num{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  border:1.6px solid color-mix(in srgb,var(--color-accent) 55%,transparent);
  color:var(--color-accent); font-family:var(--font-heading); font-size:1.4rem; font-weight:500;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--color-accent) 8%,transparent);
}
.card .ring-num{ margin:0 auto 14px; }   /* dans une carte : centrée + espace sous la pastille */
.bg-dark .ring-num{ border-color:var(--accent-glow); color:var(--accent-glow); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent-glow) 12%,transparent); }

/* Bandeau CTA */
.cta-band{ text-align:center; }
.cta-band .wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }

/* Média + rond décoratif */
.figure{ position:relative; }
.figure figcaption{ margin-top:12px; font-size:.86rem; color:var(--color-muted); font-style:italic; }

/* Filet d'onde en séparateur discret */
.onde-sep{ height:9px; width:132px; margin:0 auto; background:var(--onde) no-repeat center / 132px 9px; }

/* Split aligné en haut (ex. formulaire + infos) */
.split-2.top{ align-items:start; }

/* --- Formulaire (mode maquette : onsubmit=return false, aucune donnée envoyée) --- */
.form{ display:grid; gap:18px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:block; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:7px; color:var(--color-primary); }
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--color-text);
  background:#FCFAF4; border:1.5px solid var(--color-border); border-radius:12px;
  padding:13px 15px; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--color-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 15%,transparent);
}
.form .actions{ margin-top:6px; }
.form-note{ font-size:.86rem; color:var(--color-muted); margin-top:2px; }

/* Panneau d'infos pratiques (à côté du formulaire) */
.info-panel{ display:grid; gap:26px; align-content:start; }
.info-panel .info-block h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); margin:0 0 .6rem; }
.info-panel .info-block p{ margin:0; }
.info-panel .soon{ color:var(--color-muted); font-style:italic; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--color-surface); border-top:1px solid var(--color-border); padding-block:clamp(52px,7vw,84px) 30px; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; align-items:start; }
.foot-brand img{ height:88px; width:auto; margin-bottom:16px; }
.foot-brand p{ color:var(--color-muted); max-width:34ch; }
.site-footer h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); margin:0 0 1rem; }
.site-footer p{ margin:0 0 .7em; }
.foot-soon{ color:var(--color-muted); font-style:italic; font-size:.92rem; }
.foot-links{ display:flex; flex-direction:column; gap:.55em; }
.foot-links a{ text-decoration:none; color:var(--color-text); transition:color .2s ease; }
.foot-links a:hover{ color:var(--color-accent); }
.foot-base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:44px; padding-top:24px; border-top:1px solid var(--color-border); }
.foot-base p{ margin:0; font-size:.82rem; color:var(--color-muted); }
.foot-legal{ max-width:52ch; }

/* ==========================================================================
   MOBILE — une seule règle de bascule (toutes les grilles → 1fr)
   ========================================================================== */
@media (max-width:1024px){
  /* Header compact — logo généreux + un petit espace au-dessus et en dessous */
  :root{ --header-h:68px; }
  .brand img{ height:52px; }
  .burger{ display:block; width:40px; height:40px; padding:9px; }
  .header-cta{ margin-left:auto; }   /* pousse le burger à DROITE (le nav fixe ne le fait plus) */
  .header-cta .btn-sm{ display:none; }

  /* Menu déroulant = panneau PLEINE LARGEUR sous le header, liens alignés à gauche */
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--color-background); border-bottom:1px solid var(--color-border);
    padding:8px clamp(20px,5vw,44px) 18px; margin:0;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .3s ease, opacity .2s ease;
    box-shadow:0 24px 40px -28px rgba(56,44,33,.5);
  }
  .main-nav.open{ max-height:80vh; opacity:1; pointer-events:auto; }
  .main-nav a{ width:100%; text-align:left; padding:13px 0; border-bottom:1px solid var(--color-border); }
  .main-nav a:last-child{ border-bottom:0; }
  .main-nav a::after{ display:none; }

  /* TOUTES les grilles multi-colonnes s'empilent ici (footer inclus) */
  .split-2,
  .card-grid,
  .card-grid.cols-2,
  .steps,
  .form .row,
  .info-panel,
  .foot-top,
  .foot-base{ grid-template-columns:1fr; }
  .split-2{ display:flex; flex-direction:column; }
  .split-2 .media-first{ order:-1; }
  .foot-top{ display:grid; gap:34px; }
}

/* --- Accessibilité motion --- */
@media (prefers-reduced-motion:reduce){
  .ripple span{ animation:none; opacity:.22; transform:scale(2.6); }
  .ripple span:nth-child(2){ transform:scale(3.6); }
  .ripple span:nth-child(3){ transform:scale(4.6); }
  html{ scroll-behavior:auto; }
}