/* ==========================================================================
   SERV-Minecraft.fr - Main Stylesheet
   ========================================================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Pixelify+Sans:wght@600;700&display=swap');

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
  font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.gradient-text {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-gradient {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
}

.nav-shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Animations & Keyframes
   ========================================================================== */

/* Float Animation */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-15px); 
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Arrow Wiggle Animation */
@keyframes arrow-wiggle {
  0%, 100% { 
    transform: translateX(0px); 
  }
  25% { 
    transform: translateX(3px); 
  }
  75% { 
    transform: translateX(-3px); 
  }
}

.arrow-wiggle {
  animation: arrow-wiggle 2s ease-in-out infinite;
}

/* Pulse Animations */
@keyframes pulse-slow {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(0.95);
    opacity: 1;
  }
}

.pulse-ring {
  animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-success {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
}

.pulse-success {
  animation: pulse-success 2s infinite;
}

/* Slide Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.cta-bounce {
  animation: bounce-in 0.8s ease-out;
}

/* ==========================================================================
   Card Components
   ========================================================================== */

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15);
}

.card-3d {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
  transform: translateZ(0);
}

.card-3d:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Offer Cards (Commander page)
   ========================================================================== */

.offer-card {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  overflow: visible;
}

.offer-card .card-image {
  transition: transform 0.3s ease;
  transform: translateZ(0);
}

.offer-card:hover .card-image {
  transform: scale(1.05) translateZ(0);
}

