/* =========================
   VARIABLES GLOBALES
========================== */
:root{
  color-scheme:light;

  --navy1:#f8fbff;
  --navy2:#edf5ff;
  --navy3:#e2effc;
  --navy4:#cfe1f5;
  --navy5:#b8d0eb;

  --card:#ffffff;
  --card2:#f3f8ff;

  --text:#142033;
  --text-light:#31445f;
  --text-soft:#64758c;

  --accent:#f59e0b;
  --accent-hover:#d97706;
  --accent-light:#b86b00;
  --accent-cool:#2563eb;
  --accent-cool-light:#dbeafe;

  --border:rgba(20,32,51,0.12);
  --shadow:0 14px 34px rgba(53,85,125,0.16);

  --header-bg:rgba(248,251,255,0.94);
  --hero-video-base:#edf5ff;
  --hero-video-overlay:
    linear-gradient(135deg, rgba(237,245,255,0.82), rgba(207,225,245,0.70)),
    radial-gradient(circle at 18% 22%, rgba(245,158,11,0.18), transparent 32%),
    rgba(255,255,255,0.10);

  --logo-bg-1:#ffffff;
  --logo-bg-2:#e5f0fb;
  --logo-hover-bg-1:#fef7e6;
  --logo-hover-bg-2:#dcecff;

  --secondary-bg:#ffffff;
  --secondary-hover:#e7f0fb;
  --secondary-border:#8fb4dd;
  --secondary-text:#142033;
  --arrow-text:#142033;

  --image-card-bg:#ffffff;

  --hero-card-bg:rgba(20,32,51,0.74);
  --hero-card-text:#ffffff;
  --hero-card-text-light:#e6edf5;

  --method-halo-primary:rgba(245,158,11,0.22);
  --method-halo-secondary:rgba(85,150,220,0.16);
  --method-halo-third:rgba(217,119,6,0.10);
  --method-step-bg:rgba(255,255,255,0.82);
  --method-step-light:rgba(245,158,11,0.12);

  --radius:18px;
  --container:1100px;
}

body.dark-theme{
  color-scheme:dark;

  --navy1:#101827;
  --navy2:#172235;
  --navy3:#1d2b42;
  --navy4:#263957;
  --navy5:#334a6d;

  --card:#24344d;
  --card2:#2d405c;

  --text:#ffffff;
  --text-light:#e6edf5;
  --text-soft:#bcc8d8;

  --accent:#f59e0b;
  --accent-hover:#d97706;
  --accent-light:#fbbf24;
  --accent-cool:#60a5fa;
  --accent-cool-light:#93c5fd;

  --border:rgba(255,255,255,0.11);
  --shadow:0 14px 34px rgba(0,0,0,0.30);

  --header-bg:rgba(16,24,39,0.96);
  --hero-video-base:#101827;
  --hero-video-overlay:
    linear-gradient(135deg, rgba(11,18,32,0.82), rgba(29,41,64,0.72)),
    rgba(0,0,0,0.18);

  --logo-bg-1:#3c5574;
  --logo-bg-2:#334b68;
  --logo-hover-bg-1:#526f93;
  --logo-hover-bg-2:#3c5574;

  --secondary-bg:#40536f;
  --secondary-hover:#516987;
  --secondary-border:#d6b36a;
  --secondary-text:#ffffff;
  --arrow-text:#ffffff;

  --image-card-bg:#ffffff;

  --hero-card-bg:rgba(29,41,64,0.72);
  --hero-card-text:#ffffff;
  --hero-card-text-light:#e6edf5;

  --method-halo-primary:rgba(245,158,11,0.30);
  --method-halo-secondary:rgba(251,191,36,0.13);
  --method-halo-third:rgba(217,119,6,0.13);
  --method-step-bg:rgba(36,52,77,0.88);
  --method-step-light:rgba(251,191,36,0.14);

  --radius:18px;
  --container:1100px;
}

/* =========================
   RESET / BASE
========================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--navy2);
  color:var(--text);
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

.container{
  width:90%;
  max-width:var(--container);
  margin:auto;
}

/* =========================
   EN-TÊTE / NAVIGATION
========================== */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  gap:24px;
}

.logo{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    background:linear-gradient(
        135deg,
        var(--logo-bg-1),
        var(--logo-bg-2)
    );

    border:1px solid var(--border);
    border-radius:16px;

    box-shadow:
        0 10px 24px rgba(0,0,0,.18),
        inset 0 1px rgba(255,255,255,.08);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.logo img{
    display:block;
    height:50px;
    width:auto;
}

.logo:hover{
    background:linear-gradient(
        135deg,
        var(--logo-hover-bg-1),
        var(--logo-hover-bg-2)
    );

    box-shadow:
        0 12px 30px rgba(0,0,0,.20),
        0 0 18px rgba(245,158,11,.28);

    transform:translateY(-1px);
}

.nav-links{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}

.nav-links a{
  color:var(--text);
  opacity:.9;
  font-weight:600;
  transition:0.25s ease;
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--accent-light);
  opacity:1;
}

/* =========================
   HERO
========================== */
.hero{
  padding:80px 0;
  background:linear-gradient(135deg,var(--navy1),var(--navy4));
}

.hero-content{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:center;
}

.hero h1{
  font-size:2.7rem;
  line-height:1.15;
}

.hero-text{
  color:var(--text-light);
  margin:20px 0 28px;
  max-width:650px;
}

