@charset "UTF-8";
/*
Theme Name:   Major Group — Thème Enfant
Theme URI:    https://major-group.fr
Description:  Thème enfant de Hello Elementor — Charte graphique Major Group Premium
Author:       Major Group
Author URI:   https://major-group.fr
Template:     hello-elementor
Version:      1.0.0
Text Domain:  major-group-child
*/

/* ============================================================
   MAJOR GROUP PREMIUM — CHARTE GRAPHIQUE GLOBALE
   Thème enfant de Hello Elementor
   
   PALETTE :
     Navy profond  : #103b63
     Navy mid      : #0d1e2e
     Navy light    : #162d45
     Or             : #D6B160
     Or clair       : #e2c47a
     Or pâle        : #f0dfa8
     Perle          : #f8f6f1
     Orange brand   : #EA5B0C
     Orange clair   : #f07030
     Texte muted    : #6b7a8d
     Bordure douce  : #e8e4dc

   TYPOGRAPHIE :
     Titres  : 'Cormorant Garamond', Georgia, serif
     Corps   : 'Montserrat', 'Helvetica Neue', Arial, sans-serif
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   VARIABLES GLOBALES
   ══════════════════════════════════════════════════════════ */

:root {
  --mg-navy:          #103b63;
  --mg-navy-mid:      #0d1e2e;
  --mg-navy-light:    #162d45;
  --mg-gold:          #d6b160;
  --mg-gold-light:    #e2c47a;
  --mg-gold-pale:     #f0dfa8;
  --mg-pearl:         #f8f6f1;
  --mg-white:         #ffffff;
  --mg-brand:         #ea5b0c;
  --mg-brand-light:   #f07030;
  --mg-brand-pale:    rgba(234,91,12,0.12);
  --mg-text-muted:    #6b7a8d;
  --mg-border-soft:   #e8e4dc;
  --mg-font-serif:    'Cormorant Garamond', Georgia, serif;
  --mg-font-sans:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --mg-radius: 12px;
  
	/* Espacements */
  --mg-section-pad:  96px;
  --mg-container:    1280px;
  --mg-gutter:       48px;
}

/* ══════════════════════════════════════════════════════════
   RESET AND BASE
   ══════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--mg-font-sans); font-weight: 400; line-height: 1.7; overflow-x: hidden; }

/* Supprimer les border-radius par défaut d'Elementor pour les boutons */
.elementor-button { border-radius: 0 !important; }

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHIE
   ══════════════════════════════════════════════════════════ */

h1 em, h2 em, h3 em {color: var(--mg-gold);}

.elementor-button.elementor-size-md {
    padding: 15px 20px !important;
}


.mg-eyebrow {
  font-family: var(--mg-font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mg-brand);
  display: block;
  margin-bottom: 0.75rem;
}

.mg-section-heading {
  font-family: var(--mg-font-serif);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--mg-navy);
}
.mg-section-heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--mg-gold);
}
.mg-section-heading-light { color: white; }
.mg-section-heading-light em { color: var(--mg-gold-light); }

/* ══════════════════════════════════════════════════════════
   BOUTONS
   ══════════════════════════════════════════════════════════ */

.mg-btn-navy,
.elementor-button.mg-btn-navy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mg-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  background: var(--mg-navy);
  color: white !important;
  border: 1px solid var(--mg-navy);
  border-radius: 0 !important;
  transition: all 0.3s ease;
  text-decoration: none;
}
.mg-btn-navy:hover { background: var(--mg-navy-light); border-color: var(--mg-navy-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,27,42,0.2); }

.mg-btn-brand,
.elementor-button.mg-btn-brand {

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mg-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  background: var(--mg-brand);
  color: white !important;
  border: 1px solid var(--mg-brand);
  border-radius: 0 !important;
  transition: all 0.3s ease;
  text-decoration: none;
}
.mg-btn-brand:hover { background: var(--mg-brand-light); border-color: var(--mg-brand-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(234,91,12,0.3); }

.mg-btn-ghost-white,
.elementor-button.mg-btn-ghost-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mg-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  background: transparent;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 0 !important;
  transition: all 0.3s ease;
  text-decoration: none;
}
.mg-btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: white; }

