/* =============================================================================
 * README — solimut-ui.css : DESIGN SYSTEM GLOBAL et partagé des formulaires solimut.
 * Reproduit la charte Solimut (titre/labels bleu marine, champs arrondis, CTA vert,
 * mentions légales grises en rollover). BASE réutilisée par TOUS les formulaires.
 *
 * NB : Elementor/thème injectent des styles agressifs → on met des !important sur les
 * propriétés clés pour garantir NOTRE design. La police « Neo » (de marque, en gras)
 * n'est appliquée qu'aux éléments volontairement gras (titre, labels, CTA) ; le texte
 * courant reste en Arial pour s'afficher en graisse normale.
 * Tokens : bleu marine #002e5e, vert #09953f, rayon 10px.
 * ========================================================================== */

.sol-ui {
  /* Tokens — colorimétrie officielle Solimut (couleurs globales Elementor) */
  --sol-navy: #002E5E;     /* System #6 — titres / labels */
  --sol-green: #09953F;    /* Principal — CTA */
  --sol-green-d: #077a33;  /* vert survol */
  --sol-red: #ED1C24;      /* Secondaire */
  --sol-text: #7A7A7A;     /* Texte */
  --sol-muted: #7A7A7A;
  --sol-border: #E6EAEF;   /* Gris formulaire */
  --sol-success: #328D45;  /* Alerte */
  --sol-error: #BC020A;    /* Alerte #2 */
  --sol-warning: #FFDE00;  /* Alerte #3 */
  --sol-radius: 10px;       /* champs, CTA */
  --sol-radius-img: 20px;   /* RÉFÉRENCE arrondi des images / cartes (2× les champs) */
  --sol-fill: rgba(0, 46, 94, .10); /* fond doux des champs (variante --soft) */
  --sol-band-end: #F3F8F7;  /* bas du dégradé léger des bandes (.sol-band) */
  color: var(--sol-navy);
  font-family: Arial, sans-serif;   /* texte courant en graisse normale */
  width: 100%;                      /* plus de contrainte de largeur */
}
.sol-ui * { box-sizing: border-box; }

.sol-title {
  color: var(--sol-navy) !important; font-size: 24px; margin: 0 0 22px;
  font-family: 'Neo', Arial, sans-serif; font-weight: 700 !important;
}

.sol-form { display: flex; flex-direction: column; gap: 18px; }

.sol-field { display: flex; flex-direction: column; gap: 8px; }
.sol-label {
  font-size: 16px; color: var(--sol-navy) !important;
  font-family: 'Neo', Arial, sans-serif; font-weight: 700 !important;
}

.sol-input,
.sol-select {
  width: 100% !important;
  padding: 14px !important;
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: 400 !important;
  color: var(--sol-navy) !important;
  background: #fff !important;
  border: 1px solid var(--sol-border) !important;
  border-radius: var(--sol-radius) !important;
}
.sol-input::placeholder { color: #9aa4b2; }
.sol-input:focus,
.sol-select:focus { outline: none; border-color: var(--sol-navy) !important; box-shadow: 0 0 0 3px rgba(0,46,94,.12); }

.sol-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sol-row > .sol-field { flex: 1 1 220px; }

.sol-btn {
  display: block; width: 100% !important; cursor: pointer; text-align: center;
  padding: 15px 24px !important; font-size: 18px !important;
  font-family: 'Neo', Arial, sans-serif !important; font-weight: 500 !important;  /* Neo 18 medium */
  color: #fff !important; background: var(--sol-green) !important;
  border: 1px solid var(--sol-green) !important; border-radius: var(--sol-radius) !important;
  transition: background .15s ease;
}
.sol-btn:hover { background: var(--sol-green-d) !important; border-color: var(--sol-green-d) !important; }
.sol-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Ligne d'info (téléphone) */
.sol-info { font-size: 14px; color: var(--sol-navy) !important; font-family: Arial, sans-serif; font-weight: 400 !important; }
.sol-info strong { font-weight: 700 !important; }

/* Consentement RGPD (case obligatoire, explicite) — texte bleu Solimut */
.sol-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--sol-navy) !important; font-weight: 400 !important; cursor: pointer; }
.sol-consent input {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  flex: 0 0 auto; width: 20px !important; height: 20px !important; margin: 1px 0 0 !important;
  border: 1px solid var(--sol-border) !important; border-radius: 5px !important; /* coins arrondis */
  background: #fff !important; cursor: pointer; position: relative;
}
.sol-consent input:checked { background: var(--sol-green) !important; border-color: var(--sol-green) !important; } /* vert quand coché */
.sol-consent input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sol-consent span { color: var(--sol-navy) !important; }