.hero-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero-card{
  background:var(--card);
  padding:30px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.hero-card h2{
  margin-bottom:12px;
}

.hero-card ul{
  display:grid;
  gap:10px;
}

.hero-card li{
  position:relative;
  padding-left:16px;
}

.hero-card li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--accent-light);
}

/* =========================
   HERO AVEC VIDÉO
========================== */
.hero-video{
  position:relative;
  overflow:hidden;
  min-height:720px;
  display:flex;
  align-items:center;
  background:var(--hero-video-base);
}

.hero-video-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}

.bg-video.active{
  opacity:1;
}

.hero-video-overlay{
  position:absolute;
  inset:0;
  background:var(--hero-video-overlay);
}

.hero-content-video{
  position:relative;
  z-index:1;
}

.hero-video .hero-card{
  background:var(--hero-card-bg);
  color:var(--hero-card-text);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.10);
}

.hero-video .hero-text{
  max-width:700px;
}

.hero-video .hero-card li,
.hero-video .hero-card p{
  color:var(--hero-card-text-light);
}

/* =========================
   SECTIONS GÉNÉRALES
========================== */
.section{
  padding:80px 0;
}

.section-alt{
  background:var(--navy3);
}

.section-title{
  text-align:center;
  margin-bottom:50px;
}

.section-title h2{
  margin-bottom:10px;
  font-size:2rem;
}

.section-title p{
  color:var(--text-light);
}

.eyebrow{
  color:var(--accent-light);
  font-weight:700;
  margin-bottom:10px;
}

/* =========================
   CARTES GÉNÉRIQUES
========================== */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.card{
  background:var(--card);
  padding:28px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.card h3{
  margin-bottom:10px;
}

.card p{
  color:var(--text-light);
}

/* =========================
   BOUTONS
========================== */
.btn{
  display:inline-block;
  padding:14px 24px;
  border-radius:999px;
  font-weight:700;
  border:2px solid transparent;
  transition:all .25s ease;
}

.btn-primary{
  background:var(--accent);
  color:white;
  border-color:var(--accent-light);
  box-shadow:0 0 0 4px rgba(251,191,36,0.15);
}

.btn-primary:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:0 0 0 6px rgba(251,191,36,0.25);
}

.btn-secondary{
  background:var(--secondary-bg);
  color:var(--secondary-text);
  border:2px solid var(--secondary-border);
  box-shadow:0 0 0 4px rgba(214,179,106,0.12);
}

.btn-secondary:hover{
  background:var(--secondary-hover);
  transform:translateY(-2px);
  box-shadow:0 0 0 6px rgba(214,179,106,0.22);
}

.centered-block{
  margin-top:40px;
  text-align:center;
}

/* =========================
   SLIDER DES TYPES DE SITES
========================== */
.site-slider-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
}

.site-slider{
  display:flex;
  gap:20px;
  overflow-x:hidden;
  scroll-behavior:smooth;
  width:100%;
  max-width:928px; /* 3 cartes visibles */
  padding:8px 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.site-slider::-webkit-scrollbar{
  display:none;
}

.site-card{
  flex:0 0 296px;
  width:296px;
  min-height:185px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.site-card h3{
  margin-bottom:10px;
  font-size:1.05rem;
  line-height:1.3;
}

.site-card p{
  color:var(--text-light);
  font-size:0.98rem;
  line-height:1.55;
}

.slider-arrow{
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--secondary-bg);
  border:2px solid var(--secondary-border);
  color:var(--arrow-text);
  font-size:20px;
  cursor:pointer;
  transition:all .25s ease;
  flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(214,179,106,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
}

.slider-arrow:hover{
  background:var(--secondary-hover);
  transform:translateY(-2px);
  box-shadow:0 0 0 6px rgba(214,179,106,0.22);
}

/* =========================
   ÉTAPES / MÉTHODE
========================== */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.step{
  background:var(--card);
  padding:26px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.step span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:var(--navy5);
  border-radius:50%;
  margin-bottom:10px;
  font-weight:700;
}

.step h3{
  margin-bottom:10px;
}

.step p{
  color:var(--text-light);
}

/* =========================
   BLOCS 2 COLONNES
========================== */
.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.content-box{
  background:var(--card);
  padding:28px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.content-box h2{
  margin-bottom:12px;
}

.content-box p{
  color:var(--text-light);
  margin-bottom:14px;
}

.content-box p strong{
  color:var(--text);
}

.text-link{
  color:var(--accent-light);
  font-weight:600;
}

.text-link:hover{
  text-decoration:underline;
}

/* =========================
   CTA FINAL
========================== */
.cta-section{
  padding-top:0;
}

.cta-box{
  background:linear-gradient(135deg,var(--navy1),var(--navy5));
  padding:40px;
  border-radius:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.cta-box p{
  color:var(--text-light);
}

/* =========================
   FOOTER
========================== */
.footer{
  background:var(--navy1);
  padding-top:40px;
  margin-top:80px;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(180px, 260px));
  gap:60px;
  justify-content:center;
  text-align:center;
}

.footer-logo{
  display:inline-block;
  margin-bottom:10px;
}

.footer-text{
  color:var(--text-light);
}

.footer h3{
  margin-bottom:12px;
}

.footer-links{
  display:grid;
  gap:6px;
  justify-items:center;
}

.footer-links a{
  color:var(--text-light);
}

.footer-links a:hover{
  color:var(--accent-light);
}

.footer-bottom{
  margin-top:30px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  color:var(--text-light);
}

/* =========================
   PAGES INTERNES
========================== */
.page-banner{
  padding:70px 0 30px;
  background:linear-gradient(180deg, rgba(245,158,11,0.10), rgba(0,0,0,0));
}

.small-banner{
  padding-bottom:10px;
}

.narrow{
  max-width:820px;
}

.page-intro{
  color:var(--text-light);
  max-width:760px;
}

/* =========================
   SERVICES / PORTFOLIO / À PROPOS / CONTACT / LÉGAL
========================== */
.services-stack{
  display:grid;
  gap:22px;
}

.service-detail{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:30px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
}

.service-tag,
.portfolio-type{
  color:var(--accent-light);
  font-weight:700;
  margin-bottom:10px;
}

.service-detail h2,
.portfolio-info h2,
.about-panel h2,
.contact-panel h2,
.contact-form-box h2{
  margin-bottom:12px;
}

.service-detail p,
.portfolio-info p,
.about-panel p,
.choice-card p,
.quote-card p,
.contact-panel p,
.legal-box p{
  color:var(--text-light);
}

.service-points{
  display:grid;
  gap:10px;
}

.service-points li{
  position:relative;
  padding-left:18px;
  color:var(--text);
}

.service-points li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--accent-light);
}

.choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.choice-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}

