/* =========================================================================
   AVIS RESELL PRO — feuille de style partagée (mobile-first)
   Points de rupture : base < 600px, >= 600px, >= 900px, >= 1180px
   Palette inspirée de Trustpilot : vert #00B67A, encre #191919, fond crème.
   ========================================================================= */

:root{
  --accent:#00B67A;        /* vert Trustpilot — une seule valeur à changer */
  --accent-dark:#007D54;   /* version foncée, lisible en texte sur fond clair */
  --accent-soft:#E3F6EE;
  --ink:#191919;
  --ink-70:#454545;
  --ink-50:#6b6b6b;
  --line:#e3e1d9;
  --line-soft:#eeece5;
  --bg:#ffffff;
  --bg-soft:#F7F6F1;
  --deep:#0E3B2C;          /* vert profond des bandeaux */
  --radius:16px;
  --max:1180px;
  --pad:18px;
  --gap:16px;
  --sec:56px;
  --hdr:62px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p a,li a,.link{color:var(--accent-dark);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad);}

/* ---------- typographie */
h1,h2,h3{font-weight:800;letter-spacing:-0.025em;margin:0;line-height:1.12;}
strong{font-weight:700;}
.hl{color:var(--accent-dark);background:linear-gradient(transparent 62%,var(--accent-soft) 62%);padding:0 .08em;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--accent-dark);background:var(--accent-soft);border-radius:99px;padding:6px 14px;margin-bottom:18px;}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);}
.sec-head{max-width:720px;margin:0 0 34px;}
.sec-rule{display:none;}
.kicker{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px;}
.sec-head h2{font-size:clamp(25px,6vw,40px);}
.sec-head p{margin:12px 0 0;color:var(--ink-70);font-size:16px;}

section{padding:var(--sec) 0;}
.alt{background:var(--bg-soft);}

/* ---------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:52px;padding:14px 26px;font:inherit;font-size:15px;font-weight:800;
  text-align:center;line-height:1.3;
  border:2px solid var(--accent);border-radius:99px;background:var(--accent);color:var(--ink);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:#00a36d;border-color:#00a36d;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-sm{min-height:42px;padding:9px 20px;font-size:13.5px;}

/* ---------- en-tête */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);gap:16px;}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap;}
.brand::before{content:"✓";display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--accent);color:#fff;font-size:15px;}
.brand span{color:var(--accent-dark);}
.btn-head{display:none;width:auto;}
.burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;margin-right:-10px;background:none;border:0;cursor:pointer;}
.burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav{
  position:fixed;top:var(--hdr);left:0;right:0;display:flex;flex-direction:column;align-items:stretch;
  background:#fff;border-bottom:1px solid var(--line);padding:4px var(--pad) 22px;
  max-height:calc(100dvh - var(--hdr));overflow-y:auto;transform:translateY(-150%);transition:transform .28s ease;
}
.nav.open{transform:translateY(0);}
.nav a{padding:15px 0;font-size:15px;font-weight:600;color:var(--ink-70);border-bottom:1px solid var(--line-soft);}
.nav a:hover{color:var(--ink);}
.nav .btn{margin-top:18px;border-bottom:0;color:var(--ink);}

/* ---------- fil d'Ariane */
.crumbs{font-size:13px;color:var(--ink-50);padding-top:22px;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.crumbs li+li::before{content:"›";margin-right:6px;}
.crumbs a{text-decoration:underline;text-underline-offset:3px;}

/* ---------- hero */
.hero{padding-top:36px;padding-bottom:var(--sec);background:radial-gradient(1200px 500px at 85% -10%,var(--accent-soft),transparent 60%);}
.hero-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
.hero h1{font-size:clamp(31px,8vw,56px);}
.hero h1{max-width:900px;}
.hero .lead{margin:18px 0 0;font-size:17px;color:var(--ink-70);max-width:680px;}
.hero-ctas{display:flex;flex-direction:column;gap:10px;margin-top:28px;}
.note{font-size:13px;color:var(--ink-50);margin-top:14px;}

/* badges de confiance sous le hero */
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;font-weight:600;color:var(--ink-70);}
.trust li{display:flex;align-items:center;gap:8px;}
.trust li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:4px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;}

/* ---------- carte résumé (pages secondaires) */
.score{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:#fff;box-shadow:0 18px 50px -30px rgba(0,0,0,.35);border-top:5px solid var(--accent);}
.score-top{display:flex;align-items:center;gap:16px;}
.score-num{display:grid;place-items:center;min-width:64px;height:64px;padding:0 10px;border-radius:12px;background:var(--accent);color:#fff;font-size:24px;font-weight:800;line-height:1;}
.score-lbl{font-weight:800;font-size:16px;}
.score-sub{font-size:13px;color:var(--ink-50);}
.score ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;}
.score li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-70);}
.score li::before{content:"✓";color:var(--accent-dark);font-weight:800;}
.score .disc{margin:18px 0 0;font-size:12.5px;color:var(--ink-50);border-top:1px solid var(--line-soft);padding-top:14px;}

