/* =========================================================
   Cabinet Kinesitherapie - feuille de style unique
   Palette creme / vert profond / or, d'apres la maquette.
   ========================================================= */

:root{
  --creme:#f8f4ee;
  --creme-2:#f1eae0;
  --blanc:#fdfbf7;
  --vert:#1e3733;
  --vert-fonce:#142723;
  --vert-clair:#2c4b45;
  --or:#c1913f;
  --or-clair:#d9ae66;
  --or-fonce:#a1701f;
  --encre:#16302b;
  --texte:#565552;
  --texte-faible:#8b8981;
  --sur-vert:#f4efe7;
  --sur-vert-doux:rgba(244,239,231,.72);
  --ligne:rgba(30,55,51,.13);
  --ligne-vert:rgba(244,239,231,.17);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1320px;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --entete:clamp(72px,8.5vw,120px);
  --vague:clamp(46px,7vw,110px);
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--creme);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0;color:var(--encre)}
p{margin:0}

::selection{background:var(--vert);color:var(--creme)}
:focus-visible{outline:2px solid var(--or-fonce);outline-offset:3px}

.contenu{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.contenu--large{max-width:1440px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- vocabulaire commun ---------- */

.surtitre{
  font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--or-fonce);font-weight:700;margin:0 0 1.1rem;
}
.surtitre--clair{color:var(--or-clair)}

.titre-section{font-size:clamp(1.8rem,3.3vw,2.9rem);margin:0 0 1.1rem;letter-spacing:-.005em}
.chapeau{color:var(--texte);font-size:1.02rem;max-width:60ch}

.filet{width:48px;height:2px;background:var(--or);margin:1.6rem 0 0}

section{position:relative}

.section{padding-block:clamp(3.5rem,8vw,7rem)}
.section--creme2{background:var(--creme-2)}
.section--verte{background:var(--vert);color:var(--sur-vert-doux)}
.section--verte h2,.section--verte h3,.section--verte h4{color:var(--sur-vert)}

.entete-section{margin-bottom:clamp(2.2rem,4.5vw,3.6rem);max-width:64ch}
.entete-section--centre{text-align:center;margin-inline:auto}
.entete-section--centre .filet{margin-inline:auto}

/* ---------- boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 2rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn--vert{background:var(--vert);color:var(--sur-vert);border-color:var(--vert)}
.btn--vert:hover{background:var(--vert-fonce);border-color:var(--vert-fonce);transform:translateY(-1px)}
.btn--or{background:var(--or);color:#20180a;border-color:var(--or)}
.btn--or:hover{background:var(--or-clair);border-color:var(--or-clair);transform:translateY(-1px)}
.btn--contour{background:transparent;color:var(--encre);border-color:rgba(30,55,51,.28)}
.btn--contour:hover{border-color:var(--vert);background:rgba(30,55,51,.05)}
.btn--clair{background:transparent;color:var(--sur-vert);border-color:var(--ligne-vert)}
.btn--clair:hover{border-color:var(--or-clair);color:var(--or-clair)}
.btn--large{width:100%}

/* lien souligne d'un trait dore */
.lien-filet{
  display:inline-block;font-size:.75rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre);padding-block:.2rem;
}
.lien-filet::after{
  content:"";display:block;width:46px;height:2px;background:var(--or);
  margin-top:.85rem;transition:width .3s;
}
.lien-filet:hover::after{width:78px}
.lien-filet--clair{color:var(--sur-vert)}

/* ---------- en-tete ---------- */

.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.entete.est-collee{
  background:rgba(248,244,238,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--ligne);
}
.entete__barre{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:var(--entete);
}

.marque{display:flex;align-items:center;gap:.95rem}
.marque__signe{width:clamp(38px,3.6vw,54px);height:auto;color:var(--or);flex-shrink:0}
.marque__mots{display:block;line-height:1.14}
.marque__nom{
  display:block;font-size:clamp(.82rem,1.2vw,1.16rem);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre);
}
.marque__baseline{
  display:block;font-size:clamp(.53rem,.62vw,.62rem);letter-spacing:.24em;
  text-transform:uppercase;color:var(--or-fonce);margin-top:.3rem;font-weight:500;
}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2vw,2.1rem)}
.nav a{
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  color:var(--encre);padding-block:.5rem;position:relative;transition:color .22s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.nav a:hover{color:var(--or-fonce)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--encre)}
.burger svg{width:26px;height:26px}

@media (max-width:1150px){
  .entete__cta{display:none}
}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:block}
  .entete{background:rgba(248,244,238,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}

/* menu mobile */
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--creme);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.menu-mobile[data-ouvert="true"]{transform:translateY(0)}
.menu-mobile__fermer{
  position:absolute;top:20px;right:var(--pad);
  background:none;border:0;color:var(--encre);cursor:pointer;padding:.5rem;
}
.menu-mobile__fermer svg{width:26px;height:26px}
/* nav a et non a : le bouton « Prendre rendez-vous » du menu est lui aussi un
   <a>. Vise par .menu-mobile a, il heritait de trois declarations faites pour
   les liens de navigation - display en ligne, corps de 26 px et couleur
   d'encre - qui l'emportaient sur .btn et .btn--vert par specificite : les
   sept liens s'ecoulaient les uns a la suite des autres sur cinq lignes, et le
   bouton, ecrit en vert sur vert, recouvrait les deux dernieres. */
.menu-mobile nav a{
  display:block;
  font-family:var(--serif);font-size:clamp(1.5rem,7vw,2rem);color:var(--encre);
  padding-block:.5rem;border-bottom:1px solid var(--ligne);
}
.menu-mobile nav a:last-of-type{border-bottom:0}
.menu-mobile .btn{margin-top:1.8rem;align-self:flex-start}

/* ---------- heros ---------- */