.choice-card h3{
  margin-bottom:10px;
}

.portfolio-showcase{
  display:grid;
  gap:26px;
}

.portfolio-item{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:26px;
  align-items:stretch;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.portfolio-visual{
  min-height:220px;
  background:linear-gradient(135deg,var(--card2),var(--secondary-bg));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-weight:700;
}

.portfolio-info{
  padding:28px;
}

.about-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.about-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}

.timeline-list{
  display:grid;
  gap:22px;
}

.timeline-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}

.timeline-item span{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--navy5);
  font-weight:700;
}

.timeline-item h3{
  margin-bottom:8px;
}

.timeline-item p{
  color:var(--text-light);
}

.testimonials-wall{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.quote-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
}

.quote-text{
  margin-bottom:14px;
}

.quote-author{
  color:var(--accent-light);
  font-weight:600;
}

.contact-layout{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:24px;
}

.contact-panel,
.contact-form-box,
.legal-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}

.contact-meta{
  margin-top:22px;
  display:grid;
  gap:8px;
}

.contact-form-real{
  display:grid;
  gap:14px;
}

.contact-form-real input,
.contact-form-real textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:var(--card2);
  color:var(--text);
  outline:none;
}

.contact-form-real input::placeholder,
.contact-form-real textarea::placeholder{
  color:var(--text-soft);
}

.contact-form-real input:focus,
.contact-form-real textarea:focus{
  border-color:var(--accent-light);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.legal-box{
  display:grid;
  gap:12px;
}

.legal-box strong{
  color:var(--text);
}

/* =========================
   RESPONSIVE
========================== */
@media(max-width:1100px){
  .hero-content,
  .steps,
  .split-grid,
  .service-detail,
  .portfolio-item,
  .about-layout,
  .testimonials-wall,
  .choice-grid,
  .contact-layout{
    grid-template-columns:1fr;
  }

  .cta-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .site-slider{
    max-width:612px; /* 2 cartes visibles */
  }
}

@media(max-width:760px){
  .nav{
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
  }

  .section{
    padding:60px 0;
  }

  .hero{
    padding:70px 0;
  }

  .hero h1{
    font-size:2.2rem;
  }

  .hero-video{
    min-height:auto;
  }

  .hero-video-bg{
    height:100%;
  }

  .hero-video .hero-card{
  background:var(--hero-card-bg);
  color:var(--hero-card-text);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.10);
}

  .site-slider-wrapper{
    gap:12px;
  }

  .site-slider{
    max-width:296px; /* 1 carte visible */
  }

  .slider-arrow{
    width:46px;
    height:46px;
    font-size:18px;
  }

  .form-row{
    grid-template-columns:1fr;
  }

  .timeline-item{
    grid-template-columns:1fr;
  }
  
}

/* =========================
   IMAGE DANS LES CARTES
========================== */

.site-card{
  overflow:hidden;
  padding:0;
}

/* Zone image */
.card-image{
  width:100%;
  height:180px;
  overflow:hidden;
  padding:0;
  margin:0;
  background:var(--image-card-bg);
}

.card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Contenu texte */
.card-content{
  padding:20px 22px 22px;
}

/* Image spécifique au site vitrine */
.site-vitrine-card .card-image{
  background-image:url("assets/site-vitrine.png");
}

.site-card:hover .card-image{
  transform:scale(1.05);
}

.card-image{
  transition:transform 0.4s ease;
}
/* =========================
   BALISES IMAGE VIDES DU SLIDER
========================== */
.card-image{
  width:100%;
  height:180px;
  overflow:hidden;
  padding:0;
  margin:0;
  background:var(--image-card-bg);
}

.card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.0);
  transform-origin:center;
}

.card-image img[src=""]{
  display:none;
}


/* Champ anti-spam invisible du formulaire */
.hidden-field{
  position:absolute;
  left:-9999px;
  opacity:0;
  height:0;
  width:0;
  pointer-events:none;
}

/* =========================
   PROFILS PAGE À PROPOS
========================== */
.profile-layout{
  align-items:stretch;
}

.profile-card{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  align-items:start;
}

