/* MANEL GROUP – compléments aux classes Tailwind des maquettes : animations, en-tête, boutons flottants, formulaires. */

:root {
  --mg-primary: #003265;
  --mg-primary-container: #00488d;
  --mg-orange: #ff8926;
  --mg-header-h: 112px;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

/* Les ancres ne passent pas sous l'en-tête fixe */
[id] { scroll-margin-top: calc(var(--mg-header-h) + 16px); }

::selection { background: rgba(255, 137, 38, 0.22); color: var(--mg-primary-container); }

/* Lien d'évitement (accessibilité) */
.mg-skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--mg-primary); color: #fff; padding: 10px 16px; border-radius: 10px;
  transition: top .2s;
}
.mg-skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--mg-orange); outline-offset: 2px; }

/* En-tête : ombre plus marquée au défilement, barre d'infos repliée */
#site-header .mg-topbar { transition: margin-top .3s ease; }
#site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 50, 101, 0.10); }
@media (min-width: 1024px) {
  #site-header.is-scrolled .mg-topbar { margin-top: -32px; }
}

/* Menu déroulant « Nos services » : ouvert au survol, au clavier (focus) ou par la classe is-open */
.mg-dropdown-panel {
  opacity: 0; visibility: hidden; z-index: 70;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mg-dropdown:hover .mg-dropdown-panel,
.mg-dropdown:focus-within .mg-dropdown-panel,
.mg-dropdown.is-open .mg-dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mg-dropdown:hover .mg-dropdown-caret,
.mg-dropdown:focus-within .mg-dropdown-caret,
.mg-dropdown.is-open .mg-dropdown-caret { transform: rotate(180deg); }
.mg-dropdown.is-closed .mg-dropdown-panel { opacity: 0; visibility: hidden; }
.mg-dropdown.is-closed .mg-dropdown-caret { transform: none; }

/* Apparition des blocs au défilement */
.mg-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--mg-delay, 0s); }
.mg-reveal.is-visible { opacity: 1; transform: none; }

/* Images : léger zoom au survol des cartes */
.group:hover img.mg-zoom { transform: scale(1.04); }
img.mg-zoom { transition: transform .6s cubic-bezier(.2,.7,.2,1); }

/* Bouton WhatsApp flottant */
.mg-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
  transition: transform .25s, box-shadow .25s;
}
.mg-whatsapp::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; animation: mg-ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.mg-whatsapp:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(37, 211, 102, 0.55); }
@keyframes mg-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* Retour en haut */
.mg-totop {
  position: fixed; right: 27px; bottom: 92px; z-index: 60;
  width: 44px; height: 44px; border-radius: 14px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--mg-primary);
  box-shadow: 0 8px 24px rgba(0, 50, 101, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, background .2s, color .2s;
}
.mg-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mg-totop:hover { background: var(--mg-primary); color: #fff; }

/* Formulaires de devis */
.mg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Le formulaire de l'accueil n'avait pas de bordures dans la maquette (pas de plugin forms) */
#quote-lead-form input:not([type="radio"]):not([type="checkbox"]), #quote-lead-form select, #quote-lead-form textarea { border-color: transparent; }
[data-devis-form] .mg-invalid { box-shadow: 0 0 0 2px #ba1a1a !important; border-color: #ba1a1a !important; }
[data-devis-form] .mg-error { display: block; color: #ba1a1a; font-size: 13px; margin-top: 4px; font-weight: 500; }
.mg-feedback { border-radius: 12px; padding: 14px 16px; font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.mg-feedback.is-ok { background: #e3f8e8; color: #00531e; }
.mg-feedback.is-error { background: #ffdad6; color: #93000a; }
[data-devis-form] button[type="submit"][disabled] { opacity: .7; cursor: progress; }
.mg-spin { animation: mg-spin 1s linear infinite; }
@keyframes mg-spin { to { transform: rotate(360deg); } }

/* Filtre des réalisations */
.portfolio-item { transition: opacity .25s ease, transform .25s ease; }

/* Fenêtre « Voir le projet » */
.mg-lightbox {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(11, 28, 48, 0.82); backdrop-filter: blur(6px);
}
.mg-lightbox.is-open { display: flex; animation: mg-fade .25s ease; }
.mg-lightbox__box { background: #fff; border-radius: 20px; overflow: hidden; max-width: 980px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: mg-rise .35s cubic-bezier(.2,.7,.2,1); }
.mg-lightbox__box img { width: 100%; max-height: 62vh; object-fit: cover; }
.mg-lightbox__body { padding: 22px 26px 26px; overflow-y: auto; }
.mg-lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--mg-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
@keyframes mg-fade { from { opacity: 0; } }
@keyframes mg-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }

body.mg-no-scroll { overflow: hidden; }

/* Mobile : tailles « -mobile » du design system (les maquettes n'avaient qu'une version bureau) */
@media (max-width: 640px) {
  .text-display-hero { font-size: 36px; line-height: 44px; letter-spacing: -0.01em; }
  .text-headline-xl { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; }
  .text-headline-lg { font-size: 24px; line-height: 32px; letter-spacing: 0; }

  /* Photos principales des pages de pôle et de l'accueil : moins hautes sur téléphone */
  .h-\[520px\], .h-\[480px\] { height: 340px; }

  /* Formulaires de devis : marges intérieures réduites pour laisser de la place aux champs */
  form[data-devis-form].p-8 { padding: 1.5rem 1.25rem; }

  /* Contact : titres « Étape 1 / 2 / 3 » plus compacts, mention « Choix obligatoire » en dessous */
  #quoteRequestForm legend { font-size: 19px; line-height: 26px; }
  #quoteRequestForm div:has(> legend) { flex-wrap: wrap; row-gap: 4px; }

  /* Réalisations : chiffres du projet à la une sur une seule ligne */
  .absolute.bottom-6.left-6.right-6 .text-headline-md { font-size: 18px; line-height: 24px; white-space: nowrap; }

  /* Accueil : bandeau « Gain de temps moyen constaté » qui passe sur deux lignes */
  .mt-6.p-4.rounded-xl.bg-surface-container.flex.justify-between { flex-wrap: wrap; gap: 6px 12px; }
  .mg-whatsapp { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .mg-totop { right: 21px; bottom: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mg-reveal { opacity: 1; transform: none; transition: none; }
  .mg-whatsapp::after { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}