/* =========================================================
   🌐 PARTIE 1 — RESET, TYPO, STRUCTURE, BOUTONS, LIENS
   ========================================================= */

/* ------------------------------
   RESET GLOBAL + TYPOGRAPHIE
--------------------------------*/
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Futura', sans-serif;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background: #fff;
  color: #000;
  line-height: 1.6;
}

/* ------------------------------
   BOUTONS GLOBAUX
--------------------------------*/
button,
input[type="submit"],
a.btn {
  font-family: 'Futura', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 25px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Effets globaux */
.hero-buttons a,
.btn-bleu,
.btn-rose {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-buttons a:hover,
.btn-bleu:hover,
.btn-rose:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ------------------------------
   COULEURS LIENS
--------------------------------*/
a {
  color: #056FB7;
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* ------------------------------
   FORMULAIRES GLOBAUX
--------------------------------*/
input,
textarea,
select {
  font-family: 'Futura', sans-serif;
  padding: 10px;
  width: 100%;
  border: 1px solid #056FB7;
  border-radius: 5px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #E1014D;
  outline: none;
}

/* ------------------------------
   PRIX & TARIFS WOOCOMMERCE
--------------------------------*/
.price,
.woocommerce-Price-amount {
  font-family: 'Futura', sans-serif;
  font-weight: bold;
  color: #E1014D;
  font-size: 1.2rem;
}

/* ------------------------------
   HEADER / MENU
--------------------------------*/
.main-navigation a {
  font-family: 'Futura', sans-serif;
  color: #056FB7;
  font-weight: bold;
}

.main-navigation a:hover {
  color: #E1014D;
}
/* ------------------------------
   FOOTER
--------------------------------*/
/* Liens du footer en blanc */
.site-footer a {
    color: #ffffff !important;
    text-decoration: none;
}

/* Hover en blanc aussi */
.site-footer a:hover {
    color: #ffffff !important;
    opacity: 0.75; /* petit effet élégant */
    text-decoration: underline;
}

/* Icônes réseaux sociaux en blanc */
.site-footer .social-icons a i {
    color: #ffffff !important;
}

/* Hover réseaux sociaux */
.site-footer .social-icons a:hover i {
    color: #ffffff !important;
    opacity: 0.7;
}
/* ================================
   CENTRER TOUTES LES COLONNES FOOTER
================================ */

/* Conteneur des colonnes */
.footer-container {
    text-align: center;           /* Centre le texte */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

/* Chaque colonne */
.footer-container > div {
    text-align: center;           /* Centre le contenu */
}

/* Titres */
.footer-container h3 {
    text-align: center;
}

/* Listes */
.footer-container ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

/* Liens */
.footer-container ul li a {
    color: #ffffff !important;    /* Blanc */
    text-decoration: none;
    display: inline-block;
    margin: 4px 0;
}

.footer-container ul li a:hover {
    opacity: 0.7;
}

/* Réseaux sociaux */
.footer-socials .social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-socials .social-icons a i {
    color: #ffffff !important;
    font-size: 22px;
}

/* Centrer la colonne réseaux sociaux */
.footer-socials {
    text-align: center;
}

/* Centrer les icônes */
.footer-socials .social-icons {
    display: flex;
    justify-content: center;
    gap: 20px; /* espace entre les icônes */
    margin-top: 10px;
}

/* Icônes en blanc */
.footer-socials .social-icons a i {
    color: #ffffff !important;
    font-size: 22px;
}

/* Hover */
.footer-socials .social-icons a:hover i {
    opacity: 0.7;
}



/* ------------------------------
   RESPONSIVE GLOBAL
--------------------------------*/
@media (max-width: 768px) {
  button,
  a.btn {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* =========================================================
   🌟 PARTIE 2 — HERO MONDIALEKTE
   ========================================================= */

/* ----------- HERO PRINCIPAL ----------- */
#hero-mondialekte {
  background: 
    linear-gradient(rgba(5,111,183,0.7), rgba(225,1,77,0.7)),
    url('https://www.mondialekte.com/wp-content/uploads/2025/11/Mondialekte-11.png')
    center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 330px 20px;
  position: relative;
  overflow: hidden;
}

/* Conteneur du texte */
#hero-mondialekte .hero-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  top: 80px; /* Décale le texte vers le bas */
}

/* TITRE */
#hero-mondialekte h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-family: 'Futura', sans-serif;
  background: linear-gradient(90deg, #E1014D, #056FB7, #E1014D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200%;
  animation: heroShine 4s linear infinite;
}

/* Animation titre */
@keyframes heroShine {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

/* TEXTE DESCRIPTION */
#hero-mondialekte p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* BOUTONS HERO */
.hero-buttons a {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 50px;
  margin: 5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

/* Bouton bleu */
.hero-buttons .btn-bleu {
  background-color: #056FB7;
}

/* Bouton rose */
.hero-buttons .btn-rose {
  background-color: #E1014D;
}

/* Effets hover globaux déjà dans PARTIE 1 */

/* ----------- RESPONSIVE ----------- */
@media (max-width: 768px) {
  #hero-mondialekte {
    padding: 110px 15px;
  }

  #hero-mondialekte .hero-inner {
    top: 40px; /* moins de décalage mobile */
  }

  #hero-mondialekte h1 {
    font-size: 2.2rem;
  }

  #hero-mondialekte p {
    font-size: 1rem;
  }

  .hero-buttons a {
    display: block;
    margin: 8px auto;
    width: 80%;
    max-width: 280px;
  }
}

/* ----------- VERSION ALTERNATIVE — HERO IMAGE FULL SCREEN ----------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('https://www.mondialekte.com/wp-content/uploads/2025/11/Mondialekte-11.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Version mobile */
@media (max-width: 768px) {
  .hero {
    height: 70vh;
    background-size: contain;
    background-position: top center;
    background-color: #fff;
  }
}

/* =========================================================
   🌟 PARTIE 3 — SECTION NOTRE VISION
   ========================================================= */

#vision-mondialekte {
  background: #fff;
  padding: 100px 5%;
  font-family: 'Futura', sans-serif;
}

/* Conteneur principal */
#vision-mondialekte .vision-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Texte */
#vision-mondialekte .vision-text {
  flex: 1 1 480px;
}

#vision-mondialekte h2 {
  color: #056FB7;
  font-size: 2.2rem;
  margin-bottom: 20px;
}

#vision-mondialekte p {
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 12px;
  line-height: 1.7;
}

/* Bouton */
#vision-mondialekte .btn-bleu {
  display: inline-block;
  padding: 12px 28px;
  background: #056FB7;
  color: #fff;
  border-radius: 40px;
  font-weight: 600;
  transition: 0.3s;
  margin-top: 20px;
}

#vision-mondialekte .btn-bleu:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(5,111,183,0.3);
}

/* Image */
#vision-mondialekte .vision-image {
  flex: 1 1 500px;
  text-align: center;
}

#vision-mondialekte .vision-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Correction espaces fantômes sous l’image */
#vision-mondialekte .vision-image img {
  vertical-align: middle;
}

/* Animation d’apparition */
#vision-mondialekte.hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

#vision-mondialekte.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
/* === MOBILE FIX — ORDRE : TITRE, TEXTE, IMAGE === */
/* === MOBILE FIX — RÉDUCTION ESPACE SECTION NOTRE VISION === */
@media (max-width: 900px) {

  #vision-mondialekte {
    padding: 40px 5% !important; /* réduit la hauteur générale */
    margin-bottom: 20px !important; /* évite la grande marge */
    margin-top: 20px !important;
  }

  #vision-mondialekte .vision-content {
    gap: 15px !important; /* réduit l'espacement interne */
  }

  #vision-mondialekte h2 {
    font-size: 1.6rem !important; /* taille titre plus compacte */
    margin-bottom: 5px !important;
  }

  #vision-mondialekte .vision-text p {
    margin-bottom: 8px !important; /* resserre les paragraphes */
  }

  #vision-mondialekte .vision-image {
    margin-top: 5px !important; /* supprime le vide au-dessus */
  }

  #vision-mondialekte .vision-image img {
    border-radius: 10px !important;
  }
}



/* =========================================================
   🌟 PARTIE 4 — VALEURS MONDIALEKTE
   ========================================================= */

/* Conteneur général */
.valeurs-section {
  text-align: center;
  padding: 100px 20px;
  background: #f7f7f7;
  font-family: 'Futura', sans-serif;
}

/* Titre */
.valeurs-section h2 {
  color: #056FB7;
  font-size: 2.2rem;
  margin-bottom: 50px;
}

/* Grille responsive */
.valeurs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Carte */
.valeur-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  padding: 30px;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.6s ease, box-shadow 0.6s ease, opacity 0.6s ease;
}

/* Icône */
.valeur-card img {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
}

/* Titre de carte */
.valeur-card h3 {
  color: #E1014D;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* Texte */
.valeur-card p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

/* Hover */
.valeur-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Quand la carte devient visible (JS) */
.valeur-card.visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================================
   🔵 PARTIE 5 — COLLECTIONS MONDIALEKTE
   ========================================================= */

#collections-mondialekte {
  background: #f9f9f9;
  padding: 100px 5%;
  text-align: center;
  font-family: 'Futura', sans-serif;
}

/* Titre */
#collections-mondialekte h2 {
  color: #056FB7;
  font-size: 2.5rem;
  margin-bottom: 15px;
}

/* Sous-texte */
#collections-mondialekte p {
  color: #555;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 60px;
  line-height: 1.6;
}

/* Grille (4 colonnes desktop) */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  max-width: 1300px;
  margin: 0 auto;
}

/* Carte Collection */
.collection-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover */
.collection-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Images */
.collection-item img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.collection-item:hover img {
  transform: scale(1.05);
}

/* Titre carte */
.collection-item h3 {
  margin: 20px 0 10px;
  font-size: 1.4rem;
  color: #056FB7;
}

/* Texte carte */
.collection-item p {
  color: #444;
  font-size: 1rem;
  padding: 0 20px 15px;
  line-height: 1.5;
}

/* Bouton */
.btn-collection {
  display: inline-block;
  margin-bottom: 25px;
  background: #E1014D;
  color: #fff;
  padding: 10px 24px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-collection:hover {
  background: #056FB7;
  transform: scale(1.05);
}

/* ========= RESPONSIVE ========= */

/* Tablette : 2 par ligne */
@media (max-width: 1200px) {
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile : 1 par ligne + recadrage images */
@media (max-width: 700px) {
  .collections-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .collection-item img {
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 10px;
  }
}
/* =========================================================
   🔵 PARTIE 6 — PRODUITS PHARES
   ========================================================= */

#produits-phares {
  background: #fff;
  padding: 100px 5%;
  text-align: center;
  font-family: 'Futura', sans-serif;
}

/* Titre */
#produits-phares h2 {
  color: #056FB7;
  font-size: 2.5rem;
  margin-bottom: 15px;
}

/* Sous-texte */
#produits-phares p {
  color: #555;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 60px;
  line-height: 1.6;
}

/* Grille — 4 colonnes fixes */
.produits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Carte produit */
.produit-item {
  background: #f9f9f9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover */
.produit-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Image produit */
.produit-item img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}

.produit-item:hover img {
  transform: scale(1.05);
}

/* Titre produit */
.produit-item h3 {
  margin: 20px 0 10px;
  font-size: 1.3rem;
  color: #056FB7;
  font-family: 'Futura', sans-serif;
}

/* Prix */
.produit-item .prix {
  color: #E1014D; /* Rouge Mondialekte */
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
}

/* Bouton produit */
.btn-produit {
  display: inline-block;
  margin-bottom: 25px;
  background: #E1014D; /* Rouge Mondialekte */
  color: #fff;
  padding: 10px 24px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover bouton */
.btn-produit:hover {
  background: #fff;
  color: #056FB7;
  border: 2px solid #056FB7;
  transform: scale(1.05);
}

/* ========= RESPONSIVE ========= */

/* Tablette : 2 cartes par ligne */
@media (max-width: 1200px) {
  .produits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile : 1 carte par ligne */
@media (max-width: 700px) {
  .produits-grid {
    grid-template-columns: 1fr;
  }

  .produit-item img {
    height: 260px;
  }
}
/* =========================================================
   🟣 PARTIE 7 — COMMENT ÇA MARCHE
   ========================================================= */

#how-it-works {
  background: #f9f9f9;
  padding: 100px 5%;
  text-align: center;
  font-family: 'Futura', sans-serif;
}

/* Titre */
#how-it-works h2 {
  color: #056FB7;
  font-size: 2.5rem;
  margin-bottom: 60px;
  position: relative;
}

#how-it-works h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background-color: #E1014D;
  margin: 20px auto 0;
  border-radius: 2px;
}

/* Grille des étapes */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
}

