/* Lot 52 — v51 « première impression » (suggestions 1, 2, 3, 5, 13), repris de la maquette validée (atelier A-atelier/apres/css/l52.css 3334338c9f13af5d).
   Fichier à part : styles.css n'est pas touché. Changements v51 : hauteur auto des images (attributs width/height posés), retouche de couleur
   intégrée aux fichiers WebP (le filtre CSS de la maquette est retiré), R7 de V2 : au téléphone le dessin s'ouvre sous le bouton. */
:root{--l52-creme:#F7F1EA;--l52-creme-2:#EFE4D8}

/* 13 + 1 — accueil : premier écran clair et chaud, le Dr Gatri souriante */
.l52-hero{background:linear-gradient(180deg,var(--l52-creme) 0%,#FBF7F2 100%);color:var(--noir);padding:56px var(--pad) 60px;border-bottom:1px solid var(--l52-creme-2)}
.l52-hero .l52-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center}
.l52-hero .l52-txt{text-align:left}
.l52-hero .rule{width:90px;height:1px;background:var(--rose);margin:0 0 28px}
.l52-hero .logo-hero{width:min(300px,70vw);margin:0 0 26px;display:block}
.l52-hero h1.sub{font-size:13px;letter-spacing:.32em;line-height:1.9;text-transform:uppercase;color:var(--anthracite);margin:0 0 10px;font-weight:400;font-family:inherit}
.l52-hero .addr{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gris);margin-bottom:36px}
.l52-hero .addr .dot{color:var(--rose)}
.l52-hero .actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:14px;max-width:100%}
.l52-hero .actions .btn{text-align:center}
.l52-hero .actions .btn-inv{color:var(--noir);border-color:var(--noir)}
.l52-hero .actions .btn-inv:first-child{background:var(--noir);color:#fff}
.l52-dr{margin:0;background:#fff;border-radius:6px;box-shadow:0 18px 40px -22px rgba(80,50,30,.35);overflow:hidden}
.l52-dr img{display:block;width:100%;height:auto;aspect-ratio:4/4.3;object-fit:cover;object-position:50% 18%}
.l52-dr figcaption{padding:16px 20px 18px;text-align:left}
.l52-dr .l52-nom{font-family:var(--serif);font-size:21px;line-height:1.25;color:var(--noir);margin:0}
.l52-dr .l52-qual{font-size:13px;color:var(--anthracite);margin:4px 0 0}
@media(max-width:820px){
  .l52-hero{padding:28px var(--pad) 40px}
  .l52-hero .l52-in{grid-template-columns:1fr;gap:26px}
  .l52-hero .l52-dr{order:-1;display:grid;grid-template-columns:132px 1fr;align-items:center}
  .l52-dr img{aspect-ratio:auto;height:160px}
  .l52-hero .l52-txt{text-align:center}
  .l52-hero .rule{margin:0 auto 22px}
  .l52-hero .logo-hero{margin:0 auto 20px;width:min(240px,64vw)}
  .l52-hero .actions{display:grid;grid-auto-flow:row;grid-auto-columns:auto}
  .l52-hero .actions .btn{width:100%;max-width:300px;margin:0 auto}
}

/* 2 + 3 — photo d'ouverture en tête de page de soin, avant le premier texte */
.l52-ouverture{max-width:var(--max);margin:28px auto 0;padding:0 var(--pad)}
.l52-ouverture img{display:block;width:100%;height:340px;object-fit:cover;border-radius:6px}
.l52-ouverture + .page-head{padding-top:40px}
@media(max-width:820px){.l52-ouverture{margin-top:16px}.l52-ouverture img{height:230px}.l52-ouverture + .page-head{padding-top:28px}}

/* 5 — un seul schéma visible ; les autres derrière « Voir le schéma », ouverts en place */
details.l52-schema>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:10px 18px;border:1px solid var(--rose);border-radius:999px;color:var(--noir);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:#fff;font-weight:500}
details.l52-schema>summary::-webkit-details-marker{display:none}
details.l52-schema>summary::before{content:"";width:16px;height:12px;border:1.5px solid var(--rose);border-radius:2px;box-sizing:border-box}
details.l52-schema>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--noir);border-bottom:1.5px solid var(--noir);transform:rotate(45deg) translateY(-2px)}
details.l52-schema[open]>summary{margin-bottom:14px}
details.l52-schema[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
/* fermé : le texte reprend toute la largeur, le bouton se place sous le texte ; ouvert : la mise en page d'origine revient */
.l44-duo:has(>.l44-fig>details.l52-schema:not([open])),.chir:has(>.l44-fig>details.l52-schema:not([open])){display:flex!important;flex-direction:column;gap:14px}
.l44-duo:has(>.l44-fig>details.l52-schema:not([open]))>.l44-fig,.chir:has(>.l44-fig>details.l52-schema:not([open]))>.l44-fig{order:1!important;position:static!important;width:auto!important}

/* Reprise A3 — scènes avec d'autres personnes, dans la page, au passage qui en parle */
.l52-scene{margin:6px 0 28px}
.l52-scene img{display:block;width:100%;height:auto;max-width:760px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.corps>.l52-scene{margin-top:4px}
@media(max-width:820px){.l52-scene img{aspect-ratio:4/3}}

/* Reprise A4 — R5 : le bouton « Voir le schéma » garde son dessin dans les rubriques repliables (.soin) */
.soin details.l52-schema>summary{font-family:var(--sans);font-size:12px;line-height:1.2;padding:10px 18px;position:static;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.soin details.l52-schema>summary::after,.soin[open] details.l52-schema>summary::after{content:"";position:static;right:auto;top:auto;font-size:0;color:inherit;width:6px;height:6px;border-right:1.5px solid var(--noir);border-bottom:1.5px solid var(--noir);transform:rotate(45deg) translateY(-2px);transition:none}
.soin[open] details.l52-schema[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
/* Reprise A4 — R3 : la retouche légère des scènes (sepia .14, saturate 1.08, brightness 1.03) est intégrée aux fichiers WebP (v51) ; plus de filtre ici. */
/* v51 — R7 de V2 : au téléphone, le bloc du dessin replié reste APRÈS le texte, ouvert ou fermé : le dessin s'ouvre sous le bouton, jamais au-dessus du texte lu. */
@media(max-width:820px){
  .l44-duo:has(>.l44-fig>details.l52-schema),.chir:has(>.l44-fig>details.l52-schema){display:flex!important;flex-direction:column;gap:14px}
  .l44-duo:has(>.l44-fig>details.l52-schema)>.l44-fig,.chir:has(>.l44-fig>details.l52-schema)>.l44-fig{order:1!important;position:static!important;width:auto!important}
}