/*
Theme Name: MGP+ Child
Theme URI: https://mgp-plus.sn
Description: Thème enfant Hello Elementor pour La Maison du GP (MGP+) — service de livraison de colis au Sénégal. Reproduit fidèlement la charte du site Replit : police Inter, vert profond + accent rouge, cartes très arrondies et ombres douces.
Author: Optileads
Template: hello-elementor
Version: 1.0.0
Text Domain: mgp-child
*/

/* =========================================================================
   CHARTE MGP+ — Variables globales (reprises fidèlement du projet Replit)
   Primaire vert #166534 · Accent rouge #DC2626 · Fond crème
   ========================================================================= */
:root {
  /* Couleurs — charte AFRI-EXPRESS GROUP (extraites du logo : bleu marine + orange) */
  --mgp-primary: #022D71;                 /* bleu marine profond (carte Afrique / texte) */
  --mgp-primary-hover: #001F52;
  --mgp-primary-fg: #ffffff;
  --mgp-accent: #FD7107;                  /* orange (flèche ascendante) */
  --mgp-accent-hover: #D55E00;
  --mgp-accent-fg: #ffffff;
  --mgp-background: #F8FAFD;              /* blanc légèrement bleuté */
  --mgp-foreground: #0A1B3D;              /* bleu marine très foncé (texte) */
  --mgp-muted: #EEF2FB;
  --mgp-muted-fg: #5A6B8C;
  --mgp-secondary: #EEF2FB;
  --mgp-border: #D6DEEC;
  --mgp-card: #ffffff;
  --mgp-whatsapp: #25D366;

  /* Rayons (base 0.625rem = 10px, cartes arrondies rounded-3xl = 24px) */
  --mgp-radius: 0.625rem;
  --mgp-radius-xl: 1rem;
  --mgp-radius-2xl: 1.25rem;
  --mgp-radius-3xl: 1.5rem;      /* cartes principales */
  --mgp-radius-full: 9999px;     /* boutons pilule / badges */

  /* Ombres douces (teintées de bleu marine, cohérentes avec la charte) */
  --mgp-shadow-sm: 0px 1px 2px 0px hsl(221 45% 15% / 0.06), 0px 1px 2px -1px hsl(221 45% 15% / 0.06);
  --mgp-shadow-md: 0px 4px 8px 0px hsl(221 45% 15% / 0.08), 0px 2px 4px -1px hsl(221 45% 15% / 0.06);
  --mgp-shadow-lg: 0px 10px 15px -3px hsl(221 45% 15% / 0.10), 0px 4px 6px -2px hsl(221 45% 15% / 0.05);
  --mgp-shadow-xl: 0px 20px 25px -5px hsl(221 45% 15% / 0.12), 0px 8px 10px -5px hsl(221 45% 15% / 0.05);

  /* Typographie */
  --mgp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========================================================================
   Base — police Inter + fond crème sur tout le site
   ========================================================================= */
body,
button,
input,
select,
textarea {
  font-family: var(--mgp-font-sans);
}

body {
  background-color: var(--mgp-background);
  color: var(--mgp-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mgp-font-sans);
  color: var(--mgp-foreground);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Titres extra-gras verts façon maquette (font-extrabold text-primary) */
.mgp-title,
h1.mgp-title {
  color: var(--mgp-primary);
  font-weight: 800;
}

a { color: var(--mgp-primary); }
a:hover { color: var(--mgp-accent); }

/* =========================================================================
   Classes utilitaires réutilisables (à appeler dans Elementor)
   ========================================================================= */
.mgp-text-primary { color: var(--mgp-primary) !important; }
.mgp-text-accent  { color: var(--mgp-accent) !important; }
.mgp-bg-primary   { background-color: var(--mgp-primary) !important; color: var(--mgp-primary-fg) !important; }
.mgp-bg-accent    { background-color: var(--mgp-accent) !important; color: var(--mgp-accent-fg) !important; }
.mgp-bg-cream     { background-color: var(--mgp-background) !important; }
.mgp-bg-secondary { background-color: var(--mgp-secondary) !important; }

/* Carte arrondie standard (rounded-3xl + ombre douce) */
.mgp-card {
  background: var(--mgp-card);
  border-radius: var(--mgp-radius-3xl);
  box-shadow: var(--mgp-shadow-lg);
  border: 0;
  overflow: hidden;
}

/* Boutons — reprennent le style plein / pilule de la maquette */
.mgp-btn,
a.mgp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: var(--mgp-radius-xl);
  padding: 0.9rem 1.75rem;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
  text-decoration: none;
  line-height: 1;
}
.mgp-btn:hover { transform: translateY(-1px); }

.mgp-btn-primary { background: var(--mgp-primary); color: var(--mgp-primary-fg) !important; }
.mgp-btn-primary:hover { background: var(--mgp-primary-hover); color: #fff !important; }

.mgp-btn-accent { background: var(--mgp-accent); color: var(--mgp-accent-fg) !important; }
.mgp-btn-accent:hover { background: var(--mgp-accent-hover); color: #fff !important; }

/* Pilule / bouton contour */
.mgp-btn-outline {
  background: transparent;
  color: var(--mgp-primary) !important;
  border: 2px solid var(--mgp-primary);
  border-radius: var(--mgp-radius-full);
}
.mgp-btn-outline:hover { background: var(--mgp-primary); color: #fff !important; }

/* Badge pilule */
.mgp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--mgp-radius-full);
  background: var(--mgp-secondary);
  color: var(--mgp-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* =========================================================================
   Harmonisation des widgets Elementor avec la charte
   ========================================================================= */
/* Boutons Elementor : coins arrondis + transition par défaut */
.elementor-button {
  border-radius: var(--mgp-radius-xl);
  font-weight: 600;
  transition: background-color .2s ease, transform .15s ease;
}

/* Champs de formulaire Elementor : fond doux, coins arrondis (façon maquette) */
.elementor-field-group .elementor-field,
.elementor-field-textual {
  border-radius: var(--mgp-radius-xl) !important;
  background-color: hsl(221 40% 95% / 0.5);
  border: 1px solid transparent !important;
  min-height: 3rem;
}
.elementor-field-group .elementor-field:focus,
.elementor-field-textual:focus {
  border-color: var(--mgp-primary) !important;
  background-color: #fff;
  box-shadow: 0 0 0 2px hsl(221 96% 23% / 0.15);
}

/* =========================================================================
   En-tête : compacité et lisibilité
   ========================================================================= */
/* Le CTA du header ne doit jamais se couper sur deux lignes : cela double
   la hauteur du bouton, donc celle de tout l'en-tête. */
[data-elementor-type="header"] .elementor-button,
[data-elementor-type="header"] .elementor-button-text {
	white-space: nowrap;
}

/* =========================================================================
   En-tête « intelligent » : fin, se cache en descendant, réapparaît en
   remontant.
   NB technique : Elementor pilote le padding du conteneur via des variables
   CSS (--padding-block-*) et le sticky via `top:0` inline. On agit donc sur
   ces mêmes leviers plutôt que sur `padding`/`transform` (qu'il surcharge).
   ========================================================================= */
/* Sticky maison porté par le WRAPPER de l'en-tête (le sticky Elementor est
   désactivé côté gabarit car il surcharge transform/top en inline).
   Le sticky doit être sur le wrapper, pas sur le conteneur interne, pour
   disposer de la course de défilement de la page. */
[data-elementor-type="header"] {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: transform .35s ease;
	will-change: transform;
}
#mgp-header {
	transition: box-shadow .28s ease;
}
#mgp-header .elementor-widget-image img {
	transition: max-width .28s ease;
}

/* Compact dès qu'on a défilé un peu : en-tête nettement plus fin. */
body.mgp-head-scrolled #mgp-header {
	--padding-block-start: 5px !important;
	--padding-block-end: 5px !important;
	box-shadow: 0 2px 14px rgba(15, 46, 26, 0.10);
}
body.mgp-head-scrolled #mgp-header .e-con-inner {
	--padding-block-start: 0px !important;
	--padding-block-end: 0px !important;
}
body.mgp-head-scrolled #mgp-header .elementor-widget-image img {
	max-width: 100px;
}