/* ---------- barre de chiffres */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px;}
.stat b{display:block;font-size:clamp(24px,6.4vw,34px);font-weight:800;color:var(--ink);letter-spacing:-.03em;}
.stat span{font-size:13px;color:var(--ink-50);}
.band{background:var(--deep);color:#fff;padding:34px 0;}
.band .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
.band .stat b{color:var(--accent);}
.band .stat span{color:rgba(255,255,255,.72);}

/* ---------- qui sommes-nous */
.about{display:grid;gap:34px;}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.fact{border-radius:var(--radius);padding:18px;background:var(--accent-soft);}
.fact b{display:block;font-size:21px;font-weight:800;color:var(--accent-dark);}
.fact span{font-size:13.5px;color:var(--ink-70);}
.prose p{margin:0 0 16px;color:var(--ink-70);}
.prose h3{font-size:19px;margin:26px 0 10px;}
.prose ul{color:var(--ink-70);padding-left:20px;}

/* ---------- cartes numérotées */
.cards{display:grid;grid-template-columns:1fr;gap:var(--gap);}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;background:#fff;transition:border-color .18s ease;}
.card:hover{border-color:var(--accent);}
.card .num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);font-size:13px;font-weight:800;color:var(--accent-dark);}
.card h3{font-size:18px;margin:14px 0 8px;}
.card p{margin:0;font-size:15px;color:var(--ink-70);}

/* ---------- témoignages (style carte d'avis) */
.reviews{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start;}
.review{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;display:flex;flex-direction:column;gap:10px;}
.review.hidden{display:none;}
.review-top{display:flex;align-items:center;gap:12px;}
.avatar{width:42px;height:42px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center;font-weight:800;}
.review-name{font-weight:800;font-size:15.5px;}
.review-tag{font-size:12.5px;color:var(--ink-50);}
.review-res{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.review p{margin:0;font-size:15px;color:var(--ink-70);}
.review blockquote{margin:0;font-size:15px;color:var(--ink-70);border-left:3px solid var(--accent);padding-left:12px;}
.review-shot{display:block;border-radius:10px;overflow:hidden;background:#111;aspect-ratio:4/3;}
.review-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s ease;}
.review-shot:hover img{transform:scale(1.03);}
.check{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent-dark);}
.check::before{content:"✓";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;}
.review-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line-soft);padding-top:10px;margin-top:2px;}
.more{text-align:center;margin-top:26px;}
.more .btn{width:auto;}