.profile-image{
  min-height:150px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,0.28);
  background:linear-gradient(135deg,var(--card2),var(--secondary-bg));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text-soft);
  font-size:0.9rem;
  overflow:hidden;
}

.profile-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profile-image img[src=""]{
  display:none;
}

@media(max-width:760px){
  .profile-card{
    grid-template-columns:1fr;
  }

  .profile-image{
    width:150px;
    height:150px;
  }
}


/* =========================
   CORRECTION SLIDER ACCUEIL
   - Empêche le désalignement lors des clics rapides
========================== */
.site-slider{
  scroll-snap-type:x mandatory;
}

.site-card{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}


/* =========================
   BACKGROUND MÉTHODE DE TRAVAIL
   - web_grid.png en fond
   - Halos liés à la souris sur toute la page
   - Réseau incliné doucement par la position de la souris
========================== */
.work-method-section{
  --mouse-x:50%;
  --mouse-y:50%;
  --grid-rotate-x:0deg;
  --grid-rotate-y:0deg;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--method-halo-primary), transparent 20%),
    radial-gradient(circle at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), var(--method-halo-secondary), transparent 26%),
    linear-gradient(135deg, var(--navy3), var(--navy2));
}

.work-method-section::before{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:-2;
  background-image:url("assets/web_grid.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(1180px, 96vw) auto;
  opacity:0.38;
  pointer-events:none;
  transform-origin:center;
  transform:perspective(900px) rotateX(var(--grid-rotate-x)) rotateY(var(--grid-rotate-y)) scale(1.04);
  transition:transform 0.08s linear;
  will-change:transform;
}

.work-method-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--method-halo-primary), transparent 17%),
    radial-gradient(circle at calc(var(--mouse-x) + 20%) calc(var(--mouse-y) + 14%), var(--method-halo-third), transparent 22%);
  filter:blur(18px);
  opacity:0.9;
  pointer-events:none;
}

.work-method-content{
  position:relative;
  z-index:1;
}

.work-method-section .step{
  position:relative;
  overflow:hidden;
  background:var(--method-step-bg);
  backdrop-filter:blur(4px);
}

.work-method-section .step::after{
  content:"";
  position:absolute;
  inset:auto -30% -55% -30%;
  height:110px;
  background:linear-gradient(90deg, transparent, var(--method-step-light), transparent);
  transform:rotate(-4deg);
  animation:websiStepLight 5s ease-in-out infinite;
}

@keyframes websiStepLight{
  0%, 100%{
    transform:translateX(-20%) rotate(-4deg);
    opacity:0;
  }

  45%, 60%{
    opacity:1;
  }

  100%{
    transform:translateX(20%) rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .work-method-section::before,
  .work-method-section .step::after{
    animation:none;
    transition:none;
    transform:scale(1.04);
  }
}


/* Footer centré après suppression du bloc logo */
@media(max-width:760px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
}



/* =========================
   BOUTON DE THÈME
========================== */
.theme-toggle{
  position:relative;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--border);
  background:linear-gradient(135deg,var(--card),var(--card2));
  color:var(--accent-light);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.theme-toggle:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.20),
    0 0 18px rgba(245,158,11,.22);
}

.theme-toggle-icon{
  font-size:1.15rem;
  line-height:1;
}

.theme-toggle::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:7px 10px;
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:var(--shadow);
}

.theme-toggle:hover::after{
  opacity:1;
  transform:translateY(0);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

@media(max-width:760px){
  .nav-actions{
    width:100%;
    justify-content:space-between;
  }

  .theme-toggle::after{
    right:auto;
    left:0;
  }
}


/* =========================
   FOOTER RESTRUCTURÉ
========================== */
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:42px;
  justify-content:center;
  text-align:left;
}

.footer-brand,
.footer-contact{
  display:grid;
  gap:8px;
}

.footer-brand p,
.footer-contact li,
.footer-contact a{
  color:var(--text-light);
}

.footer-contact a:hover{
  color:var(--accent-light);
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.footer-bottom-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer-bottom-links a{
  color:var(--text-light);
  font-weight:600;
}

.footer-bottom-links a:hover{
  color:var(--accent-light);
}

@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-links{
    justify-items:center;
  }

  .footer-bottom{
    justify-content:center;
    text-align:center;
  }

  .footer-bottom-links{
    justify-content:center;
  }
}


/* =========================
   CTA FINAL CENTRÉ + VAGUE AU SURVOL
========================== */
.cta-section{
  padding-top:80px;
}

.cta-box{
  position:relative;
  overflow:hidden;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  align-items:center;
  max-width:900px;
  margin:0 auto;
  isolation:isolate;
}

.cta-box > div,
.cta-box .btn{
  position:relative;
  z-index:2;
}

.cta-box > div{
  max-width:680px;
}

.cta-box::before{
  content:"";
  position:absolute;
  inset:-45%;
  z-index:1;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,0.00) 42%,
      rgba(255,255,255,0.26) 48%,
      var(--accent-light) 50%,
      rgba(255,255,255,0.22) 52%,
      rgba(255,255,255,0.00) 58%,
      transparent 65%,
      transparent 100%
    );
  opacity:0;
  transform:translateX(-70%) rotate(0.001deg);
  pointer-events:none;
}

.cta-box:hover::before{
  opacity:0.55;
  animation:websiCtaWave .72s ease-out forwards;
}

@keyframes websiCtaWave{
  0%{
    transform:translateX(-70%) skewX(-10deg);
  }

  100%{
    transform:translateX(70%) skewX(-10deg);
  }
}

