/* GiftPartner – Correctifs : formulaires + affichage mobile.
   Le thème utilise des styles inline : les surcharges ci-dessous ciblent ces
   styles par sélecteur d'attribut et nécessitent !important. */

/* ---------- Formulaires (toutes tailles) ---------- */
.gpc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gpc-status {
  flex-basis: 100%; margin-top: 4px; padding: 14px 16px; font-size: 15px; line-height: 1.5;
  border: 1px solid var(--color-divider); background: #fff;
}
.gpc-status--ok { border-color: #5a8a5e; background: #f1f7f1; color: #24452a; }
.gpc-status--err { border-color: #c0392b; background: #fdf1ef; color: #7a1f14; }
.gpc-status a { color: inherit; text-decoration: underline; }
form button[disabled] { opacity: .6; cursor: progress; }

.gpc-burger { display: none; }
.gpc-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Menu burger (tablette + mobile) ---------- */
@media (max-width: 980px) {
  .nav { flex-wrap: wrap !important; row-gap: 0 !important; padding-block: 10px; position: relative; }
  .nav > span:first-child { flex: 1 1 auto !important; min-width: 0; }
  .nav > div[style*="margin-left:auto"] { margin-left: 0 !important; }

  .gpc-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; margin-left: 6px; flex: none;
    background: none; border: 1px solid var(--color-divider); cursor: pointer;
  }
  .gpc-burger span { display: block; height: 2px; background: var(--color-text); transition: transform .2s, opacity .2s; }
  .nav.gpc-open .gpc-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.gpc-open .gpc-burger span:nth-child(2) { opacity: 0; }
  .nav.gpc-open .gpc-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav .gp-navlinks {
    display: none !important; order: 10; flex: 1 0 100% !important;
    flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important;
    gap: 0 !important; margin: 10px 0 0 !important; padding: 4px 0 8px;
    border-top: 1px solid var(--color-divider);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .nav.gpc-open .gp-navlinks { display: flex !important; }
  .nav .gp-navlinks > a,
  .nav .gp-navlinks .gp-drop-t {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    font-size: 17px !important; padding: 13px 0 !important; text-align: left;
    border-bottom: 1px solid var(--color-divider); white-space: normal;
  }
  .nav .gp-navlinks .gp-drop { flex: none !important; }

  /* Sous-menu « Nos solutions » en accordéon */
  .nav .gp-drop-p {
    position: static !important; display: none; visibility: visible !important; opacity: 1 !important;
    transform: none !important; box-shadow: none !important; border: 0 !important;
    margin: 0 !important; padding: 0 !important; min-width: 0 !important;
  }
  .nav .gp-drop.gpc-drop-open .gp-drop-p { display: block; }
  .nav .gp-drop.gpc-drop-open .gp-drop-t [aria-hidden] { display: inline-block; transform: rotate(180deg); }
  .nav .gp-mega {
    grid-template-columns: 1fr 1fr !important; gap: 20px 18px !important;
    padding: 16px 0 20px !important; max-width: none !important;
    border-bottom: 1px solid var(--color-divider);
  }
  .nav .gp-mega a { display: block; padding: 5px 0 !important; font-size: 15px !important; white-space: normal; }
}

/* ---------- Tablette ---------- */
@media (max-width: 860px) {
  /* Grilles 2 colonnes fixes (texte/image, formulaire/coordonnées…) → empilées */
  [style*="grid-template-columns:minmax(0,6fr) minmax(0,6fr)"],
  [style*="grid-template-columns:minmax(0,7fr) minmax(0,5fr)"],
  [style*="grid-template-columns:minmax(0,5fr) minmax(0,7fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Boutons : retour à la ligne au lieu de déborder */
  .btn { white-space: normal !important; max-width: 100%; text-align: center; }
  a:has(> .btn) { max-width: 100%; }
  .nav { column-gap: 8px !important; }
  .nav .btn { font-size: 12.5px !important; padding: 8px 10px !important; line-height: 1.2; }
  .nav img { max-width: 120px !important; height: auto !important; }
  .gpc-burger { width: 40px; height: 40px; padding: 0 10px; margin-left: 0; }

  /* Champs : pleine largeur, 16px pour éviter le zoom automatique iOS */
  .input, input.input, textarea.input { width: 100%; min-width: 0 !important; box-sizing: border-box; font-size: 16px !important; }
  input[type="date"].input { min-height: 44px; -webkit-appearance: none; appearance: none; }
  form[style*="display:flex"] > .input { flex: 1 1 100%; }
  form[style*="display:flex"] > .btn { flex: 1 1 100%; }

  /* Hero de l'accueil : texte au-dessus, image en dessous */
  section[style*="aspect-ratio:1656/932"] {
    aspect-ratio: auto !important; min-height: 0 !important;
    display: flex !important; flex-direction: column;
  }
  section[style*="aspect-ratio:1656/932"] > img {
    position: relative !important; order: 2; inset: auto !important;
    height: auto !important; aspect-ratio: 1656/932; object-position: center !important;
  }
  section[style*="aspect-ratio:1656/932"] > div:nth-of-type(1) { display: none !important; }
  section[style*="aspect-ratio:1656/932"] > div:nth-of-type(2) { position: relative !important; inset: auto !important; order: 1; }

  /* Pied de page : 2 colonnes compactes */
  footer [style*="minmax(190px,1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 24px 20px !important; }

  /* Titres un peu plus compacts */
  h1 { overflow-wrap: anywhere; hyphens: auto; }
}

@media (max-width: 340px) {
  footer [style*="minmax(190px,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 380px) {
  .nav img { max-width: 104px !important; }
  .nav .btn { font-size: 12px !important; padding: 7px 8px !important; }
}

/* =====================  v1.1  ===================== */

/* En-tête fixe sur mobile : « Demander un devis » toujours à portée de pouce */
@media (max-width: 980px) {
  .nav { position: sticky !important; top: 0; z-index: 950; }
  .admin-bar .nav { top: 46px; }
  .gpc-menu-tel {
    display: flex; align-items: center; gap: 10px; padding: 14px 0 6px !important;
    font-size: 16px !important; color: var(--color-text) !important; text-decoration: none;
  }
  .nav .gp-navlinks > a.gpc-menu-tel { justify-content: flex-start; border-bottom: 0; }
  .nav .gp-drop-t [aria-hidden] { font-size: 13px !important; padding: 0 4px; }
}
@media (min-width: 981px) { .gpc-menu-tel { display: none !important; } }

/* Catalogue : liste « Toutes les familles » sur 2 colonnes */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))"] { grid-template-columns: 1fr 1fr !important; column-gap: 20px !important; }
}

/* Emplacements photo pas encore remplis : panneau sobre au monogramme GP
   au lieu d'un cadre pointillé « … — packshot » */
.gp-media-placeholder {
  font-size: 0 !important; color: transparent !important; border: 0 !important;
  background: #f3ede4 url("icons/monogram.png") center / 34% no-repeat !important;
}

/* Contrastes (WCAG AA) */
.gp-urgence { background: #e02d12 !important; border-color: #e02d12 !important; }
.gp-urgence:hover { background: #c72910 !important; border-color: #c72910 !important; }
th { color: #5f5e5a !important; }
[style*="var(--color-text) 58%"], [style*="var(--color-text) 60%"],
[style*="var(--color-text) 62%"], [style*="var(--color-text) 65%"] {
  color: color-mix(in srgb, var(--color-text) 74%, transparent) !important;
}

/* Formulaire de devis : mention de confiance sous le bouton */
.gpc-trust { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 74%, transparent); }

/* Case « Je préfère être rappelé » : le thème masque la case native et attend
   un rond de remplacement (.dot) absent — la case était invisible. */
.radio > input[type="checkbox"]#rappel {
  position: static !important; opacity: 1 !important; width: 18px !important; height: 18px !important;
  pointer-events: auto !important; flex: none; margin: 0;
}