/* Lellouche — pages Implant / Couronne dentaire.
   Feuille autonome pour webdentiste : tout ce qui n'existe pas dans le thème du site.
   Préfixe #body-container pour passer devant les règles du thème (html à 10px, h1/h2/p du thème). */

#body-container .lp{
  --violet:#4f229e; --violet-2:#733ad5; --cyan:#21adcd; --night:#1d1236;
  --ink:#2f2f2f; --ink-soft:#4a4458; --tint:#f4f0fb; --line:#e2dbef;
  --gutter:clamp(20px,4vw,56px); --gap:clamp(28px,4vw,72px); --sec:clamp(32px,4vw,56px); --max:1300px;
  font-family:"Marcellus",Georgia,serif; color:var(--ink); font-size:18px; line-height:1.6; overflow-x:clip;
}
#body-container .lp *{box-sizing:border-box}
#body-container .lp ::selection{background:var(--violet);color:#fff}
#body-container .lp h1,#body-container .lp h2,#body-container .lp h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;color:var(--violet);line-height:1.12;margin:0;text-wrap:balance}
#body-container .lp h2{font-size:clamp(30px,3vw,44px);letter-spacing:-.01em}
#body-container .lp h3{font-size:24px;margin:0 0 6px}
#body-container .lp p,#body-container .lp ul{font-size:inherit!important;line-height:inherit;margin:0 0 .8em}
#body-container .lp ul{padding-left:1.2em}
#body-container .lp li{margin-bottom:.3em}
#body-container .lp li::marker{color:var(--violet-2)}
#body-container .lp a{color:var(--violet-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s}
#body-container .lp a:hover{color:var(--violet)}
#body-container .lp a:focus-visible,#body-container .lp summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
#body-container .lp mark.todo{background:#fff2b3;color:#5a4500;padding:0 4px;border-radius:3px;font-size:.88em}

/* Hero : photo pleine largeur, dégradé violet en bas, texte blanc en bas à gauche (zone vide de la photo) */
#body-container .lp .hero{position:relative;width:min(var(--max),calc(100% - 2 * var(--gutter)));margin:clamp(16px,2vw,28px) auto 0;min-height:clamp(440px,40vw,600px);overflow:hidden;display:flex;align-items:flex-start;background:var(--night);color:#fff}
#body-container .lp .hero-media{position:absolute;inset:0;z-index:0}
#body-container .lp .hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#body-container .lp .hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(29,18,54,.78) 0%,rgba(29,18,54,.15) 100%)}
#body-container .lp .hero-text{position:relative;z-index:1;max-width:min(820px,100%);padding:clamp(28px,4vw,56px)}
#body-container .lp .hero h1{color:#fff;font-size:clamp(36px,3.6vw,56px);letter-spacing:-.02em}
#body-container .lp .ln{display:block;white-space:nowrap}
#body-container .lp .hero-loc{margin:22px 0 0;color:#e6defa;font-size:17px;white-space:nowrap}
#body-container .lp .hero .btns{flex-wrap:nowrap}
#body-container .lp .btn{white-space:nowrap}

#body-container .lp .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
#body-container .lp .btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--cyan);color:#06242c!important;font-family:"Marcellus",Georgia,serif;font-size:17px;text-decoration:none!important;transition:background .2s,transform .2s}
#body-container .lp .btn:hover{background:#4cc3de;transform:translateY(-1px)}
#body-container .lp .btn.alt{background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff!important}
#body-container .lp .btn.alt:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Grille de section : titre à gauche, texte à droite, sur toute la largeur utile */
#body-container .lp section.s{padding:var(--sec) 0 0}
#body-container .lp .row{display:grid;grid-template-columns:minmax(0,1fr);max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
#body-container .lp .row>h2{margin-bottom:16px}
#body-container .lp .intro.fig .row{grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:clamp(12px,1.5vw,24px)}
#body-container .lp .intro.fig .row>h2,#body-container .lp .intro.fig .row>.lead{grid-column:1 / -1}
#body-container .lp .intro.fig .body{grid-column:1;grid-row:3}
#body-container .lp .intro.fig .figure{grid-column:2;grid-row:3;margin:0;align-self:start}
#body-container .lp .lead{max-width:none;margin-bottom:.8em;font-family:"Playfair Display",Georgia,serif;font-size:24px!important;line-height:1.45!important;color:var(--violet)}
#body-container .lp .figure{margin:0}
#body-container .lp .figure img{display:block;width:100%;height:auto;background:#fff}

