/* ==========================================================================
   AVISCHECK — Styles de pages (hero, offre, boutique, widget, demo marchand)
   ========================================================================== */

/* ---------- Hero accueil ---------- */
.hero{position:relative; padding:clamp(46px,6vw,86px) 0 clamp(56px,7vw,96px); overflow:hidden}
.hero::after{
  content:""; position:absolute; right:-12%; top:-30%; width:60vw; height:60vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle at 50% 50%, rgba(217,168,60,.20), rgba(217,168,60,0) 62%);
  pointer-events:none; z-index:0;
}
.hero__in{position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(30px,4vw,64px); align-items:center}
.hero h1{margin-bottom:24px; letter-spacing:-.035em}
.hero h1 .ital{color:var(--gold)}
.hero__lead{max-width:52ch; margin-bottom:32px}
.hero__cta{display:flex; flex-wrap:wrap; gap:13px; align-items:center}
.hero__note{display:flex; align-items:center; gap:10px; margin-top:26px; font-size:.82rem; color:var(--ink-3)}
.hero__note .stars{font-size:13px}

/* Carte de preuve (mini-widget dans le hero) */
.proof{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--sh-3); position:relative;
}
.proof__hd{display:flex; align-items:center; gap:13px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.proof__logo{
  width:44px; height:44px; border-radius:11px; background:var(--forest); color:var(--gold-2);
  display:grid; place-items:center; font-family:var(--f-display); font-size:1.2rem; font-weight:700; flex:none;
}
.proof__name{font-weight:800; font-size:.98rem; letter-spacing:-.02em}
.proof__url{font-size:.76rem; color:var(--ink-3)}
.proof__score{display:flex; align-items:center; gap:16px; padding:20px 0}
.proof__foot{border-top:1px solid var(--line); padding-top:15px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.proof__seal-tag{display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold)}
.proof__float{
  position:absolute; left:-26px; bottom:-24px; background:var(--forest); color:var(--paper);
  border-radius:var(--r); padding:14px 18px; box-shadow:var(--sh-3); max-width:230px;
  border:1px solid rgba(251,247,239,.14);
}
.proof__float p{font-size:.78rem; color:rgba(251,247,239,.8); margin:0; line-height:1.45}
.proof__float strong{color:var(--gold-2)}

/* ---------- Ruban de garanties ---------- */
.pledge{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark)}
.pledge__i{background:var(--forest); padding:34px 30px}
.pledge__i h3{font-size:1.18rem; margin-bottom:8px}
.pledge__i p{font-size:.9rem; margin:0}
.pledge__k{font-family:var(--f-mono); font-size:.68rem; color:var(--gold-2); letter-spacing:.14em; display:block; margin-bottom:14px}

/* ---------- Parcours en 4 temps ---------- */
.flowline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.flowline::before{
  content:""; position:absolute; top:23px; left:6%; right:6%; height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 14px);
}
.flow{position:relative; z-index:1}
.flow__n{
  width:46px; height:46px; border-radius:50%; background:var(--paper); border:1px solid var(--line-2);
  display:grid; place-items:center; font-family:var(--f-display); font-size:1.05rem; font-weight:700;
  margin-bottom:20px; transition:.25s;
}
.flow:hover .flow__n{background:var(--gold); border-color:var(--gold); color:#1B1403; transform:scale(1.06)}
.flow h4{margin-bottom:7px; font-size:1.02rem}
.flow p{font-size:.885rem; color:var(--ink-3); margin:0}
.flow__t{font-family:var(--f-mono); font-size:.66rem; color:var(--gold); letter-spacing:.1em; display:block; margin-top:10px}

/* ---------- Manifeste (section sombre a deux colonnes) ---------- */
.manifest{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-lg); overflow:hidden}
.manifest__col{background:var(--forest); padding:clamp(28px,3.4vw,44px)}
.manifest__col:last-child{background:var(--forest-2)}
.manifest__col h3{font-size:1.32rem; margin-bottom:22px; display:flex; align-items:center; gap:11px}

