/* ART CONSTRUCTION - menu du haut v6 (06.10.2026) : logo + nom du logiciel a gauche, entrees alignees a droite,
   Langue / 9 points / Se connecter / S'inscrire a l'extreme droite. Fond et ligne sur toute la largeur, contenu dans un cadre de 1100 px
   (comme le bas de page). A partir de 1024 px : jamais de menu hamburger. En dessous : un seul bouton qui ouvre un panneau a groupes depliables.
   Utilise par le site Plans (/plans/, guides, pages legales) et l'offre Plans Pro (/plans/pro/offre/). */
.am-entete { --am-bleu: #085292; --am-bleu-2: #06467E; --am-texte: #12202D; --am-gris: #526170; --am-trait: #E5E7EB;
  position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--am-trait); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; }
.am-entete *, .am-entete *::before, .am-entete *::after { box-sizing: border-box; }
.am-entete [hidden] { display: none !important; }
.am-cadre { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 0 20px; min-height: 72px; }

/* logo + nom du logiciel : mene a l'accueil du logiciel */
.am-logo { display: flex; align-items: center; gap: 14px; flex: none; text-decoration: none; color: var(--am-texte); min-width: 0; }
.am-logo img { height: 44px; width: auto; display: block; }
.am-nom { font: inherit; font-size: 14px; font-weight: 500; color: var(--am-gris); line-height: 1.2; padding-left: 14px; border-left: 1px solid var(--am-trait); white-space: nowrap; }

/* entrees du menu : alignees a droite, juste avant les boutons */
.am-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; }
.am-lien, .am-parent { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--am-gris);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.am-lien:hover, .am-parent:hover, .am-groupe.am-ouvert > .am-parent { background: #EEF4FA; color: var(--am-bleu); }
.am-fleche { font-style: normal; font-size: 11px; }
.am-groupe { position: relative; display: inline-flex; }
.am-sous { display: none; position: absolute; top: 100%; left: 0; z-index: 1010; min-width: 220px; padding: 6px; margin-top: 0; background: #fff; border: 1px solid #DDE6EE;
  border-radius: 10px; box-shadow: 0 12px 30px rgba(11,58,102,.14); flex-direction: column; }
.am-sous::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* pont pour que le survol ne se perde pas */
.am-sous a, .am-sous button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--am-texte);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.am-sous a:hover, .am-sous button:hover { background: #F4F8FC; color: var(--am-bleu); }
.am-sous form { margin: 0; }
.am-actions .am-sous, .am-sous.am-droite { left: auto; right: 0; }

/* a droite : Langue, 9 points (ajoutes par ecosysteme.js), Se connecter, S'inscrire */
.am-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: 12px; }
.am-actions .art-eco { margin-right: 4px; }
.am-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 16px; border: 1px solid var(--am-bleu); border-radius: 8px;
  background: var(--am-bleu); color: #fff !important; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.am-bouton:hover { background: var(--am-bleu-2); border-color: var(--am-bleu-2); }
.am-contour { background: #fff; color: var(--am-bleu) !important; }
.am-contour:hover { background: #EEF4FA; }
.am-actions .am-groupe > .am-parent.am-bouton { gap: 6px; }

/* bouton unique du telephone et de la tablette */
.am-burger { display: none; flex: none; align-items: center; justify-content: center; padding: 8px; margin-left: 4px; border: 1px solid #D1D5DB; border-radius: 8px; background: #fff; color: #374151; cursor: pointer; line-height: 0; }
.am-burger .am-x { display: none; }
.am-entete.am-panneau-ouvert .am-burger .am-x { display: block; }
.am-entete.am-panneau-ouvert .am-burger .am-trois { display: none; }
.am-panneau { display: none; }

@media (min-width: 1024px) {
  .am-groupe:hover > .am-sous, .am-groupe.am-ouvert > .am-sous { display: flex; }
}
@media (max-width: 1023px) {
  .am-cadre { gap: 8px; min-height: 64px; }
  .am-logo img { height: 38px; }
  .am-menu, .am-actions > [data-am-invite], .am-actions > .am-groupe { display: none !important; }
  .am-actions { margin-left: auto; }
  .am-burger { display: inline-flex; }
  .am-panneau { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; background: #fff;
    border-bottom: 1px solid var(--am-trait); box-shadow: 0 12px 24px rgba(11,58,102,.12); padding: 6px 20px 16px; }
  .am-entete.am-panneau-ouvert .am-panneau { display: block; }
  .am-p-lien, .am-p-parent { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid #F3F4F6; background: none;
    color: #374151 !important; font: inherit; font-size: 16px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
  .am-p-parent .am-fleche { transition: transform .15s; font-size: 12px; }
  .am-p-groupe.am-p-ouvert > .am-p-parent .am-fleche { transform: rotate(180deg); }
  .am-p-sous { padding: 0 0 4px 14px; border-bottom: 1px solid #F3F4F6; }
  .am-p-sous a, .am-p-sous button { display: block; width: 100%; padding: 12px 0; border: 0; background: none; color: #374151 !important; font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
  .am-p-sous form { margin: 0; }
  .am-p-boutons { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
  .am-p-boutons .am-bouton { width: 100%; padding: 13px 12px; font-size: 16px; }
}
@media (max-width: 639px) {
  .am-cadre { padding: 0 16px; }
  .am-panneau { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 479px) {
  .am-nom { display: none; }   /* le logo seul mene a l'accueil ; place pour Langue + 9 points + bouton */
}