.mg-btn-outline-dark,
.elementor-button.mg-btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mg-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  background: transparent;
  color: var(--mg-navy) !important;
  border: 1px solid var(--mg-navy);
  border-radius: 0 !important;
  transition: all 0.3s ease;
  text-decoration: none;
}
.mg-btn-outline-dark:hover { background: var(--mg-navy); color: white !important; }

/* ══════════════════════════════════════════════════════════
   ANIMATIONS AU SCROLL (REVEAL)
   ══════════════════════════════════════════════════════════ */

.mg-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1);
}
.mg-reveal.mg-visible { opacity: 1; transform: translateY(0); }

.mg-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1);
}
.mg-reveal-left.mg-visible { opacity: 1; transform: translateX(0); }

.mg-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1);
}
.mg-reveal-right.mg-visible { opacity: 1; transform: translateX(0); }

/* ══════════════════════════════════════════════════════════
   CARTES
   ══════════════════════════════════════════════════════════ */

/* Section marques */
.mg-marque-card {
  position: relative;
  overflow: hidden;
  min-height: 580px;
  cursor: pointer;
}
.mg-marque-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.23,1,0.32,1);
}
.mg-marque-card:hover .mg-marque-bg { transform: scale(1.07); }
.mg-marque-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,27,42,0.95) 0%, rgba(13,27,42,0.5) 50%, rgba(13,27,42,0.2) 100%);
}
.mg-marque-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; }
.mg-marque-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
.mg-marque-card:hover .mg-marque-desc { max-height: 120px; opacity: 1; }
.mg-marque-tag {
  font-family: var(--mg-font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.25rem 0.6rem;
  display: inline-block;
  margin: 0.15rem;
  transition: all 0.3s ease;
}
.mg-marque-card:hover .mg-marque-tag { border-color: var(--mg-brand); color: var(--mg-brand-light); }

/* Section service */
.mg-service-card {
  position: relative;
  padding: 2rem;
  transition: all 0.35s ease;
  border-right: 1px solid var(--mg-border-soft);
  border-bottom: 1px solid var(--mg-border-soft);
}
.mg-service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--mg-brand);
  transform: scaleX(0);
  transition: transform 0.35s ease;
}
.mg-service-card:hover { background: var(--mg-pearl); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(13,27,42,0.1); z-index: 1; }
.mg-service-card:hover::after { transform: scaleX(1); }
.mg-service-icon { color: var(--mg-brand); margin-bottom: 1.25rem; }
.mg-service-title { font-family: var(--mg-font-serif); font-size: 1.35rem; font-weight: 400; color: var(--mg-navy); margin-bottom: 0.75rem; }
.mg-service-desc { font-family: var(--mg-font-sans); font-size: 0.88rem; color: rgba(44,62,80,0.65); line-height: 1.8; margin-bottom: 1.25rem; }
.mg-service-link {
  font-family: var(--mg-font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-brand);
  text-decoration: none;
}
.mg-service-link:hover { letter-spacing: 0.18em; }

.mg-service-card span.elementor-icon {
    padding: 7px;
}

/* Section offres */
.mg-offre-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(234,91,12,0.25);
  backdrop-filter: blur(8px);
  transition: all 0.35s ease;
  overflow: hidden;
}
.mg-offre-card:hover { border-color: var(--mg-brand); transform: translateY(-4px); }
.mg-offre-img-wrap { position: relative; overflow: hidden; height: 220px; }
.mg-offre-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.mg-offre-card:hover .mg-offre-img { transform: scale(1.05); }
.mg-offre-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--mg-brand);
  color: white;
  font-family: var(--mg-font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

.mg-offre-card .elementor-image-box-content {
  padding: 0 40px;
}

.mg-offre-card a {
  margin-bottom: 40px;
}


.card-badge, .mg-offre-card figcaption.widget-image-caption.wp-caption-text {
  position: absolute; 
  top: 1rem; 
  left: 1rem; 
  display: inline-block; 
  font-family: var(--mg-font-sans); 
  font-size: 0.58rem; 
  font-weight: 600; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: white; 
  background: var(--mg-navy); 
  padding: 0.3rem 0.85rem;
}

.year-badge {
  font-family: var(--mg-font-sans); 
  font-size: 0.8rem; 
  font-weight: 200; 
  color: white; 
  font-style: italic;
  text-transform: none;
}

/* ── Section expertise : Icon Box items ──────────────────────── */
.mg-expertise-item.elementor-widget-icon-box {
  padding: 0;
  border: none;
  background: transparent;
}

.mg-expertise-item .elementor-icon-box-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.mg-expertise-item .elementor-icon-box-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(0, 56, 103, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.mg-expertise-item .elementor-icon-box-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mg-text);
  margin-bottom: 6px;
}