/* Carte d'étape */
.step {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  padding: 40px 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover de la carte */
.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Icône ronde */
.icon {
  width: 80px;
  height: 80px;
  background: #056FB7;
  color: #fff;
  font-size: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.step:hover .icon {
  background: #E1014D;
  transform: scale(1.1);
}

/* Titre étape */
.step h3 {
  color: #056FB7;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

/* Texte étape */
.step p {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 250px;
  margin: 0 auto;
}

/* ========= RESPONSIVE ========= */

/* Tablette : 2 étapes par ligne */
@media (max-width: 1100px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* Mobile : 1 étape par ligne */
@media (max-width: 700px) {
  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    padding: 30px 20px;
  }

  #how-it-works h2 {
    font-size: 2rem;
  }
}
/* ========= RESPONSIVE ========= */

/* Tablette : 2 étapes par ligne */
@media (max-width: 1100px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* Mobile : 1 étape par ligne */
@media (max-width: 700px) {
  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    padding: 30px 20px;
  }

  #how-it-works h2 {
    font-size: 2rem;
  }
}
/* =========================================================
   🟡 PARTIE 8 — FAQ (Questions Fréquentes)
   ========================================================= */

.faq-section {
  padding: 100px 5%;
  background: #fff;
  font-family: 'Futura', sans-serif;
  max-width: 900px;
  margin: 0 auto;
}

/* Titre */
.faq-section h2 {
  text-align: center;
  color: #056FB7;
  font-size: 2.4rem;
  margin-bottom: 40px;
}

/* Bloc question */
.faq-item {
  background: #f9f9f9;
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #eee;
}

/* Bouton / Question */
.faq-question {
  width: 100%;
  padding: 18px 22px;
  text-align: left;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  color: #056FB7;
  transition: background 0.3s ease;
  position: relative;
}

/* Icône + */
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #E1014D;
  transition: transform 0.3s ease;
}

/* Icône animée quand open */
.faq-item.active .faq-question::after {
  content: "–";
  transform: translateY(-50%) rotate(180deg);
}

/* Hover */
.faq-question:hover {
  background: #f0f6fa;
}

/* Réponse */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  padding: 0 22px;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}

/* Texte */
.faq-answer p {
  font-size: 1rem;
  color: #444;
  padding: 15px 0 20px;
  line-height: 1.6;
}

/* Ouvert */
.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 15px 22px 20px;
}

/* =========================================================
   🟢 PARTIE 9 — ILS NOUS FONT CONFIANCE
   ========================================================= */
/* ============================================================
   SECTION : ILS NOUS FONT CONFIANCE — MONDIALEKTE
   Dégradé bleu → rose, animation défilante infinie, logos stylés
   ============================================================ */

/* ----- Conteneur principal de la section ----- */
.confiance-section {
  text-align: center;
  padding: 60px 20px;

  /* Dégradé Mondialekte : #056FB7 → #E1014D */
  background: linear-gradient(90deg, #056FB7 0%, #E1014D 100%);

  /* Texte en blanc pour un bon contraste */
  color: #fff;
}

/* ----- Titre de la section ----- */
.confiance-section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 700;
  color: #fff; /* sécurité */
}

/* ----- Sous-titre ----- */
.confiance-section p {
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: #f7f7f7;
}
/* ============================================
   SECTION : Ils nous font confiance
   Fond bleu Mondialekte + cartes rectangulaires
   ============================================ */

.confiance-section {
  text-align: center;
  padding: 60px 20px;
  background: #056FB7; /* Bleu Mondialekte */
  color: #fff;
}

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

.confiance-section p {
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: #e8e8e8;
}

/* ============================================
   MARQUEE ULTRA FLUIDE
   ============================================ */

.marquee {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
}

.marquee-inner {
  display: flex;
  width: max-content;
  animation: marquee-scroll 25s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Animation fluide */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   CARTES STYLE MONDIALEKTE (comme la section Pourquoi choisir)
   ============================================ */

.logo-card {
  width: 160px;       /* même taille pour toutes les cartes */
  height: 120px;
  background: #ffffff;
  border-radius: 12px; /* même style que tes cartes officielles */
  padding: 20px;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  flex-shrink: 0;

  transition: 0.25s ease;
}

.logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.logo-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  filter: grayscale(1);
  opacity: 0.85;
  transition: 0.25s ease;
}

.logo-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Mobile */
@media (max-width: 600px) {
  .logo-card {
    width: 130px;
    height: 95px;
    padding: 15px;
  }
}



/* ================================
   SECTION — NOS SERVICES (FIXE)
   ================================ */

.services-section {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
  font-family: 'Futura', sans-serif;
}

.services-section h2 {
  font-size: 2.2rem;
  color: #056FB7;
  margin-bottom: 10px;
}

.services-section p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 40px;
}

/* === Grille : 4 services sur 1 ligne === */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px !important;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

/* === Cartes === */
.service-card {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-align: center;
  transition: 0.3s ease;
}

.service-card img {
  width: 100%;
  height: 200px;
  object-fit: contain; /* 💯 Plus rien n’est coupé */
  background: #f1f1f1; /* Fond propre derrière l’image */
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 10px; /* Optionnel pour respirer */
}
.service-card h3 {
  color: #056FB7;
  font-size: 1.2rem;
  margin-top: 10px;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 1rem;
  color: #555;
}

/* Hover */
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* === Responsive tablette — 2 par ligne === */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === Responsive mobile — 1 par ligne === */
@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ================================
   SECTION — Pourquoi choisir Mondialekte
=================================== */
.why-choose-section {
  padding: 80px 20px;
  background: #fff;
  text-align: center;
  font-family: 'Futura', sans-serif;
}

.why-choose-section h2 {
  font-size: 2.4rem;
  color: #056FB7;
  margin-bottom: 40px;
  position: relative;
}

.why-choose-section h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #056FB7, #E1014D);
  margin: 18px auto 0;
  border-radius: 2px;
}

/* Wrapper des cartes */
.values-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cartes */
.value-card {
  background: #f9f9f9;
  border-radius: 15px;
  padding: 25px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* Images uniformisées */
.value-card img {
  width: 100%;
  max-width: 180px;
  height: auto;
  margin-bottom: 15px;
  object-fit: contain;
}


/* Titres et texte */
.value-card h3 {
  color: #E1014D;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.value-card p {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
}

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

/* Tablette */
@media (max-width: 900px) {
  .values-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .values-wrapper {
    grid-template-columns: 1fr;
  }
  .value-card {
    padding: 20px;
  }
}
/* SECTION AVIS GOOGLE */
#google-reviews {
    text-align: center;
    padding: 60px 20px;
}

#google-reviews h2 {
    text-align: center !important;
    font-size: 2rem;
    color: #056FB7;
    margin-bottom: 30px;
}

/* Conteneur du plugin */
#google-reviews .reviews-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* Trustindex – titre interne si utilisé */
.ti-widget-title,
.ti-widget-container h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* === SECTION TRANSITION MONDIALEKTE === */
.transition-block {
    background-color: #f6f6f6;
    text-align: center;
    padding: 70px 20px;
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1100px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Contenu centré et animation douce */
.transition-content {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpTransition 1.3s ease forwards;
}

@keyframes fadeUpTransition {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TITRE */
.transition-content h2 {
    color: #056FB7;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* TEXTE */
.transition-content p {
    color: #333;
    font-size: 1.15rem;
    line-height: 1.7;
    margin: 0 auto 30px;
    max-width: 750px;
}

/* BOUTONS */
.transition-buttons {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.transition-buttons .btn {
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Bouton principal */
.transition-buttons .btn.primary {
    background-color: #056FB7;
    color: #fff;
}

.transition-buttons .btn.primary:hover {
    background-color: #E1014D;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.18);
}

/* Bouton secondaire */
.transition-buttons .btn.secondary {
    background-color: #fff;
    color: #056FB7;
    border: 2px solid #056FB7;
}

.transition-buttons .btn.secondary:hover {
    background-color: #056FB7;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.18);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .transition-content h2 {
        font-size: 1.7rem;
    }
    .transition-content p {
        font-size: 1rem;
    }
    .transition-buttons .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}
/* ==========================================
   FORMULAIRE NEWSLETTER MONDIALEKTE (STYLÉ)
   ========================================== */

#newsletter-mk {
  background: linear-gradient(135deg, rgba(5,111,183,0.1), rgba(225,1,77,0.1));
  padding: 80px 20px;
  text-align: center;
  border-radius: 20px;
  margin: 80px auto;
}

.newsletter-wrapper {
  max-width: 600px;
  margin: auto;
}

.newsletter-mk h2 {
  color: #056FB7;
  font-size: 2rem;
  margin-bottom: 10px;
}

.newsletter-mk p {
  color: #444;
  margin-bottom: 25px;
}

.newsletter-mk-form input {
  width: 100%;
  padding: 15px;
  font-size: 1rem;
  border-radius: 12px;
  border: 2px solid #ccc;
  margin-bottom: 15px;
  transition: 0.3s;
}

.newsletter-mk-form input:focus {
  border-color: #056FB7;
  box-shadow: 0 0 8px rgba(5,111,183,0.3);
}

.newsletter-mk-form button {
  width: 100%;
  padding: 15px;
  background: #E1014D;
  color: white;
  font-size: 1.1rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: bold;
}

.newsletter-mk-form button:hover {
  background: #056FB7;
  transform: translateY(-3px);
}

.newsletter-note {
  display: block;
  margin-top: 15px;
  font-size: 0.9rem;
  color: #666;
}

/* ================================
   SECTION ACTUALITÉS MONDIALEKTE
================================ */
.actualites-section {
    padding: 80px 20px;
    background: #f9f9f9;
    text-align: center;
    font-family: 'Futura', sans-serif;
}

.actualites-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #056FB7;
    margin-bottom: 45px;
    position: relative;
}

/* Petit trait décoratif */
.actualites-section h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #056FB7, #E1014D);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Container */
.actualites-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}

/* Carte d'actualité */
.actualite-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    width: 300px;
    padding: 15px;
    transition: 0.3s ease;
    text-align: left;
    position: relative;
}

/* Hover premium */
.actualite-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Image */
.actualite-image img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 12px;
}

/* Titre */
.actualite-card h3 {
    font-size: 1.15rem;
    color: #056FB7;
    margin: 12px 0 8px;
    font-weight: 600;
}

/* Extrait */
.actualite-card p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Lien */
.actualite-lien {
    display: inline-block;
    color: #E1014D;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.actualite-lien:hover {
    color: #056FB7;
    transform: translateX(5px);
}

/* Aucun article */
.no-articles {
    color: #777;
    font-style: italic;
    font-size: 1rem;
}

/* Animation d’apparition */
.actualite-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeActu 0.8s ease forwards;
}

.actualite-card:nth-child(2) { animation-delay: 0.2s; }
.actualite-card:nth-child(3) { animation-delay: 0.4s; }

@keyframes fadeActu {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .actualite-card {
        width: 90%;
    }
    .actualites-section h2 {
        font-size: 1.8rem;
    }
}
/* ==================================
   SECTION CTA MONDIALEKTE
================================== */
.cta-section {
    background: linear-gradient(135deg, #056FB7, #E1014D);
    padding: 90px 20px;
    text-align: center;
    color: #fff;
    font-family: 'Futura', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Texte */
.cta-section h2 {
    font-size: 2.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.cta-section p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Boutons container */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

/* Boutons style Mondialekte */
.cta-buttons .btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}

/* Bouton principal */
.cta-buttons .btn.primary {
    background: #fff;
    color: #056FB7;
}

.cta-buttons .btn.primary:hover {
    background: #E1014D;
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Bouton secondaire */
.cta-buttons .btn.secondary {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 2px solid #fff;
}

.cta-buttons .btn.secondary:hover {
    background: #fff;
    color: #056FB7;
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Animation de montée douce */
.cta-section h2,
.cta-section p,
.cta-buttons .btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpCTA 0.9s forwards ease-out;
}

.cta-section h2 { animation-delay: 0.2s; }
.cta-section p { animation-delay: 0.4s; }
.cta-buttons .btn:nth-child(1) { animation-delay: 0.6s; }
.cta-buttons .btn:nth-child(2) { animation-delay: 0.8s; }

@keyframes fadeUpCTA {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */
@media(max-width: 768px) {
    .cta-section h2 {
        font-size: 1.9rem;
    }
    .cta-section p {
        font-size: 1.05rem;
    }
    .cta-buttons .btn {
        width: 85%;
        max-width: 280px;
        font-size: 1rem;
    }
}
/* FOOTER — Desktop : 5 colonnes */
.site-footer .footer-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: start;
  text-align: left;
}

/* TABLETTE — 2 colonnes centrées */
@media (max-width: 900px) {
  .site-footer .footer-container {
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }

  .site-footer .footer-logo {
    text-align: center;
  }

  .site-footer .social-icons {
    justify-content: center;
  }
}

/* MOBILE — 1 colonne parfaitement centrée */
@media (max-width: 520px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer .footer-logo,
  .site-footer .footer-links,
  .site-footer .footer-services,
  .site-footer .footer-regulations,
  .site-footer .footer-socials {
    margin-left: auto;
    margin-right: auto;
  }

  .site-footer .social-icons {
    justify-content: center;
  }
}
 /* ================================
   BOUTON BACK TO TOP — MAIN ANIMÉE
================================ */
/* Bouton retour simple */
#backToTop {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 58px;
  height: 58px;
  background: #056FB7;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 32px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  z-index: 999999;
  transition: 0.3s ease;
}

/* Hover */
#backToTop:hover {
  background: #E1014D;
  transform: translateY(-5px);
}


/* Page-Banniére
 * ================================
   Bannière Personnalisation
================================ */
/* ==========================================
   HERO PERSONNALISATION — VERSION ULTIME
   Mondialekte Signature Hero
========================================== */

/* FULL WIDTH */
.perso-hero-section {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    height: 75vh;
    min-height: 420px;
    overflow: hidden;
    margin-top: 0 !important;
    padding: 0 !important;
}
.mkd-fullwrap {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
}

/* IMAGE ZOOM + PARALLAX */
.perso-hero-section img.perso-hero-img {
    width: 100%;
    height: 110%; /* dépasse un peu pour effet parallax */
    object-fit: cover;
    object-position: center;
    display: block;

    transform: scale(1.05); /* zoom doux */
    animation: heroZoom 18s ease-in-out infinite alternate;
}

/* Dégradé animé Mondialekte */
.perso-hero-section::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    background: linear-gradient(
        135deg,
        rgba(5,111,183,0.55),
        rgba(225,1,77,0.55)
    );

    animation: gradientShift 12s ease-in-out infinite alternate;
    pointer-events: none;
}