.heros{
  position:relative;overflow:hidden;background:var(--creme);
  display:flex;align-items:center;
  min-height:clamp(560px,80svh,860px);
  padding-top:calc(var(--entete) + clamp(1rem,3vw,2.5rem));
  padding-bottom:calc(var(--vague) + clamp(1.5rem,4vw,3.5rem));
}
.heros__media{position:absolute;inset:0 0 0 36%;z-index:0}
.heros__media img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.heros__sillage{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(34px,5vw,86px);display:block}
.heros__voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--creme) 0%,var(--creme) 30%,rgba(248,244,238,.94) 39%,rgba(248,244,238,.45) 52%,rgba(248,244,238,0) 66%),
    linear-gradient(0deg,var(--creme) 0%,rgba(248,244,238,0) 22%);
}
.heros__cercle{
  position:absolute;z-index:1;pointer-events:none;
  left:51%;top:2%;width:min(41vw,640px);aspect-ratio:1;
  border:1px solid rgba(193,145,63,.55);border-radius:50%;
}
.heros__contenu{position:relative;z-index:2;width:100%}
.heros__texte{max-width:min(34rem,46vw)}
.heros h1{
  font-size:clamp(2.1rem,3.6vw,3.45rem);line-height:1.12;
  margin:0 0 1.6rem;letter-spacing:-.01em;max-width:8em;text-wrap:balance;
}
.heros h1 .point{color:var(--or)}
.heros__accroche{color:var(--texte);font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.75;max-width:44ch;margin-bottom:2.3rem}
.heros__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 3rem}

/* ---------- bande des quatre atouts ---------- */

.atouts{
  position:relative;z-index:5;
  margin-top:calc(-1 * var(--vague) - clamp(1.5rem,3.5vw,3rem));
  /* la maquette pose une pastille centree d'environ 56 % de la largeur d'ecran,
     pas une bande pleine largeur : ce plafond reproduit la proportion. */
  max-width:880px;margin-inline:auto;
  background:var(--blanc);border-radius:clamp(28px,4vw,58px);
  box-shadow:0 24px 60px -34px rgba(20,39,35,.4);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(1.1rem,1.8vw,1.6rem) clamp(.6rem,1.5vw,1.4rem);
}
.atout{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem clamp(.7rem,1.4vw,1.4rem);
  border-right:1px solid var(--ligne);
}
.atout:last-child{border-right:0}
.atout svg{width:clamp(28px,2.4vw,36px);height:clamp(28px,2.4vw,36px);color:var(--or);flex-shrink:0}
.atout p{font-size:clamp(.8rem,.95vw,.93rem);line-height:1.4;color:#3d3c39}

/* ---------- vagues ---------- */

.vague{
  position:absolute;left:0;width:100%;height:var(--vague);
  top:calc(-1 * var(--vague) + 1px);display:block;z-index:1;
}

/* ---------- specialites (bloc vert de la maquette) ---------- */

.specialites{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,2.6fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  margin-top:clamp(3rem,6vw,5.5rem);
}
/* « Des soins adaptes / a chaque besoin » tient sur les deux lignes de la
   maquette : la colonne de gauche doit rester plus large que la ligne. */
.specialites .titre-section{font-size:clamp(1.7rem,2.7vw,2.4rem)}
.specialites__cartes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.carte-spe{
  padding:0 clamp(1rem,1.7vw,1.8rem);
  border-left:1px solid var(--ligne-vert);
  display:flex;flex-direction:column;
}
.carte-spe:first-child{border-left:0;padding-left:0}
.carte-spe__ico{width:34px;height:34px;color:var(--sur-vert);margin-bottom:1.7rem}
.carte-spe h3{
  font-family:var(--sans);font-size:clamp(.78rem,.95vw,.9rem);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.45;margin-bottom:1.1rem;
}
.carte-spe p{font-size:clamp(.82rem,.95vw,.92rem);line-height:1.65;color:var(--sur-vert-doux);flex:1}
.carte-spe__fleche{display:inline-flex;margin-top:1.6rem;color:var(--or-clair);transition:transform .25s}
.carte-spe__fleche svg{width:24px;height:24px}
.carte-spe:hover .carte-spe__fleche{transform:translateX(6px)}

/* ---------- reserves d'image ---------- */

.reserve{
  position:relative;width:100%;border-radius:var(--r);overflow:hidden;
  background:var(--creme-2);border:1px dashed rgba(30,55,51,.24);
  display:grid;place-items:center;text-align:center;
}
.reserve--clair{background:rgba(244,239,231,.06);border-color:rgba(244,239,231,.3)}
.reserve__mot{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texte-faible);padding:1.2rem;font-weight:500;
}
.reserve--clair .reserve__mot{color:var(--sur-vert-doux)}
.reserve svg{width:34px;height:34px;color:var(--or);margin:0 auto .8rem}

/* ---------- soins (cartes avec photo) ---------- */

.soins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2vw,2rem)}

.soin{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;
}
.soin:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(20,39,35,.5)}
.soin .reserve{border-radius:0;border-width:0 0 1px 0;aspect-ratio:4/3}
.soin img{aspect-ratio:4/3;object-fit:cover;width:100%}
.soin__corps{padding:clamp(1.3rem,2vw,1.7rem);display:flex;flex-direction:column;flex:1}
.soin h3{font-size:1.28rem;margin-bottom:.7rem}
.soin p{font-size:.93rem;line-height:1.66;flex:1}
.soin ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.soin li{display:flex;gap:.6rem;align-items:flex-start;font-size:.87rem;line-height:1.5}
.soin li svg{width:15px;height:15px;color:var(--or);flex-shrink:0;margin-top:.35rem}

/* ---------- cabinet (portrait + texte) ---------- */

.duo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.duo--inverse .duo__media{order:2}
.duo__media .reserve{aspect-ratio:4/5}
.duo__media img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;width:100%}

.engagements{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.3rem}
.engagements li{display:flex;gap:1rem;align-items:flex-start}
.engagements svg{width:22px;height:22px;color:var(--or);flex-shrink:0;margin-top:.28rem}
.engagements strong{display:block;color:var(--encre);font-weight:500;font-size:1.02rem;margin-bottom:.15rem;font-family:var(--serif)}
.engagements p{font-size:.93rem;line-height:1.6}
.section--verte .engagements strong{color:var(--sur-vert)}

