/* ═══════════════════════════════════════════
   PGE Informatique — Home one-page (design v5)
   Chargé UNIQUEMENT sur index.php (après design-system.css).
   Utilise les variables de design-system.css :
   --cream --cream-dark --green --green-dark --bg --bg-alt
   --bg-card --text --text-secondary --text-muted --border --radius-* --ease
   ═══════════════════════════════════════════ */

:root{
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --ink-2:var(--text-secondary);
  --muted:var(--text-muted);
  --line:var(--border);
}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--bg);color:var(--text);font-family:var(--font)}
.wrap{width:min(1232px,calc(100% - 48px));margin:0 auto}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── Barre de progression scroll ── */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:210;background:linear-gradient(90deg,var(--green),var(--green-dark))}

/* ═══ NAV glass ═══ */
.v5nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1232px,calc(100% - 48px));z-index:200;background:rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:0 20px 50px -30px rgba(26,23,20,.35);transition:all .5s var(--ease)}
.v5nav.is-scrolled{top:10px;background:rgba(250,248,244,.82)}
.v5nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 10px 0 22px}
.v5nav .brand{display:flex;align-items:center;gap:11px}
.v5nav .brand img{height:38px;width:auto}
.v5nav__links{display:flex;align-items:center;gap:2px}
.v5nav__link{padding:9px 16px;font-size:.85rem;font-weight:600;color:var(--ink-2);border-radius:999px;transition:all .2s var(--ease)}
.v5nav__link:hover{color:var(--text);background:rgba(26,23,20,.05)}
.v5nav__link.is-active{color:#fff;background:var(--green-dark)}
.v5nav__right{display:flex;align-items:center;gap:8px}
.v5nav .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.9rem;transition:all .3s var(--ease)}
.btn--green{background:var(--green);color:#fff !important;box-shadow:0 10px 24px -12px rgba(114,177,36,.6)}
.btn--green:hover{background:var(--green-dark);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text) !important;border:1.5px solid rgba(26,23,20,.18)}
.btn--ghost:hover{border-color:var(--green-dark);color:var(--green-dark) !important}
.v5burger{display:none;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text);padding:8px}
.v5mmenu{position:fixed;inset:0;z-index:190;background:rgba(250,248,244,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.v5mmenu.is-open{opacity:1;pointer-events:auto}
.v5mmenu a{font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--text);padding:10px 24px;border-radius:16px}
.v5mmenu a.is-active{color:var(--green-dark)}

/* ═══ Statut ouvert / fermé ═══ */
.openbadge{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;font-size:.82rem;font-weight:700}
.openbadge .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.openbadge--open{background:rgba(114,177,36,.12);border:1px solid rgba(114,177,36,.35);color:var(--green-dark)}
.openbadge--open .dot{background:var(--green);animation:pulse 2s infinite}
.openbadge--closed{background:rgba(26,23,20,.05);border:1px solid var(--line);color:var(--muted)}
.openbadge--closed .dot{background:var(--muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(114,177,36,.45)}70%{box-shadow:0 0 0 8px rgba(114,177,36,0)}100%{box-shadow:0 0 0 0 rgba(114,177,36,0)}}
.openbadge-slot{margin:0 0 20px}
.nav__status{padding:9px 15px;font-size:.8rem;font-weight:700;white-space:nowrap;margin-right:6px}

/* ═══ HERO ═══ */
.hero{position:relative;padding:128px 0 76px;overflow:hidden;background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 78%);color:var(--text)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(56% 46% at 92% 4%,rgba(114,177,36,.13),transparent 60%),radial-gradient(46% 42% at 2% 96%,rgba(222,205,161,.4),transparent 60%)}
.hero__inner{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,72px);align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dark);box-shadow:0 10px 30px -18px rgba(26,23,20,.3);margin-bottom:26px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.kinetic{font-family:var(--display);font-size:clamp(2.4rem,5.4vw,4.3rem);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin-bottom:22px}
.kinetic .line{display:block;overflow:hidden}
.kinetic .word{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.hero.is-in .kinetic .word{transform:none}
.kinetic .word.accent{background:linear-gradient(120deg,var(--green-dark),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}
.hero__sub{font-size:1.05rem;color:var(--ink-2);max-width:52ch;line-height:1.7;margin-bottom:32px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__panel{position:relative;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-radius:28px;padding:34px;box-shadow:0 30px 70px -40px rgba(26,23,20,.4)}
.panel__label{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);margin-bottom:8px;display:flex;align-items:center;gap:9px}
.panel__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-top:1px solid var(--line)}
.panel__row b{font-family:var(--display);font-size:clamp(1.6rem,3vw,2rem);font-weight:700;letter-spacing:-.03em;color:var(--text);line-height:1;white-space:nowrap}
.panel__row span{font-size:.9rem;color:var(--ink-2);text-align:right;line-height:1.4}
.panel__phone{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--green);border-radius:18px;padding:18px 22px;color:#fff;transition:background .3s,transform .3s var(--ease)}
.panel__phone:hover{background:var(--green-dark);transform:translateY(-2px)}
.panel__phone small{display:block;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:.1em;text-transform:uppercase}
.panel__phone b{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.45rem);font-weight:700;color:#fff;letter-spacing:-.01em}

/* ═══ Sections génériques ═══ */
.sec{padding:clamp(80px,12vh,130px) 0;position:relative}
.sec--alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:rgba(114,177,36,.1);border:1px solid rgba(114,177,36,.25);border-radius:999px;color:var(--green-dark);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}
.sec-title{font-family:var(--display);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-bottom:14px}
.sec-sub{font-size:1.05rem;color:var(--ink-2);max-width:60ch}
.sec-head--center{text-align:center;margin-left:auto;margin-right:auto;max-width:640px}
.sec-head--center .sec-sub{margin-left:auto;margin-right:auto}