/* TEXTE */
.perso-hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 750px;

    opacity: 0;
    animation: fadeUpHero 1.1s forwards ease-out;
}
.perso-hero-content h1 {
    color: #ffffff !important;
    text-shadow:
        0 0 5px rgba(255,255,255,0.9),
        0 0 12px rgba(225,1,77,0.7),
        0 0 25px rgba(5,111,183,0.8);
    font-weight: 800;
}


/* Anim Fade-up */
@keyframes fadeUpHero {
    0% { opacity: 0; transform: translate(-50%, -40%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* Anim Zoom Background */
@keyframes heroZoom {
    0% { transform: scale(1.05); }
    100% { transform: scale(1.1); }
}

/* Anim Dégradé */
@keyframes gradientShift {
    0% { opacity: 0.55; filter: hue-rotate(0deg); }
    100% { opacity: 0.75; filter: hue-rotate(25deg); }
}

/* TITRE */
.perso-hero-content h1 {
    font-size: 2.9rem;
    font-weight: 700;
    margin-bottom: 18px;
    text-shadow: 0 4px 12px rgba(0,0,0,0.55);
}

/* TEXTE */
.perso-hero-content p {
    font-size: 1.25rem;
    margin-bottom: 30px;
    line-height: 1.55;
    text-shadow: 0 3px 10px rgba(0,0,0,0.55);
}

/* BOUTON */
.btn-perso {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 40px;
    background: #E1014D;
    color: #fff;
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 700;

    transition: 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

/* Halo lumineux */
.btn-perso::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.5);
    transform: skewX(-30deg);
    transition: 0.4s;
}

.btn-perso:hover::after {
    left: 200%;
}

.btn-perso:hover {
    background: #056FB7;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .perso-hero-section {
        height: 55vh;
        min-height: 330px;
    }

    .perso-hero-content h1 {
        font-size: 2rem;
    }

    .perso-hero-content p {
        font-size: 1rem;
    }

    .btn-perso {
        padding: 14px 30px;
        font-size: 1rem;
    }
}
.perso-hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 750px;
    padding: 25px 20px;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.2)
    );
    border-radius: 14px;
    backdrop-filter: blur(2px);
}


/* Masquer tous les titres de page (sauf les produits) */
.page-title,
.entry-title,
h1.page-title,
header.page-header,
.archive-header,
.entry-header h1 {
    display: none !important;
}
/* ===============================
   SECTION PRÉSENTATION PREMIUM
================================ */

.presentation-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 70px 25px;
    max-width: 1300px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    font-family: 'Futura', sans-serif;
}

/* --------- Colonne image ---------- */
.presentation-section .img-col {
    flex: 1;
    display: flex;
    justify-content: center;
}

.presentation-section .img-col img {
    width: 100%;
    max-width: 520px;
    height: auto; /* Ne coupe jamais l’image */
    object-fit: contain; 
    border-radius: 18px;
    background: #f3f3f3; /* léger fond pour éviter les bords blancs */
    padding: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* --------- Colonne texte ---------- */
.presentation-section .text-col {
    flex: 1;
}

.presentation-section h2 {
    font-size: 2.3rem;
    color: #056FB7;
    margin-bottom: 20px;
    font-weight: 700;
}

.presentation-section p {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.6;
}

.presentation-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.presentation-section ul li {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

/* Puces Mondialekte */
.presentation-section ul li::before {
    content: "";
    width: 12px;
    height: 12px;
    background: #E1014D;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 7px;
}

/* ===============================
         RESPONSIVE
=============================== */
@media (max-width: 950px) {
    .presentation-section {
        flex-direction: column;
        text-align: center;
        padding: 50px 20px;
    }

    .presentation-section .img-col img {
        max-width: 420px;
    }

    .presentation-section ul li {
        padding-left: 0;
    }

    .presentation-section ul li::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .presentation-section h2 {
        font-size: 1.9rem;
    }

    .presentation-section p {
        font-size: 1.05rem;
    }
}
/* =======================================================
   SECTION — NOS VÊTEMENTS PERSONNALISABLES (PREMIUM)
======================================================= */

.custom-products {
    padding: 70px 20px;
    text-align: center;
    font-family: 'Futura', sans-serif;
    background: #f8f9fb;
}

.custom-products h2 {
    font-size: 2.4rem;
    color: #056FB7;
    margin-bottom: 10px;
}

.custom-products .section-subtitle {
    color: #555;
    font-size: 1.15rem;
    margin-bottom: 45px;
}

/* === Grille (4 colonnes desktop) === */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    max-width: 1300px;
    margin: 0 auto;
}

/* === Carte produit === */
.product-item {
    background: #fff;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    transition: 0.3s ease;
}
.product-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.product-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.product-item img {
    max-height: 300px;   /* ajuste la hauteur des images */
}



/* Titres */
.product-item h3 {
    color: #056FB7;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.product-item p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 18px;
}

/* Bouton */
.btn-custom {
    display: inline-block;
    background: #E1014D;
    color: white;
    padding: 12px 26px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.25s;
}

.btn-custom:hover {
    background: #056FB7;
    transform: translateY(-4px);
}

/* Effet hover sur la carte */
.product-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* ================================
   RESPONSIVE TABLETTE (2 colonnes)
================================ */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Conteneur */
#demande-devis {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

/* Titre */
#demande-devis h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* Labels */
#demande-devis label {
  display: block;
  margin: 12px 0 4px;
  font-weight: bold;
}

/* Inputs + select + textarea */
#demande-devis input,
#demande-devis select,
#demande-devis textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
}

/* Focus */
#demande-devis input:focus,
#demande-devis select:focus,
#demande-devis textarea:focus {
  border-color: #007bff;
  outline: none;
}

/* Bouton */
#demande-devis button {
  margin-top: 20px;
  padding: 12px;
  width: 100%;
  background: #E1014D;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#demande-devis button:hover {
  background: #056FB7;
}
#demande-devis select {
  padding: 12px !important;        /* espace intérieur correct */
  height: auto !important;         /* laisse le navigateur gérer proprement */
  line-height: 1.4 !important;     /* évite que le texte soit coupé */
  color: #000 !important;
  background-color: #fff !important;
}


