/* wg:prefixe */
/* ══════════════════════════════════════════════════════════
   WONDERGUIDE — Page d'accueil, langage du Design App
   Nuit #04080F · Surface #0B1120 · Or #C8B89A
   Zéro angle arrondi.
   ══════════════════════════════════════════════════════════ */
html body .wga{
    font-family:'Space Grotesk',system-ui,sans-serif;
    background:#04080F;color:#FAF9F7;
    width:100%;margin:0;padding:0;
}
html body .wga *,html body .wga *::before,html body .wga *::after{
    box-sizing:border-box;min-width:0;border-radius:0 !important;
}
html body .wga a{text-decoration:none !important;}
body:has(.wga){background:#04080F !important;}
/* ── Héros ──────────────────────────────────────────── */
html body .wga__hero{
    display:grid;grid-template-columns:1.05fr .95fr;
    gap:64px;align-items:center;
    max-width:1280px;margin:0 auto;padding:84px 48px 76px;
}
html body .wga__eyebrow{
    display:flex;align-items:center;gap:13px;margin-bottom:26px;
    font-size:14px;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:#C8B89A;
}
html body .wga__eyebrow::before{content:'';width:30px;height:1px;background:#C8B89A;}
html body .wga__titre{
    font-size:clamp(38px,4.6vw,62px) !important;font-weight:800 !important;
    line-height:1.04 !important;letter-spacing:-.04em !important;
    color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;
    margin:0 0 24px !important;
}
html body .wga__titre em{
    font-style:normal;color:#C8B89A !important;-webkit-text-fill-color:#C8B89A !important;
}
html body .wga__chapo{
    font-size:18px !important;line-height:1.72 !important;max-width:520px;
    color:rgba(250,249,247,0.74) !important;-webkit-text-fill-color:rgba(250,249,247,0.74) !important;
    margin:0 0 34px !important;
}
html body .wga__actions{display:flex;gap:2px;flex-wrap:wrap;}
html body .wga__cta{
    display:inline-flex;align-items:center;justify-content:center;
    padding:18px 34px;font-size:14px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
    background:#C8B89A !important;color:#04080F !important;
    -webkit-text-fill-color:#04080F !important;
    border:1px solid #C8B89A !important;transition:background .18s;
}
html body .wga__cta:hover{background:#D7CAAF !important;border-color:#D7CAAF !important;}
html body .wga__cta--pale{
    background:transparent !important;color:#C8B89A !important;
    -webkit-text-fill-color:#C8B89A !important;
    border-color:rgba(200,184,154,.4) !important;
}
html body .wga__cta--pale:hover{background:rgba(200,184,154,.12) !important;border-color:#C8B89A !important;}
html body .wga__note{
    font-size:14px !important;margin:18px 0 0 !important;
    color:rgba(250,249,247,0.62) !important;-webkit-text-fill-color:rgba(250,249,247,0.62) !important;
}
/* ── Le guide,html body reconstitué ──────────────────────────── */
html body .wga__hero-visuel{
    position:relative;display:flex;flex-direction:column;
    align-items:center;gap:0;padding-bottom:20px;
}
html body .wga__tel{
    width:340px;max-width:100%;padding:12px;background:#171C26;
    border:1px solid rgba(200,184,154,.16);
    box-shadow:0 34px 80px rgba(0,0,0,.55);
}
html body .wga__tel-ecran{background:#04080F;overflow:hidden;}
html body .wga__g-hero{
    height:158px;padding:20px;display:flex;flex-direction:column;
    justify-content:flex-end;gap:7px;
    background:linear-gradient(150deg,#16243F 0%,#0B1120 62%,#04080F 100%);
}
html body .wga__g-eyebrow{
    font-size:14px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:#C8B89A;
}
html body .wga__g-titre{
    font-size:26px;font-weight:800;line-height:1.02;
    letter-spacing:-.035em;color:#FFFFFF;
}
html body .wga__g-strip{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:rgba(200,184,154,.14);
    border-top:1px solid rgba(200,184,154,.14);
    border-bottom:1px solid rgba(200,184,154,.14);
}
html body .wga__g-strip span{
    background:#0B1120;padding:12px 8px;min-width:0;
    display:flex;flex-direction:column;gap:3px;
    font-size:14px;font-weight:700;color:#FFFFFF;
}
html body .wga__g-strip em{
    font-style:normal;font-size:14px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:#C8B89A;
}
html body .wga__g-onglets{
    display:flex;gap:5px;padding:13px 14px;
    overflow-x:auto;scrollbar-width:none;
}
html body .wga__g-onglets::-webkit-scrollbar{display:none;}
html body .wga__g-onglets span{
    padding:7px 11px;font-size:14px;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
    border:1px solid rgba(200,184,154,.3);color:#C8B89A;flex-shrink:0;
}
html body .wga__g-onglets .is-actif{background:#D7CAAF;border-color:#D7CAAF;color:#04080F;}
html body .wga__g-corps{padding:6px 16px 20px;display:flex;flex-direction:column;gap:9px;}
html body .wga__g-label{
    font-size:14px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:#C8B89A;margin-top:5px;
}
html body .wga__g-carte{
    background:#0B1120;border:1px solid rgba(200,184,154,.14);
    padding:13px 15px;display:flex;flex-direction:column;gap:4px;
}
html body .wga__g-carte span{
    font-size:14px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(200,184,154,.65);
}
html body .wga__g-carte code{
    font-family:'SF Mono',Menlo,monospace;font-size:14px;color:#FFFFFF;
    overflow-wrap:anywhere;display:block;
}
html body .wga__g-ligne{height:7px;background:rgba(250,249,247,.12);}
html body .wga__g-ligne--court{width:62%;}
html body .wga__g-tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    background:#00133B;border-top:1px solid rgba(200,184,154,.18);
}
html body .wga__g-tabbar span{
    padding:13px 2px;text-align:center;
    font-size:14px;font-weight:700;letter-spacing:.02em;
    color:rgba(200,184,154,.55);
}
html body .wga__g-tabbar .is-actif{color:#FFFFFF;background:rgba(255,255,255,.08);}
/* Bulle de Gaspard */
html body .wga__bulle{
    position:relative;z-index:2;
    width:320px;max-width:100%;margin:-28px 0 0 auto;
    margin-right:-28px;
    background:#C8B89A;padding:18px 20px;
    display:flex;flex-direction:column;gap:10px;
    box-shadow:0 22px 46px rgba(0,0,0,.45);
}
html body .wga__bulle::before{
    content:'Gaspard';
    font-size:14px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(4,8,15,.45);
}
html body .wga__bulle-q{
    font-size:15px;font-weight:700;line-height:1.45;color:#04080F;
    padding-bottom:10px;border-bottom:1px solid rgba(4,8,15,.18);
}
html body .wga__bulle-r{font-size:14px;line-height:1.62;color:rgba(4,8,15,.76);}
/* ── Bandeau de chiffres ────────────────────────────── */
html body .wga__strip{
    display:flex;overflow-x:auto;scrollbar-width:none;
    background:rgba(11,17,32,.7);
    border-top:1px solid rgba(200,184,154,.14);
    border-bottom:1px solid rgba(200,184,154,.14);
}
html body .wga__strip::-webkit-scrollbar{display:none;}
html body .wga__cell{
    flex:1;min-width:180px;padding:30px 34px;
    border-right:1px solid rgba(200,184,154,.1);
    display:flex;flex-direction:column;gap:6px;
}
html body .wga__cell:last-child{border-right:none;}
html body .wga__cell-val{
    font-size:36px;font-weight:800;letter-spacing:-.04em;
    line-height:1;color:#C8B89A;
}
html body .wga__cell-lab{font-size:14px;color:rgba(250,249,247,0.68);line-height:1.4;}
/* ── Sections ───────────────────────────────────────── */
html body .wga__corps{max-width:1180px;margin:0 auto;padding:78px 48px 0;}
html body .wga__sec{
    display:grid;grid-template-columns:78px 1fr;
    padding-bottom:70px;margin-bottom:70px;
    border-bottom:1px solid rgba(200,184,154,.1);
}
html body .wga__sec:last-child{border-bottom:none;}
html body .wga__num{
    font-size:14px;font-weight:700;letter-spacing:.08em;
    color:rgba(200,184,154,.8);padding-top:6px;font-variant-numeric:tabular-nums;
}
html body .wga__contenu{min-width:0;}
html body .wga__h2{
    font-size:14px !important;font-weight:800 !important;
    letter-spacing:.22em !important;text-transform:uppercase !important;
    color:#C8B89A !important;-webkit-text-fill-color:#C8B89A !important;
    margin:0 0 22px !important;
}
html body .wga__lead{
    font-size:19px !important;line-height:1.74 !important;max-width:680px;
    color:rgba(250,249,247,0.72) !important;-webkit-text-fill-color:rgba(250,249,247,0.72) !important;
    margin:0 0 34px !important;
}
html body .wga__apres{
    font-size:15px !important;margin:22px 0 0 !important;
    color:rgba(250,249,247,0.62) !important;-webkit-text-fill-color:rgba(250,249,247,0.62) !important;
}
/* Cartes */
html body .wga__cartes{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1px;background:rgba(200,184,154,.12);border:1px solid rgba(200,184,154,.12);
}
html body .wga__carte{
    background:#0B1120;padding:26px;
    display:flex;flex-direction:column;gap:9px;
}
html body .wga__carte-titre{font-size:17px;font-weight:700;color:#FFFFFF;}
html body .wga__carte-txt{font-size:15px;line-height:1.62;color:rgba(250,249,247,0.68);}
/* Conversation */
html body .wga__chat{
    display:flex;flex-direction:column;gap:11px;
    max-width:600px;padding:26px;
    background:rgba(255,255,255,.03);border:1px solid rgba(200,184,154,.12);
}
html body .wga__msg{
    max-width:84%;padding:14px 17px;font-size:15px;line-height:1.6;
    background:#0B1120;border:1px solid rgba(200,184,154,.14);
    color:rgba(250,249,247,0.82);align-self:flex-start;
}
html body .wga__msg--user{
    align-self:flex-end;background:#C8B89A;border-color:#C8B89A;
    color:#04080F;font-weight:600;
}
/* Designs */
html body .wga__designs{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1px;background:rgba(200,184,154,.12);border:1px solid rgba(200,184,154,.12);
}
html body .wga__design{
    background:#0B1120;padding:0 0 24px;
    display:flex;flex-direction:column;gap:9px;transition:background .18s;
}
html body .wga__design:hover{background:#111A2E;}
html body .wga__design-apercu{
    height:150px;padding:16px;display:flex;flex-direction:column;gap:7px;
    margin-bottom:8px;overflow:hidden;
}
html body .wga__design-apercu--clair{background:#F5F3EE;}
html body .wga__design-apercu--nuit{background:#04080F;}
html body .wga__design-apercu--mag{background:#FAF9F7;flex-direction:row;gap:8px;}
html body .wga__d-barre{height:11px;background:currentColor;opacity:.22;width:55%;}
html body .wga__d-bloc{height:48px;background:currentColor;opacity:.32;}
html body .wga__d-ligne{height:7px;background:currentColor;opacity:.16;}
html body .wga__d-ligne.court{width:64%;}
html body .wga__design-apercu--clair{color:#00133B;}
html body .wga__design-apercu--nuit{color:#C8B89A;}
html body .wga__design-apercu--mag{color:#00133B;}
html body .wga__d-col{flex:1;background:currentColor;opacity:.14;}
html body .wga__d-col--img{flex:1.1;opacity:.3;}
html body .wga__design-nom{
    font-size:17px;font-weight:700;color:#FFFFFF;padding:0 22px;
}
html body .wga__design-txt{
    font-size:15px;line-height:1.55;color:rgba(250,249,247,0.68);padding:0 22px;
}
/* Pour qui */
html body .wga__pour{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:1px;background:rgba(200,184,154,.12);border:1px solid rgba(200,184,154,.12);
}
html body .wga__pour-bloc{background:#0B1120;padding:30px 32px;}
html body .wga__pour-titre{
    display:block;font-size:22px;font-weight:800;
    letter-spacing:-.02em;color:#C8B89A;margin-bottom:12px;
}
html body .wga__pour-txt{
    font-size:16px !important;line-height:1.7 !important;
    color:rgba(250,249,247,0.74) !important;-webkit-text-fill-color:rgba(250,249,247,0.74) !important;
    margin:0 0 20px !important;
}
html body .wga__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
html body .wga__liste li{
    position:relative;padding-left:22px;font-size:15px;line-height:1.55;
    color:rgba(250,249,247,0.78);
}
html body .wga__liste li::before{
    content:'';position:absolute;left:0;top:9px;
    width:9px;height:1px;background:#C8B89A;
}
/* ── Appel final ────────────────────────────────────── */
html body .wga__fin{
    text-align:center;padding:88px 48px 110px;
    background:linear-gradient(to bottom,#04080F 0%,#0B1120 100%);
    border-top:1px solid rgba(200,184,154,.12);
}
html body .wga__fin-titre{
    font-size:clamp(28px,3.6vw,44px) !important;font-weight:800 !important;
    letter-spacing:-.035em !important;line-height:1.1 !important;
    color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;
    margin:0 0 14px !important;
}
html body .wga__fin-txt{
    font-size:18px !important;max-width:520px;margin:0 auto 32px !important;
    color:rgba(250,249,247,0.68) !important;-webkit-text-fill-color:rgba(250,249,247,0.68) !important;
}
html body .wga__fin .wga__actions{justify-content:center;}
/* ── Adaptations ────────────────────────────────────── */
@media(max-width:1080px){
html body .wga__hero{grid-template-columns:1fr;gap:56px;padding:60px 32px 56px;}
html body .wga__hero-visuel{order:-1;}
html body .wga__bulle{width:300px;margin-right:0;}
html body .wga__corps{padding:58px 32px 0;}
html body .wga__sec{grid-template-columns:1fr;}
html body .wga__num{display:none;}

}
@media(max-width:600px){
html body .wga__hero{padding:44px 18px 44px;gap:44px;}
html body .wga__corps{padding:44px 18px 0;}
html body .wga__sec{padding-bottom:50px;margin-bottom:50px;}
html body .wga__tel{width:100%;max-width:300px;}
html body .wga__bulle{width:100%;margin:-20px 0 0;}
html body .wga__actions{flex-direction:column;}
html body .wga__cta{width:100%;}
html body .wga__cell{min-width:150px;padding:22px 20px;}
html body .wga__cell-val{font-size:28px;}
html body .wga__fin{padding:60px 18px 76px;}
html body .wga__chat{padding:18px;}
html body .wga__msg{max-width:92%;}

}
/* ══════════════════════════════════════════════════════════
   VIDÉO DE PRÉSENTATION — paysage
   ══════════════════════════════════════════════════════════ */
html body .wga__film{max-width:1280px;margin:0 auto;padding:0 48px 76px;}
html body .wga__film-cadre{
    position:relative;background:#0B1120;
    border:1px solid rgba(200,184,154,.16);
    box-shadow:0 40px 90px rgba(0,0,0,.5);
}
html body .wga__film-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0B1120;}
html body .wga__son{
    position:absolute;right:18px;bottom:18px;
    display:inline-flex;align-items:center;gap:9px;
    padding:11px 16px;cursor:pointer;border:none;
    background:rgba(4,8,15,.72);backdrop-filter:blur(6px);
    color:#FAF9F7;font-family:'Space Grotesk',sans-serif;
    font-size:14px;font-weight:700;letter-spacing:.05em;
    transition:background .16s;
}
html body .wga__son:hover{background:rgba(4,8,15,.9);}
html body .wga__son.is-actif{background:#C8B89A;color:#04080F;}
/* ══════════════════════════════════════════════════════════
   LE PROBLÈME — vidéo portrait dans un iPhone
   ══════════════════════════════════════════════════════════ */
html body .wga__probleme{
    display:grid;grid-template-columns:1fr auto;
    gap:64px;align-items:center;margin-bottom:40px;
}
html body .wga__probleme-texte .wga__lead{margin-bottom:22px !important;}
html body .wga__lead--or{
    color:#C8B89A !important;-webkit-text-fill-color:#C8B89A !important;
    font-weight:600 !important;
}
html body .wga__iphone{display:flex;justify-content:center;}
html body .wga__iphone-cadre{
    position:relative;width:280px;
    padding:12px;background:#171C26;
    border:1px solid rgba(200,184,154,.18);
    box-shadow:0 34px 80px rgba(0,0,0,.55);
}
html body .wga__iphone-ilot{
    position:absolute;top:22px;left:50%;transform:translateX(-50%);
    width:86px;height:24px;background:#000;z-index:2;
}
html body .wga__iphone-video{
    display:block;width:100%;height:auto;
    aspect-ratio:9/19.5;object-fit:cover;background:#000;
}
@media(max-width:1080px){
html body .wga__film{padding:0 32px 56px;}
html body .wga__probleme{grid-template-columns:1fr;gap:40px;}

}
@media(max-width:600px){
html body .wga__film{padding:0 18px 44px;}
html body .wga__son{right:10px;bottom:10px;padding:9px 13px;}
html body .wga__iphone-cadre{width:240px;}

}
/* ══════════════════════════════════════════════════════════
   GASPARD — le texte et la conversation côte à côte
   ══════════════════════════════════════════════════════════ */
html body .wga__duo{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:56px;align-items:center;
}
html body .wga__duo-texte .wga__lead{margin-bottom:28px !important;}
html body .wga__duo .wga__chat{max-width:none;width:100%;}
html body .wga__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
html body .wga__points li{
    position:relative;padding-left:24px;
    font-size:16px;line-height:1.6;color:rgba(250,249,247,0.74);
}
html body .wga__points li::before{
    content:'';position:absolute;left:0;top:11px;width:12px;height:1px;background:#C8B89A;
}
html body .wga__points strong{color:#FFFFFF;font-weight:700;}
@media(max-width:1080px){
html body .wga__duo{grid-template-columns:1fr;gap:34px;}

}
/* ══════════════════════════════════════════════════════════
   HÉROS — l'accroche d'abord,html body en grand
   Le header est fixe et transparent : on lui laisse sa place.
   ══════════════════════════════════════════════════════════ */
html body .wga__hero{padding-top:148px;}
@media(max-width:1080px){
html body .wga__hero{
        padding:118px 28px 56px;gap:48px;
        grid-template-columns:1fr;
    }
/* Le titre passe devant l'illustration */
html body .wga__hero-visuel{order:0;}
html body .wga__hero-texte{order:-1;}

}
@media(max-width:600px){
html body .wga__hero{
        min-height:auto;
        padding:104px 20px 48px;gap:44px;
    }
html body .wga__eyebrow{font-size:14px;margin-bottom:20px;letter-spacing:.14em;}
html body .wga__eyebrow::before{width:22px;}
/* Titre plein cadre,html body qui frappe dès l'ouverture */
html body .wga__titre{
        font-size:clamp(42px,12.5vw,58px) !important;
        line-height:.98 !important;letter-spacing:-.045em !important;
        margin-bottom:22px !important;
    }
html body .wga__chapo{font-size:17px !important;line-height:1.62 !important;margin-bottom:30px !important;}
html body .wga__actions{flex-direction:column;gap:2px;}
html body .wga__cta{width:100%;padding:19px 22px;}
html body .wga__note{text-align:center;}
/* L'aperçu du guide,html body plus sobre,html body bulle intégrée dessous */
html body .wga__hero-visuel{padding-bottom:0;}
html body .wga__tel{width:100%;max-width:320px;margin:0 auto;}
html body .wga__bulle{width:100%;max-width:320px;margin:-18px auto 0;}

}
/* ══════════════════════════════════════════════════════════
   CHIFFRES — une grille sur mobile,html body plus de coupure
   ══════════════════════════════════════════════════════════ */
@media(max-width:700px){
html body .wga__strip{
        display:grid;grid-template-columns:1fr 1fr;
        overflow:visible;gap:1px;background:rgba(200,184,154,.12);
    }
html body .wga__cell{
        min-width:0;padding:24px 20px;border-right:none;
        background:#0B1120;
    }
html body .wga__cell-val{font-size:30px;}

}
/* ══════════════════════════════════════════════════════════
   MOBILE — respiration générale
   ══════════════════════════════════════════════════════════ */
@media(max-width:600px){
html body .wga__film{padding:0 16px 44px;}
html body .wga__film-cadre{box-shadow:0 20px 44px rgba(0,0,0,.45);}
html body .wga__son{right:10px;bottom:10px;}
html body .wga__corps{padding:52px 20px 0;}
html body .wga__sec{padding-bottom:52px;margin-bottom:52px;}
html body .wga__lead{font-size:17px !important;line-height:1.66 !important;}
html body .wga__probleme{gap:34px;}
html body .wga__iphone-cadre{width:230px;}
html body .wga__chat{padding:16px;gap:10px;}
html body .wga__msg{max-width:94%;font-size:15px;padding:13px 15px;}
html body .wga__designs,html body .wga__pour{grid-template-columns:1fr;}
html body .wga__pour-bloc{padding:26px 22px;}
html body .wga__fin{padding:64px 20px 80px;}
html body .wga__fin-titre{font-size:clamp(30px,8.6vw,40px) !important;}

}
/* Filet de sécurité si un constructeur de page insère encore
   des paragraphes vides entre les blocs */
html body .wga p:empty{display:none !important;}
html body .wga__cartes > br,html body .wga__designs > br,html body .wga__pour > br,html body .wga__strip > br,html body .wga__duo > br,html body .wga__hero > br,html body .wga__probleme > br,html body .wga__chat > br{display:none !important;}