/* Pages ajoutées le 29/10/2026 : /medecine-esthetique/, /tourisme-dentaire/, /realisations/
   (+ le bloc « Autres services du cabinet » de /soins/). Même langage que pages-info.css :
   noir, blanc, gris, titres Outfit, filets fins. Classes préfixées pe-. Chargé avant mono.css. */

/* ---------- Hero : la photo de la médiathèque occupe le bord gauche et s'efface vers le texte ---------- */
@media(min-width:851px){
  body:not(#_).pe-page .inner-hero{position:relative;overflow:hidden;isolation:isolate;background:#fff}
  body:not(#_).pe-page .inner-hero-visual{position:absolute;z-index:-1;left:0;top:0;bottom:0;width:56%;margin:0;border-radius:0;overflow:hidden;background:none;-webkit-mask-image:none;mask-image:none}
  body:not(#_).pe-page .inner-hero-visual img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;filter:none;padding:0;
    -webkit-mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.35) 16%,#000 42%);mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.35) 16%,#000 42%)}
  body:not(#_).pe-page .inner-hero-grid{min-height:440px;align-items:center}
  body:not(#_).pe-page .inner-hero-grid .inner-hero-copy{grid-column:2}
  body:not(#_).pe-page .inner-hero .breadcrumb{margin-left:50%;position:relative;z-index:1}
}
@media(max-width:850px){
  body:not(#_).pe-page .inner-hero-visual{border-radius:var(--pi-radius);overflow:hidden;background:none;-webkit-mask-image:none;mask-image:none}
  body:not(#_).pe-page .inner-hero-visual img{width:100%;height:250px;max-height:none;object-fit:cover;border-radius:var(--pi-radius);filter:none;padding:0;-webkit-mask-image:none;mask-image:none}
}
body:not(#_).pe-med .inner-hero-visual img{object-position:50% 28%}
body:not(#_).pe-tour .inner-hero-visual img{object-position:50% 40%}
body:not(#_).pe-real .inner-hero-visual img{object-position:50% 55%}
body:not(#_).pe-page .inner-hero .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Médecine esthétique : les deux traitements ---------- */
.pe-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.pe-duo-item{border-top:1.5px solid var(--pi-ink);padding-top:26px;display:flex;flex-direction:column;gap:14px}
.pe-duo-item h3{margin:0;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;line-height:1.1}
.pe-duo-item>p{margin:0;color:var(--pi-muted);font-size:15px;line-height:1.8;max-width:54ch}
.pe-duo-item>p.pe-duo-label{margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--pi-ink)}
.pe-duo-item>p.pe-duo-note{font-size:13px;line-height:1.7;margin-top:auto;padding-top:6px}
.pe-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--pi-line)}
.pe-list li{padding:12px 0;border-bottom:1px solid var(--pi-line);font-size:15px;line-height:1.5;color:var(--pi-ink)}
@media(max-width:800px){.pe-duo{grid-template-columns:1fr}}

.pe-note{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(26px,3vw,40px);border:1px solid var(--pi-line);border-radius:var(--pi-radius);background:#fff}
.pe-note h2{margin:0;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;line-height:1.15}
.pe-note p{margin:0;color:var(--pi-muted);font-size:15px;line-height:1.8;max-width:60ch}
@media(max-width:800px){.pe-note{grid-template-columns:1fr}}

/* ---------- Tourisme dentaire ---------- */
.pe-tour-facts{align-items:start}
.pe-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pe-steps li{border-top:1.5px solid var(--pi-ink);padding-top:22px}
.pe-steps h3{margin:0 0 10px;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;line-height:1.2}
.pe-steps p{margin:0;color:var(--pi-muted);font-size:14px;line-height:1.75}
@media(max-width:1000px){.pe-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pe-steps{grid-template-columns:1fr}}
.pe-wa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:clamp(32px,4vw,52px);padding:22px clamp(20px,2.4vw,30px);border:1px solid var(--pi-line);border-radius:16px;background:#fff}
.pe-wa p{margin:0;font-size:15px;line-height:1.7;color:var(--pi-muted)}
.pe-wa strong{color:var(--pi-ink);font-weight:600}
.pe-wa .pill-icon{width:18px;height:18px}

.pe-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,2.4vw,32px);border-top:1px solid var(--pi-line)}
.pe-links li{border-bottom:1px solid var(--pi-line)}
.pe-links a{display:flex;justify-content:space-between;gap:12px;padding:18px 0;font:500 17px/1.35 'Outfit',Arial,sans-serif;color:var(--pi-ink)}
.pe-links a span:last-child{color:#9a9a9a;transition:transform .2s}
.pe-links a:hover span:last-child{transform:translate(2px,-2px);color:var(--pi-ink)}
.pi-start .pe-links{grid-template-columns:1fr 1fr}
@media(max-width:900px){.pe-links{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pe-links,.pi-start .pe-links{grid-template-columns:1fr}}
.pe-small{margin:24px 0 0;font-size:13px;line-height:1.7;color:var(--pi-muted);max-width:70ch}

/* ---------- Réalisations : galerie ---------- */
.pe-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.pe-gallery li{min-width:0}
.pe-gallery-item{display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#ececec;cursor:zoom-in;aspect-ratio:1/1}
.pe-gallery-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pe-gallery-item:hover img{transform:scale(1.03)}
.pe-gallery-item:focus-visible{outline:2px solid var(--pi-ink);outline-offset:3px}
.pe-gallery-note{margin-top:20px}
@media(max-width:1000px){.pe-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.pe-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.pe-gallery-item{border-radius:10px}}

.pe-lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:64px 72px;background:rgba(12,12,12,.94)}
.pe-lightbox[hidden]{display:none}
.pe-lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.pe-lightbox-img{display:block;max-width:min(1400px,100%);max-height:calc(100vh - 160px);width:auto;height:auto;object-fit:contain;border-radius:10px;background:#1c1c1c}
.pe-lightbox-cap{color:#e6e6e6;font-size:13px;line-height:1.5;text-align:center}
.pe-lightbox-count{color:#9a9a9a;margin-left:10px}
.pe-lightbox-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#111;color:#fff;cursor:pointer}
.pe-lightbox-btn:hover{background:#2a2a2a}
.pe-lightbox-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pe-lightbox-btn svg{width:22px;height:22px}
.pe-lightbox-close{top:16px;right:16px}
.pe-lightbox-prev{left:16px;top:50%;transform:translateY(-50%)}
.pe-lightbox-next{right:16px;top:50%;transform:translateY(-50%)}
html.pe-lightbox-open{overflow:hidden}
@media(max-width:640px){
  .pe-lightbox{padding:72px 12px 88px}
  .pe-lightbox-prev,.pe-lightbox-next{top:auto;bottom:20px;transform:none}
  .pe-lightbox-prev{left:calc(50% - 60px)}
  .pe-lightbox-next{right:calc(50% - 60px)}
}
@media(prefers-reduced-motion:reduce){.pe-gallery-item img,.pe-links a span:last-child{transition:none}}

/* ---------- /soins/ : autres services du cabinet ---------- */
.pe-others{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.pe-others .pe-links{grid-template-columns:1fr}
.pe-others .pe-links small{display:block;font:400 13px/1.5 'Poppins',Arial,sans-serif;color:var(--pi-muted);margin-top:4px}
@media(max-width:900px){.pe-others{grid-template-columns:1fr}}

/* =====================================================================
   29/10 (passe « anti-IA ») : cartes blanches à la place des lignes à filets,
   survol clair (jamais noir), rails 3,5 cartes, mobile 375 px.
   ===================================================================== */
/* Cartes de liens (soins, autres services) : .pe-cards > .pe-card.surface-card > a */
.pe-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pe-card{min-width:0;background:#fff;border:1px solid #ebebeb;border-radius:var(--pi-radius);transition:transform .3s ease,box-shadow .3s ease}
.pe-card:is(:hover,:focus-within){transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.pe-card a{display:flex;flex-direction:column;gap:10px;height:100%;padding:24px 22px 22px;color:var(--pi-ink);border-radius:inherit}
.pe-card a:focus-visible{outline:2px solid var(--pi-ink);outline-offset:3px}
.pe-card .pi-icon{width:28px;height:28px;margin-bottom:6px}
.pe-card strong{font:500 clamp(18px,1.5vw,21px)/1.25 'Outfit',Arial,sans-serif;letter-spacing:-.015em}
.pe-card a>span{font-size:13.5px;line-height:1.65;color:var(--pi-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pe-card em.pi-link{font-style:normal;margin-top:auto;align-self:flex-start}
.pe-card a>span+em.pi-link,.pe-card strong+em.pi-link{margin-top:auto}
.pe-card a:is(:hover,:focus-visible) em.pi-link{border-color:#111}
.pe-cards.pi-rail{display:flex}
.pe-cards.pi-rail>.pe-card{flex:0 0 calc((100% - 3 * 16px) / 3.5);scroll-snap-align:start}
.pe-cards.pi-rail .pe-card a{min-height:260px}
.pe-cards--mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pe-cards--mini .pe-card a{flex-direction:column;padding:18px 18px 16px;gap:8px}
.pe-cards--mini .pe-card .pi-icon{width:24px;height:24px;margin-bottom:2px}
.pe-cards--mini .pe-card strong{font-size:17px}
.pe-cards--mini em.pi-link{margin-top:8px}
.pe-others .pe-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.pe-others{grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
@media(max-width:900px){.pe-cards,.pe-others .pe-cards{grid-template-columns:1fr 1fr}.pe-cards.pi-rail>.pe-card{flex-basis:calc((100% - 16px) / 2.3)}}
@media(max-width:760px){.pe-cards.pi-rail>.pe-card{flex-basis:calc((100% - 16px) / 1.2)}}
@media(max-width:560px){.pe-cards,.pe-others .pe-cards{grid-template-columns:1fr}.pe-cards--mini{grid-template-columns:1fr 1fr}}
@media(max-width:340px){.pe-cards--mini{grid-template-columns:1fr}}
@media(max-width:560px){.pe-cards--mini .pe-card a{padding:16px 14px 14px}.pe-cards--mini .pe-card strong{font-size:15.5px}}

/* Médecine esthétique : les deux traitements en cartes, indications en liste à coches (sans filets). */
body:not(#_) .pe-duo-item{border:1px solid #ebebeb;border-radius:var(--pi-radius);background:#fff;padding:clamp(22px,2.6vw,36px)}
body:not(#_) .pe-list{border-top:0;display:grid;gap:10px}
body:not(#_) .pe-list li{border-bottom:0;padding:0 0 0 28px;position:relative}
body:not(#_) .pe-list li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;background:var(--pi-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%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' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#_) .pe-note,body:not(#_) .pe-wa{border-color:#ebebeb}

/* Tourisme dentaire : les cinq étapes en cartes, dans un rail. */
body:not(#_) .pe-steps{display:flex;grid-template-columns:none;gap:16px}
body:not(#_) .pe-steps li{flex:0 0 calc((100% - 3 * 16px) / 3.5);min-width:0;scroll-snap-align:start;border:1px solid #ebebeb;border-radius:var(--pi-radius);background:#fff;padding:26px 24px 28px}
@media(max-width:1000px){body:not(#_) .pe-steps li{flex-basis:calc((100% - 16px) / 2.3)}}
@media(max-width:760px){body:not(#_) .pe-steps li{flex-basis:calc((100% - 16px) / 1.2)}}
@media(max-width:560px){body:not(#_) .pe-wa .pill{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.pe-card{transition:none}.pe-card:is(:hover,:focus-within){transform:none}}