/* =====================================================================
   N4CC — « Refresh 2026 » : couche de style posée PAR-DESSUS le site.
   Aucun texte, aucune balise SEO ni traduction n'est modifié : tout est
   scopé sous html.n4r. Retirer ce fichier = retour exact à l'existant.
   ===================================================================== */

html.n4r {
  --n4r-navy: #0A2540;
  --n4r-navy-2: #12355A;
  --n4r-blue: #1B4F72;
  --n4r-sun: #FFD93D;
  --n4r-sun-2: #FFB23F;
  --n4r-coral: #FF7849;
  --n4r-cream: #FFF8E7;
  --n4r-paper: #FBF2DF;
  --n4r-white: #FFFDF8;
  --n4r-ink: #0A2540;
  --n4r-muted: rgba(10, 37, 64, .66);
  --n4r-line: rgba(10, 37, 64, .10);
  --n4r-r: 24px;
  --n4r-r-sm: 16px;
  --n4r-shadow: 0 1px 0 rgba(10, 37, 64, .04), 0 18px 40px -24px rgba(10, 37, 64, .38);
  --n4r-shadow-hi: 0 2px 0 rgba(10, 37, 64, .04), 0 30px 60px -30px rgba(10, 37, 64, .55);
  --n4r-ease: cubic-bezier(.22, 1, .36, 1);
  --n4r-display: 'Fraunces', Georgia, serif;
  --n4r-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --n4r-hand: 'Caveat', 'DM Sans', system-ui, sans-serif; /* jamais de cursive de repli (iPhone = Snell Roundhand) */
}

/* Transitions douces entre les pages du site (View Transitions, sans JS) */
@view-transition { navigation: auto; }
html.n4r .site-header { view-transition-name: n4r-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

html.n4r.lenis, html.n4r.lenis body { height: auto; scroll-behavior: auto !important; }
html.n4r.lenis.lenis-stopped { overflow: clip; }

/* ---------------------------------------------------------------------
   Typographie : même polices, rythme plus éditorial
   --------------------------------------------------------------------- */
html.n4r body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.n4r h1, html.n4r h2, html.n4r h3 { text-wrap: balance; }
html.n4r p, html.n4r li, html.n4r .section-lead { text-wrap: pretty; }

html.n4r .section-head .eyebrow,
html.n4r .v40-sims-header .eyebrow,
html.n4r .v53-howto-eyebrow,
html.n4r .v44-elec-eyebrow,
html.n4r .final-card .eyebrow {
  display: inline-flex !important; align-items: center; gap: .7em;
  background: none !important; box-shadow: none !important; border: 0 !important;
  padding: 0 !important; margin-bottom: 14px !important;
  font: 700 .74rem/1.2 var(--n4r-body) !important; letter-spacing: .2em !important;
  text-transform: uppercase; color: var(--n4r-coral) !important;
}
html.n4r .section-head .eyebrow::before,
html.n4r .v53-howto-eyebrow::before,
html.n4r .v44-elec-eyebrow::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; opacity: .8;
}
html.n4r .section-head--center .eyebrow::before { display: none; }

html.n4r .section-title,
html.n4r .v53-howto-title,
html.n4r .v44-elec-premium > h2 {
  font-family: var(--n4r-display) !important; font-weight: 700 !important;
  font-size: clamp(2.1rem, 4.3vw, 3.55rem) !important; line-height: 1.04 !important;
  letter-spacing: -.025em !important; color: var(--n4r-navy) !important;
}
html.n4r .section-title em,
html.n4r .v53-howto-title em,
html.n4r .v44-elec-premium > h2 em,
html.n4r .final-card .accent {
  position: relative; z-index: 0; isolation: isolate; font-style: italic !important; font-weight: 600 !important;
  color: #E8602F !important; background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (min-width: 900px) {
  html.n4r .section-title em, html.n4r .v53-howto-title em, html.n4r .v44-elec-premium > h2 em, html.n4r .final-card .accent { white-space: nowrap; }
}
html.n4r body .section-head .section-title em { color: #E8602F !important; -webkit-text-fill-color: #E8602F !important; }
html.n4r body .v44-elec-premium > h2 em { color: var(--n4r-coral) !important; -webkit-text-fill-color: var(--n4r-coral) !important; }
/* trait « fait main » : surligneur DERRIÈRE les lettres (fonds clairs)… */
html.n4r .n4r-scribble {
  position: absolute; left: -3%; bottom: -.04em; width: 106%; height: .4em; z-index: -1;
  overflow: visible; pointer-events: none;
}
html.n4r .n4r-scribble path { fill: none; stroke: var(--n4r-sun); stroke-width: 12px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .6; }
/* …et fin trait SOUS les lettres sur fonds sombres */
html.n4r .v44-elec-premium .n4r-scribble, html.n4r .section-final .n4r-scribble { bottom: -.1em; height: .2em; }
html.n4r .v44-elec-premium > h2, html.n4r .section-final .final-card h2 { margin-bottom: .5em !important; }
html.n4r .v44-elec-premium .n4r-scribble path { stroke: var(--n4r-sun); stroke-width: 4px; opacity: .9; }
html.n4r .section-final .n4r-scribble path { stroke: var(--n4r-coral); stroke-width: 4px; opacity: .95; }
html.n4r .section-lead,
html.n4r .v53-howto-lead,
html.n4r .v44-elec-lead {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem) !important; line-height: 1.6 !important;
  color: var(--n4r-muted) !important;
}

/* ---------------------------------------------------------------------
   Boutons « pill » : plus nets, moins d'effet 3D
   --------------------------------------------------------------------- */