.mg-expertise-item .elementor-icon-box-description {
  font-size: 14px;
  color: var(--mg-muted);
  line-height: 1.7;
}

.mg-expertise-item span.elementor-icon {
    padding: 7px;
}

/* ── Image expertise (section expertise page accueil) ─────────── */
.mg-expertise-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Écosystème Major Group : cartes Icon Box ─────────────────── */
.mg-eco-card.elementor-widget-icon-box {
  padding: 0;
  border: none;
  background: transparent;
}

.mg-eco-card .elementor-icon-box-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.mg-eco-card .elementor-icon-box-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-eco-card .elementor-icon-box-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mg-white);
  margin-bottom: 4px;
}

.mg-eco-card .elementor-icon-box-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
}

/* Carte active (Tendance Voile) */
.mg-eco-card--active .elementor-icon-box-icon {
  opacity: 1;
}

.mg-eco-card--active .elementor-icon-box-title {
  color: var(--mg-gold);
}

.mg-eco-card--active .elementor-icon-box-description {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Placeholder vidéo interview ─────────────────────────────── */
.mg-video-placeholder .elementor-video-container {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.mg-video-placeholder .elementor-custom-embed-play i {
  color: var(--mg-white);
  font-size: 56px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.mg-video-placeholder .elementor-custom-embed-play:hover i {
  opacity: 1;
  color: var(--mg-orange);
}
.mg-video-placeholder__caption {
  font-family: var(--mg-font-sans, 'Montserrat', sans-serif);
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-top: 12px;
  display: block;
}


/* ── Cartes services (Icon Box) ──────────────────────────────── */
.mg-service-card.elementor-widget-icon-box {
  padding: 0;
  background: transparent;
  border: none;
}

.mg-service-card .elementor-icon-box-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.mg-service-card .elementor-icon-box-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: rgba(0, 56, 103, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-service-card .elementor-icon-box-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mg-text);
  margin-bottom: 8px;
}

.mg-service-card .elementor-icon-box-description {
  font-size: 14px;
  color: var(--mg-muted);
  line-height: 1.7;
}

/* ── Image Box modèles (page accueil + gamme) ────────────────── */
.mg-model-card.elementor-widget-image-box .elementor-image-box-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.mg-model-card.elementor-widget-image-box:hover .elementor-image-box-img img {
  transform: scale(1.04);
}

.mg-model-card.elementor-widget-image-box .elementor-image-box-content {
  padding: 20px 0 0;
}

.mg-model-card.elementor-widget-image-box .elementor-image-box-title {
  font-family: var(--mg-font-main);
  font-size: 20px;
  font-weight: 700;
  color: var(--mg-text);
  margin-bottom: 8px;
}

.mg-model-card.elementor-widget-image-box .elementor-image-box-title em {
  font-family: var(--mg-font-serif);
  font-style: italic;
  color: var(--mg-gold);
}

.mg-model-card.elementor-widget-image-box .elementor-image-box-description {
  font-size: 13px;
  color: var(--mg-muted);
  line-height: 1.65;
}



/* Section annonce bateau */

.elementor-column:has(.mg-boat-img) {
  background: #ffffff;
  border: 1px solid var(--mg-border-soft);
  border-radius: var(--mg-radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.elementor-column:has(.mg-boat-img):hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(28, 45, 74, 0.13);
  border-color: rgba(201, 168, 76, 0.35);
}

/* ── Image du bateau ── */
.mg-boat-img img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.5s ease !important;
}
.elementor-column:has(.mg-boat-img):hover .mg-boat-img img {
  transform: scale(1.05);
}

/* Padding interne de la partie texte */
.mg-boat-type,
.mg-boat-name,
.mg-boat-specs,
.mg-boat-price {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ══════════════════════════════════════════════════════════
   TABLEAU DES SPECS  (Capacité / Longueur / Puissance)
   ══════════════════════════════════════════════════════════ */
.mg-specs-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 16px !important;
}
.mg-specs-table td {
  width: 33.33% !important;
  text-align: center !important;
  background: var(--mg-pearl) !important;
  border-radius: 6px !important;
  padding: 8px 4px !important;
}
.mg-spec-label {
  display: block !important;
  font-family: var(--mg-font-sans) !important;
  font-size: 0.68rem !important;
  color: var(--mg-text-muted) !important;
  margin-bottom: 2px !important;
}
.mg-spec-val {
  display: block !important;
  font-family: var(--mg-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--mg-navy) !important;
}

/* ══════════════════════════════════════════════════════════
   LIGNE PRIX + CTA
   ══════════════════════════════════════════════════════════ */
.mg-boat-price {
  border-top: 1px solid var(--mg-border-soft) !important;
  padding-top: 14px !important;
  padding-bottom: 20px !important;
}
.mg-price-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}
.mg-price-from {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.75rem !important;
  color: var(--mg-text-muted) !important;
}
.mg-price-amount {
  font-family: var(--mg-font-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--mg-navy) !important;
}
.mg-price-cta {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--mg-navy) !important;
  text-decoration: none !important;
  margin-left: auto !important;
  transition: color 0.25s ease !important;
}
.mg-price-cta:hover {
  color: var(--mg-gold) !important;
}