/* =========================
   FOOTER CENTRÉ
========================== */
.footer-grid{
  text-align:center;
}

.footer-grid h3,
.footer-brand,
.footer-brand p,
.footer-contact,
.footer-contact ul,
.footer-links{
  text-align:center;
  justify-items:center;
}

.footer-brand,
.footer-contact{
  align-items:center;
}

.footer-links{
  align-items:center;
}

.footer-bottom{
  text-align:center;
}

.footer-bottom-links{
  justify-content:center;
}



/* =========================
   AJUSTEMENTS THÈME CLAIR - COULEUR COMPLÉMENTAIRE
========================== */
body.light-theme{
  background:
    radial-gradient(circle at 12% 8%, rgba(37,99,235,0.09), transparent 26%),
    radial-gradient(circle at 85% 18%, rgba(245,158,11,0.08), transparent 24%),
    var(--navy2);
}

body.light-theme .header{
  background:rgba(248,251,255,0.94);
  backdrop-filter:blur(10px);
}

body.light-theme .nav-links a{
  color:#172033;
}

body.light-theme .nav-links a:hover,
body.light-theme .nav-links a.active{
  color:var(--accent-hover);
}

body.light-theme .nav-links a.active::after{
  background:var(--accent);
}

body.light-theme .hero-card,
body.light-theme .card,
body.light-theme .content-box,
body.light-theme .about-panel,
body.light-theme .contact-panel,
body.light-theme .contact-form-box,
body.light-theme .legal-box,
body.light-theme .quote-card,
body.light-theme .choice-card,
body.light-theme .service-detail,
body.light-theme .portfolio-item,
body.light-theme .timeline-item,
body.light-theme .step{
  background:linear-gradient(135deg, rgba(255,255,255,0.94), rgba(239,247,255,0.90));
  border-color:rgba(37,99,235,0.13);
}

