/* ==========================================================================
   ANNONCE, EN-TÊTE, NAVIGATION, PIED — communs à toutes les pages
   Balisage : templates/commun/entete.html.twig et pied.html.twig
   ========================================================================== */

/* ------------------------------------------------------------------ annonce */
.annonce { background: var(--annonce-fond); color: var(--annonce-texte); font-size: var(--t-1); }
.annonce__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 40px; }
.annonce p { margin: 0; }
.annonce__lien {
  display: inline-flex; align-items: center; gap: var(--e-2);
  color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.annonce__lien:hover { color: inherit; text-decoration: underline; }
.annonce .icone { width: 1em; height: 1em; }
/* Mobile : la phrase entière, l'icône seule à droite, et toute la barre mène à md-france.fr
   (le lien s'étend sur la barre ; son texte reste lisible par les lecteurs d'écran). */
@media (max-width: 640px) {
  .annonce__ligne { position: relative; gap: var(--e-3); padding-block: var(--e-2); }
  /* Taille calée sur la largeur (la phrase de Meat, la plus longue, fait 25 fois la taille du texte) :
     une ligne de 360 à 640 px ; plus étroit, deux lignes égales. */
  .annonce p { font-size: clamp(11px, calc((100vw - 62px) / 25), 13px); text-wrap: balance; }
  .annonce__lien-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .annonce__lien::after { content: ""; position: absolute; inset: 0; }
  .annonce .icone { flex: none; width: 15px; height: 15px; }
}

/* ------------------------------------------------------------------ en-tête */
.entete {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: var(--plan-entete);
  background: var(--md-papier);
  border-bottom: var(--trait-1) solid var(--md-trait);
}
/* sous 600 px, la barre d'administration WordPress défile avec la page : l'en-tête colle en haut */
@media (max-width: 600px) { .entete { top: 0; } }
.entete__barre { display: flex; align-items: center; gap: var(--e-6); min-height: var(--h-entete); padding-block: var(--e-3); }
.entete__logo { flex: none; line-height: 0; }
.entete__logo img { height: var(--h-logo); width: auto; }

/* La recherche est le cœur de l'en-tête : on vient pour une référence. */
.recherche {
  flex: 1; max-width: 760px; height: 50px;
  display: flex; align-items: stretch;
  background: var(--md-papier);
  border: var(--trait-2) solid var(--md-encre);
  border-radius: var(--rayon-2);
  overflow: hidden;
  transition: box-shadow var(--duree-2) var(--courbe);
}
.recherche:focus-within { box-shadow: 0 0 0 4px var(--marque-trait); }
.recherche__modes { display: flex; gap: 2px; padding: 5px; background: var(--md-papier-2); border-right: var(--trait-1) solid var(--md-trait); }
.recherche__mode {
  padding: 0 var(--e-3); border: 0; border-radius: var(--rayon-1); background: transparent; cursor: pointer;
  font-size: var(--t-0); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-encre-3);
}
.recherche__mode:hover { color: var(--md-encre); }
.recherche__mode[aria-pressed="true"] { background: var(--nuit); color: var(--md-papier); }
.recherche__champ { flex: 1; min-width: 0; padding: 0 var(--e-4); border: 0; background: transparent; outline: none; font-size: var(--t-2); }
.recherche__champ::placeholder { color: var(--md-encre-3); }
.recherche__bouton {
  flex: none; width: 58px; display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--bouton-fond); color: var(--bouton-texte);
  transition: background-color var(--duree-2) var(--courbe), color var(--duree-2) var(--courbe);
}
.recherche__bouton:hover { background: var(--bouton-fond-survol); color: var(--bouton-texte-survol); }
.recherche__bouton .icone { width: 22px; height: 22px; stroke-width: 2.2; }

.entete__actions { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.action {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); border-radius: var(--rayon-2);
  color: var(--md-encre); text-decoration: none; font-size: var(--t-1); font-weight: 700; line-height: 1.25;
}
.action:hover { background: var(--md-papier-2); color: var(--md-encre); }
.action .icone { width: 26px; height: 26px; }
.action__libelle { display: flex; flex-direction: column; }
.action__libelle small { font-size: var(--t-0); font-weight: 400; color: var(--md-encre-3); }
.action .badge-panier {
  position: absolute; top: 0; left: 28px;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--marque); color: var(--sur-marque);
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--md-papier);
}
/* <ce-cart-badge> n'affiche rien quand le panier est vide */
.action ce-cart-badge { display: contents; }

@media (max-width: 1000px) {
  .entete__barre { gap: var(--e-4); }
  .action__libelle { display: none; }
}
@media (max-width: 720px) {
  .entete__barre { flex-wrap: wrap; }
  .recherche { order: 3; flex-basis: 100%; max-width: none; }
  .recherche__mode { padding: 0 var(--e-2); }
}

