/* =====================================================================
   HOLYSM PAGES
   Complements a holysm-system.css, communs a toutes les nouvelles
   pages. A charger APRES la feuille systeme.
   =====================================================================
   Deux blocs seulement :
   1. THEME, isole volontairement, pour pouvoir basculer la page
      sur la palette des pages Naturopathie et Yoga actuellement en
      ligne sans toucher au reste du fichier.
   2. COMPLEMENTS, trois composants absents du systeme parce que la
      page Psychomotricite n'en avait pas besoin : tarifs, temoignages
      et lieux. Tous construits sur .cocoon, aucun langage graphique
      nouveau.
   ===================================================================== */

/* ============================================================
   1. THEME
   Etat actuel : palette bordeaux, celle de /psychomotricienne-pezenas/.
   Les pages /naturopathe-pezenas/ et /yoga-pezenas/ en ligne annoncent
   un theme-color #3B4A3E, donc une palette verte. Pour basculer cette
   page sur cette palette, remplacer les valeurs de ce seul bloc par
   les tokens de ces pages. Aucune autre ligne du site n'est a toucher.
   ============================================================ */
:root{
  /* Laisser vide pour conserver la palette systeme.
     Exemple de bascule :
     --deep:#3B4A3E;
     --band:#32402F;
     --deeper:#25311F;
     --bordeaux:#3B4A3E;
     --rose:#5A6B4C;
     --petal:#CFDAC2;
  */
}

/* ============================================================
   2. COMPLEMENTS
   ============================================================ */

/* ---- Tarifs, construit sur .cocoon ---- */
.price{display:flex;flex-direction:column;gap:.35rem}
.price .amount{font-weight:800;letter-spacing:-.03em;font-size:1.6rem;color:var(--bordeaux);line-height:1.1}
.price .meta{font-size:.88rem;color:var(--ink-soft)}
.price .todo{font-weight:600;color:var(--rose);font-size:1.15rem;letter-spacing:-.01em}

/* ---- Temoignages, construit sur .cocoon ---- */
.said blockquote{margin:0;font-size:.97rem;line-height:1.6;color:var(--ink-soft)}
.said cite{display:block;margin-top:.9rem;font-style:normal;font-weight:600;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--rose)}

