/*====================================================
GoVitrineo
Optimisation Google PageSpeed
=====================================================*/

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:#f7f9fc;
  color:#111827;
  line-height:1.7;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

a{
  text-decoration:none;
}

.container{
  width:min(1320px,92%);
  margin:auto;
}

/* Accessibilité : focus clavier visible */
a:focus-visible,
button:focus-visible{
  outline:3px solid #2456d7;
  outline-offset:3px;
  border-radius:6px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/*==================================
HEADER
==================================*/

header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #edf0f5;
}

nav{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  font-size:18px;
  font-weight:600;
  color:#374151;
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  line-height:1;
}

.logo span{ color:#374151; }

.logo-mark{
  width:32px;
  height:32px;
  border-radius:8px;
  background:#2456d7;
  color:#ffffff !important;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:700;
  flex-shrink:0;
}

nav ul{
  display:flex;
  gap:40px;
  list-style:none;
}

nav ul a{
  color:#4b5563;
  font-weight:600;
  transition:.25s;
}

nav ul a:hover{
  color:#2456d7;
}

.btn-nav{
  padding:14px 24px;
  background:#2456d7;
  color:#fff;
  border-radius:12px;
  font-weight:700;
  transition:.3s;
}

.btn-nav:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 35px rgba(36,86,215,.25);
}

/*==================================
HERO
==================================*/

.hero{
  position:relative;
  padding:70px 0 120px;
}

.hero-background{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 45%),
    radial-gradient(circle at bottom left,#eff6ff 0%,transparent 45%);
  z-index:-1;
}

.hero-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
  align-items:start;
}

.hero-left{
  padding-top:20px;
}

.badge{
  display:inline-flex;
  padding:12px 22px;
  background:#eaf2ff;
  color:#1e46b0;
  border-radius:999px;
  font-weight:700;
  margin-bottom:28px;
}

.hero h1{
  font-size:clamp(22px,2.3vw,32px);
  font-weight:900;
  line-height:1.16;
  margin-bottom:24px;
  letter-spacing:-.4px;
}

.hero p{
  font-size:20px;
  color:#5b6472;
  max-width:700px;
}

.hero-buttons{
  display:flex;
  gap:20px;
  margin-top:45px;
  flex-wrap:wrap;
}

.btn-primary{
  padding:18px 34px;
  background:#2456d7;
  color:#fff;
  font-weight:700;
  border-radius:14px;
  transition:.3s;
}

.btn-primary:hover{
  transform:translateY(-5px);
  box-shadow:0 25px 45px rgba(36,86,215,.28);
}

.btn-secondary{
  padding:18px 34px;
  border:2px solid #2456d7;
  border-radius:14px;
  font-weight:700;
  color:#2456d7;
  transition:.3s;
}

.btn-secondary:hover{
  background:#2456d7;
  color:#fff;
}

.hero-right img{
  border-radius:28px;
  box-shadow:0 45px 90px rgba(0,0,0,.18);
}

.hero-capture{
  width:100%;
  max-width:540px;
  height:auto;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(36,86,215,.18);
  display:block;
  margin-top:4px;
}

.hero-infos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:70px;
}

.hero-infos div{
  background:#fff;
  padding:28px;
  border-radius:20px;
  box-shadow:0 20px 45px rgba(0,0,0,.05);
  text-align:center;
  transition:.3s;
}

.hero-infos div:hover{
  transform:translateY(-8px);
}

.hero-infos strong{
  display:block;
  font-size:42px;
  font-weight:900;
  color:#158a3a;
  margin-bottom:10px;
}

.hero-infos span{
  font-weight:700;
  color:#5f6368;
}

/*==================================
SECTION TITLES
==================================*/

.section-title{
  text-align:center;
  max-width:800px;
  margin:0 auto 70px;
}

.section-title h2{
  font-size:46px;
  font-weight:900;
  margin-bottom:18px;
}

.section-title p{
  font-size:20px;
  color:#6b7280;
}

/*==================================
TRUST
==================================*/

.trust{
  padding:110px 0;
  background:#f7faff;
}

.trust > .container > h2{
  text-align:center;
  font-size:46px;
  font-weight:900;
  margin-bottom:18px;
}

.trust > .container > p{
  text-align:center;
  max-width:800px;
  margin:0 auto 56px;
  font-size:20px;
  color:#6b7280;
}

.trust-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:980px;
  margin:0 auto;
}

.trust-card{
  background:#fff;
  border-radius:20px;
  padding:36px 32px;
  box-shadow:0 8px 30px rgba(0,0,0,.07);
  transition:.35s;
}
.trust-card:hover{ transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.12); }