/* ---------- deroule d'une seance ---------- */

.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden}
.etape{background:var(--blanc);padding:clamp(1.5rem,2.6vw,2.2rem);transition:background .3s}
.etape:hover{background:#fff}
.etape__num{
  font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--or);
  display:block;margin-bottom:1rem;opacity:.85;
}
.etape h3{font-size:1.22rem;margin-bottom:.6rem}
.etape p{font-size:.93rem;line-height:1.66}

/* ---------- equipe ---------- */

.equipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,2.5vw,2.2rem)}
.membre .reserve{aspect-ratio:1;margin-bottom:1.2rem}
.membre img{aspect-ratio:1;object-fit:cover;object-position:50% 18%;border-radius:var(--r);margin-bottom:1.2rem;width:100%}
.membre h3{font-size:1.3rem;margin-bottom:.25rem}
.membre__role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-fonce);font-weight:500}
.membre p{font-size:.92rem;line-height:1.65;margin-top:.8rem}

/* ---------- avis ---------- */

.avis{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.avis__media .reserve{aspect-ratio:1}
.avis__media img{aspect-ratio:1;object-fit:cover;border-radius:var(--r);width:100%}
.avis__cadre{
  border:1px solid var(--ligne-vert);border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.4rem);background:rgba(244,239,231,.045);
}
.avis__cadre svg{width:34px;height:34px;color:var(--or-clair);margin-bottom:1.2rem}
.avis__cadre p{font-size:1rem;line-height:1.75}
.avis__cadre p+p{margin-top:.9rem}

/* ---------- infos pratiques ---------- */

.infos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,2.5vw,2.2rem)}
.info{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,2rem);
}
.info svg{width:24px;height:24px;color:var(--or);margin-bottom:1rem}
.info h3{font-size:1.22rem;margin-bottom:.6rem}
.info p,.info li{font-size:.93rem;line-height:1.7}
.info ul{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.35rem}
.info a{color:var(--encre);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--or)}
.info a:hover{color:var(--or-fonce)}

.vignettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.vignettes .reserve{aspect-ratio:1}
.vignettes img{aspect-ratio:1;object-fit:cover;border-radius:var(--r);width:100%}

/* ---------- questions ---------- */

.questions{max-width:840px;margin-inline:auto}
.question{border-bottom:1px solid var(--ligne)}
.question summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:1.18rem;color:var(--encre);transition:color .22s;
}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--or-fonce)}
.question__signe{position:relative;width:15px;height:15px;flex-shrink:0}
.question__signe::before,.question__signe::after{content:"";position:absolute;background:var(--or);transition:transform .3s}
.question__signe::before{top:7px;left:0;width:15px;height:2px}
.question__signe::after{left:7px;top:0;width:2px;height:15px}
.question[open] .question__signe::after{transform:scaleY(0)}
.question__corps{padding:0 0 1.5rem;font-size:.96rem;max-width:72ch}
.question__corps p+p{margin-top:.85rem}

/* ---------- contact ---------- */

.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem)}

.voies{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.4rem}
.voies li{display:flex;gap:1.1rem;align-items:flex-start}
.voies svg{width:21px;height:21px;color:var(--or);flex-shrink:0;margin-top:.4rem}
.voies span{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible);margin-bottom:.15rem;font-weight:500}
.voies a,.voies p{font-size:1.04rem;color:var(--encre)}
.voies a:hover{color:var(--or-fonce)}

.form{display:grid;gap:1.2rem}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.champ{display:grid;gap:.45rem}
.champ label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible);font-weight:500}
.champ input,.champ select,.champ textarea{
  width:100%;background:var(--blanc);color:var(--encre);
  border:1px solid var(--ligne);border-radius:10px;
  padding:.9rem 1rem;font-family:var(--sans);font-size:.97rem;font-weight:400;
  transition:border-color .25s,box-shadow .25s;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(193,145,63,.16);
}
.champ select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#c1913f 50%),linear-gradient(135deg,#c1913f 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__mention{font-size:.8rem;color:var(--texte-faible);line-height:1.6}
.form__etat{font-size:.9rem;color:var(--or-fonce);min-height:1.4em;font-weight:500}

/* ---------- pied de page ---------- */

.pied{background:var(--vert);color:var(--sur-vert-doux);padding-block:clamp(2.8rem,5vw,4rem) 2rem}
.pied__haut{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--ligne-vert)}
.pied .marque__nom{color:var(--sur-vert)}
.pied .marque__baseline{color:var(--or-clair)}
.pied .marque__signe{color:var(--or-clair)}
.pied p{font-size:.92rem;max-width:44ch;line-height:1.7}
.pied__texte{margin-top:1.2rem}
.pied h4{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);margin:0 0 1.1rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pied ul a{font-size:.92rem;transition:color .22s}
.pied ul a:hover{color:var(--sur-vert)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;padding-top:1.8rem}
.pied__bas p,.pied__bas a{font-size:.8rem;color:rgba(244,239,231,.55)}
.pied__bas a:hover{color:var(--sur-vert)}

/* ---------- apparition au defilement ---------- */

.js .apparait{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1;transform:none;transition:none}
}

/* ---------- page annexe ---------- */

.page-texte{padding-block:calc(var(--entete) + clamp(2.5rem,6vw,4.5rem)) clamp(3rem,7vw,5rem)}
.page-texte h1{font-size:clamp(1.9rem,4.5vw,2.9rem);margin-bottom:2rem}
.page-texte h2{font-size:1.35rem;margin:2.6rem 0 .9rem;color:var(--encre)}
.page-texte p,.page-texte li{font-size:.97rem;line-height:1.75}
.page-texte p+p{margin-top:.8rem}
.page-texte ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:.6rem 0 0}
.page-texte a{color:var(--or-fonce);text-decoration:underline;text-underline-offset:3px}
.page-texte .bloc{max-width:78ch}