/* Masqué : la translation est posée en inline sur le wrapper par le JS
   (voir mgp-frontend.js). La transition ci-dessus l'anime en douceur. */

/* Ligne de menu resserrée : évite un en-tête inutilement haut. */
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item {
	line-height: 1.3;
}

/* --- Largeurs intermédiaires : garder le menu sur UNE ligne ---
   !important nécessaire : le CSS inline d'Elementor (padding/typo du menu) a
   une spécificité plus forte que nos sélecteurs. */
@media (max-width: 1200px) {
	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item {
		padding-left: 8px !important;
		padding-right: 8px !important;
		font-size: 14.5px !important;
	}
}

/* --- Sous le point de bascule (burger) : en-tête compact, logo + burger
   sur UNE seule ligne (logo à gauche, burger à droite). --- */
@media (max-width: 1024px) {
	/* Rangée unique, jamais d'empilement. */
	[data-elementor-type="header"] .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		gap: 12px !important;
	}
	/* Tous les blocs directs : largeur naturelle, ne grandissent pas, pas de padding vertical. */
	[data-elementor-type="header"] .e-con-inner > * {
		flex: 0 0 auto !important;
		width: auto !important;
		--width: auto !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		align-self: center !important;
	}
	/* On masque réseaux sociaux + CTA (accessibles via le menu déroulant + footer). */
	[data-elementor-type="header"] .e-con-inner > .e-con:last-child {
		display: none !important;
	}
	/* Bloc burger : poussé tout à droite. */
	[data-elementor-type="header"] .e-con-inner > .e-con:nth-child(2) {
		margin-left: auto !important;
		justify-content: flex-end !important;
	}
	/* Logo : hauteur maîtrisée. */
	[data-elementor-type="header"] .elementor-widget-image img {
		max-width: 120px !important;
	}
	/* En-tête resserré sur mobile. */
	[data-elementor-type="header"] > .e-con {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	/* Burger bien centré verticalement dans sa zone tactile. */
	[data-elementor-type="header"] .elementor-menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	/* Le bloc qui contient le burger se réduit à sa taille réelle. */
	[data-elementor-type="header"] .e-con-inner > .e-con:nth-child(2) {
		flex: 0 0 auto !important;
	}
	/* On neutralise le positionnement des conteneurs intermédiaires (widget
	   nav-menu ~33px, bloc burger, inner) pour que le déroulant s'ancre sur
	   l'EN-TÊTE COMPLET et s'affiche en pleine largeur. */
	[data-elementor-type="header"] > .e-con { position: relative !important; }
	[data-elementor-type="header"] .e-con-inner,
	[data-elementor-type="header"] .e-con-inner > .e-con:nth-child(2),
	[data-elementor-type="header"] .elementor-widget-nav-menu {
		position: static !important;
	}
	/* Menu déroulant : hors flux, pleine largeur sous l'en-tête. */
	[data-elementor-type="header"] .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		box-shadow: 0 12px 24px rgba(15,46,26,.14);
	}
}