html.n4r .pill {
  border-radius: 999px !important; font-family: var(--n4r-body) !important; font-weight: 700 !important;
  letter-spacing: 0 !important; transition: transform .35s var(--n4r-ease), box-shadow .35s var(--n4r-ease), background-color .25s, color .25s !important;
}
html.n4r a.pill, html.n4r button.pill { min-height: 48px; padding: 0 22px !important; display: inline-flex !important; align-items: center; gap: .55em; }
html.n4r .pill-primary {
  background: linear-gradient(180deg, #FFE066, var(--n4r-sun) 55%, #FFC93A) !important; color: var(--n4r-navy) !important;
  border: 0 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 26px -12px rgba(255, 150, 30, .85) !important;
}
html.n4r .pill-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 32px -14px rgba(255, 150, 30, .95) !important; }
html.n4r body .pill.pill-secondary {
  background: var(--n4r-navy) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 12px 26px -14px rgba(10, 37, 64, .8) !important;
}
html.n4r body .pill.pill-secondary:hover { background: var(--n4r-blue) !important; transform: translateY(-2px); }
html.n4r .pill-ghost {
  background: transparent !important; color: inherit !important; border: 0 !important;
  box-shadow: inset 0 0 0 1.5px currentColor !important;
}
html.n4r .pill-cream {
  background: rgba(255, 255, 255, .72) !important; color: var(--n4r-navy) !important;
  border: 1px solid var(--n4r-line) !important; box-shadow: none !important; animation: none !important;
  min-height: 36px; padding: 0 14px !important; font-weight: 600 !important; font-size: .9rem !important;
}
html.n4r .avis-badges .pill-cream svg, html.n4r .hero-pills .pill-cream svg { color: var(--n4r-coral); }

/* ---------------------------------------------------------------------
   En-tête : se resserre au défilement
   --------------------------------------------------------------------- */
html.n4r .news-ticker { background: var(--n4r-navy) !important; color: #fff !important; }
html.n4r .news-ticker a { color: var(--n4r-sun) !important; }
html.n4r .news-ticker .nt-icon .n4r-ic { color: var(--n4r-sun); }
html.n4r .site-header {
  background: rgba(255, 248, 231, .86) !important; backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--n4r-line) !important; box-shadow: none !important;
  transition: padding .4s var(--n4r-ease), box-shadow .4s var(--n4r-ease) !important;
}
html.n4r .site-header .brand-logo { transition: width .4s var(--n4r-ease), height .4s var(--n4r-ease) !important; }
html.n4r .site-header .nav a { font-weight: 600 !important; color: var(--n4r-navy) !important; border-radius: 999px !important; }
html.n4r .site-header.n4r-compact { padding: 4px 0 !important; box-shadow: 0 14px 30px -24px rgba(10, 37, 64, .55) !important; }
html.n4r .site-header.n4r-compact .brand-logo { width: 54px !important; height: 54px !important; }
html.n4r .site-header.n4r-compact .brand-text > *:last-child { display: none !important; }
html.n4r .n4r-head-cta { display: none; }
@media (min-width: 1100px) {
  html.n4r .n4r-head-cta { display: inline-flex; gap: 8px; align-items: center; margin-left: 12px; }
  html.n4r .n4r-head-cta a { min-height: 42px !important; padding: 0 16px !important; font-size: .92rem !important; }
}

/* ---------------------------------------------------------------------
   Héro : vidéo cadrée plein écran, ciel vivant, tableau de bord « live »
   --------------------------------------------------------------------- */
html.n4r #hero {
  min-height: calc(100svh - 120px) !important; padding: clamp(56px, 8vh, 96px) 0 clamp(72px, 10vh, 120px) !important;
  display: flex !important; align-items: center; isolation: isolate;
}
html.n4r #hero .hero-video-wrap { will-change: transform; }
html.n4r #hero .hero-video-wrap iframe {
  width: var(--n4r-vw, 100%) !important; height: var(--n4r-vh, 100%) !important;
  min-width: 0 !important; min-height: 0 !important; aspect-ratio: auto !important;
  top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
}
html.n4r #hero::before {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(10, 37, 64, .9) 0%, rgba(10, 37, 64, .58) 46%, rgba(10, 37, 64, .2) 78%),
    linear-gradient(180deg, rgba(10, 37, 64, .5) 0%, rgba(10, 37, 64, 0) 28%, rgba(10, 37, 64, .55) 72%, rgba(10, 37, 64, .95) 100%) !important;
  opacity: 1 !important;
}
/* le template met tous les enfants du héro en position:relative (id) → on force */
html.n4r #hero > .n4r-sky, html.n4r #hero > .n4r-stars { position: absolute !important; z-index: 1 !important; }
html.n4r .n4r-sky {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  transition: background 1.2s var(--n4r-ease);
}
html.n4r[data-n4r-sky="dawn"] .n4r-sky { background: radial-gradient(120% 90% at 85% 100%, rgba(255, 166, 120, .75), transparent 60%); }
html.n4r[data-n4r-sky="day"] .n4r-sky { background: radial-gradient(110% 80% at 90% 0%, rgba(255, 236, 170, .55), transparent 60%); }
html.n4r[data-n4r-sky="golden"] .n4r-sky { background: radial-gradient(120% 100% at 80% 100%, rgba(255, 140, 60, .95), rgba(255, 90, 60, .25) 45%, transparent 70%); mix-blend-mode: overlay; }
html.n4r[data-n4r-sky="night"] .n4r-sky { background: linear-gradient(180deg, rgba(4, 12, 32, .75), rgba(10, 37, 64, .25)); mix-blend-mode: multiply; }
html.n4r .n4r-stars { position: absolute; inset: 0 0 35% 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.4s; }
html.n4r[data-n4r-sky="night"] .n4r-stars { opacity: 1; }
html.n4r .n4r-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); animation: n4rTwinkle 3.2s ease-in-out infinite; }
@keyframes n4rTwinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