/* Cartes modèles */
.mg-model-card {
  background: var(--mg-white);
  border: 1px solid var(--mg-border-soft);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.mg-model-card:hover {
  box-shadow: 0 8px 32px rgba(0, 56, 103, 0.12);
}

.mg-model-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.mg-model-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mg-model-card:hover .mg-model-card__image img {
  transform: scale(1.04);
}

.mg-model-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--mg-brand);
  color: var(--mg-white);
  font-family: var(--mg-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
}

.mg-model-card__body {
  padding: 24px;
}

.mg-model-card__title {
  font-family: var(--mg-font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--mg-navy);
  margin: 0 0 12px;
}

.mg-model-card__title em {
  font-family: var(--mg-font-serif);
  font-style: italic;
  color: var(--mg-gold);
}

.mg-model-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.mg-model-card__tag {
  font-family: var(--mg-font-sans);
  font-size: 12px;
  color: var(--mg-text-muted);
  padding: 4px 10px;
  background: #F4F6F8;
}

.mg-model-card__link {
  font-family: var(--mg-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--mg-navy);
  text-decoration: none;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--mg-navy);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

.mg-model-card__link:hover {
  color: var(--mg-brand);
  border-color: var(--mg-brand);
}

/* ── Tableaux caractéristiques ──────────────────────── */
.mg-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mg-font-sans);
  font-size: 13px;
}

.mg-specs-table td {
  padding: 10px 8px;
  border-top: 1px solid var(--mg-border-soft);
}

.mg-specs-table td:nth-child(odd) {
  color: var(--mg-text-muted);
}

.mg-specs-table td:nth-child(even) {
  color: var(--mg-navy);
  font-weight: 700;
}



/* ══════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   ══════════════════════════════════════════════════════════ */

/*
  STRUCTURE DU HEADER ELEMENTOR :
  .mg-header (container fixe, classe CSS à mettre sur le Container principal)
    ├── Container enfant 1 : top bar navy (toujours visible)
    └── Container enfant 2 : barre de navigation (transparente au départ)

  COMPORTEMENT :
  - En haut de page (scroll < 80px) :
      → top bar navy masquée (height:0, overflow:hidden)
      → barre nav : fond transparent, liens blancs
  - Après 80px de scroll (classe .mg-scrolled ajoutée par JS) :
      → top bar navy réapparaît
      → barre nav : fond navy #103b63 opaque + blur

  CLASSES À APPLIQUER DANS ELEMENTOR :
  - Container principal du header → CSS Class : mg-header
  - Container top bar (1er enfant) → CSS Class : mg-topbar
  - Container nav (2e enfant) → CSS Class : mg-navbar
*/

/* Suppression du box-shadow Elementor sur le container header */
.mg-header,
.elementor-element.mg-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  box-shadow: none !important;
  transition: background 0.4s ease, border-bottom 0.4s ease;
  background: transparent !important;
}

/* Top bar : visible et transparente par défaut (en haut de page) */
.mg-header .mg-topbar {
  background: transparent !important;
  transition: background 0.4s ease;
}

/* Correction décalage : le sticky Elementor Pro ajoute un espace en haut
   quand le header est en position fixed. On supprime ce padding parasite. */