.card-features {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.card-features.expanded {
  max-height: 500px;
  opacity: 1;
}

.expand-arrow {
  transition: transform 0.3s ease;
}

.expand-arrow.rotated {
  transform: rotate(180deg);
}

.expand-btn {
  transition: all 0.3s ease;
}

.expand-btn:hover {
  background-color: rgba(16, 185, 129, 0.1);
  transform: translateY(-1px);
}

/* ==========================================================================
   Step System (Commander page)
   ========================================================================== */

.step-container {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.step-enter {
  opacity: 0;
  transform: translateX(-100px);
}

.step-active {
  opacity: 1;
  transform: translateX(0);
}

.step-exit {
  opacity: 0;
  transform: translateX(100px);
}

/* Badge styles - simple fix */
.offer-selected-badge,
.version-selected-badge {
  width: max-content !important;
  height: max-content !important;
}

/* Commander page specific step transition */
.step-container {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-indicator {
  transition: all 0.3s ease;
}

.step-indicator.active {
  background-color: #10b981;
  color: white;
}

.progress-bar {
  transition: width 0.3s ease;
}

/* ==========================================================================
   Pixel Art Styles
   ========================================================================== */

.pixel-corners {
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile First Approach */
@media (max-width: 640px) {
  .card-hover:hover {
    transform: translateY(-4px);
  }
  
  .card-3d:hover {
    transform: translateY(-2px) translateZ(0);
  }
}

/* Tablet */
@media (min-width: 768px) {
  .float-animation {
    animation: float 4s ease-in-out infinite;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card-hover:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(16, 185, 129, 0.2);
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .gradient-text {
    -webkit-text-fill-color: #10b981;
    color: #10b981;
  }
  
  .card-hover,
  .card-3d,
  .offer-card {
    transform: none !important;
    box-shadow: none !important;
  }
  
  .animate-pulse,
  .animate-pulse-slow,
  .pulse-ring,
  .pulse-success,
  .arrow-wiggle,
  .float-animation {
    animation: none !important;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .float-animation,
  .arrow-wiggle,
  .pulse-ring,
  .pulse-success,
  .animate-pulse-slow {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .gradient-text {
    -webkit-text-fill-color: #059669;
    color: #059669;
  }
  
  .card-hover:hover,
  .card-3d:hover {
    border: 2px solid #10b981;
  }
}

/* ==========================================================================
   Dark Mode Support (Future-proofing)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here in the future */
}

/* ==========================================================================
   Custom Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #10b981 #f1f5f9;
}

/* ==========================================================================
   Focus States for Accessibility
   ========================================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.loading {
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #10b981;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   End of Stylesheet
   ========================================================================== */

/* ==========================================================================
   Vidéo de fond du hero
   Le poster est un background-image sur le calque sous la vidéo : il reste
   visible quand la vidéo est masquée, donc le hero n'est jamais vide.
   ========================================================================== */
.hero-video {
  /* évite un flash blanc pendant le décodage de la première frame */
  background: transparent;
}

/* Mobile : pas de vidéo. Le cadrage 854x392 serait rogné à l'extrême en
   portrait, et on évite de consommer 340 Ko de data. Le poster suffit. */
@media (max-width: 767px) {
  .hero-video { display: none; }
}

/* Réglage système « réduire les animations ».
   On n'efface plus la vidéo : le public de ce site est gamer, et les joueurs
   coupent massivement les animations Windows pour gagner en performances.
   La masquer priverait une grosse part des visiteurs du visuel.
   À la place, le JS retire l'attribut `loop` : la vidéo joue une fois puis
   se fige sur son image finale. Plus de mouvement répété en continu, ce qui
   est précisément ce que le réglage cherche à éviter. */

/* ==========================================================================
   Modale de contact
   <dialog> natif : la touche Échap, le backdrop et le piège à focus sont
   gérés par le navigateur, aucune librairie nécessaire.
   ========================================================================== */
#contact-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  color: inherit;
}

#contact-modal::backdrop {
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(3px);
}

/* le navigateur pose display:none quand la modale est fermée ;
   on ne l'anime qu'à l'ouverture */
#contact-modal[open] > div {
  animation: contact-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes contact-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #contact-modal[open] > div { animation: none; }
}

/* ==========================================================================
   Apparition au scroll

   L'état masqué est conditionné à la classe `js-reveal` posée sur <html>
   par le JS. Sans JS, rien n'est masqué : le contenu reste lisible.
   ========================================================================== */

.js-reveal .reveal,
.js-reveal .reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal .reveal.is-visible,
.js-reveal .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* cascade : les cartes arrivent l'une après l'autre plutôt qu'en bloc */
.js-reveal .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.js-reveal .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
.js-reveal .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.js-reveal .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Bandeau d'avis : défilement horizontal continu

   La piste contient les cartes EN DOUBLE : à -50 % de translation, la seconde
   moitié se retrouve exactement là où était la première, donc la boucle est
   invisible sans une ligne de JavaScript.
   ========================================================================== */

.marquee {
  overflow: hidden;
  /* estompe les deux bords pour éviter les cartes coupées net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  width: max-content;
  animation: marquee-left 70s linear infinite;
}

.marquee--rev .marquee__track {
  animation-name: marquee-right;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* le survol fige le défilement, pour pouvoir lire */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused !important;
}

/* Réglage système « réduire les animations ».
   On n'arrête PAS le défilement : le public de ce site est gamer et coupe
   massivement les animations Windows pour la performance : le bandeau
   perdrait tout intérêt pour une grande part des visiteurs.
   On le ralentit nettement, et la conformité WCAG 2.2.2 (« Pause, Stop,
   Hide ») est assurée par le bouton de pause, qui est un mécanisme explicite
   et visible : plus fiable que le survol, inutilisable au doigt. */
/* Le bloc global de reduced-motion (plus haut dans ce fichier) coupe TOUTES
   les animations avec `!important`. Le bandeau d'avis est du contenu, pas de
   la decoration : on l'exempte explicitement. Un selecteur de classe l'emporte
   sur `*`, meme a `!important` egal.
   Il est ralenti, jamais supprime : le public coupe massivement les animations
   Windows pour la performance, et un bandeau fige n'a aucun interet. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation-duration: 150s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   Surfaces de section

   La texture EST la surface : elle est pré-fusionnée sur sa couleur de fond,
   posée à opacité 1 et sans masque. C'est ce qui garantit que la section et le
   raccord qui la suit affichent rigoureusement la même valeur : l'approche
   précédente (couleur + texture à 0,6 sous masque radial) laissait 4,9 unités
   d'écart sur le clair, visibles comme une bande grise à chaque transition.

   Le halo reste en pseudo-élément : lui doit rester local à la section.
   ========================================================================== */

.surface-dark,
.surface-light,
.surface-light-alt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-repeat: repeat;
  background-size: 300px 300px;
  /* décalage posé par le JS pour que la grille reste continue d'une section
     à l'autre ; sans lui, chaque section repart de sa propre origine */
  background-position: 0 var(--tex-y, 0px);
}

.surface-dark {
  background-color: #030712;
  background-image: url("../textures/surface-dark.webp");
}

.surface-light {
  background-color: #ffffff;
  background-image: url("../textures/surface-light.webp");
}

.surface-light-alt {
  background-color: #f8fafc;
  background-image: url("../textures/surface-light-alt.webp");
}

/* Bandeau qui chevauche la hero (stats, illustration) : la section remonte de
   4rem sur la hero ; sous cette hauteur, elle peint le clair de la section
   suivante, pour que la carte soit à cheval entre sombre et clair. */
.hero-stats::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4rem;
  bottom: 0;
  z-index: -1;
  background-color: #ffffff;
  background-image: url("../textures/surface-light.webp");
  background-repeat: repeat;
  background-size: 300px 300px;
  background-position: 0 calc(var(--tex-y, 0px) - 4rem);
}

/* Les halos verts ont été retirés : ancrés en haut de chaque section, ils
   étaient forts au sommet et absents en bas, ce qui dessinait une rupture de
   couleur nette à chaque frontière entre deux sections sombres. */

/* ==========================================================================
   Raccords entre sections : arcs alternés

   Dans les quatre raccords de la page, c'est toujours le sombre qui fait face
   au clair. Le pseudo-élément porte donc systématiquement le sombre et dessine
   l'arc ; la bande porte le clair. Seul le SENS de la courbe change, en
   alternance : le premier raccord plonge vers le bas, le suivant remonte, etc.

   Il déborde de 25 % de chaque côté pour que la courbe reste douce sur toute la
   largeur au lieu de plonger dans les angles.

   La texture traverse le raccord : elle est posée à pleine opacité de part et
   d'autre. L'écart avec les sections, qui l'affichent à 0,7 sur leur couleur de
   fond, vaut moins de 2 unités de luminance : invisible à l'œil.
   ========================================================================== */

.section-fade {
  position: relative;
  height: 170px;
  overflow: hidden;
  pointer-events: none;
  background-color: #ffffff;
  background-image: url("../textures/surface-light.webp");
  background-size: 300px 300px;
  background-position: 0 var(--tex-y, 0px);
}

.section-fade--alt-dark {
  background-color: #f8fafc;
  background-image: url("../textures/surface-light-alt.webp");
}

.section-fade::before {
  content: "";
  position: absolute;
  left: -25%;
  width: 150%;
  background-color: #030712;
  background-image: url("../textures/surface-dark.webp");
  background-size: 300px 300px;
  background-position: 0 var(--tex-y-before, 0px);
}

/* le sombre plonge vers le bas */
.section-fade--down::before {
  top: -120px;
  height: calc(100% + 120px);
  border-radius: 0 0 50% 50% / 0 0 170px 170px;
}

/* le sombre remonte par le bas */
.section-fade--up::before {
  bottom: -120px;
  height: calc(100% + 120px);
  border-radius: 50% 50% 0 0 / 170px 170px 0 0;
}

@media (max-width: 767px) {
  .section-fade { height: 96px; }
  .section-fade--down::before { border-radius: 0 0 50% 50% / 0 0 96px 96px; }
  .section-fade--up::before   { border-radius: 50% 50% 0 0 / 96px 96px 0 0; }
}


/* ==========================================================================
   Wordmark

   Police pixel reservee au seul nom de marque. Elle n'est jamais utilisee
   ailleurs : une police pixel devient illisible en corps de texte et sous
   environ 16 px.

   Pixelify Sans plutot que Silkscreen ou Press Start 2P : c'est la seule des
   trois qui dessine un V distinct du Y, gere les accents francais et preserve
   la casse mixte de « Minecraft ».
   ========================================================================== */

.font-pixel,
.wordmark {
  font-family: 'Pixelify Sans', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.wordmark {
  /* la police pixel porte moins haut que Inter à taille égale */
  font-size: 1.12em;
}

/* Sur un nom d'offre, composé beaucoup plus gros, la compensation doit être
   plus légère : sinon le titre déborde de sa carte. */
h3.font-pixel {
  font-size: 1.18em;
  letter-spacing: 0;
}

/* ==========================================================================
   Prix

   La police pixel a été essayée ici et abandonnée : à cette taille, chiffres
   serrés, virgule et symbole euro deviennent illisibles : « 15,99 » se lisait
   « 1S,99 ». On revient à Inter et on fait porter la mise en valeur par la
   typographie elle-même.
   ========================================================================== */

.prix {
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;   /* les chiffres gardent la même chasse */
}

/* la devise en exposant, plus petite : c'est le contraste de taille qui donne
   du poids au nombre, pas la taille absolue */
.prix__dev {
  font-size: 0.52em;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: 0.42em;
  margin-left: 0.06em;
}

/* lueur de marque, très douce : lisible sur carte claire comme sur la verte */
.prix--clair { text-shadow: 0 2px 18px rgba(16, 185, 129, 0.28); }
.prix--vert  { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.22); }

.wordmark__tld {
  font-size: 0.72em;
  opacity: 0.6;
  letter-spacing: 0;
}

/* ==========================================================================
   Cube de chargement

   Balisage d'origine : Uiverse.io / andrew-demchenk0.
   Les faces reçoivent les textures de bloc d'herbe générées
   (`bloc-dessus.webp`, `bloc-cote.webp`), en `image-rendering: pixelated`
   pour que les pixels restent nets à l'agrandissement.
   ========================================================================== */

.cube-loader {
  --cube: 68px;
  position: relative;
  /* posé sur un <span> : sans `inline-block` l'élément reste `inline`
     et ignore purement et simplement width/height : le cube n'a aucune taille */
  display: inline-block;
  vertical-align: middle;
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  animation: cube-tourne 5s linear infinite;
}

.cube-wrapper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cube-span,
.cube-top {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

/* les 4 côtés, répartis par quarts de tour via --i */
.cube-span {
  background-image: url("../textures/bloc-cote.webp");
  transform: rotateY(calc(90deg * var(--i))) translateZ(calc(var(--cube) / 2));
}

.cube-top {
  background-image: url("../textures/bloc-dessus.webp");
  transform: rotateX(90deg) translateZ(calc(var(--cube) / 2));
}

@keyframes cube-tourne {
  from { transform: rotateX(-26deg) rotateY(0deg); }
  to   { transform: rotateX(-26deg) rotateY(360deg); }
}

/* Le bloc global de reduced-motion coupe toutes les animations : on exempte
   le cube, sinon il resterait figé de trois quarts, ce qui n'a aucun sens
   pour un indicateur de chargement. On le ralentit simplement. */
@media (prefers-reduced-motion: reduce) {
  .cube-loader { animation-duration: 12s !important; animation-iteration-count: infinite !important; }
}

.cube-loader--sm { --cube: 40px; }


/* ==========================================================================
   Séparation en diagonale de la page de connexion

   Le décalage doit être FRANC : 6 rem sur 900 px de hauteur donnent une pente
   de 6°, indiscernable d'une verticale. On travaille donc en `vw`, ce qui
   garantit une pente lisible quelle que soit la largeur d'écran.

   Le visuel déborde de la même valeur qu'il se fait retailler : son bord
   supérieur retombe ainsi exactement sur la limite d'origine des colonnes,
   et seul le bas mord sur la colonne du formulaire. Sans ce débord, la
   diagonale laisserait un triangle de fond visible.
   ========================================================================== */

@media (min-width: 1024px) {
  /* Valeurs littérales, sans variable CSS : `var()` dans `clip-path` n'est pas
     validé au parsing, la substitution échoue silencieusement selon le moteur
     et la règle entière est ignorée : sans erreur ni message en console. */
  .split-visuel {
    margin-left: -15vw;
    clip-path: polygon(15vw 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(15vw 0, 100% 0, 100% 100%, 0 100%);
  }

  /* on repousse le formulaire vers la gauche pour qu'il ne passe jamais
     sous l'oblique, y compris en bas de colonne où elle mord le plus */
  /* Le formulaire est centré sur la largeur VISIBLE moyenne de sa colonne
     (50vw en haut, 35vw en bas à cause de l'oblique), pas sur sa largeur
     totale : sinon il paraît collé à gauche. Valeur calculée, pas tâtonnée. */
  .split-forme { padding-right: 11vw; }

  /* Le contenu du visuel doit commencer APRÈS le point le plus à droite de
     l'oblique, c'est-à-dire son sommet. En dessous la diagonale s'écarte vers
     la gauche, donc la marge ne fait que croître : aucun risque de coupure. */
  .split-visuel-contenu { padding-left: calc(15vw + 3.5rem); }
}


/* ==========================================================================
   Voile de transition entre les pages
   ========================================================================== */

.transition-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 7, 18, 0.94);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s;
}

.transition-page.is-active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Barre de navigation

   Au sommet de la page elle est transparente, pour laisser voir la vidéo du
   hero. Dès que l'on descend, elle prend un fond opaque et une ombre : sans
   ça le texte des liens passerait sur des images claires de la vidéo.
   ========================================================================== */

.navbar {
  /* Toujours opaque. La barre est `sticky`, pas `fixed` : elle occupe sa place
     dans le flux, donc le hero commence EN DESSOUS d'elle, pas derrière. La
     rendre transparente ne révélait pas la vidéo mais le fond du <body>.
     Pour un vrai effet « barre posée sur la vidéo », il faudrait passer en
     `fixed` et compenser par un padding en haut du hero. */
  background-color: rgba(3, 7, 18, 0.94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Au scroll la barre ne change pas de couleur, elle prend de la profondeur :
   le contenu qui défile dessous a besoin d'être visuellement détaché. */
.navbar.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Icône minerai des cartes d'offre : 48 px, mais la ligne garde la hauteur du
   titre (36 px) grâce aux marges négatives, comme avec l'ancienne icône. */
.offre-icone {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin: -6px 0;
}

/* Sur la carte verte (Moddé), l'émeraude se fond dans le fond : pastille sombre. */
.offre-icone--contraste {
  padding: 4px;
  border-radius: 12px;
  background-color: rgba(3, 7, 18, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* CTA final : la vague du dessus ajoute déjà du sombre en haut (170 px, 96 px
   en mobile), on la compte dans la marge pour centrer le contenu. */
.cta-final {
  padding-top: 1.5rem;
  padding-bottom: calc(96px + 1.5rem);
}

@media (min-width: 768px) {
  .cta-final { padding-bottom: calc(170px + 1.5rem); }
}