/* AVOIR — articles de blog v2 (inspiration magazines La Roche-Posay / ACM / Vichy). --sc = couleur du besoin, --sd = sa version foncée. */
.avart .avb-ariane{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:12.5px;color:var(--mute);margin:0 0 26px!important}
.avart .avb-ariane a{color:var(--mute)!important}
.avart .avb-ariane b{color:var(--ink);font-weight:600;max-width:34ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── en-tête : photo + panneau ── */
.avart-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:min(560px,72vh);background:color-mix(in srgb,var(--sc) 7%,var(--cream))}
.avart-hero-img{margin:0;position:relative;overflow:hidden;background:#efe7e2}
.avart-hero-img img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
.avart-hero-tx{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(28px,5vw,84px)}
.avart-pill{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;border:1.5px solid color-mix(in srgb,var(--sc) 45%,#fff);background:#fff;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sd);margin:0!important}
.ava[dir=rtl] .avart-pill{letter-spacing:0;font-size:13.5px}
.avart-pill i{width:8px;height:8px;border-radius:50%;background:var(--sc)}
.avart-hero h1{font-size:clamp(30px,3.5vw,50px);letter-spacing:-.03em;line-height:1.08;margin:18px 0 0!important}
.ava[dir=rtl] .avart-hero h1{letter-spacing:0;line-height:1.35}
.avart-chapo{margin:18px 0 0!important;font-size:18.5px;line-height:1.62;color:#3d3433;max-width:56ch}
.avart-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:26px 0 0!important;font-size:13px;color:var(--mute)}
.avart-meta>span{display:inline-flex;align-items:center;gap:7px}
.avart-meta>span+span::before{content:"";width:1px;height:13px;background:#cfc4bf;margin-inline:14px}
.avart-meta-t{color:var(--sd);font-weight:700}
.avart-meta .avs-i{color:var(--sd)}

/* ── corps : sommaire + texte ── */
.avart-corps{display:grid;grid-template-columns:280px minmax(0,740px);gap:72px;justify-content:center;padding-top:64px}
.avart-side{position:sticky;top:calc(var(--avs-h,90px) + 24px);align-self:start;display:flex;flex-direction:column;gap:16px}
.avart-toc{background:var(--cream);border-radius:20px;padding:22px 20px}
.avart-toc>b{display:block;font-family:"Sora",sans-serif;font-size:15px;margin-bottom:12px}
.ava[dir=rtl] .avart-toc>b{font-family:inherit}
.avart-toc ol{display:flex;flex-direction:column;gap:2px;margin:0!important;padding:0!important}
.avart-toc li{list-style:none}
.avart-toc a{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:baseline;padding:8px 10px;border-radius:12px;font-size:13.5px;line-height:1.4;color:#4a4140!important;transition:background .2s,color .2s}
.avart-toc a em{font:700 15px/1 "Sora",sans-serif;font-style:normal;color:color-mix(in srgb,var(--sc) 70%,#bbb)}
.avart-toc a:hover{background:#fff}
.avart-toc a.is-on{background:#fff;color:var(--ink)!important;font-weight:700;box-shadow:0 1px 0 var(--line)}
.avart-toc a.is-on em{color:var(--sd)}
.avart-side-cta{border-radius:20px;padding:22px 20px;background:var(--deep);color:rgba(255,255,255,.8);font-size:14px;line-height:1.5}
.avart-side-cta b{display:block;font-family:"Sora",sans-serif;font-size:17px;line-height:1.3;color:#fff;margin-bottom:6px}
.ava[dir=rtl] .avart-side-cta b{font-family:inherit}
.avart-side-cta p{margin:0!important}
.avart-side-cta .ava-btn{margin-top:16px;padding:12px 18px;font-size:13.5px;background:#fff;color:var(--deep)!important}

.avart-texte{min-width:0}
.avart-ess{border-radius:22px;padding:26px 28px;background:color-mix(in srgb,var(--sc) 9%,#fff);border:1px solid color-mix(in srgb,var(--sc) 24%,#fff);margin-bottom:40px}
.avart-ess-t{font-family:"Sora",sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sd);margin:0 0 14px!important}
.ava[dir=rtl] .avart-ess-t{font-family:inherit;letter-spacing:0;font-size:15px}
.avart-ess ul{display:flex;flex-direction:column;gap:12px;margin:0!important;padding:0!important}
.avart-ess li{display:grid;grid-template-columns:24px 1fr;gap:12px;list-style:none;font-size:16px;line-height:1.55;color:#2b2423}
.avart-ess li i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--sd);color:#fff;margin-top:1px}
.avart-toc-m{display:none}

.avart-prose{font-size:17.5px;line-height:1.82;color:#2b2423}
.ava[dir=rtl] .avart-prose{font-size:18px;line-height:1.95}
.avart-prose>h2{font-size:clamp(24px,2.5vw,32px);line-height:1.2;margin:64px 0 16px!important;scroll-margin-top:120px;letter-spacing:-.02em}
.ava[dir=rtl] .avart-prose>h2{letter-spacing:0;line-height:1.4}
.avart-prose>h2:first-child{margin-top:0!important}
.avart-n{display:block;font:300 44px/1 "Sora",sans-serif;color:var(--sc);margin-bottom:10px;letter-spacing:-.02em}
.avart-prose>h3{font-size:20px;margin:32px 0 10px!important}
.avart-prose p{margin:0 0 18px!important}
.avart-prose ul,.avart-prose ol{margin:0 0 22px!important;padding-inline-start:0!important;display:flex;flex-direction:column;gap:9px}
.avart-prose ul li{position:relative;padding-inline-start:24px;list-style:none}
.avart-prose ul li::before{content:"";position:absolute;inset-inline-start:3px;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--sc)}
.avart-prose ol{counter-reset:o}
.avart-prose ol li{position:relative;padding-inline-start:36px;list-style:none;counter-increment:o}
.avart-prose ol li::before{content:counter(o);position:absolute;inset-inline-start:0;top:.25em;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--sc) 16%,#fff);color:var(--sd);font:700 12.5px/24px "Sora",sans-serif;text-align:center}
.avart-prose strong{color:var(--ink)}
.avart-prose a{color:var(--sd)!important;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.avart-prose .ava-conseil,.avart-prose .wp-block-group.ava-conseil{position:relative;margin:34px 0!important;padding:26px 28px 26px 30px!important;border-radius:0 20px 20px 0;background:var(--cream);border-inline-start:4px solid var(--sd);font-size:16.5px;line-height:1.7}
.ava[dir=rtl] .avart-prose .ava-conseil{border-radius:20px 0 0 20px}
.avart-prose .ava-conseil b:first-child{display:flex;align-items:center;gap:10px;font-family:"Sora",sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sd);margin-bottom:8px}
.avart-prose .ava-conseil b:first-child::before{content:"✦";display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--sd);color:#fff;font-size:12px;letter-spacing:0}
.ava[dir=rtl] .avart-prose .ava-conseil b:first-child{letter-spacing:0;font-family:inherit;font-size:15px}

.avart-signe{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:52px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.avart-signe-l{display:flex;align-items:center;gap:14px}
.avart-signe-l b{display:block;font-size:15px}
.avart-signe-l small{font-size:13px;color:var(--mute)}
.avart-logo{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--deep);color:#fff;font:600 19px/1 "Sora",sans-serif}
.avart-share{display:flex;align-items:center;gap:8px}
.avart-share span{font-size:13px;font-weight:700;color:var(--mute);margin-inline-end:4px}
.avart-share a,.avart-share button{-webkit-appearance:none;appearance:none;box-shadow:none!important;background:#fff!important;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink)!important;cursor:pointer;padding:0;transition:border-color .2s,background .2s}
.avart-share a:hover,.avart-share button:hover{border-color:var(--ink)}
.avart-share .avs-i{width:18px;height:18px}
.avart-share button.is-ok{background:var(--deep)!important;color:#fff!important;border-color:var(--deep)}
.avart-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 0!important}
.avart-tags span{background:#000;color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}
.avart-tags a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--sd)!important;border-bottom:1px solid currentColor;padding-bottom:2px}
.avart-tags .avs-i{width:15px;height:15px}

/* ── sélection produits ── */
.avart-sel{margin-top:96px;padding:72px 0;background:color-mix(in srgb,var(--sc) 6%,var(--cream))}
.avart-sel-hd{text-align:center;max-width:720px;margin:0 auto 36px}
.avart-sel-hd h2{font-size:clamp(26px,2.8vw,38px);margin-top:10px!important}
.avart-sel-g{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:20px;margin:0 auto!important;padding:0!important;max-width:calc(var(--cols,4) * 300px + (var(--cols,4) - 1) * 20px)}
.avart-sel-g.is-peu{grid-template-columns:repeat(auto-fit,minmax(240px,300px));justify-content:center}
.avart-sel-g li{position:relative;list-style:none;display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.avart-sel-g li:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(28,23,23,.35)}
.avart-sel-img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#f6f2ef;padding:22px}
.avart-sel-img img{max-height:100%;width:auto!important;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}
.avart-sel-g li:hover .avart-sel-img img{transform:scale(1.04)}
.avart-sel-n{position:absolute;top:14px;inset-inline-start:14px;background:var(--sd);color:#fff;border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;letter-spacing:.04em;z-index:1}
.avart-sel-tx{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;flex:1}
.avart-sel-tx b{font-family:"Sora",sans-serif;font-size:16px;line-height:1.3;color:var(--ink)}
.ava[dir=rtl] .avart-sel-tx b{font-family:inherit;font-size:17px}
.avart-sel-tx small{font-size:13.5px;line-height:1.45;color:var(--mute)}
.avart-prix{font-weight:800;font-size:17px;margin-top:auto;padding-top:8px}
.avart-prix del{color:var(--mute);font-weight:400;font-size:13px;margin-inline-end:6px}.avart-prix ins{text-decoration:none;color:var(--red)}
.avart-add{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;background:var(--ink);color:#fff!important;border-radius:999px;padding:12px 16px;font-size:14px;font-weight:700;text-decoration:none!important;transition:background .2s}
.avart-add:hover{background:var(--sd)}
.avart-add .avs-i{width:17px;height:17px}
.avart-add.is-ghost{background:#fff;color:var(--ink)!important;border:1.5px solid var(--line)}
.avart-add.loading{opacity:.6}.avart .added_to_cart{display:none!important}

/* ── FAQ : photo + accordéon ── */
.avart-faq{padding:96px 0 0}
.avart-faq-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:64px;align-items:center}
.avart-faq-img{margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:var(--cream)}
.avart-faq-img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
.avart-faq h2{font-size:clamp(26px,2.8vw,38px);margin:10px 0 24px!important}
.avart-faq details{border-bottom:1px solid var(--line)}
.avart-faq details:first-of-type{border-top:1px solid var(--line)}
.avart-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;font-weight:700;font-size:16.5px;line-height:1.4;cursor:pointer}
.avart-faq summary::-webkit-details-marker{display:none}
.avart-faq summary i{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);position:relative;transition:background .2s}
.avart-faq summary i::before,.avart-faq summary i::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;background:var(--ink)}
.avart-faq summary i::after{transform:rotate(90deg);transition:transform .25s}
.avart-faq details[open] summary i{background:var(--sd);border-color:var(--sd)}
.avart-faq details[open] summary i::before,.avart-faq details[open] summary i::after{background:#fff}
.avart-faq details[open] summary i::after{transform:none}
.avart-faq details p{padding:0 0 22px;font-size:16px;line-height:1.7;color:#3d3433;margin:0!important;max-width:62ch}

/* ── appel diagnostic ── */
.avart-fin{margin-top:96px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;border-radius:28px;padding:40px 44px;background:var(--deep);color:rgba(255,255,255,.82)}
.avart-fin .ava-kick{color:rgba(255,255,255,.6)}
.avart-fin b{display:block;font-family:"Sora",sans-serif;font-size:clamp(22px,2.3vw,30px);line-height:1.2;color:#fff;margin-top:8px}
.ava[dir=rtl] .avart-fin b{font-family:inherit}
.avart-fin p{margin:8px 0 0!important;font-size:15.5px;max-width:520px}
.avart-fin .ava-btn{margin-top:0;background:#fff;color:var(--deep)!important}

/* ── à lire aussi ── */
.avart-lies{padding-top:96px}
.avart-lies h2{font-size:clamp(26px,2.8vw,38px);margin-bottom:26px!important}
.avart-lies-g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.avart-lies-g a{display:flex;flex-direction:column;color:var(--ink)!important}
.avart-l-img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:22px;background:#efe7e2}
.avart-l-img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transition:transform .5s}
.avart-lies-g a:hover .avart-l-img img{transform:scale(1.05)}
.avart-l-tx{display:flex;flex-direction:column;gap:8px;padding:18px 4px 0;flex:1}
.avart-l-tx small{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ava[dir=rtl] .avart-l-tx small{letter-spacing:0;font-size:13px}
.avart-l-tx b{font-family:"Sora",sans-serif;font-size:19px;line-height:1.3}
.ava[dir=rtl] .avart-l-tx b{font-family:inherit}
.avart-l-btn{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:6px;font-size:14px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:2px}
.avart-l-btn .avs-i{width:15px;height:15px}

/* ── preuve laboratoire ── */
.avart-preuve{position:relative;margin-top:110px;overflow:hidden;background:var(--deep);color:#fff}
.avart-preuve-bg{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;opacity:.55}
.avart-preuve::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,41,53,.92) 0%,rgba(4,41,53,.55) 60%,rgba(4,41,53,.2));z-index:1}
.ava[dir=rtl] .avart-preuve::before{background:linear-gradient(270deg,rgba(4,41,53,.92) 0%,rgba(4,41,53,.55) 60%,rgba(4,41,53,.2))}
.avart-preuve .ava-wrap{position:relative;z-index:2}
.avart-preuve-tx{max-width:620px;padding:84px 0}
.avart-preuve .ava-kick{color:rgba(255,255,255,.7)}
.avart-preuve b{display:block;font-family:"Sora",sans-serif;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.02em;margin-top:12px}
.ava[dir=rtl] .avart-preuve b{font-family:inherit;letter-spacing:0;line-height:1.4}
.avart-preuve p{margin:14px 0 0!important;font-size:16.5px;color:rgba(255,255,255,.82)}

/* barre de progression de lecture */
.avart-prog{position:fixed;top:0;inset-inline-start:0;height:3px;width:var(--p,0%);background:var(--sd);z-index:100002;transition:width .1s linear}

@media (max-width:1080px){
  .avart-corps{grid-template-columns:minmax(0,740px);gap:0}
  .avart-side{display:none}
  .avart-toc-m{display:block;margin:0 0 40px;border:1px solid var(--line);border-radius:18px;background:#fff}
  .avart-toc-m summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-weight:700;cursor:pointer}
  .avart-toc-m summary::-webkit-details-marker{display:none}
  .avart-toc-m summary .avs-i{width:18px;height:18px;transition:transform .25s}
  .avart-toc-m[open] summary .avs-i{transform:rotate(180deg)}
  .avart-toc-m ol{margin:0!important;padding:0 12px 14px!important;display:flex;flex-direction:column}
  .avart-toc-m li{list-style:none}
  .avart-toc-m a{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:9px 8px;font-size:14.5px;line-height:1.4;color:#3d3433!important;border-top:1px solid var(--line)}
  .avart-toc-m a em{font:700 14px/1.4 "Sora",sans-serif;font-style:normal;color:var(--sd)}
  .avart-sel-g{grid-template-columns:repeat(min(var(--cols,4),3),minmax(0,1fr))}
  .avart-faq-in{grid-template-columns:minmax(0,1fr)}
  .avart-faq-img{display:none}
}
@media (max-width:900px){
  .avart-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .avart-hero-img{aspect-ratio:4/3}
  .avart-hero-tx{padding:26px 16px 30px}
  .avart .avb-ariane{margin-bottom:18px!important}
  .avart .avb-ariane b{max-width:22ch}
}
@media (max-width:700px){
  .avart-hero h1{font-size:30px}
  .avart-chapo{font-size:17px}
  .avart-meta>span+span::before{margin-inline:10px}
  .avart-corps{padding-top:32px}
  .avart-ess{padding:20px 18px;border-radius:18px;margin-bottom:24px}
  .avart-ess li{font-size:15.5px}
  .avart-prose{font-size:16.5px}
  .avart-prose>h2{margin-top:48px!important}
  .avart-n{font-size:36px;margin-bottom:8px}
  .avart-prose .ava-conseil{padding:20px 18px!important}
  .avart-sel{margin-top:64px;padding:48px 0}
  .avart-sel-hd{text-align:start;margin-bottom:22px}
  .avart-sel-g,.avart-sel-g.is-peu{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px!important;padding-inline:16px!important;justify-content:start}
  .avart-sel-g li{scroll-snap-align:start}
  .avart-sel-g,.avart-lies-g{contain:paint}
  .avart-sel-g.is-peu{grid-auto-columns:78%}
  .avart-faq{padding-top:64px}
  .avart-faq summary{font-size:15.5px}
  .avart-fin{margin-top:64px;padding:28px 22px;border-radius:22px}
  .avart-lies{padding-top:64px}
  .avart-lies-g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .avart-lies-g a{scroll-snap-align:start}
  .avart-preuve{margin-top:72px}
  .avart-preuve::before{background:rgba(4,41,53,.82)!important}
  .avart-preuve-tx{padding:56px 0}
}