html.n4r #hero > .container { position: relative; z-index: 2; width: 100%; }
html.n4r .hero-grid { display: grid !important; gap: 0 clamp(28px, 4vw, 64px) !important; align-items: start !important; }
html.n4r .hero-text { display: contents !important; }
html.n4r .hero-text > * { grid-column: 1; margin: 0 !important; }
html.n4r .hero-eyebrow {
  font: 700 .78rem/1.2 var(--n4r-body) !important; letter-spacing: .24em !important; text-transform: uppercase;
  color: var(--n4r-sun) !important; font-style: normal !important; margin-bottom: 18px !important;
  display: inline-flex; align-items: center; gap: .8em;
}
html.n4r .hero-eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: currentColor; }
html.n4r .hero-title {
  font-size: clamp(2.5rem, 4.9vw, 4.6rem) !important; line-height: .98 !important; letter-spacing: -.035em !important;
  margin-bottom: 16px !important; text-shadow: 0 2px 30px rgba(0, 0, 0, .25) !important;
}
@media (min-width: 900px) { html.n4r .hero-title .accent { white-space: nowrap; } }
html.n4r .hero-title .accent { font-style: italic !important; font-weight: 600 !important; color: var(--n4r-sun) !important; -webkit-text-fill-color: var(--n4r-sun) !important; }
html.n4r .hero-sub {
  font-family: var(--n4r-hand) !important; font-weight: 600 !important; font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
  color: #FFE9A8 !important; transform: rotate(-2deg); transform-origin: left; margin-bottom: 18px !important; font-style: normal !important;
}
html.n4r .hero-bubble {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  color: rgba(255, 255, 255, .86) !important; font-size: 1.08rem !important; margin-bottom: 14px !important; display: block !important;
  border-radius: 0 !important; overflow: visible !important; backdrop-filter: none !important; -webkit-mask-image: none !important; clip-path: none !important;
}
html.n4r .hero-bubble::before, html.n4r .hero-bubble::after { display: none !important; }
html.n4r .hero-bubble strong { color: #fff !important; }
html.n4r .hero-bubble > span:first-child { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
html.n4r .hero-bubble svg { color: var(--n4r-sun); }
html.n4r .hero-status {
  display: inline-flex !important; align-items: center; gap: 10px; width: fit-content; margin-bottom: 26px !important;
  padding: 8px 14px !important; border-radius: 999px; background: rgba(16, 185, 129, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .45); color: #D1FAE5 !important; font-weight: 700 !important; font-size: .9rem !important;
}
html.n4r .hero-ctas { display: flex !important; flex-wrap: wrap; gap: 12px !important; margin-bottom: 18px !important; justify-content: flex-start !important; }
html.n4r body #hero .pill.pill-secondary { background: rgba(255, 255, 255, .12) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55) !important; backdrop-filter: blur(8px); }
html.n4r #hero .pill-ghost { color: #fff !important; box-shadow: none !important; padding: 0 12px !important; }
html.n4r .n4r-proof {
  grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; width: fit-content; margin-bottom: 22px;
  color: rgba(255, 255, 255, .9); font-size: .95rem; text-decoration: none;
}
html.n4r .n4r-proof > * { white-space: nowrap; }
html.n4r .n4r-proof .n4r-stars5 { display: inline-flex; gap: 2px; color: var(--n4r-sun); }
html.n4r .n4r-proof .n4r-stars5 svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
html.n4r .n4r-proof b { color: #fff; }
html.n4r .hero-pills { display: flex !important; flex-wrap: wrap; gap: 8px !important; grid-column: 1 / -1 !important; margin-top: 8px !important; justify-content: flex-start !important; }
html.n4r #hero .hero-pills .pill-cream {
  background: rgba(255, 255, 255, .1) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .2) !important; backdrop-filter: blur(8px);
}
html.n4r #hero .hero-pills .pill-cream svg { color: var(--n4r-sun); }

/* Carte de jauge + cartes live = un seul « tableau de bord » vitré */
html.n4r .gauge-card, html.n4r .live-card {
  background: rgba(255, 253, 248, .94) !important; border: 1px solid rgba(255, 255, 255, .7) !important;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55) !important; backdrop-filter: blur(14px);
}
html.n4r .gauge-card { border-radius: 22px 22px 8px 8px !important; padding: 18px 20px !important; }
html.n4r .live-stack { display: grid !important; gap: 6px !important; }
html.n4r .live-card { border-radius: 8px !important; padding: 12px 18px !important; min-height: 0 !important; }
html.n4r .live-stack .live-card:last-child { border-radius: 8px 8px 22px 22px !important; }
html.n4r .gauge-track { height: 10px !important; border-radius: 99px !important; }
html.n4r .gauge-marker-dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 0, 0, .25) !important; }
html.n4r .gauge-card.n4r-filling .gauge-marker-dot { animation: n4rPing 1.8s infinite; }
@keyframes n4rPing { 0% { box-shadow: 0 0 0 4px #fff, 0 0 0 4px rgba(255, 120, 73, .6); } 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 18px rgba(255, 120, 73, 0); } }
html.n4r .n4r-live-msg {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--n4r-line);
  font-weight: 700; font-size: .9rem; color: var(--n4r-navy);
}
html.n4r .n4r-live-msg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
html.n4r .n4r-live-msg.is-busy::before { background: var(--n4r-coral); box-shadow: 0 0 0 4px rgba(255, 120, 73, .2); }
html.n4r .hero-cue { z-index: 3; color: rgba(255, 255, 255, .8) !important; }

@media (min-width: 1024px) {
  /* 3 colonnes : [accroche][statut] [tableau de bord live] — placement explicite, aucun déplacement dans le HTML */
  html.n4r .hero-grid { grid-template-columns: auto minmax(0, 1fr) minmax(320px, 400px) !important; }
  html.n4r .hero-text > * { grid-column: 1 / 3; }
  html.n4r .hero-eyebrow { grid-row: 1; grid-column: 1 !important; align-self: center; margin-bottom: 0 !important; }
  html.n4r .hero-status { grid-row: 1; grid-column: 2 !important; justify-self: start; align-self: center; margin: 0 0 0 18px !important; white-space: nowrap; }
  html.n4r .hero-cue { display: none !important; } /* le bandeau défilant invite déjà à descendre ; la flèche chevauchait la carte Plage */
  html.n4r .hero-title { grid-row: 2; margin-top: 18px !important; }
  html.n4r .hero-sub { grid-row: 3; }
  html.n4r .hero-bubble { grid-row: 4; }
  html.n4r .hero-ctas { grid-row: 5; margin-top: 10px !important; }
  html.n4r .n4r-proof { grid-row: 6; grid-column: 1 / 3; }
  /* pastilles dans les 2 colonnes de gauche : elles ne passent plus sous le tableau de bord */
  html.n4r .hero-pills { grid-row: 7; grid-column: 1 / 3 !important; }
  html.n4r .gauge-card { grid-column: 3 !important; grid-row: 1 / span 3; align-self: end; margin-bottom: 6px !important; }
  html.n4r .hero-side { grid-column: 3 !important; grid-row: 4 / span 4; align-self: start; }
  html.n4r .live-card { padding: 10px 16px !important; }
  html.n4r .live-card .live-value { font-size: 1.05rem !important; }
  html.n4r .live-card .live-icon { width: 38px !important; height: 38px !important; }
}
@media (max-width: 767px) {
  html.n4r #news-ticker { padding: 9px 0 !important; min-height: 0 !important; height: auto !important; }
  html.n4r #news-ticker > .container > span:not(.nt-icon) { flex: 1 1 auto !important; min-width: 0 !important; }
  html.n4r #news-ticker > .container { display: flex !important; flex-wrap: nowrap !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; text-align: left !important; font-size: .86rem !important; line-height: 1.4 !important; }
  html.n4r #news-ticker .nt-icon { margin: 2px 0 0 !important; position: static !important; }
  html.n4r #news-ticker .nt-close { position: static !important; margin: 0 !important; flex: none !important; height: auto !important; }
  html.n4r .hero-status { font-size: .78rem !important; letter-spacing: .08em !important; }
}
@media (max-width: 1023px) {
  html.n4r #hero { min-height: 0 !important; padding: 48px 0 84px !important; }
  html.n4r #hero::before { background: linear-gradient(180deg, rgba(10, 37, 64, .7) 0%, rgba(10, 37, 64, .5) 40%, rgba(10, 37, 64, .9) 100%) !important; }
  html.n4r .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html.n4r .gauge-card { margin: 4px 0 6px !important; }
  html.n4r .hero-side { grid-column: 1 !important; }
  html.n4r .hero-ctas .pill { flex: 1 1 auto; justify-content: center; }
  html.n4r .hero-title { max-width: none; }
}

/* Bandeau défilant (créé en JS à partir des services du héro, donc traduit) */
html.n4r .n4r-ticker {
  position: relative; z-index: 3; overflow: hidden; background: var(--n4r-navy); color: #fff;
  padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: -1px;
}
html.n4r .n4r-ticker__track { display: flex; width: max-content; will-change: transform; }
html.n4r .n4r-ticker__group { display: flex; align-items: center; gap: 30px; padding-right: 30px; white-space: nowrap; }
html.n4r .n4r-ticker__group span { font: italic 500 clamp(1.35rem, 2.6vw, 2rem)/1 var(--n4r-display); letter-spacing: -.01em; }
html.n4r .n4r-ticker__group i { font-style: normal; color: var(--n4r-sun); font-size: 1rem; }

/* La mer en direct (accueil) : bande créée par n4cc-refresh.js, rendu WebGL par n4cc-mer.js
   chargé à l'approche. Le dégradé ci-dessous sert de repli (sans WebGL, économie de données). */
html.n4r .n4r-livesea {
  position: relative; z-index: 3; height: clamp(230px, 26vw, 400px); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #1b4f72 0%, #4a90e2 40%, #0e4775 41%, #0a2540 100%);
}
html.n4r .n4r-livesea canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.n4r .n4r-livesea.is-fallback canvas { display: none; }
html.n4r .n4r-livesea__cap {
  position: absolute; left: clamp(14px, 4vw, 48px); bottom: clamp(12px, 2vw, 22px); margin: 0; z-index: 2;
  width: auto; max-width: min(520px, calc(100% - 28px)); padding: 9px 14px 8px; border-radius: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px;
  background: rgba(10, 37, 64, .38); backdrop-filter: blur(8px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); pointer-events: none; font-family: var(--n4r-body);
}
html.n4r .n4r-livesea__cap:empty { display: none; }
html.n4r .n4r-livesea__live {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(16, 185, 129, .22); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .5);
  font: 700 .7rem/1 var(--n4r-body); letter-spacing: .14em; text-transform: uppercase; text-shadow: none;
}
html.n4r .n4r-livesea__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
html.n4r .n4r-livesea__live.is-sim { background: rgba(255, 178, 63, .25); box-shadow: inset 0 0 0 1px rgba(255, 178, 63, .6); }
html.n4r .n4r-livesea__live.is-sim::before { background: #FFB23F; }
html.n4r .n4r-livesea__title { font: italic 600 clamp(1.15rem, 2vw, 1.6rem)/1.1 var(--n4r-display); letter-spacing: -.01em; }
html.n4r .n4r-livesea__data { font-size: .9rem; opacity: .92; font-variant-numeric: tabular-nums; }
html.n4r .n4r-livesea__moment { flex-basis: 100%; font: 600 clamp(1.2rem, 2vw, 1.5rem)/1 Caveat, 'DM Sans', system-ui, sans-serif; color: #FFE9A8; }
@media (max-width: 767px) {
  html.n4r .n4r-livesea { height: 300px; }
  html.n4r .n4r-livesea__title { font-size: 1.02rem; }
  html.n4r .n4r-livesea__data { font-size: .76rem; }
  html.n4r .n4r-livesea__moment { font-size: 1.1rem; }
  html.n4r .n4r-livesea__cap { padding: 7px 11px 6px; }
}

/* ---------------------------------------------------------------------
   Cartes & chiffres
   --------------------------------------------------------------------- */
html.n4r .stat-card, html.n4r .card.stat-card {
  background: var(--n4r-white) !important; border: 1px solid var(--n4r-line) !important; border-radius: var(--n4r-r) !important;
  box-shadow: var(--n4r-shadow) !important; transition: transform .45s var(--n4r-ease), box-shadow .45s var(--n4r-ease) !important;
}
html.n4r .stat-card:hover { transform: translateY(-6px) !important; box-shadow: var(--n4r-shadow-hi) !important; }
html.n4r .stat-card .card-icon { background: var(--n4r-paper) !important; color: var(--n4r-coral) !important; border-radius: 16px !important; box-shadow: none !important; }
html.n4r #super-pouvoir > .container > .stat-grid .stat-value {
  font-family: var(--n4r-display) !important; font-weight: 700 !important; letter-spacing: -.03em !important;
  color: var(--n4r-navy) !important; background: none !important; -webkit-text-fill-color: currentColor !important;
  font-variant-numeric: tabular-nums;
}
html.n4r .stat-value .n4r-unit { color: var(--n4r-coral); font-size: .55em; margin-left: .12em; font-weight: 600; }
html.n4r .stat-label { letter-spacing: .08em !important; color: var(--n4r-muted) !important; }
html.n4r .sp-palmares { border-top: 1px solid var(--n4r-line) !important; padding-top: clamp(40px, 6vw, 72px) !important; }
html.n4r .sp-palmares .stat-card .stat-value { color: var(--n4r-navy) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.n4r .plebiscites-rotator { border-radius: var(--n4r-r) !important; box-shadow: var(--n4r-shadow) !important; border: 1px solid var(--n4r-line) !important; background: var(--n4r-white) !important; }
html.n4r .plebiscite-text { font-family: var(--n4r-display) !important; }
/* Les avis sont empilés dans la même case de grille (au lieu d'une hauteur fixe de 160 px) :
   le cadre prend la hauteur du plus long avis, plus rien ne déborde. */
html.n4r .plebiscites-rotator { display: grid !important; height: auto !important; min-height: 0 !important; }
html.n4r .plebiscite-item { position: relative !important; inset: auto !important; grid-area: 1 / 1; width: auto !important; transform: none; }
html.n4r .plebiscite-item:not(.is-active) { pointer-events: none; }
html.n4r .plebiscite-dots {
  position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 14px !important;
  transform: translateX(-50%) !important; width: auto !important; height: auto !important; align-items: center !important; gap: 8px !important;
}
html.n4r .plebiscite-dots button { min-height: 0 !important; min-width: 0 !important; height: 8px !important; width: 8px !important; padding: 0 !important; border-radius: 99px !important; }
html.n4r .plebiscite-dots button.is-active { width: 22px !important; }
@media (max-width: 767px) {
  html.n4r .plebiscites-rotator { padding: 24px 20px 42px !important; }
  html.n4r .plebiscite-item { flex-direction: column !important; text-align: center; gap: 14px !important; }
  html.n4r .plebiscite-badge { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; }
  html.n4r .plebiscite-text { width: auto !important; max-width: none !important; font-size: 1.05rem !important; line-height: 1.45 !important; }
}

/* L'aire en bref (module 156) */
html.n4r .n4cc-eb .eb-card { border-radius: calc(var(--n4r-r) + 4px) !important; border: 1px solid var(--n4r-line) !important; box-shadow: var(--n4r-shadow) !important; background: var(--n4r-white) !important; }
html.n4r .n4cc-eb .eb-head, html.n4r .n4cc-eb .eb-faqh { display: flex !important; align-items: center; gap: 12px; letter-spacing: -.02em !important; }
html.n4r .n4cc-eb .eb-it { align-items: flex-start; }
html.n4r .n4cc-eb .eb-veht { border-radius: 999px !important; display: inline-flex !important; align-items: center; gap: 8px; }
html.n4r .n4cc-eb details { border-radius: var(--n4r-r-sm) !important; border: 1px solid var(--n4r-line) !important; box-shadow: none !important; background: var(--n4r-white) !important; }

/* Icônes : les emojis deviennent des pictos fins et cohérents */
html.n4r .n4r-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--n4r-coral); line-height: 0; }
html.n4r .n4r-ic svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html.n4r .n4r-ic svg.fill { fill: currentColor; stroke: none; }
html.n4r .n4cc-eb .eb-it > .ic, html.n4r .n4cc-eb .eb-head > span, html.n4r .n4cc-eb .eb-faqh > span, html.n4r .n4cc-eb .eb-rate > .ic {
  width: 38px; height: 38px; border-radius: 12px; background: var(--n4r-paper); font-size: 20px !important;
}
html.n4r .n4cc-eb .eb-rate > .ic { color: #F5B301; }
html.n4r .v53-step-icon.n4r-ic, html.n4r .v44-elec-feature-icon.n4r-ic {
  width: 56px !important; height: 56px !important; border-radius: 18px !important; margin-inline: auto;
  background: var(--n4r-navy) !important; color: var(--n4r-sun) !important; font-size: 26px !important;
}
html.n4r .v44-elec-feature-icon.n4r-ic { margin-inline: 0; }
html.n4r .v52-trust-item-icon.n4r-ic { width: 32px !important; height: 32px !important; border-radius: 10px !important; background: var(--n4r-navy) !important; color: var(--n4r-sun) !important; font-size: 16px !important; }
html.n4r .maxi-sticker, html.n4r .maxi-confetti { display: none !important; }
html.n4r .gallery-tile-icon { display: none !important; }

/* 3 étapes : une vraie route entre les étapes */
html.n4r .v53-howto-section { background: var(--n4r-cream) !important; }
html.n4r .v53-steps { position: relative; }
html.n4r .v53-step {
  position: relative; z-index: 1; background: var(--n4r-white) !important; border: 1px solid var(--n4r-line) !important;
  border-radius: var(--n4r-r) !important; box-shadow: var(--n4r-shadow) !important; transition: transform .5s var(--n4r-ease), box-shadow .5s var(--n4r-ease) !important;
}
html.n4r .v53-step.n4r-on { transform: translateY(-8px); box-shadow: var(--n4r-shadow-hi) !important; border-color: rgba(255, 178, 63, .6) !important; }
html.n4r .v53-step-num { background: var(--n4r-sun) !important; color: var(--n4r-navy) !important; box-shadow: 0 0 0 6px var(--n4r-cream) !important; font-family: var(--n4r-display) !important; }
html.n4r .n4r-road { position: absolute; z-index: 2; pointer-events: none; }
html.n4r .n4r-road__lane { position: absolute; inset: 0; border-radius: 99px; background: #2B3A4A; overflow: hidden; }
html.n4r .n4r-road__lane::after { content: ""; position: absolute; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 12px, transparent 12px 24px); }
html.n4r .n4r-road__done { position: absolute; inset: 0; background: linear-gradient(90deg, var(--n4r-sun-2), var(--n4r-sun)); }
html.n4r .n4r-road__van { position: absolute; width: 22px; height: 40px; z-index: 2; filter: drop-shadow(0 6px 6px rgba(10, 37, 64, .35)); }
html.n4r .n4r-road__stop { position: absolute; top: 50%; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; background: var(--n4r-cream); border: 2px solid #2B3A4A; font: 700 .8rem/1 var(--n4r-display); color: var(--n4r-navy); z-index: 1; transition: background-color .3s, border-color .3s; }
html.n4r .n4r-road__stop.is-on { background: var(--n4r-sun); border-color: var(--n4r-navy); }
@media (min-width: 900px) {
  html.n4r .v53-steps { margin-bottom: 70px !important; }
  html.n4r .n4r-road { left: 16.6%; right: 16.6%; bottom: -46px; height: 10px; }
  html.n4r .n4r-road__lane::after { left: 0; right: 0; top: 4px; height: 2px; }
  html.n4r .n4r-road__done { transform-origin: left; transform: scaleX(0); }
  html.n4r .n4r-road__van { left: 0; top: 50%; translate: -50% -50%; rotate: -90deg; }
}
@media (max-width: 899px) { html.n4r .n4r-road__stop { display: none; } }
@media (max-width: 899px) {
  html.n4r .v53-steps { padding-left: 34px; }
  html.n4r .n4r-road { left: 10px; top: 0; bottom: 0; width: 8px; }
  html.n4r .n4r-road__lane::after { top: 0; bottom: 0; left: 3px; width: 2px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .6) 0 10px, transparent 10px 20px); }
  html.n4r .n4r-road__done { transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--n4r-sun-2), var(--n4r-sun)); }
  html.n4r .n4r-road__van { left: 50%; top: 0; translate: -50% -50%; width: 18px; height: 32px; }
}

