/* Vitrine ES-Protect, version allegee : accueil court, details sur les pages
   dediees et dans des sections depliantes. S'ajoute a style.css. */
:root { --v2-bord: #e4e4f3; --v2-pale: #f5f5fe; --v2-encre: #14143a }

/* situations : 4 cartes, le reste se deplie */
.v2-grille4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px }
.v2-cas { background: #fff; border: 1px solid var(--v2-bord); border-radius: 18px; padding: 18px; box-shadow: 0 1px 2px rgba(20,20,80,.04), 0 14px 30px -24px rgba(20,20,80,.35) }
.v2-cas h3 { font-size: 1.02rem; margin: 0 0 6px; line-height: 1.35 } .v2-cas p { margin: 0; font-size: .92rem; color: #4a4d6b; line-height: 1.55 }
.v2-plus { margin-top: 16px; border-radius: 16px }
.v2-plus > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bleu); padding: 10px 16px; border: 1px solid var(--v2-bord); border-radius: 99px; background: #fff }
.v2-plus > summary::-webkit-details-marker { display: none }
.v2-plus > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s }
.v2-plus[open] > summary::after { transform: rotate(-135deg) translateY(-2px) }
.v2-plus[open] > summary { margin-bottom: 6px }
.v2-plus--petit > summary { padding: 6px 12px; font-size: .9rem }
.v2-plus--petit[open] { padding-bottom: 4px } .v2-plus--petit ol { margin: 8px 0; padding-left: 20px; font-size: .92rem }
.v2-lien-suite { margin: 22px 0 0 } .v2-lien-suite a { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--bleu); text-decoration: none }
.v2-lien-suite a:hover { text-decoration: underline } .v2-lien-suite--centre { text-align: center }
.v2-lien-suite .bouton { color: #fff }

/* formules */
.v2-formules { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; margin-top: 26px; align-items: stretch }
.v2-formule { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--v2-bord); border-radius: 22px; padding: 24px;
  box-shadow: 0 1px 2px rgba(20,20,80,.04), 0 18px 40px -28px rgba(20,20,80,.4) }
