/* =====================================================================
   HealthPolicy.be — Couche premium « Moderne & data »
   Chargée sur tout le site (fil clair). Portée : composants .hp-* + pied de page.
   Volontairement scopé pour ne pas casser les mises en page Divi.
   ===================================================================== */

:root{
  --hp-navy:#143A66;
  --hp-navy-d:#0E2A4D;
  --hp-accent:#15B5C4;      /* turquoise boussole */
  --hp-ink:#0f172a;
  --hp-muted:#5b6675;
  --hp-line:#e6eaf0;
  --hp-bg:#f7f9fc;
  --hp-radius:14px;
  --hp-shadow:0 6px 24px rgba(16,42,77,.08);
}

/* ---- Primitives partagées ---- */
.hp-checkout, .hp-setpass, .hp-account, .hp-lock, .hp{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--hp-ink);
}

/* Boutons premium (override des styles inline) */
.hp-btn, .hp-checkout button[type=submit], .hp-setpass button[type=submit]{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  background:var(--hp-navy) !important; color:#fff !important;
  border:none !important; border-radius:12px !important;
  padding:13px 24px !important; font-weight:700 !important; font-size:15px !important;
  letter-spacing:.01em; cursor:pointer; text-decoration:none !important;
  box-shadow:0 4px 14px rgba(20,58,102,.20); transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.hp-btn:hover, .hp-checkout button[type=submit]:hover, .hp-setpass button[type=submit]:hover{
  background:var(--hp-navy-d) !important; box-shadow:0 6px 20px rgba(20,58,102,.28); transform:translateY(-1px);
}
.hp-btn:active{ transform:translateY(0); }

/* Champs de formulaire premium */
.hp-checkout input, .hp-setpass input, .hp-account input,
.hp-checkout select, .hp-account select{
  width:100% !important; box-sizing:border-box;
  padding:12px 14px !important; border:1px solid var(--hp-line) !important;
  border-radius:10px !important; font-size:15px !important; background:#fff !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hp-checkout input:focus, .hp-setpass input:focus, .hp-account input:focus,
.hp-checkout select:focus, .hp-account select:focus{
  outline:none !important; border-color:var(--hp-accent) !important;
  box-shadow:0 0 0 3px rgba(21,181,196,.18) !important;
}
.hp-checkout label, .hp-setpass label, .hp-account label{
  font-size:13px !important; font-weight:600; color:var(--hp-muted) !important;
}

/* Cartes / conteneurs */
.hp-checkout, .hp-setpass, .hp-account-card{
  background:#fff; border:1px solid var(--hp-line) !important;
  border-radius:var(--hp-radius) !important; padding:26px !important;
  box-shadow:var(--hp-shadow); max-width:560px; margin:24px auto !important;
}
.hp-checkout form, .hp-setpass form{ display:grid; gap:14px; }
.hp-checkout h2, .hp-setpass h2, .hp-account-card h2{
  color:var(--hp-navy) !important; font-weight:800 !important; letter-spacing:-.01em;
}

/* Teaser « réservé » (vue déconnectée) */
.hp-lock{ box-shadow:var(--hp-shadow); border-color:var(--hp-line) !important; }
.hp-lock__btn{ box-shadow:0 4px 14px rgba(20,58,102,.20); }

/* Tableau de prix / comparatif */
.hp table{ box-shadow:var(--hp-shadow); border-radius:12px; overflow:hidden; }
.hp .card.feat{ box-shadow:0 10px 30px rgba(20,58,102,.12); }

/* Pied de page — un cran plus soigné */
#footer-info{ color:#cbd5e1 !important; font-size:13px !important; letter-spacing:.01em; }
.et-social-icons li{ margin-left:10px; }

/* Petites pastilles utilitaires réutilisables */
.hp-pill{ display:inline-flex;align-items:center;gap:6px;background:var(--hp-bg);
  border:1px solid var(--hp-line);color:var(--hp-navy);font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:999px; }

/* ---- Connexion premium (2 colonnes) ---- */
.hp-login input[type=text], .hp-login input[type=password], .hp-login input[type=email]{
  width:100% !important; box-sizing:border-box; padding:12px 14px !important;
  border:1px solid var(--hp-line) !important; border-radius:10px !important; font-size:15px !important; background:#fff !important;
}
.hp-login input:focus{ outline:none !important; border-color:var(--hp-accent) !important; box-shadow:0 0 0 3px rgba(21,181,196,.18) !important; }
.hp-login label{ font-size:13px !important; color:var(--hp-muted) !important; font-weight:600; }
.hp-login #hp_submit, .hp-login input[type=submit], .hp-login .button{
  width:100%; background:var(--hp-navy) !important; color:#fff !important; border:none !important;
  border-radius:12px !important; padding:13px 24px !important; font-weight:700 !important; font-size:15px !important;
  box-shadow:0 4px 14px rgba(20,58,102,.20); cursor:pointer; transition:background .15s ease, transform .12s ease; margin-top:6px;
}
.hp-login #hp_submit:hover, .hp-login input[type=submit]:hover, .hp-login .button:hover{ background:var(--hp-navy-d) !important; transform:translateY(-1px); }
.hp-login-card{ box-shadow:var(--hp-shadow); }
@media(max-width:720px){ .hp-login{ grid-template-columns:1fr !important; } }

/* ---- Header / menu premium (Divi Theme Builder, .et-l--header) ----
   Header construit avec le Theme Builder. Modules dans une rangee (row_0) :
   - un module IMAGE (.et_pb_image_0_tb_header) = le logo ;
   - un module MENU (.et_pb_menu_0_tb_header, ul.et-menu, duplique pour le sticky).
   Cible par CLASSE (pas #top-menu/#logo qui n'existent pas ici).
   NB (2026-08) : la rangee du header avait une hauteur FIXE de 150px alors que la
   boite header ne fait que 100px -> logo (y=133) + menu (y=169, pousse par une
   marge de 55px) debordaient SOUS le header et mangeaient le haut des pages.
   On annule ces offsets et on centre le contenu dans la boite header. */

/* Logo : agrandi et centre verticalement */
.et-l--header .et_pb_menu__logo img,
.et-l--header .et_pb_image img{ max-height:56px !important; width:auto !important; vertical-align:middle !important; }
.et-l--header .et_pb_menu__logo-wrap{ align-items:center !important; }

/* Anti-chevauchement : la boite header (100px) doit contenir son contenu.
   Section sans padding vertical + centrage ; rangee en hauteur auto (annule le 150px fixe)
   ; on remet a zero la marge-top:55px du module menu et la marge du module logo. */
.et-l--header .et_pb_section_0_tb_header{ min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; display:flex !important; align-items:center !important; }
.et-l--header .et_pb_row_0_tb_header{ height:auto !important; min-height:0 !important; width:100% !important; padding-top:6px !important; padding-bottom:6px !important; display:flex !important; align-items:center !important; }
.et-l--header .et_pb_row_0_tb_header > .et_pb_column{ align-self:center !important; margin-bottom:0 !important; }
.et-l--header .et_pb_image_0_tb_header{ margin:0 !important; }
.et-l--header .et_pb_menu_0_tb_header{ margin-top:0 !important; }

/* Barre de nav : une seule ligne, tout le groupe aligne a DROITE */
.et-l--header ul.et-menu{
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important;
  justify-content:flex-end !important; width:100% !important;
  padding-right:8px !important; box-sizing:border-box;
}
.et-l--header ul.et-menu > li{ padding:0 !important; white-space:nowrap !important; }
/* Taille de police remontee a 16px (etait 14.5px, trop petit) + coherence avec les sous-items */
.et-l--header ul.et-menu > li > a{ font-size:16px !important; font-weight:600 !important; line-height:1.4 !important; color:var(--hp-ink) !important; padding:0 14px !important; white-space:nowrap !important; transition:color .15s ease; }
.et-l--header ul.et-menu > li > a:hover{ color:var(--hp-accent) !important; }
.et-l--header ul.et-menu > li.current-menu-item > a{ color:var(--hp-navy) !important; }

/* "Se connecter" = lien discret (un seul vrai bouton dans le header) */
.et-l--header ul.et-menu > li.hp-login-link > a{ color:var(--hp-muted) !important; font-weight:600 !important; padding:0 6px 0 14px !important; }
.et-l--header ul.et-menu > li.hp-login-link > a:hover{ color:var(--hp-navy) !important; }

/* "S'abonner" = seul bouton plein navy */
.et-l--header ul.et-menu > li.hp-subscribe-cta{ margin-left:6px !important; }
.et-l--header ul.et-menu > li.hp-subscribe-cta > a.hp-cta-btn,
.hp-subscribe-cta > a.hp-cta-btn{
  display:inline-block !important; background:var(--hp-navy) !important; color:#fff !important;
  padding:9px 18px !important; border-radius:10px !important; font-weight:700 !important;
  box-shadow:0 3px 10px rgba(20,58,102,.18); transition:background .15s ease, transform .12s ease;
}
.et-l--header ul.et-menu > li.hp-subscribe-cta > a.hp-cta-btn:hover,
.hp-subscribe-cta > a.hp-cta-btn:hover{ background:var(--hp-navy-d) !important; transform:translateY(-1px); color:#fff !important; }

/* "Compte" = chip contour (membre connecte) */
.et-l--header ul.et-menu > li.hp-account-dropdown > a.hp-cta-chip,
.hp-account-dropdown > a.hp-cta-chip{
  display:inline-block !important; border:1px solid var(--hp-navy) !important; color:var(--hp-navy) !important;
  padding:7px 15px !important; border-radius:10px !important; font-weight:700 !important;
}

/* Sous-menus (deroulants) : les <li> Divi etaient en display:inline-block -> les 6
   items s'alignaient horizontalement sur UNE ligne et etaient coupes par la largeur
   240px + overflow:hidden (un seul item visible). On les empile verticalement et on
   libere le debordement. Police 15px (coherence avec les 16px du niveau 1) + navy lisible. */
.et-l--header ul.et-menu ul.sub-menu{ overflow:visible !important; height:auto !important; }
.et-l--header ul.et-menu ul.sub-menu li{ display:block !important; float:none !important; width:100% !important; margin-left:0 !important; }
.et-l--header .et_pb_menu ul.et-menu ul.sub-menu li a{ font-size:15px !important; color:var(--hp-navy) !important; }
.et-l--header .et_pb_menu ul.et-menu ul.sub-menu li a:hover{ color:var(--hp-accent) !important; }