/* Révélations au scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}

/* ═══ SERVICES — onglets ═══ */
.svc-tabs{position:relative;display:flex;gap:6px;padding:8px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 14px 40px -20px rgba(26,23,20,.2);margin-bottom:26px;overflow-x:auto;scrollbar-width:none}
.svc-tabs::-webkit-scrollbar{display:none}
.svc-tab{display:inline-flex;align-items:center;gap:11px;padding:15px 24px;border-radius:15px;font-size:.95rem;font-weight:700;color:var(--ink-2);white-space:nowrap;cursor:pointer;background:transparent;border:none;font-family:var(--font);transition:color .25s,background .3s var(--ease),box-shadow .3s}
.svc-tab .ic{width:1.25em;height:1.25em}
.svc-tab:hover{color:var(--text);background:rgba(114,177,36,.08)}
.svc-tab.is-active{background:linear-gradient(140deg,var(--green),var(--green-dark));color:#fff;box-shadow:0 12px 26px -10px rgba(114,177,36,.6)}
.svc-panel{position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.9);border-radius:30px;padding:clamp(28px,4vw,52px);box-shadow:0 34px 80px -46px rgba(26,23,20,.35)}
.svc-view{display:none}
.svc-view.is-active{display:block;animation:svcIn .55s var(--ease)}
@keyframes svcIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.svc-view__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
.svc-view h3{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.02em;margin-bottom:12px;display:flex;align-items:center;gap:14px}
.svc-view h3 .ic{width:1.15em;height:1.15em;color:var(--green-dark)}
.svc-view__lead{font-size:1rem;color:var(--ink-2);line-height:1.7;max-width:54ch;margin-bottom:28px}
.svc-incl h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.svc-incl ul{display:flex;flex-direction:column;gap:13px;list-style:none;margin:0;padding:0}
.svc-incl li{display:flex;align-items:center;gap:12px;font-size:.95rem;font-weight:500;color:var(--text)}
.svc-incl .ic{width:1em;height:1em;color:#fff;background:var(--green);border-radius:50%;padding:4.5px;flex-shrink:0}
.svc-price{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 20px 48px -30px rgba(26,23,20,.3)}
.svc-price__label{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);margin-bottom:6px;display:block}
.svc-price h4{font-family:var(--display);font-size:1.15rem;font-weight:700;margin-bottom:18px}
.price-row{display:flex;align-items:center;gap:12px;padding:13px 0;transition:transform .3s var(--ease)}
.price-row:hover{transform:translateX(4px)}
.price-row + .price-row{border-top:1px solid var(--line)}
.price-row__name{font-size:.9rem;font-weight:600}
.price-row__desc{display:block;font-size:.74rem;color:var(--muted);font-weight:400;margin-top:2px}
.price-row__dots{flex:1;border-bottom:2px dotted rgba(26,23,20,.28);transform:translateY(-4px);min-width:16px}
.price-chip{padding:7px 15px;background:rgba(114,177,36,.12);border:1px solid rgba(114,177,36,.3);border-radius:999px;font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--green-dark);white-space:nowrap}
.price-chip--accent{background:var(--green);color:#fff;border-color:var(--green)}
.svc-price__cta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}