/* Photos : toujours 100 % de leur cadre, recadrées, jamais étirées */
#body-container .lp .band{position:relative;width:min(var(--max),calc(100% - 2 * var(--gutter)));margin:var(--sec) auto 0;aspect-ratio:2.2/1;overflow:hidden;background:var(--tint)}
#body-container .lp .band img{display:block;width:100%;height:100%;object-fit:cover}

#body-container .lp .steps{counter-reset:s;list-style:none;padding:0;margin:8px 0 0;max-width:none}
#body-container .lp .steps li{counter-increment:s;position:relative;padding:0 0 0 68px;margin:0 0 24px}
#body-container .lp .steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:44px;height:44px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:20px}
#body-container .lp .steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:50px;bottom:-22px;width:1px;background:var(--line)}

#body-container .lp .note{background:var(--tint);border-radius:14px;padding:18px 24px;margin:1.2em 0;max-width:none;color:var(--ink-soft)}
#body-container .lp .note strong{color:var(--violet)}

#body-container .lp .tbl{overflow-x:auto;margin:1.2em 0 1.4em}
#body-container .lp table{border-collapse:collapse;width:100%;min-width:600px;font-size:16px;font-variant-numeric:tabular-nums}
#body-container .lp th,#body-container .lp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
#body-container .lp th{background:var(--violet);color:#fff;font-weight:400}
#body-container .lp td:first-child{white-space:nowrap;color:var(--violet)}
#body-container .lp td:last-child,#body-container .lp th:last-child{text-align:right;white-space:nowrap}

#body-container .lp details{border-top:1px solid var(--line);padding:14px 0}
#body-container .lp details:last-child{border-bottom:1px solid var(--line)}
#body-container .lp summary{cursor:pointer;font-family:"Playfair Display",Georgia,serif;font-size:21px;line-height:1.35;color:var(--violet);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px}
#body-container .lp summary::-webkit-details-marker{display:none}
#body-container .lp summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s cubic-bezier(.16,1,.3,1)}
#body-container .lp details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
#body-container .lp details p{margin:12px 0 0}

#body-container .lp .cta{background:var(--night);color:#fff;padding:clamp(36px,4.5vw,64px) 0;margin-top:var(--sec)}
#body-container .lp .cta h2{color:#fff}
#body-container .lp .cta p{color:#e8e1f6}
#body-container .lp .cta a:not(.btn){color:#a9e6f4}
#body-container .lp .src{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:var(--sec) var(--gutter);font-size:15px;line-height:1.5;color:var(--ink-soft)}
#body-container .lp .src h2{font-size:22px;margin:0 0 10px}
#body-container .lp .src ul{list-style:none;padding:0;margin:0}
#body-container .lp .src li{margin:0 0 6px}

@media (max-width:860px){
  #body-container .lp{font-size:17px}
  #body-container .lp .hero{display:block;min-height:0;width:100%;margin:0}
  #body-container .lp .hero::after{display:none}
  #body-container .lp .hero-media{position:relative;inset:auto;aspect-ratio:4/3}
  #body-container .lp .hero-text{max-width:none;padding:32px var(--gutter) 40px}
  #body-container .lp .ln,#body-container .lp .hero-loc{white-space:normal}
  #body-container .lp .hero .btns{flex-wrap:wrap}
  #body-container .lp .row,#body-container .lp .intro.fig .row{grid-template-columns:1fr}
  #body-container .lp .row>h2{margin-bottom:12px}
  #body-container .lp .band{aspect-ratio:3/2}
  #body-container .lp .intro.fig .body,#body-container .lp .intro.fig .figure{grid-column:1;grid-row:auto}
  #body-container .lp .intro.fig .row>.lead{grid-column:1}
  #body-container .lp .intro.fig .figure{max-width:420px;margin-top:12px}
  #body-container .lp .lead{font-size:21px!important}
}
@media (prefers-reduced-motion:reduce){#body-container .lp *{transition:none!important}}

/* Pied de page + barre Webdentiste : violet foncé du site (--night) */
#footer .container-dark,#footer .sb-bloc-inner,#footer section,#footer .background-color-before-c-1,
#footer .background-color-before-c-1:before,#footer .background-color-before-c-1:after,
#footer [class*="background-color-before"]:before,#footer [class*="background-color-before"]:after{background-color:#1d1236!important}
#subfooter{background:#1d1236!important;border-top:1px solid rgba(255,255,255,.1)}
#subfooter,#subfooter a,#subfooter p{color:#cfc6e6!important}
#subfooter a:hover{color:#fff!important}
#subfooter .logo-white-space img{display:block;height:44px;width:auto}