/* ═══════════════════════════════════════════════════════════════════
   URGENCE OSTÉO — urgence-osteo.fr
   Règle sémantique du site : le ROUGE est la douleur (il ne vit que
   dans les photos et le bloc « allez aux urgences »). Le VERT est le
   soulagement, et c'est la marque. Les deux ne se mélangent jamais.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --uo-nuit:    #12362A;
  --uo-vert:    #1E5E45;
  --uo-vif:     #3FBF86;
  --uo-sauge:   #84C0A8;
  --uo-voile:   #E4F1EA;
  --uo-papier:  #F7FAF8;
  --uo-blanc:   #FFFFFF;
  --uo-encre:   #10231C;
  --uo-gris:    #5A6B64;
  --uo-douleur: #D93A29;

  --uo-p: clamp(20px, 5vw, 40px);
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--uo-papier); color:var(--uo-encre);
  font-family:'Switzer',system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Cabinet Grotesk',system-ui,sans-serif; font-weight:800; line-height:1.04; letter-spacing:-.03em; margin:0; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.uo-mono{ font-family:'Sometype Mono',ui-monospace,monospace; font-size:.76rem; letter-spacing:.03em; }
.uo-wrap{ max-width:1240px; margin-inline:auto; padding-inline:var(--uo-p); }
.uo-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:focus-visible{ outline:3px solid var(--uo-vif); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ── en-tête ─────────────────────────────────────────────── */
.uo-bar{ position:sticky; top:0; z-index:60; background:rgba(247,250,248,.9); backdrop-filter:blur(14px); border-bottom:1px solid #DCE8E2; }
.uo-bar__in{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:72px; }
.uo-logo{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.uo-logo img{ width:34px; height:auto; }
.uo-logo b{ font-family:'Cabinet Grotesk'; font-weight:800; font-size:1.12rem; letter-spacing:-.035em; line-height:1; display:block; }
.uo-logo span{ font-size:.68rem; color:var(--uo-gris); letter-spacing:.06em; text-transform:uppercase; }
.uo-tel{
  display:inline-flex; align-items:center; gap:9px; background:var(--uo-vert); color:#fff;
  text-decoration:none; padding:12px 20px; border-radius:999px;
  font-family:'Cabinet Grotesk'; font-weight:700; font-size:1.04rem; transition:background .18s;
}
.uo-tel:hover{ background:var(--uo-nuit); }

/* ── HÉROS : panneau vert, patiente détourée, douleur rouge ── */
.uo-hero{ background:var(--uo-nuit); color:#fff; position:relative; overflow:hidden; }
.uo-hero::before{  /* halo vert sous la patiente */
  content:''; position:absolute; right:-6%; top:-10%; width:56%; height:120%;
  background:radial-gradient(ellipse at 50% 45%, rgba(63,191,134,.22), transparent 62%);
  pointer-events:none;
}
.uo-hero__in{ display:grid; grid-template-columns:1fr; gap:0; align-items:end; position:relative; z-index:1; }
@media(min-width:940px){ .uo-hero__in{ min-height:min(700px, 82vh); } }
@media(min-width:940px){ .uo-hero__in{ grid-template-columns:1.05fr .95fr; } }
.uo-hero__t{ padding:clamp(44px,6vw,86px) 0 clamp(44px,6vw,86px); }
.uo-hero__eyebrow{ color:var(--uo-vif); font-weight:500; margin-bottom:20px; display:flex; align-items:center; gap:9px; }
.uo-pt{ width:8px; height:8px; border-radius:50%; background:var(--uo-vif); position:relative; flex:none; }
.uo-pt::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--uo-vif); opacity:.5; animation:onde 2.6s ease-out infinite; }
@keyframes onde{ 0%{transform:scale(.55);opacity:.6} 100%{transform:scale(1.4);opacity:0} }
.uo-hero h1{ font-size:clamp(2.9rem,7.4vw,4.5rem); }
.uo-hero h1 em{ font-style:normal; color:var(--uo-vif); }
.uo-hero__sub{ margin-top:22px; font-size:clamp(1.04rem,2.2vw,1.24rem); color:#CBDDD5; max-width:36ch; }
.uo-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.uo-btn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:16px 26px; border-radius:999px;
      font-family:'Cabinet Grotesk'; font-weight:700; font-size:1.06rem; transition:transform .16s, background .18s, border-color .18s; }
.uo-btn--vif{ background:var(--uo-vif); color:var(--uo-nuit); }
.uo-btn--vif:hover{ background:#fff; }
.uo-btn--nu{ border:1.5px solid rgba(255,255,255,.28); color:#fff; }
.uo-btn--nu:hover{ border-color:#fff; }
.uo-hero__h{ display:flex; gap:22px; margin-top:30px; flex-wrap:wrap; color:#9DBBAF; }
.uo-hero__h b{ color:#fff; }

.uo-hero__img{ position:relative; align-self:end; justify-self:center; }
.uo-hero__tag{
  position:absolute; left:-8%; bottom:16%; z-index:2; background:#fff; color:var(--uo-encre);
  border-radius:12px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.22);
  display:flex; align-items:center; gap:9px;
}
.uo-hero__tag i{ width:9px; height:9px; border-radius:50%; background:var(--uo-douleur); flex:none; }
.uo-hero__tag b{ font-family:'Cabinet Grotesk'; font-size:.94rem; }
.uo-hero__tag span{ display:block; color:var(--uo-gris); font-size:.76rem; }

/* ── preuve ─────────────────────────────────────────────── */
.uo-preuve{ background:var(--uo-vert); color:#fff; }
.uo-preuve__in{ display:grid; grid-template-columns:1fr; gap:18px; padding:24px 0; }
@media(min-width:780px){ .uo-preuve__in{ grid-template-columns:repeat(4,1fr); gap:12px; } }
.uo-pf__k{ color:var(--uo-sauge); text-transform:uppercase; letter-spacing:.09em; font-size:.66rem; display:block; margin-bottom:4px; }
.uo-pf__v{ font-family:'Cabinet Grotesk'; font-weight:700; font-size:1.02rem; }
.uo-pf__v small{ font-family:'Switzer'; font-weight:400; font-size:.84rem; color:var(--uo-sauge); }
.uo-et{ color:var(--uo-vif); letter-spacing:-.06em; }

/* ── sections ───────────────────────────────────────────── */
.uo-sec{ padding:clamp(56px,8vw,100px) 0; }
.uo-tete{ max-width:52ch; margin-bottom:clamp(30px,4vw,48px); }
.uo-sur{ font-family:'Sometype Mono',monospace; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--uo-vert); margin-bottom:12px; font-weight:500; }
.uo-sec h2{ font-size:clamp(1.9rem,4.4vw,2.8rem); max-width:17ch; }
.uo-tete p{ margin-top:14px; color:var(--uo-gris); font-size:1.06rem; }

/* ── LA CARTE DU CORPS : cinq zones, cinq vraies photos ─── */
.uo-zones{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:680px){ .uo-zones{ grid-template-columns:1fr 1fr; } }
@media(min-width:1020px){
  .uo-zones{ grid-template-columns:repeat(6,1fr); }
  .uo-zone:nth-child(1){ grid-column:span 2; }
  .uo-zone:nth-child(2){ grid-column:span 2; }
  .uo-zone:nth-child(3){ grid-column:span 2; }
  .uo-zone:nth-child(4){ grid-column:span 3; }
  .uo-zone:nth-child(5){ grid-column:span 3; }
}
.uo-zone{
  position:relative; overflow:hidden; border-radius:20px; background:var(--uo-voile);
  text-decoration:none; color:var(--uo-encre); display:flex; flex-direction:column;
  min-height:340px; border:1px solid #D3E5DB; transition:border-color .2s;
}
.uo-zone:hover{ border-color:var(--uo-vif); }
.uo-zone--clair{ background:#fff; }
.uo-zone--clair .uo-zone__ph{ align-items:center; }
.uo-zone--clair .uo-zone__ph img{ height:100%; }
.uo-zone__ph{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; }
.uo-zone__ph img{ height:86%; width:auto; object-fit:contain; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.uo-zone:hover .uo-zone__ph img{ transform:scale(1.04); }
.uo-zone__v{ position:relative; z-index:1; margin-top:auto; padding:20px;
  background:linear-gradient(to top, rgba(18,54,42,.97) 0%, rgba(18,54,42,.9) 46%, rgba(18,54,42,0) 100%);
  padding-top:64px; color:#fff; }
.uo-zone__z{ display:block; font-family:'Sometype Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--uo-vif); }
.uo-zone__t{ display:block; font-family:'Cabinet Grotesk'; font-weight:800; font-size:1.3rem; letter-spacing:-.02em; margin-top:5px; line-height:1.12; }
.uo-zone__d{ display:block; font-size:.88rem; line-height:1.45; color:#B9D2C7; margin-top:5px; }

/* ── bloc urgences : le seul rouge hors photos ───────────── */
.uo-alerte{ border:1.5px solid var(--uo-douleur); border-radius:20px; padding:clamp(24px,3.4vw,36px); background:#FDF4F2; }
.uo-alerte__t{ display:flex; align-items:center; gap:11px; color:var(--uo-douleur); font-family:'Cabinet Grotesk'; font-weight:800; font-size:1.26rem; }
.uo-alerte ul{ margin:16px 0 0; padding-left:20px; }
.uo-alerte li{ margin-bottom:7px; }
.uo-alerte__p{ margin-top:16px; color:var(--uo-gris); font-size:.96rem; }
.uo-alerte__p b{ color:var(--uo-douleur); }

/* ── dimanche ───────────────────────────────────────────── */
.uo-dim{ background:var(--uo-nuit); color:#fff; border-radius:24px; padding:clamp(30px,5vw,60px); display:grid; gap:28px; grid-template-columns:1fr; align-items:center; }
@media(min-width:880px){ .uo-dim{ grid-template-columns:1.25fr 1fr; } }
.uo-dim h2{ font-size:clamp(1.8rem,3.8vw,2.5rem); }
.uo-dim h2 em{ font-style:normal; color:var(--uo-vif); }
.uo-dim p{ margin-top:14px; color:#B9D2C7; }
.uo-hr{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.uo-hr:last-child{ border-bottom:0; }
.uo-hr--off{ opacity:.4; }
.uo-hr b{ color:var(--uo-vif); }

/* ── lieux ──────────────────────────────────────────────── */
.uo-lieux{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:860px){ .uo-lieux{ grid-template-columns:repeat(3,1fr); } }
.uo-lieu{ padding:28px; border-radius:20px; background:var(--uo-blanc); border:1px solid #DCE8E2; display:flex; flex-direction:column; gap:8px; }
.uo-lieu--fort{ background:var(--uo-vert); border-color:var(--uo-vert); color:#fff; }
.uo-lieu h3{ font-size:1.28rem; }
.uo-lieu p{ font-size:.94rem; color:var(--uo-gris); }
.uo-lieu--fort p{ color:#B9D2C7; }
.uo-lieu .uo-mono{ margin-top:auto; padding-top:16px; color:var(--uo-vert); }
.uo-lieu--fort .uo-mono{ color:var(--uo-vif); }


/* ── héros : les photos se superposent et se relaient ───── */
.uo-hero__img{ display:grid; }
/* Elementor pose « .elementor img { height:auto } » — 0,1,1 de spécificité,
   ce qui bat une simple classe. On passe à 0,2,0 en qualifiant par le parent,
   sinon la photo reprend sa hauteur automatique et déborde du héros. */
.uo-hero__img .uo-hero__ph{
  grid-area:1/1; justify-self:center; align-self:end;
  height:clamp(400px, 74vh, 700px); width:auto; max-width:100%;
  object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.34));
  opacity:0; transform:scale(.97); transition:opacity .7s ease, transform .7s ease;
}
.uo-hero__img .uo-hero__ph[data-on]{ opacity:1; transform:none; }
.uo-hero__tag{ transition:opacity .3s; }
.uo-hero__tag[data-part]{ opacity:0; }

/* ── ORIENTATION ─────────────────────────────────────────── */
.uo-tri{
  position:relative; background:#fff; border:1px solid #DCE8E2; border-radius:24px;
  padding:clamp(24px,3.4vw,44px); overflow:hidden;
  box-shadow:0 18px 50px rgba(16,35,28,.06);
}
/* Les étapes inactives sortent du flux : la carte n'est plus dimensionnée
   par la plus haute d'entre elles. La hauteur est posée en JS pour qu'elle
   s'anime au lieu de sauter. */
/* Exception assumée à « ne pas animer une propriété de mise en page » :
   la carte échange des étapes de hauteurs différentes, et sans cette
   transition elle saute. Une seule transition, un seul élément, 450 ms,
   déclenchée par un clic — ni boucle, ni scroll. grid-template-rows ne
   sait pas faire un échange, seulement un dépliage. */
.uo-tri__scene{ position:relative; transition:height .45s cubic-bezier(.2,.7,.3,1); }
.uo-tri__jauge{ position:absolute; inset:0 0 auto 0; height:3px; background:#E4F1EA; }
/* transform:scaleX plutôt qu'une largeur animée : le compositeur s'en
   charge, aucun recalcul de mise en page.
   Note pour plus tard : cette barre paraît figée à 0 dans un onglet piloté
   par l'automatisation. Ce n'est pas un bug — Chrome met les transitions CSS
   en pause quand document.visibilityState vaut "hidden", donc aucun
   transitionstart ne part. Vérifié : forcée sans transition, la barre
   répond correctement. Ne pas « corriger » ce qui n'est pas cassé. */
.uo-tri__jauge span{
  display:block; height:100%; width:100%; background:var(--uo-vif);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.3,.8,.3,1);
}
.uo-tri__e{
  position:absolute; inset:0 0 auto 0; opacity:0; transform:translateX(28px);
  pointer-events:none; transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.uo-tri__e[data-actif]{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.uo-tri__e[data-sorti]{ transform:translateX(-28px); }
.uo-tri__q{ font-family:'Cabinet Grotesk'; font-weight:800; font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.025em; }
.uo-tri__aide{ color:var(--uo-gris); font-size:.94rem; margin-top:8px; }
.uo-tri__ch{ display:grid; gap:10px; margin-top:22px; grid-template-columns:1fr; }
@media(min-width:620px){ .uo-tri__ch{ grid-template-columns:1fr 1fr; } }
.uo-tri__ch--liste{ grid-template-columns:1fr !important; }
.uo-ch{
  font:inherit; text-align:left; cursor:pointer; padding:15px 18px; border-radius:12px;
  border:1.5px solid #DCE8E2; background:var(--uo-papier); color:var(--uo-encre);
  font-weight:500; transition:border-color .16s, background .16s, transform .16s;
}
.uo-ch:hover{ border-color:var(--uo-vif); background:var(--uo-voile); transform:translateY(-1px); }
.uo-ch--rouge:hover{ border-color:var(--uo-douleur); background:#FDF4F2; }
.uo-cx{ display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border-radius:12px;
     border:1.5px solid #DCE8E2; background:var(--uo-papier); cursor:pointer; transition:border-color .16s, background .16s; }
.uo-cx:hover{ border-color:var(--uo-sauge); }
.uo-cx input{ margin-top:3px; width:19px; height:19px; accent-color:var(--uo-vert); flex:none; cursor:pointer; }
.uo-cx:has(input:checked){ border-color:var(--uo-douleur); background:#FDF4F2; }
.uo-btn--vert{ background:var(--uo-vert); color:#fff; border:0; font:inherit; font-family:'Cabinet Grotesk'; font-weight:700; cursor:pointer; margin-top:22px; }
.uo-btn--uo-vert:hover{ background:var(--uo-nuit); }
.uo-btn--rouge{ background:var(--uo-douleur); color:#fff; }
.uo-btn--wa{ background:#25D366; color:#0B3B22; }
.uo-btn--wa:hover{ background:#1EB855; }
.uo-tri__resume{ margin-top:20px; padding:18px 20px; border-radius:14px; background:var(--uo-voile); border:1px solid #CFE4D9; }
.uo-tri__resume__k{ color:var(--uo-vert); letter-spacing:.09em; }
.uo-tri__resume__v{ margin-top:7px; font-size:1.04rem; font-weight:500; }
.uo-btn--rouge:hover{ background:#A82B1C; }
.uo-btn--nu2{ border:1.5px solid #CBD9D2; color:var(--uo-encre); background:transparent; font:inherit; font-family:'Cabinet Grotesk'; font-weight:700; cursor:pointer; }
.uo-btn--nu2:hover{ border-color:var(--uo-encre); }

.uo-tri__ic{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; margin-bottom:18px; }
.uo-tri__ic--r{ background:#FBE6E2; color:var(--uo-douleur); }
.uo-tri__ic--m{ background:#FDF1E3; color:#B4701C; }
.uo-tri__ic--v{ background:var(--uo-voile); color:var(--uo-vert); }
.uo-tri__rt{ font-family:'Cabinet Grotesk'; font-weight:800; font-size:clamp(1.5rem,3.2vw,2.1rem); letter-spacing:-.025em; }
.uo-tri__rp{ margin-top:14px; font-size:1.06rem; max-width:56ch; }
.uo-tri__note{ margin-top:14px; color:var(--uo-gris); font-size:.92rem; max-width:60ch; }
.uo-tri__act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.uo-tri__legal{ margin-top:18px; color:var(--uo-gris); font-size:.82rem; max-width:76ch; }

footer{ background:var(--uo-nuit); color:#9DBBAF; padding:48px 0; margin-top:clamp(56px,8vw,90px); }
footer b{ color:#fff; }
footer .uo-mono{ display:block; margin-top:8px; }


/* ── barre d'appel collante : mobile seulement ─────────────────────── */
.uo-colle{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,250,248,.94); backdrop-filter:blur(12px);
  border-top:1px solid #DCE8E2;
}
@media(max-width:860px){ .uo-colle{ display:flex; } body.uo{ padding-bottom:74px; } }
.uo-colle__tel{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--uo-vert); color:#fff; text-decoration:none; padding:14px; border-radius:999px;
  font-family:'Cabinet Grotesk'; font-weight:700; font-size:1.02rem;
}
.uo-colle__wa{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; background:#25D366; color:#0B3B22; text-decoration:none;
}

/* ── navigation ───────────────────────────────────────────────────── */
.uo-nav{ display:none; gap:26px; }
@media(min-width:1040px){ .uo-nav{ display:flex; } }
.uo-nav a{ text-decoration:none; font-weight:500; font-size:.96rem; color:var(--uo-encre); }
.uo-nav a:hover{ color:var(--uo-vert); }
.uo-bar__act{ display:flex; align-items:center; gap:9px; }
.uo-wa{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:50%; background:#25D366; color:#0B3B22; text-decoration:none; flex:none;
}
@media(max-width:520px){ .uo-tel span{ display:none; } }

/* ── pied de page ─────────────────────────────────────────────────── */
.uo-pied{ background:var(--uo-nuit); color:#9DBBAF; padding:56px 0 40px; }
.uo-pied__h{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.12); }
.uo-logo--clair b{ color:#fff; }
.uo-pied__h p{ color:#B9D2C7; }
.uo-pied__h strong{ color:#fff; }
.uo-pied__g{ display:grid; gap:28px; padding:32px 0; grid-template-columns:1fr; }
@media(min-width:760px){ .uo-pied__g{ grid-template-columns:repeat(3,1fr); } }
.uo-pied__k{ color:var(--uo-vif); text-transform:uppercase; letter-spacing:.09em; margin-bottom:10px; }
.uo-pied__gros{ display:block; font-family:'Cabinet Grotesk'; font-weight:800; font-size:1.5rem; color:#fff; text-decoration:none; letter-spacing:-.03em; margin-bottom:10px; }
.uo-pied__g p{ margin-bottom:6px; }
.uo-pied__g nav{ display:flex; flex-direction:column; gap:7px; }
.uo-pied__g nav a{ color:#B9D2C7; text-decoration:none; }
.uo-pied__g nav a:hover{ color:#fff; }
.uo-off{ opacity:.5; }
.uo-pied__bas{ padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.uo-pied__loi{ margin-top:12px; font-size:.82rem; opacity:.72; max-width:78ch; }
.uo-pied__loi strong{ color:var(--uo-douleur); }
.uo-pied__loi a{ color:#B9D2C7; }

/* ── garde-fous Elementor ─────────────────────────────────────────── */
body.uo .elementor-section.elementor-section-boxed > .elementor-container{ max-width:1240px; }
body.uo .elementor-widget-html p:last-child{ margin-bottom:0; }

/* ═══ GABARIT DES PAGES ═══════════════════════════════════════════════
   Première version : une colonne de texte gris sur 2800 mots. Un document
   Word avec une barre verte. Ici on donne du rythme : la photo tient le
   héros, les H2 respirent, les citations sourcées ont leur traitement,
   les listes de gestes deviennent des blocs, et le texte est coupé par
   de la matière. ═══════════════════════════════════════════════════ */
.uo-ph{ background:var(--uo-nuit); color:#fff; position:relative; overflow:hidden; }
.uo-ph::before{ content:''; position:absolute; right:-6%; top:-20%; width:56%; height:150%;
  background:radial-gradient(ellipse at 50% 50%, rgba(63,191,134,.20), transparent 62%); pointer-events:none; }
.uo-ph__in{ display:grid; grid-template-columns:1fr; gap:0; align-items:end; position:relative; z-index:1; }
@media(min-width:940px){ .uo-ph__in{ grid-template-columns:1.1fr .9fr; min-height:min(620px,78vh); } }
.uo-ph__t{ padding:clamp(38px,5vw,72px) 0; }
.uo-ph h1{ font-size:clamp(2.2rem,5vw,3.4rem); max-width:15ch; }
.uo-ph__chapo{ margin-top:20px; font-size:clamp(1.04rem,2.1vw,1.22rem); line-height:1.55; color:#CBDDD5; max-width:42ch; }
.uo-ph__img{ position:relative; align-self:end; justify-self:center; display:grid; }
/* Elementor pose « .elementor img{height:auto} » (0,1,1) : on passe à 0,2,0. */
.uo-ph__img .uo-ph__ph{
  height:clamp(340px,62vh,600px); width:auto; max-width:100%;
  object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.36));
}

/* ── le corps ─────────────────────────────────────────────────────── */
.uo-art{ padding:clamp(48px,6vw,84px) 0; }
.uo-art__g{ display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,68px); }
@media(min-width:1000px){ .uo-art__g{ grid-template-columns:minmax(0,1fr) 316px; } }
.uo-art__c{ max-width:68ch; font-size:1.06rem; line-height:1.72; }

/* H2 : une vraie rupture, pas un gras un peu plus gros */
.uo-art__c h2{
  font-size:clamp(1.6rem,3.2vw,2.15rem); line-height:1.12; max-width:20ch;
  margin:64px 0 20px; padding-top:26px; border-top:2px solid var(--uo-voile);
}
.uo-art__c h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.uo-art__c h3{
  font-family:'Cabinet Grotesk'; font-weight:700; font-size:1.14rem; letter-spacing:-.02em;
  color:var(--uo-vert); margin:32px 0 10px;
}
.uo-art__c p{ margin-bottom:16px; }
.uo-art__c strong{ font-weight:600; color:var(--uo-encre); }

/* Les listes de gestes : des blocs, pas des puces perdues */
.uo-art__c ul{ list-style:none; margin:0 0 22px; padding:0; }
.uo-art__c ul li{
  position:relative; padding:11px 0 11px 30px; margin:0;
  border-bottom:1px solid var(--uo-voile);
}
.uo-art__c ul li:last-child{ border-bottom:0; }
.uo-art__c ul li::before{
  content:''; position:absolute; left:6px; top:20px;
  width:7px; height:7px; border-radius:50%; background:var(--uo-vif);
}
.uo-art__c ol{ margin:0 0 22px; padding-left:22px; }
.uo-art__c ol li{ margin-bottom:9px; }

/* Les citations sourcées : elles portent tout le crédit du site,
   elles doivent se voir. */
.uo-art__c blockquote{
  position:relative; margin:30px 0; padding:26px 28px 24px 30px;
  background:var(--uo-voile); border-radius:14px;
  font-size:1.02rem; color:var(--uo-encre);
}
.uo-art__c blockquote::before{
  content:'\201C'; position:absolute; left:12px; top:6px;
  font-family:'Cabinet Grotesk'; font-size:3rem; line-height:1;
  color:var(--uo-vif); opacity:.5;
}
.uo-art__c blockquote p:last-child{ margin-bottom:0; }
.uo-art__c blockquote strong{ color:var(--uo-vert); }

/* une image qui coupe le texte */
/* La photo est en portrait (600×900) : sans bride elle occupait 996 px de
   haut et suragrandissait le fichier. On la cadre en bandeau. */
.uo-art__ill{ margin:44px 0; border-radius:18px; overflow:hidden; background:var(--uo-voile); }
.uo-art__ill img{ width:100%; height:300px; object-fit:cover; object-position:center 25%; display:block; }
@media(min-width:700px){ .uo-art__ill img{ height:340px; } }
.uo-art__ill figcaption{ padding:12px 16px; font-size:.86rem; color:var(--uo-gris); }

/* ── l'aside ──────────────────────────────────────────────────────── */
.uo-cote{ position:sticky; top:96px; align-self:start; display:flex; flex-direction:column; gap:14px; }
.uo-carte{ background:var(--uo-nuit); color:#fff; border-radius:18px; padding:26px; }
.uo-carte h3{ font-size:1.22rem; margin-bottom:8px; }
.uo-carte p{ font-size:.92rem; line-height:1.55; color:#B9D2C7; margin-bottom:18px; }
.uo-carte .uo-btn{ width:100%; justify-content:center; padding:14px; font-size:1rem; }
.uo-carte__h{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.uo-carte__h span{ display:block; line-height:1.9; }
.uo-carte__h b{ color:var(--uo-vif); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.uo-faq{ margin-top:56px; padding-top:30px; border-top:2px solid var(--uo-voile); }
.uo-faq h2{ border-top:0 !important; padding-top:0 !important; margin-top:0 !important; }
.uo-faq__q{ border-bottom:1px solid var(--uo-voile); }
.uo-faq summary{
  cursor:pointer; padding:18px 0; font-family:'Cabinet Grotesk'; font-weight:700;
  font-size:1.06rem; letter-spacing:-.02em; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
}
.uo-faq summary::-webkit-details-marker{ display:none; }
.uo-faq summary::after{ content:'+'; color:var(--uo-vif); font-weight:400; font-size:1.5rem; line-height:1; flex:none; }
.uo-faq details[open] summary::after{ content:'–'; }
.uo-faq details[open] summary{ color:var(--uo-vert); }
.uo-faq details p{ padding:0 0 20px; color:var(--uo-gris); max-width:64ch; line-height:1.7; }

/* Bloc « à compléter » des mentions légales : volontairement voyant.
   Une mention légale inventée serait pire que pas de page ; celles-ci
   attendent des informations que seul Benjamin détient. */
.uo-aremplir{
  background:#FBE9E5; border:1px solid #F2C9C0;
  padding:16px 18px; border-radius:12px; font-size:.94rem;
}
.uo-aremplir strong{ color:var(--uo-douleur); }

/* ═══ CIBLES TACTILES ═════════════════════════════════════════════════
   Mesuré sur la page en ligne : liens de pied de page à 17 px, motifs à
   27, boutons à 38-42. Le minimum utilisable est 44 (Apple HIG) / 48 dp
   (Material). Sur un site d'urgence, consulté en douleur et à une main,
   c'est la règle la moins négociable de toutes. */
.uo-pied__g nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:2px 0;
}
.uo-pied__loi a{ display:inline-block; min-height:44px; line-height:44px; }
.uo-nav a{ display:inline-flex; align-items:center; min-height:44px; }
.uo-tel, .uo-wa{ min-height:44px; }
.uo-wa{ width:44px; height:44px; }
.uo-logo{ min-height:44px; }
.uo-faq summary{ min-height:44px; align-items:center; }

/* le lien d'évitement doit être atteignable au clavier, pas invisible */
.uo-sr:focus, a[href="#contenu"]:focus{
  position:fixed; top:8px; left:8px; z-index:200; width:auto; height:auto;
  clip:auto; padding:12px 18px; background:var(--uo-vert); color:#fff;
  border-radius:8px; font-weight:600;
}

/* le gros numéro du pied de page était à 38 px */
.uo-pied__gros{ min-height:44px; display:inline-flex; align-items:center; }

/* ═══ LE MUR ══════════════════════════════════════════════════════════
   « Ces signes-là, ce n'est pas moi qu'il faut appeler » est le moment le
   plus important de la page : c'est là qu'on renonce à un patient pour le
   protéger. Dans le flux de texte, il passait inaperçu. Pleine largeur,
   fond nuit, il coupe la lecture — c'est exactement ce qu'on veut. */
.uo-mur{ background:var(--uo-nuit); color:#fff; padding:clamp(48px,6vw,84px) 0; }
.uo-mur__in{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px); }
@media(min-width:960px){ .uo-mur__in{ grid-template-columns:.85fr 1.15fr; align-items:start; } }
.uo-mur__ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:15px;
  background:rgba(217,58,41,.16); color:#FF7A66; margin-bottom:18px;
}
.uo-mur__t h2{ font-size:clamp(1.7rem,3.6vw,2.4rem); max-width:16ch; color:#fff; }
.uo-mur__s{ margin-top:16px; color:#B9D2C7; font-size:1.02rem; line-height:1.6; max-width:38ch; }
.uo-mur__t .uo-btn{ margin-top:24px; }
@media(min-width:960px){ .uo-mur__t{ position:sticky; top:96px; } }

.uo-mur__c{ font-size:1.04rem; line-height:1.72; color:#DCE9E3; max-width:62ch; }
.uo-mur__c h3{
  font-family:'Cabinet Grotesk'; font-weight:700; font-size:1.12rem;
  color:#FF7A66; margin:28px 0 10px; letter-spacing:-.02em;
}
.uo-mur__c h3:first-child{ margin-top:0; }
.uo-mur__c p{ margin-bottom:14px; }
.uo-mur__c strong{ color:#fff; font-weight:600; }
.uo-mur__c em{ color:#B9D2C7; }
.uo-mur__c ul{ list-style:none; margin:0 0 18px; padding:0; }
.uo-mur__c ul li{
  position:relative; padding:10px 0 10px 26px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.uo-mur__c ul li:last-child{ border-bottom:0; }
.uo-mur__c ul li::before{
  content:''; position:absolute; left:4px; top:19px;
  width:6px; height:6px; border-radius:50%; background:#FF7A66;
}

/* corps sans aside : on centre, sinon la colonne flotte à gauche */
.uo-art__g--seul{ grid-template-columns:minmax(0,1fr) !important; justify-items:center; }
.uo-art__g--seul .uo-art__c{ max-width:68ch; }

/* ═══ FAQ ═════════════════════════════════════════════════════════════ */
.uo-sec-faq{ background:var(--uo-voile); padding:clamp(48px,6vw,80px) 0; }
.uo-faq__h{ font-size:clamp(1.7rem,3.6vw,2.3rem); margin-bottom:26px; max-width:20ch; }
.uo-sec-faq .uo-faq{ margin-top:0; padding-top:0; border-top:0; max-width:74ch; }
.uo-sec-faq .uo-faq__q{ border-bottom:1px solid #CFE4D9; }

/* ═══ APPEL FINAL ═════════════════════════════════════════════════════ */
.uo-appel{ background:var(--uo-vert); color:#fff; padding:clamp(44px,5vw,68px) 0; }
.uo-appel__in{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
@media(min-width:880px){ .uo-appel__in{ grid-template-columns:1.2fr auto; } }
.uo-appel h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); max-width:18ch; color:#fff; }
.uo-appel p{ margin-top:12px; color:#CBDDD5; max-width:52ch; }
.uo-appel__h{ margin-top:16px !important; color:#9DBBAF !important; }
.uo-appel__b{ display:flex; flex-direction:column; gap:10px; }
@media(max-width:879px){ .uo-appel__b{ flex-direction:row; flex-wrap:wrap; } }
.uo-appel__b .uo-btn{ justify-content:center; white-space:nowrap; }

/* ═══ /le-praticien/ ══════════════════════════════════════════════════
   Cette page a un seul travail : prouver qu'il existe. 0 des 8 concurrents
   ne nomme un praticien ni n'affiche un numéro d'inscription. C'est notre
   seul avantage réel — donc le RPPS est traité comme un monument, pas
   comme une ligne perdue dans un paragraphe. */
.uo-pr-hero{ background:var(--uo-nuit); color:#fff; position:relative; overflow:hidden; }
.uo-pr-hero::before{ content:''; position:absolute; right:-4%; top:-15%; width:52%; height:130%;
  background:radial-gradient(ellipse at 50% 50%, rgba(63,191,134,.20), transparent 62%); pointer-events:none; }
.uo-pr-hero__in{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,60px);
  align-items:center; position:relative; z-index:1; padding:clamp(40px,5vw,72px) 0; }
@media(min-width:900px){ .uo-pr-hero__in{ grid-template-columns:1.05fr .95fr; } }
.uo-pr-hero h1{ font-size:clamp(2.4rem,5.6vw,3.8rem); max-width:12ch; }
.uo-pr-hero__c{ margin-top:20px; font-size:clamp(1.02rem,2.1vw,1.2rem); line-height:1.6;
  color:#CBDDD5; max-width:42ch; }
.uo-pr-hero__ph{ position:relative; justify-self:center; margin:0; }
.uo-pr-hero__ph img{ width:100%; max-width:340px; border-radius:20px; display:block; }
.uo-pr-hero__ph figcaption{
  position:absolute; left:-14px; bottom:22px; background:#fff; color:var(--uo-encre);
  padding:12px 18px; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.uo-pr-hero__ph figcaption b{ font-family:'Cabinet Grotesk'; font-size:1rem; display:block; letter-spacing:-.02em; }
.uo-pr-hero__ph figcaption span{ font-size:.8rem; color:var(--uo-gris); }

/* Ce qui compte pour un patient en douleur — pas le numéro d'inscription. */
.uo-pr-rpps{ background:var(--uo-vert); color:#fff; padding:clamp(46px,6vw,76px) 0; text-align:center; }
.uo-pr-rpps__k{ color:var(--uo-vif); letter-spacing:.1em; text-transform:uppercase; }
.uo-pr-rpps__n{
  font-family:'Cabinet Grotesk'; font-weight:800;
  font-size:clamp(2rem,5.4vw,3.4rem); letter-spacing:-.03em; line-height:1.06; margin:12px 0 18px;
}
.uo-pr-rpps__s{ color:#CBDDD5; max-width:56ch; margin:0 auto; line-height:1.6; }
.uo-pr-faits{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:44px; text-align:left; }
@media(min-width:760px){ .uo-pr-faits{ grid-template-columns:repeat(4,1fr); } }
.uo-pr-faits > div{ padding-top:16px; border-top:1px solid rgba(255,255,255,.2); }
.uo-pr-faits span{ display:block; color:var(--uo-vif); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:6px; }
.uo-pr-faits b{ font-family:'Cabinet Grotesk'; font-weight:700; font-size:1.14rem; letter-spacing:-.02em; display:block; }
.uo-pr-faits em{ font-style:normal; font-size:.86rem; color:#9DBBAF; }

.uo-pr-terr{ padding:clamp(52px,7vw,88px) 0; }
.uo-pr-terr__in{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,60px); }
@media(min-width:900px){
  .uo-pr-terr__in{ grid-template-columns:.9fr 1.1fr; align-items:start; }
  /* la colonne de texte est plus courte que la liste : sans cela elle
     laisse un vide de 300 px. Elle accompagne la lecture à la place. */
  .uo-pr-terr__t{ position:sticky; top:104px; }
}
.uo-pr-terr h2{ font-size:clamp(1.7rem,3.8vw,2.5rem); max-width:14ch; }
.uo-pr-terr__t p{ margin-top:16px; color:var(--uo-gris); line-height:1.7; max-width:46ch; }
.uo-pr-lieux{ list-style:none; margin:0; padding:0; counter-reset:l; }
.uo-pr-lieux li{
  counter-increment:l; position:relative; padding:18px 0 18px 46px;
  border-bottom:1px solid var(--uo-voile);
}
.uo-pr-lieux li:last-child{ border-bottom:0; }
.uo-pr-lieux li::before{
  content:counter(l,decimal-leading-zero); position:absolute; left:0; top:20px;
  font-family:'Sometype Mono',monospace; font-size:.76rem; color:var(--uo-vif);
}
.uo-pr-lieux b{ font-family:'Cabinet Grotesk'; font-size:1.08rem; letter-spacing:-.02em; display:block; }
.uo-pr-lieux span{ font-size:.92rem; color:var(--uo-gris); }

.uo-pr-mem{ background:var(--uo-voile); padding:clamp(52px,7vw,88px) 0; }
.uo-pr-mem__in{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media(min-width:900px){ .uo-pr-mem__in{ grid-template-columns:.8fr 1.2fr; } }
.uo-pr-mem__ph{ margin:0; border-radius:20px; overflow:hidden; }
.uo-pr-mem__ph img{ width:100%; height:auto; display:block; }
.uo-pr-mem h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); max-width:22ch; margin-top:12px; }
.uo-pr-mem__t p{ margin-top:14px; color:var(--uo-gris); line-height:1.7; max-width:56ch; }
.uo-lien{ color:var(--uo-vert); font-weight:600; text-decoration:none; }
.uo-lien:hover{ text-decoration:underline; }

.uo-pr-avis{ padding:clamp(52px,7vw,84px) 0; }
.uo-pr-avis__in{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
@media(min-width:860px){ .uo-pr-avis__in{ grid-template-columns:1.4fr auto; } }
.uo-pr-avis__n{ font-size:1.6rem; letter-spacing:-.05em; }
.uo-pr-avis__c{ font-family:'Cabinet Grotesk'; font-weight:800; font-size:clamp(2rem,5vw,3rem);
  letter-spacing:-.03em; margin:4px 0 14px; }
.uo-pr-avis__c small{ font-family:'Switzer'; font-weight:400; font-size:1rem; color:var(--uo-gris);
  letter-spacing:0; }
.uo-pr-avis p{ color:var(--uo-gris); max-width:56ch; line-height:1.7; }
.uo-pr-avis__d{ margin-top:14px; }
.uo-pr-avis__d strong{ color:var(--uo-vert); }
.uo-pr-sign{ width:220px; height:auto; justify-self:center; opacity:.9; }

.uo-pr-ou{ padding:0 0 clamp(52px,7vw,84px); }
.uo-pr-ou h2{ font-size:clamp(1.7rem,3.8vw,2.4rem); margin-bottom:26px; max-width:16ch; }