body.light-theme .btn-secondary{
  color:#172033;
  background:linear-gradient(135deg,#ffffff,var(--accent-cool-light));
  border-color:rgba(37,99,235,0.28);
}

body.light-theme .btn-secondary:hover{
  color:#172033;
  background:linear-gradient(135deg,#eff6ff,#bfdbfe);
}

body.light-theme .slider-arrow{
  color:#172033;
  background:linear-gradient(135deg,#ffffff,var(--accent-cool-light));
  border-color:rgba(37,99,235,0.28);
}

body.light-theme .slider-arrow:hover{
  background:linear-gradient(135deg,#eff6ff,#bfdbfe);
}

body.light-theme .cta-box{
  background:
    radial-gradient(circle at 16% 22%, rgba(245,158,11,0.15), transparent 32%),
    linear-gradient(135deg,#ffffff,#cfe1f5);
  border-color:rgba(37,99,235,0.16);
}

body.light-theme .footer{
  background:#f8fbff;
  border-top:1px solid rgba(37,99,235,0.12);
}

body.light-theme .footer-links a,
body.light-theme .footer-brand p,
body.light-theme .footer-contact a,
body.light-theme .footer-bottom{
  color:#31445f;
}

body.light-theme .footer-links a:hover,
body.light-theme .footer-contact a:hover,
body.light-theme .footer-bottom-links a:hover{
  color:var(--accent-hover);
}

/* =========================
   ÉTAT ACTIF DU MENU
========================== */
.nav-links a{
  position:relative;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  border-radius:999px;
  background:transparent;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease, background .25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after{
  transform:scaleX(1);
}

.nav-links a:hover::after{
  background:var(--accent-cool);
}

.nav-links a.active{
  color:var(--accent-light);
}

.nav-links a.active::after{
  background:var(--accent);
}


/* =========================
   DÉCOR HEADER - LIGNES DIAGONALES
========================== */

.header::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:min(980px,70vw);
    pointer-events:none;
    z-index:-1;

    opacity:1;

    background:
        /* Bandeau plein de départ */
        linear-gradient(
            115deg,
            #60A5FA 0px 202px,
            transparent 202px 216px
        ),

        /* Lignes très larges et proches au départ */
        linear-gradient(
            115deg,
            transparent 206px,
            #60A5FA 206px 242px,
            transparent 242px 254px
        ),

        linear-gradient(
            115deg,
            transparent 248px,
            #60A5FA 248px 281px,
            transparent 281px 296px
        ),

        linear-gradient(
            115deg,
            transparent 292px,
            #60A5FA 292px 321px,
            transparent 321px 340px
        ),

        linear-gradient(
            115deg,
            transparent 338px,
            #60A5FA 338px 363px,
            transparent 363px 386px
        ),

        linear-gradient(
            115deg,
            transparent 388px,
            #60A5FA 388px 409px,
            transparent 409px 438px
        ),

        /* Transition progressive vers des lignes plus fines et espacées */
        linear-gradient(
            115deg,
            transparent 444px,
            #60A5FA 444px 462px,
            transparent 462px 500px
        ),

        linear-gradient(
            115deg,
            transparent 512px,
            #60A5FA 512px 527px,
            transparent 527px 574px
        ),

        linear-gradient(
            115deg,
            transparent 594px,
            #60A5FA 594px 606px,
            transparent 606px 664px
        ),

        linear-gradient(
            115deg,
            transparent 690px,
            #60A5FA 690px 699px,
            transparent 699px 770px
        ),

        linear-gradient(
            115deg,
            transparent 806px,
            #60A5FA 806px 812px,
            transparent 812px 894px
        ),

        linear-gradient(
            115deg,
            transparent 938px,
            #60A5FA 938px 942px,
            transparent 942px 1030px
        );

    mask-image:linear-gradient(
        90deg,
        #000 0%,
        #000 72%,
        transparent 100%
    );

    -webkit-mask-image:linear-gradient(
        90deg,
        #000 0%,
        #000 72%,
        transparent 100%
    );
}

/* =========================================================
   CONTACT — GRANDES PHOTOS DE FOND + ÉCART CENTRAL DE 50 PX
   ========================================================= */
.contact-section,
section.contact{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:900px;
}

.contact-bg-images,
.contact-section-images{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.contact-bg-photo{
  position:absolute;
  display:block;

  /* Deux grandes images occupant presque toute la largeur disponible */
  width:clamp(430px, 46vw, 760px);
  height:118%;

  object-fit:cover;
  object-position:center;
  background-size:cover;
  background-position:center;

  border-radius:34px;
  opacity:.62;
  filter:none;

  /* Fondu vertical : supprime la délimitation nette en haut et en bas. */
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.25) 4%,
    #000 12%,
    #000 88%,
    rgba(0,0,0,.35) 96%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.25) 4%,
    #000 12%,
    #000 88%,
    rgba(0,0,0,.35) 96%,
    transparent 100%
  );

  box-shadow:0 32px 80px rgba(15,23,42,.18);
  border:0;

  will-change:transform;
  transition:opacity .25s ease;
}

/* 25 px de chaque côté du centre = 50 px entre les deux images */
.photo-left,
.contact-bg-photo-1{
  right:calc(50% + 25px);
  left:auto;
  top:-10%;
  margin:0;
  transform:
    translateY(var(--contact-parallax-left, 0px))
    rotate(-1.2deg);
}

.photo-right,
.contact-bg-photo-2{
  left:calc(50% + 25px);
  right:auto;
  top:10%;
  margin:0;
  transform:
    translateY(var(--contact-parallax-right, 0px))
    rotate(1.2deg);
}

/* Le contenu reste au-dessus des images */
.contact-section > *:not(.contact-bg-images):not(.contact-section-images),
section.contact > *:not(.contact-bg-images):not(.contact-section-images),
.contact-section .contact-layout{
  position:relative;
  z-index:2;
}

/* Tablette */
@media(max-width:1100px){
  .contact-section,
  section.contact{
    min-height:820px;
  }

  .contact-bg-photo{
    width:calc(50vw - 35px);
    min-width:0;
    height:112%;
    opacity:.48;
  }

  .photo-left,
  .contact-bg-photo-1{
    right:calc(50% + 25px);
    top:-6%;
  }

  .photo-right,
  .contact-bg-photo-2{
    left:calc(50% + 25px);
    top:12%;
  }
}

/* Mobile : on conserve l'effet, mais sans gêner la lecture */
@media(max-width:760px){
  .contact-section,
  section.contact{
    min-height:auto;
  }

  .contact-bg-photo{
    width:calc(50vw - 29px);
    height:92%;
    border-radius:22px;
    opacity:.22;
  }

  .photo-left,
  .contact-bg-photo-1{
    right:calc(50% + 25px);
    top:1%;
  }

  .photo-right,
  .contact-bg-photo-2{
    left:calc(50% + 25px);
    top:9%;
  }
}

@media(prefers-reduced-motion:reduce){
  .photo-left,
  .contact-bg-photo-1,
  .photo-right,
  .contact-bg-photo-2{
    transform:none;
  }
}


/* Texte à la place des cartes de choix */
.choice-text{
  max-width:900px;
  margin:20px auto 0;
  text-align:center;
}
.choice-text p{
  font-size:1.08rem;
  line-height:1.9;
  color:var(--text-light);
}

/* Bordures colorées des cartes de services */
.service-card,
.service-box,
.offer-card,
.pricing-card,
.format-card{
  border:2px solid var(--accent) !important;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.service-card:hover,
.service-box:hover,
.offer-card:hover,
.pricing-card:hover,
.format-card:hover{
  border-color:var(--accent-warm) !important;
}

/* =========================================================
   CONTACT — PHOTOS ALIGNÉES, TAILLES DIFFÉRENTES
   ========================================================= */
.contact-bg-photo-1{
  top:-4%;
  width:clamp(500px, 49vw, 820px);
  height:124%;
}

.contact-bg-photo-2{
  top:-4%;
  width:clamp(390px, 39vw, 650px);
  height:124%;
}

@media(max-width:1100px){
  .contact-bg-photo-1,
  .contact-bg-photo-2{
    top:-2%;
    height:116%;
  }

  .contact-bg-photo-1{
    width:calc(55vw - 25px);
  }

  .contact-bg-photo-2{
    width:calc(45vw - 25px);
  }
}

@media(max-width:760px){
  .contact-bg-photo-1,
  .contact-bg-photo-2{
    top:2%;
    height:94%;
  }

  .contact-bg-photo-1{
    width:calc(56vw - 25px);
  }

  .contact-bg-photo-2{
    width:calc(44vw - 25px);
  }
}

/* =========================================================
   PAGE TARIFS
   ========================================================= */
.tarifs-page{
  overflow:hidden;
}

.tarifs-hero{
  padding:clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 88px);
  background:
    radial-gradient(circle at 15% 20%, rgba(245,158,11,.16), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(37,99,235,.14), transparent 34%),
    linear-gradient(135deg,var(--navy1),var(--navy4));
  border-bottom:1px solid var(--border);
}

.tarifs-hero-content{
  max-width:850px;
  text-align:center;
}

.section-kicker{
  display:inline-block;
  margin-bottom:14px;
  color:var(--accent-light);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.tarifs-hero h1{
  max-width:780px;
  margin:0 auto;
  font-size:clamp(2.25rem, 5vw, 4.2rem);
  line-height:1.08;
}

.tarifs-hero p{
  max-width:720px;
  margin:22px auto 0;
  color:var(--text-light);
  font-size:1.08rem;
}

.tarifs-section{
  padding:clamp(68px, 8vw, 110px) 0;
}

.tarifs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

.tarifs-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:34px 30px 30px;
  background:linear-gradient(155deg,var(--card),var(--card2));
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tarifs-card:hover{
  transform:translateY(-7px);
  border-color:rgba(37,99,235,.42);
  box-shadow:0 22px 48px rgba(53,85,125,.22);
}

.tarifs-card-featured{
  border:2px solid var(--accent);
  box-shadow:
    0 22px 50px rgba(245,158,11,.18),
    var(--shadow);
}

.tarifs-card-featured:hover{
  border-color:var(--accent-hover);
  box-shadow:
    0 26px 58px rgba(245,158,11,.24),
    var(--shadow);
}

.tarifs-badge{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  padding:8px 18px;
  color:#ffffff;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  border-radius:999px;
  box-shadow:0 10px 22px rgba(245,158,11,.30);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
}

.tarifs-card-kicker{
  margin-bottom:4px;
  color:var(--accent-light);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.tarifs-card h2{
  font-size:1.85rem;
}

.tarifs-price{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:18px 0;
}

.tarifs-price span{
  color:var(--text-soft);
  font-size:.88rem;
}

.tarifs-price strong{
  color:var(--text);
  font-size:clamp(2rem, 3.2vw, 2.7rem);
  line-height:1.05;
}

.tarifs-description{
  min-height:78px;
  color:var(--text-light);
}

.tarifs-features{
  display:grid;
  gap:12px;
  margin:25px 0 30px;
}

.tarifs-features li{
  position:relative;
  padding-left:27px;
  color:var(--text-light);
}

.tarifs-features li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:900;
}

.tarifs-button{
  width:100%;
  margin-top:auto;
  text-align:center;
}

.tarifs-options-section{
  padding:clamp(68px, 8vw, 104px) 0;
  background:linear-gradient(180deg,var(--navy3),var(--navy2));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.tarifs-options-heading{
  max-width:760px;
  margin:0 auto 38px;
  text-align:center;
}

.tarifs-options-heading h2{
  font-size:clamp(2rem, 4vw, 3rem);
}

.tarifs-options-heading p{
  margin-top:14px;
  color:var(--text-light);
}

.tarifs-options-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.tarifs-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:22px 24px;
  background:var(--card);
  border:1px solid var(--border);
  border-left:4px solid var(--accent-cool);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(53,85,125,.10);
}

.tarifs-option h3{
  margin-bottom:3px;
  font-size:1.05rem;
}

.tarifs-option p{
  color:var(--text-soft);
  font-size:.94rem;
}

.tarifs-option strong{
  flex:0 0 auto;
  color:var(--accent-light);
  font-size:1.08rem;
  white-space:nowrap;
}

.tarifs-note{
  margin-top:28px;
  padding:20px 22px;
  color:var(--text-light);
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.28);
  border-radius:16px;
}

.tarifs-note strong{
  color:var(--text);
}

@media(max-width:920px){
  .tarifs-grid{
    grid-template-columns:1fr;
    max-width:680px;
    margin:auto;
  }

  .tarifs-description{
    min-height:0;
  }
}

@media(max-width:720px){
  .tarifs-options-grid{
    grid-template-columns:1fr;
  }

  .tarifs-card{
    padding:32px 24px 26px;
  }
}

@media(max-width:520px){
  .tarifs-option{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .tarifs-option strong{
    white-space:normal;
  }
}


/* =========================================================
   CONFIGURATEUR DE FORMULE
   ========================================================= */
.tarifs-button{
  border:none;
  cursor:pointer;
  font:inherit;
}

body.modal-open{
  overflow:hidden;
}

.tarifs-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
  padding:20px;
  visibility:hidden;
  opacity:0;
  transition:opacity .22s ease, visibility .22s ease;
}

.tarifs-modal.is-open{
  visibility:visible;
  opacity:1;
}

.tarifs-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,18,34,.72);
  backdrop-filter:blur(8px);
}

.tarifs-modal-dialog{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(90vh,860px);
  overflow:auto;
  padding:clamp(26px,4vw,42px);
  background:linear-gradient(155deg,var(--card),var(--card2));
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  transform:translateY(18px) scale(.98);
  transition:transform .22s ease;
}

.tarifs-modal.is-open .tarifs-modal-dialog{
  transform:translateY(0) scale(1);
}

.tarifs-modal-close{
  position:absolute;
  top:14px;
  right:16px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--text);
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:50%;
  cursor:pointer;
  font-size:1.7rem;
  line-height:1;
}