.admin-bar .mg-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .mg-header { top: 46px !important; }
}

/* Barre de navigation : transparente par défaut */
.mg-header .mg-navbar {
  background: transparent !important;
  transition: background 0.4s ease;
}

/* ── État scrollé (classe ajoutée par JS après 80px) ── */
.mg-header.mg-scrolled {
  background: rgba(16,59,99,0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(214,177,96,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18) !important;
}

/* Top bar et navbar : fond transparent après scroll (le fond navy vient du mg-header) */
.mg-header.mg-scrolled .mg-topbar,
.mg-header.mg-scrolled .mg-navbar {
  background: transparent !important;
}

/* ── Liens de navigation ── */
.mg-nav-link {
  font-family: var(--mg-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
.mg-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--mg-brand);
  transition: width 0.3s ease;
}
.mg-nav-link:hover { color: white !important; }
.mg-nav-link:hover::after { width: 100%; }

/* ── Couleur des liens nav Elementor (widget Nav Menu) ── */
/* Forcer les liens du menu Elementor en blanc quand le header est transparent */
/* IMPORTANT : on exclut .elementor-nav-menu--dropdown pour ne pas écraser
   la couleur du menu déroulant responsive (fond blanc) avec du texte blanc */
.mg-header .elementor-nav-menu--main .elementor-item,
.mg-header .elementor-nav-menu a:not(.elementor-nav-menu--dropdown a) {
  color: rgba(255,255,255,0.9) !important;
  font-family: var(--mg-font-sans) !important;
}
/* Indicateur actif */
.mg-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--mg-gold) !important;
}

/* ── Menu responsive (dropdown mobile/tablette) : texte en navy sur fond blanc ── */
/* FIX 2 — Texte blanc dans le menu mobile :
   La règle ci-dessus force tous les liens en blanc (pour le header transparent).
   Mais le dropdown mobile a un fond blanc -> texte blanc sur blanc = invisible.
   On force ici le texte en navy (#103b63) pour le dropdown responsive. */
.mg-header .elementor-nav-menu--dropdown a,
.mg-header .elementor-nav-menu--dropdown .elementor-item,
.mg-header .elementor-nav-menu--dropdown .elementor-sub-item {
  color: var(--mg-navy) !important;
  font-family: var(--mg-font-sans) !important;
}
.mg-header .elementor-nav-menu--dropdown a:hover,
.mg-header .elementor-nav-menu--dropdown .elementor-item:hover,
.mg-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.mg-header .elementor-nav-menu--dropdown .elementor-item.highlighted {
  color: var(--mg-brand) !important;
}

/* ── Hero : passe sous le header fixed ── */
/*
  SOLUTION ELEMENTOR :
  Dans Elementor, sur le Container de la section Hero,
  ajouter la classe CSS : mg-hero-section
  ⇒ Le hero couvrira 100vh et sera positionné sous le header.

  Si un espace blanc persiste entre le header et le hero,
  vérifier que le thème Hello Elementor n'ajoute pas de padding-top
  sur le body ou #content. Ces règles ci-dessous le corrigent.
*/
/* FIX 1 — Zone blanche sous le slider Revolution :
   Le slider Revolution a une hauteur fixe (ex. 900px) mais la section hero
   a min-height: 100vh dans Elementor. Quand le viewport dépasse la hauteur
   du slider, un espace blanc apparaît en dessous.
   On annule le min-height Elementor pour que la section prenne exactement
   la hauteur du slider. Le slider gère lui-même sa hauteur responsive.
*/
.mg-hero-section,
.elementor-element.mg-hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
}

/* Suppression du padding-top automatique de Hello Elementor */
body.elementor-page .page-content,
body.elementor-page #content,
body.elementor-page .site-content,
body.page-template-elementor_header_footer #content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   ANCHOR NAV
   ══════════════════════════════════════════════════════════ */

.mg-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 4px;
}
.mg-anchor-link {
  font-family: var(--mg-font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  padding: 7px 18px !important;
  transition: background .2s, color .2s, border-color .2s !important;
}
.mg-anchor-link:hover {
  background: var(--mg-brand) !important;
  border-color: var(--mg-brand) !important;
  color: #fff !important;
}
.mg-anchor-link.mg-anchor-active {
  background: var(--mg-brand) !important;
  border-color: var(--mg-brand) !important;
  color: #fff !important;
}

.mg-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(249,115,22,0.20) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(249,115,22,0.35) !important;
  color: #fed7aa !important;
  font-family: 'Source Sans 3', samg-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  width: fit-content !important;
}