/* ================================
   RESPONSIVE MOBILE (1 colonne)
================================ */
@media (max-width: 650px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-item img {
        height: 220px;
    }

    .custom-products h2 {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

.how-it-works .step {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
}
/* SECTION MERCI NEWSLETTER */
.merci-newsletter {
    text-align: center;
    padding: 120px 20px;
    font-family: 'Futura', sans-serif;
    background: #f9f9f9;
}

.merci-container {
    max-width: 650px;
    margin: auto;
    background: #ffffff;
    padding: 50px 30px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Icône ✔ */
.merci-icon {
    width: 120px;
    height: auto;
    margin-bottom: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Titre */
.merci-newsletter h1 {
    font-size: 2.4rem;
    color: #056FB7;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Texte */
.merci-text {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Bouton retour */
.btn-retour-accueil {
    display: inline-block;
    padding: 14px 32px;
    background: #E1014D;
    color: #fff;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    font-size: 1.1rem;
}

.btn-retour-accueil:hover {
    background: #056FB7;
    transform: translateY(-3px);
}

/* RESPONSIVE MOBILE */
@media (max-width: 600px) {
    .merci-newsletter h1 {
        font-size: 1.9rem;
    }

    .merci-text {
        font-size: 1rem;
    }

    .merci-icon {
        width: 90px;
    }
}

/* ============================
   PAGE LOGIN SECRÈTE MONDIALEKTE
   ============================ */

.mk-login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Futura', system-ui, sans-serif;
  color: #ffffff;
  overflow: hidden;
}

/* Vidéo de fond */
.mk-login-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Overlay dégradé Mondialekte */
.mk-login-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(
      135deg,
      rgba(5, 111, 183, 0.75),
      rgba(225, 1, 77, 0.85)
  );
  z-index: -1;
}

/* Conteneur central */
.mk-login-inner {
  max-width: 1100px;
  width: 100%;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* Colonne marque */
.mk-login-brand {
  color: #ffffff;
}

.mk-login-logo {
  font-size: 2.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.mk-login-tagline {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.mk-login-sub {
  font-size: 1rem;
  opacity: 0.9;
}

/* Carte de login */
.mk-login-card {
  background: rgba(3, 8, 20, 0.92);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

.mk-login-card h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Formulaire WordPress natif */
.mk-login-card form {
  margin: 0;
}

.mk-login-card label {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.mk-login-card input[type="text"],
.mk-login-card input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(8, 16, 30, 0.9);
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.mk-login-card input[type="text"]:focus,
.mk-login-card input[type="password"]:focus {
  outline: none;
  border-color: #E1014D;
  box-shadow: 0 0 0 1px rgba(225, 1, 77, 0.6);
}

/* Bouton se connecter */
.mk-login-card input[type="submit"] {
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: #E1014D;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-top: 8px;
  transition: 0.25s ease;
}

.mk-login-card input[type="submit"]:hover {
  background: #ffffff;
  color: #056FB7;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* Case à cocher "se souvenir de moi" */
.mk-login-card .forgetmenot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px;
  font-size: 0.85rem;
}

/* Lien aide */
.mk-login-help {
  margin-top: 14px;
  font-size: 0.9rem;
}

.mk-login-help a {
  color: #ffe7f1;
  text-decoration: underline;
}

.mk-login-help a:hover {
  color: #ffffff;
}

/* Lien retour */
.mk-login-back {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9rem;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.85;
}

.mk-login-back:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
  .mk-login-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mk-login-card {
    margin: 0 auto;
    max-width: 420px;
  }

  .mk-login-logo {
    font-size: 2.1rem;
  }
}

@media (max-width: 600px) {
  .mk-login-inner {
    padding: 30px 16px;
  }

  .mk-login-card {
    padding: 22px 18px;
  }

  .mk-login-logo {
    font-size: 1.8rem;
  }
}

/* ============================================================
   SECTION D’INTRO – PAGE "RÉALISATIONS"
   Design premium Mondialekte + lisibilité + structure claire
   ============================================================ */

.realisations-intro {
  padding: 80px 20px; 
  /* Grand padding pour donner un vrai espace respirant */

  background: #f8f8f8;
  /* Fond gris très léger pour séparer la section du reste */

  border-bottom: 1px solid #e5e5e5;
  /* Ligne propre pour structurer visuellement la page */
}

/* Conteneur interne centré */
.realisations-intro-inner {
  max-width: 900px; 
  /* Largeur idéale pour éviter un texte trop long */

  margin: 0 auto;   
  /* Permet de centrer le bloc */

  text-align: center; 
  /* Texte centré = style premium et moderne */
}

/* ------------------------------------------------------------
   TITRE PRINCIPAL
   ------------------------------------------------------------ */
.realisations-intro h2 {
  font-size: 36px; 
  /* Taille grande pour un vrai impact visuel */

  font-weight: 700;
  /* Titre bien marqué */

  color: #056FB7; 
  /* Bleu Mondialekte */

  margin-bottom: 20px;
  /* Espacement pour l’aération */
}

/* ------------------------------------------------------------
   PARAGRAPHES
   ------------------------------------------------------------ */
.realisations-intro p {
  font-size: 18px;
  line-height: 1.6;
  /* Lecture fluide et confortable */

  color: #444; 
  /* Gris foncé = lisible et élégant */

  margin-bottom: 18px;
}

/* NOTE / SOUS-TEXTE */
.realisations-intro-note {
  font-size: 16px;
  color: #666;
  font-style: italic;
  /* Style légèrement différent pour distinguer la note */

  margin-bottom: 30px;
}

/* ------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------ */
.realisations-intro-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  /* Espace entre les deux boutons */

  margin-top: 20px;
}

/* Bouton rose premium Mondialekte */
.btn-rose {
  background: #E1014D; 
  color: white;
  padding: 12px 26px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-rose:hover {
  background: #c10042;
  transform: translateY(-3px);
}

/* Bouton bleu premium Mondialekte */
.btn-bleu {
  background: #056FB7;
  color: white;
  padding: 12px 26px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-bleu:hover {
  background: #045a93;
  transform: translateY(-3px);
}

/* ------------------------------------------------------------
   RESPONSIVE (mobile)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .realisations-intro {
    padding: 60px 15px;
  }

  .realisations-intro h2 {
    font-size: 28px;
  }

  .realisations-intro p {
    font-size: 16px;
  }

  .realisations-intro-buttons {
    flex-direction: column;
  }

  .realisations-intro-buttons a {
    width: 100%;
  }
}
/* ============================================================
   SECTION GALERIE RÉALISATIONS – MONDIALEKTE
   Design premium, structuré, responsive
   ============================================================ */

.galerie-realisations-section {
  padding: 80px 20px;
  background: #ffffff;
}

/* Titre principal */
.galerie-realisations-section h2 {
  font-size: 34px;
  font-weight: 700;
  color: #056FB7; /* Bleu Mondialekte */
  text-align: center;
  margin-bottom: 15px;
}

/* Sous-texte */
.galerie-subtitle {
  text-align: center;
  font-size: 18px;
  color: #555;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* ============================================================
   CATÉGORIES (boutons filtrants)
   ============================================================ */

.realisations-categories {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Boutons */
.cat-btn {
  padding: 10px 20px;
  border-radius: 40px;
  border: none;
  font-size: 16px;
  background: #eee;
  cursor: pointer;
  transition: 0.25s ease;
  color: #333;
  font-weight: 600;
}

/* Au survol */
.cat-btn:hover {
  background: #ddd;
}

/* Bouton actif */
.cat-btn.active {
  background: #056FB7;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ============================================================
   GRILLE RESPONSIVE
   ============================================================ */

.realisations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Grid flexible : s’adapte tout seul */

  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   CARTES INDIVIDUELLES
   ============================================================ */

.real-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  cursor: pointer;
  text-align: center;
  padding-bottom: 15px;
}

/* Effet hover premium Mondialekte */
.real-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Images */
.real-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  /* Adapte automatiquement l’image sans la déformer */
}

/* Titre de la réalisation */
.real-item h3 {
  font-size: 16px;
  color: #333;
  margin-top: 12px;
  padding: 0 10px;
  line-height: 1.4;
}

/* ============================================================
   SECTION EXPERTISE
   ============================================================ */

.realisations-expertise {
  padding: 80px 20px;
  background: #f8f8f8;
  border-top: 1px solid #e5e5e5;
}

/* Titre */
.realisations-expertise h2 {
  text-align: center;
  color: #056FB7;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Paragraphes */
.realisations-expertise p {
  max-width: 900px;
  margin: 0 auto 20px;
  text-align: center;
  font-size: 17px;
  color: #555;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 600px) {
  .galerie-realisations-section h2 {
    font-size: 26px;
  }

  .galerie-subtitle {
    font-size: 16px;
  }

  .cat-btn {
    font-size: 14px;
    padding: 8px 16px;
  }

  .real-item img {
    height: 150px;
  }

  .realisations-expertise h2 {
    font-size: 24px;
  }

  .realisations-expertise p {
    font-size: 15px;
  }
}

/* ============================================================
   SECTION — ILS NOUS ONT FAIT CONFIANCE
   Présentation élégante et premium des logos clients
   ============================================================ */

.realisations-confiance {
  padding: 80px 20px;
  background: #f8f8f8; 
  /* Fond léger pour découper visuellement la section */

  text-align: center;
}

/* ------------------------------------------------------------
   TITRE PRINCIPAL
   ------------------------------------------------------------ */
.realisations-confiance h2 {
  font-size: 32px;
  color: #056FB7; /* Bleu Mondialekte */
  font-weight: 700;
  margin-bottom: 12px;
}

/* Sous-titre */
.realisations-confiance-subtitle {
  color: #555;
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* ============================================================
   GRILLE DES LOGOS
   ============================================================ */

.realisations-confiance-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* Adaptation automatique : 160px minimum → s'aligne parfaitement */

  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Carte du logo */
.logo-item {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

/* Effet premium au survol */
.logo-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.15);
}

/* Image à l'intérieur */
.logo-item img {
  width: 100%;
  height: 70px;           /* Même hauteur pour tous les logos */
  object-fit: contain;    /* Garde l'image intacte sans distorsion */

  filter: grayscale(20%);
  /* Petit effet discret */

  transition: 0.3s ease;
}

/* Au survol → logo en couleur */
.logo-item:hover img {
  filter: grayscale(0%);
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 600px) {

  .realisations-confiance {
    padding: 60px 15px;
  }

  .realisations-confiance h2 {
    font-size: 26px;
  }

  .realisations-confiance-subtitle {
    font-size: 16px;
  }

  .logo-item img {
    height: 55px;
  }
}

/* ============================================================
   SECTION CTA MONDIALEKTE
   Bloc très clair et percutant pour encourager à demander un devis
   ============================================================ */

.cta-mondialekte {
  padding: 80px 20px;
  /* Espace large pour mettre le CTA en valeur */

  background: linear-gradient(120deg, #056FB7, #E1014D);
  /* Dégradé officiel Mondialekte */

  color: #fff;
  text-align: center;
}

/* Conteneur interne pour limiter la largeur */
.cta-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* ------------------------------------------------------------
   Titre CTA
   ------------------------------------------------------------ */
.cta-mondialekte h2 {
  font-size: 36px;
}
/* ===========================================
   CTA — Bouton "Demander un devis"
   (version compatible Shoptimizer)
   =========================================== */

.cta-mondialekte .cta-btn {
  display: inline-block;           /* Force bouton et non lien */

  background-color: #ffffff;       /* Fond blanc */
  color: #056FB7;                  /* Bleu Mondialekte */

  border: 2px solid #ffffff;       /* Cadre visible */
  border-radius: 50px;             /* Forme arrondie premium */

  padding: 14px 32px;              /* Taille du bouton */
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;           /* Supprime le soulignement */

  transition: 0.3s ease;           /* Animation hover */
}

/* Effet hover */
.cta-mondialekte .cta-btn:hover {
  background-color: #f1f1f1;
  border-color: #f1f1f1;

  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* ============================================================
   SECTION — POURQUOI CHOISIR MONDIALEKTE ?
   Version premium + cohérente pour la page Réalisations
   ============================================================ */

.pourquoi-realisations {
  padding: 80px 20px;
  background: #ffffff;
  text-align: center;
}

/* Titre de section */
.pourquoi-realisations h2 {
  font-size: 32px;
  color: #056FB7; /* Bleu Mondialekte */
  font-weight: 700;
  margin-bottom: 40px;
}

/* ============================================================
   GRID DES AVANTAGES
   ============================================================ */

.pourquoi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* S'adapte automatiquement au nombre de cartes */

  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ============================================================
   CARTES
   ============================================================ */

.pourquoi-item {
  background: #ffffff;
  border-radius: 16px;

  padding: 30px 25px;
  text-align: center;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  cursor: default;
}

/* Hover premium */
.pourquoi-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Icônes */
.pourquoi-item img {
  width: 70px;
  height: 70px;
  margin-bottom: 18px;

  object-fit: contain;
  /* Empêche les images de se déformer */

  filter: brightness(0) saturate(100%) invert(23%) sepia(97%) saturate(1680%) hue-rotate(181deg) brightness(88%) contrast(103%);
  /* Teinte les icônes dans le bleu Mondialekte */

  transition: 0.3s ease;
}

/* Au hover → icône rose Mondialekte */
.pourquoi-item:hover img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(90%) saturate(5800%) hue-rotate(-15deg) brightness(93%) contrast(103%);
}

/* Titres d’avantages */
.pourquoi-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

/* Texte */
.pourquoi-item p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 600px) {

  .pourquoi-realisations {
    padding: 60px 15px;
  }

  .pourquoi-realisations h2 {
    font-size: 26px;
  }

  .pourquoi-item {
    padding: 25px 20px;
  }

  .pourquoi-item img {
    width: 60px;
    height: 60px;
  }
}
/* ============================================================
   SECTION — AVIS CLIENTS (Page Réalisations)
   Design premium, clair, harmonisé Mondialekte
   ============================================================ */

.realisations-avis {
  padding: 80px 20px;
  background: #ffffff;
  text-align: center;
}

/* ------------------------------------------------------------
   TITRE PRINCIPAL
   ------------------------------------------------------------ */
.realisations-avis h2 {
  font-size: 32px;
  color: #056FB7; /* Bleu Mondialekte */
  font-weight: 700;
  margin-bottom: 15px;
}

/* Sous-titre */
.avis-subtitle {
  font-size: 18px;
  color: #555;
  max-width: 680px;
  margin: 0 auto 45px;
  line-height: 1.6;
}

/* ============================================================
   GRID DES AVIS
   ============================================================ */

.avis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* 260px minimum pour garder une belle largeur */

  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ============================================================
   CARTE D'AVIS
   ============================================================ */

.avis-item {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 30px 25px;
  text-align: center;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: 0.3s ease;

  cursor: default;
}

/* Hover premium */
.avis-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.15);
}

/* ------------------------------------------------------------
   NOTES (★★★★★)
   ------------------------------------------------------------ */
.avis-note {
  font-size: 22px;
  letter-spacing: 2px;
  color: #E1014D; /* Rose Mondialekte */
  margin-bottom: 15px;

  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ------------------------------------------------------------
   TEXTE DE L'AVIS
   ------------------------------------------------------------ */
.avis-text {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 18px;

  font-style: italic;
  /* Pour donner un style témoignage */
}

/* Auteur */
.avis-author {
  font-size: 15px;
  font-weight: 700;
  color: #056FB7; /* Bleu Mondialekte */
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 600px) {

  .realisations-avis {
    padding: 60px 15px;
  }

  .realisations-avis h2 {
    font-size: 26px;
  }

  .avis-subtitle {
    font-size: 16px;
  }

  .avis-item {
    padding: 25px 20px;
  }
}

/* ============================================================
   SECTION — VOTRE PROJET, NOTRE EXPERTISE
   Section finale persuasive Mondialekte
   ============================================================ */

.projet-expertise {
  padding: 90px 20px;
  background: #f8f8f8;
  /* Fond gris clair = contraste doux avant le footer */

  text-align: center;
}

/* ------------------------------------------------------------
   CONTENEUR LIMITÉ
   ------------------------------------------------------------ */
.expertise-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* ------------------------------------------------------------
   TITRE PRINCIPAL
   ------------------------------------------------------------ */
.projet-expertise h2 {
  font-size: 34px;
  font-weight: 700;
  color: #056FB7; /* Bleu Mondialekte */
  margin-bottom: 20px;
}

/* ------------------------------------------------------------
   TEXTE D'INTRO
   ------------------------------------------------------------ */
.expertise-text {
  font-size: 18px;
  color: #444;
  line-height: 1.7;
  max-width: 850px;
  margin: 0 auto 50px;
}

/* Mise en valeur du strong */
.expertise-text strong {
  color: #E1014D; /* Rose Mondialekte */
  font-weight: 700;
}

/* ============================================================
   GRID DES 3 POINTS FORTS
   ============================================================ */

.expertise-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-bottom: 50px;
}

/* Carte */
.expertise-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px 25px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

/* Hover premium */
.expertise-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Icônes */
.expertise-item img {
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
  object-fit: contain;

  /* Colorisation bleu Mondialekte */
  filter: brightness(0) saturate(100%) invert(23%) sepia(97%) saturate(1680%) hue-rotate(181deg) brightness(88%) contrast(103%);

  transition: 0.3s ease;
}

/* Hover → rose Mondialekte */
.expertise-item:hover img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(90%) saturate(5800%) hue-rotate(-15deg) brightness(93%) contrast(103%);
}

/* Titres */
.expertise-item h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
  font-weight: 700;
}

/* Textes */
.expertise-item p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* ============================================================
   CTA FINAL — BOUTON
   ============================================================ */

.expertise-btn {
  display: inline-block;

  background: linear-gradient(120deg, #056FB7, #E1014D);
  /* Dégradé Mondialekte */

  color: #fff;
  padding: 14px 34px;
  border-radius: 50px;

  font-size: 18px;
  font-weight: 700;
  text-decoration: none;

  transition: 0.3s ease;
}

/* Hover propre */
.expertise-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 600px) {

  .projet-expertise {
    padding: 70px 15px;
  }

  .projet-expertise h2 {
    font-size: 26px;
  }

  .expertise-text {
    font-size: 16px;
  }

  .expertise-item {
    padding: 25px 20px;
  }

  .expertise-btn {
    font-size: 16px;
    padding: 12px 28px;
  }
}

/* ============================================================
   CTA FINALE — MONDIALEKTE
   Section de conversion finale
   ============================================================ */

.cta-final-mk {
  padding: 90px 20px;
  text-align: center;

  background: linear-gradient(120deg, #056FB7, #E1014D);
  /* Dégradé officiel Mondialekte */

  color: #fff;
}

/* ------------------------------------------------------------
   TITRE
   ------------------------------------------------------------ */
.cta-final-mk h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ------------------------------------------------------------
   TEXTE D'ACCROCHE
   ------------------------------------------------------------ */
.cta-final-text {
  font-size: 18px;
  line-height: 1.7;
  max-width: 850px;
  margin: 0 auto 40px;
  color: #f9f9f9;
  /* Blanc doux pour une meilleure lisibilité sur dégradé */
}

/* ============================================================
   BOUTONS CTA
   ============================================================ */

.cta-final-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ----- BOUTON PRINCIPAL (blanc) ----- */
.btn-cta-primary {
  background: #ffffff;
  color: #056FB7;

  padding: 14px 32px;
  border-radius: 50px;

  font-size: 18px;
  font-weight: 700;
  text-decoration: none;

  border: 2px solid #ffffff;

  transition: 0.3s ease;
}

.btn-cta-primary:hover {
  background: #f1f1f1;
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* ----- BOUTON SECONDAIRE (transparent) ----- */
.btn-cta-secondary {
  background: transparent;
  color: #ffffff;

  padding: 14px 32px;
  border-radius: 50px;

  font-size: 18px;
  font-weight: 700;
  text-decoration: none;

  border: 2px solid #ffffff;

  transition: 0.3s ease;
}

.btn-cta-secondary:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 600px) {

  .cta-final-mk {
    padding: 70px 15px;
  }

  .cta-final-mk h2 {
    font-size: 28px;
  }

  .cta-final-text {
    font-size: 16px;
  }

  .btn-cta-primary,
  .btn-cta-secondary {
    font-size: 16px;
    padding: 12px 28px;
    width: 100%;
    text-align: center;
  }

  .cta-final-buttons {
    gap: 14px;
    flex-direction: column;
  }
}

/* ============================================================
   BLOC RÉASSURANCE — Mondialekte
   Section rassurante avec icônes + 4 points forts
   ============================================================ */

.reassurance-section {
  padding: 80px 20px;
  background: #ffffff; /* Section propre et neutre */
  text-align: center;
}

/* ------------------------------------------------------------
   CONTENEUR GRID
   ------------------------------------------------------------ */
.reassurance-container {
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

/* ------------------------------------------------------------
   CARTE INDIVIDUELLE
   ------------------------------------------------------------ */
.reassurance-item {
  background: #f8f8f8;
  border-radius: 16px;

  padding: 30px 25px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  transition: 0.3s ease;
  cursor: default;
}

/* Hover premium */
.reassurance-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.14);
}

/* ------------------------------------------------------------
   ICÔNES (émojis améliorés)
   ------------------------------------------------------------ */
.reassurance-icon {
  font-size: 46px;
  margin-bottom: 15px;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 70px;
  width: 70px;
  margin: 0 auto 20px;

  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);

  transition: 0.3s ease;
}

/* Hover → icône “pop” */
.reassurance-item:hover .reassurance-icon {
  transform: scale(1.1);
}

/* ------------------------------------------------------------
   TITRES DES POINTS
   ------------------------------------------------------------ */
.reassurance-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #056FB7; /* Bleu Mondialekte */
}

/* ------------------------------------------------------------
   TEXTES
   ------------------------------------------------------------ */
.reassurance-item p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  padding: 0 10px;
}

/* ------------------------------------------------------------
   RESPONSIVE MOBILE
   ------------------------------------------------------------ */
@media (max-width: 600px) {

  .reassurance-section {
    padding: 60px 15px;
  }

  .reassurance-item {
    padding: 25px 20px;
  }

  .reassurance-icon {
    font-size: 40px;
    height: 60px;
    width: 60px;
  }
}

/* ============================================================
   WIZARD CONSEIL MONDIALEKTE — Version intelligente & premium
   ============================================================ */

.wizard-mk {
  padding: 60px 25px;
  background: #ffffff;
  border-radius: 20px;
  max-width: 900px;
  margin: 40px auto;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  text-align: center;
}

.wizard-mk h2 {
  font-size: 32px;
  font-weight: 700;
  color: #056FB7;
  margin-bottom: 10px;
}

.wizard-mk-subtitle {
  font-size: 18px;
  color: #555;
  margin-bottom: 35px;
}

/* ============================================================
   ÉTAPES
   ============================================================ */

.mk-step {
  display: none;
  opacity: 0;
  transform: translateY(15px);
  transition: 0.4s ease;
}

.mk-step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.mk-question {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #333;
}

/* ============================================================
   BOUTONS DE L'ÉTAPE 1
   ============================================================ */

.mk-btn {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 10px auto;

  padding: 14px 20px;
  font-size: 18px;
  font-weight: 700;

  border-radius: 50px;
  border: none;
  cursor: pointer;

  background: linear-gradient(120deg, #056FB7, #E1014D);
  color: #fff;

  box-shadow: 0 5px 16px rgba(0,0,0,0.12);
  transition: 0.3s ease;
}

.mk-btn:hover {
  transform: translateY(-4px);
}

/* ============================================================
   CARTES DE RECOMMANDATIONS
   ============================================================ */

.mk-choice {
  background: #f8f8f8;
  border-radius: 14px;
  padding: 20px 18px;
  margin: 12px 0;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.mk-choice h3 {
  color: #056FB7;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
}

.mk-choice p,
.mk-choice ul {
  color: #555;
  line-height: 1.6;
  font-size: 16px;
  margin: 0;
}

.mk-choice ul {
  padding-left: 20px;
}

/* ============================================================
   BOUTONS CTA
   ============================================================ */

.mk-cta {
  margin-top: 25px;
  padding: 14px 28px;

  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;

  background: #056FB7;
  color: #fff;
  border: none;

  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 5px 16px rgba(0,0,0,0.12);
}

.mk-cta:hover {
  background: #045a93;
  transform: translateY(-4px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

  .wizard-mk {
    padding: 40px 15px;
  }

  .wizard-mk h2 {
    font-size: 26px;
  }

  .mk-btn,
  .mk-cta {
    font-size: 16px;
    padding: 12px 16px;
  }

  .mk-choice {
    padding: 18px;
  }
}

/* SECTION */
.mk-accordion-section {
  max-width: 900px;
  margin: 60px auto;
  padding: 20px;
}

.mk-accordion-section h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #056FB7;
  margin-bottom: 30px;
}

/* ITEM */
.mk-accordion-item {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}
/* SECTION */
.mk-accordion-section {
  max-width: 900px;
  margin: 60px auto;
  padding: 20px;
}

.mk-accordion-section h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #056FB7;
  margin-bottom: 30px;
}

/* ITEM */
.mk-accordion-item {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

/* BUTTON */
.mk-accordion-btn {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: #056FB7;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  outline: none;
  transition: 0.3s ease;
}

.mk-accordion-btn:hover {
  opacity: 0.9;
}

/* CONTENT */
.mk-accordion-content {
  background: #f9f9f9;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mk-accordion-content ul {
  padding: 18px 20px;
  margin: 0;
  color: #444;
  line-height: 1.6;
}

.mk-accordion-content li {
  margin-bottom: 10px;
  font-size: 16px;
}

/* ============================================================
   SECTION — REALISATIONS OFFRE (CTA Mondialekte)
   ============================================================ */

.realisations-offre {
  max-width: 900px;
  margin: 60px auto;
  padding: 50px 30px;
  text-align: center;

  background: linear-gradient(120deg, #056FB7, #E1014D);
  color: #fff;

  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.realisations-offre h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.offre-text {
  font-size: 18px;
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto 30px auto;
  color: #f7f7f7;
}

.offre-btn {
  display: inline-block;
  padding: 14px 28px;

  font-size: 18px;
  font-weight: 700;
  text-decoration: none;

  background: #fff;
  color: #056FB7;

  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}

.offre-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

/* ============================================
   CATALOGUE PERSONNALISATION MONDIALEKTE
   ============================================ */

/* Section générique de la page perso */
.perso-section {
  padding: 50px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Titre général & sous-titre */
.perso-section h2 {
  font-size: 26px;
  text-align: center;
  color: #056FB7;
  margin-bottom: 10px;
}

.perso-subtitle {
  text-align: center;
  font-size: 15px;
  color: #666;
  max-width: 750px;
  margin: 0 auto 30px;
}

/* Titre de chaque catégorie (T-shirts, sweats, etc.) */
.categorie-titre {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #333;
  text-align: left;
}

/* Grille de cartes modèles dans une catégorie */
.categorie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* ===============================
   CARTE PRODUIT MONDIALEKTE (PREMIUM)
   =============================== */
.modele-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  border: 2px solid transparent;
  transition: 0.25s ease;
}

.modele-card:hover {
  transform: translateY(-6px);
  border-color: #056FB7;
  box-shadow: 0 10px 32px rgba(0,0,0,0.16);
}

/* Image du produit (facultative mais recommandée) */
.modele-card img {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 12px;
  object-fit: cover;
}

/* Nom du modèle */
.modele-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #056FB7;
  margin-bottom: 6px;
}

/* Description technique courte */
.modele-description {
  font-size: 14px;
  color: #555;
  margin: 0 0 6px;
  line-height: 1.5;
}

/* ===============================
   PASTILLES DE COULEURS
   =============================== */
.modele-couleurs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color);
  cursor: pointer;
  position: relative;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}

.swatch:hover {
  transform: scale(1.12);
}

/* Tooltip : nom de la couleur au survol */
.swatch::after {
  content: attr(data-name);
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  white-space: nowrap;
  z-index: 5;
}

.swatch:hover::after {
  opacity: 1;
}

/* ===============================
   TAILLES DISPONIBLES
   =============================== */
.modele-tailles {
  font-size: 13px;
  color: #444;
  margin: 4px 0 8px;
}

/* ===============================
   BOUTON "Choisir ce modèle"
   =============================== */
.modele-choisir {
  background: #E1014D;
  color: #fff;
  width: 100%;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  margin-top: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: 0.25s ease;
}

.modele-choisir:hover {
  background: #056FB7;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 768px) {
  .perso-section {
    padding: 40px 15px;
  }
  .categorie-titre {
    text-align: center;
  }
}
.perso-alert-important {
  background: linear-gradient(90deg, #056FB7, #E1014D);
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  margin-bottom: 28px;
  margin-top: 10px;
  letter-spacing: 0.3px;
  animation: pulseNotice 1.5s ease-in-out infinite;
}

@keyframes pulseNotice {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}


/* ===============================
   FOOTER PREMIUM MONDIALEKTE
   =============================== */

.footer-mondialekte {
  background: #056FB7; /* Bleu Mondialekte */
  color: #fff;
  padding: 60px 0 20px;
  font-family: Futura, sans-serif;
}

.footer-mondialekte a {
  color: inherit;
}

/* Conteneur principal */
.footer-mondialekte .footer-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

/* Colonnes */
.footer-mondialekte .footer-col h4 {
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.footer-mondialekte .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-mondialekte .footer-col ul li {
  margin-bottom: 12px;
}

.footer-mondialekte .footer-col ul li a {
  color: #eaeaea;
  text-decoration: none;
  font-size: 0.95rem;
  transition: 0.25s;
}

.footer-mondialekte .footer-col ul li a:hover {
  color: #E1014D; /* Rose Mondialekte */
  padding-left: 4px;
}

/* Logo & texte */
.footer-mondialekte .footer-logo {
  width: 160px;
  max-width: 100%;
  margin-bottom: 15px;
}

.footer-mondialekte .footer-desc {
  font-size: 0.95rem;
  color: #e7e7e7;
  line-height: 1.6;
}

/* Réseaux */
.footer-mondialekte .footer-socials a {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #000000;
  color: #056FB7;

  font-size: 1.2rem;
  margin-right: 12px;

  transition: 0.25s ease;
}

.footer-mondialekte .footer-socials a:hover {
  background: #E1014D;
  color: #fff;
  transform: translateY(-3px);
}

/* Bandeau du bas */
.footer-mondialekte .footer-bottom {
  margin-top: 40px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.footer-mondialekte .footer-bottom p {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 600px) {
  .footer-mondialekte .footer-col h4 {
    margin-bottom: 14px;
  }
}


<footer class="footer-mondialekte">

  <div class="footer-container">

    <!-- Colonne 1 : Présentation -->
    <div class="footer-col">
      <img src="https://www.mondialekte.com/wp-content/uploads/2024/05/mondialekte-logo.png" alt="Mondialekte" class="footer-logo">
      <p class="footer-desc">
        Mondialekte valorise les langues et dialectes du monde à travers des vêtements personnalisés et réalisés en France.
      </p>
    </div>

    <!-- Colonne 2 : Liens rapides -->
    <div class="footer-col">
      <h4>Découvrir</h4>
      <ul>
        <li><a href="/boutique">Boutique</a></li>
        <li><a href="/personnalisation">Personnalisation</a></li>
        <li><a href="/nos-valeurs">Nos valeurs</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div>

    <!-- Colonne 3 : Support -->
    <div class="footer-col">
      <h4>Support</h4>
      <ul>
        <li><a href="/faq">FAQ</a></li>
        <li><a href="/livraison">Livraison</a></li>
        <li><a href="/retours">Retours</a></li>
        <li><a href="/mentions-legales">Mentions légales</a></li>
      </ul>
    </div>

    <!-- Colonne 4 : Réseaux sociaux -->
    <div class="footer-col">
      <h4>Suivez-nous</h4>
      <div class="footer-socials">
        <!-- Remplace # par tes vrais liens -->
        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
        <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
      </div>
    </div>

  </div>

  <div class="footer-bottom">
    <p>© 2025 Mondialekte — Tous droits réservés.</p>
  </div>

</footer>
/* ===========================================
   CONTACT PAGE – Mondialekte Premium Design
   =========================================== */

.mk-contact-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  font-family: Futura, sans-serif;
}

/* Titles */
.mk-contact-title {
  font-size: 38px;
  font-weight: bold;
  background: linear-gradient(90deg, #056FB7 0%, #E1014D 100%);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}

.mk-contact-subtitle {
  font-size: 18px;
  opacity: 0.8;
  margin-bottom: 25px;
}

/* Form */
.mk-contact-form {
  background: #fff;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  animation: fadeInUp 0.6s ease;
}

.mk-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.mk-field {
  text-align: left;
}

.mk-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #333;
}

.mk-field input,
.mk-field textarea {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 2px solid #056FB7;
  font-size: 16px;
  outline: none;
  transition: 0.25s;
}

.mk-field input:focus,
.mk-field textarea:focus {
  border-color: #E1014D;
  box-shadow: 0 0 0 4px rgba(225,1,77,0.15);
}

.mk-field textarea {
  height: 150px;
  resize: vertical;
}

/* Button */
.mk-contact-btn {
  background: linear-gradient(90deg, #056FB7 0%, #E1014D 100%);
  color: white;
  padding: 16px 28px;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.25s;
  width: 100%;
  margin-top: 10px;
  font-size: 17px;
}

.mk-contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(225,1,77,0.25);
}

/* Success/Error messages */
.mk-contact-msg {
  display: none;
  padding: 14px;
  margin-top: 15px;
  border-radius: 10px;
  font-weight: bold;
  color: white;
  animation: fadeIn 0.4s ease-out;
}

.mk-contact-success {
  background: #17c964;
}

.mk-contact-error {
  background: #e53935;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 768px) {
  .mk-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* SECTION FULL-WIDTH EN DÉGRADÉ MONDIALEKTE */
.mk-newsletter-section {
  width: 100%;
  padding: 80px 20px;
  background: linear-gradient(135deg, #056FB7, #E1014D);
  color: #fff;
  display: flex;
  justify-content: center;
}

/* Grille : 1 colonne formulaire / 1 colonne animation */
.mk-newsletter-container {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* TITRES */
.mk-newsletter-left h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 10px;
}

.mk-newsletter-subtitle {
  font-size: 18px;
  margin-bottom: 20px;
}

/* COMPTEUR SOCIAL */
.mk-counter {
  font-size: 28px;
  font-weight: 900;
  padding: 5px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
}

/* FORMULAIRE */
.mk-newsletter-form {
  background: rgba(0,0,0,0.20);
  padding: 22px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.mk-newsletter-fields {
  display: flex;
  gap: 10px;
}

/* Champ email */
.mk-newsletter-fields input {
  flex: 1;
  padding: 14px;
  border-radius: 8px;
  border: none;
}

/* Bouton */
.mk-newsletter-fields button {
  padding: 14px 18px;
  border-radius: 8px;
  border: none;
  background: #000;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

/* ANIMATION */
.mk-newsletter-right {
  display: flex;
  justify-content: center;
}

.mk-newsletter-animation {
  max-width: 320px;
  width: 100%;
}

/* MOBILE : une seule colonne */
@media (max-width: 900px) {
  .mk-newsletter-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* ============================================================
   FIX MOBILE – Agrandir le champ email & le bouton newsletter
   ============================================================ */

@media (max-width: 600px) {

  /* On met le formulaire sur 1 seule colonne */
  .mk-newsletter-fields {
    flex-direction: column;
    gap: 12px;
  }

  /* Champ email plus grand, plus confortable */
  .mk-newsletter-fields input[type="email"] {
    padding: 18px 16px;       /* plus de hauteur */
    font-size: 17px;          /* texte plus lisible */
    width: 100%;              /* prend toute la largeur */
    border-radius: 12px;
  }

  /* Bouton plus grand et plus facile à cliquer */
  .mk-newsletter-fields button {
    padding: 18px 16px;
    font-size: 16px;
    width: 100%;
    border-radius: 12px;
  }

  /* Le bloc formulaire respire mieux */
  .mk-newsletter-form {
    padding: 22px 18px;
  }

  /* Sous-texte visible et lisible */
  .mk-newsletter-note {
    font-size: 14px;
    margin-top: 10px;
  }
}


/* ================================
   ANIMATION LINGUISTIQUE MONDIALEKTE
   ================================ */

.mk-lang-animation {
  position: relative;
  height: 160px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mk-lang-words {
  display: flex;
  flex-direction: column;
  animation: mkSlideWords 12s infinite linear;
}

.mk-lang-words span {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  opacity: 0.9;
  background: linear-gradient(90deg, #ffffff, #00000020);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================================
   LANGUES – Apparition / Disparition
   ================================ */

.mk-lang-fade {
  position: relative;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.mk-lang-fade span {
  position: absolute;
  opacity: 0;
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  animation: mkFadeCycle 24s infinite;
}

/* Animation : fade-in → pause → fade-out */
@keyframes mkFadeCycle {
  0% { opacity: 0; transform: translateX(20px); }
  5% { opacity: 1; transform: translateX(0); }
  20% { opacity: 1; transform: translateX(0); }
  25% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 0; }
}
/* ================================
   LANGUES — Fade parfaitement synchrone
   ================================ */

.mk-lang-fade {
  position: relative;
  height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mk-lang-fade span {
  position: absolute;
  opacity: 0;
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  animation: mkFadeOneByOne 36s infinite;
}

/* 1 mot = fade-in → pause → fade-out sur 3 secondes */
@keyframes mkFadeOneByOne {
  0%   { opacity: 0; transform: translateY(10px); }
  10%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; }
}

/* ================================
   LANGUES — SLIDE HORIZONTAL PREMIUM
   ================================ */

.mk-lang-slide {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
}

/* Chaque mot */
.mk-lang-slide span {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  animation: mkSlideWord 36s infinite;
}

/* Animation horizontale :
   - le mot apparaît à gauche
   - traverse lentement
   - sort à droite
   - disparaît totalement
*/
@keyframes mkSlideWord {
  0%   { opacity: 0; transform: translateX(-120%); }
  5%   { opacity: 1; transform: translateX(0%); }     /* apparition */
  20%  { opacity: 1; transform: translateX(20%); }    /* lecture */
  25%  { opacity: 0; transform: translateX(120%); }   /* disparition */
  100% { opacity: 0; }
}

.mk-lang-slide {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
}

/* Style des mots */
.mk-lang-slide span {
  position: absolute;
  opacity: 0;
  white-space: nowrap;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
}

/* === ANIMATIONS UNIQUES POUR CHAQUE MOT (NE PEUVENT PAS SE SUPERPOSER) === */

.mk-lang-slide span:nth-child(1) {
  animation: slide1 3s linear infinite;
}
@keyframes slide1 {
  0%   { opacity:0; transform: translateX(-120%); }
  10%  { opacity:1; transform: translateX(0%); }
  70%  { opacity:1; transform: translateX(40%); }
  90%  { opacity:0; transform: translateX(120%); }
  100% { opacity:0; }
}

.mk-lang-slide span:nth-child(2) {
  animation: slide2 3s linear infinite;
  animation-delay: 3s;
}
@keyframes slide2 {
  0%   { opacity:0; transform: translateX(-120%); }
  10%  { opacity:1; transform: translateX(0%); }
  70%  { opacity:1; transform: translateX(40%); }
  90%  { opacity:0; transform: translateX(120%); }
  100% { opacity:0; }
}

.mk-lang-slide span:nth-child(3) {
  animation: slide3 3s linear infinite;
  animation-delay: 6s;
}
@keyframes slide3 {
  0%   { opacity:0; transform: translateX(-120%); }
  10%  { opacity:1; transform: translateX(0%); }
  70%  { opacity:1; transform: translateX(40%); }
  90%  { opacity:0; transform: translateX(120%); }
  100% { opacity:0; }
}
/* ================================
   BANDEAU LANGUES – 1 MOT À LA FOIS
   ================================ */

.mk-lang-slide {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mk-lang-current {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
}

/* Animation d'un mot :
   - apparaît depuis la gauche
   - reste lisible
   - sort vers la droite
*/
@keyframes mkSlideOne {
  0%   { opacity: 0; transform: translateX(-120%); }
  15%  { opacity: 1; transform: translateX(0%); }
  70%  { opacity: 1; transform: translateX(0%); }
  100% { opacity: 0; transform: translateX(120%); }
}

/* Classe appliquée à chaque changement de mot */
#mk-lang-current.mk-anim {
  animation: mkSlideOne 2.8s ease-in-out;
}

/* Mobile */
@media (max-width: 600px) {
  #mk-lang-current {
    font-size: 26px;
  }
}


/* ============================================================
   MONDIALEKTE — REMERCIEMENT FULL WIDTH + VERSION MOBILE
   ============================================================ */

/* 🌈 Background fullscreen */
.mk-thanks-section {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #056FB7, #E1014D);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: 'Futura', sans-serif;
}

/* 🌌 Background animé */
.mk-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.mk-particles::before,
.mk-particles::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(255,255,255,0.27) 0%, transparent 70%);
  animation: orbMove 18s infinite linear;
}

.mk-particles::after {
  animation-duration: 22s;
  opacity: 0.3;
}

@keyframes orbMove {
  0%   { transform: translate(-20%, -20%) scale(1); }
  50%  { transform: translate(20%, 10%) scale(1.2); }
  100% { transform: translate(-20%, -20%) scale(1); }
}

/* 🧊 Contenu desktop : verre + design premium */
.mk-thanks-container {
  position: relative;
  max-width: 800px;
  width: 85%;
  padding: 70px 50px;
  background: rgba(255,255,255,0.15);
  border-radius: 28px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  text-align: center;
  animation: fadeInUp 0.9s ease-out;
  z-index: 2;
}

@keyframes fadeInUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Icone check */
.mk-check {
  width: 110px;
  height: 110px;
  background: #fff;
  color: #056FB7;
  margin: 0 auto 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 58px;
  font-weight: 900;
  animation: popIn 0.8s ease-out;
}

@keyframes popIn {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* Titre */
.mk-thanks-title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 20px;
}

/* Texte desktop */
.mk-thanks-text {
  font-size: 22px;
  line-height: 1.7;
  margin-bottom: 35px;
}

/* Bouton */
.mk-return-btn {
  display: inline-block;
  padding: 16px 35px;
  background: #fff;
  color: #056FB7;
  border-radius: 60px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s ease;
}

.mk-return-btn:hover {
  background: #056FB7;
  color: #fff;
  transform: translateY(-4px);
}

/* ------------------------------------------------------------
   🌍 BANDEAU LANGUES ANIMÉ (desktop uniquement)
   ------------------------------------------------------------ */
.mk-lang-banner {
  margin-top: 50px;
  overflow: hidden;
  white-space: nowrap;
}

.mk-lang-banner span {
  display: inline-block;
  font-size: 32px;
  font-weight: 800;
  padding-right: 65px;
  animation: slideLangs 18s linear infinite;
}

@keyframes slideLangs {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-250%); }
}
/* ============================================================
   BANNIÈRE FULL-WIDTH — PAGE À PROPOS (Mondialekte Premium)
   Structure : section #ap-banner
   Couleurs : Bleu #056FB7 – Rose #E1014D – Blanc – Noir
   Police : Futura (déjà chargée sur ton site)
   ============================================================ */
/* ============================================================
   BANNIÈRE À PROPOS — FULL-WIDTH PREMIUM MONDIALEKTE
   ============================================================ */

/* SECTION FULL WIDTH */
#ap-banner {
  width: 100vw !important;
  max-width: 100vw !important;

  position: relative;
  left: 50%;
  margin-left: -50vw;

  padding: 7rem 2rem;
  background: linear-gradient(135deg, #056FB7, #E1014D);
  color: #fff;
  overflow: hidden;
}

/* CONTAINER INTERNE (centré) */
.ap-banner__container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* équilibre texte / visuel */
  gap: 4rem;
  align-items: center;
}

/* ============================================================
   COLONNE GAUCHE — CONTENU TEXTE
   ============================================================ */

.ap-banner__content {
  animation: fadeUp 0.9s ease forwards;
  opacity: 0;
}

/* Eyebrow */
.ap-banner__eyebrow {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* TITRE */
.ap-banner__title {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  max-width: 90%;
}

/* SOUS-TITRE */
.ap-banner__subtitle {
  font-size: 1.2rem;
  margin-bottom: 2.2rem;
  max-width: 600px;
  opacity: 0.95;
  line-height: 1.55;
}

/* LISTE À PUCE PREMIUM */
.ap-banner__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem 0;
}

.ap-banner__highlights li {
  position: relative;
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
  padding-left: 1.8rem;
}

.ap-banner__highlights li::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px;
  box-shadow: 0 0 10px rgba(255,255,255,0.6);
}

/* ============================================================
   ACTIONS (BOUTONS)
   ============================================================ */

.ap-banner__actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Bouton principal */
.ap-banner__btn-primary {
  background: #fff;
  color: #056FB7;
  padding: 0.9rem 1.8rem;
  border-radius: 7px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s ease;
  font-size: 1.05rem;
}

.ap-banner__btn-primary:hover {
  background: #f3f3f3;
  transform: translateY(-3px);
}

/* Lien secondaire */
.ap-banner__link-secondary {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  opacity: 0.9;
  font-size: 1.05rem;
}

.ap-banner__link-secondary:hover {
  opacity: 1;
}

/* ============================================================
   COLONNE DROITE — VISUEL PREMIUM (carte translucide)
   ============================================================ */

.ap-banner__visual {
  justify-self: center;
}

.ap-banner__visual-inner {
  background: rgba(255, 255, 255, 0.12);
  padding: 3rem 2.5rem;
  border-radius: 18px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  text-align: center;
  max-width: 360px;
  animation: fadeUp 1.2s ease forwards;
  opacity: 0;
}

.ap-banner__badge {
  display: inline-block;
  background: #fff;
  color: #056FB7;
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.ap-banner__visual-text {
  font-size: 1.15rem;
  line-height: 1.5;
}

/* Bouton secondaire — identique au bouton principal */
.ap-banner__link-secondary {
  background: #fff;
  color: #056FB7 !important;
  padding: 0.9rem 1.8rem;
  border-radius: 7px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
  display: inline-block;
  transition: 0.25s ease;
}

/* Hover identique au bouton principal */
.ap-banner__link-secondary:hover {
  background: #f3f3f3;
  transform: translateY(-3px);
  opacity: 1;
}


/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 1024px) {
  .ap-banner__container {
    grid-template-columns: 1fr; /* empile les blocs */
    text-align: center;
    gap: 3rem;
  }

  .ap-banner__title {
    font-size: 2.2rem;
    margin: 0 auto 1.2rem;
  }

  .ap-banner__subtitle {
    margin: 0 auto 2rem;
  }

  .ap-banner__highlights li {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
  }
}

@media (max-width: 480px) {
  #ap-banner {
    padding: 4rem 1.2rem;
  }

  .ap-banner__title {
    font-size: 1.8rem;
  }
}

/* ============================================================
   SECTION HISTOIRE — DESIGN PREMIUM FLEXIBLE MONDIALEKTE
   ============================================================ */

.about-histoire {
    padding: 5rem 2rem;
    background: #f8f9fb;
}

.history-tech {
    background: #ffffff;
}

/* CARTE */
.histoire-container {
    max-width: 1050px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* IMAGE plein large */
.histoire-image img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 4px solid #056FB7;
}

/* TEXTE */
.histoire-text {
    padding: 3rem 2.5rem;
}

.histoire-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #056FB7;
    margin-bottom: 1.2rem;
}

.histoire-text p {
    font-size: 1.15rem;
    color: #333;
    margin-bottom: 1.2rem;
    line-height: 1.6;
}

.histoire-quote {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    padding-left: 1rem;
    border-left: 4px solid #E1014D;
    color: #E1014D;
    margin-top: 1.8rem;
}

/* ============================================================
   RESPONSIVE — PARFAIT MOBILE
   ============================================================ */

@media (max-width: 768px) {

  .histoire-container {
      border-radius: 14px;
      box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  }

  .histoire-text {
      padding: 2.2rem 1.6rem;
      text-align: left;
  }

  .histoire-text h2 {
      font-size: 1.7rem;
  }

  .histoire-text p {
      font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  .histoire-text h2 {
      font-size: 1.55rem;
  }

  .histoire-text p {
      font-size: 0.98rem;
  }

  .histoire-quote {
      font-size: 1.1rem;
  }
}

/* ============================================================
   SECTION ENGAGEMENTS — PREMIUM MONDIALEKTE
   ============================================================ */

.engagements-section {
    padding: 6rem 2rem;
    background: #ffffff;
    text-align: center;
}

.engagements-section h2 {
    font-size: 2.4rem;
    color: #056FB7;
    font-weight: 700;
    margin-bottom: 1rem;
}

.engagements-subtitle {
    font-size: 1.15rem;
    color: #555;
    max-width: 650px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* GRID 4 COLONNES RESPONSIVE */
.engagements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ITEM PREMIUM */
.engagement-item {
    background: #f8f9fb;
    padding: 2.8rem 1.8rem;
    border-radius: 18px;
    box-shadow: 0 12px 25px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Effet hover premium */
.engagement-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 28px rgba(0,0,0,0.10);
}

/* ICÔNES */
.engagement-icon {
    font-size: 2.6rem;
    margin-bottom: 1rem;
    color: #E1014D;
}

/* TITRES */
.engagement-item h3 {
    font-size: 1.35rem;
    color: #056FB7;
    margin-bottom: 0.8rem;
}

/* TEXTES */
.engagement-item p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.55;
}


/* ============================================================
   RESPONSIVE — TABLETTE
   ============================================================ */

@media (max-width: 1024px) {
    .engagements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 600px) {
    .engagements-section {
        padding: 4rem 1.2rem;
    }

    .engagements-grid {
        grid-template-columns: 1fr;
    }

    .engagement-item {
        padding: 2.2rem 1.6rem;
    }

    .engagement-item h3 {
        font-size: 1.22rem;
    }

    .engagement-item p {
        font-size: 1rem;
    }
}

/* ============================================================
   SECTION VALEURS — DESIGN PREMIUM MONDIALEKTE
   ============================================================ */

.valeurs-mondialekte {
    padding: 6rem 2rem;
    background: #f8f9fb;
    text-align: center;
}

.valeurs-mondialekte h2 {
    font-size: 2.4rem;
    color: #056FB7;
    font-weight: 700;
    margin-bottom: 1rem;
}

.valeurs-intro {
    max-width: 700px;
    margin: 0 auto 3rem auto;
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}

/* GRID 4 COLONNES */
.valeurs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ITEM */
.valeur-item {
    background: #fff;
    border-radius: 18px;
    padding: 2.8rem 1.8rem;
    text-align: center;
    box-shadow: 0 12px 25px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* HOVER PREMIUM */
.valeur-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px rgba(0,0,0,0.10);
}

/* ICONES */
.valeur-item img {
    width: 70px;
    height: 70px;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.15));
    transition: transform .25s ease;
}

.valeur-item:hover img {
    transform: scale(1.08);
}

/* TITRES */
.valeur-item h3 {
    font-size: 1.35rem;
    color: #056FB7;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

/* TEXTES */
.valeur-item p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.55;
}


/* ============================================================
   RESPONSIVE — TABLETTE
   ============================================================ */

@media (max-width: 1024px) {
    .valeurs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .valeurs-mondialekte {
        padding: 4rem 1.2rem;
    }

    .valeurs-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .valeur-item {
        padding: 2.2rem 1.5rem;
    }

    .valeur-item h3 {
        font-size: 1.22rem;
    }

    .valeur-item p {
        font-size: 1rem;
    }
}

/* ============================================================
   SECTION ATELIER — DESIGN PREMIUM MONDIALEKTE
   ============================================================ */

.atelier-mondialekte {
    padding: 6rem 2rem;
    background: #ffffff;
    text-align: center;
}

.atelier-mondialekte h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #056FB7;
    margin-bottom: 1rem;
}

.atelier-intro {
    max-width: 750px;
    margin: 0 auto 4rem auto;
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}

/* ============================================================
   GRID MODERNE — 2 colonnes alternées
   ============================================================ */

.atelier-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.8rem;
}

/* ITEM COMMUN */
.atelier-item {
    background: #f8f9fb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 25px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover premium */
.atelier-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 30px rgba(0,0,0,0.12);
}

/* ============================================================
   IMAGES PLEIN FORMAT
   ============================================================ */

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

/* ============================================================
   BLOCS TEXTE
   ============================================================ */

.atelier-texte {
    padding: 2.8rem 2.4rem;
    text-align: left;
}

.atelier-texte h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #056FB7;
    margin-bottom: 1rem;
}

.atelier-texte p {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 1.4rem;
}

.atelier-texte ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.atelier-texte li {
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 0.6rem;
    padding-left: 1.3rem;
    position: relative;
}

/* Puce Premium Mondialekte */
.atelier-texte li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #E1014D;
    font-weight: bold;
    font-size: 1.4rem;
}

/* ============================================================
   RESPONSIVE TABLETTE
   ============================================================ */

@media (max-width: 992px) {
    .atelier-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .atelier-item {
        height: auto;
    }
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 600px) {
    .atelier-mondialekte {
        padding: 4rem 1.2rem;
    }

    .atelier-intro {
        font-size: 1.05rem;
    }

    .atelier-texte {
        padding: 2rem 1.6rem;
    }

    .atelier-texte h3 {
        font-size: 1.4rem;
    }

    .atelier-texte p {
        font-size: 1rem;
    }
}

/* ============================================================
   SECTION UNIQUE — PREMIUM MONDIALEKTE
   ============================================================ */

.ap-unique {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #f6f8fc, #ffffff);
    position: relative;
}

/* Conteneur */
.ap-unique__container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* TITRE */
.ap-unique__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #056FB7;
    margin-bottom: 0.5rem;
}

.ap-unique__subtitle {
    font-size: 1.15rem;
    color: #555;
    max-width: 680px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* ============================================================
   GRID DES 4 POINTS UNIQUES
   ============================================================ */

.ap-unique__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Carte individuelle */
.ap-unique__item {
    background: #fff;
    padding: 2.5rem 1.8rem;
    border-radius: 18px;
    box-shadow: 0 12px 25px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
    text-align: center;
}

/* Hover premium */
.ap-unique__item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(0,0,0,0.10);
}

/* Icone */
.ap-unique__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #E1014D;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
}

