/* Page : fiche individuelle d'un service (single-service.php)
   Reutilise les classes de commun.css : .wrap .block .head .eyebrow .btn .link .cta-row .stars
   Tokens du theme uniquement : --anthra --cream --grege --terra --terra-d --ink --ardoise --border */

/* --- Intro --- */
.page-intro{padding:44px 0 38px;background:var(--grege);color:var(--ink);position:relative;overflow:hidden;transition:background .5s,color .5s}
.page-intro h1{font-size:clamp(2.1rem,4.2vw,3rem);margin:10px 0 10px}
.page-intro .lead{color:var(--ardoise);font-size:1.08rem;max-width:40em;margin-bottom:18px;transition:color .5s}
.page-intro .cta-row{margin-bottom:0}
.service-back{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--ardoise);margin-bottom:16px;transition:color .5s}
.service-back:hover{color:var(--terra-d)}

/* Mode nuit : meme traitement que .section-dark (anthracite + creme),
   pour rester coherent avec le reste du site en pleine nuit. */
[data-mode=night] .page-intro{background:var(--anthra);color:var(--cream)}
[data-mode=night] .page-intro .lead{color:var(--cream-muted)}
[data-mode=night] .page-intro .eyebrow{color:var(--terra-lite)}
[data-mode=night] .service-back{color:var(--cream-muted)}
[data-mode=night] .service-back:hover{color:var(--terra-lite)}

/* --- Image et texte cote a cote (meme principe que .hero/.hero-grid sur
   l'accueil) : texte a gauche, photo a droite, alignes verticalement sur
   le centre. Sans photo (.no-photo), l'intro repasse en une seule colonne
   pleine largeur — pas de colonne vide en regard. --- */
.service-hero-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.service-hero-grid.no-photo{grid-template-columns:1fr}
.service-intro{position:relative;z-index:1}

/* --- Photo : object-fit:contain plutot que cover — l'image reste toujours
   entiere et nette, jamais rognee (tetes coupees, bords perdus). Un cadre
   carre, de taille raisonnable (pas immense), avec un fond doux qui
   comble sans heurt l'espace si la photo n'a pas exactement ce ratio.
   Coins arrondis et ombre conserves. --- */
.service-photo{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s);aspect-ratio:1/1;background:var(--grege);display:flex;align-items:center;justify-content:center}
.service-photo img{width:100%;height:100%;object-fit:contain;display:block}
[data-mode=night] .service-photo{background:rgba(255,255,255,.06)}

/* --- Section juste apres le hero : rythme resserre --- */
.service-body{padding-top:48px}

/* --- Contenu detaille (ACF wysiwyg) : plus large qu'une simple colonne de
   lecture (760px avant), sans pour autant etirer le texte bord a bord
   (mauvais pour la lisibilite sur les tres larges ecrans) — un bon
   compromis pour les services aux textes longs et a sous-sections (ex.
   Orthopedie et maintien a domicile), qui restaient auparavant coinces
   dans une colonne etroite alors que la page a plus de place a offrir. --- */
.service-contenu{max-width:900px}
.service-contenu h2{font-size:1.5rem;margin:34px 0 14px}
.service-contenu h2:first-child{margin-top:0}
.service-contenu h3{font-size:1.2rem;margin:26px 0 10px}
.service-contenu p{color:var(--ardoise);font-size:1rem;line-height:1.75;margin-bottom:16px}
.service-contenu ul,.service-contenu ol{margin:0 0 16px;padding-left:22px;color:var(--ardoise);display:grid;gap:8px}
.service-contenu li{line-height:1.65}
.service-contenu strong{color:var(--ink);font-weight:600}
.service-contenu a{color:var(--terra-d);text-decoration:underline;text-underline-offset:2px}
.service-contenu a:hover{color:var(--terra)}
.service-contenu img{max-width:100%;border-radius:var(--rs);margin:18px 0;display:block}
.service-contenu blockquote{border-left:3px solid var(--terra);padding-left:18px;color:var(--ardoise);font-style:italic;margin:20px 0}

/* --- Declinaisons --- */
.service-declinaisons{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:28px}
.service-declinaisons li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px}
.service-declinaisons .nm{font-weight:600;font-size:.96rem}
.service-declinaisons .duree{font-size:.8rem;color:var(--ardoise);white-space:nowrap}

/* Sous 940px : une seule colonne, image empilee AU-DESSUS du texte (ordre
   visuel force par CSS — le texte reste premier dans le DOM, donc lu en
   premier par un lecteur d'ecran, seul l'ordre visuel change). Cadre plus
   large que haut une fois empilee (bandeau), hauteur plafonnee : reste
   raisonnable, ne domine pas l'ecran. */
@media(max-width:940px){
.service-hero-grid{grid-template-columns:1fr}
.service-hero-grid .service-photo{order:-1;margin-bottom:22px}
.service-photo{aspect-ratio:4/3;max-height:280px}
}

@media(max-width:560px){
.service-photo{max-height:220px}
.service-declinaisons{grid-template-columns:1fr}
}