/* ══════════════════════════════════════════════════════════
   NOTRE HERITAGE
   ══════════════════════════════════════════════════════════ */

/* ── Section Notre Héritage : textes lisibles sur fond sombre ── */
/*
  La section héritage a un fond navy sombre (#0d1e2e).
  Les textes Elementor héritent parfois de couleurs sombres (navy sur navy).
  On force les couleurs correctes pour tous les éléments de cette section.
*/
.mg-heritage-section .elementor-heading-title,
.mg-heritage-section h1,
.mg-heritage-section h2,
.mg-heritage-section h3 {
  color: white !important;
}
.mg-heritage-section h2 em,
.mg-heritage-section h3 em {
  color: var(--mg-gold) !important;
  font-style: italic;
}
.mg-heritage-section .elementor-widget-text-editor p,
.mg-heritage-section .elementor-widget-text-editor {
  color: rgba(255,255,255,0.75) !important;
}
.mg-heritage-section .mg-eyebrow {
  color: var(--mg-brand) !important;
}
/* Icônes et labels de la liste d'équipe */
.mg-heritage-section .elementor-icon-list-text {
  color: rgba(255,255,255,0.85) !important;
}
.mg-heritage-section .elementor-icon-list-icon svg,
.mg-heritage-section .elementor-icon-list-icon i {
  color: var(--mg-brand) !important;
  fill: var(--mg-brand) !important;
}

/* ══════════════════════════════════════════════════════════
   FORMULAIRES
   ══════════════════════════════════════════════════════════ */

.mg-input {
  font-family: var(--mg-font-sans);
  font-size: 0.9rem;
  color: var(--mg-navy);
  background: white;
  border: 1px solid var(--mg-border-soft);
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.mg-input:focus { border-color: var(--mg-brand); box-shadow: 0 0 0 3px var(--mg-brand-pale); }
.mg-input::placeholder { color: rgba(107,124,147,0.45); }

/* ============================================================
   MAJOR GROUP — FORMULAIRES (section Coordonnées + Newsletter VIP)
   Style inspiré d'Arcadie Plaisance (arcadieplaisance.com/static/club-privilege/)
   
   CLASSES À APPLIQUER DANS ELEMENTOR :
   - Container de la section Contact    → CSS Class : mg-contact-section
   - Widget Form Elementor (Contact)    → CSS Class : mg-form-contact
   - Container de la section Newsletter → mg-newsletter-section (déjà sur la section)
   - Widget Form Elementor (Newsletter) → CSS Class : mg-form-newsletter
   ============================================================ */


/* ── Section coordonnées / contact ── */
.mg-contact-section {
  background: var(--mg-pearl) !important;
}

.mg-form-contact .elementor-form {
  background: #ffffff;
  border: 1px solid var(--mg-border-soft);
  border-top: 3px solid var(--mg-gold);
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 32px rgba(16, 59, 99, 0.07);
}

.mg-form-contact .elementor-field-label {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--mg-navy) !important;
  margin-bottom: 0.4rem !important;
  display: block;
}

.mg-form-contact .elementor-field-textual,
.mg-form-contact input[type="text"],
.mg-form-contact input[type="email"],
.mg-form-contact input[type="tel"],
.mg-form-contact textarea {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.88rem !important;
  color: var(--mg-navy) !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1.5px solid var(--mg-border-soft) !important;
  border-radius: 0 !important;
  padding: 0.65rem 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
}

.mg-form-contact .elementor-field-textual:focus,
.mg-form-contact input[type="text"]:focus,
.mg-form-contact input[type="email"]:focus,
.mg-form-contact input[type="tel"]:focus,
.mg-form-contact textarea:focus {
  border-bottom-color: var(--mg-gold) !important;
  box-shadow: none !important;
  outline: none !important;
}

.mg-form-contact .elementor-field-textual::placeholder,
.mg-form-contact input::placeholder,
.mg-form-contact textarea::placeholder {
  color: rgba(107, 124, 147, 0.5) !important;
  font-style: italic;
}

.mg-form-contact select,
.mg-form-contact .elementor-field-select {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.88rem !important;
  color: var(--mg-navy) !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1.5px solid var(--mg-border-soft) !important;
  border-radius: 0 !important;
  padding: 0.65rem 0 !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  width: 100% !important;
}