/* Titres */
.ap-unique__item-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #056FB7;
    margin-bottom: 0.8rem;
}

/* Texte */
.ap-unique__item-text {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.55;
}

/* ============================================================
   ANIMATION D’APPARITION (fade-up)
   ============================================================ */

.ap-unique-animate-item {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .8s ease, transform .8s ease;
}

.ap-unique.ap-unique-animate .ap-unique-animate-item.ap-unique-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   RESPONSIVE TABLETTE
   ============================================================ */

@media (max-width: 1024px) {
    .ap-unique__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .ap-unique {
        padding: 4rem 1.2rem;
    }

    .ap-unique__title {
        font-size: 2rem;
    }

    .ap-unique__subtitle {
        font-size: 1.05rem;
    }

    .ap-unique__grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .ap-unique__item {
        padding: 2rem 1.5rem;
    }

    .ap-unique__item-title {
        font-size: 1.25rem;
    }

    .ap-unique__item-text {
        font-size: 1rem;
    }
}

/* ============================================================
   SECTION CTA FINALE — PREMIUM MONDIALEKTE
   ============================================================ */

.ap-cta {
    padding: 6rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #056FB7, #E1014D);
    color: #fff;
}

.ap-cta__container {
    max-width: 900px;
    margin: 0 auto;
}