.v2-formule--phare { border: 2px solid var(--bleu); background: linear-gradient(180deg, #f5f5fe, #fff 45%); box-shadow: 0 24px 50px -28px rgba(0,0,145,.55) }
.v2-formule__badge { position: absolute; top: -13px; left: 22px; background: var(--rouge); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px }
.v2-formule h3 { margin: 4px 0 0; font-size: 1.25rem } .v2-formule__accroche { margin: 0; color: #4a4d6b }
.v2-formule ul, .v2-coches { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 8px; font-size: .94rem }
.v2-formule li { display: flex; gap: 8px; align-items: flex-start } .v2-formule li svg { flex: none; margin-top: 3px; color: #18753c }
.v2-coches li { position: relative; padding-left: 24px } .v2-coches li::before { content: ''; position: absolute; left: 4px; top: 5px; width: 6px; height: 11px; border-right: 2.5px solid #18753c; border-bottom: 2.5px solid #18753c; transform: rotate(45deg) }
.v2-formule__prix { margin: auto 0 0; padding-top: 10px; font-weight: 800; color: var(--bleu); font-size: 1.05rem }
.v2-formule .bouton { justify-content: center; text-align: center }

/* montants */
.v2-montants { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.v2-montants li { border-radius: 18px; padding: 18px; background: #fff; border: 1px solid var(--v2-bord); display: grid; gap: 6px }
.v2-montants li:nth-child(n+3) { border-color: #f3b3b7; background: #fffafa }
.v2-montants span { font-size: .86rem; color: #4a4d6b } .v2-montants b { font-size: 1.35rem; color: var(--rouge); line-height: 1.2 }

/* questions */
.v2-faq { display: grid; gap: 10px; max-width: 860px; margin: 24px auto 0 }
.v2-question { border: 1px solid var(--v2-bord); border-radius: 16px; background: #fff; padding: 0 18px }
.v2-question summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 700; position: relative }
.v2-question summary::-webkit-details-marker { display: none }
.v2-question summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 1.4rem; color: var(--bleu); font-weight: 400 }
.v2-question[open] summary::after { content: '−' }
.v2-question p { margin: 0 0 16px; color: #3b3e5c; line-height: 1.65 }

/* pages internes */
.v2-bandeau { padding: 56px 0 36px; background: linear-gradient(160deg, #f5f5fe, #fff 70%); border-bottom: 1px solid var(--v2-bord) }
.v2-bandeau h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 12px 0; max-width: 820px; line-height: 1.15 } .v2-bandeau h1 em { color: var(--bleu); font-style: normal }
.v2-bandeau p { max-width: 720px; font-size: 1.08rem; color: #3b3e5c; margin: 0 0 8px }
.v2-bandeau__info { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: #18753c !important; font-size: .98rem !important }
.v2-note { color: #4a4d6b; font-size: .92rem; margin-top: 16px }
.v2-tableau { overflow-x: auto; margin-top: 20px; border-radius: 18px; border: 1px solid var(--v2-bord); background: #fff }
.v2-tableau table { width: 100%; border-collapse: collapse; min-width: 560px }
.v2-tableau th, .v2-tableau td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--v2-bord); font-size: .94rem }
.v2-tableau thead th { background: var(--v2-pale); color: var(--bleu); font-size: .9rem } .v2-tableau tbody th { font-weight: 600 }
.v2-tableau td:nth-child(2) { font-weight: 700; color: var(--v2-encre) } .v2-tableau tr:last-child th, .v2-tableau tr:last-child td { border-bottom: 0 }
.v2-avantages { margin-top: 12px }

/* formations */
.v2-atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px }
.v2-atouts div { padding: 16px; border-radius: 16px; background: var(--v2-pale) } .v2-atouts b { display: block; color: var(--bleu) } .v2-atouts p { margin: 4px 0 0; font-size: .9rem; color: #4a4d6b }
.v2-catalogue { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px }
.v2-parcours { background: #fff; border: 1px solid var(--v2-bord); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 40px -30px rgba(20,20,80,.45) }
.v2-parcours h3 { margin: 4px 0 0; font-size: 1.2rem } .v2-parcours > p { margin: 0 }
.v2-parcours__tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .88rem }
.v2-niveau { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px }
.v2-niveau.n1 { background: #eafaf0; color: #18753c } .v2-niveau.n2 { background: #eef3ff; color: #0b4fd6 } .v2-niveau.n3 { background: #fff4e5; color: #a8550c } .v2-niveau.n4 { background: #f8ecff; color: #7a1fa8 }
.v2-parcours__pied { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--v2-bord) }
.v2-parcours__prix { font-weight: 800; font-size: 1.25rem; color: var(--bleu) }

/* formulaires d'achat */
.v2-form { display: grid; gap: 14px }
.v2-champ { display: grid; gap: 5px; position: relative } .v2-champ label { font-weight: 600; font-size: .93rem } .v2-champ small { color: #666; font-size: .82rem }
.v2-champ input { width: 100%; box-sizing: border-box; border: 1px solid #c9cbe0; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; background: #fff }
.v2-champ input:focus { outline: 3px solid rgba(0,0,145,.18); border-color: var(--bleu) }
.v2-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.v2-case { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.5; cursor: pointer }
.v2-case input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bleu) }
.v2-erreur { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fff1f1; color: #b00010; font-weight: 600 }
.v2-info { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--v2-pale); color: var(--v2-encre) }
.v2-suggestions { position: absolute; z-index: 20; top: 76px; left: 0; right: 0; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid #c9cbe0; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(20,20,80,.45) }
.v2-suggestions button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font: inherit; cursor: pointer }
.v2-suggestions button:hover { background: var(--v2-pale) }
.v2-verif { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start }
.v2-verif .v2-form { background: #fff; border: 1px solid var(--v2-bord); border-radius: 22px; padding: 24px; box-shadow: 0 18px 40px -30px rgba(20,20,80,.45) }
.v2-verif .v2-form h2 { margin: 0 }
.v2-verif__aside { position: sticky; top: 100px } .v2-verif__aside ol { padding-left: 20px; line-height: 1.7 }
.v2-encart { margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--v2-pale); border: 1px solid var(--v2-bord) } .v2-encart p { margin: 6px 0 10px; font-size: .93rem }
.v2-modale { position: fixed; inset: 0; z-index: 1000; background: rgba(10,12,40,.55); display: grid; place-items: center; padding: 16px }
.v2-modale[hidden] { display: none }
.v2-modale__boite { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border-radius: 22px; padding: 26px }
.v2-modale__boite h2 { margin: 0 30px 4px 0 }
.v2-modale__fermer { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--v2-pale); font-size: 1.3rem; cursor: pointer }

@media (max-width: 980px) {
  .v2-grille4, .v2-montants, .v2-atouts { grid-template-columns: repeat(2, 1fr) }
  .v2-formules { grid-template-columns: 1fr } .v2-catalogue, .v2-verif { grid-template-columns: 1fr } .v2-verif__aside { position: static }
}
@media (max-width: 560px) {
  .v2-grille4, .v2-atouts { grid-template-columns: 1fr } .v2-duo { grid-template-columns: 1fr }
  .v2-montants b { font-size: 1.15rem } .v2-bandeau { padding: 36px 0 26px }
  .v2-formule, .v2-parcours { padding: 20px }
}

/* gamme haute : programmes et packs */
.v2-titre-gamme { font-size: 1.3rem; margin: 6px 0 14px }
.v2-offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; align-items: stretch }
.v2-offre { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--v2-bord); border-radius: 22px; padding: 24px; box-shadow: 0 18px 40px -30px rgba(20,20,80,.45) }
.v2-offre--phare { border: 2px solid var(--bleu); box-shadow: 0 24px 50px -28px rgba(0,0,145,.55) }
.v2-offre h3 { margin: 4px 0 0; font-size: 1.2rem } .v2-offre__accroche { margin: 0; color: #4a4d6b } .v2-offre__duree { margin: 4px 0 0; font-size: .88rem }
.v2-code { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--v2-bord); border-radius: 22px; padding: 26px } .v2-code h2 { margin: 0 }
@media (max-width: 980px) { .v2-offres { grid-template-columns: 1fr } }

/* ═══ LE VRAI COUT : section choc ═══ */
.v2-cout { position: relative; overflow: hidden; color: #fff; padding: 96px 0 88px; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 120%, #4a0010 0%, #16000a 45%, #05050f 100%) }
.v2-cout__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
              radial-gradient(60% 50% at 50% 100%, rgba(255,20,50,.35), transparent 70%);
  animation: cout-pouls 2.6s ease-in-out infinite }
.v2-cout.est-alarme .v2-cout__fond { animation: cout-alarme .9s ease-in-out infinite }
@keyframes cout-pouls { 50% { opacity: .55 } }
@keyframes cout-alarme { 0%, 100% { opacity: .6 } 50% { opacity: 1; filter: brightness(1.6) } }
.v2-cout::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(255,30,60,0); transition: box-shadow .4s }
.v2-cout.est-alarme::after { animation: cout-cadre 1.2s ease-in-out infinite }
@keyframes cout-cadre { 50% { box-shadow: inset 0 0 120px 10px rgba(255,30,60,.35) } }
.v2-cout__alerte { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 14px; border-radius: 99px; font-weight: 800; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: #ff5470; background: rgba(255,40,70,.12); border: 1px solid rgba(255,60,90,.45); animation: cout-clignote 1.4s steps(2) infinite }
@keyframes cout-clignote { 50% { color: #fff; background: rgba(255,40,70,.35) } }
.v2-cout__titre { position: relative; color: #fff !important; font-size: clamp(2.1rem, 5.6vw, 4rem); line-height: 1.05; margin: 0 0 16px; max-width: 900px; letter-spacing: -.03em }
.v2-cout__titre em { font-style: normal; color: #ff2a4a; text-shadow: 0 0 28px rgba(255,30,60,.6) }
.v2-cout__titre::before, .v2-cout__titre::after { content: attr(data-texte); position: absolute; inset: 0; pointer-events: none; opacity: 0 }
.v2-cout.est-vu .v2-cout__titre::before { color: #00f0ff; animation: cout-glitch-a 3.2s infinite steps(1) }
.v2-cout.est-vu .v2-cout__titre::after { color: #ff2a4a; animation: cout-glitch-b 3.2s infinite steps(1) }
@keyframes cout-glitch-a { 0%, 86%, 100% { opacity: 0 } 88% { opacity: .8; transform: translate(-4px, 2px); clip-path: inset(10% 0 55% 0) } 92% { opacity: .8; transform: translate(3px, -2px); clip-path: inset(60% 0 8% 0) } }
@keyframes cout-glitch-b { 0%, 87%, 100% { opacity: 0 } 89% { opacity: .8; transform: translate(4px, -1px); clip-path: inset(40% 0 30% 0) } 93% { opacity: .8; transform: translate(-3px, 2px); clip-path: inset(5% 0 75% 0) } }
.v2-cout__chapeau { max-width: 720px; font-size: 1.15rem; color: rgba(255,255,255,.78); margin: 0 0 44px } .v2-cout__chapeau b { color: #fff }

.v2-escalier { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: end }
.v2-escalier li { display: flex; flex-direction: column; gap: 8px; opacity: .25; transform: translateY(24px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * .7s) }
.v2-cout.est-vu .v2-escalier li { opacity: 1; transform: none }
.v2-escalier__colonne { position: relative; height: 300px; display: flex; align-items: flex-end; border-bottom: 2px solid rgba(255,255,255,.18) }
.v2-escalier__barre { display: block; width: 100%; height: var(--h); border-radius: 14px 14px 0 0; transform-origin: bottom; transform: scaleY(0);
  background: linear-gradient(180deg, #ff2a4a 0%, #b0001e 60%, #4a0010 100%); box-shadow: 0 0 40px rgba(255,30,60,.45), inset 0 2px 0 rgba(255,255,255,.35);
  transition: transform 1.1s cubic-bezier(.2,.9,.2,1); transition-delay: calc(var(--i) * .7s) }
.v2-escalier li:nth-child(4) .v2-escalier__barre { background: linear-gradient(180deg, #ff6a00 0%, #ff1a3d 30%, #8a0018 100%); box-shadow: 0 0 70px rgba(255,40,40,.75) }
.v2-cout.est-vu .v2-escalier__barre { transform: scaleY(1) }
.v2-escalier__montant { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 900; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 6px }
.v2-escalier__montant.est-impact { animation: cout-impact .55s ease-out }
@keyframes cout-impact { 0% { transform: scale(1.35); color: #ff2a4a; text-shadow: 0 0 30px #ff2a4a } 100% { transform: none } }
.v2-escalier__nom { font-weight: 800; color: #ff8a9c; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em }
.v2-escalier small { color: rgba(255,255,255,.65); font-size: .88rem; line-height: 1.5 }

.v2-cumul { margin-top: 48px; padding: 28px 30px; border-radius: 24px; border: 1px solid rgba(255,60,90,.5); text-align: center;
  background: linear-gradient(180deg, rgba(255,30,60,.14), rgba(255,30,60,.04)); opacity: 0; transform: scale(.94); transition: opacity .6s, transform .6s; transition-delay: 2.9s }
.v2-cout.est-vu .v2-cumul { opacity: 1; transform: none }
.v2-cumul__label { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #ff8a9c; font-size: .85rem }
.v2-cumul__montant { display: block; font-size: clamp(3rem, 9vw, 6.2rem); font-weight: 900; line-height: 1; margin: 10px 0; color: #ff2a4a; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(255,30,60,.7), 0 0 90px rgba(255,30,60,.4) }
.v2-cumul p { max-width: 760px; margin: 0 auto; color: rgba(255,255,255,.8) } .v2-cumul p b { color: #fff }
.v2-cout.est-secousse { animation: cout-secousse .5s cubic-bezier(.36,.07,.19,.97) }
@keyframes cout-secousse { 10%, 90% { transform: translate(-2px, 1px) } 20%, 80% { transform: translate(4px, -2px) } 30%, 50%, 70% { transform: translate(-6px, 2px) } 40%, 60% { transform: translate(6px, -1px) } }
.v2-cout__actions { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 34px }
.v2-cout__bouton { background: #ff1a3d !important; border-color: #ff1a3d !important; color: #fff !important; box-shadow: 0 14px 40px -10px rgba(255,30,60,.8); animation: cout-respire 2s ease-in-out infinite }
@keyframes cout-respire { 50% { box-shadow: 0 14px 60px -6px rgba(255,30,60,1) } }
.v2-cout__lien { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px }

@media (max-width: 760px) {
  .v2-cout { padding: 70px 0 64px }
  .v2-escalier { grid-template-columns: 1fr; gap: 14px }
  .v2-escalier li { display: grid; grid-template-columns: 1fr; gap: 4px }
  .v2-escalier__colonne { height: 14px; border: 0; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; align-items: stretch }
  .v2-escalier__barre { height: 100%; width: var(--h); border-radius: 99px; transform: scaleX(0); transform-origin: left }
  .v2-cout.est-vu .v2-escalier__barre { transform: scaleX(1) }
}
@media (prefers-reduced-motion: reduce) {
  .v2-cout *, .v2-cout, .v2-cout::after, .v2-cout__fond { animation: none !important; transition: none !important }
  .v2-escalier li, .v2-cumul { opacity: 1; transform: none } .v2-escalier__barre { transform: none !important }
}
.v2-cout__alerte { display: flex; width: fit-content }
.v2-escalier { align-items: start }

/* ═══════════ ACCUEIL v3 : fond blanc, maquettes, photos, effets ═══════════ */
.v3-section { position: relative; padding: 96px 0; background: #fff; overflow: hidden }
.v3-section--pale { background: linear-gradient(180deg, #f6f6fe, #fff) }
.v3-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(0,0,145,.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 70%) }
.v3-section > .conteneur { position: relative }
.v3-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center }
.v3-duo--inverse > :first-child { order: 2 }
.v3-tete { margin-bottom: 28px } .v3-tete--centre { text-align: center; max-width: 820px; margin-inline: auto }
.v3-surtitre { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: #eef0ff; color: var(--bleu); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase }
.v3-tete h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem) !important; line-height: 1.06; letter-spacing: -.035em; margin: 14px 0 14px; color: #14143a }
.v3-tete p { font-size: 1.12rem; color: #4a4d6b; max-width: 600px; margin: 0 } .v3-tete--centre p { margin-inline: auto }
.v3-rouge { font-style: normal; background: linear-gradient(90deg, #e1000f, #ff4d6d); -webkit-background-clip: text; background-clip: text; color: transparent }
.v3-bleu { font-style: normal; background: linear-gradient(90deg, #000091, #5b5bff); -webkit-background-clip: text; background-clip: text; color: transparent }

/* apparition au defilement */
.v3-rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * .12s) }
.v3-rv.est-vu { opacity: 1; transform: none }

/* situations */
.v3-cas-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px }
.v3-cas { position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #fff;
  border: 1px solid #ececf6; box-shadow: 0 1px 2px rgba(20,20,80,.04), 0 16px 34px -26px rgba(20,20,80,.45); transition: transform .25s, box-shadow .25s, border-color .25s }
.v3-cas:hover { transform: translateX(6px); border-color: #ffc2ca; box-shadow: 0 20px 40px -24px rgba(225,0,15,.35) }
.v3-cas__icone { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #e1000f; background: linear-gradient(135deg, #fff1f2, #ffe0e4) }
.v3-cas__icone svg { width: 26px; height: 26px }
.v3-cas b { display: block; font-size: 1.04rem; color: #14143a } .v3-cas p { margin: 3px 0 0; font-size: .92rem; color: #4a4d6b; line-height: 1.5 }
.v3-cas__num { font-weight: 900; font-size: 1.6rem; color: #eceefb; letter-spacing: -.04em }

/* photos et maquettes */
.v3-scene { position: relative; padding: 30px 20px }
.v3-photo { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(20,20,80,.55); transform: rotate(-1.5deg) }
.v3-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; transition: transform 6s ease }
.v3-scene:hover .v3-photo img { transform: scale(1.06) }
.v3-maquette { position: absolute; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(20,20,80,.45), 0 0 0 1px rgba(20,20,80,.05); font-family: 'Inter', system-ui, sans-serif }
.v3-flotte { animation: v3-flotte 5s ease-in-out infinite } .v3-flotte--lent { animation-duration: 7s; animation-delay: -2s }
@keyframes v3-flotte { 50% { transform: translateY(-12px) } }
.v3-releve { left: -24px; bottom: -10px; width: 300px; padding: 14px 16px }
.v3-maquette__tete { display: flex; justify-content: space-between; margin: 0 0 8px; font-weight: 800; color: #14143a; font-size: .9rem } .v3-maquette__tete small { color: #888; font-weight: 600 }
.v3-releve__ligne { position: relative; display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 7px 0; border-top: 1px solid #f0f0f6; font-size: .8rem; color: #4a4d6b }
.v3-releve__ligne b { color: #14143a; white-space: nowrap } .v3-vert { color: #18753c !important }
.v3-releve__ligne--alerte { margin: 2px -8px; padding: 7px 8px; border-radius: 10px; background: #fff1f2; color: #b0000c; font-weight: 700; animation: v3-alerte-ligne 2s ease-in-out infinite }
.v3-releve__ligne--alerte b { color: #e1000f }
.v3-releve__ligne--alerte em { position: absolute; right: -6px; top: -14px; font-style: normal; font-size: .68rem; font-weight: 800; color: #fff; background: #e1000f; padding: 3px 8px; border-radius: 99px; box-shadow: 0 6px 14px -4px rgba(225,0,15,.6) }
@keyframes v3-alerte-ligne { 50% { box-shadow: 0 0 0 4px rgba(225,0,15,.15) } }
.v3-notif { display: flex; gap: 12px; align-items: center; padding: 12px 16px; max-width: 320px }
.v3-notif b { display: block; font-size: .88rem; color: #14143a } .v3-notif small { display: block; font-size: .8rem; color: #4a4d6b; line-height: 1.35 }
.v3-notif__icone { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff }
.v3-notif--rouge .v3-notif__icone { background: linear-gradient(135deg, #ff4d6d, #e1000f) } .v3-notif--vert .v3-notif__icone { background: linear-gradient(135deg, #2ec27e, #18753c) }
.v3-concerne .v3-notif { right: -10px; top: 0 }
.v3-notif--haut { right: -14px; top: -6px }

/* frise */
.v3-frise { list-style: none; padding: 0 0 0 4px; margin: 0; position: relative; display: grid; gap: 20px }
.v3-frise::before { content: ''; position: absolute; left: 25px; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: #e4e4f3 }
.v3-frise::after { content: ''; position: absolute; left: 25px; top: 20px; width: 3px; height: 0; border-radius: 3px; background: linear-gradient(180deg, #000091, #5b5bff, #e1000f); transition: height 2.4s cubic-bezier(.3,.8,.3,1) }
.v3-frise.est-vu::after { height: calc(100% - 40px) }
.v3-etape { position: relative; padding-left: 70px; min-height: 46px }
.v3-etape__num { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; z-index: 1;
  background: linear-gradient(135deg, #000091, #3a3aff); box-shadow: 0 10px 24px -8px rgba(0,0,145,.6) }
.v3-etape__num--rouge { background: linear-gradient(135deg, #ff4d6d, #e1000f); box-shadow: 0 10px 24px -8px rgba(225,0,15,.6) }
.v3-etape b { display: block; font-size: 1.1rem; color: #14143a; padding-top: 2px } .v3-etape p { margin: 3px 0 0; color: #4a4d6b }
.v3-lien { margin: 26px 0 0 } .v3-lien a { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: var(--bleu); text-decoration: none } .v3-lien a:hover { text-decoration: underline }

/* telephone */
.v3-scene--tel { display: grid; place-items: center }
.v3-tel { width: 290px; padding: 12px; border-radius: 44px; background: #14143a; box-shadow: 0 50px 90px -40px rgba(0,0,145,.7), inset 0 0 0 2px #2b2b5a; transform: rotate(3deg) }
.v3-tel__ecran { border-radius: 34px; background: linear-gradient(180deg, #f5f5fe, #fff 40%); padding: 26px 18px 20px; min-height: 500px }
.v3-tel__haut { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-weight: 800; color: #14143a; font-size: .9rem }
.v3-tel__titre { margin: 0 0 10px; font-weight: 800; font-size: 1.12rem; color: #14143a }
.v3-tel__jauge { height: 10px; border-radius: 99px; background: #e4e4f3; overflow: hidden }
.v3-tel__jauge i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #000091, #5b5bff); transition: width 2.2s cubic-bezier(.3,.8,.3,1) }
.v3-tel__legende { margin: 8px 0 16px; font-size: .82rem; color: #4a4d6b }
.v3-tel__liste { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px }
.v3-tel__liste li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -12px rgba(20,20,80,.4); font-size: .86rem; font-weight: 600; color: #14143a }
.v3-tel__liste li.ok svg { color: #18753c; flex: none }
.v3-tel__liste li.en-cours i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2.5px solid #dfe0f5; border-top-color: #000091; animation: robot-tourne .9s linear infinite }
.v3-tel__bulle { margin: 0; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #000091; color: #fff; font-size: .84rem; line-height: 1.45 }
.v3-comment .v3-notif { left: -6px; bottom: 30px }
@keyframes robot-tourne { to { transform: rotate(360deg) } }

/* le vrai cout en version claire : textes sombres, rouge vif */
.v2-cout--clair { color: #14143a; background: radial-gradient(90% 70% at 50% 110%, #ffe3e7 0%, #fff6f7 40%, #fff 75%) }
.v2-cout--clair .v2-cout__fond { background: repeating-linear-gradient(0deg, rgba(225,0,15,.035) 0 1px, transparent 1px 5px), radial-gradient(60% 45% at 50% 100%, rgba(255,40,70,.22), transparent 70%) }
.v2-cout--clair .v2-cout__alerte { color: #c4000d; background: #fff1f2; border-color: #ffc2ca }
@keyframes cout-clignote { 50% { color: #fff; background: #e1000f } }
.v2-cout--clair .v2-cout__titre { color: #14143a !important }
.v2-cout--clair .v2-cout__titre em { color: #e1000f; text-shadow: 0 0 24px rgba(225,0,15,.25) }
.v2-cout--clair.est-vu .v2-cout__titre::before { color: #00b8d4 } .v2-cout--clair.est-vu .v2-cout__titre::after { color: #e1000f }
.v2-cout--clair .v2-cout__chapeau { color: #4a4d6b } .v2-cout--clair .v2-cout__chapeau b { color: #14143a }
.v2-cout--clair .v2-escalier__colonne { border-bottom-color: #f0c9cf }
.v2-cout--clair .v2-escalier__barre { box-shadow: 0 20px 40px -14px rgba(225,0,15,.55), inset 0 2px 0 rgba(255,255,255,.4) }
.v2-cout--clair .v2-escalier__montant { color: #14143a }
.v2-cout--clair .v2-escalier__nom { color: #c4000d } .v2-cout--clair .v2-escalier small { color: #4a4d6b }
@keyframes cout-impact { 0% { transform: scale(1.35); color: #e1000f; text-shadow: 0 0 24px rgba(225,0,15,.5) } 100% { transform: none } }
.v3-cout-bas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 48px }
.v2-cout--clair .v2-cumul { margin-top: 0; background: #fff; border: 2px solid #ffc2ca; box-shadow: 0 30px 60px -30px rgba(225,0,15,.45) }
.v2-cout--clair .v2-cumul__label { color: #c4000d } .v2-cout--clair .v2-cumul__montant { color: #e1000f; text-shadow: 0 10px 40px rgba(225,0,15,.3) }
.v2-cout--clair .v2-cumul p { color: #4a4d6b } .v2-cout--clair .v2-cumul p b { color: #14143a }
.v2-cout--clair.est-alarme .v2-cumul { animation: v3-cumul-alarme 1.1s ease-in-out infinite }
@keyframes v3-cumul-alarme { 50% { border-color: #e1000f; box-shadow: 0 0 0 6px rgba(225,0,15,.12), 0 30px 60px -30px rgba(225,0,15,.6) } }
.v2-cout--clair.est-alarme::after { animation: v3-cadre-clair 1.2s ease-in-out infinite }
@keyframes v3-cadre-clair { 50% { box-shadow: inset 0 0 120px 0 rgba(225,0,15,.18) } }
.v2-cout--clair .v2-cout__lien { color: #14143a }
.v3-lettre { position: relative; background: #fff; border-radius: 6px; padding: 26px 24px; box-shadow: 0 40px 70px -30px rgba(20,20,80,.5), 0 0 0 1px #eee; transform: rotate(3deg); font-family: Georgia, 'Times New Roman', serif; color: #222;
  opacity: 0; transition: opacity .7s, transform .7s; transition-delay: 3.4s }
.v2-cout.est-vu .v3-lettre { opacity: 1; transform: rotate(3deg) translateY(0) }
.v3-lettre p { margin: 0 0 8px } .v3-lettre__exp { font-size: .78rem; color: #777; text-transform: uppercase; letter-spacing: .08em }
.v3-lettre__objet { font-weight: 700; font-size: 1rem; margin-bottom: 14px !important }
.v3-lettre__ligne { height: 7px; border-radius: 4px; background: #ececec } .v3-lettre__ligne--court { width: 62% }
.v3-lettre__montant { margin: 14px 0 !important; font-size: 1rem } .v3-lettre__montant b { color: #e1000f; font-size: 1.15rem }
.v3-lettre__delai { font-weight: 700; color: #b0000c; font-size: .86rem; margin-top: 12px !important }
.v3-lettre__tampon { position: absolute; top: 20px; right: 16px; transform: rotate(-14deg) scale(2); opacity: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  color: #e1000f; border: 3px solid #e1000f; padding: 4px 12px; border-radius: 6px; transition: transform .35s cubic-bezier(.5,1.8,.6,1), opacity .2s; transition-delay: 4.2s }
.v2-cout.est-vu .v3-lettre__tampon { opacity: .9; transform: rotate(-14deg) scale(1) }

/* appel final */
.v3-final { background: linear-gradient(180deg, #fff, #f3f4ff) }
.v3-photo--grande { transform: rotate(1.5deg) }
.v3-pastille-chiffre { left: -16px; bottom: 6px; padding: 16px 20px; display: flex; gap: 12px; align-items: center }
.v3-pastille-chiffre b { font-size: 2.2rem; font-weight: 900; color: var(--bleu); letter-spacing: -.04em } .v3-pastille-chiffre small { color: #4a4d6b; font-weight: 600; line-height: 1.25 }
.v3-final__embleme { width: 60px; height: 60px; border-radius: 18px; padding: 8px; background: #fff; box-shadow: 0 16px 34px -14px rgba(0,0,145,.45); margin-bottom: 16px }
.v3-final__texte h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.035em; margin: 0 0 14px; color: #14143a }
.v3-final__texte p { font-size: 1.12rem; color: #4a4d6b; margin: 0 0 24px }
.v3-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap }
.v3-lien-simple { font-weight: 700; color: var(--bleu) }
.v3-garanties { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #4a4d6b; font-size: .9rem }
.v3-garanties li { display: inline-flex; gap: 6px; align-items: center } .v3-garanties svg { color: #18753c }

/* compteur en direct, version claire */
.v3-live { color: #14143a !important; background: linear-gradient(180deg, #fff, #fff4f5 60%, #fff) !important }
.v3-live::before { opacity: .35 !important; background-image: radial-gradient(rgba(225,0,15,.12) 1px, transparent 1px) !important; background-size: 22px 22px !important }
.v3-live .v-live__direct { color: #fff !important; background: #e1000f !important; border-color: #e1000f !important; box-shadow: 0 8px 20px -6px rgba(225,0,15,.6) }
.v3-live .v-live__horloge { color: #14143a !important; background: #fff !important; border: 1px solid #ececf6 !important; box-shadow: 0 6px 16px -10px rgba(20,20,80,.4) }
.v3-live .v-live__horloge b { background: #eef0ff !important; color: var(--bleu) !important }
.v3-live .v-live__titre { color: #14143a !important; font-size: clamp(1.6rem, 3.4vw, 2.5rem) !important; letter-spacing: -.03em } .v3-live .v-live__titre em { color: #e1000f !important }
.v3-live .v-odometre__roue { background: #14143a !important; box-shadow: 0 18px 34px -16px rgba(20,20,80,.7) !important }
.v3-live .v-live__legende { color: #4a4d6b !important } .v3-live .v-live__legende b { color: #14143a !important }
.v3-live .v-live__stat { background: #fff !important; border: 1px solid #ececf6 !important; box-shadow: 0 16px 34px -24px rgba(20,20,80,.45) }
.v3-live .v-live__label { color: #8a8daa !important } .v3-live .v-live__stat b { color: #14143a !important } .v3-live .v-live__rouge { color: #e1000f !important }
.v3-live .v-live__jauge { background: #f0f0f6 !important }
.v3-live .v-live__bouton { background: #e1000f !important; border-color: #e1000f !important; color: #fff !important; box-shadow: 0 16px 34px -12px rgba(225,0,15,.7) }
.v3-live .v-live__source { color: #8a8daa !important }
.v3-live__tel { position: relative; width: min(560px, 100%); margin: 28px auto 0 }
.v3-live__tel .v3-photo { transform: none; border-radius: 24px } .v3-live__tel .v3-photo img { aspect-ratio: 16/8 }
.v3-alertes { position: absolute; inset: 0; display: grid; place-items: center }
.v3-alertes .v3-notif { position: absolute; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .45s, transform .45s; text-align: left }
.v3-alertes .v3-notif.est-visible { opacity: 1; transform: none }

@media (max-width: 980px) {
  .v3-duo { grid-template-columns: 1fr; gap: 40px } .v3-duo--inverse > :first-child { order: 0 }
  .v3-section { padding: 70px 0 } .v3-cout-bas { grid-template-columns: 1fr }
  .v3-releve { left: 0; width: 270px } .v3-concerne .v3-notif, .v3-notif--haut { right: 0 }
  .v3-lettre { max-width: 420px; margin: 0 auto }
}
@media (max-width: 560px) {
  .v3-cas { grid-template-columns: 44px 1fr; padding: 14px } .v3-cas__num { display: none } .v3-cas__icone { width: 44px; height: 44px }
  .v3-scene { padding: 20px 6px } .v3-releve { position: relative; left: 0; bottom: 0; width: auto; margin: -40px 10px 0 }
  .v3-concerne .v3-notif { position: relative; right: 0; top: 0; margin: 12px 10px 0; max-width: none }
  .v3-tel { width: 260px } .v3-tel__ecran { min-height: 460px }
  .v3-alertes .v3-notif { max-width: 88% }
}
@media (prefers-reduced-motion: reduce) {
  .v3-rv, .v3-lettre, .v3-lettre__tampon { opacity: 1 !important; transform: none !important; transition: none !important }
  .v3-flotte, .v3-releve__ligne--alerte { animation: none !important }
  .v3-frise::after { height: calc(100% - 40px); transition: none }
}
.v3-tete h2, .v3-final__texte h2, .v2-cout__titre { border: 0 !important; padding-bottom: 0 !important; background-image: none }
.v3-tete h2::after, .v3-final__texte h2::after, .v2-cout__titre::after { display: none }
.v2-cout.est-vu .v2-cout__titre::after { display: block }
/* etiquette d'alerte toujours lisible : fond rouge plein, texte blanc, pulsation par halo */
.v2-cout--clair .v2-cout__alerte { color: #fff !important; background: #e1000f !important; border-color: #e1000f !important; animation: v3-halo-alerte 1.6s ease-in-out infinite !important }
@keyframes v3-halo-alerte { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,0,15,.45) } 50% { box-shadow: 0 0 0 10px rgba(225,0,15,0) } }
@media (max-width: 560px) {
  .v3-lettre { padding-top: 46px }
  .v3-lettre__tampon { top: -14px; right: 12px; font-size: .8rem; padding: 3px 9px; background: #fff }
}
/* un bouton « Ouvrir mon dossier » par section, sur ordinateur (le bouton collant prend le relais sur telephone) */
/* un bouton « Ouvrir mon dossier » par section */
.v3-cta-section { margin: 26px 0 0 } .v3-cta-centre { text-align: center } .v3-cta-centre .v3-cta-section { margin-top: 30px }
.v3-cta-ligne { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 26px } .v3-cta-ligne .v3-cta-section, .v3-cta-ligne .v3-lien { margin: 0 }
.v3-live .v-live__bouton { background: var(--bleu) !important; border-color: var(--bleu) !important; color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 18px 34px -14px rgba(0,0,145,.85), 0 0 0 6px rgba(0,0,145,.08) !important }
/* jamais deux boutons en meme temps : le collant s'efface quand un bouton de section est visible */
body.cta-a-l-ecran .v-collant { opacity: 0 !important; transform: translateY(130%) !important; pointer-events: none !important }
@media (max-width: 760px) { .v3-cta-ligne { gap: 16px } .v3-cta-ligne .v3-cta-section { width: 100% } }