/* ═══ MÉTHODE — 4 colonnes ═══ */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.m-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px 26px 28px;display:flex;flex-direction:column;box-shadow:0 14px 40px -30px rgba(26,23,20,.25);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.m-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(26,23,20,.35);border-color:rgba(114,177,36,.4)}
.m-card:not(:last-child)::after{content:'';position:absolute;top:50%;right:-18px;width:13px;height:13px;border-top:2.5px solid var(--green-dark);border-right:2.5px solid var(--green-dark);transform:translateY(-50%) rotate(45deg);z-index:3}
.m-card__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.m-num{font-family:var(--display);font-size:clamp(2.4rem,3.6vw,3.2rem);font-weight:700;line-height:.9;letter-spacing:-.04em;background:linear-gradient(150deg,var(--green-dark),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-ic{width:52px;height:52px;border-radius:16px;background:rgba(114,177,36,.12);color:var(--green-dark);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.m-ic .ic{width:1.3em;height:1.3em}
.m-card h3{font-family:var(--display);font-size:1.25rem;font-weight:700;margin-bottom:8px}
.m-card p{font-size:.94rem;color:var(--ink-2);line-height:1.6;flex:1}
.m-tag{margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(114,177,36,.1);border:1px solid rgba(114,177,36,.25);color:var(--green-dark);font-size:.78rem;font-weight:700}
.m-tag .ic{width:1em;height:1em}

/* ═══ AVIS ═══ */
.testi-wrap{position:relative}
.testi-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.testi-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.testi-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--cream-dark);cursor:pointer;padding:0;transition:transform .3s,background .3s}
.testi-dots button.is-on{background:var(--green);transform:scale(1.35)}
.t-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:32px 28px;display:flex;flex-direction:column;box-shadow:0 14px 40px -30px rgba(26,23,20,.25);transition:transform .4s var(--ease),box-shadow .4s}
.t-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(26,23,20,.35)}
.t-stars{display:flex;gap:4px;color:var(--green);margin-bottom:16px}
.t-stars .ic{width:1.05em;height:1.05em;fill:var(--green);stroke:none}
.t-card blockquote{font-size:1rem;line-height:1.65;color:var(--text);flex:1;margin:0 0 22px}
.t-author{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:18px}
.t-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--green),var(--green-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:.9rem;flex-shrink:0}
.t-author b{display:block;font-size:.92rem}
.t-author small{color:var(--muted);font-size:.8rem}