/* --------------------------------------------------------------- navigation */
.navigation { background: var(--nav-fond); border-bottom: var(--trait-1) solid var(--nav-trait); }
.navigation__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); }
.navigation__liste { display: flex; gap: var(--e-1); list-style: none; overflow-x: auto; scrollbar-width: none; }
.navigation__lien {
  display: inline-flex; align-items: center; height: 50px; padding: 0 var(--e-3);
  color: var(--nav-texte); text-decoration: none; white-space: nowrap;
  font-size: var(--t-1); font-weight: 600;
  box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow var(--duree-2) var(--courbe), color var(--duree-2) var(--courbe);
}
.navigation__lien:hover,
.navigation__lien[aria-current] { color: var(--nav-texte-actif); box-shadow: inset 0 -3px 0 var(--marque); }
.navigation__contact { display: flex; align-items: center; gap: var(--e-5); margin: 0; font-size: var(--t-1); color: var(--nav-texte); white-space: nowrap; }
.navigation__contact a { display: inline-flex; align-items: center; gap: var(--e-2); color: inherit; text-decoration: none; }
.navigation__contact a:hover { color: var(--nav-texte-actif); }
@media (max-width: 1180px) { .navigation__courriel { display: none !important; } }
@media (max-width: 760px) { .navigation__contact { display: none; } }

/* ------------------------------------------------------------- menu mobile
   Sous 720 px, la barre ne garde que le logo, le compte, le panier et ☰ : le
   bouton ☰ ouvre la recherche (dans l'en-tête) et la navigation, posée en
   panneau fixe sous l'en-tête (--bas-entete, calculé par design.js). */
.entete__menu { display: none; }
@media (max-width: 720px) {
  .entete__barre { gap: var(--e-3); }
  .entete__menu {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: calc(var(--e-2) * -1);
    padding: 0; border: 0; border-radius: var(--rayon-2); background: transparent; color: var(--md-encre); cursor: pointer;
  }
  .entete__menu:hover { background: var(--md-papier-2); }
  .entete__menu-barres,
  .entete__menu-barres::before,
  .entete__menu-barres::after {
    display: block; width: 22px; height: 2px; border-radius: 1px; background: currentColor;
    transition: transform var(--duree-2) var(--courbe), background-color var(--duree-2) var(--courbe);
  }
  .entete__menu-barres { position: relative; }
  .entete__menu-barres::before, .entete__menu-barres::after { content: ""; position: absolute; left: 0; }
  .entete__menu-barres::before { top: -7px; }
  .entete__menu-barres::after { top: 7px; }
  .entete__menu[aria-expanded="true"] .entete__menu-barres { background: transparent; }
  .entete__menu[aria-expanded="true"] .entete__menu-barres::before { transform: translateY(7px) rotate(45deg); }
  .entete__menu[aria-expanded="true"] .entete__menu-barres::after { transform: translateY(-7px) rotate(-45deg); }

  .recherche, .navigation { display: none; }
  .menu-ouvert .recherche { display: flex; }
  html.menu-ouvert { overflow: hidden; }
  .menu-ouvert .navigation {
    display: block; position: fixed; z-index: var(--plan-entete); left: 0; right: 0;
    top: var(--bas-entete, 160px); bottom: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-ouvert .navigation__ligne { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--e-2) var(--e-6); }
  .menu-ouvert .navigation__liste { flex-direction: column; gap: 0; overflow: visible; }
  .menu-ouvert .navigation__lien { display: flex; width: 100%; height: 54px; font-size: var(--t-2); border-bottom: var(--trait-1) solid var(--nav-trait); }
  .menu-ouvert .navigation__lien:hover,
  .menu-ouvert .navigation__lien[aria-current] { box-shadow: inset 3px 0 0 var(--marque); }
  .menu-ouvert .navigation__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); padding: var(--e-5) var(--e-3) 0; white-space: normal; }
  .menu-ouvert .navigation__courriel { display: inline-flex !important; }
}

/* --------------------------------------------------------------------- pied */
.pied { margin-top: var(--e-9); background: var(--nuit); color: var(--clair-sur-nuit); font-size: var(--t-1); }
.pied__grille { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--e-7); padding-block: var(--e-8) var(--e-7); }
/* les logos sont sur fond blanc opaque : on leur donne une plaque */
/* logo blanc, posé directement sur la nuit du pied */
.pied__logo { display: inline-block; margin-bottom: var(--e-5); line-height: 0; }
.pied__logo img { height: calc(var(--h-logo) * 1.1); width: auto; }
.pied__signature { max-width: 36ch; }
.pied__contact { list-style: none; display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.pied__contact a { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--md-papier); font-weight: 600; text-decoration: none; }
.pied__contact a:hover { text-decoration: underline; text-decoration-color: var(--accent-sur-nuit); }
.pied__titre {
  margin: 0 0 var(--e-4);
  font-family: var(--f-mono); font-size: var(--t-0); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--md-papier);
}
.pied__liste { list-style: none; display: grid; gap: var(--e-3); }
.pied__liste a { color: var(--clair-sur-nuit); text-decoration: none; }
.pied__liste a:hover { color: var(--md-papier); text-decoration: underline; text-decoration-color: var(--accent-sur-nuit); }
.pied__bas { border-top: var(--trait-1) solid rgba(255, 255, 255, .12); }
.pied__ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-5); }
.pied__ligne p { margin: 0; }
.pied__ligne a { color: var(--md-papier); }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

/* lien vers un autre site (md-france.fr) */
.navigation__externe { width: 14px; height: 14px; margin-left: 6px; opacity: .7; vertical-align: -1px; }