.mg-form-contact select:focus {
  border-bottom-color: var(--mg-gold) !important;
  box-shadow: none !important;
}

.mg-form-contact textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

.mg-form-contact .elementor-field-type-acceptance {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  background: rgba(16, 59, 99, 0.04) !important;
  border: 1px solid rgba(16, 59, 99, 0.12) !important;
  padding: 1rem !important;
  margin-top: 0.5rem !important;
}

.mg-form-contact .elementor-field-type-acceptance input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin-top: 2px !important;
  accent-color: var(--mg-navy) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.mg-form-contact .elementor-field-type-acceptance label,
.mg-form-contact .elementor-field-type-acceptance .elementor-field-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mg-navy) !important;
  line-height: 1.5 !important;
}

.mg-form-contact .elementor-button,
.mg-form-contact button[type="submit"] {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  background: var(--mg-navy) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.1rem 2.5rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.25s ease, transform 0.15s ease !important;
  margin-top: 0.5rem !important;
}

.mg-form-contact .elementor-button:hover,
.mg-form-contact button[type="submit"]:hover {
  background: var(--mg-navy-light) !important;
  transform: translateY(-2px) !important;
}

.mg-form-contact .elementor-message.elementor-message-success {
  background: rgba(16, 59, 99, 0.06) !important;
  border-left: 3px solid var(--mg-gold) !important;
  color: var(--mg-navy) !important;
  font-family: var(--mg-font-sans) !important;
  font-size: 0.85rem !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 !important;
}

.mg-form-contact .elementor-message.elementor-message-danger {
  background: rgba(234, 91, 12, 0.06) !important;
  border-left: 3px solid var(--mg-brand) !important;
  color: var(--mg-brand) !important;
  font-family: var(--mg-font-sans) !important;
  font-size: 0.85rem !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 !important;
}

/* ── Section newsletter VIP ── */

/* Wrapper du formulaire : on empile champ+bouton puis confidentialité */
.mg-form-newsletter .elementor-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ligne champ + bouton + case à cocher :
   - champ et bouton sur la première ligne (collés)
   - case à cocher forcée en dessous via order */
.mg-form-newsletter .elementor-form-fields-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  align-items: stretch !important;
}

/* Champ email : fond légèrement plus clair que la section */
.mg-form-newsletter .elementor-field-group:not(.elementor-field-type-submit):not(.elementor-field-type-acceptance) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-right: none !important;
}

.mg-form-newsletter .elementor-field-textual,
.mg-form-newsletter input[type="email"],
.mg-form-newsletter input[type="text"] {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.1rem 1.5rem !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  transition: background 0.2s ease !important;
}

.mg-form-newsletter .elementor-field-textual:focus,
.mg-form-newsletter input[type="email"]:focus {
  background: rgba(255, 255, 255, 0.22) !important;
  outline: none !important;
  box-shadow: none !important;
}

.mg-form-newsletter .elementor-field-textual::placeholder,
.mg-form-newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  font-style: normal !important;
}

/* Groupe bouton : pas de flex-grow, taille fixe, sur la même ligne que le champ */
.mg-form-newsletter .elementor-field-group.elementor-field-type-submit {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 2 !important;
}

/* Bouton S'inscrire : navy profond, collé au champ */
.mg-form-newsletter .elementor-button,
.mg-form-newsletter button[type="submit"] {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  background: var(--mg-navy) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.1rem 2rem !important;
  height: 100% !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: background 0.25s ease !important;
  margin: 0 !important;
}

.mg-form-newsletter .elementor-button:hover,
.mg-form-newsletter button[type="submit"]:hover {
  background: var(--mg-navy-light) !important;
}

/* Case à cocher RGPD : forcée EN DESSOUS via order:3 et flex-basis:100% */
.mg-form-newsletter .elementor-field-type-acceptance {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  order: 3 !important;
  margin-top: 0.75rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.mg-form-newsletter .elementor-field-type-acceptance input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  margin-top: 3px !important;
  accent-color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}

