/* GAMTEL — sécurité électronique et réseaux, Deauville et Côte Fleurie
   Feuille de style unique, sans framework. */
:root {
    --marine: #0B1F3A; --marine-2: #12305A; --bleu: #1E6FE8; --bleu-fonce: #1555B8; --bleu-clair: #E8F0FD;
    --orange: #FF7A1A; --orange-fonce: #E0640A; --vert: #1DB07A;
    --fond: #F3F6FA; --blanc: #fff; --texte: #122033; --doux: #5B6B82; --bordure: #E1E8F0;
    --rayon: 18px; --ombre: 0 12px 36px rgba(11,31,58,.10); --ombre-forte: 0 22px 60px rgba(11,31,58,.18); --conteneur: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--texte); background: var(--blanc); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }
h1, h2, h3, h4 { font-family: 'Sora', 'Manrope', sans-serif; margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--marine); }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.conteneur { width: min(var(--conteneur), 100% - 40px); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 15.5px; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,31,58,.18); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-fonce); }
.btn-bleu { background: var(--bleu); color: #fff; }
.btn-bleu:hover { background: var(--bleu-fonce); }
.btn-blanc { background: #fff; color: var(--marine); }
.btn-contour { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-contour:hover { background: rgba(255,255,255,.1); }
.btn-contour-marine { background: transparent; color: var(--marine); border-color: var(--marine); }
.btn-contour-marine:hover { background: var(--marine); color: #fff; }
.btn-grand { padding: 18px 34px; font-size: 17px; }
.btn svg { width: 18px; height: 18px; flex: none; }
a > svg, .carte-lien svg { width: 18px; height: 18px; vertical-align: middle; flex: none; }

/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--bordure); }
.entete-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 52px; width: auto; display: block; }
.logo svg { height: 37px; width: auto; aspect-ratio: 70 / 76; flex: none; align-self: flex-start; overflow: visible; }
.logo > span { display: flex; flex-direction: column; justify-content: space-between; height: 40px; }
.logo-texte { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; line-height: .78; }
.logo-texte span { color: var(--bleu); }
.logo-sous { display: block; white-space: nowrap; font-size: 10.5px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); font-weight: 600; margin-top: 0; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--texte); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.nav a:hover, .nav a.actif { color: var(--bleu); }
.entete-actions { display: flex; align-items: center; gap: 12px; }
.entete-actions .btn { white-space: nowrap; }
.tel-entete { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--marine); text-decoration: none; font-size: 15.5px; }
.tel-entete svg { width: 18px; height: 18px; color: var(--bleu); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--bordure); background: #fff; border-radius: 10px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--marine); border-radius: 2px; }
@media (max-width: 1140px) {
    .logo-sous { display: none; }
    .logo img { height: 42px; }
    .entete-actions .btn { padding: 11px 14px; font-size: 14px; }
    .nav { display: none; position: absolute; left: 0; right: 0; top: 76px; background: #fff; border-bottom: 1px solid var(--bordure); padding: 16px 20px 22px; flex-direction: column; align-items: flex-start; gap: 16px; box-shadow: var(--ombre); }
    .nav.ouvert { display: flex; }
    .burger { display: flex; }
    .tel-entete span { display: none; }
}

@media (max-width: 600px) { .logo img { height: 38px; } .entete-actions .btn { display: none; } .bandeau { font-size: 12px; padding: 6px 10px; } }

/* ---------- bandeau d'urgence / réassurance ---------- */
.bandeau { background: var(--marine); color: #fff; font-size: 13.5px; text-align: center; padding: 8px 12px; }
.bandeau strong { color: #FFB169; }

/* ---------- héros ---------- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--marine); }
.hero-fond { position: absolute; inset: 0; }
.hero-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,31,58,.94) 0%, rgba(11,31,58,.78) 45%, rgba(11,31,58,.35) 100%); }
.hero-inner { position: relative; padding: 96px 0 88px; max-width: 680px; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: #7FB2FF; }
.hero-sous { font-size: 1.15rem; color: rgba(255,255,255,.86); margin-bottom: 30px; max-width: 580px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 0; list-style: none; font-size: 14.5px; color: rgba(255,255,255,.9); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points svg { width: 18px; height: 18px; color: #7FE0B4; flex: none; }
.surtitre { display: inline-block; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--bleu); margin-bottom: 14px; }
.hero .surtitre { color: #FFB169; }
@media (max-width: 768px) { .hero-inner { padding: 64px 0 56px; } }

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section-fond { background: var(--fond); }
.section-marine { background: var(--marine); color: #fff; }
.section-marine h2, .section-marine h3 { color: #fff; }
.section-tete { max-width: 720px; margin-bottom: 44px; }
.section-tete.centre { margin-left: auto; margin-right: auto; text-align: center; }
.section-tete p { color: var(--doux); font-size: 1.08rem; }
.section-tete .surtitre { display: block; }
.section-marine .section-tete p { color: rgba(255,255,255,.8); }
@media (max-width: 768px) { .section { padding: 60px 0; } }

/* ---------- grille de services ---------- */
.grille { display: grid; gap: 24px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; } }
.carte { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte-visuel { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bleu-clair); }
.carte-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.carte:hover .carte-visuel img { transform: scale(1.04); }
.carte-corps { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-corps h3 a { color: inherit; text-decoration: none; }
.carte-corps h3 a:hover { color: var(--bleu); }
.carte-corps p { color: var(--doux); margin: 0; font-size: 15px; }
.carte-corps ul { margin: 4px 0 0; padding-left: 18px; color: var(--texte); font-size: 14.5px; }
.carte-corps ul li { margin: 3px 0; }
.carte-lien { margin-top: auto; padding-top: 10px; font-weight: 700; text-decoration: none; color: var(--bleu); display: inline-flex; align-items: center; gap: 6px; }
.carte-lien:hover { gap: 10px; }

/* ---------- atouts ---------- */
.atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .atouts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .atouts { grid-template-columns: 1fr; } }
.atout { background: #fff; border-radius: var(--rayon); padding: 26px 24px; border: 1px solid var(--bordure); }
.section-marine .atout { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.atout-icone { width: 48px; height: 48px; border-radius: 12px; background: var(--bleu-clair); color: var(--bleu); display: grid; place-items: center; margin-bottom: 14px; }
.section-marine .atout-icone { background: rgba(127,178,255,.15); color: #7FB2FF; }
.atout-icone svg { width: 24px; height: 24px; }
.atout h3 { font-size: 1.08rem; margin-bottom: 6px; }
.atout p { margin: 0; color: var(--doux); font-size: 14.5px; }
.section-marine .atout p { color: rgba(255,255,255,.75); }

/* ---------- chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
@media (max-width: 768px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }
.chiffre strong { display: block; font-family: 'Sora', sans-serif; font-size: 2.4rem; color: var(--orange); font-weight: 800; line-height: 1.1; }
.chiffre span { color: var(--doux); font-size: 14.5px; }
.section-marine .chiffre span { color: rgba(255,255,255,.75); }

/* ---------- bloc image + texte ---------- */
.duo { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.duo.inverse > .duo-visuel { order: 2; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 32px; } .duo.inverse > .duo-visuel { order: 0; } }
.duo-visuel { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 3 / 2; }
.duo-visuel img { width: 100%; height: 100%; object-fit: cover; }
.duo-texte p { color: var(--doux); font-size: 1.04rem; }
.liste-coches { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; }
.liste-coches li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.liste-coches svg { width: 20px; height: 20px; color: var(--vert); flex: none; margin-top: 2px; }

/* ---------- étapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: etape; }
@media (max-width: 1024px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }
.etape { position: relative; background: #fff; border-radius: var(--rayon); padding: 30px 24px 26px; border: 1px solid var(--bordure); }
.etape::before { counter-increment: etape; content: counter(etape); display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; margin-bottom: 14px; }
.etape h3 { font-size: 1.08rem; margin-bottom: 6px; }
.etape p { margin: 0; color: var(--doux); font-size: 14.5px; }

/* ---------- références ---------- */
.references { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.reference { padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--bordure); font-weight: 600; font-size: 14px; color: var(--marine); }
.secteurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 900px) { .secteurs { grid-template-columns: repeat(2, 1fr); } }
.secteur { background: #fff; border-radius: 14px; padding: 18px 20px; border: 1px solid var(--bordure); display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 15px; }
.secteur svg { width: 24px; height: 24px; color: var(--bleu); flex: none; }

/* ---------- témoignages ---------- */
.temoignages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .temoignages { grid-template-columns: 1fr; } }
.temoignage { background: #fff; border-radius: var(--rayon); padding: 26px; border: 1px solid var(--bordure); }
.temoignage p { font-size: 15.5px; color: var(--texte); margin-bottom: 14px; }
.temoignage footer { font-size: 14px; color: var(--doux); font-weight: 600; }
.etoiles { color: #F5B301; letter-spacing: 2px; margin-bottom: 10px; }

/* ---------- zone ---------- */
.villes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ville { padding: 8px 14px; border-radius: 999px; background: var(--bleu-clair); color: var(--marine); font-weight: 600; font-size: 14px; text-decoration: none; }
.ville:hover { background: var(--bleu); color: #fff; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 0 22px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--bleu); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--doux); padding-bottom: 18px; margin: 0; }

/* ---------- appel à l'action ---------- */
.cta { background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu)); color: #fff; border-radius: 26px; padding: 56px 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.cta h2 { color: #fff; margin-bottom: 10px; }
.cta p { color: rgba(255,255,255,.88); margin: 0; font-size: 1.05rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; padding: 40px 28px; } .cta-actions { justify-content: flex-start; } }

/* ---------- formulaire ---------- */
.formulaire { display: grid; gap: 16px; }
.form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-ligne { grid-template-columns: 1fr; } }
.champ label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.champ input, .champ select, .champ textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--bordure); border-radius: 12px; font: inherit; font-size: 15px; color: var(--texte); background: #fff; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(30,111,232,.14); }
.champ textarea { min-height: 110px; resize: vertical; }
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 600px) { .cases { grid-template-columns: 1fr; } }
.case { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--bordure); border-radius: 12px; cursor: pointer; font-size: 14.5px; font-weight: 600; background: #fff; }
.case:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); }
.case input { accent-color: var(--bleu); width: 18px; height: 18px; margin: 0; }
.form-note { font-size: 13px; color: var(--doux); margin: 0; }
.form-statut { font-size: 15px; font-weight: 600; min-height: 1.4em; }
.form-statut.erreur { color: #C62828; }
.form-statut.ok { color: var(--vert); }
.form-succes { background: #EAF8F1; border: 1px solid #BFE9D3; border-radius: var(--rayon); padding: 34px 28px; text-align: center; }
.form-succes h3 { color: #157A52; margin-bottom: 8px; }
.pot-de-miel { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- landing page devis ---------- */
.landing .entete-inner { height: 70px; }
.landing-hero { background: var(--marine); color: #fff; position: relative; overflow: hidden; }
.landing-grille { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; padding: 64px 0 72px; }
@media (max-width: 960px) { .landing-grille { grid-template-columns: 1fr; padding: 44px 0 56px; } }
.landing-hero h1 { color: #fff; margin-bottom: 16px; }
.landing-hero h1 em { font-style: normal; color: #FFB169; }
.landing-hero .hero-sous { color: rgba(255,255,255,.85); }
.landing-form { background: #fff; color: var(--texte); border-radius: 22px; padding: 30px 28px; box-shadow: var(--ombre-forte); }
.landing-form h2 { font-size: 1.35rem; margin-bottom: 4px; }
.landing-form .sous { color: var(--doux); font-size: 14.5px; margin-bottom: 18px; }
.garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 600px) { .garanties { grid-template-columns: 1fr; } }
.garantie { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px; font-size: 14px; }
.garantie svg { width: 26px; height: 26px; color: #7FB2FF; margin-bottom: 8px; }
.garantie strong { display: block; color: #fff; margin-bottom: 2px; font-size: 15px; }
.garantie span { color: rgba(255,255,255,.75); }
.appel-direct { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.appel-direct > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); }
.appel-direct > span svg { width: 24px; height: 24px; color: #FFB169; }
.appel-direct a { color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.5rem; text-decoration: none; }
.appel-direct small { color: rgba(255,255,255,.7); }

/* ---------- pages intérieures ---------- */
.page-hero { background: var(--marine); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.page-hero .hero-fond::after { background: linear-gradient(100deg, rgba(11,31,58,.96) 0%, rgba(11,31,58,.82) 50%, rgba(11,31,58,.5) 100%); }
.page-hero-inner { position: relative; max-width: 760px; }
.page-hero h1 { color: #fff; margin-bottom: 14px; }
.page-hero p { color: rgba(255,255,255,.86); font-size: 1.1rem; margin-bottom: 24px; }
.fil { font-size: 13.5px; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.fil a { color: rgba(255,255,255,.85); text-decoration: none; }
.prose { max-width: 820px; }
.prose p { color: var(--texte); font-size: 1.04rem; }
.prose h2 { margin: 40px 0 14px; }
.prose h3 { margin: 26px 0 10px; }
.prose ul { padding-left: 22px; }
.prose ul li { margin: 6px 0; }
.encart { background: var(--bleu-clair); border-left: 4px solid var(--bleu); border-radius: 12px; padding: 18px 22px; margin: 24px 0; }
.encart p { margin: 0; }

/* ---------- pied de page ---------- */
.pied { background: var(--marine); color: rgba(255,255,255,.8); padding: 60px 0 0; font-size: 14.5px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied-grille { grid-template-columns: 1fr; } }
.pied h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.pied a { color: rgba(255,255,255,.8); text-decoration: none; }
.pied a:hover { color: #fff; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied .logo { color: #fff; margin-bottom: 14px; }
.pied-logo { display: block; width: 300px; max-width: 100%; margin-bottom: 18px; }
.pied-logo img { width: 100%; height: auto; }
.pied-slogan { display: block; text-align: center; white-space: nowrap; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #AAB7CC; font-weight: 600; margin-top: 8px; }
.pied .logo-sous { color: rgba(255,255,255,.6); }
.pied-bas { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; font-size: 13px; color: rgba(255,255,255,.6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* ---------- WhatsApp ---------- */
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1DB954; }
.whatsapp-flottant { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 12px 30px rgba(37,211,102,.4); transition: transform .15s ease, box-shadow .15s ease; }
.whatsapp-flottant:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(37,211,102,.5); }
.whatsapp-flottant svg { width: 28px; height: 28px; }
@media (max-width: 768px) { .whatsapp-flottant { display: none; } }

/* ---------- bouton d'appel flottant (mobile) ---------- */
.appel-flottant { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; }
@media (max-width: 768px) {
    .appel-flottant { display: flex; gap: 10px; transform: translateY(130%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
    .appel-flottant.visible { transform: none; }
    .appel-flottant .btn { flex: 1; padding: 14px 8px; font-size: 14px; }
    body { padding-bottom: 80px; }
    .hero-inner, .landing-grille, .page-hero-inner { padding-bottom: 24px; }
}

/* ---------- apparition au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
    .anim .rev { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .anim .rev.vu { opacity: 1; transform: none; }
}

/* =====================================================================
   Dynamisation discrète (2026-10-29) : respect de prefers-reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Héros : lent zoom sur la photo, entrée en cascade des textes */
    .anim .hero-fond img, .anim .landing-hero .hero-fond img, .anim .page-hero .hero-fond img { animation: kenburns 22s ease-out both; transform-origin: 60% 40%; }
    @keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
    .anim .hero-inner > *, .anim .landing-grille > div:first-child > * { opacity: 0; animation: monter .7s cubic-bezier(.2,.7,.2,1) forwards; }
    .hero-inner > :nth-child(1), .landing-grille > div:first-child > :nth-child(1) { animation-delay: .05s; }
    .hero-inner > :nth-child(2), .landing-grille > div:first-child > :nth-child(2) { animation-delay: .18s; }
    .hero-inner > :nth-child(3), .landing-grille > div:first-child > :nth-child(3) { animation-delay: .31s; }
    .hero-inner > :nth-child(4), .landing-grille > div:first-child > :nth-child(4) { animation-delay: .44s; }
    .hero-inner > :nth-child(5), .landing-grille > div:first-child > :nth-child(5) { animation-delay: .57s; }
    .landing-grille > div:first-child > :nth-child(6) { animation-delay: .7s; }
    .anim .landing-form { opacity: 0; animation: monter .8s cubic-bezier(.2,.7,.2,1) .35s forwards; }
    @keyframes monter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

    /* Apparitions en cascade dans les grilles */
    .grille > .rev:nth-child(2), .atouts > .rev:nth-child(2), .etapes > .rev:nth-child(2), .chiffres > .rev:nth-child(2), .temoignages > .rev:nth-child(2) { transition-delay: .1s; }
    .grille > .rev:nth-child(3), .atouts > .rev:nth-child(3), .etapes > .rev:nth-child(3), .chiffres > .rev:nth-child(3), .temoignages > .rev:nth-child(3) { transition-delay: .2s; }
    .grille > .rev:nth-child(4), .atouts > .rev:nth-child(4), .etapes > .rev:nth-child(4), .chiffres > .rev:nth-child(4) { transition-delay: .3s; }
    .anim .rev { transition-duration: .75s; }

    /* Titre de section : trait qui se dessine */
    .section-tete h2 { position: relative; display: inline-block; padding-bottom: 14px; }
    .section-tete h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--bleu), #7FB2FF); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.2,1) .25s; }
    .section-tete.centre h2::after { left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; }
    .section-tete.vu h2::after, .section-tete .vu h2::after, .vu .section-tete h2::after, .section-tete h2.vu::after { transform: scaleX(1); }
    .section-tete.centre.vu h2::after, .section-tete.centre h2.vu::after { transform: translateX(-50%) scaleX(1); }
    .section-marine .section-tete h2::after { background: linear-gradient(90deg, #7FB2FF, #fff); }

    /* Cartes : halo dégradé au survol */
    .carte, .atout, .etape, .temoignage { position: relative; }
    .carte::before, .atout::before, .etape::before, .temoignage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--bleu), #7FB2FF 50%, var(--orange)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
    .carte:hover::before, .atout:hover::before, .etape:hover::before, .temoignage:hover::before { opacity: 1; }
    .etape::before { content: counter(etape); } /* le numéro reste un ::before : le halo passe par ::after */
    .etape::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--bleu), #7FB2FF 50%, var(--orange)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
    .etape:hover::after { opacity: 1; }
    .etape:hover { transform: translateY(-4px); box-shadow: var(--ombre); transition: transform .2s ease, box-shadow .2s ease; }
    .atout { transition: transform .2s ease, box-shadow .2s ease; }
    .atout:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
    .duo-visuel img { transition: transform .8s ease; }
    .duo-visuel:hover img { transform: scale(1.03); }

    /* En-tête : ombre une fois la page défilée */
    .entete { transition: box-shadow .3s ease; }
    .entete.defile { box-shadow: 0 8px 30px rgba(11,31,58,.10); }

    /* Boutons clés : reflet qui balaie + halo qui respire */
    .btn-vif { position: relative; overflow: hidden; animation: respirer 3.2s ease-in-out infinite; }
    .btn-vif::after { content: ""; position: absolute; top: -30%; bottom: -30%; width: 38%; left: -50%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: reflet 4.2s ease-in-out infinite; pointer-events: none; }
    @keyframes reflet { 0%, 55% { left: -50%; } 85%, 100% { left: 130%; } }
    @keyframes respirer { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,26,.45), 0 10px 24px rgba(11,31,58,.14); } 50% { box-shadow: 0 0 0 10px rgba(255,122,26,0), 0 10px 24px rgba(11,31,58,.14); } }
    .btn-vif:hover { animation-play-state: paused; }

    /* WhatsApp : ondes qui s'éloignent et petit sursaut périodique */
    .whatsapp-flottant { animation: sursaut 7s ease-in-out infinite; }
    .whatsapp-flottant::before, .whatsapp-flottant::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(37,211,102,.7); animation: onde 2.6s ease-out infinite; pointer-events: none; }
    .whatsapp-flottant::after { animation-delay: 1.3s; }
    @keyframes onde { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
    @keyframes sursaut { 0%, 88%, 100% { transform: translateY(0) rotate(0); } 90% { transform: translateY(-6px) rotate(-4deg); } 94% { transform: translateY(0) rotate(3deg); } 97% { transform: translateY(-3px) rotate(0); } }
    .appel-flottant .btn-whatsapp { position: relative; overflow: hidden; }
    .appel-flottant .btn-whatsapp::after { content: ""; position: absolute; top: -30%; bottom: -30%; width: 40%; left: -50%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); transform: skewX(-18deg); animation: reflet 4.2s ease-in-out infinite; }

    /* Compteurs */
    .chiffre strong { transition: color .3s ease; }
}

/* Section avec photo en fond estompée (étapes) */
.section-photo { position: relative; overflow: hidden; }
.section-photo > .fond-photo { position: absolute; inset: 0; z-index: 0; }
.section-photo > .fond-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .14; }
.section-photo > .fond-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--fond) 0%, rgba(243,246,250,.55) 50%, var(--fond) 100%); }
.section-photo > .conteneur { position: relative; z-index: 1; }
.section-marine.section-photo > .fond-photo img { opacity: .22; }
.section-marine.section-photo > .fond-photo::after { background: linear-gradient(180deg, rgba(11,31,58,.85), rgba(11,31,58,.7)); }

/* Illustrations (fond blanc) : sans ombre portée, légère flottaison */
.duo-visuel.illustration { box-shadow: none; aspect-ratio: auto; }
@media (prefers-reduced-motion: no-preference) {
    .duo-visuel.illustration img { animation: flotter 6s ease-in-out infinite; }
    @keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .duo-visuel.illustration:hover img { transform: none; }
}

/* Section film (kit Olivia) : le titre reste blanc malgre la couleur globale des h2 */
.dv-film__title { color: #fff; }
.dv-film__title span { color: #7FB2FF; }

/* ---------- bouton "Voir notre film" avec clap 3D ---------- */
.btn-film { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 10px 24px 10px 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border: 1.5px solid rgba(255,255,255,.35); color: #fff; backdrop-filter: blur(6px); text-align: left; box-shadow: 0 10px 30px rgba(11,31,58,.25), inset 0 1px 0 rgba(255,255,255,.25); overflow: visible; }
.btn-film.btn-grand { padding: 11px 28px 11px 13px; }
.btn-film:hover { background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.1)); border-color: rgba(255,255,255,.6); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(11,31,58,.35), 0 0 0 6px rgba(255,122,26,.12), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-film-txt { display: flex; flex-direction: column; line-height: 1.15; }
.btn-film-txt strong { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 17.5px; }
.btn-film-txt small { font-size: 12px; font-weight: 600; color: #FFB169; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.clap { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,177,105,.25)); transform: perspective(300px) rotateY(-14deg) rotateX(6deg); transition: transform .3s ease; }
.clap svg { width: 100%; height: 100%; overflow: visible; }
.clap-haut { transform-origin: 8px 31px; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.btn-film:hover .clap { transform: perspective(300px) rotateY(-6deg) rotateX(3deg) scale(1.08); }
.btn-film:hover .clap-haut { transform: rotate(-14deg); }
.dv-film .btn-film { margin-left: 4px; }
@media (prefers-reduced-motion: no-preference) {
    .clap-haut { animation: claquer 5s ease-in-out infinite; }
    @keyframes claquer { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-16deg); } 88% { transform: rotate(0); } 91% { transform: rotate(-8deg); } 94% { transform: rotate(0); } }
    .btn-film::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgba(255,177,105,.0); animation: lueur 3.4s ease-in-out infinite; pointer-events: none; }
    @keyframes lueur { 0%, 100% { border-color: rgba(255,177,105,0); box-shadow: 0 0 0 0 rgba(255,122,26,0); } 50% { border-color: rgba(255,177,105,.55); box-shadow: 0 0 22px 2px rgba(255,122,26,.25); } }
}
@media (max-width: 480px) { .btn-film.btn-grand { width: 100%; justify-content: flex-start; } }

/* ---------- invitation WhatsApp : bulle + flèche vers le bouton ---------- */
.wa-invite { position: fixed; right: 20px; bottom: 132px; z-index: 59; width: 310px; max-width: calc(100vw - 32px); background: #fff; color: var(--marine); border-radius: 18px 18px 4px 18px; padding: 22px 44px 16px 20px; box-shadow: 0 18px 44px rgba(11,31,58,.22), 0 0 0 1px rgba(37,211,102,.25); font-size: 15px; line-height: 1.45; opacity: 0; transform: translateY(14px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.wa-invite.visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-invite strong { color: #1DB954; }
.wa-invite p { margin: 0; }
.wa-invite-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 800; color: var(--marine); text-decoration: none; }
.wa-invite-lien:hover { color: #1DB954; }
.wa-invite-fleche { position: absolute; right: 44px; bottom: -50px; width: 52px; height: 46px; color: #25D366; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.wa-invite-fleche svg { width: 100%; height: 100%; overflow: visible; }
.wa-invite-fermer { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--fond); color: var(--doux); font-size: 18px; line-height: 1; cursor: pointer; }
.wa-invite-fermer:hover { background: var(--bordure); color: var(--marine); }
.wa-invite-avatar { position: absolute; left: -12px; top: -18px; width: 40px; height: 40px; border-radius: 50%; background: #25D366; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(37,211,102,.4); }
.wa-invite-avatar svg { width: 24px; height: 24px; }
.wa-invite-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #1DB954; border: 2px solid #fff; }
@media (prefers-reduced-motion: no-preference) {
    .wa-invite.visible .wa-invite-fleche { animation: fleche-pointe 1.1s ease-in-out infinite; }
    @keyframes fleche-pointe { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, 7px); } }
    .wa-invite.visible .wa-invite-avatar::after { animation: presence 1.6s ease-in-out infinite; }
    @keyframes presence { 0%, 100% { box-shadow: 0 0 0 0 rgba(29,185,84,.6); } 70% { box-shadow: 0 0 0 7px rgba(29,185,84,0); } }
    .wa-invite.visible ~ .whatsapp-flottant { animation: sursaut 2.4s ease-in-out infinite; }
}
@media (max-width: 768px) {
    .wa-invite { right: 12px; left: 12px; width: auto; bottom: 104px; border-radius: 18px; padding-right: 40px; }
    .wa-invite-fleche { right: 50%; margin-right: -20px; bottom: -34px; width: 40px; height: 34px; }
}

/* Photos animées (image-to-video) : lecture muette en boucle quand visibles, affiche = la photo d'origine */
.video-vivante video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--marine); }
.video-vivante { aspect-ratio: 16 / 9; }

/* ---------- bandes cinéma : zones d'intervention en vidéo pleine largeur ---------- */
.zone-cine { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; background: var(--marine); color: #fff; padding: 72px 0; }
.zone-cine-fond { position: absolute; inset: 0; aspect-ratio: auto; }
.zone-cine-fond video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.zone-cine-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,58,.78) 0%, rgba(11,31,58,.45) 42%, rgba(11,31,58,.05) 70%, rgba(11,31,58,0) 100%); }
.zone-cine--droite .zone-cine-fond::after { background: linear-gradient(270deg, rgba(11,31,58,.78) 0%, rgba(11,31,58,.45) 42%, rgba(11,31,58,.05) 70%, rgba(11,31,58,0) 100%); }
.zone-cine-inner { position: relative; display: flex; }
.zone-cine--droite .zone-cine-inner { justify-content: flex-end; }
.zone-cine-carte { max-width: 560px; background: rgba(11,31,58,.55); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 36px 36px 34px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.zone-cine-carte h2 { color: #fff; margin-bottom: 12px; }
.zone-cine-carte .surtitre { color: #FFB169; }
.zone-cine-carte p { color: rgba(255,255,255,.88); font-size: 1.04rem; }
.zone-cine-carte .villes { margin: 18px 0 24px; }
.zone-cine-carte .ville { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.zone-cine-carte .ville:hover { background: #fff; color: var(--marine); }
@media (max-width: 900px) {
    .zone-cine { min-height: 0; padding: 0; display: block; }
    .zone-cine-fond { position: relative; aspect-ratio: 16 / 10; }
    .zone-cine-fond::after, .zone-cine--droite .zone-cine-fond::after { background: linear-gradient(180deg, rgba(11,31,58,0) 55%, var(--marine) 100%); }
    .zone-cine-inner { display: block; }
    .zone-cine-carte { max-width: none; margin: -56px 0 0; padding: 26px 22px 30px; border-radius: 20px 20px 0 0; backdrop-filter: none; background: var(--marine); border: 0; box-shadow: none; }
    .zone-cine { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
    .zone-cine-fond video { transform: scale(1.02); transition: transform 1.2s ease; }
}

/* ---------- simulateur de devis ---------- */
.simu { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--bordure); border-radius: 24px; padding: 36px 36px 30px; box-shadow: var(--ombre); }
.simu-etapes { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; }
.simu-pas { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fond); color: var(--doux); font-weight: 800; font-family: 'Sora', sans-serif; font-size: 14px; }
.simu-pas.actif { background: var(--bleu); color: #fff; }
.simu-pas.fait { background: var(--vert); color: #fff; }
.simu-ecran h2 { text-align: center; font-size: 1.5rem; margin-bottom: 22px; }
.simu-aide { text-align: center; color: var(--doux); margin: -10px 0 18px; }
.simu-choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.simu-choix--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .simu-choix, .simu-choix--4 { grid-template-columns: 1fr; } .simu { padding: 24px 18px; } }
.simu-choix button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 1.5px solid var(--bordure); border-radius: 16px; background: #fff; cursor: pointer; font: inherit; color: var(--texte); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.simu-choix button:hover { border-color: var(--bleu); transform: translateY(-2px); box-shadow: var(--ombre); }
.simu-choix button svg { width: 34px; height: 34px; color: var(--bleu); }
.simu-choix button strong { font-family: 'Sora', sans-serif; font-size: 1.05rem; }
.simu-choix button span { font-size: 13.5px; color: var(--doux); }
.simu-besoins { margin-bottom: 22px; }
.simu-ecran > .btn { display: flex; margin: 0 auto; }
.simu-resultat { text-align: center; }
.simu-resultat h2 { font-size: 2rem; }
.simu-resultat h2 span { color: var(--orange); }
.simu-detail { list-style: none; padding: 0; margin: 18px auto 10px; max-width: 560px; display: grid; gap: 8px; text-align: left; }
.simu-detail li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--fond); border-radius: 10px; font-size: 15px; }
.simu-detail li b { white-space: nowrap; color: var(--marine); }
.simu-resultat .hero-actions { justify-content: center; }
.simu-retour { text-align: center; margin: 18px 0 0; }
.lien-retour { background: none; border: 0; color: var(--doux); font: inherit; font-weight: 600; cursor: pointer; }
.lien-retour:hover { color: var(--bleu); }

/* ---------- avant / après ---------- */
.avant-apres { position: relative; max-width: 1000px; margin: 0 auto; aspect-ratio: 3 / 2; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); user-select: none; }
.avant-apres img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avant-apres .aa-apres { clip-path: inset(0 0 0 var(--pos)); }
.aa-etiquette { position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(11,31,58,.75); color: #fff; }
.aa-etiquette--avant { left: 16px; } .aa-etiquette--apres { right: 16px; background: var(--orange); }
.aa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; z-index: 2; }
.aa-poignee svg { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; padding: 12px; transform: translate(-50%, -50%); background: var(--orange); color: #fff; border-radius: 50%; box-shadow: 0 8px 20px rgba(0,0,0,.3); }

/* ---------- urgence ---------- */
.appel-urgence { display: inline-flex; align-items: center; gap: 16px; margin-top: 10px; padding: 14px 26px 14px 18px; border-radius: 18px; background: var(--orange); color: #fff; text-decoration: none; box-shadow: 0 16px 36px rgba(255,122,26,.35); }
.appel-urgence svg { width: 34px; height: 34px; }
.appel-urgence span { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; }
.appel-urgence small { display: block; font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; margin-bottom: 4px; }
@media (prefers-reduced-motion: no-preference) { .appel-urgence { animation: respirer 3s ease-in-out infinite; } }

/* ---------- partenaires & certifications ---------- */
.certifs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .certifs { grid-template-columns: repeat(2, 1fr); } }
.certif { background: #fff; border: 1px solid var(--bordure); border-radius: 16px; padding: 22px 20px; text-align: center; }
.certif strong { display: block; font-family: 'Sora', sans-serif; font-size: 1.05rem; margin: 10px 0 4px; }
.certif span { font-size: 13.5px; color: var(--doux); }
.certif .badge-nf { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--marine); color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.marques { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 26px; }
.marque { padding: 9px 16px; border-radius: 10px; background: var(--fond); color: var(--marine); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.zone-cine--haut .zone-cine-carte h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 12px; }
.zone-cine--haut .fil { color: rgba(255,255,255,.7); }
.zone-cine--haut .fil a { color: rgba(255,255,255,.85); }

/* ---------- héros cinéma (urgence) : photo nette, voile seulement derrière le texte ---------- */
.page-hero--cine { min-height: 78vh; display: flex; align-items: center; padding: 72px 0; }
.page-hero--cine .hero-fond img { object-position: 68% center; }
.page-hero--cine .hero-fond::after { background: linear-gradient(90deg, rgba(11,31,58,.86) 0%, rgba(11,31,58,.62) 34%, rgba(11,31,58,.12) 58%, rgba(11,31,58,0) 75%); }
.page-hero--cine .page-hero-inner { max-width: 600px; }
.page-hero--cine h1 { text-shadow: 0 4px 24px rgba(0,0,0,.35); }
@media (max-width: 900px) { .page-hero--cine { min-height: 0; display: block; padding: 0; } .page-hero--cine .hero-fond { position: relative; aspect-ratio: 16 / 10; } .page-hero--cine .hero-fond::after { background: linear-gradient(180deg, rgba(11,31,58,0) 50%, var(--marine) 100%); } .page-hero--cine .page-hero-inner { padding: 8px 0 40px; margin-top: -40px; position: relative; } }

/* ---------- mise en valeur Dépannage 7 j/7 ---------- */
.bandeau-urgence { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 800; padding: 2px 10px 2px 8px; border-radius: 999px; background: rgba(255,122,26,.18); border: 1px solid rgba(255,177,105,.5); margin-left: 4px; vertical-align: middle; }
.bandeau-urgence svg { width: 15px; height: 15px; color: #FFB169; }
.bandeau-urgence:hover { background: var(--orange); border-color: var(--orange); }
.hero-points .point-urgence a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; background: linear-gradient(135deg, rgba(255,122,26,.95), rgba(224,100,10,.95)); padding: 7px 14px 7px 9px; border-radius: 999px; font-weight: 700; box-shadow: 0 8px 22px rgba(255,122,26,.35); }
.hero-points .point-urgence svg { width: 20px; height: 20px; color: #fff; }
.hero-points .point-urgence strong { font-weight: 800; }
.chiffre-urgence a { text-decoration: none; color: inherit; display: block; }
.chiffre-urgence strong { display: inline-flex; align-items: center; gap: 10px; }
.chiffre-urgence strong svg { width: 34px; height: 34px; color: var(--orange); }
.pied-urgence { display: inline-flex; align-items: center; gap: 7px; color: #FFB169 !important; font-weight: 700; }
.pied-urgence svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
    .bandeau-urgence svg, .chiffre-urgence strong svg, .hero-points .point-urgence svg { animation: gyro 1.6s ease-in-out infinite; }
    @keyframes gyro { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,177,105,0)); } 50% { opacity: .75; filter: drop-shadow(0 0 6px rgba(255,177,105,.9)); } }
    .hero-points .point-urgence a { animation: respirer 3.2s ease-in-out infinite; }
}

.surtitre-urgence { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 9px 18px 9px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--orange), var(--orange-fonce)); color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 26px rgba(255,122,26,.4); }
.surtitre-urgence svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) { .surtitre-urgence svg { animation: gyro 1.6s ease-in-out infinite; } .surtitre-urgence { animation: respirer 3.2s ease-in-out infinite; } }