/* =========================================================
   REDUCTION (<= 1080 px) - la composition du grand ecran, en plus petit
   ---------------------------------------------------------
   Principe : l'ecran de reference fait 1280 px, donc 1 vw = 12,8 px. Chaque
   valeur ci-dessous est la mesure du grand ecran divisee par 12,8, exprimee
   en vw. La page garde EXACTEMENT sa composition - photo a droite et texte
   pose dessus, rangee de quatre reperes, quatre specialites en ligne, portrait
   a gauche et texte a droite, trois membres, trois infos, trois vignettes,
   texte a gauche et formulaire a droite, pied en trois colonnes - et ne fait
   que retrecir. Rien ne change de place ni d'ordre.
   Chaque clamp() porte un PLANCHER EN PIXELS : sans lui, a 375 px, 1vw
   tomberait a 3,7 px. Le plancher est de 11 px pour tout texte courant,
   12 a 13,5 px pour un titre, plus haut pour les nombres d'affichage.
   minmax(0,1fr) sur toutes les colonnes etroites : sans lui un mot insecable
   impose sa largeur et pousse la grille hors de l'ecran.
   Ce bloc est en FIN de feuille : plusieurs @media plus haut portent les
   memes selecteurs et, a specificite egale, c'est le dernier qui gagne.
   ========================================================= */