/* Mentions légales : gris, NON gras, avec rollover */
.sol-legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.sol-tip { position: relative; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif !important; font-weight: 400 !important; color: #7a7a7a !important; }
.sol-tip__label { border-bottom: 1px dotted currentColor; font-weight: 400 !important; }
/* Lien dans les mentions légales : bleu Solimut souligné */
.sol-link { color: var(--sol-navy) !important; text-decoration: underline !important; }
.sol-link:hover { color: var(--sol-navy) !important; }
.sol-tip__content {
  position: absolute; bottom: 130%; left: 0; z-index: 50;
  width: 320px; max-width: 80vw; padding: 12px 14px;
  background: #fff; color: #7a7a7a !important; font-size: 12.5px;
  font-family: Arial, sans-serif !important; font-weight: 400 !important; line-height: 1.5;
  border: 1px solid var(--sol-border); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.sol-tip--right .sol-tip__content { left: auto; right: 0; }
.sol-tip__content p { margin: 0 0 8px; }            /* sauts de ligne / paragraphes dans le popup */
.sol-tip__content p:last-child { margin-bottom: 0; }
.sol-tip:hover .sol-tip__content,
.sol-tip:focus-within .sol-tip__content { opacity: 1; visibility: visible; }

/* Mobile : le rollover devient une barre en bas, pleine largeur (plus de débordement hors écran) */
@media (max-width: 600px) {
  .sol-ui .sol-tip .sol-tip__content {
    position: fixed !important; left: 12px !important; right: 12px !important;
    bottom: 12px !important; top: auto !important;
    width: auto !important; max-width: none !important;
  }
}

/* Messages */
.sol-msg { padding: 12px 14px; border-radius: var(--sol-radius); font-size: 14px; font-family: Arial, sans-serif; }
.sol-msg--ok   { background: #eaf6ee; color: var(--sol-success); border: 1px solid var(--sol-success); }
.sol-msg--err  { background: #fdecec; color: var(--sol-error); border: 1px solid var(--sol-error); }
.sol-msg--info { background: #eef5fb; color: var(--sol-navy); border: 1px solid #cfe0f0; }

/* Popup / petite fenêtre */
.sol-popup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,46,94,.45); z-index: 99999; }
.sol-popup__box { background: #fff; border-radius: 14px; padding: 28px 26px; max-width: 380px; width: calc(100% - 40px); text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.sol-popup__box h3 { margin: 0 0 10px; font-size: 18px; color: var(--sol-navy); font-family: 'Neo', Arial, sans-serif; }
.sol-popup__box p { margin: 0; color: var(--sol-muted); }

/* RÈGLE : toutes les images de contenu ont des coins arrondis (réf. --sol-radius-img = 20px) */
.sol-img { border-radius: var(--sol-radius-img); display: block; max-width: 100%; }

/* Layout call-back : logo en haut à droite, formulaire à gauche, image à droite */
.sol-cb { padding: 48px 5% 40px; }   /* haut + 5% latéral */
.sol-cb__head { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.sol-cb__logo { height: 104px; width: auto; }   /* logo ×2 ; non arrondi */
.sol-cb__body { display: flex; gap: 64px; align-items: stretch; }   /* espace image/form doublé */
.sol-cb__media { flex: 0 0 33%; max-width: 33%; }   /* image à gauche, 1/3 */
.sol-cb__form { flex: 1 1 0; min-width: 0; }          /* formulaire à droite, 2/3 */

/* Message de remerciement (remplace le formulaire après envoi) — centré en hauteur */
.sol-cb__merci { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 280px; text-align: center; }
.sol-cb__merci p { color: var(--sol-navy) !important; font-size: 16px; line-height: 1.6; margin-top: 8px; }
.sol-cb__media .sol-img { width: 100%; height: 100%; object-fit: cover; }
.sol-img--placeholder { display: flex; align-items: center; justify-content: center; min-height: 320px; background: #E6EAEF; color: #9aa4b2; font-size: 14px; }
@media (max-width: 768px) {
  .sol-cb__body { flex-direction: column; }
  .sol-cb__media { display: none; }              /* image masquée → on arrive direct au formulaire */
  .sol-cb__head { justify-content: flex-start; } /* logo à gauche */
  .sol-cb__logo { height: 52px; }                /* logo réduit de moitié */
}

/* =============================================================================
 * PRIMITIVES réutilisables (trame identitaire commune) — à composer dans les formulaires
 * plutôt que de recréer du CSS ad hoc. Toutes basées sur les tokens ci-dessus.
 * ========================================================================== */
.sol-card { background: #fff; border-radius: var(--sol-radius-img); padding: 30px; }       /* carte blanche arrondie */
.sol-band { background: linear-gradient(180deg, #fff 0%, var(--sol-band-end) 100%) !important; } /* bande à dégradé léger (Elementor écrase sinon) */
.sol-title--lg { font-size: 30px; line-height: 1.15; margin: 0 0 16px; }                    /* variante grande du titre */
.sol-input--soft { background: var(--sol-fill) !important; border-color: transparent !important; } /* champ à fond doux */
.sol-btn--inline { display: inline-block; width: auto !important; }                          /* CTA largeur auto */

/* Newsletter — composée des primitives + tokens (aucune valeur en dur hors layout) */
/* bande dégradé PLEINE LARGEUR écran (full-bleed), carte centrée au milieu */
.sol-nl__bloc { width: 100vw; margin-left: calc(50% - 50vw); padding: 56px 24px; }
/* variante sans bande (placements en colonne) : carte visible via une bordure légère */
.sol-nl__plain .sol-card { border: 1px solid var(--sol-border); }
.sol-nl__card { display: flex; align-items: center; gap: 28px; max-width: 1100px; margin: 0 auto; }
.sol-nl__media { flex: 0 0 auto; width: 160px; }          /* icône à la taille d'origine */
.sol-nl__icon { width: 100%; height: auto; display: block; }
.sol-nl__main { flex: 1 1 auto; min-width: 0; }
.sol-nl__row { display: flex; gap: 12px; flex-wrap: wrap; }
.sol-nl__row .sol-input { flex: 1 1 240px; }
/* texte SAISI en bleu marine + bold. -webkit-text-fill-color : le thème/autofill force
   sinon la couleur du texte par-dessus `color` (même !important) → on le neutralise. */
.sol-nl .sol-input {
  color: var(--sol-navy) !important;
  -webkit-text-fill-color: var(--sol-navy) !important;
  font-weight: 700 !important;
}
.sol-nl .sol-input:-webkit-autofill { -webkit-text-fill-color: var(--sol-navy) !important; }
.sol-nl .sol-input::placeholder { color: rgba(0,46,94,.5); -webkit-text-fill-color: rgba(0,46,94,.5); font-weight: 400; }
.sol-nl__rgpd { display: inline-block; margin-top: 12px; color: var(--sol-muted) !important; font-size: 13px; text-decoration: none !important; }
.sol-nl__rgpd:hover { text-decoration: underline !important; }
.sol-nl__merci { color: var(--sol-navy) !important; font-family: 'Neo', Arial, sans-serif; font-weight: 700; margin: 0; font-size: 18px; text-align: center; width: 100%; }
@media (max-width: 900px) { .sol-nl__bloc { padding: 40px 16px; } }
@media (max-width: 600px) {
  .sol-nl__bloc { padding: 28px 12px; }
  .sol-nl__card { flex-direction: column; text-align: center; padding: 24px; }
  .sol-nl__media { width: 120px; }
  .sol-nl__row { flex-direction: column; }
  .sol-nl__row .sol-btn { width: 100% !important; }
}