.mg-form-newsletter .elementor-field-type-acceptance label,
.mg-form-newsletter .elementor-field-type-acceptance .elementor-field-label {
  font-family: var(--mg-font-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.5 !important;
}

/* Checklist*/
.mg-checklist {
  gap: 8px 24px;
  padding: 0;
  list-style: none;
}
.mg-checklist__item {
  font-family: var(--mg-font-sans, 'Montserrat', sans-serif);
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--mg-text-muted, #6b7a8d);
  padding-left: 14px;
  position: relative;
  line-height: 1.6;
}
.mg-checklist__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mg-brand, #ea5b0c);
}

/* Témoignages */
.mg-temoignage-card  .elementor-testimonial {
  background: #ffffff;
  padding: 36px 32px;
  border-top: 3px solid var(--mg-gold, #d6b160);
}
.mg-temoignage-card .elementor-testimonial:before {
  content:"★★★★★";
  font-size: 1.1rem;
  color: var(--mg-gold, #d6b160);
  margin-bottom: 16px;
  display: block;
  position: absolute;
  top:-10px;
}

.mg-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.mg-brand-tag {
  background: var(--mg-pearl, #f8f6f1);
  border: 1px solid var(--mg-border-soft, #e8e4dc);
  padding: 6px 14px;
  font-family: var(--mg-font-sans, 'Montserrat', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mg-navy, #103b63);
}

footer a.copyright {
    color: #fff;
}

/* ══════════════════════════════════════════════════════
   SECTION "NOTRE ÉCOSYSTÈME" — group-section
   À coller dans : Apparence > Personnaliser > CSS additionnel
   OU dans le champ "Custom CSS" de la page Elementor (onglet Avancé)
   ══════════════════════════════════════════════════════ */

.entity-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  transition: all var(--transition);
  cursor: default;
}

.entity-card:hover {
  border-color: var(--mg-brand);
  background: rgba(232, 96, 10, 0.08);
  transform: translateX(6px);
}

.entity-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--mg-brand);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.entity-info {
  flex: 1;
}

.entity-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mg-white);
}

.entity-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  line-height: 1.4;
}

/* Badge "Vous êtes ici" */
.entity-badge {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  display: table-cell;
}
.entity-badge.active {
  background: transparent;
  color: var(--mg-white);
  background: rgba(255,255,255,0.1); 
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Lien CTA "Découvrir →" */
.entity-cta {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(234, 91, 12, 0.25);
  border: 1px solid rgba(234, 91, 12, 0.25);
  color: var(--mg-white) !important;
  text-decoration: none !important;
  transition: background var(--transition);
  display: table-cell;
  align-items: center;
  white-space: nowrap;
}
.entity-cta:hover {
  background: var(--mg-brand);
  color: var(--mg-white) !important;
  border: var(--mg-brand);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --mg-section-pad: 72px;
    --mg-gutter: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --mg-section-pad: 56px;
    --mg-gutter: 20px;
  }

  /* Grille modèles : 1 colonne sur mobile */
  .mg-models-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  :root {
    --mg-section-pad: 40px;
    --mg-gutter: 16px;
  }
}


@media (max-width: 600px) {
  .mg-form-newsletter .elementor-field-group:not(.elementor-field-type-submit):not(.elementor-field-type-acceptance) {
    flex: 1 1 100% !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
  }
  .mg-form-newsletter .elementor-field-group.elementor-field-type-submit {
    flex: 1 1 100% !important;
  }
  .mg-form-newsletter .elementor-button,
  .mg-form-newsletter button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .elementor-column:has(.mg-boat-img) {
    margin-bottom: 24px !important;
  }
  .mg-boat-img img {
    height: 200px !important;
  }
}

@media (max-width: 768px) {
  .mg-section-heading { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .mg-marque-card { min-height: 420px; }

  /* Top bar masquée sur mobile (espace insuffisant) */
  .mg-header .mg-topbar { display: none !important; }
}

@media (min-width: 1025px) {
  .mg-section-heading { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .mg-marque-card { min-height: 420px; }

  /* Top bar masquée sur mobile (espace insuffisant) */
  .mg-header .mg-topbar { display: none !important; }
}

@media (max-width: 900px) {
  .group-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 900px) {
  .group-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Les colonnes Elementor passent en 100% automatiquement sur mobile,
     le CSS ci-dessous force le gap vertical */
  .group-section .elementor-inner-section {
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .entity-badge {
    display: none;
  }
  .entity-card {
    flex-wrap: wrap;
  }
  .entity-cta {
    margin-top: 8px;
  }
}