@media (max-width:1080px){

  :root{
    /* 7vw et 5vw sont les valeurs du grand ecran (89,6 px et 64 px a 1280) ;
       seul le plancher descend, pour que la vague et l'entete retrecissent
       avec le reste au lieu de rester a leur taille de bureau. */
    --vague:clamp(20px,7vw,110px);
  }

  .contenu{padding-inline:4vw}
  .section{padding-block:clamp(26px,8vw,112px)}

  /* ---------- vocabulaire commun ---------- */
  .surtitre{font-size:clamp(11px,.95vw,12.16px);letter-spacing:.1em;margin-bottom:clamp(6px,1.375vw,17.6px)}
  .titre-section{font-size:clamp(13.5px,3.3vw,46.4px);margin-bottom:clamp(6px,1.375vw,17.6px)}
  .chapeau{font-size:clamp(11px,1.275vw,16.32px);line-height:1.5}
  .filet{width:clamp(14px,3.75vw,48px);margin-top:clamp(8px,2vw,25.6px)}
  .entete-section{margin-bottom:clamp(14px,4.5vw,57.6px)}

  .btn{
    font-size:clamp(11px,.94vw,12px);letter-spacing:.06em;
    gap:clamp(4px,.875vw,11.2px);
    padding:clamp(7px,1.31vw,16.8px) clamp(9px,2.5vw,32px);
  }
  .btn svg{width:clamp(11px,1.33vw,17px);height:clamp(11px,1.33vw,17px)}
  .lien-filet{font-size:clamp(11px,.94vw,12px);letter-spacing:.06em}
  .lien-filet::after{width:clamp(20px,3.6vw,46px);margin-top:clamp(5px,1.06vw,13.6px)}
  .lien-filet:hover::after{width:clamp(32px,6.1vw,78px)}

  /* la ligne de marque : le sous-titre remonte a 11 px (il descendait a 8,9 px
     sur grand ecran) et rend son interlettrage, sinon il sort de sa colonne */
  .marque__baseline{font-size:11px;letter-spacing:.1em;margin-top:clamp(2px,.375vw,4.8px)}

  /* ---------- heros : la photo reste a droite, le texte pose dessus ----------
     inset 36 % et object-fit:cover, comme sur grand ecran. Le voile et le
     cercle dore sont conserves : ils font partie de la composition et c'est le
     voile qui rend le texte lisible sur la photo.
     min-height:0 - a 375 px, 80svh donnerait un heros de 650 px pour 375 px de
     large, soit deux fois plus haut que large la ou le grand ecran est deux
     fois plus large que haut. La hauteur suit donc le contenu. */
  .heros{
    display:flex;flex-direction:row;align-items:center;min-height:0;
    padding-top:calc(var(--entete) + clamp(8px,3vw,40px));
    padding-bottom:calc(var(--vague) + clamp(10px,4vw,56px));
  }
  .heros__contenu{order:0}
  .heros__media{order:0;position:absolute;inset:0 0 0 36%;margin-top:0}
  .heros__media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:52% 42%}
  .heros__voile{display:block}
  .heros__cercle{display:block}
  .heros__sillage{height:clamp(14px,5vw,86px)}
  /* Modele de la page peinture : le bloc de texte n'est pas borne en bloc,
     ce sont les lignes qui le sont, a 42,5 vw - la proportion exacte du
     max-width:34rem du grand ecran (544 / 1280). */
  .heros__texte{max-width:none}
  .heros .surtitre,.heros__actions{max-width:42.5vw}
  /* min(...) et non 42,5 vw seul : le grand ecran borne le titre a 8 em et
     l'accroche a 44 ch, PAS a la largeur du bloc de texte. Bornes au seul
     42,5 vw, le titre passait de quatre lignes (grand ecran et maquette) a
     deux de 1080 a 521 px et a trois de 520 a 414 px, et l'accroche de trois
     lignes a deux de 1080 a 820 px : la ligne de tete changeait de dessin sur
     toute la bande. Le min() rend au titre ses 8 em et a l'accroche ses 44 ch
     tant qu'ils tiennent dans la colonne, et laisse 42,5 vw prendre le relais
     en dessous de 377 px, ou 8 em (160 px) depasserait la colonne. */
  .heros h1{max-width:min(8em,42.5vw);font-size:clamp(20px,3.6vw,55.2px);margin-bottom:clamp(9px,2vw,25.6px)}
  .heros__accroche{max-width:min(44ch,42.5vw);font-size:clamp(11px,1.175vw,15.04px);line-height:1.5;margin-bottom:clamp(11px,2.88vw,36.8px)}
  /* gouttiere ramenee de 3,75vw a 3,3vw et remplissage du bouton de 1,6vw a
     1,3vw : a 768 px les deux actions reclamaient 328,9 px pour 326,4 px de
     colonne et passaient a la ligne pour 2,5 px. Rendus, elles reclament
     320,8 px et se remettent cote a cote des 768 px (marge 5,6 px), comme sur
     grand ecran. En dessous de 768 px elles restent l'une sous l'autre : au
     plancher de 11 px le bouton mesure 157,6 px et le lien 128,5 px, soit
     294,1 px minimum pour 159,4 px de colonne a 375 px - c'est le plancher,
     pas un choix de mise en page. */
  .heros__actions{gap:clamp(6px,1.75vw,22.4px) clamp(8px,3.3vw,48px)}
  .heros__actions .btn{letter-spacing:.02em;gap:clamp(3px,.55vw,7px);padding-inline:clamp(6px,1.3vw,32px)}
  .heros__actions .btn svg{width:clamp(10px,1.33vw,17px);height:clamp(10px,1.33vw,17px)}
  .heros__actions .lien-filet{letter-spacing:.02em}

  /* ---------- les quatre reperes : la rangee de quatre reste une rangee ----
     La pastille vaut deja toute la largeur du contenu en dessous de 957 px
     (max-width:880px la depasse), donc 86 px par colonne a 375 px.
     L'icone RESTE A GAUCHE du texte, comme sur grand ecran et sur la maquette,
     tant que la mesure le permet : mot le plus long professionnalisme = 92,5 px
     au plancher de 11 px, contre 130,2 px de texte disponible a 768 px, 99,6 a
     600 et 93,0 a 560. Le passage de l'icone au-dessus n'est donc justifie
     qu'en dessous de 600 px (voir le bloc plus bas), pas des 1080. */
  .atouts{
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-radius:clamp(14px,4vw,58px);
    padding:clamp(7px,1.25vw,16px) clamp(3px,1.1vw,14px);
    margin-top:calc(-1 * var(--vague) - clamp(10px,3.5vw,48px));
  }
  .atout{
    align-items:center;min-width:0;
    gap:clamp(5px,1.25vw,16px);
    padding:clamp(7px,1.1vw,14.4px) clamp(3px,1.1vw,14.4px);
    border-right:1px solid var(--ligne);border-bottom:0;
  }
  .atout:last-child{border-right:0;border-bottom:0}
  .atout svg{width:clamp(15px,2.4vw,36px);height:clamp(15px,2.4vw,36px)}
  .atout p{font-size:clamp(11px,1vw,12.8px);line-height:1.3;hyphens:auto;min-width:0}

  /* ---------- specialites : titre a gauche, quatre cartes a droite ---------- */
  .specialites{
    grid-template-columns:minmax(0,1.05fr) minmax(0,2.6fr);
    gap:clamp(10px,5vw,72px);margin-top:clamp(18px,6vw,88px);
  }
  .specialites .titre-section{font-size:clamp(13.5px,2.7vw,38.4px)}
  .specialites p[style]{margin-top:clamp(10px,3vw,38.4px)!important}
  .specialites__cartes{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .carte-spe{
    padding:0 clamp(4px,1.7vw,28.8px);border-top:0;
    border-left:1px solid var(--ligne-vert);
  }
  .carte-spe:nth-child(odd){border-left:1px solid var(--ligne-vert);padding-left:clamp(4px,1.7vw,28.8px)}
  .carte-spe:first-child{border-left:0;padding-left:0;padding-top:0}
  .carte-spe__ico{width:clamp(14px,2.66vw,34px);height:clamp(14px,2.66vw,34px);margin-bottom:clamp(8px,2.13vw,27.2px)}
  /* .975vw et 1.025vw, pas .95vw : sur grand ecran ces deux clamp() butent sur
     leur plancher en rem (12,48 px et 13,12 px a 1280), pas sur leur terme en
     vw. La conversion se fait sur la valeur calculee, sinon la reduction part
     d'un corps qui n'a jamais ete affiche. */
  .carte-spe h3{font-size:clamp(11px,.975vw,12.48px);letter-spacing:.06em;line-height:1.3;margin-bottom:clamp(6px,1.375vw,17.6px)}
  .carte-spe p{font-size:clamp(11px,1.025vw,13.12px);line-height:1.45}
  .carte-spe__fleche{margin-top:clamp(8px,2vw,25.6px)}
  .carte-spe__fleche svg{width:clamp(12px,1.88vw,24px);height:clamp(12px,1.88vw,24px)}

  /* ---------- prises en charge : quatre cartes a photo ---------- */
  .soins{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,2vw,25.6px)}
  .soin__corps{padding:clamp(8px,2vw,25.6px)}
  .soin h3{font-size:clamp(12px,1.6vw,20.5px);margin-bottom:clamp(4px,.875vw,11.2px);line-height:1.2}
  .soin p{font-size:clamp(11px,1.16vw,14.9px);line-height:1.5}
  .soin ul{margin-top:clamp(8px,1.375vw,17.6px);gap:clamp(4px,.625vw,8px)}
  .soin li{font-size:clamp(11px,1.09vw,13.94px);line-height:1.35;gap:clamp(4px,.75vw,9.6px)}
  .soin li svg{width:clamp(9px,1.17vw,15px);height:clamp(9px,1.17vw,15px);margin-top:clamp(2px,.44vw,5.6px)}

  /* ---------- le cabinet : portrait a gauche, texte a droite ----------
     align-items reste a center, comme sur grand ecran, tant que le portrait
     est le plus haut des deux : 540 px de photo pour 424 px de texte a 1080,
     384 pour 373 a 768. Le texte ne devient plus haut que le portrait qu'en
     dessous de ~740 px (350/362 a 700, 188/524 a 375) : c'est la, et
     seulement la, que le centrage ferait flotter la photo au milieu d'un vide.
     Le passage a start est donc pose a 760 px, plus bas. */
  .duo{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(10px,5vw,72px)}
  .engagements{margin-top:clamp(12px,2.75vw,35.2px);gap:clamp(7px,1.625vw,20.8px)}
  .engagements li{gap:clamp(5px,1.25vw,16px)}
  .engagements svg{width:clamp(11px,1.72vw,22px);height:clamp(11px,1.72vw,22px);margin-top:clamp(2px,.35vw,4.5px)}
  .engagements strong{font-size:clamp(12px,1.275vw,16.32px);line-height:1.25}
  .engagements p{font-size:clamp(11px,1.16vw,14.9px);line-height:1.45}

  /* ---------- deroule : quatre etapes en ligne ----------
     remplissage ramene de 2,6vw a 1,7vw : a 2,6vw il reste 66 px de texte a
     375 px, ou le mot le plus long de la section, Interrogatoire, en mesure
     70,9 au plancher de 11 px. A 1,7vw il en reste 72,3, et rien n'est coupe. */
  .etapes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .etape{padding:clamp(6px,1.7vw,35.2px)}
  .etape__num{font-size:clamp(15px,2.88vw,36.8px);margin-bottom:clamp(5px,1.25vw,16px)}
  .etape h3{font-size:clamp(12px,1.53vw,19.5px);margin-bottom:clamp(4px,.75vw,9.6px);line-height:1.2}
  .etape p{font-size:clamp(11px,1.16vw,14.9px);line-height:1.45}

  /* ---------- equipe : trois membres en ligne ----------
     MASSEUR-KINESITHERAPEUTE rend son interlettrage de .16em : a 11 px il
     mesurait 197,9 px pour 108,7 px de colonne. A .02em, la coupure tombe sur
     le trait d'union et KINESITHERAPEUTE mesure 101,7 px. */
  .equipe{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,2.5vw,35.2px)}
  .membre .reserve{margin-bottom:clamp(6px,1.5vw,19.2px)}
  .membre h3{font-size:clamp(12px,1.63vw,20.8px);line-height:1.2;margin-bottom:clamp(2px,.25vw,3.2px)}
  .membre__role{font-size:clamp(11px,.9vw,11.52px);letter-spacing:.02em;line-height:1.3}
  .membre p{font-size:clamp(11px,1.15vw,14.72px);line-height:1.45;margin-top:clamp(5px,1vw,12.8px)}

  /* ---------- avis : photo carree a gauche, cadre a droite ----------
     meme mesure que « le cabinet » : la photo reste la plus haute des deux
     jusque vers 690 px (376/326 a 1080, 267/251 a 768, 244/239 a 700, puis
     223/262 a 640). Le centrage du grand ecran est donc tenu jusqu'a 760 px. */
  .avis{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(10px,5vw,64px)}
  .avis__cadre{padding:clamp(9px,3vw,38.4px)}
  .avis__cadre svg{width:clamp(14px,2.66vw,34px);height:clamp(14px,2.66vw,34px);margin-bottom:clamp(6px,1.5vw,19.2px)}
  .avis__cadre p{font-size:clamp(11px,1.25vw,16px);line-height:1.55}
  .avis__cadre p+p{margin-top:clamp(5px,1.125vw,14.4px)}

  /* ---------- infos pratiques : trois fiches, puis trois vignettes ----------
     gouttiere ramenee de 2,5vw a 2vw et remplissage de 2,4vw a 1,6vw : le mot
     conventionnement mesure 96,1 px au plancher de 11 px, et la colonne n'en
     offrait que 90,7. Elle en offre 100 : aucune cesure n'est necessaire. */
  .infos{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2vw,35.2px)}
  .info{padding:clamp(5px,1.6vw,25.6px)}
  .info svg{width:clamp(13px,1.88vw,24px);height:clamp(13px,1.88vw,24px);margin-bottom:clamp(5px,1.25vw,16px)}
  .info h3{font-size:clamp(12px,1.53vw,19.5px);margin-bottom:clamp(4px,.75vw,9.6px);line-height:1.2}
  .info p,.info li{font-size:clamp(11px,1.16vw,14.9px);line-height:1.5}
  .info p[style]{margin-top:clamp(4px,.75vw,9.6px)!important}
  .vignettes{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2vw,25.6px);margin-top:clamp(9px,3vw,38.4px)}

  /* reserves d'image : le libelle descendait a 10,88 px, il remonte au plancher */
  .reserve__mot{font-size:11px;letter-spacing:.06em;padding:clamp(4px,1.5vw,19.2px);line-height:1.35}

  /* ---------- questions : la colonne garde sa largeur relative (840/1280) ---------- */
  .questions{max-width:65.6vw}
  .question summary{font-size:clamp(12px,1.475vw,18.88px);padding-block:clamp(7px,1.75vw,22.4px);gap:clamp(6px,1.875vw,24px);line-height:1.25}
  .question__signe{width:clamp(9px,1.17vw,15px);height:clamp(9px,1.17vw,15px)}
  .question__signe::before{top:calc(50% - 1px);left:0;width:100%;height:2px}
  .question__signe::after{left:calc(50% - 1px);top:0;width:2px;height:100%}
  .question__corps{font-size:clamp(11px,1.2vw,15.36px);line-height:1.5;padding-bottom:clamp(8px,1.875vw,24px)}
  .question__corps p+p{margin-top:clamp(5px,1.06vw,13.6px)}

  /* ---------- contact : texte a gauche, formulaire a droite ---------- */
  .contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(10px,6vw,80px)}
  .voies{margin-top:clamp(12px,2.75vw,35.2px);gap:clamp(7px,1.75vw,22.4px)}
  .voies li{gap:clamp(5px,1.375vw,17.6px)}
  .voies svg{width:clamp(11px,1.64vw,21px);height:clamp(11px,1.64vw,21px);margin-top:clamp(2px,.5vw,6.4px)}
  .voies span{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.06em}
  /* contact@example.com : 28 signes, 118,5 px a 11 px pour 121 px de colonne */
  .voies a,.voies p{font-size:clamp(11px,1.3vw,16.64px);overflow-wrap:anywhere;line-height:1.35}
  .form{gap:clamp(7px,1.5vw,19.2px)}
  .form__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(6px,1.5vw,19.2px)}
  /* La fleche du menu deroulant est peinte a 6 px du bord droit et mesure
     7 px : avec le remplissage de 6 px du champ, elle etait posee SUR la fin
     du texte (« Premiere consu[fleche] » a 375 px). Le remplissage droit du
     seul <select> est donc calcule sur la position de la fleche, avec 11 px
     de garde. */
  .champ select{padding-right:calc(clamp(6px,1.09vw,14px) + 11px)}
  .champ{gap:clamp(3px,.56vw,7.2px)}
  .champ label{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.06em}
  .champ input,.champ select,.champ textarea{
    padding:clamp(5px,1.125vw,14.4px) clamp(6px,1.25vw,16px);
    font-size:clamp(11px,1.21vw,15.52px);border-radius:clamp(5px,.78vw,10px);
  }
  /* plancher remonte de 48 a 56 px : le texte indicatif de la zone de message
     demande 42 px de hauteur au plancher de 11 px, et la boite n'en offrait
     que 36 a 375 px et 38 a 320 px - la derniere ligne, « prescription. »,
     etait coupee par la bordure. A 56 px il reste 44 px utiles. */
  .champ textarea{min-height:clamp(56px,10.16vw,130px)}
  .champ select{
    background-position:calc(100% - clamp(8px,1.48vw,19px)) 50%,calc(100% - clamp(6px,1.09vw,14px)) 50%;
  }
  .form__mention{font-size:clamp(11px,1vw,12.8px);line-height:1.45}
  .form__etat{font-size:clamp(11px,1.125vw,14.4px)}

  /* ---------- pied de page : trois colonnes ---------- */
  .pied{padding-block:clamp(16px,5vw,64px) clamp(10px,2.5vw,32px)}
  .pied__haut{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(8px,3.125vw,40px);padding-bottom:clamp(12px,3.125vw,40px);
  }
  .pied .marque{gap:clamp(4px,.74vw,9.5px)}
  .pied .marque__signe{width:clamp(22px,2.8vw,42px)}
  .pied .marque__nom{font-size:clamp(11px,1vw,12.8px);letter-spacing:.05em}
  .pied .marque__baseline{letter-spacing:.02em}
  .pied p{font-size:clamp(11px,1.15vw,14.72px);line-height:1.45}
  .pied__texte{margin-top:clamp(6px,1.5vw,19.2px)}
  .pied h4{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.06em;margin-bottom:clamp(6px,1.375vw,17.6px)}
  .pied ul{gap:clamp(4px,.875vw,11.2px)}
  /* overflow-wrap:anywhere - contact@example.com mesure 118,5 px a 11 px pour
     91,9 px de colonne : sans coupure il sortirait du pied de page */
  .pied ul a{font-size:clamp(11px,1.15vw,14.72px);line-height:1.3;display:inline-block;overflow-wrap:anywhere}
  .pied__bas{padding-top:clamp(8px,1.75vw,22.4px);gap:clamp(5px,.875vw,11.2px) clamp(8px,2.5vw,32px)}
  /* base de 48 % : les deux mentions restent sur la MEME ligne, comme sur
     grand ecran, au lieu de se mettre l'une sous l'autre */
  /* le <a> de la ligne du bas n'etait pas mis a l'echelle : sur la page des
     mentions legales, « Accueil » restait a 12,8 px au milieu d'un paragraphe
     a 11 px, et se coupait en plein mot a 320 px. */
  .pied__bas p,.pied__bas a{font-size:clamp(11px,1vw,12.8px);line-height:1.35}
  .pied__bas p{flex:0 1 48%}
  .pied__bas p:last-child{text-align:right}

  /* ---------- page annexe (mentions legales) ---------- */
  .page-texte{padding-block:calc(var(--entete) + clamp(16px,4.5vw,57.6px)) clamp(20px,5.5vw,70.4px)}
  .page-texte h1{font-size:clamp(16px,4.5vw,57.6px);margin-bottom:clamp(10px,2.5vw,32px)}
  .page-texte h2{font-size:clamp(13px,1.69vw,21.6px);margin:clamp(14px,3.25vw,41.6px) 0 clamp(5px,1.125vw,14.4px)}
  .page-texte p,.page-texte li{font-size:clamp(11px,1.21vw,15.52px);line-height:1.55}
  .page-texte p+p{margin-top:clamp(5px,1vw,12.8px)}
  .page-texte ul{gap:clamp(4px,.625vw,8px);padding-left:clamp(10px,1.5vw,19.2px)}
}