/* ═══ COORDONNÉES ═══ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,44px);align-items:stretch}
.contact-card{position:relative;background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.95);border-radius:30px;padding:clamp(28px,4vw,46px);box-shadow:0 34px 80px -46px rgba(26,23,20,.35)}
.contact-card h3{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.contact-card h3 .ic{width:1.15em;height:1.15em;color:var(--green-dark)}
.contact-card__sub{color:var(--ink-2);font-size:.95rem;margin-bottom:26px}
.c-line{display:flex;align-items:flex-start;gap:15px;padding:17px 0;border-top:1px solid var(--line)}
.c-line:first-of-type{border-top:none}
.c-line__ic{width:46px;height:46px;border-radius:14px;background:rgba(114,177,36,.12);color:var(--green-dark);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.c-line__ic .ic{width:1.2em;height:1.2em}
.c-line small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.c-line b{font-size:1.05rem;font-weight:600;line-height:1.4;display:block}
a.c-line:hover .c-line__ic{background:var(--green);color:#fff;transition:all .3s var(--ease)}
a.c-line b{transition:color .2s}
a.c-line:hover b{color:var(--green-dark)}
.hours{margin-top:6px}
.hours__row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);font-size:.95rem}
.hours__row:first-child{border-top:none}
.hours__day{font-weight:600;color:var(--text)}
.hours__time{font-family:var(--display);font-weight:600;color:var(--green-dark)}
.hours__row.is-closed .hours__time{color:var(--muted);font-family:var(--font);font-weight:500}
.hours__row.is-today .hours__day,.hours__row.is-today .hours__time{color:var(--text);position:relative}
.hours__row.is-today .hours__day::after{content:'aujourd’hui';font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--green);padding:3px 9px;border-radius:999px;margin-left:10px;vertical-align:middle}

/* ═══ CTA FINAL ═══ */
.cta-final{position:relative;background:var(--text);color:#fff;padding:clamp(84px,13vh,130px) 0;overflow:hidden}
.cta-final__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.cta-final h2{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:#fff}
.cta-final h2 em{font-style:italic;background:linear-gradient(120deg,var(--green),var(--cream));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-final__actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-final .btn{padding:18px 36px;font-size:1rem}
.btn--ghost-w{background:rgba(255,255,255,.14);color:#fff !important;border:1px solid rgba(255,255,255,.4)}
.btn--ghost-w:hover{background:rgba(255,255,255,.24)}

/* ═══ FOOTER (comme la démo v5) ═══ */
.footer{background:var(--bg-alt);border-top:1px solid var(--line);color:var(--text-secondary);padding:60px 0 30px}
.footer a{color:var(--text-secondary)}
.footer a:hover{color:var(--green-dark)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:44px;margin-bottom:44px}
.footer p{font-size:.9rem;line-height:1.65;margin-top:14px;max-width:30ch}
.footer__heading{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.footer__links{display:flex;flex-direction:column;gap:10px}
.footer__links a{font-size:.9rem}
.footer__contact-item{display:flex;align-items:flex-start;gap:11px;font-size:.88rem;line-height:1.5;margin-bottom:13px}
.footer__contact-item .ic{width:1.05em;height:1.05em;color:var(--green-dark);margin-top:4px;flex-shrink:0}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:22px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);flex-wrap:wrap}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .testi-grid{grid-auto-columns:calc((100% - 22px)/2)}
  .hero__panel{max-width:560px}
  .svc-view__grid{grid-template-columns:1fr;gap:30px}
  .method-grid{grid-template-columns:repeat(2,1fr)}
  .m-card:not(:last-child)::after{display:none}
  .testi-grid{grid-auto-flow:column;grid-auto-columns:100%;max-width:520px;margin:0 auto}
  .footer__grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:768px){
  .v5nav__links{display:none}
  .nav__status{display:none}
  .v5burger{display:flex}
  .hero{padding:120px 0 64px}
  .kinetic{font-size:clamp(2.2rem,9vw,3rem)}
  .hero__panel{max-width:none;padding:26px}
  .svc-tabs{border-radius:18px}
  .svc-tab{padding:13px 18px;font-size:.9rem}
  .method-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .cta-final__inner{flex-direction:column;align-items:flex-start}
}

/* ═══ 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}
  .rv{opacity:1;transform:none}
  .kinetic .word{transform:none}
}