/* TITRE */
.ap-cta__title {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1rem;
}

/* SOUS-TITRE */
.ap-cta__subtitle {
    font-size: 1.25rem;
    max-width: 650px;
    margin: 0 auto 3rem auto;
    opacity: 0.95;
    line-height: 1.6;
}

/* BOUTONS */
.ap-cta__buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Bouton principal */
.ap-cta__btn-primary {
    background: #fff;
    color: #056FB7 !important;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: 0.25s ease;
    display: inline-block;
}

.ap-cta__btn-primary:hover {
    background: #f3f3f3;
    transform: translateY(-3px);
}

/* Bouton secondaire */
.ap-cta__btn-secondary {
    border: 2px solid #fff;
    color: #fff !important;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-block;
    transition: 0.25s ease;
}

.ap-cta__btn-secondary:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-3px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    .ap-cta {
        padding: 4rem 1.4rem;
    }

    .ap-cta__title {
        font-size: 2rem;
    }

    .ap-cta__subtitle {
        font-size: 1.1rem;
    }

    .ap-cta__buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .ap-cta__btn-primary,
    .ap-cta__btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* ================================
   SECTION — COMMENT ÇA MARCHE ?
   Design premium Mondialekte
================================ */

.howitworks-section {
  width: 100%;
  padding: 80px 20px;
  background: #f7f9fc;
  text-align: center;
}