/* ---------------------------------------------------------
   Les planchers de reduction. Ils ne se declenchent que la ou la mesure montre
   que la colonne ne peut plus contenir son contenu ; jamais un passage direct
   a une colonne unique, et jamais au-dessus de la largeur ou la mesure le
   justifie.
   --------------------------------------------------------- */

/* Le heros sur telephone et tablette : la photo ENTIERE, pas un cadrage.
   Constat mesure avant correction. Le grand ecran pose la photo dans un cadre
   de 64 % de large recadre par object-fit:cover : a 1440 px ce cadre montre
   66 % de la largeur du fichier paysage, toute sa hauteur - la table entiere,
   les pieds de la patiente, le claustra de bois, la plante. En dessous de
   820 px le <picture> servait en plus un fichier CARRE, deja resserre sur les
   deux personnes, et le meme cover le reduisait encore : a 390 px le cadre ne
   faisait plus que 249,6 px de large pour 435,8 px de haut, soit 57 % de la
   largeur d'un carre deja serre. Resultat : un gros plan sur un genou et un
   bassin, sans table, sans pieds, sans claustra, sans plante.
   Recette de la page peinture, appliquee ici a l'identique : la photo est
   servie ENTIERE - height:auto, ratio naturel, aucun rognage -, photo et texte
   occupent la MEME cellule de grille (grid-area:1/1, align-self:start) donc le
   texte reste pose dessus, il garde la largeur de zone libre deja calibree
   plus haut (42,5 vw, planchers de 11 px), et il a le droit de deborder sous
   la photo : il continue alors sur le fond de page, qui est de la meme creme
   que le voile. Le seuil est 820 px parce que c'est celui que le <picture>
   employait deja pour basculer de composition. */