/* =========================================================================
   Bouton WhatsApp flottant (fixe en bas à droite)
   ========================================================================= */
.mgp-whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--mgp-radius-full);
  background: var(--mgp-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mgp-shadow-xl);
  transition: transform .2s ease;
}
.mgp-whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.mgp-whatsapp-float svg { width: 2rem; height: 2rem; }

/* =========================================================================
   Bouton « retour en haut » — empilé AU-DESSUS du WhatsApp, jamais dessus.
   WhatsApp : bottom 1.25rem, hauteur 3.75rem. On place celui-ci juste au-dessus.
   ========================================================================= */
.mgp-scroll-top {
	position: fixed;
	right: 1.25rem;
	bottom: calc(1.25rem + 3.75rem + 0.75rem); /* au-dessus du WhatsApp + espace */
	z-index: 9998;
	width: 3.25rem;
	height: 3.25rem;
	border: 0;
	border-radius: var(--mgp-radius-full);
	background: var(--mgp-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--mgp-shadow-lg);
	/* Masqué par défaut : n'apparaît qu'après un défilement. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, background-color .2s ease, visibility .25s;
}
.mgp-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mgp-scroll-top:hover { background: var(--mgp-primary-hover); transform: translateY(-2px); }
.mgp-scroll-top svg { width: 1.5rem; height: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
	[data-elementor-type="header"] > .e-con,
	.mgp-scroll-top { transition: none; }
}

/* =========================================================================
   Animations douces au chargement (façon Framer Motion fade/slide)
   ========================================================================= */
@keyframes mgpFadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mgp-animate-in { animation: mgpFadeInUp .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  .mgp-animate-in { animation: none; }
}

/* =========================================================================
   Garde-fou : ne JAMAIS laisser un élément Elementor masqué de façon
   permanente. Si le JS d'animation d'entrée ne se déclenche pas, le contenu
   doit rester visible (accessibilité + robustesse).
   ========================================================================= */
.elementor-invisible { visibility: visible !important; }

/* =========================================================================
   QUICK WINS UX MOBILE (audit) — appliqués sous 767px sauf mention.
   ========================================================================= */
@media (max-width: 767px) {

	/* --- QW1 : titres responsives (H1/H2 mesurés à 46–52px = trop grands) --- */
	[data-elementor-type="wp-page"] h1,
	[data-elementor-type="wp-page"] .elementor-heading-title {
		line-height: 1.2 !important;
		word-break: normal;
		overflow-wrap: anywhere;
	}
	[data-elementor-type="wp-page"] h1,
	[data-elementor-type="wp-page"] h1.elementor-heading-title {
		font-size: clamp(28px, 8.5vw, 34px) !important;
	}
	[data-elementor-type="wp-page"] h2.elementor-heading-title {
		font-size: clamp(23px, 6.5vw, 28px) !important;
	}

	/* --- QW3 : zones tactiles ≥ 44px --- */
	.elementor-button {
		min-height: 44px;
	}
	/* Liens-boutons Elementor (variante « lien », mesurés à ~15px) */
	.elementor-widget-button .elementor-button.elementor-button-link,
	.elementor-button[class*="link"] {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	/* Icônes sociales (mesurées à 35px) → cible 44px */
	.elementor-social-icons-wrapper .elementor-icon.elementor-social-icon {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
		font-size: 17px;
	}
	/* Liens de menu : cible tactile confortable */
	.elementor-nav-menu--dropdown a.elementor-item {
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	/* --- QW4 : submits de formulaires en pleine largeur --- */
	.elementor-form .elementor-button,
	.mgp-estimateur-form button,
	.mgp-suivi-form button {
		width: 100% !important;
	}
	/* Le champ + bouton du suivi passent en colonne pleine largeur */
	.mgp-suivi-form input { flex: 1 1 100%; }

	/* --- QW5 : texte de détail 13px → 15px (lisibilité) --- */
	.mgp-feats li,
	.mgp-grille-note,
	.mgp-step-date,
	.mgp-step-note,
	.mgp-suivi-hint,
	.elementor-widget-text-editor { font-size: 15px; }

	/* Dégager le bas de page : les 2 boutons flottants ne recouvrent rien. */
	[data-elementor-type="footer"] { padding-bottom: 84px; }
}

/* QW2 — CTA « Demander un devis » injecté en tête du menu burger mobile. */
.mgp-menu-cta-wrap { padding: 10px 16px 6px; }
.mgp-menu-cta {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 9999px;
	background: var(--mgp-accent);
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}
.mgp-menu-cta:hover { background: var(--mgp-accent-hover); color: #fff !important; }

/* =========================================================================
   Barre d'action fixe en bas d'écran — MOBILE UNIQUEMENT (audit CRO).
   Devis + Suivi toujours accessibles au pouce.
   ========================================================================= */
.mgp-action-bar { display: none; }

@media (max-width: 767px) {
	.mgp-action-bar {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9997;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 -4px 18px rgba(15, 46, 26, 0.12);
		border-top: 1px solid rgba(20, 100, 49, 0.10);
	}
	.mgp-ab-btn {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 50px;
		border-radius: 9999px;
		font-family: 'Inter', sans-serif;
		font-weight: 700;
		font-size: 15px;
		text-decoration: none;
		line-height: 1.1;
		text-align: center;
	}
	.mgp-ab-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
	.mgp-ab-primary { background: var(--mgp-accent); color: #fff !important; }
	.mgp-ab-secondary {
		background: #fff;
		color: var(--mgp-primary) !important;
		border: 2px solid var(--mgp-primary);
	}

	/* Dégager le contenu : rien ne se cache derrière la barre. */
	body { padding-bottom: 74px; }
	[data-elementor-type="footer"] { padding-bottom: 24px; } /* la barre gère l'espace bas */

	/* Remonter les boutons flottants AU-DESSUS de la barre (≈ 66px). */
	.mgp-whatsapp-float { bottom: calc(1rem + 66px); }
	.mgp-scroll-top { bottom: calc(1rem + 66px + 3.25rem + 0.6rem); }
}

/* =========================================================================
   LOT ANIMATIONS « RAPIDE » (reveal scroll + cascade hero + micro-interactions)
   Gate `html.mgp-anim` : sans JS ou en reduced-motion, le contenu reste visible.
   Uniquement opacity/transform → 60 FPS, aucun CLS.
   ========================================================================= */
html.mgp-anim .mgp-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
	            transform .6s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
html.mgp-anim .mgp-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.mgp-anim .mgp-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --- Micro-interactions CTA --- */
.elementor-button {
	transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease;
}
.elementor-button:hover { transform: translateY(-2px); }
.elementor-button:active { transform: translateY(0) scale(.98); }
.elementor-button .elementor-button-icon,
.elementor-button .elementor-align-icon-right { transition: transform .2s ease; }
.elementor-button:hover .elementor-button-icon,
.elementor-button:hover .elementor-align-icon-right { transform: translateX(4px); }

/* --- Hover lift des cartes (classe posée par JS) --- */
.mgp-card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.mgp-card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px rgba(15, 46, 26, .14);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button:hover,
	.elementor-button:active,
	.mgp-card-hover:hover { transform: none; }
}

/* =========================================================================
   ANIMATIONS (lot intermédiaire) — FAQ + succès formulaire. CSS pur.
   ========================================================================= */

/* --- FAQ : ouverture animée du contenu (details/summary natif).
   Transform seul → le contenu reste visible même si l'animation ne joue pas. */
@keyframes mgpFaqOpen {
	from { transform: translateY(-6px); }
	to   { transform: none; }
}
.mgp-faq details[open] .mgp-faq-body { animation: mgpFaqOpen .3s ease both; }

/* --- Succès de formulaire : message qui apparaît + coche animée
   (transform seul pour ne jamais masquer le message de confirmation). --- */
@keyframes mgpMsgIn {
	from { transform: translateY(8px) scale(.98); }
	to   { transform: none; }
}
@keyframes mgpCheckPop {
	0%   { transform: scale(.3); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}
.elementor-message.elementor-message-success {
	display: flex;
	align-items: center;
	gap: 10px;
	animation: mgpMsgIn .4s ease both;
}
.elementor-message.elementor-message-success::before {
	content: '✓';
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 9999px;
	background: var(--mgp-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	animation: mgpCheckPop .5s ease .1s both;
}

@media (prefers-reduced-motion: reduce) {
	.mgp-faq details[open] .mgp-faq-body,
	.elementor-message.elementor-message-success,
	.elementor-message.elementor-message-success::before { animation: none !important; }
}

/* =========================================================================
   Hero À Propos : contour blanc sur le texte rouge « votre partenaire… »
   (améliore la lisibilité sur la photo du siège).
   ========================================================================= */
.page-id-12 [data-elementor-type="wp-page"] h1 span {
	text-shadow:
		-1px -1px 0 #fff, 1px -1px 0 #fff,
		-1px  1px 0 #fff, 1px  1px 0 #fff,
		 0    0   2px rgba(255,255,255,.6);
}

/* =========================================================================
   Pied de page : le menu « Liens Rapides » ne doit jamais devenir un burger.
   On masque tout toggle résiduel et on garde la liste des liens visible.
   ========================================================================= */
[data-elementor-type="footer"] .elementor-menu-toggle { display: none !important; }
[data-elementor-type="footer"] .elementor-nav-menu--main { display: block !important; }