.howitworks-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #0a0a0a;
  margin-bottom: 15px;
}

/* Container */
.howitworks-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Steps grid */
.howitworks-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

/* Step card */
.howitworks-step {
  background: #fff;
  padding: 35px 25px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}

.howitworks-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

/* Icon */
.howitworks-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.howitworks-step:hover .howitworks-icon {
  transform: scale(1.15);
  animation: bounce 0.5s ease;
}

/* Titles & text */
.howitworks-step h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.howitworks-step p {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
}

/* Animation douce */
@keyframes bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1.15); }
}

/* Responsive */
@media (max-width: 900px) {
  .howitworks-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .howitworks-steps {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION ACTUALITÉS — MONDIALEKTE
   ============================================================ */

.mk-actus-section {
  padding: 6rem 2rem;
  background: #f7f9fc;
}

.mk-actus-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.mk-actus-header {
  text-align: center;
  margin-bottom: 3rem;
}

.mk-actus-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #056FB7;
  margin-bottom: 0.8rem;
}

.mk-actus-subtitle {
  font-size: 1.1rem;
  color: #555;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Grille de cartes */
.mk-actus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}

/* Carte */
.mk-actus-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mk-actus-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.10);
}

/* Image */
.mk-actus-thumb-wrap {
  display: block;
  overflow: hidden;
}

.mk-actus-thumb {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.mk-actus-card:hover .mk-actus-thumb {
  transform: scale(1.05);
}

/* Contenu */
.mk-actus-content {
  padding: 1.8rem 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mk-actus-card-title {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}

.mk-actus-card-title a {
  color: #0a0a0a;
  text-decoration: none;
}

.mk-actus-card-title a:hover {
  color: #056FB7;
}

/* Meta & extrait */
.mk-actus-meta {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 0.8rem;
}

.mk-actus-excerpt {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  flex-grow: 1;
}

/* Bouton */
.mk-actus-btn {
  align-self: flex-start;
  background: #056FB7;
  color: #fff;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.25s ease;
}

.mk-actus-btn:hover {
  background: #04548a;
  transform: translateY(-2px);
}

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

@media (max-width: 992px) {
  .mk-actus-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mk-actus-thumb {
    height: 190px;
  }
}

@media (max-width: 640px) {
  .mk-actus-section {
    padding: 4rem 1.3rem;
  }

  .mk-actus-grid {
    grid-template-columns: 1fr;
  }

  .mk-actus-thumb {
    height: 210px;
  }
}
/* ======================================================
   STYLE GLOBAL PAGE REMERCIEMENT — MONDIALEKTE
   ====================================================== */

.mk-thanks-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: 'Futura', sans-serif;
}

/* HEADER */
.mk-thanks-header h1 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #056FB7;
  margin-bottom: 10px;
}

.mk-thanks-header p {
  font-size: 1.2rem;
  color: #444;
  margin-bottom: 40px;
}

/* INTRO */
.mk-thanks-intro h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.mk-thanks-intro p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 5px;
}

/* COLLECTIONS */
.mk-grid-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #056FB7;
  margin-top: 50px;
}

.mk-grid-subtitle {
  font-size: 1.15rem;
  color: #555;
  margin-bottom: 40px;
}

/* GRID SYSTEM 4–2–1 */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Responsive */
@media (max-width: 992px) {
  .mk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mk-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD */
.mk-card {
  background: white;
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  position: relative;
}

.mk-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.15);
}

.mk-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
}

/* BADGES */
.mk-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #056FB7;
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

.mk-badge.mk-alt {
  background: #E1014D;
}

/* TITRES DES CARTES */
.mk-card h3 {
  margin: 15px 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
}

/* LIEN CARTE */
.mk-btn-link {
  color: #056FB7;
  font-weight: 700;
  text-decoration: none;
}

