/*
Theme Name: REMS Thérapie
Theme URI: https://remstherapie.com
Author: REMS Thérapie
Description: Thème bloc sur mesure de REMS Thérapie, converti depuis la maquette HTML. Le design vit dans cette feuille ; le contenu se modifie dans l'éditeur de WordPress.
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: rems-therapie
Tags: block-theme, full-site-editing, one-column
*/

:root{
  /* palette « Clinique moderne » choisie par le client : pétrole, sauge, blanc cassé, corail */
  --bg:#F6F4EF; --surface:#E3E9E1; --ink:#1F4E5A; --muted:#4F686E;
  --accent:#E8743B; --on-accent:#10292F; --sage:#8FB5A3; --line:#CFD9D1; --rayon:12px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#10242A;--surface:#17323A;--ink:#EEF1EC;--muted:#9FB5B4;--accent:#E8743B;--on-accent:#10292F;--sage:#8FB5A3;--line:#2A474F}
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(4.5rem + env(safe-area-inset-top,0px));scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Jost','Helvetica Neue',Arial,sans-serif;font-weight:300;font-size:1.0625rem;line-height:1.65}
img{max-width:100%;height:auto} /* height:auto : sinon l'attribut height posé par WordPress l'emporte sur le cadrage */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

a:not(#_){color:inherit}
p:not(#_){margin:1em 0} /* marge par défaut des paragraphes, que WordPress remet à zéro dans les groupes */
.wrap:not(#_){max-width:68rem;margin:0 auto;padding:0 1.5rem}

/* --- En-tête fixe : nom et devise, menu, sélecteur de langue, bouton --- */
header:not(#_){position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.admin-bar header:not(#_){top:32px}
header .wrap:not(#_){display:flex;justify-content:space-between;align-items:center;padding-top:1rem;padding-bottom:1rem}
.marque:not(#_){display:flex;flex-direction:column;line-height:1.25}
.marque p:not(#_){margin:0}
.marque strong:not(#_){font-weight:500;letter-spacing:.02em;white-space:nowrap}
.devise:not(#_){font-size:.75rem;color:var(--muted);white-space:nowrap}
.entete-droite:not(#_){display:flex;align-items:center}
.menu .wp-block-navigation__container:not(#_){flex-wrap:nowrap;gap:0}
.menu .wp-block-navigation-item:not(#_){margin-left:1.5rem}
.menu .wp-block-navigation-item__content:not(#_){padding:0;text-decoration:none;color:var(--muted);font-size:.95rem;white-space:nowrap}
.menu .wp-block-navigation-item__content:hover:not(#_){color:var(--ink)}
.langues:not(#_){display:flex;margin-left:1.5rem;border:1px solid var(--line);border-radius:var(--rayon);overflow:hidden;font-size:.85rem;font-weight:500}
.langues p:not(#_){margin:0}
.langues .actif:not(#_){padding:.3rem .65rem;background:var(--ink);color:var(--bg)}
.langues a:not(#_){display:block;padding:.3rem .65rem;color:var(--muted);text-decoration:none;white-space:nowrap}
.langues a:hover:not(#_){color:var(--ink)}

/* --- Boutons --- */
.wp-block-button__link:not(#_){display:inline-block;background:var(--accent);color:var(--on-accent);padding:.85rem 1.6rem;border-radius:var(--rayon);text-decoration:none;font-family:inherit;font-size:inherit;font-weight:500;line-height:inherit}
.wp-block-button__link:hover:not(#_){opacity:.9}
.entete-droite .wp-block-buttons:not(#_){margin-left:1.5rem}
.entete-droite .wp-block-button__link:not(#_){padding:.5rem 1.1rem;font-size:.95rem;white-space:nowrap}

/* --- Héros --- */
.hero:not(#_){display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:center;padding:4rem 0 5rem}
.hero:not(#_)::after{content:"";width:100%;max-width:15rem;aspect-ratio:120/300;justify-self:center;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cstyle%3Ecircle%7Bfill:none;stroke:%238FB5A3;stroke-width:1.5;stroke-dasharray:140;stroke-dashoffset:140;animation:d 1.6s ease-out forwards%7D@keyframes d%7Bto%7Bstroke-dashoffset:0%7D%7D@media (prefers-reduced-motion:reduce)%7Bcircle%7Banimation:none;stroke-dashoffset:0%7D%7D%3C/style%3E%3Cline x1='60' y1='10' x2='60' y2='290' stroke='%23CFD9D1' stroke-width='1'/%3E%3Ccircle cx='60' cy='24' r='14' style='animation-delay:0.0s'/%3E%3Ccircle cx='60' cy='56' r='15' style='animation-delay:0.12s'/%3E%3Ccircle cx='60' cy='90' r='16' style='animation-delay:0.24s'/%3E%3Ccircle cx='60' cy='126' r='17' style='animation-delay:0.36s'/%3E%3Ccircle cx='60' cy='164' r='18' style='animation-delay:0.48s'/%3E%3Ccircle cx='60' cy='204' r='19' style='animation-delay:0.6s'/%3E%3Ccircle cx='60' cy='246' r='20' style='animation-delay:0.72s'/%3E%3C/svg%3E") center/contain no-repeat}
h1:not(#_){font-weight:300;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.08;margin:0 0 1.5rem;letter-spacing:-.02em}
.lead:not(#_){max-width:34rem;color:var(--muted);font-size:1.15rem;margin:0 0 2rem}

/* --- Sections et flèche de retour en haut --- */
section:not(#_){position:relative;padding:4.5rem 0;border-top:1px solid var(--line)}
h2:not(#_){font-weight:400;font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 2.5rem;letter-spacing:-.01em}
.top:not(#_){position:absolute;top:1.5rem;right:max(1.5rem,calc((100% - 68rem)/2 + 1.5rem));width:2.5rem;height:2.5rem;margin:0;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:var(--bg);font-size:0;line-height:0}
.top:hover:not(#_){color:var(--ink);border-color:var(--ink)}
.top a:not(#_){position:absolute;inset:0;border-radius:50%;color:inherit}
.top a:not(#_)::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.contact .top:not(#_){background:var(--surface)}
.discret:not(#_){color:var(--muted)}
.etroit:not(#_){max-width:26rem}

/* --- Signification des lettres R, E, M, S --- */
.lettres:not(#_){list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.lettres li:not(#_){border-top:2px solid var(--sage);padding-top:1rem;font-weight:500}
.lettres strong:not(#_){display:block;font-size:2.5rem;font-weight:300;line-height:1;margin-bottom:.5rem}

/* --- Disciplines : titre à gauche, texte à droite --- */
.disc:not(#_){display:grid;grid-template-columns:14rem 1fr;gap:1rem 3rem;padding:1.75rem 0;border-top:1px solid var(--line)}
.disc:first-of-type:not(#_){border-top:0;padding-top:0}
.disc h3:not(#_){margin:0;font-weight:500;font-size:1.25rem}
.disc p:not(#_){margin:0 0 .5rem;max-width:40rem}
.disc .petit:not(#_){margin:0;max-width:none;color:var(--muted);font-size:.95rem;line-height:calc(1.0625rem * 1.65)}

/* --- Deux colonnes : ce que je traite, pour qui, à propos --- */
.two:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.two ul:not(#_){margin:0;padding-left:1.1rem;color:var(--muted)}
.two li:not(#_){margin-bottom:.4rem}
.two h3:not(#_){font-weight:500;font-size:1.25rem;margin:2rem 0 .75rem}

/* --- Déroulement d'une séance --- */
.steps:not(#_){list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:s}
.steps li:not(#_){counter-increment:s;border-top:2px solid var(--sage);padding-top:1rem}
.steps li:not(#_)::before{content:counter(s);display:block;font-size:2rem;font-weight:300;color:var(--sage);line-height:1}
.steps strong:not(#_){display:block;font-weight:500;margin:.5rem 0 .25rem}

/* --- Tarifs : titre et explication à gauche, durées et prix à droite, bouton sous les prix --- */
.disc.tarif:not(#_){grid-template-columns:minmax(0,1fr) 24rem}
.tarif .petit:not(#_){margin:.4rem 0 0;max-width:30rem;line-height:1.65}
.formules:not(#_){max-width:24rem}
.formule:not(#_){display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.formule p:not(#_){margin:0;max-width:none}
.formule .prix:not(#_){font-weight:500}
.prix em:not(#_){font-style:normal;font-weight:300;color:var(--muted);font-size:.85rem;margin-left:.35rem}
.tarifs-pied:not(#_){display:grid;grid-template-columns:minmax(0,1fr) 24rem;gap:1rem 3rem;align-items:center;margin-top:2rem}
.tarifs-pied .note:not(#_){margin:0}
.tarifs-pied .wp-block-buttons:not(#_){justify-content:flex-end}

/* --- Photos : galerie et portrait, coins arrondis, image cadrée dans sa case --- */
.gal:not(#_){display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ph:not(#_){position:relative;overflow:hidden;margin:0;aspect-ratio:4/3;background:var(--surface)}
.ph.vid:not(#_){grid-column:span 2;aspect-ratio:auto;min-height:100%}
.ph img:not(#_){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal .ph:not(#_),.membre .ph:not(#_){border-radius:var(--rayon)}

/* --- Témoignages --- */
.avis:not(#_){display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.avis blockquote:not(#_){margin:0;border:0;border-top:2px solid var(--sage);padding:1rem 0 0}
.avis p:not(#_){margin:0 0 .75rem}
.avis cite:not(#_){display:inline;font-style:normal;color:var(--muted);font-size:.95rem} /* en ligne comme dans la maquette : le bloc citation le passe en bloc */

/* --- Thérapeute --- */
.equipe:not(#_){display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.membre .ph:not(#_){aspect-ratio:1/1;margin-bottom:1rem}
.membre h3:not(#_){margin:0;font-weight:500;font-size:1.25rem}
.membre p:not(#_){margin:0}
.membre .petit:not(#_){color:var(--muted);font-size:.95rem;margin:.15rem 0 .5rem}
.equipe.solo:not(#_){grid-template-columns:1fr}
.equipe.solo .membre:not(#_){display:grid;grid-template-columns:20rem 1fr;gap:1.5rem 3rem;align-items:center}
.equipe.solo .ph:not(#_){margin-bottom:0}

/* --- Questions fréquentes --- */
.faq:not(#_){max-width:48rem}
.faq details:not(#_){border-top:1px solid var(--line);padding:1.25rem 0}
.faq details:first-child:not(#_){border-top:0;padding-top:0}
.faq summary:not(#_){cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;font-weight:500;font-size:1.25rem}
.faq summary:not(#_)::-webkit-details-marker{display:none}
.faq summary:not(#_)::after{content:"+";font-weight:300;color:var(--muted)}
.faq details[open] summary:not(#_)::after{content:"\2013"}
.faq p:not(#_){margin:.75rem 0 0;max-width:40rem}

/* --- Prise de rendez-vous et coordonnées --- */
.contact:not(#_){background:var(--surface);border-top:0}
.contact .wrap:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.coordonnees .etiq:not(#_){margin:1rem 0 0;color:var(--muted);font-size:.9rem}
.coordonnees .valeur:not(#_){margin:0;font-size:1.15rem}

/* --- Pied de page : association, assurance, mention --- */
footer:not(#_){padding:2rem 0 2.5rem;color:var(--muted);font-size:.9rem}
.affiliations:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)}
.affil:not(#_){display:flex;align-items:center;gap:1rem}
.affil p:not(#_){margin:0;color:var(--ink);font-size:1rem}
.affil .etiquette:not(#_){color:var(--muted);font-size:.9rem}
/* le logo fourni a un fond blanc opaque : il est posé sur une carte blanche arrondie */
.affil .logo:not(#_){flex:none;margin:0;padding:.5rem .75rem;background:#fff;border-radius:var(--rayon)}
.affil .logo img:not(#_){display:block;width:auto;height:3.5rem;max-width:none}
.copy:not(#_){margin:0}

/* --- Pages simples (blog, page introuvable) --- */
.page-simple:not(#_){padding-top:4.5rem;padding-bottom:4.5rem}

/* sous 960 px le menu complet ne tient plus sur une ligne : seuls le sélecteur de langue et le bouton restent */
@media (max-width:960px){
  .menu:not(#_){display:none}
  .langues:not(#_){margin-left:0}
  .entete-droite .wp-block-buttons:not(#_){margin-left:.75rem}
}
@media (max-width:782px){.admin-bar header:not(#_){top:46px}}
@media (max-width:760px){
  .hero:not(#_),.two:not(#_),.steps:not(#_),.contact .wrap:not(#_),.disc:not(#_),.disc.tarif:not(#_),.tarifs-pied:not(#_),.equipe:not(#_),.equipe.solo .membre:not(#_),.avis:not(#_),.affiliations:not(#_){grid-template-columns:1fr}
  .hero:not(#_){padding:2rem 0 3rem}
  .hero:not(#_)::after{max-width:9rem;justify-self:start;order:-1}
  .lettres:not(#_),.gal:not(#_){grid-template-columns:1fr 1fr}
  .ph.vid:not(#_){aspect-ratio:16/9}
  .membre .ph:not(#_){aspect-ratio:4/3}
}
/* téléphone : la devise reste visible sous le nom ; sélecteur de langue et bouton resserrés pour lui laisser la place */
@media (max-width:480px){
  .devise:not(#_){font-size:.7rem}
  .langues .actif:not(#_),.langues a:not(#_){padding:.3rem .5rem}
  .entete-droite .wp-block-buttons:not(#_){margin-left:.5rem}
  .entete-droite .wp-block-button__link:not(#_){padding:.5rem .8rem}
}
/* très petits écrans : la devise passe sur deux lignes plutôt que de déborder */
@media (max-width:359px){
  header .wrap:not(#_){padding-left:1rem;padding-right:1rem}
  .devise:not(#_){white-space:normal}
  .langues .actif:not(#_),.langues a:not(#_){padding:.3rem .4rem}
  .entete-droite .wp-block-buttons:not(#_){margin-left:.4rem}
  .entete-droite .wp-block-button__link:not(#_){padding:.5rem .65rem}
}
@media (prefers-color-scheme:dark){
  .hero:not(#_)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cstyle%3Ecircle%7Bfill:none;stroke:%238FB5A3;stroke-width:1.5;stroke-dasharray:140;stroke-dashoffset:140;animation:d 1.6s ease-out forwards%7D@keyframes d%7Bto%7Bstroke-dashoffset:0%7D%7D@media (prefers-reduced-motion:reduce)%7Bcircle%7Banimation:none;stroke-dashoffset:0%7D%7D%3C/style%3E%3Cline x1='60' y1='10' x2='60' y2='290' stroke='%232A474F' stroke-width='1'/%3E%3Ccircle cx='60' cy='24' r='14' style='animation-delay:0.0s'/%3E%3Ccircle cx='60' cy='56' r='15' style='animation-delay:0.12s'/%3E%3Ccircle cx='60' cy='90' r='16' style='animation-delay:0.24s'/%3E%3Ccircle cx='60' cy='126' r='17' style='animation-delay:0.36s'/%3E%3Ccircle cx='60' cy='164' r='18' style='animation-delay:0.48s'/%3E%3Ccircle cx='60' cy='204' r='19' style='animation-delay:0.6s'/%3E%3Ccircle cx='60' cy='246' r='20' style='animation-delay:0.72s'/%3E%3C/svg%3E")}
}