/* ---------- Cartes de tarifs ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.plan{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px;
  display:flex; flex-direction:column; transition:.25s; position:relative;
}
.plan:hover{border-color:var(--line-2); box-shadow:var(--sh-2)}
.plan--feat{background:var(--forest); border-color:var(--forest); color:var(--paper-2); box-shadow:var(--sh-3)}
.plan--feat h3{color:var(--paper)}
.plan--feat .plan__desc{color:rgba(251,247,239,.7)}
.plan--feat .plan__price{color:var(--paper)}
.plan--feat .list-check li{color:rgba(251,247,239,.8)}
.plan--feat .list-check li::before{background-color:rgba(217,168,60,.16); border-color:rgba(217,168,60,.3)}
.plan--feat .plan__sep{background:var(--line-dark)}
.plan__tag{position:absolute; top:-11px; left:28px; background:var(--gold); color:#1B1403; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pill)}
.plan h3{font-size:1.24rem; margin-bottom:6px}
.plan__desc{font-size:.87rem; color:var(--ink-3); margin-bottom:22px; min-height:44px}
.plan__price{font-family:var(--f-display); font-size:2.9rem; line-height:1; letter-spacing:-.04em; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 80}
.plan__price small{font-size:.28em; font-family:var(--f-text); color:var(--ink-3); font-weight:600; letter-spacing:0}
.plan--feat .plan__price small{color:rgba(251,247,239,.6)}
.plan__sep{height:1px; background:var(--line); margin:24px 0}
.plan .btn{margin-top:auto; width:100%}
.plan .list-check{margin-bottom:26px}

/* ---------- Annuaire ---------- */
.searchbar{display:flex; gap:10px; background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:7px 7px 7px 20px; align-items:center; max-width:620px}
.searchbar input{flex:1; border:0; background:none; outline:0; font-size:.95rem; min-width:0}
.searchbar input::placeholder{color:var(--ink-4)}

.shoprow{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:20px; align-items:center;
  padding:20px 22px; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  transition:.2s; margin-bottom:12px;
}
.shoprow:hover{border-color:var(--gold); transform:translateX(3px)}
.shoprow__logo{
  width:50px; height:50px; border-radius:12px; display:grid; place-items:center; flex:none;
  font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:var(--paper);
}
.shoprow__name{font-weight:800; font-size:1rem; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.shoprow__cat{font-size:.78rem; color:var(--ink-3); margin-top:2px}
.shoprow__score{text-align:right}
.shoprow__n{font-family:var(--f-display); font-size:1.5rem; line-height:1; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40}
.shoprow__c{font-size:.73rem; color:var(--ink-3); margin-top:3px; display:block}

/* ---------- Fiche boutique ---------- */
.shop-hero{background:var(--forest); color:var(--paper-2); padding:clamp(30px,4vw,44px) 0 clamp(38px,5vw,56px); position:relative; overflow:hidden}
.shop-hero::after{
  content:""; position:absolute; right:-8%; top:-40%; width:52vw; height:52vw; max-width:760px;
  background:radial-gradient(circle,rgba(217,168,60,.16),transparent 62%); pointer-events:none;
}
.shop-hero__in{position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:36px; align-items:flex-end}
.shop-id{display:flex; gap:20px; align-items:flex-start}
.shop-id__logo{
  width:78px; height:78px; border-radius:18px; background:var(--paper); color:var(--forest); flex:none;
  display:grid; place-items:center; font-family:var(--f-display); font-size:2rem; font-weight:700;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 60;
}
.shop-id h1{font-size:clamp(2.1rem,4vw,3.1rem); margin-bottom:10px; color:var(--paper)}
.shop-id__meta{display:flex; flex-wrap:wrap; gap:9px 18px; align-items:center; font-size:.86rem; color:rgba(251,247,239,.7)}
.shop-id__meta a{color:var(--gold-2); border-bottom:1px solid rgba(217,168,60,.4)}
.shop-score{
  background:rgba(251,247,239,.06); border:1px solid var(--line-dark-2); border-radius:var(--r-lg);
  padding:22px 26px; text-align:center; min-width:230px; backdrop-filter:blur(6px);
}
.shop-score__n{font-family:var(--f-display); font-size:3.4rem; line-height:.9; color:var(--paper); font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 100; letter-spacing:-.04em}
.shop-score__n span{font-size:.3em; color:rgba(251,247,239,.55)}
.shop-score__c{font-size:.79rem; color:rgba(251,247,239,.66); margin-top:10px}

.shop-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tab{
  padding:16px 18px; font-size:.9rem; font-weight:700; color:var(--ink-3); background:none; border:0;
  border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; transition:.18s; margin-bottom:-1px;
}
.shop-tab:hover{color:var(--ink)}
.shop-tab.is-on{color:var(--ink); border-bottom-color:var(--gold)}

.shop-layout{display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,4vw,56px); align-items:start}
/* Variantes : à définir en classe et jamais en style en ligne, faute de quoi
   la bascule en une colonne du media query ne peut plus s'appliquer. */
