/* ══════════════════════════════════════════════════════════
   PAGES « SITE INTERNET » · composants partagés
   Utilisé par page-creation-site.php (Toulouse) et page-site-ville.php (Ariège, Tarn...).
   Le socle vient de assets/css/md-v3.css. Enqueue conditionnel dans functions.php.
   ══════════════════════════════════════════════════════════ */
/* Titre calé pour que « Vous le voyez avant de signer. » (souligné, sans retour à la ligne) tienne dans la colonne */
body.md-site .v2-h1{font-size:clamp(34px,3.3vw,48px)}

/* ── Hero : un site qui se construit sous vos yeux ── */
body.md-site .cs-visual{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(28px);animation:v2RiseScale 1s var(--v2-ease-out) .4s forwards}
body.md-site .cs-glow{position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(240,180,41,.26) 0%,rgba(240,180,41,.08) 45%,transparent 70%);z-index:0;pointer-events:none}
body.md-site .cs-visual span,body.md-site .cs-visual b,body.md-site .cs-visual small,body.md-site .cs-visual strong,body.md-site .cs-visual em{font-family:var(--v2-sans)}
body.md-site .cs-browser{position:relative;z-index:2;width:100%;max-width:470px;background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(13,27,42,.08);box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 30px 70px rgba(13,27,42,.22),0 10px 24px rgba(13,27,42,.1)}
body.md-site .cs-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#F1ECE2;border-bottom:1px solid rgba(13,27,42,.06)}
body.md-site .cs-bar i{width:9px;height:9px;border-radius:50%;background:#D8D0C2}
body.md-site .cs-bar span{margin-left:10px;font-size:11px;color:var(--v2-muted);background:#fff;border-radius:999px;padding:3px 14px}
body.md-site .cs-page{padding:14px 16px 18px;background:#FBF8F2}
body.md-site .cs-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px}
body.md-site .cs-logo{width:26px;height:26px;border-radius:7px;background:var(--v2-navy);color:var(--v2-gold);display:grid;place-items:center;font-size:12px;font-weight:800}
body.md-site .cs-nav u{display:block;height:6px;width:34px;border-radius:3px;background:rgba(13,27,42,.14);text-decoration:none}
body.md-site .cs-nav u:first-of-type{margin-left:auto}
body.md-site .cs-nav em{font-style:normal;font-size:9.5px;font-weight:700;color:var(--v2-navy);background:var(--v2-gold);border-radius:6px;padding:5px 9px}
body.md-site .cs-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;align-items:center}
body.md-site .cs-title b{display:block;font-family:var(--v2-serif);font-size:21px;font-weight:600;line-height:1.1;color:var(--v2-navy)}
body.md-site .cs-title small{display:block;font-size:10.5px;line-height:1.45;color:var(--v2-muted);margin-top:7px}
body.md-site .cs-btn{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;color:var(--v2-navy);background:var(--v2-gold);border-radius:7px;padding:7px 12px}
body.md-site .cs-photo{height:120px;border-radius:12px;background:
	radial-gradient(circle at 70% 30%,rgba(255,255,255,.35),transparent 40%),
	linear-gradient(160deg,#C9A36A 0%,#8C6A43 55%,#4E3B27 100%)}
body.md-site .cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
body.md-site .cs-cards span{display:block;height:56px;border-radius:10px;background:#fff;border:1px solid rgba(13,27,42,.07);padding:9px}
body.md-site .cs-cards span::before{content:"";display:block;width:16px;height:16px;border-radius:5px;background:rgba(240,180,41,.35);margin-bottom:8px}
body.md-site .cs-cards span::after{content:"";display:block;height:5px;width:80%;border-radius:3px;background:rgba(13,27,42,.12)}
/* Squelettes gris qui s'effacent l'un après l'autre (état de base = site terminé) */
body.md-site .cs-sk{position:relative}
body.md-site .cs-sk::after{content:"";position:absolute;inset:-2px;border-radius:9px;background:repeating-linear-gradient(135deg,#E9E3D7 0 8px,#E2DBCD 8px 16px);opacity:0}
body.md-site .cs-sk.s1::after{animation:csSk1 10s ease infinite both}
body.md-site .cs-sk.s2::after{animation:csSk2 10s ease infinite both}
body.md-site .cs-sk.s3::after{animation:csSk3 10s ease infinite both}
body.md-site .cs-sk.s4::after{animation:csSk4 10s ease infinite both}
/* Téléphone : la version mobile arrive ensuite */
body.md-site .cs-phone{position:absolute;z-index:3;right:-4%;bottom:6%;width:128px;height:250px;background:#0D1B2A;border-radius:24px;padding:6px;box-shadow:0 24px 50px rgba(13,27,42,.3);animation:csPhone 10s var(--v2-ease) infinite both}
body.md-site .cs-phone-screen{height:100%;border-radius:19px;background:#FBF8F2;overflow:hidden;padding:18px 9px 9px;display:flex;flex-direction:column;gap:7px}
body.md-site .cs-phone-screen .cs-logo{width:18px;height:18px;font-size:9px;border-radius:5px}
body.md-site .cs-phone-screen b{font-family:var(--v2-serif);font-size:13px;font-weight:600;line-height:1.1;color:var(--v2-navy)}
body.md-site .cs-phone-screen .cs-photo{height:70px;border-radius:9px}
body.md-site .cs-phone-screen u{display:block;height:5px;border-radius:3px;background:rgba(13,27,42,.12);text-decoration:none}
body.md-site .cs-phone-screen em{font-style:normal;margin-top:auto;text-align:center;font-size:9px;font-weight:700;color:#fff;background:var(--v2-navy);border-radius:999px;padding:6px 0}
/* Cartes flottantes */
body.md-site .cs-float{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;background:rgba(255,255,255,.97);border:1px solid rgba(13,27,42,.08);border-radius:14px;box-shadow:0 18px 40px rgba(13,27,42,.16)}
body.md-site .cs-float b{display:block;font-size:12.5px;color:var(--v2-navy)}
body.md-site .cs-float small{display:block;font-size:10.5px;color:var(--v2-muted);margin-top:1px}
body.md-site .cs-f-mock{top:4%;left:-6%;animation:csPopA 10s var(--v2-ease) infinite both}
body.md-site .cs-f-lead{bottom:-2%;left:4%;animation:csPopB 10s var(--v2-ease) infinite both}
body.md-site .cs-f-lead small{display:flex;align-items:center;gap:5px}
body.md-site .cs-f-lead small::before{content:"";width:6px;height:6px;border-radius:50%;background:#2F9E6A}

@keyframes csSk1{0%,6%{opacity:1}14%,94%{opacity:0}100%{opacity:1}}
@keyframes csSk2{0%,14%{opacity:1}22%,94%{opacity:0}100%{opacity:1}}
@keyframes csSk3{0%,22%{opacity:1}30%,94%{opacity:0}100%{opacity:1}}
@keyframes csSk4{0%,30%{opacity:1}38%,94%{opacity:0}100%{opacity:1}}
@keyframes csPhone{0%,42%{opacity:0;transform:translateY(24px)}52%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes csPopA{0%,2%{opacity:0;transform:translateY(10px)}8%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes csPopB{0%,60%{opacity:0;transform:translateY(10px)}68%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}

/* ── Maquette offerte : texte + carte « votre maquette est prête » ── */
body.md-site .cs-offer{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;margin-top:8px}
body.md-site .cs-offer-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin:26px 0 0;padding:0}
body.md-site .cs-offer-list li{display:flex;gap:14px;align-items:flex-start}
body.md-site .cs-offer-list .cs-n{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--v2-navy);color:var(--v2-gold);font:700 13px var(--v2-sans)}
body.md-site .cs-offer-list b{display:block;font:700 16px/1.35 var(--v2-sans);color:var(--v2-navy)}
body.md-site .cs-offer-list span{display:block;font:400 14.5px/1.55 var(--v2-sans);color:var(--v2-muted);margin-top:3px}
body.md-site .cs-offer-note{margin-top:22px;font:400 14px/1.6 var(--v2-sans);color:var(--v2-muted);border-left:3px solid var(--v2-gold);padding-left:14px}
body.md-site .cs-offer-note strong{color:var(--v2-navy)}
body.md-site .cs-ready{position:relative;padding:22px;border-radius:20px;background:var(--v2-cream-2);border:1px solid var(--v2-line)}
body.md-site .cs-ready .pe-card{padding:14px}
body.md-site .cs-ready-msg{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
body.md-site .cs-ready-msg b{display:block;font-size:13px;color:var(--v2-navy)}
body.md-site .cs-ready-msg small{display:block;font-size:11.5px;color:var(--v2-muted);margin-top:2px;line-height:1.45}
body.md-site .cs-ready-shot{border-radius:10px;overflow:hidden;border:1px solid rgba(13,27,42,.08)}
body.md-site .cs-ready-shot .cs-bar{height:24px}
body.md-site .cs-ready-shot .cs-bar span{font-size:9.5px;padding:2px 10px}
body.md-site .cs-ready-shot .cs-page{padding:12px}
body.md-site .cs-ready-shot .cs-photo{height:78px}
body.md-site .cs-ready-shot .cs-title b{font-size:16px}
body.md-site .cs-ready-acts{display:flex;gap:8px;margin-top:12px}
body.md-site .cs-ready-acts span{flex:1;text-align:center;font-size:11px;font-weight:700;border-radius:999px;padding:9px 0;border:1px solid rgba(13,27,42,.14);color:var(--v2-navy);background:#fff}
body.md-site .cs-ready-acts span.is-main{background:var(--v2-navy);color:#fff;border-color:var(--v2-navy)}

/* ── Mockups des 4 cartes « ce que comprend votre site » ── */
body.md-site .cs-m-phone{width:112px;height:186px;background:#0D1B2A;border-radius:20px;padding:5px;box-shadow:0 14px 30px rgba(13,27,42,.2)}
body.md-site .cs-m-phone .cs-phone-screen{padding:14px 8px 8px;gap:6px}
body.md-site .cs-m-phone .cs-photo{height:52px}
body.md-site .cs-m-phone b{font-size:11.5px}
body.md-site .cs-m-search{width:88%;max-width:330px;padding:12px}
body.md-site .cs-m-q{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;margin-bottom:10px;border-radius:999px;border:1px solid rgba(13,27,42,.1);font-size:11.5px;color:var(--v2-ink)}
body.md-site .cs-m-q svg{color:var(--v2-muted);flex-shrink:0}
body.md-site .cs-m-res{padding:8px 10px;border-radius:9px}
body.md-site .cs-m-res small{display:block;font-size:9.5px;color:#2F6A47}
body.md-site .cs-m-res b{display:block;font-size:12px;font-weight:700;color:#1A56B0;margin:2px 0 4px}
body.md-site .cs-m-res u{display:block;height:5px;border-radius:3px;background:rgba(13,27,42,.12);text-decoration:none}
body.md-site .cs-m-res.is-you{background:rgba(240,180,41,.14);border:1px solid rgba(240,180,41,.5);animation:v2PmIn 6.5s var(--v2-ease) infinite both}
body.md-site .cs-m-res.is-other{opacity:.55;margin-top:6px}
body.md-site .cs-m-form{width:88%;max-width:330px;padding:14px;position:relative}
body.md-site .cs-m-form label{display:block;font-size:9.5px;font-weight:700;color:var(--v2-muted);margin-bottom:4px}
body.md-site .cs-m-form i{display:block;height:24px;border-radius:7px;border:1px solid rgba(13,27,42,.14);margin-bottom:9px;background:#FBF8F2}
body.md-site .cs-m-form .cs-btn{margin-top:2px;animation:csClick 6.5s ease infinite both}
body.md-site .cs-m-toast{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;background:var(--v2-navy);color:#fff;font-size:10.5px;font-weight:600;padding:7px 10px 7px 8px;border-radius:9px;box-shadow:0 10px 22px rgba(13,27,42,.25);animation:v2PmIn 6.5s var(--v2-ease) infinite both;animation-delay:.8s}
body.md-site .cs-m-toast small{display:block;font-size:9.5px;font-weight:500;color:rgba(255,255,255,.7)}
body.md-site .cs-m-toast .pe-f-ico{width:20px;height:20px;font-size:10px}
body.md-site .cs-m-own{width:88%;max-width:330px;padding:14px}
body.md-site .cs-m-own-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:11.5px;color:var(--v2-ink)}
body.md-site .cs-m-own-row + .cs-m-own-row{border-top:1px solid rgba(13,27,42,.06)}
body.md-site .cs-m-own-row b{flex:1;font-weight:600;color:var(--v2-navy)}
body.md-site .cs-m-own-row em{font-style:normal;font-size:10px;font-weight:700;color:#2F6A47;background:rgba(47,158,106,.12);border-radius:999px;padding:3px 8px}
body.md-site .cs-m-own-row.is-edit{background:rgba(240,180,41,.12);animation:v2PmIn 6.5s var(--v2-ease) infinite both;animation-delay:.4s}
body.md-site .cs-m-own-row.is-edit em{color:var(--v2-navy);background:var(--v2-gold)}
@keyframes csClick{0%,30%{transform:scale(1)}34%{transform:scale(.92)}38%,100%{transform:scale(1)}}

/* ── Tarifs ── */
body.md-site .cs-price{font-family:var(--v2-serif);font-size:40px;font-weight:600;line-height:1;color:var(--v2-navy)}
body.md-site .cs-price small{display:block;font:700 11px/1 var(--v2-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--v2-muted);margin-bottom:8px}
body.md-site .cs-price-note{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body.md-site .cs-price-note div{background:#fff;border:1px solid var(--v2-line);border-radius:14px;padding:16px 18px;font:400 14px/1.55 var(--v2-sans);color:var(--v2-muted)}
body.md-site .cs-price-note b{display:block;font:700 14.5px/1.3 var(--v2-sans);color:var(--v2-navy);margin-bottom:4px}

/* ── Zone d'intervention ── */
body.md-site .cs-zone{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
body.md-site .cs-zone ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
body.md-site .cs-zone li{font:600 13.5px var(--v2-sans);color:var(--v2-navy);background:#fff;border:1px solid var(--v2-line);border-radius:999px;padding:7px 14px}
body.md-site .cs-zone li.is-home{background:var(--v2-navy);color:#fff;border-color:var(--v2-navy)}
body.md-site .cs-zone-card{background:var(--v2-navy);color:#fff;border-radius:20px;padding:28px 30px}
body.md-site .cs-zone-card .v2-kicker{color:var(--v2-gold)}
body.md-site .cs-zone-card h3{font-family:var(--v2-serif);font-size:28px;font-weight:600;line-height:1.15;color:#fff;margin:0 0 10px}
body.md-site .cs-zone-card p{font:400 15px/1.6 var(--v2-sans);color:rgba(246,241,231,.75);margin:0}

@media (max-width:960px){
	body.md-site .cs-visual{min-height:500px}
	body.md-site .cs-offer,body.md-site .cs-zone{grid-template-columns:1fr;gap:32px}
	body.md-site .cs-price-note{grid-template-columns:1fr}
	body.md-site .cs-phone{right:0}
	body.md-site .cs-f-mock{left:0}
}
@media (max-width:480px){
	body.md-site .cs-visual{min-height:440px}
	body.md-site .cs-hero{grid-template-columns:1fr}
	body.md-site .cs-photo{height:90px}
	body.md-site .cs-cards{display:none}
	body.md-site .cs-phone{width:104px;height:204px;bottom:2%}
	body.md-site .cs-f-lead{display:none}
	body.md-site .cs-price{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
	body.md-site .cs-visual{opacity:1;transform:none}
	body.md-site .cs-visual *,body.md-site .pe-mock *{animation:none !important}
}

/* ── Pages départements : « ce qui change sur ce territoire » (page-site-ville.php) ── */
body.md-site .cs-local{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
body.md-site .cs-local-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--v2-line);border-radius:18px;padding:26px 24px 22px}
body.md-site .cs-local-n{font:600 30px/1 var(--v2-serif);font-variant-numeric:lining-nums;color:var(--v2-gold-deep,#C9901A);margin-bottom:14px}
body.md-site .cs-local-card h3{font:700 18px/1.3 var(--v2-sans);color:var(--v2-navy);margin:0 0 10px}
body.md-site .cs-local-card p{font:400 15px/1.6 var(--v2-sans);color:var(--v2-muted);margin:0}
body.md-site .cs-local-card p.cs-local-do{margin-top:auto;padding-top:18px;font-size:14px;color:var(--v2-ink,#1b2838)}
body.md-site .cs-local-do b{display:block;font:700 11px/1 var(--v2-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--v2-navy);border-left:3px solid var(--v2-gold);padding-left:9px;margin-bottom:8px}
@media (max-width:960px){
	body.md-site .cs-local{grid-template-columns:1fr;gap:14px}
}