@media (max-width:820px){

  .heros{
    display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
  }
  /* la photo sort du flux absolu : elle occupe toute la largeur de l'ecran et
     sa hauteur est celle de son ratio (1672/941), pas celle du heros */
  .heros__media{
    grid-area:1/1;align-self:start;
    position:relative;inset:auto;width:100%;margin:0;
  }
  .heros__media img{
    width:100%;height:auto;aspect-ratio:auto;
    object-fit:fill;object-position:center;
  }
  /* meme cellule que la photo, cale en haut : le texte se pose sur la bande
     libre de gauche, exactement comme les 36 % de creme du grand ecran */
  .heros__contenu{grid-area:1/1;align-self:start}

  /* Le voile garde le degrade horizontal du grand ecran - creme pleine jusqu'a
     30 %, puis fondu jusqu'a 66 % - qui est ce qui rend le texte lisible sur
     la photo. Sur la moitie basse du heros il ne recouvre plus de photo mais
     du fond de page, de la meme couleur : le raccord est invisible. */

  /* Le cercle dore etait cale en pourcentage sur la hauteur du heros ; celle-ci
     est desormais donnee par le texte, pas par la photo. Il est donc recale sur
     le haut de la bande de photo - meme expression que le padding-top du heros
     - pour rester dessine SUR la photo comme sur grand ecran. */
  .heros__cercle{top:calc(var(--entete) + clamp(8px,3vw,40px))}
}