.shop-layout--aside{grid-template-columns:1fr 320px}
.shop-layout--aside-lg{grid-template-columns:1fr 340px}
.shop-layout--toc{grid-template-columns:250px 1fr}
.shop-side{position:sticky; top:98px}
.side-box{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:18px}
.side-box h4{font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px}

.filters{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:6px; padding:16px 0}
.filters__l{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.filters__r{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0}
.filters__r .searchbar{flex:1 1 180px; min-width:0}
.filters .sel{width:auto; flex:0 0 auto; padding:9px 38px 9px 14px; font-size:.85rem; border-radius:var(--r-pill)}

.pager{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap}
.pager button{
  min-width:40px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--white); font-size:.87rem; font-weight:700; cursor:pointer; transition:.16s; color:var(--ink-2);
}
.pager button:hover:not(:disabled){border-color:var(--ink); color:var(--ink)}
.pager button.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pager button:disabled{opacity:.35; cursor:not-allowed}
.pager__gap{color:var(--ink-4); padding:0 4px}

.empty{padding:56px 20px; text-align:center; color:var(--ink-3); border:1px dashed var(--line-2); border-radius:var(--r)}

/* ---------- Demo widget ---------- */
.browser{
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; background:var(--white);
  box-shadow:var(--sh-3);
}
.browser__bar{display:flex; align-items:center; gap:9px; padding:12px 16px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.browser__dot{width:10px; height:10px; border-radius:50%; background:var(--line-2)}
.browser__url{
  flex:1; margin-left:10px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:5px 14px; font-size:.75rem; color:var(--ink-3); font-family:var(--f-mono); display:flex; align-items:center; gap:7px;
}
.browser__body{position:relative; min-height:380px; background:var(--paper); overflow:hidden}

/* ---------- Site demo Moelio ---------- */
.mo-top{background:#1E1B16; color:#F5F0E6; font-size:.76rem; text-align:center; padding:9px 16px; letter-spacing:.05em}
.mo-hdr{position:sticky; top:0; z-index:60; background:rgba(255,253,249,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.mo-hdr__in{display:flex; align-items:center; gap:28px; height:70px}
.mo-logo{font-family:var(--f-display); font-size:1.5rem; font-weight:600; letter-spacing:-.04em; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40}
.mo-nav{display:flex; gap:22px; font-size:.87rem; font-weight:600; color:var(--ink-2)}
.mo-nav a:hover{color:var(--gold)}
.mo-hero{padding:clamp(40px,5vw,72px) 0; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.mo-hero h1{font-size:clamp(2.4rem,5vw,3.8rem)}
.mo-visual{aspect-ratio:4/3; border-radius:var(--r-lg); background:linear-gradient(150deg,#E4D8C4,#CDBBA0); position:relative; overflow:hidden; border:1px solid var(--line)}
.mo-prod{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.mo-card{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--white); transition:.22s}
.mo-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.mo-card__img{aspect-ratio:1/1; display:grid; place-items:center; font-size:2rem}
.mo-card__b{padding:14px 16px 18px}
.mo-card__t{font-weight:700; font-size:.9rem; letter-spacing:-.01em}
.mo-card__p{font-family:var(--f-display); font-size:1.12rem; margin-top:6px; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 30}
.mo-ftr{background:#1E1B16; color:rgba(245,240,230,.7); padding:44px 0; font-size:.85rem; margin-top:60px}
.mo-ftr__grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px}
.mo-ftr__grid > *{min-width:0}
@media (max-width:900px){ .mo-ftr__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .mo-ftr__grid{grid-template-columns:1fr; gap:26px} }

/* ---------- Reclamation : etat de succes ---------- */
.success{text-align:center; padding:clamp(40px,6vw,80px) 0; max-width:600px; margin:0 auto}
.success__ico{width:82px; height:82px; margin:0 auto 26px; border-radius:50%; background:var(--gold-wash); border:1px solid rgba(176,128,31,.3); display:grid; place-items:center; color:var(--gold)}
.ref-box{
  display:inline-flex; align-items:center; gap:12px; padding:14px 22px; background:var(--paper-2);
  border:1px dashed var(--line-2); border-radius:var(--r); font-family:var(--f-mono); font-size:1rem;
  letter-spacing:.06em; margin:20px 0 28px; color:var(--ink);
}

/* ---------- Frise chronologique ---------- */
.tl{list-style:none; margin:0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:13px; top:8px; bottom:8px; width:1px; background:var(--line-2)}
.tl li{position:relative; padding:0 0 26px 46px}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:""; position:absolute; left:6px; top:6px; width:15px; height:15px; border-radius:50%;
  background:var(--paper); border:2px solid var(--gold); z-index:1;
}
.tl__t{font-weight:700; font-size:.95rem; margin-bottom:3px}
.tl__d{font-size:.87rem; color:var(--ink-3); margin:0}
.tl__w{font-family:var(--f-mono); font-size:.68rem; color:var(--gold); letter-spacing:.1em; display:block; margin-bottom:5px}
.dark .tl::before{background:var(--line-dark-2)}
.dark .tl li::before{background:var(--forest); border-color:var(--gold-2)}
.dark .tl__d{color:rgba(251,247,239,.7)}

/* ---------- Bloc juridique ---------- */
.law{
  background:var(--white); border:1px solid var(--line); border-left:2px solid var(--forest-3);
  border-radius:0 var(--r) var(--r) 0; padding:24px 26px; margin-bottom:16px;
}
.law__ref{font-family:var(--f-mono); font-size:.7rem; color:var(--forest-3); letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:9px}
.law h4{font-size:1.06rem; margin-bottom:8px}
.law p{font-size:.9rem; color:var(--ink-2); margin-bottom:0}
.law__quote{margin-top:14px; padding:14px 16px; background:var(--paper-2); border-radius:var(--r-sm); font-size:.855rem; font-style:italic; color:var(--ink-2); border-left:2px solid var(--line-2)}

/* ---------- CTA final ---------- */
.finale{background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:clamp(38px,5vw,68px); text-align:center; position:relative; overflow:hidden}
.finale::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 120%,rgba(217,168,60,.28),transparent 58%); pointer-events:none;
}
.finale > *{position:relative; z-index:1}
.finale h2{color:var(--paper); max-width:18ch; margin-inline:auto; margin-bottom:18px}
.finale p{color:rgba(251,247,239,.72); max-width:52ch; margin-inline:auto; margin-bottom:30px}
.finale__cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}

/* ---------- Reactif pages ---------- */
@media (max-width:960px){
  .hero__in{grid-template-columns:1fr; gap:44px}
  .flowline{grid-template-columns:repeat(2,1fr); gap:32px}
  .flowline::before{display:none}
  .manifest{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr; gap:18px}
  .pledge{grid-template-columns:1fr}
  .shop-layout,
  .shop-layout--aside,
  .shop-layout--aside-lg,
  .shop-layout--toc{grid-template-columns:1fr}
  .shop-side{position:static}
  .sommaire{position:static}
  .shop-hero__in{grid-template-columns:1fr; align-items:flex-start}
  .mo-hero{grid-template-columns:1fr}
  .mo-prod{grid-template-columns:repeat(2,1fr)}
  .mo-nav{display:none}
}
@media (max-width:640px){
  .flowline{grid-template-columns:1fr}
  .shoprow{grid-template-columns:auto 1fr; gap:14px}
  .shoprow__score{grid-column:2; text-align:left}
  .shoprow .btn{grid-column:2; justify-self:start}
  .proof__float{left:0; bottom:-18px; max-width:200px}
  .shop-score{min-width:0; width:100%}
}