.tarifs-modal-dialog h2{
  padding-right:45px;
  font-size:clamp(1.75rem,4vw,2.55rem);
}

.tarifs-selection-summary{
  display:grid;
  gap:2px;
  margin:22px 0 28px;
  padding:18px 20px;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.30);
  border-radius:16px;
}

.tarifs-selection-summary span,
.tarifs-selection-summary small{
  color:var(--text-soft);
}

.tarifs-selection-summary strong{
  color:var(--text);
  font-size:1.25rem;
}

.tarifs-options-picker{
  display:grid;
  gap:12px;
  padding:0;
  border:0;
}

.tarifs-options-picker legend{
  margin-bottom:14px;
  color:var(--text);
  font-size:1.05rem;
  font-weight:800;
}

.tarifs-check-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  background:var(--navy2);
  border:1px solid var(--border);
  border-radius:15px;
  cursor:pointer;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}

.tarifs-check-option:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.45);
}

.tarifs-check-option:has(input:checked){
  background:rgba(37,99,235,.10);
  border-color:var(--accent-cool);
}

.tarifs-check-option input{
  width:20px;
  height:20px;
  accent-color:var(--accent-cool);
}

.tarifs-check-option span{
  display:grid;
  gap:3px;
}

.tarifs-check-option span strong{
  color:var(--text);
}