/* ---------- vidéos YouTube */
.videos{display:grid;grid-template-columns:1fr;gap:var(--gap);}
.video{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .18s ease,box-shadow .18s ease;}
.video:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(0,0,0,.45);}
.video-ph{aspect-ratio:16/9;background:#111;position:relative;overflow:hidden;}
.video-ph img{width:100%;height:100%;object-fit:cover;}
.video-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-ph::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:12px;background:#ff0033 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none;}
.video-ph.playing::after{display:none;}
.video-body{padding:16px 18px 18px;}
.video-body .kicker{margin-bottom:6px;font-size:11.5px;}
.video-body b{display:block;font-size:17px;line-height:1.3;}
.video-body span{display:block;font-size:13.5px;color:var(--ink-50);margin-top:6px;}
.video-feat{grid-column:1/-1;}

/* ---------- mur de captures */
.wall{columns:2;column-gap:10px;}
.wall a{display:block;break-inside:avoid;margin:0 0 10px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#111;}
.wall a.hidden{display:none;}
.wall img{width:100%;height:auto;}

/* ---------- résultats */
.results{display:grid;gap:var(--gap);}
.result{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:#fff;}
.result b{display:block;font-size:clamp(30px,8vw,44px);font-weight:800;color:var(--accent-dark);letter-spacing:-.03em;}
.result span{font-size:14.5px;color:var(--ink-70);}
.caveat{max-width:760px;margin:26px 0 0;font-size:14px;color:var(--ink-70);background:#fff;border:1px dashed var(--line);border-radius:12px;padding:14px 16px;}

/* ---------- BLC Import (bandeau dédié) */
.blc{background:var(--deep);color:#fff;}
.blc .sec-head p,.blc .prose p{color:rgba(255,255,255,.78);}
.blc .kicker{color:var(--accent);}
.blc .prose strong{color:#fff;}
.blc .prose a{color:var(--accent);}
.blc-grid{display:grid;gap:30px;}
.blc-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px;}
.blc-facts div{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px;}
.blc-facts b{display:block;font-size:20px;color:var(--accent);}
.blc-facts span{font-size:13px;color:rgba(255,255,255,.72);}
.brands{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;}
.brands li{border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:6px 14px;font-size:13.5px;font-weight:700;}
.blc .table-wrap{border-color:rgba(255,255,255,.14);}
.blc .reviews{margin-top:34px;}
.blc .review{color:var(--ink);}
.blc-cta{display:flex;flex-direction:column;gap:12px;margin-top:30px;align-items:flex-start;}
.blc-cta .btn{width:auto;}
.coupon{font-size:14px;color:rgba(255,255,255,.78);}
.coupon code{font-family:inherit;font-weight:800;color:#fff;background:rgba(255,255,255,.1);border:1px dashed var(--accent);border-radius:6px;padding:3px 8px;}

/* ---------- tableau marges */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin-top:26px;}
table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;color:var(--ink);}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-50);}
tr:last-child td{border-bottom:0;}
td b{color:var(--accent-dark);}

/* ---------- à savoir */
.know{display:grid;gap:var(--gap);}
.know-col{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:#fff;}
.know-col h3{font-size:18px;margin-bottom:14px;}
.know-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.know-col li{display:flex;gap:10px;font-size:15px;color:var(--ink-70);}
.know-col.pos li::before{content:"✓";color:var(--accent-dark);font-weight:800;}
.know-col.neg li::before{content:"!";color:#c2410c;font-weight:800;width:10px;flex:none;text-align:center;}

/* ---------- FAQ */
.faq{max-width:840px;display:grid;gap:10px;}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;}
.faq details[open]{border-color:var(--accent);}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:700;font-size:15.5px;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center;font-size:18px;font-weight:700;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 20px 18px;color:var(--ink-70);font-size:15px;}
.faq .ans p{margin:0;}

/* ---------- liens internes */
.links{display:grid;grid-template-columns:1fr;gap:12px;}
.links a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff;font-weight:800;transition:border-color .18s ease;}
.links a::after{content:" →";color:var(--accent-dark);}
.links a:hover{border-color:var(--accent);}
.links a span{display:block;font-weight:400;font-size:13.5px;color:var(--ink-50);margin-top:4px;}

/* ---------- CTA final */
.final{background:var(--accent);color:var(--ink);text-align:center;}
.final h2{font-size:clamp(26px,6.4vw,44px);}
.final p{color:rgba(25,25,25,.8);max-width:620px;margin:16px auto 0;}
.final .btn{margin-top:28px;max-width:360px;background:var(--ink);border-color:var(--ink);color:#fff;}
.final .btn:hover{background:#000;border-color:#000;}
.final .note{color:rgba(25,25,25,.7);}

/* ---------- visionneuse de captures */
.lb{border:0;padding:0;background:transparent;max-width:min(92vw,900px);max-height:92vh;}
.lb::backdrop{background:rgba(10,20,15,.86);}
.lb img{max-width:100%;max-height:88vh;margin:auto;border-radius:10px;}
.lb button{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer;}

/* ---------- pied de page */
.ftr{padding:36px 0;font-size:13.5px;color:var(--ink-50);border-top:1px solid var(--line);background:var(--bg-soft);}
.ftr-in{display:grid;gap:18px;}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 18px;}
.ftr a:hover{color:var(--ink);}
.ftr .legal{font-size:12.5px;line-height:1.6;}

/* ========== >= 600px */
@media (min-width:600px){
  :root{--pad:28px;--gap:18px;--sec:72px;}
  .hero-ctas{flex-direction:row;flex-wrap:wrap;}
  .hero-ctas .btn{width:auto;}
  .stats{grid-template-columns:repeat(4,1fr);}
  .facts{grid-template-columns:repeat(2,1fr);}
  .cards,.reviews,.videos,.links{grid-template-columns:repeat(2,1fr);}
  .results{grid-template-columns:repeat(2,1fr);}
  .wall{columns:3;}
  .blc-facts{grid-template-columns:repeat(4,1fr);}
}

/* ========== >= 900px */
@media (min-width:900px){
  :root{--sec:92px;--hdr:70px;}
  .burger{display:none;}
  .btn-head{display:inline-flex;}
  .nav{position:static;flex-direction:row;align-items:center;gap:22px;padding:0;background:none;border:0;transform:none;max-height:none;overflow:visible;}
  .nav a{padding:0;border:0;font-size:14px;}
  .nav .btn{display:none;}
  .hero-grid{grid-template-columns:1.2fr 1fr;gap:56px;}
  .about{grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;}
  .cards,.reviews,.videos{grid-template-columns:repeat(3,1fr);}
  .video-feat{grid-column:span 2;grid-row:span 2;}
  .video-feat .video-body b{font-size:22px;}
  .know{grid-template-columns:1fr 1fr;}
  .links{grid-template-columns:repeat(4,1fr);}
  .wall{columns:4;}
  .blc-grid{grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}
  .blc .table-wrap{margin-top:0;}
  .ftr-in{grid-template-columns:1fr auto;align-items:center;}
}

@media (min-width:1180px){
  :root{--pad:32px;}
  .wall{columns:5;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

@media (min-width:1180px){
  .reviews.four{grid-template-columns:repeat(4,1fr);}
}