.trust-icon{
  width:58px; height:58px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:18px;
}

.trust-score{
  font-size:60px; font-weight:900; line-height:1;
  margin-bottom:12px; font-family:Georgia,serif;
}

.trust-card h3{
  font-size:20px; font-weight:800; color:#111827; margin-bottom:10px;
}

.trust-card p{ color:#6b7280; font-size:16px; line-height:1.7; }

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.card{
  background:#fff;
  padding:45px 35px;
  border-radius:24px;
  box-shadow:0 18px 45px rgba(0,0,0,.05);
  transition:.35s;
}

.card:hover{
  transform:translateY(-8px);
}

.number{
  font-size:72px;
  font-weight:900;
  color:#158a3a;
  line-height:1;
}

.card h3{
  margin:22px 0 15px;
  font-size:28px;
}

.card p{
  color:#6b7280;
}

/*==================================
FEATURES
==================================*/

.features{
  padding:120px 0;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.features article{
  background:#fff;
  padding:40px;
  border-radius:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.05);
  transition:.35s;
}

.features article:hover{
  transform:translateY(-10px);
}

.icon{
  width:72px;
  height:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  background:#eef4ff;
  margin-bottom:25px;
}

.features h3{
  font-size:28px;
  margin-bottom:15px;
}

.features p{
  color:#6b7280;
}

/*====================================================
PRÉSENTATION + POURQUOI (contenu éditorial)
====================================================*/

.intro{ padding:100px 0; background:#f7faff; }
.intro-text{ max-width:830px; margin:0 auto; }
.intro-text h2{
  font-size:clamp(28px,3.2vw,40px); font-weight:900; text-align:center;
  letter-spacing:-.5px; margin-bottom:30px; color:#111827;
}
.intro-text p{ font-size:18px; color:#5b6472; margin-bottom:20px; }
.intro-text strong{ color:#111827; }

.checklist{
  list-style:none; display:grid; grid-template-columns:repeat(2,1fr);
  gap:16px 32px; margin:30px 0;
}
.checklist li{ display:flex; align-items:center; gap:12px; font-weight:700; color:#111827; font-size:17px; }
.checklist li::before{
  content:"✔"; display:grid; place-items:center; width:28px; height:28px; flex-shrink:0;
  border-radius:50%; background:#e7f9ef; color:#0a7d45; font-size:14px; font-weight:900;
}

.why{ padding:100px 0; background:#f0f4ff; }
.why-text{ max-width:830px; margin:0 auto; }
.why-text p{ font-size:18px; color:#5b6472; margin-bottom:18px; }
.why-list{ list-style:none; display:grid; gap:14px; margin:8px 0 26px; }
.why-list li{
  position:relative; padding-left:38px; font-size:17px; color:#374151; font-weight:500;
}
.why-list li::before{
  content:"✔"; position:absolute; left:0; top:1px; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%; background:#eaf2ff; color:#2456d7;
  font-size:13px; font-weight:900;
}

/*====================================================
RÉSULTATS (lignes alternées + grille de cartes)
====================================================*/

.results{
  padding:120px 0;
  background:#ffffff;
}
.results .container{ max-width:1160px; }

/* --- Lignes alternées --- */
.result-rows{ margin-bottom:80px; }
.result-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:56px 0;
  border-bottom:1px solid #eef1f6;
}
.result-row:first-child{ padding-top:0; }
.result-row:nth-child(even) .result-visual{ order:2; }

.result-visual{ display:block; }
.zoomable{
  display:block; width:100%; padding:0; border:none; background:none; cursor:zoom-in;
  border-radius:18px; overflow:hidden; transition:.35s;
}
.result-visual .zoomable{
  box-shadow:0 24px 60px rgba(0,0,0,.12);
  border:1px solid #eef1f6;
}
.result-visual .zoomable:hover{ transform:translateY(-6px); box-shadow:0 34px 80px rgba(0,0,0,.18); }
.zoomable img{ width:100%; display:block; }

.result-data .eyebrow{
  display:inline-block; color:#2456d7; font-weight:700; font-size:13px;
  letter-spacing:.4px; text-transform:uppercase; margin-bottom:12px;
}
.result-data h3{ font-size:32px; font-weight:900; margin-bottom:26px; letter-spacing:-.5px; }

.gauges{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:440px; }
.gauge{ text-align:center; }
.gauge svg{ width:78px; height:78px; margin:0 auto; }
.gauge-label{ display:block; margin-top:8px; font-size:12.5px; font-weight:600; color:#5f6472; }

/* --- Grille de cartes (21 suivantes) --- */
.results-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:44px;
  padding-top:20px;
}
.result-card{
  display:flex; flex-direction:column; gap:18px; text-align:left;
  padding:18px; border:1px solid #eef1f6; border-radius:20px; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.05); cursor:zoom-in; font-family:inherit;
  transition:.35s;
}
.result-card:hover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(0,0,0,.13); }
.result-card .thumb{
  position:relative; display:block; overflow:hidden; border-radius:14px;
  border:1px solid #eef1f6; background:#fff;
}
.result-card .thumb img{ width:100%; display:block; }

.result-card .zoom-ico{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(17,24,39,.72); color:#fff; display:grid; place-items:center; font-size:16px;
  opacity:0; transition:.3s;
}
.result-card:hover .zoom-ico{ opacity:1; }

.card-title{ font-size:19px; font-weight:800; color:#111827; }

.mini-scores{ display:flex; flex-wrap:wrap; gap:10px; }
.mini-scores .ms{
  display:inline-flex; align-items:baseline; gap:5px;
  background:#f5f7fb; border-radius:9px; padding:7px 13px; font-size:12.5px; color:#6b7280; font-weight:600;
}
.mini-scores .ms b{ font-size:15px; font-weight:800; }

/* --- Badge GoVitrineo (façon logo posé sur la vignette) --- */
.gv-badge{
  position:absolute; left:14px; top:14px;
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; padding:4px 11px 4px 4px; border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.14); font-size:13px; font-weight:800; color:#111827;
}
.gv-mark{
  width:26px; height:26px; border-radius:7px; background:#2456d7; color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:15px; font-family:Inter,sans-serif;
}

/*====================================================
GRILLE 21 CARTES — style Google Search Console
====================================================*/

.sc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:56px 40px;
  padding-top:16px;
}

.sc-card{
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:0;
  border:none;
  cursor:zoom-in;
  font-family:inherit;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
  background:#fff;
  transition:.3s;
}
.sc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(0,0,0,.13);
}
.sc-thumb{
  position:relative;
  overflow:hidden;
  background:#f5f7fa;
  border-bottom:1px solid #eef1f6;
}
.sc-thumb img{
  width:100%; display:block; transition:.4s;
}
.sc-card:hover .sc-thumb img{ transform:scale(1.03); }
.sc-zoom{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(17,24,39,.65); color:#fff;
  display:grid; place-items:center; font-size:14px;
  opacity:0; transition:.3s;
}
.sc-card:hover .sc-zoom{ opacity:1; }
.sc-info{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:16px; }
.sc-title{ font-size:17px; font-weight:700; color:#111827; line-height:1.3; margin:0; }
.sc-scores{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.sc-score{ display:flex; flex-direction:column; align-items:center; gap:4px; background:#f7f9fc; border-radius:10px; padding:10px 6px; }
.sc-num{ font-size:22px; font-weight:800; line-height:1; font-family:Georgia,serif; }
.sc-label{ font-size:10px; font-weight:600; color:#9ca3af; text-align:center; line-height:1.2; }

/* --- Lightbox (agrandissement au clic) --- */
.lightbox{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px;
  background:rgba(17,24,39,.86); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:min(1200px,94vw); max-height:88vh; border-radius:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.5); background:#fff;
}
.lightbox-close{
  position:absolute; top:20px; right:24px; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:none; font-size:28px; cursor:pointer; line-height:1;
  transition:.25s;
}
.lightbox-close:hover{ background:rgba(255,255,255,.28); }

/*====================================================
FAQ
====================================================*/

.faq{
  padding:120px 0;
}

.faq-list{
  max-width:860px;
  margin:0 auto;
  display:grid;
  gap:18px;
}

.faq-item{
  background:#fff;
  border:1px solid #eef1f6;
  border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.05);
  overflow:hidden;
}

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 30px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  font-size:20px;
  font-weight:700;
  color:#111827;
}

.faq-question .plus{
  position:relative;
  width:22px;
  height:22px;
  flex-shrink:0;
}

.faq-question .plus::before,
.faq-question .plus::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:3px;
  background:#2456d7;
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition:.3s;
}

.faq-question .plus::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.faq-item.open .plus::after{
  transform:translate(-50%,-50%) rotate(0);
  opacity:0;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease,padding .35s ease;
}

.faq-item.open .faq-answer{
  max-height:400px;
  padding:0 30px 28px;
}

.faq-answer p{
  color:#5b6472;
  font-size:17px;
}

/*====================================================
CTA
====================================================*/

.cta{
  padding:140px 0;
}

.cta-box{
  background:linear-gradient(135deg,#141d33,#1f2b4c);
  border-radius:35px;
  padding:90px;
  text-align:center;
  color:#fff;
  overflow:hidden;
  position:relative;
}

.cta-box::before{
  content:"100";
  position:absolute;
  right:-40px;
  bottom:-90px;
  font-size:320px;
  font-weight:900;
  opacity:.08;
  line-height:1;
}

.cta h2{
  font-size:54px;
  margin-bottom:25px;
  position:relative;
  color:#f4b740;
}

.cta p{
  max-width:720px;
  margin:auto;
  font-size:22px;
  color:rgba(255,255,255,.82);
  position:relative;
}

.cta .btn-primary{
  margin-top:45px;
  background:#fff;
  color:#141d33;
  display:inline-block;
  position:relative;
}

.cta .btn-primary:hover{
  box-shadow:0 25px 45px rgba(0,0,0,.2);
}

/*====================================================
FOOTER
====================================================*/

footer{
  background:#111827;
  padding:80px 0 40px;
  color:#d1d5db;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:60px;
}

.footer-brand .logo{
  color:#e5e7eb;
  display:inline-flex;
  margin-bottom:18px;
}
.footer-brand .logo .logo-mark{
  background:#2456d7;
}

.footer-brand p{
  max-width:420px;
}

footer h3{
  color:#fff;
  margin-bottom:20px;
  font-size:20px;
}

footer ul{
  list-style:none;
}

footer li{
  margin-bottom:14px;
}

footer a{
  color:#d1d5db;
  transition:.25s;
}

footer a:hover{
  color:#fff;
}

.copyright{
  margin-top:60px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:15px;
  color:#9aa3b2;
}

/*====================================================
ANIMATIONS
====================================================*/

@keyframes float{
  0%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
  100%{transform:translateY(0);}
}

.hero-right img,
.hero-right .hero-mockup{
  animation:float 5s ease-in-out infinite;
}

.hero-right .hero-mockup{
  width:100%;
  max-width:470px;
  height:auto;
  margin:0 auto;
  padding-top:8px;
  filter:drop-shadow(0 40px 70px rgba(36,86,215,.14));
}

/*====================================================
RESPONSIVE ADDITIONS
====================================================*/

/*====================================================
TABLETTE
====================================================*/

@media(max-width:1100px){
  .sc-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-capture{
    max-width:600px;
    margin:32px auto 0;
    border-radius:16px;
  }
  .hero-left p{
    margin:auto;
  }
  .hero-buttons{
    justify-content:center;
  }
  .hero-infos{
    grid-template-columns:repeat(2,1fr);
  }
  .trust-grid{ grid-template-columns:1fr; }
  .stats{
    grid-template-columns:repeat(2,1fr);
  }
  .features-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .result-row{
    grid-template-columns:1fr;
    gap:28px;
    padding:40px 0;
  }
  .result-row:nth-child(even) .result-visual{ order:0; }
  .gauges{ max-width:none; }
}

/*====================================================
SMARTPHONE
====================================================*/

@media(max-width:768px){
  .sc-grid{ grid-template-columns:1fr; }
  header{
    position:sticky;
  }
  nav{
    height:64px;
    padding:0 1rem;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
  }
  nav ul{
    display:none;
  }
  nav .btn-nav{ padding:10px 16px; font-size:0.85rem; }
  .hero{
    padding:40px 0 60px;
  }
  .hero h1{
    font-size:28px;
  }
  .hero p{
    font-size:16px;
  }
  .hero-infos{
    grid-template-columns:1fr;
  }
  .stats{
    grid-template-columns:1fr;
  }
  .features-grid{
    grid-template-columns:1fr;
  }

  .results-separator{ flex-direction:column; gap:16px; }
  .results-separator-inner{ min-width:auto; padding:22px 24px; }
  .section-title h2,
  .trust > .container > h2{
    font-size:34px;
  }
  .checklist{ grid-template-columns:1fr; }
  .intro, .why{ padding:70px 0; }
  .card{
    padding:35px;
  }
  .faq-question{
    font-size:18px;
    padding:22px;
  }
  .cta-box{
    padding:60px 30px;
  }
  .cta h2{
    font-size:38px;
  }
  .cta p{
    font-size:18px;
  }
}

/*====================================================
MOUVEMENT RÉDUIT
====================================================*/

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}