/* Style « film de lancement » appliqué à tout le site : cartes sombres en 3D, titres qui
   apparaissent mot à mot, mots clés en rouge, puces de section « 01 · ». */
/* Polices du film : Archivo pour les titres, Manrope pour le texte */
:root { --film-titre: 'Archivo', 'Arial Black', system-ui, sans-serif; --film-texte: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html body, body :is(p, li, a, span, div, td, th, label, input, select, textarea, button, small, strong, em, b) { font-family: var(--film-texte) !important; }
body :is(h1, h2, h3, .s-title, .line, .p-price, .stat-num, .stat-number, .feature-card__name, .rc-title) { font-family: var(--film-titre) !important; letter-spacing: -0.03em; }
body :is(h1, h2, h3, .s-title, .line, .p-price, .stat-num, .stat-number, .feature-card__name, .rc-title) * { font-family: inherit !important; }
body :is(h1, h2) { font-weight: 900 !important; }
body h3 { font-weight: 800 !important; }
:root { --film-rouge:#C52626; --film-rouge-vif:#FF5A4E; --film-encre:#0F1B28; }
body { counter-reset: chap; }

/* --- Cartes sombres --- */
.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card {
  background: linear-gradient(180deg, #1B1F26, #111418) !important;
  color: #ECEAE5 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 60px rgba(15,27,40,.22), 0 8px 18px rgba(15,27,40,.12) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  transform-origin: 50% 60%;
}
:is(.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card) :is(h1,h2,h3,h4,h5,p,span,li,div,b,strong,em,small,td,th,label):not([class*="btn"]):not(.p-check):not(.mot-rouge) { color: inherit !important; }
:is(.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card) :is(p, li, small, .feature-card__desc, .p-desc, .p-ht, .p-per, .service-desc, .rc-tag, .d) { color: #A9AFB8 !important; }
:is(.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card) a:not([class*="btn"]) { color: #FF8A80 !important; }
.p-check, .mot-rouge-carte { color: var(--film-rouge-vif) !important; }
:is(.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card) .p-divider { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.1) !important; }
:is(.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card):hover { box-shadow: 0 40px 80px rgba(15,27,40,.3), 0 0 0 1px rgba(255,90,78,.35) !important; }

/* accueil : panneau de description déplié au survol, en sombre lui aussi */
body .feature-card:has(.feature-card__desc):is(:hover,:focus-within,.ouverte),
body .feature-card--hero:not(.feature-card--urba):has(.feature-card__desc):is(:hover,:focus-within,.ouverte),
body .feature-card--urba:has(.feature-card__desc):is(:hover,:focus-within,.ouverte) { background: linear-gradient(180deg, #1B1F26, #111418) !important; border-color: var(--film-rouge-vif) !important; }
body .feature-card:has(.feature-card__desc) .feature-card__desc,
body .feature-card--urba:has(.feature-card__desc) .feature-card__desc { background-color: #15181D !important; border-color: var(--film-rouge-vif) !important; color: #B9BEC6 !important; }
body .feature-card .feature-card__name { color: #FFFFFF !important; }
body .feature-card .feature-card__cta { color: #FF8A80 !important; }

/* boutons de contour dans les cartes sombres (tarifs) */
:is(.p-card, .card, .carte, .service) :is(.p-btn-outline, .btn-outline) { color: #FFFFFF !important; border-color: rgba(255,255,255,.35) !important; background: transparent !important; }
:is(.p-card, .card, .carte, .service) :is(.p-btn-outline, .btn-outline):hover { background: #FFFFFF !important; color: #0F1B28 !important; }

/* carte mise en avant (formule Pro) */
.p-card.dark-card { border: 2px solid var(--film-rouge-vif) !important; box-shadow: 0 0 50px rgba(255,90,78,.28), 0 30px 60px rgba(15,27,40,.25) !important; }

/* --- Entrée en 3D au défilement --- */
.film-3d { opacity: 0; transform: perspective(1200px) rotateX(16deg) translateY(46px) scale(.97); transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.film-3d.film-in { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0) scale(1); }

/* --- Titres mot à mot --- */
.film-mot { display: inline-block; white-space: pre; opacity: 0; filter: blur(10px); transform: translateY(.35em); transition: opacity .5s ease, filter .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.film-titre.film-in .film-mot { opacity: 1; filter: blur(0); transform: none; }
.mot-rouge { color: var(--film-rouge) !important; }
:is(.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card) .mot-rouge { color: var(--film-rouge-vif) !important; }

/* --- Puces de section « 01 · » --- */
.s-tag, section > .tag, main > .tag, .hero .tag, header .tag {
  counter-increment: chap;
  display: inline-flex !important; align-items: center; gap: 10px;
  padding: 10px 18px !important; border-radius: 14px !important;
  background: #14171C !important; color: #FFFFFF !important;
  font-weight: 800 !important; letter-spacing: .04em !important;
  box-shadow: 0 16px 34px rgba(15,27,40,.22);
}
.s-tag::before, section > .tag::before, main > .tag::before, .hero .tag::before, header .tag::before {
  content: counter(chap, decimal-leading-zero) " ·" !important;
  width: auto !important; height: auto !important; background: none !important;
  color: var(--film-rouge-vif) !important; font-variant-numeric: tabular-nums;
}
.s-tag *, section > .tag * { color: #FFFFFF !important; }

/* sur fond sombre : rouge plus vif, puces bordées */
.film-sombre .mot-rouge, .film-sombre.mot-rouge { color: var(--film-rouge-vif) !important; }
.s-tag.film-sombre, .tag.film-sombre { border: 1px solid rgba(255,255,255,.16) !important; background: #1E232B !important; }

/* ===== Ergonomie « film » : barre de progression, boutons lumineux, projecteur sur les cartes,
   textes qui se posent, anneau rouge, onglet actif en pastille sombre ===== */
.film-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #C52626, #FF5A4E); box-shadow: 0 0 12px rgba(255,90,78,.6); z-index: 10000; pointer-events: none; }

/* boutons principaux : lueur rouge et léger soulèvement */
:is(.btn-hero, .ng-cta, .p-btn-gold, .cta-box a, .btn-primary) { transition: transform .2s ease, box-shadow .25s ease, filter .2s ease !important; }
:is(.btn-hero, .ng-cta, .p-btn-gold, .cta-box a, .btn-primary):hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(197,38,38,.38), 0 0 0 4px rgba(255,90,78,.14) !important; filter: saturate(1.08); }
:is(.btn-hero, .ng-cta, .p-btn-gold, .p-btn, .cta-box a):active { transform: translateY(0) scale(.98); }

/* projecteur qui suit la souris sur les cartes sombres */
:is(.feature-card, .related-card, .info-card, .carte, .p-card, .service, .card, .article-card).film-spot {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,90,78,.13), transparent 45%), linear-gradient(180deg, #1B1F26, #111418) !important; }

/* paragraphes d'introduction et tableaux qui se posent */
.film-pose { opacity: 0; filter: blur(8px); transform: translateY(18px); transition: opacity .7s ease, filter .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.film-pose.film-in { opacity: 1; filter: none; transform: none; }

/* anneau rouge lumineux sous le film d'accueil */
.film-anneau { position: relative; height: 0; pointer-events: none; z-index: 0; }
.film-anneau::before { content: ''; position: absolute; left: 50%; top: -120px; width: min(980px, 86vw); height: 240px; transform: translateX(-50%);
  border-radius: 50%; border: 3px solid rgba(232,71,60,.75); box-shadow: 0 0 40px 8px rgba(232,71,60,.28), inset 0 0 30px 4px rgba(232,71,60,.2); }

/* lien actif de la barre de navigation en pastille sombre */
#nav-gestop .ng-links a.actif, nav .ng-links a.actif { background: #14171C !important; color: #FFFFFF !important; border-radius: 9px; padding: 5px 9px !important; margin: 0 -4px !important; }

/* tableaux comparatifs : coins arrondis, en-tête sombre */
.compare-table { border-radius: 18px !important; overflow: hidden; box-shadow: 0 30px 60px rgba(15,27,40,.14) !important; }
.compare-table thead th { background: #14171C !important; color: #FFFFFF !important; }

@media (prefers-reduced-motion: reduce) {
  .film-3d, .film-mot, .film-pose { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ===== Fonctionnalités et tarifs : cartes en verre clair au lieu du noir ===== */
body :is(.feature-card, .p-card) {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  color: #0F1B28 !important;
  border: 1px solid rgba(197,38,38,.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 50px rgba(74,20,22,.10), 0 6px 14px rgba(15,27,40,.06) !important;
}
body :is(.feature-card, .p-card) :is(p, li, small, .feature-card__desc, .p-desc, .p-ht, .p-per, .d) { color: #5B6573 !important; }
body :is(.feature-card, .p-card) .feature-card__name, body .p-card :is(.p-price, .p-label) { color: #0F1B28 !important; }
body :is(.feature-card, .p-card) a:not([class*="btn"]) { color: #C52626 !important; }
body :is(.feature-card, .p-card) .p-divider { background: rgba(15,27,40,.08) !important; border-color: rgba(15,27,40,.08) !important; }
body :is(.feature-card, .p-card):hover { border-color: rgba(197,38,38,.45) !important; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px rgba(197,38,38,.16), 0 0 0 4px rgba(255,90,78,.08) !important; }
body :is(.feature-card, .p-card).film-spot {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,90,78,.12), transparent 45%), linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)) !important; }
body .feature-card:has(.feature-card__desc):is(:hover,:focus-within,.ouverte),
body .feature-card--hero:not(.feature-card--urba):has(.feature-card__desc):is(:hover,:focus-within,.ouverte),
body .feature-card--urba:has(.feature-card__desc):is(:hover,:focus-within,.ouverte) { background: #FFFFFF !important; border-color: #C52626 !important; }
body .feature-card:has(.feature-card__desc) .feature-card__desc,
body .feature-card--urba:has(.feature-card__desc) .feature-card__desc { background-color: #FFFFFF !important; border-color: #C52626 !important; color: #3A4553 !important; }
body .feature-card .feature-card__name { color: #0F1B28 !important; }
body .feature-card .feature-card__cta { color: #C52626 !important; }
body .feature-card .fx-demo { background: #F4F3EF !important; }
body .p-card :is(.p-btn-outline, .btn-outline) { color: #0F1B28 !important; border-color: rgba(15,27,40,.25) !important; background: transparent !important; }
body .p-card :is(.p-btn-outline, .btn-outline):hover { background: #0F1B28 !important; color: #FFFFFF !important; }
body .p-card.dark-card { background: linear-gradient(180deg, #FFF6F5, #FFFFFF) !important; border: 2px solid #E04545 !important; box-shadow: 0 0 0 6px rgba(224,69,69,.08), 0 30px 70px rgba(197,38,38,.22) !important; }

/* bouton Tutos vidéo, à gauche de Démo */
.ng-tuto{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:14px;background:#0F1B28;color:#FFFFFF!important;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease}
.ng-tuto:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,27,40,.25)}
@media(max-width:640px){.ng-tuto{display:none}}