/* Pages publiques de Modipho (référencement, 13/10/2026) : graphite et ambre comme le studio, sans script. */
:root { --fond:#111214; --surface:#17181c; --carte:#1b1c21; --trait:#ffffff14; --texte:#ededea; --texte-2:#babab2; --texte-3:#8f8f86; --ambre:#f2ac51; --ambre-2:#e6932a; --rayon:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--fond); color:var(--texte); font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--ambre); text-decoration:none; } a:hover { text-decoration:underline; }
h1, h2, h3 { line-height:1.15; letter-spacing:-.025em; margin:0 0 .5em; }
h1 { font-size:clamp(36px, 6vw, 64px); font-weight:800; }
h1 em { font-style:normal; color:var(--ambre); }
h2 { font-size:clamp(26px, 3.4vw, 38px); font-weight:800; }
h3 { font-size:18px; font-weight:700; }
.v-entete { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:24px; padding:14px max(20px, calc((100vw - 1160px) / 2)); background:#111214e6; backdrop-filter:blur(10px); border-bottom:1px solid var(--trait); }
.v-marque { display:inline-flex; align-items:center; gap:10px; color:var(--texte); font-weight:800; font-size:20px; letter-spacing:-.03em; }
.v-marque:hover { text-decoration:none; } .v-marque img { width:30px; height:30px; }
.v-nav { display:flex; gap:22px; margin-left:12px; } .v-nav a { color:var(--texte-2); font-size:15px; font-weight:600; } .v-nav a:hover { color:var(--texte); text-decoration:none; }
.v-actions { margin-left:auto; display:flex; align-items:center; gap:16px; }
.v-lien { color:var(--texte-2); font-weight:600; font-size:15px; }
.v-bouton { display:inline-block; padding:10px 18px; border-radius:12px; background:linear-gradient(180deg, #f4b45e, var(--ambre-2)); color:#1a1206; font-weight:800; font-size:15px; box-shadow:0 10px 24px -12px var(--ambre); }
.v-bouton:hover { text-decoration:none; filter:brightness(1.05); } .v-bouton.grand { padding:15px 26px; font-size:17px; border-radius:14px; }
.v-lien-bouton { display:inline-block; padding:15px 8px; color:var(--texte); font-weight:700; }
main { max-width:1160px; margin:0 auto; padding:0 20px; }
.v-heros { display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:center; padding:72px 0 56px; }
.v-surtitre { color:var(--ambre); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:13px; margin:0 0 14px; }
.v-chapo { font-size:19px; color:var(--texte-2); max-width:640px; }
.v-boutons { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:26px 0 14px; }
.v-confiance { color:var(--texte-3); font-size:14.5px; margin:0; }
.v-telephone { justify-self:center; width:min(300px, 80vw); aspect-ratio:9/16; border-radius:42px; border:10px solid #2a2832; background:#000; overflow:hidden; box-shadow:0 40px 90px -30px #000, 0 0 0 1px #ffffff1a; }
.v-telephone video { width:100%; height:100%; object-fit:cover; display:block; }
.v-section { padding:56px 0; border-top:1px solid var(--trait); }
.v-etapes { list-style:none; counter-reset:e; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.v-etapes li { counter-increment:e; background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:24px; }
.v-etapes li::before { content:counter(e); display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#f2ac5122; color:var(--ambre); font-weight:800; margin-bottom:12px; }
.v-etapes p, .v-carte p { color:var(--texte-2); margin:.4em 0 0; font-size:15.5px; }
.v-grille { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px; } .v-grille.quatre { grid-template-columns:repeat(4, 1fr); }
.v-carte { background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:22px; }
.v-suite { color:var(--texte-3); margin-top:26px; font-size:15.5px; }
.v-faq { display:grid; gap:10px; margin-top:22px; max-width:860px; }
.v-faq details { background:var(--carte); border:1px solid var(--trait); border-radius:14px; padding:16px 20px; }
.v-faq summary { cursor:pointer; font-weight:700; font-size:17px; } .v-faq details p { color:var(--texte-2); margin:.7em 0 0; }
.v-cta { text-align:center; padding:64px 20px; margin:24px 0 64px; border-radius:26px; background:radial-gradient(600px 260px at 50% 0%, #f2ac5124, transparent 70%), var(--surface); border:1px solid var(--trait); }
.v-cta p { color:var(--texte-2); margin:0 0 22px; }
.v-article { max-width:820px; padding-top:40px; } .v-article h1 { font-size:clamp(32px, 5vw, 50px); }
.v-article section { margin:38px 0; } .v-article section h2 { font-size:clamp(24px, 3vw, 30px); } .v-article section p { color:#d6d6cf; }
.v-fil { color:var(--texte-3); font-size:14px; margin-bottom:18px; }
.v-pied { border-top:1px solid var(--trait); padding:36px max(20px, calc((100vw - 1160px) / 2)); color:var(--texte-3); font-size:15px; }
.v-pied-haut p { margin:.6em 0 0; } .v-pied-liens { display:flex; flex-wrap:wrap; gap:8px 22px; margin:20px 0; } .v-pied-liens a { color:var(--texte-2); }
.v-copie { margin:0; font-size:13.5px; }
@media (max-width:900px) {
  .v-nav { display:none; } .v-heros { grid-template-columns:1fr; padding-top:40px; } .v-telephone { width:min(260px, 70vw); }
  .v-etapes, .v-grille, .v-grille.quatre { grid-template-columns:1fr; }
}
.v-court { display:none; }
/* écrans très étroits : le logo seul, sans le mot, pour que les deux boutons tiennent sur une ligne */
@media (max-width:420px) { .v-marque span { display:none; } }
/* (28/10) sur téléphone, le lien vers l’espace reste visible, en version courte */
@media (max-width:520px) { .v-lien { font-size:14px; white-space:nowrap; } .v-long { display:none; } .v-court { display:inline; } .v-actions { gap:10px; } .v-actions .v-bouton { padding:10px 14px; font-size:14px; white-space:nowrap; } body { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }