/* En-tête et pied de page UNIQUES de vivacomptoir.fr (VCSI 792) : style de l'accueil validé le 28/10, vrai logo.
   Chargé par _base.html ET _base_accueil.html ; autonome (aucune variable des autres feuilles). Toute retouche se fait ici et nulle part ailleurs. */
:root { --entete: 4.5rem; }
html { scroll-padding-top: 5rem; }
.entete, .pied { --e-vert: #0B211C; --e-noir: #0B0D10; --e-trait: #303846; --e-blanc: #F6F7FB; --e-gris: #B6BECC; --e-or: #F2BD58; --e-or-vif: #FFD17C; --e-encre: #17130B; font-family: Manrope, sans-serif; line-height: 1.25; }
.entete a, .pied a { color: inherit; text-decoration: none; }
.entete :focus-visible, .pied :focus-visible { outline: 3px solid var(--e-or); outline-offset: 3px; }
.entete { position: sticky; top: 0; z-index: 50; background: var(--e-vert); color: var(--e-blanc); border-bottom: 1px solid #ffffff14; }
.entete-in { display: flex; align-items: center; gap: 1.5rem; width: min(1240px, calc(100% - 40px)); margin-inline: auto; min-height: var(--entete); }
.marque { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0; color: var(--e-blanc); }
.marque-sigle { display: block; flex: none; width: 2.5rem; height: 2.5rem; }
.marque-txt { display: flex; flex-direction: column; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.04em; }
.marque-desc { white-space: nowrap; margin-top: 3px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--e-gris); }
.nav-bureau { display: none; margin-left: auto; align-items: center; gap: 1.3rem; font-size: 0.9rem; font-weight: 600; }
.nav-bureau a, .deroulant summary { white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; }
.nav-bureau a:hover, .deroulant summary:hover, .nav-bureau a[aria-current] { color: var(--e-or); }
.deroulant { position: relative; }
.deroulant summary { cursor: pointer; list-style: none; }
.deroulant summary::-webkit-details-marker { display: none; }
.deroulant summary::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.18em) rotate(45deg); }
.deroulant ul { position: absolute; top: calc(100% + 0.4rem); left: -1rem; z-index: 2; min-width: 15rem; margin: 0; padding: 0.5rem; list-style: none; background: var(--e-vert); border: 1px solid var(--e-trait); border-radius: 12px; box-shadow: 0 18px 40px #0007; }
.deroulant li a { display: flex; padding: 0.6rem 0.8rem; border-radius: 8px; }
.deroulant li a:hover { background: #ffffff12; color: var(--e-or); }
.bouton-entete { display: none; align-items: center; justify-content: center; min-height: 48px; padding: 0.6rem 1.15rem; border: 1px solid #c19441; border-radius: 9px; background: var(--e-or); color: var(--e-encre) !important; font-size: 0.9rem; font-weight: 800; white-space: nowrap; }
.bouton-entete:hover { background: var(--e-or-vif); }
.appel-mobile { margin-left: auto; display: inline-flex; align-items: center; min-height: 48px; padding: 0 0.95rem; white-space: nowrap; font-weight: 800; background: var(--e-or); color: var(--e-encre) !important; border-radius: 9px; }
.appel-mobile + .menu-mobile { margin-left: 0.5rem; }
.menu-mobile summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 0.95rem; font-weight: 600; border: 1px solid #81938d; border-radius: 8px; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile[open] summary { border-color: var(--e-or); }
.menu-mobile nav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--entete)); overflow-y: auto; display: flex; flex-direction: column; padding: 0.5rem 20px 1.4rem; background: var(--e-vert); border-bottom: 1px solid #ffffff14; }
.menu-mobile nav a { padding: 0.8rem 0; min-height: 48px; font-weight: 600; border-bottom: 1px solid #ffffff14; }
.menu-mobile nav a.menu-metier { padding-left: 1rem; font-weight: 400; color: var(--e-gris); }
.menu-mobile nav .menu-titre { margin: 0.9rem 0 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--e-gris); }
.menu-mobile nav .bouton-entete { display: inline-flex; margin-top: 1.1rem; }
@media (max-width: 30rem) { .marque-desc { display: none; } }
@media (max-width: 26rem) { .appel-david { display: none; } .marque-txt { font-size: 1.05rem; } .marque { gap: 0.5rem; } .marque-sigle { width: 2.25rem; height: 2.25rem; } .entete-in { gap: 0.5rem; } .appel-mobile, .menu-mobile summary { padding: 0 0.7rem; } .appel-mobile + .menu-mobile { margin-left: 0; } }
@media (min-width: 80rem) {
  .nav-bureau { display: flex; }
  .bouton-entete { display: inline-flex; }
  .menu-mobile, .appel-mobile { display: none; }
}
.pied { background: var(--e-noir); color: var(--e-gris); border-top: 1px solid var(--e-trait); font-size: 0.9rem; }
.pied a:hover { color: var(--e-or); }
.pied-in { width: min(1240px, calc(100% - 40px)); margin-inline: auto; padding: clamp(2.5rem, 6vw, 3.5rem) 0; display: grid; gap: 2.2rem; }
.pied .marque { margin-bottom: 0.9rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.04em; }
.pied-marque p:last-child { max-width: 24rem; font-size: 0.85rem; }
.pied-titre { margin: 0 0 0.6rem; font-weight: 800; color: var(--e-blanc); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 0; }
.pied li a { display: inline-flex; align-items: center; min-height: 44px; }
.pied .famille li a { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--e-blanc); }
.pied .famille li { padding: 0.45rem 0; }
.pied-petit { margin-top: 0.9rem; font-size: 0.85rem; }
.pied-bas { width: min(1240px, calc(100% - 40px)); margin-inline: auto; padding: 1.2rem 0 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 2rem; border-top: 1px solid var(--e-trait); font-size: 0.85rem; }
.pied-bas p { margin: 0; }
.pied-bas a { display: inline-flex; align-items: center; min-height: 48px; margin-left: 1.2rem; }
.pied-bas p:last-child a:first-child { margin-left: 0; }
@media (min-width: 62rem) { .pied-in { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 3rem; } }