/* Bandeau confiance */
html.n4r .v52-trust-strip { border: 1px solid var(--n4r-line) !important; background: var(--n4r-white) !important; border-radius: var(--n4r-r) !important; box-shadow: var(--n4r-shadow) !important; }
html.n4r .v52-trust-item { gap: 10px !important; }

/* ---------------------------------------------------------------------
   Tarifs, simulateurs, électricité
   --------------------------------------------------------------------- */
html.n4r .v30-sim {
  border-radius: calc(var(--n4r-r) + 4px) !important; border: 1px solid var(--n4r-line) !important;
  box-shadow: var(--n4r-shadow) !important; background: var(--n4r-white) !important;
}
html.n4r .v30-total { border-radius: var(--n4r-r-sm) !important; background: var(--n4r-navy) !important; color: #fff !important; }
html.n4r .v30-total * { color: inherit; }
html.n4r input[type="range"] { accent-color: var(--n4r-coral); }
html.n4r .v39-mode-tab { border-radius: 14px !important; }
html.n4r .v39-mode-tab.is-active { background: var(--n4r-navy) !important; color: #fff !important; border-color: var(--n4r-navy) !important; }

html.n4r .v44-elec-premium {
  border-radius: calc(var(--n4r-r) + 8px) !important; box-shadow: var(--n4r-shadow-hi) !important; border: 0 !important;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(74, 144, 226, .28), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(255, 178, 63, .18), transparent 60%),
    var(--n4r-navy) !important;
  color: #fff !important;
}
html.n4r .v44-elec-premium > h2 { color: #fff !important; }
html.n4r .v44-elec-premium .v44-elec-lead { color: rgba(255, 255, 255, .78) !important; }
html.n4r .v44-elec-premium .v44-elec-lead strong { color: #fff !important; }
html.n4r .v47-stat { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: var(--n4r-r-sm) !important; }
html.n4r .v47-stat-num { color: var(--n4r-sun) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-family: var(--n4r-display) !important; }
html.n4r .v47-stat-lbl { color: rgba(255, 255, 255, .7) !important; }
html.n4r .v44-elec-feature { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: var(--n4r-r) !important; box-shadow: none !important; }
html.n4r .v44-elec-feature h3 { color: #fff !important; }
html.n4r .v44-elec-feature p { color: rgba(255, 255, 255, .72) !important; }
html.n4r .v44-elec-feature p strong { color: #fff !important; }
html.n4r .v44-elec-cta-row { background: rgba(255, 255, 255, .06) !important; border-radius: var(--n4r-r) !important; border: 1px solid rgba(255, 255, 255, .12) !important; }
html.n4r .v44-elec-cta-text, html.n4r .v44-elec-cta-text strong { color: #fff !important; }
html.n4r .v44-elec-cta-btn { background: var(--n4r-sun) !important; color: var(--n4r-navy) !important; border-radius: 999px !important; box-shadow: none !important; }

html.n4r .v34-card-list li { display: block !important; }
html.n4r .v34-card-list li > * { display: inline !important; }
html.n4r .v34-card-list li::before { margin-right: .4em !important; }
html.n4r .v34-card {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: visible !important;
  background: var(--n4r-white) !important; border: 1px solid var(--n4r-line) !important; border-radius: var(--n4r-r) !important;
  box-shadow: var(--n4r-shadow) !important; transition: transform .45s var(--n4r-ease), box-shadow .45s var(--n4r-ease) !important;
}
html.n4r .v34-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; pointer-events: none; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 178, 63, .18), transparent 60%);
}
html.n4r .v34-card .v52-card-ribbon { top: auto !important; bottom: -14px !important; right: 14px !important; left: auto !important; z-index: 3; transform-origin: center; }
/* cartes empilées sur mobile : le tampon passe en haut à gauche (il touchait la carte suivante) */
@media (max-width: 899px) {
  html.n4r .v34-card .v52-card-ribbon { top: -13px !important; bottom: auto !important; left: 20px !important; right: auto !important; }
}
html.n4r .v34-card .v34-card-badge { z-index: 3; }
html.n4r .v34-card:hover { transform: translateY(-6px) !important; box-shadow: var(--n4r-shadow-hi) !important; }
html.n4r .v34-card:hover::after { opacity: 1; }
html.n4r .v34-card.v34-haute { background: var(--n4r-navy) !important; border-color: var(--n4r-navy) !important; color: #fff !important; }
html.n4r .v34-card.v34-haute .v34-card-eyebrow, html.n4r .v34-card.v34-haute li { color: rgba(255, 255, 255, .82) !important; }
html.n4r .v34-card.v34-haute .v34-card-price { color: var(--n4r-sun) !important; -webkit-text-fill-color: currentColor !important; }
html.n4r .v34-card-price { font-family: var(--n4r-display) !important; letter-spacing: -.03em !important; color: var(--n4r-navy) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.n4r .v34-card-eyebrow { letter-spacing: .1em !important; }
/* Tampon « Populaire » : police du site (la manuscrite n'est pas chargée sur mobile → l'iPhone
   la remplaçait par une cursive anglaise), sans le petit triangle d'origine */
html.n4r .v52-card-ribbon {
  background: var(--n4r-coral) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 8px 18px -8px rgba(255, 120, 73, .9) !important;
  font: 800 .72rem/1 var(--n4r-body) !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  padding: 8px 14px !important; white-space: nowrap; width: auto !important; height: auto !important;
}
html.n4r .v52-card-ribbon::before, html.n4r .v52-card-ribbon::after { display: none !important; }
html.n4r .v34-card.v34-haute .v34-card-price small { color: rgba(255, 255, 255, .62) !important; -webkit-text-fill-color: rgba(255, 255, 255, .62) !important; }
html.n4r .v34-card-badge { background: var(--n4r-sun) !important; color: var(--n4r-navy) !important; border-radius: 999px !important; }

/* FAQ : ouverture fluide (CSS moderne, sans JS) */
html.n4r .faq-item, html.n4r .n4cc-eb details { transition: box-shadow .3s, border-color .3s; }
html.n4r .faq-item {
  background: var(--n4r-white) !important; border: 1px solid var(--n4r-line) !important; border-radius: var(--n4r-r-sm) !important; box-shadow: none !important;
}
html.n4r .faq-item[open] { border-color: rgba(255, 178, 63, .6) !important; box-shadow: var(--n4r-shadow) !important; }
@supports (interpolate-size: allow-keywords) {
  html.n4r { interpolate-size: allow-keywords; }
  html.n4r .faq-item::details-content, html.n4r .n4cc-eb details::details-content {
    height: 0; overflow: clip; transition: height .45s var(--n4r-ease), content-visibility .45s allow-discrete;
  }
  html.n4r .faq-item[open]::details-content, html.n4r .n4cc-eb details[open]::details-content { height: auto; }
}

/* ---------------------------------------------------------------------
   Galerie (cartes postales) & vidéos
   --------------------------------------------------------------------- */
html.n4r .gallery-tile { border-radius: var(--n4r-r) !important; overflow: hidden !important; box-shadow: var(--n4r-shadow-hi) !important; }
html.n4r .gallery-tile-bg img { transition: transform 1s var(--n4r-ease) !important; }
html.n4r .gallery-tile:hover .gallery-tile-bg img { transform: scale(1.06); }
html.n4r .gallery-tile-badge { border-radius: 999px !important; font-weight: 700 !important; }
html.n4r .gallery-tile-label {
  font-family: var(--n4r-display) !important; font-weight: 600 !important; letter-spacing: -.01em;
  background: rgba(10, 37, 64, .74) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  backdrop-filter: blur(8px); border: 0 !important; box-shadow: none !important; text-shadow: none !important;
  border-radius: 14px !important; padding: 9px 14px !important;
}
html.n4r .gallery-tile-content { justify-content: flex-end !important; align-items: flex-start !important; padding: 14px !important; }
html.n4r .videos-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
html.n4r .video-card { border-radius: var(--n4r-r) !important; overflow: hidden; border: 1px solid var(--n4r-line) !important; box-shadow: var(--n4r-shadow) !important; background: var(--n4r-white) !important; transition: transform .45s var(--n4r-ease), box-shadow .45s var(--n4r-ease) !important; }
html.n4r .video-card:hover { transform: translateY(-6px); box-shadow: var(--n4r-shadow-hi) !important; }
html.n4r .video-play-btn { background: var(--n4r-sun) !important; color: var(--n4r-navy) !important; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5) !important; }

/* Carte & étape */
html.n4r .map-card { border-radius: calc(var(--n4r-r) + 4px) !important; border: 1px solid var(--n4r-line) !important; box-shadow: var(--n4r-shadow-hi) !important; background: var(--n4r-white) !important; overflow: hidden; }
html.n4r .map-card iframe { border-radius: var(--n4r-r) !important; filter: saturate(1.05) contrast(1.02); }
html.n4r .section-seo-etape { background: var(--n4r-paper) !important; }
html.n4r .section-seo-etape .section-head p.section-lead { font-family: var(--n4r-display) !important; font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important; color: var(--n4r-blue) !important; }

/* ---------------------------------------------------------------------
   Appel final : coucher de soleil sur la mer, étoiles
   --------------------------------------------------------------------- */
html.n4r .section-final { position: relative; overflow: hidden; background: var(--n4r-navy) !important; isolation: isolate; }
html.n4r .section-final .final-card { background: none !important; border: 0 !important; box-shadow: none !important; color: #fff !important; position: relative; z-index: 2; backdrop-filter: none !important; }
html.n4r .section-final .final-card::before, html.n4r .section-final .final-card::after, html.n4r .section-final::before, html.n4r .section-final::after { display: none !important; }
html.n4r .section-final .final-card h2 { color: #fff !important; font-size: clamp(2.3rem, 5.4vw, 4.4rem) !important; line-height: 1.02 !important; letter-spacing: -.03em !important; }
html.n4r .section-final .final-card .accent { color: var(--n4r-sun) !important; -webkit-text-fill-color: var(--n4r-sun) !important; }
html.n4r .section-final .final-card p { color: rgba(255, 255, 255, .78) !important; }
html.n4r .section-final .final-card .eyebrow { font-family: var(--n4r-hand) !important; font-size: clamp(1.5rem, 2.6vw, 2rem) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--n4r-sun) !important; font-weight: 600 !important; }
html.n4r .section-final .final-card .eyebrow::before { display: none; }
html.n4r .section-final .pill-ghost { color: #fff !important; }
html.n4r body .section-final .pill.pill-secondary { background: rgba(255, 255, 255, .12) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5) !important; }
html.n4r .n4r-sunset { position: absolute; left: 50%; bottom: -62%; width: min(1200px, 170vw); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 178, 63, .6) 0%, rgba(255, 120, 73, .26) 32%, transparent 62%); }
html.n4r .n4r-sea { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 9vw, 130px); width: 100%; z-index: 1; pointer-events: none; }
html.n4r .section-final .n4r-stars { inset: 0 0 40% 0; opacity: .9; }

/* ---------------------------------------------------------------------
   Itinéraire de page (ordinateur) : la route et le camping-car
   --------------------------------------------------------------------- */
html.n4r .n4r-route { position: fixed; right: 14px; top: calc(50% + 44px); translate: 0 -50%; height: min(52vh, 460px); width: 34px; z-index: 90; display: none; }
@media (min-width: 1240px) { html.n4r .n4r-route { display: block; } }
html.n4r .n4r-route__capsule { position: absolute; inset: -16px 0; border-radius: 999px; background: rgba(255, 248, 231, .8); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -16px rgba(10, 37, 64, .5), inset 0 0 0 1px rgba(10, 37, 64, .08); }
html.n4r .n4r-route__road { position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; translate: -50% 0; border-radius: 99px; background: #2B3A4A; overflow: hidden; }
html.n4r .n4r-route__road::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .6) 0 7px, transparent 7px 14px); }
html.n4r .n4r-route__done { position: absolute; inset: 0; background: linear-gradient(180deg, var(--n4r-sun), var(--n4r-sun-2)); transform-origin: top; transform: scaleY(0); }
html.n4r .n4r-route__stop { position: absolute; left: 50%; width: 14px; height: 14px; padding: 0; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--n4r-navy); background: var(--n4r-cream); cursor: pointer; z-index: 1; transition: background-color .3s, transform .3s; }
html.n4r .n4r-route__stop:hover { transform: scale(1.3); }
html.n4r .n4r-route__stop.is-active { background: var(--n4r-sun); }
html.n4r .n4r-route__label { position: absolute; right: 24px; top: 50%; translate: 0 -50%; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; padding: 5px 11px; border-radius: 999px; background: var(--n4r-navy); color: #fff; font: 700 .74rem/1.2 var(--n4r-body); opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; }
html.n4r .n4r-route__stop:hover .n4r-route__label, html.n4r .n4r-route__stop:focus-visible .n4r-route__label, html.n4r .n4r-route.is-moving .n4r-route__stop.is-active .n4r-route__label { opacity: 1; translate: -4px -50%; }
html.n4r .n4r-route__van { position: absolute; left: 50%; top: 0; width: 20px; height: 36px; translate: -50% -50%; z-index: 2; filter: drop-shadow(0 4px 5px rgba(10, 37, 64, .4)); }
html.n4r .n4r-route__van svg { width: 100%; height: 100%; transition: rotate .45s var(--n4r-ease); }
html.n4r .n4r-route.is-up .n4r-route__van svg { rotate: 180deg; }

/* ---------------------------------------------------------------------
   Éléments flottants existants : harmonisés, gardés
   --------------------------------------------------------------------- */
html.n4r .megamenu-fab { background: var(--n4r-sun) !important; color: var(--n4r-navy) !important; box-shadow: 0 14px 30px -12px rgba(255, 150, 30, .9) !important; animation: none !important; }
html.n4r .megamenu-fab-hint { border-radius: 999px !important; box-shadow: var(--n4r-shadow) !important; }
html.n4r .cookie-consent-banner { border-radius: 20px !important; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55) !important; }
html.n4r .site-footer { background: linear-gradient(180deg, var(--n4r-navy), #061a2e) !important; }

/* ---------------------------------------------------------------------
   États initiaux des animations — uniquement quand le JS les pilote
   (jamais sur le héro : aucun impact sur le LCP)
   --------------------------------------------------------------------- */
html.n4r.n4r-motion [data-n4r-reveal] { opacity: 0; }
html.n4r.n4r-motion [data-n4r-split] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.n4r *, html.n4r *::before, html.n4r *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}