.tarifs-check-option span small{
  color:var(--text-soft);
  line-height:1.4;
}

.tarifs-check-option b{
  color:var(--accent-light);
  white-space:nowrap;
}

.tarifs-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:26px;
}

.tarifs-modal-actions .btn{
  border:none;
  cursor:pointer;
  font:inherit;
}

.tarifs-modal-note{
  margin-top:16px;
  color:var(--text-soft);
  font-size:.88rem;
  text-align:center;
}

@media(max-width:600px){
  .tarifs-modal{
    padding:10px;
  }

  .tarifs-modal-dialog{
    max-height:94vh;
    padding:28px 18px 22px;
    border-radius:20px;
  }

  .tarifs-check-option{
    grid-template-columns:auto 1fr;
  }

  .tarifs-check-option b{
    grid-column:2;
  }

  .tarifs-modal-actions{
    flex-direction:column-reverse;
  }

  .tarifs-modal-actions .btn{
    width:100%;
    text-align:center;
  }
}


/* =========================================================
   PROMOTIONS — PAGE TARIFS
   ========================================================= */
.tarifs-price-promo{
  gap:7px;
}

.tarifs-price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;
}

.tarifs-price-row del{
  color:var(--text-soft);
  font-size:1.18rem;
  font-weight:700;
  text-decoration-thickness:2px;
  text-decoration-color:var(--accent-hover);
}

.tarifs-price-row strong{
  color:var(--accent-light);
}

.tarifs-price-row strong sup{
  margin-left:2px;
  font-size:.45em;
  vertical-align:super;
}

.tarifs-discount{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.03em;
}

.tarifs-promo-condition{
  color:var(--text-soft);
  font-size:.8rem;
  line-height:1.4;
}

.tarifs-option-promo{
  position:relative;
  overflow:hidden;
  padding-top:34px;
  border-left-color:var(--accent);
  background:
    linear-gradient(135deg,rgba(245,158,11,.10),transparent 55%),
    var(--card);
}

.tarifs-option-badge{
  position:absolute;
  top:0;
  right:0;
  padding:6px 14px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  border-bottom-left-radius:14px;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tarifs-option-price{
  display:grid;
  justify-items:end;
  gap:1px;
  flex:0 0 auto;
  text-align:right;
}

.tarifs-option-price del{
  color:var(--text-soft);
  font-size:.88rem;
  font-weight:700;
  text-decoration-thickness:2px;
}

.tarifs-option-price strong{
  color:var(--accent-light);
  font-size:1.15rem;
}

.tarifs-option-price span{
  color:var(--text-soft);
  font-size:.75rem;
  white-space:nowrap;
}

.tarifs-maintenance-condition{
  display:block;
  margin-top:5px;
  color:var(--accent-light);
  font-weight:700;
}

.tarifs-check-option-promo{
  position:relative;
  background:
    linear-gradient(135deg,rgba(245,158,11,.10),transparent 65%),
    var(--navy2);
  border-color:rgba(245,158,11,.35);
}

.tarifs-inline-badge{
  width:max-content;
  margin-bottom:3px;
  padding:3px 8px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  border-radius:999px;
  font-size:.67rem;
  font-style:normal;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tarifs-picker-price{
  display:grid;
  justify-items:end;
  gap:0;
  white-space:nowrap;
}

.tarifs-picker-price del{
  color:var(--text-soft);
  font-size:.76rem;
  font-weight:700;
}

.tarifs-picker-price b{
  color:var(--accent-light);
  font-size:1rem;
}

@media(max-width:600px){
  .tarifs-price-row{
    align-items:center;
  }

  .tarifs-option-promo{
    padding-top:44px;
  }

  .tarifs-option-price{
    justify-items:start;
    text-align:left;
  }

  .tarifs-option-price span{
    white-space:normal;
  }

  .tarifs-check-option-promo .tarifs-picker-price{
    grid-column:2;
    justify-items:start;
  }
}

/* Ajustements demandés — page Tarifs */
.tarifs-discount{
  color:#ffffff !important;
}

.tarifs-price-warning{
  margin-top:24px;
  padding:16px 18px;
  color:var(--text-light);
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.30);
  border-left:4px solid var(--accent);
  border-radius:14px;
  font-size:.92rem;
  line-height:1.55;
}

.tarifs-price-warning strong{
  color:var(--text);
}