/* Amosphère — styles communs navigation / sidebar / footer
   Externalisé depuis _nav.html (mise en cache navigateur, allègement des pages). */

/* Réserve en permanence la gouttière de l'ascenseur vertical : la barre haute
   (et tout le contenu) garde le même bord droit, que la page défile ou non.
   Évite le décalage des boutons « Profil » / « Déconnexion » entre les pages. */
html{scrollbar-gutter:stable}

/* ── Garde-fous largeur (mobile) ──
   main est un enfant flex : sans min-width:0 il refuse de descendre sous la largeur
   min-content de son contenu. Comme la plupart des pages lui donnent overflow:auto,
   le débordement n'était pas visible au niveau de la page — il était simplement rogné,
   rendant le bord droit des cartes inatteignable sur petit écran. */
.page{min-width:0}
.page > main{min-width:0}
/* Une URL, un e-mail ou un SIRET collé ne doit jamais élargir la page à lui seul. */
.amo-break{overflow-wrap:anywhere;word-break:break-word}

/* ── Mot AMOSPHÈRE bicolore (AMO orange · SPHÈRE marine, ou blanc sur fond marine) ── */
.wm-amo{color:#e1622b}
.wm-sphere{color:#0e295c}
/* Sur fond marine (footer, bandeaux sombres), SPHÈRE passe en blanc pour rester lisible */
.amo-footer-brand-name .wm-sphere,.wm-on-dark .wm-sphere{color:#ffffff}

/* ── Barre de navigation (espace membre) ── */
.amo-nav{background:#fff;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid #E5E8EF;position:sticky;top:0;z-index:200;box-shadow:0 1px 8px rgba(14,41,92,.06);flex-shrink:0}
/* color explicite : sans elle, un lien visité hérite du violet par défaut du
   navigateur (au lieu du navy du site) — invisible tant que le logo restait du
   texte/une image, mais hérité par la roue de chargement qui suit currentColor. */
.amo-nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:#0e295c}
.amo-nav-brand{font-size:22px;font-weight:800;color:#0e295c;letter-spacing:2px}
.amo-nav-links{display:flex;gap:4px}
.amo-nav-link{color:#596475;font-size:14px;padding:9px 16px;border-radius:8px;text-decoration:none;transition:all .2s}
.amo-nav-link:hover{color:#0e295c;background:#F4F6FA}
.amo-nav-right{display:flex;align-items:center;gap:10px}
@media(max-width:768px){.amo-nav{padding:0 20px}.amo-nav-uname{display:none}}

/* ── Barre de navigation (public) ── */
.pub-nav{background:#fff;border-bottom:1px solid #E5E8EF;padding:0 48px;height:76px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;box-shadow:0 1px 8px rgba(14,41,92,.06)}
.pub-nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:#0e295c}
.pub-nav-brand{font-family:'Outfit',sans-serif;font-size:30px;font-weight:800;color:#0e295c;letter-spacing:2px}
.pub-nav-links{display:flex;gap:4px}
.pub-nav-link{font-family:'Outfit',sans-serif;color:#0e295c;font-size:16px;font-weight:600;padding:10px 18px;border-radius:8px;text-decoration:none;transition:all .2s}
.pub-nav-link:hover,.pub-nav-link.on{color:#0e295c;background:#F4F6FA}
.pub-nav-right{display:flex;align-items:center;gap:10px}

/* Puce profil (avatar + prénom) et bouton Connexion/Déconnexion : mêmes règles pour
   le header public (pub-nav-*) et le header espace membre (amo-nav-*), pour qu'ils
   soient rigoureusement identiques — taille, position, comportement — d'une page à
   l'autre, qu'elle soit publique ou connectée. */
.amo-nav-user,.pub-nav-user{display:flex;align-items:center;gap:9px;background:#F4F6FA;border:1px solid #E5E8EF;padding:7px 16px 7px 7px;border-radius:100px;text-decoration:none;color:#0e295c;transition:border-color .15s}
.amo-nav-user:hover,.pub-nav-user:hover{border-color:#C8C0B8}
.amo-nav-av,.pub-nav-av{width:32px;height:32px;border-radius:50%;background:#0e295c;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;flex-shrink:0}
.amo-nav-uname,.pub-nav-uname{font-size:13px;font-weight:500;color:#0e295c}

/* Connexion / Déconnexion : fond transparent, contour navy — pas de remplissage au
   survol (juste le contour qui fonce), volontairement neutre par rapport à Inscription.
   line-height fixe : sans ça, la flèche « → » d'Inscription rend cette ligne de texte
   très légèrement plus haute que « Connexion » selon les polices, et les deux boutons
   n'ont plus la même hauteur malgré un padding identique. */
.amo-nav-deco,.pub-nav-ghost{font-family:'Outfit',sans-serif;color:#0e295c;font-size:14px;font-weight:600;line-height:20px;text-decoration:none;padding:9px 20px;border:1.5px solid #E5E8EF;border-radius:8px;transition:all .2s;display:inline-block}
.amo-nav-deco:hover,.pub-nav-ghost:hover{border-color:#0e295c}
.pub-nav-btn{font-family:'Outfit',sans-serif;background:#e1622b;color:#fff;font-size:14px;font-weight:600;line-height:20px;padding:9px 20px;border:1.5px solid transparent;border-radius:8px;text-decoration:none;transition:background .2s;display:inline-block}
.pub-nav-btn:hover{background:#0e295c}
.pub-hamburger{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#0e295c;width:42px;height:42px;border-radius:10px;padding:0}
.pub-hamburger:hover{background:#F4F6FA}
@media(max-width:900px){
  .pub-nav{padding:0 14px}
  .pub-nav-links{display:none}
  .pub-hamburger{display:flex}
  /* Sur mobile, tout passe dans le menu déroulant ☰ : on ne garde que le logo + le bouton ☰ */
  .pub-nav-user,.pub-nav-ghost,.pub-nav-btn{display:none}
  .pub-nav-brand{font-size:22px}
  /* Le menu déroulant est ancré SOUS la barre (position:fixe) : sans ça, étant en flux
     normal, il s'ouvrait tout en haut du document — donc hors écran dès que la page était
     défilée (bug « hamburger inaccessible » sur les longues pages). z-index juste sous la nav. */
  #pubMobileMenu{position:fixed;top:76px;left:0;right:0;z-index:199;max-height:calc(100vh - 76px);overflow-y:auto}
}

/* ── Menu latéral (espace membre) ── */
/* Desktop : la sidebar reste visible au scroll (collée sous la barre du haut, 76px).
   height + overflow-y garantissent que tous les liens restent atteignables si le menu
   dépasse la hauteur de l'écran. align-self:flex-start évite l'étirement flex qui
   casserait le sticky. Le mobile a son propre position:fixed plus bas. */
.amo-sidebar{width:220px;height:calc(100vh - 76px);position:sticky;top:76px;align-self:flex-start;overflow-y:auto;background:#fff;border-right:1px solid #E5E8EF;display:flex;flex-direction:column;padding:20px 0;flex-shrink:0}
.amo-sidebar-section{padding:0 12px;margin-bottom:4px}
.amo-sidebar-label{font-size:10px;font-weight:600;color:#C8C4BE;letter-spacing:1px;text-transform:uppercase;padding:8px 12px 4px}
.amo-sidebar-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;text-decoration:none;color:#596475;font-size:13px;font-weight:400;transition:all .2s;margin-bottom:2px}
.amo-sidebar-link:hover{background:#F4F6FA;color:#0e295c}
.amo-sidebar-link.active{background:#FDEEE7;color:#e1622b;font-weight:500}
.amo-sidebar-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.amo-sidebar-sep{height:1px;background:#E5E8EF;margin:10px 16px}

/* ── Menu mobile (barre latérale escamotable) ── */
.amo-nav-leftgroup{display:flex;align-items:center;gap:6px}
.amo-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:none;background:transparent;color:#0e295c;border-radius:10px;cursor:pointer;flex-shrink:0;padding:0}
.amo-burger:hover{background:#F4F6FA}
.amo-overlay{display:none;position:fixed;inset:0;background:rgba(14,41,92,.45);z-index:290;opacity:0;transition:opacity .25s}
.amo-overlay.open{opacity:1}
.amo-sidebar-mobileonly{display:none}
/* Variante « tiroir seul » : pages pleine largeur sans colonne latérale desktop.
   Masquée sur desktop, elle réapparaît en tiroir mobile (règle dans le media ci-dessous). */
.amo-sidebar--drawer{display:none}
@media(max-width:768px){
  .amo-burger{display:flex}
  .amo-hide-mobile{display:none !important}
  .amo-nav-logo span{font-size:22px !important}
  .amo-nav{padding:0 14px}
  .amo-sidebar{position:fixed;top:76px;left:0;bottom:0;width:264px;max-width:84vw;min-height:0;z-index:300;transform:translateX(-100%);transition:transform .28s ease;box-shadow:4px 0 24px rgba(14,41,92,.16);overflow-y:auto}
  .amo-sidebar--drawer{display:flex}
  .amo-sidebar.open{transform:translateX(0)}
  .amo-overlay.open{display:block}
  .amo-sidebar-mobileonly{display:block}
}
/* Très petits écrans (iPhone SE/mini, 320–375px) : à taille de logo inchangée, le trio
   burger + marque + pastille profil dépassait la largeur de l'écran. */
@media(max-width:380px){
  .amo-nav{padding:0 10px}
  .amo-nav-leftgroup{min-width:0;gap:2px}
  .amo-nav-logo{gap:8px;min-width:0}
  .amo-nav-logo img{width:44px;height:44px}
  .amo-nav-logo span{font-size:17px !important;letter-spacing:1px !important}
  .amo-nav-right{flex-shrink:0}
  .amo-nav-user{padding:5px}
  .pub-nav{padding:0 10px}
  .pub-nav-logo{gap:8px;min-width:0}
  .pub-nav-logo img{width:44px;height:44px}
  .pub-nav-brand{font-size:17px;letter-spacing:1px}
}

/* ── Confort tactile (mobile) ──
   Boutons et liens d'action isolés dont la hauteur descendait à 15–31px : trop peu
   pour être visés au doigt. On ne touche ni aux liens en pleine phrase ni aux menus,
   qui ont leurs propres règles. */
@media (max-width:768px){
  .btn-copy,.btn-share,.btn-sec,.btn-mod,.btn-quote,.histo-clear,
  .card-action,.back-link,.pro-back,.btn-voir,.btn-dl,.btn-see{
    min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  }
  .card-action,.back-link,.pro-back{justify-content:flex-start}
}

/* ── Pied de page ── */
.amo-footer{background:#0e295c;padding:32px 0 16px;margin-top:auto}
.amo-footer-inner{max-width:1100px;margin:0 auto;padding:0 48px}
.amo-footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:22px}
.amo-footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.amo-footer-brand-name{font-size:16px;font-weight:700;color:#F9FAFB;letter-spacing:1.5px}
.amo-footer-desc{font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.55;font-weight:300;max-width:230px}
.amo-footer-col-title{font-size:11px;font-weight:700;color:#fff;letter-spacing:1.1px;text-transform:uppercase;margin-bottom:14px;padding-bottom:8px;position:relative}
.amo-footer-col-title::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;background:#e1622b;border-radius:2px}
.amo-footer-link{display:block;font-size:12.5px;color:rgba(255,255,255,.66);text-decoration:none;margin-bottom:6px;transition:color .2s;font-weight:300}
.amo-footer-link:hover{color:#F9FAFB}
/* Marque + CTA + réseaux alignés sur une seule ligne compacte sous la description. */
.amo-footer-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.amo-footer-cta{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border:1px solid rgba(255,255,255,.28);border-radius:100px;font-size:12.5px;font-weight:600;color:#F9FAFB;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.amo-footer-cta:hover{background:#e1622b;border-color:#e1622b;transform:translateY(-1px)}
.amo-footer-social{display:flex;gap:8px}
.amo-social-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#F9FAFB;transition:background .2s,transform .2s}
.amo-social-ic:hover{background:#e1622b;transform:translateY(-1px)}
.amo-social-ic svg{width:15px;height:15px}
.amo-footer-cta svg{transition:transform .2s}
.amo-footer-cta:hover svg{transform:translateX(3px)}
.amo-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.amo-footer-copy{font-size:12px;color:rgba(255,255,255,.75);font-weight:300}
.amo-footer-legal{display:flex;gap:20px;flex-wrap:wrap}
.amo-footer-legal a{font-size:12px;color:rgba(255,255,255,.75);text-decoration:none;font-weight:300}
.amo-footer-legal a:hover{color:#F9FAFB}
@media(max-width:768px){
  .amo-footer-inner{padding:0 20px}
  .amo-footer-top{grid-template-columns:1fr 1fr;gap:24px}
  .amo-footer-desc{max-width:none}
  .amo-footer-legal{gap:10px 16px}
}
@media(max-width:420px){.amo-footer-top{grid-template-columns:1fr}}