/* ---- Lieux, construit sur .cocoon ---- */
.place-card h3{margin-bottom:.35rem}
.place-card address{font-style:normal;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.place-card .when{margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(124,61,71,.18);
  font-size:.92rem;color:var(--ink-soft)}

/* ---- Mentions legales de prudence ---- */
.caution{font-size:.85rem;color:var(--on-deep-soft);max-width:62ch;margin-top:1.4rem}
.panel .caution{color:var(--ink-soft)}

/* ---- Fil d'ariane ---- */
.crumb{font-size:.82rem;color:var(--on-deep-soft);padding-block:1rem;
  border-bottom:1px solid rgba(251,237,233,.18)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.crumb li::after{content:"/";margin-left:.45rem;opacity:.5}
.crumb li:last-child::after{content:""}
.crumb a{border-bottom:1px solid rgba(251,237,233,.3)}
.crumb a:hover{border-color:#fff}

/* ---- Grille de quatre colonnes, utilisee par les blocs .proof ---- */
.grid4{display:grid;gap:1.6rem}
@media (min-width:700px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid4{grid-template-columns:repeat(4,1fr)}}

/* ---- Carte cliquable ---- */
a.cocoon{display:block;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
a.cocoon:hover{transform:translateY(-3px);box-shadow:0 26px 50px -34px rgba(44,29,36,.6)}

/* ---- Lien dans le corps du texte, pages legales ---- */
.lien{color:var(--rose);border-bottom:1px solid rgba(156,79,89,.4);transition:border-color .2s var(--ease)}
.lien:hover{border-color:var(--rose)}
.panel h2{margin-top:clamp(2rem,4vw,2.8rem)}
.panel h2:first-of-type{margin-top:0}
.panel h3{margin-top:1.4rem}

/* ---- Page courante dans le menu ---- */
.nav a[aria-current="page"]{color:var(--petal)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---- Bande photographique intercalaire ---- */
.photoband{padding:clamp(2.2rem,5vw,3.8rem) 0}
.photoband .duo{display:grid;gap:1rem}
@media (min-width:820px){.photoband .duo{grid-template-columns:1.35fr 1fr}}

/* ---- Emplacement photo en attente de prise de vue ---- */
.shot{
  display:grid;place-items:center;align-content:center;text-align:center;gap:.55rem;
  padding:1.6rem;border:1px dashed rgba(251,237,233,.34);border-radius:var(--panel);
  background:rgba(255,255,255,.045);color:var(--on-deep-soft);min-height:170px;
}
.panel .shot{border-color:rgba(124,61,71,.3);background:rgba(124,61,71,.045);color:var(--ink-soft)}
.shot b{font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--petal)}
.panel .shot b{color:var(--rose)}
.shot code{font-size:.86rem;font-family:inherit;opacity:.9}
.shot span{font-size:.86rem;max-width:40ch;line-height:1.5}
.shot.wide{aspect-ratio:16 / 7;min-height:0}
.shot.portrait{aspect-ratio:4 / 5;min-height:0}
.shot.paysage{aspect-ratio:16 / 10;min-height:0}

/* =====================================================================
   DEGRADES DE FOND
   Chaque section porte son propre degrade vertical. Les trois teintes
   s'enchainent en boucle, deep vers band, band vers deeper, deeper vers
   deep, si bien que la couleur de fin d'une section est exactement la
   couleur de depart de la suivante : le degrade est continu sur toute
   la page, sans aucune arete.
   Aucune couleur nouvelle. Ce bloc vit dans la feuille de pages, la
   page Psychomotricite n'est donc pas affectee.
   ===================================================================== */
body{background:var(--deep)}

.sect.grad-a,.photoband.grad-a{background:linear-gradient(180deg,var(--deep) 0%,var(--band) 100%)}
.sect.grad-b,.photoband.grad-b{background:linear-gradient(180deg,var(--band) 0%,var(--deeper) 100%)}
.sect.grad-c,.photoband.grad-c{background:linear-gradient(180deg,var(--deeper) 0%,var(--deep) 100%)}

/* Halo rose derriere la section de contact */
.sect.glow{position:relative}
.sect.glow::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(88% 62% at 50% 0%, rgba(156,79,89,.34), transparent 68%);
}
.sect.glow > *{position:relative}

/* Les panneaux clairs et les cartes ne sont plus plats */
.panel{background:linear-gradient(158deg, var(--blush) 0%, var(--sand) 100%)}
.panel.sand{background:linear-gradient(158deg, var(--sand) 0%, var(--blush) 100%)}
.cocoon{background:linear-gradient(170deg,#FFFFFF 0%,#FFFBF9 100%)}
.cocoon.sage{background:linear-gradient(170deg,var(--sage-tint) 0%,#F1F4EC 100%)}

/* Bandeau de preuve et pied de page */
.strip{background:linear-gradient(180deg, rgba(60,23,30,.5), rgba(60,23,30,0))}
.footer.f-band{background:linear-gradient(180deg, var(--band) 0%, var(--deeper) 100%)}
.footer.f-deeper{background:linear-gradient(180deg, var(--deeper) 0%, var(--deeper) 100%)}
.footer.f-deep{background:linear-gradient(180deg, var(--deep) 0%, var(--deeper) 100%)}

/* =====================================================================
   VISUELS PLUS SOBRES
   Les images ne doivent plus occuper un ecran entier pour rien.
   ===================================================================== */
.hero{min-height:min(74vh,660px)}
.quoteband{min-height:clamp(240px,24vw,360px)}
@media (max-width:720px){.quoteband{min-height:clamp(260px,60vw,340px)}}
.split .ratio-45.img-frame{max-height:520px;aspect-ratio:auto;height:100%;min-height:340px}
.cab .ratio-1610.img-frame,.cab .ratio-45.img-frame{max-height:420px}
.photoband{padding:clamp(1.6rem,3.5vw,2.6rem) 0}

/* ---- Monogramme Holysm dans l'en-tete et le pied de page ----
   La regle systeme met .brand en colonne. Ici le monogramme doit se
   placer A COTE du nom, pas au dessus, et le bloc reste colle a gauche
   de sa cellule de grille. */
.nav__in > .brand{justify-self:start}
.brand{
  display:flex;flex-direction:row;align-items:center;
  justify-content:flex-start;gap:.7rem;line-height:1.12;
}
.brand__mark{width:40px;height:40px;flex:none;display:block}
.brand__txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.12}
.footer__mark{width:46px;height:46px;display:block;margin-bottom:.8rem}
@media (max-width:520px){.brand__mark{width:32px;height:32px}.brand{gap:.55rem}}

/* =====================================================================
   HERO : le sujet occupe la moitie droite
   Le media ne couvre plus toute la largeur. Il demarre au tiers et se
   fond dans le fond par un masque, pour que la personne photographiee
   ne se retrouve jamais derriere le texte. En dessous de 900 px le
   comportement d'origine reprend, faute de place.
   ===================================================================== */
@media (min-width:900px){
  .hero__media{
    left:auto;right:0;width:64%;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.8) 26%, #000 42%);
            mask-image:linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.8) 26%, #000 42%);
  }
  .hero__media img{object-position:50% 28%}
  .hero__veil{background:
    linear-gradient(90deg, var(--deep) 0%, var(--deep) 30%, rgba(88,39,47,.86) 42%, rgba(88,39,47,.5) 56%, rgba(88,39,47,.18) 70%, rgba(88,39,47,.06) 82%),
    linear-gradient(to top, rgba(60,23,30,.5), rgba(60,23,30,0) 44%);}
}

/* Meme logique pour la bande photo : le sujet reste a droite du texte */
@media (min-width:900px){
  .quoteband__media{
    left:38%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 14%, #000 34%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 14%, #000 34%);
  }
  .quoteband__media img{object-position:50% 40%}
}

/* =====================================================================
   AJUSTEMENTS DEMANDES
   ===================================================================== */
:root{--maxw:1360px}
@media (min-width:900px){.hero__col{max-width:46rem}}

/* ---- Liste de tarifs dans une carte .price ---- */
.price ul{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.15rem}
.price li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.94rem;color:var(--ink-soft);
  border-bottom:1px dotted rgba(124,61,71,.24);padding:.42rem 0;
}
.price li:last-child{border-bottom:none}
.price li span{display:block}
.price li small{display:block;font-size:.79rem;opacity:.72;font-style:italic}
.price li b{font-weight:700;color:var(--bordeaux);white-space:nowrap;font-size:1rem}
.price .cadre{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--rose);margin-bottom:.15rem}