.mk-btn-link:hover {
  color: #E1014D;
}

/* CTA FINAL */
.mk-thanks-cta {
  margin: 60px 0 40px;
}

.mk-main-btn {
  padding: 14px 35px;
  background: linear-gradient(135deg, #056FB7, #E1014D);
  color: white;
  border-radius: 30px;
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-block;
  transition: 0.25s;
}

.mk-main-btn:hover {
  transform: translateY(-4px);
  opacity: 0.9;
}

/* ============================================================
   PAGE 404 MONDIALEKTE — DESIGN PREMIUM
   ============================================================ */

.mk-404-body {
    background: #f5f7fb;
    font-family: "Futura", sans-serif;
}

.mk-404-wrapper {
    max-width: 1300px;
    margin: auto;
    padding: 80px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

.mk-404-badge {
    display: inline-block;
    background: #E1014D;
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 20px;
}

.mk-404-title {
    font-size: 48px;
    font-weight: 700;
    color: #056FB7;
    margin-bottom: 20px;
}

.mk-404-text {
    font-size: 18px;
    max-width: 480px;
    color: #333;
    margin-bottom: 35px;
}

.mk-404-buttons {
    display: flex;
    gap: 20px;
}

.mk-404-btn-primary {
    background: linear-gradient(135deg, #056FB7, #E1014D);
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.mk-404-btn-primary:hover {
    opacity: 0.85;
}

.mk-404-btn-secondary {
    border: 2px solid #056FB7;
    color: #056FB7;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.mk-404-btn-secondary:hover {
    background: #056FB7;
    color: #fff;
}

.mk-404-visual img {
    width: 100%;
    max-width: 500px;
    animation: float404 4s ease-in-out infinite;
}

@keyframes float404 {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Responsive */
@media (max-width: 900px) {
    .mk-404-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .mk-404-buttons {
        flex-direction: column;
    }
}
/* ================================
   MONDIALEKTE — PAGE 404 FUN
================================ */

.md-404 {
  padding: 60px 20px;
  text-align: center;
  max-width: 900px;
  margin: auto;
}

.md-404-title {
  font-size: 70px;
  font-weight: bold;
  color: #056FB7;
  margin-bottom: 10px;
}

.md-404-text {
  font-size: 20px;
  margin-bottom: 25px;
  color: #333;
}

.md-404-img {
  width: 260px;
  height: auto;
  margin: 20px auto;
  display: block;
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.md-404-btn {
  display: inline-block;
  background: linear-gradient(135deg, #056FB7, #E1014D);
  color: #fff;
  padding: 14px 28px;
  border-radius: 40px;
  font-size: 18px;
  margin-top: 15px;
  text-decoration: none;
  transition: 0.3s;
}

.md-404-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.md-404-small {
  margin-top: 25px;
  font-size: 16px;
  color: #666;
}

.md-404-links {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.md-404-links a {
  font-size: 16px;
  color: #056FB7;
  text-decoration: none;
  font-weight: 600;
}

.md-404-links a:hover {
  color: #E1014D;
}

/* Toujours afficher le bouton produit sur la boutique */
.products .product .button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Style pages légales Mondialekte */
.page-id-legal,
.page-id-cgv,
.page-id-privacy,
.page-id-returns {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
  line-height: 1.8;
}

.page-id-legal h2,
.page-id-cgv h2,
.page-id-privacy h2,
.page-id-returns h2 {
  margin-top: 40px;
  font-size: 1.4rem;
  font-weight: 600;
}

/* ================================
   MENU BURGER – STYLE MONDIALEKTE
================================ */

/* Fond du menu mobile */
.shoptimizer-mobile-menu {
  background-color: #ffffff; /* fond propre et clair */
}

/* Zone intérieure du menu */
.shoptimizer-mobile-menu ul {
  padding: 24px 20px; /* respiration */
}

/* Liens du menu */
.shoptimizer-mobile-menu ul li a {
  font-family: "Futura", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #111111; /* texte lisible */
  padding: 14px 0;
  display: block;
  border-bottom: 1px solid #f0f0f0; /* séparation légère */
  transition: all 0.25s ease;
}

/* Hover / tap sur mobile */
.shoptimizer-mobile-menu ul li a:hover {
  color: #056FB7; /* bleu Mondialekte */
  padding-left: 6px; /* micro animation */
}

/* Lien actif */
.shoptimizer-mobile-menu ul li.current-menu-item a {
  color: #E1014D; /* rose Mondialekte */
  font-weight: 600;
}

/* ================================
   BOUTON CTA (ex: Boutique / Devis)
================================ */

/* Dernier lien = CTA */
.shoptimizer-mobile-menu ul li:last-child a {
  margin-top: 20px;
  background-color: #056FB7;
  color: #ffffff !important;
  text-align: center;
  border-radius: 6px;
  padding: 14px;
  font-weight: 600;
}

/* Hover CTA */
.shoptimizer-mobile-menu ul li:last-child a:hover {
  background-color: #E1014D;
  padding-left: 0; /* pas de décalage ici */
}

.wpcf7 input[readonly] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* Taille sélectionnée */
.taille-btn.active {
  background: #056FB7;
  color: #fff;
  border-color: #056FB7;
}

/* ===============================
   COULEURS (SWATCHES)
=============================== */
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.swatch.active {
  box-shadow: 0 0 0 3px #056FB7;
  transform: scale(1.15);
}

/* ===============================
   TAILLES
=============================== */
.tailles-options {
  display: flex;
  flex-wrap: wrap;        /* ✅ autorise le retour à la ligne */
  gap: 8px;
  max-width: 100%;        /* ✅ empêche le débordement */
  box-sizing: border-box;
}

.taille-btn {
  padding: 8px 14px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.taille-btn.active {
  background: #056FB7;
  color: #fff;
  border-color: #056FB7;
}

/* ===============================
   BOUTON BLOQUÉ
=============================== */
.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===============================
   ANIMATION MONDIALEKTE
=============================== */
.modele-choisir {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modele-choisir:not(.btn-disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ===============================
   MOBILE (TRÈS IMPORTANT)
=============================== */
@media (max-width: 768px) {

  .swatch {
    width: 32px;
    height: 32px;
  }

  .taille-btn {
    flex: 1;
    text-align: center;
    padding: 12px 0;
  }

}


/* ===============================
   RÉCAP SÉLECTION
=============================== */
.recap {
  border: 2px solid #056FB7;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  background: #f9fbff;
  font-family: Futura, sans-serif;
  animation: fadeInUp 0.4s ease;
}

.recap.hidden {
  display: none;
}

/* Animation douce */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   COULEURS & TAILLES SÉLECTIONNÉES
=============================== */
.swatch.active,
.taille-btn.active {
  outline: 3px solid #E1014D;
  transform: scale(1.1);
}

/* ===============================
   BOUTON BLOQUÉ
=============================== */
.modele-choisir.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ===============================
   MOBILE FRIENDLY
=============================== */
@media (max-width: 768px) {
  .swatch {
    width: 32px;
    height: 32px;
  }

  .taille-btn {
    padding: 10px 14px;
    font-size: 16px;
  }
}

/* OVERLAY */
#mondialekte-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* POPUP */
#mondialekte-popup {
  width: 420px;
  max-width: 90%;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  position: relative;
  animation: popupFade 0.4s ease;
}

/* TITRE */
#mondialekte-popup h2 {
  font-family: Futura, sans-serif;
  color: #056FB7;
  margin-bottom: 16px;
}

/* TEXTE */
#mondialekte-popup p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* BOUTON */
.popup-btn {
  display: inline-block;
  background: #E1014D;
  color: #fff;
  padding: 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(225,1,77,0.35);
}

/* BOUTON FERMER */
.popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: #999;
}

/* ANIMATION */
@keyframes popupFade {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
  #mondialekte-popup {
    padding: 24px;
  }
}

/* Base swatch */
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%; /* 👈 CERCLE */
  cursor: pointer;
  border: 2px solid #ddd;
}

/* BICOLORE (override du background classique) */
.swatch.bicolor {
  background: linear-gradient(
    45deg,
    var(--c1) 50%,
    var(--c2) 50%
  ) !important; /* 👈 IMPORTANT pour écraser --color */
}


/* Alignement horizontal des cercles de couleurs */
.modele-couleurs-swatches {
  display: flex;
  align-items: center;
  gap: 10px;              /* espace entre cercles */
  margin-top: 10px;
}

/* Cercle bicolore */
.swatch.bicolor {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%);
  border: 1px solid #ccc;
}


#hero-mondialekte .hero-precommande{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(225, 1, 77, 0.10); /* #E1014D en léger */
  border: 1px solid rgba(225, 1, 77, 0.25);
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.2;
}

#hero-mondialekte .hero-precommande strong{
  background: #E1014D;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.5px;
}

#hero-mondialekte .hero-reassurance{
  margin-top: 10px;
  opacity: 0.9;
  font-size: 14px;
}


#hero-mondialekte .hero-countdown{
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.95;
}

#hero-mondialekte #ml-countdown{
  font-weight: 700;
}

/* Badge Précommande */
.ml-preorder-badge{
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  background: #E1014D;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Sur la fiche produit : pas en absolute */
.ml-preorder-badge--single{
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 10px;
}

/* Assure que le conteneur produit accepte le "absolute" */
.woocommerce ul.products li.product{
  position: relative;
}


.real-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}



/* Popup wrapper */
.mlsq{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.mlsq[aria-hidden="false"]{ display:flex; }

.mlsq__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(2px);
}

/* GRAND CARRÉ */
.mlsq__card{
  position: relative;
  width: min(720px, 92vw);
  aspect-ratio: 1 / 1;              /* ✅ carré */
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 90px rgba(0,0,0,.38);
  border: 2px solid rgba(5,111,183,.25);
  display: grid;
  grid-template-rows: 48% 52%;
  transform: translateY(10px);
  opacity: 0;
  animation: mlsqIn .28s ease forwards;
}
@keyframes mlsqIn{ to { transform: translateY(0); opacity: 1; } }

.mlsq__close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  z-index: 5;
}

/* ✅ Fond IMAGE = bleu / overlay, différent du texte */
.mlsq__media{
  position: relative;
  background: #056FB7; /* Mondialekte bleu */
}
.mlsq__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.mlsq__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(5,111,183,.35), rgba(225,1,77,.25));
  pointer-events:none;
}

/* Petits éléments “carte postale” */
.mlsq__pill{
  position:absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(5,111,183,.30);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
}
.mlsq__stamp{
  position:absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  background: #E1014D; /* Mondialekte rose */
  color: #fff;
  padding: 9px 12px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ✅ Fond TEXTE = clair / papier (différent) */
.mlsq__content{
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(225,1,77,.10), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(5,111,183,.12), transparent 55%),
    #fffdf8; /* effet papier */
  padding: 18px 18px 16px;
}

.mlsq__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.mlsq__title{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.15;
  color: #0a0a0a;
}

.mlsq__text{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(0,0,0,.80);
}
.mlsq__text strong{
  color: rgba(0,0,0,.90);
}

.mlsq__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.mlsq__btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 950;
  letter-spacing: .2px;
}

.mlsq__btn--pink{
  background: #E1014D;
  color: #fff;
  box-shadow: 0 12px 30px rgba(225,1,77,.25);
}
.mlsq__btn--blue{
  background: #056FB7;
  color: #fff;
  box-shadow: 0 12px 30px rgba(5,111,183,.22);
}

.mlsq__foot{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .72;
}

/* Mobile : toujours carré, mais un peu plus petit et lisible */
@media (max-width: 420px){
  .mlsq__card{ width: 94vw; }
  .mlsq__title{ font-size: 20px; }
}

/* ===== CORRECTION CONTRASTE POPUP MONDIALEKTE ===== */

/* Texte principal toujours foncé */
.mlsq__content,
.mlsq__content p,
.mlsq__content h2{
  color:#0b0b0b;
}

/* Kicker */
.mlsq__kicker{
  color:#333;
}

/* Bouton rose */
.mlsq__btn--pink{
  background:#E1014D;
  color:#fff;
}

/* Bouton bleu */
.mlsq__btn--blue{
  background:#056FB7;
  color:#fff;
}

/* Empêche texte blanc sur fond clair */
.mlsq__content a{
  color:#0b0b0b;
}

/* Si bouton secondaire devient blanc */
.mlsq__btn{
  border:0;
}

/* Hover */
.mlsq__btn--pink:hover{
  background:#c8003f;
}

.mlsq__btn--blue:hover{
  background:#045a93;
}


/* =========================
   POPUP MOBILE FIX
========================= */

@media (max-width: 640px){

  .mlsq{
    padding:12px;
    align-items:center;
  }

  .mlsq__card{
    width:100%;
    max-width:420px;
    aspect-ratio:auto;
    height:auto;
    grid-template-rows:auto auto;
    border-radius:18px;
  }

  .mlsq__media{
    height:180px;
  }

  .mlsq__content{
    padding:18px 16px 20px;
  }

  .mlsq__title{
    font-size:18px;
    line-height:1.2;
  }

  .mlsq__text{
    font-size:14px;
  }

  /* BOUTONS EN COLONNE */
  .mlsq__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:16px;
  }

  .mlsq__btn{
    width:100%;
    padding:14px;
    font-size:15px;
    border-radius:12px;
  }

  /* Fermer plus visible */
  .mlsq__close{
    width:38px;
    height:38px;
    font-size:22px;
  }

}




/* Supprime le lien Shoptimizer "Request a Call Back" */
a.trigger {
  display: none !important;
}