/* Alignement vertical de « Le cabinet » et de « Avis ». Sur grand ecran la
   photo est plus haute que la colonne de texte et le texte est centre en face
   d'elle. Cela reste vrai jusque vers 740 px (le cabinet : 384 px de photo
   pour 373 de texte a 768) et 690 px (avis : 244 pour 239 a 700). En dessous
   la colonne de texte devient nettement la plus haute - 188/524 a 375 px -
   et le centrage ferait flotter la photo au milieu d'un vide. */
@media (max-width:760px){
  .duo,.avis{align-items:start}
}

/* Les quatre reperes : l'icone passe au-dessus du texte. Mot le plus long,
   professionnalisme, 92,5 px au plancher de 11 px. Avec l'icone a gauche la
   colonne offre 130,2 px de texte a 768 px et 99,6 a 600 : le mot passe. A
   560 px elle n'en offre plus que 93,0 (marge 0,5 px) et a 375 px 55,9, ou
   aucun des quatre libelles ne tient. Le repli est donc pose a 600 px, avec
   7 px de marge mesuree ; au-dessus, la disposition du grand ecran est tenue.
   Passee en colonne, la ligne de texte dispose de 75,9 px a 375 px : seul
   professionnalisme (92,5) deborde encore, et hyphens:auto le coupe plutot
   que de casser la rangee de quatre en deux. */
@media (max-width:600px){
  .atout{flex-direction:column;align-items:flex-start;gap:clamp(5px,.9vw,11.5px)}
}

/* Cartes de specialites : le mot le plus long de la section,
   dysfonctionnements., mesure 107,4 px au plancher de 11 px. Les quatre
   colonnes ne lui offrent 108,8 px qu'a partir de 900 px de large ; a 768 px
   elles tombent a 92,9 px et a 375 px a 55 px, ou chaque mot devrait etre
   coupe. En deux colonnes la carte en offre 109,8 a 375 px : le mot passe
   entier, et la rangee n'est jamais reduite a une colonne unique. */
@media (max-width:900px){
  .specialites__cartes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(12px,4.5vw,32px)}
  .carte-spe:nth-child(odd){border-left:0;padding-left:0}
}

/* Cartes de prises en charge : elles portent une photo, un titre, un
   paragraphe et une liste. Mesure faite a quatre colonnes forcees, largeur par
   largeur : la carte offre 89 px de texte a 521 px, 82 a 480 et 79 a 465, et
   c'est sous 505 px que le contenu commence a sortir - le libelle de la
   reserve d'image deborde de sa carte (105 px pour 94 a 441 px) et les puces
   de la liste sortent de leur <ul> (6,7 px a 441 px). Le repli a deux colonnes
   est donc pose a 520 px, ou la carte retrouve 153 px de texte ; la rangee
   n'est jamais reduite a une colonne unique. */
@media (max-width:520px){
  .soins{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Formulaire : le menu deroulant du motif. Sa valeur la plus large affichee au
   repos, « Premiere consultation », mesure 111,6 px au plancher de 11 px ;
   en deux colonnes le champ n'en offrait que 75,7 px a 375 px et 109,7 a
   520 px, si bien que la valeur choisie etait illisible (« Premiere consu »).
   Police au plancher, remplissage au minimum et fleche degagee, la valeur ne
   passe qu'a partir de 621 px (121,9 px de texte pour 111,6). En dessous, la
   SEULE ligne courriel + motif passe a une colonne : le champ y mesure alors
   la largeur du formulaire (185,4 px a 375 px), la valeur passe entiere, et la
   ligne nom + telephone reste par deux comme sur grand ecran. */
@media (max-width:620px){
  .form__duo:nth-of-type(2){grid-template-columns:minmax(0,1fr)}
}

/* En dessous de 375 px seulement. A 320 px les colonnes perdent encore un
   sixieme de leur largeur et douze mots cessent d'y tenir : dysfonctionnements.
   (107,4 px pour 94), conventionnement (96,1 pour 82), Interrogatoire,
   (70,9 pour 60), KINESITHERAPEUTE (103 pour 93)... La cesure ne se declenche
   que la : a 375 px et au-dessus, tous ces mots passent entiers et ces regles
   sont sans effet. */
@media (max-width:374px){
  .carte-spe p,.etape p,.etape h3,.info p,.info li,.membre__role,.soin p,.soin li,
  .engagements p,.avis__cadre p,.voies a,.voies p,.pied p{hyphens:auto}
}

@media print{
  .entete,.menu-mobile,.heros__media,.vignettes{display:none}
  body{background:#fff;color:#000}
}

/* Photos livrees le 08/09/2026 : la case reservee garde sa geometrie, l'image la remplit. */
.photo-remplie{border:0!important;background:none!important;padding:0!important;overflow:hidden}
.photo-remplie .photo-modele{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}