/* En-tête modèle 1 : barre pleine qui prend l'aplat du chapitre passant sous son bord bas ; barre basse du téléphone. */
.entete {
  position: fixed;
  z-index: 50;
  top: var(--demobar-offset, 0px);
  left: 0;
  right: 0;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: max(var(--marge), env(safe-area-inset-left)) max(var(--marge), env(safe-area-inset-right));
  background: var(--fond-barre);
  color: var(--texte-barre);
  transition: background-color .25s, color .25s, box-shadow .25s;
  --fond-barre: var(--vert);
  --texte-barre: var(--encre);
  --lisere: var(--encre);
}
[data-teinte="encre"].entete, [data-teinte="encre"].barre-basse { --fond-barre: var(--encre); --texte-barre: #fff; --lisere: #fff; }
[data-teinte="rouge"].entete, [data-teinte="rouge"].barre-basse { --fond-barre: var(--rouge); --texte-barre: #fff; --lisere: #fff; }
[data-teinte="blanc"].entete, [data-teinte="blanc"].barre-basse { --fond-barre: #fff; --texte-barre: var(--encre); --lisere: rgb(12 27 34 / .3); }
.entete[data-barre="defile"] { box-shadow: 0 6px 12px -8px rgb(12 27 34 / .35); }
.entete[data-barre="defile"][data-teinte="blanc"] { box-shadow: 0 1px 0 rgb(12 27 34 / .12), 0 6px 12px -8px rgb(12 27 34 / .35); }
.entete :focus-visible, .barre-basse :focus-visible { outline-color: currentColor; }
.entete .guidon:focus-visible, .barre-basse .guidon:focus-visible { outline-color: var(--texte-barre); }
/* Sur l'encre, le guidon passe au vert de carène, texte à l'encre. */
[data-teinte="encre"] .guidon { --fond: var(--vert); color: var(--encre); }

.logo {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  color: inherit;
}
.logo svg { width: 127px; height: 41px; }
@media (min-width: 1100px) { .logo svg { width: 176px; height: 57px; } }

.nav { display: none; }
.entete__tel { display: none; }
.entete__guidon { margin-left: auto; min-height: 44px; width: 96px; padding: 0 22px 0 14px; justify-content: flex-start; }

.bouton-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  width: 80px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
}
.bouton-menu__signe { width: 24px; height: 16px; flex: none; }
.bouton-menu__mots { display: inline-grid; }
.bouton-menu__mots > * { grid-area: 1 / 1; }
.bouton-menu[aria-expanded="false"] .bouton-menu__mots > :last-child,
.bouton-menu[aria-expanded="true"] .bouton-menu__mots > :first-child { visibility: hidden; }

@media (min-width: 1100px) {
  .entete { gap: 0; }
  .nav { display: block; margin-left: 40px; }
  .nav ul { display: flex; gap: 28px; }
  .nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
  }
  .nav a[aria-current]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background: currentColor;
  }
  @media (hover: hover) { .nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: currentColor; } }
  .entete__tel {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    font-weight: 600;
    text-decoration: none;
  }
  .entete__guidon { margin-left: 24px; width: 136px; min-height: 48px; padding: 0 30px 0 20px; }
  .bouton-menu { display: none; }
}

/* Barre basse du téléphone : le prix au pouce, puis le bateau à l'écran. */
.barre-basse {
  position: fixed;
  z-index: 49;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--bb-h);
  padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--fond-barre);
  color: var(--texte-barre);
  transition: background-color .25s, color .25s, transform .3s var(--courbe), visibility 0s;
  --fond-barre: var(--vert);
  --texte-barre: var(--encre);
}
.barre-basse[data-teinte="blanc"] { box-shadow: 0 -1px 0 rgb(12 27 34 / .12); }
.barre-basse.est-cachee { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--courbe), visibility 0s .3s; }
:root:has(input:focus, select:focus) .barre-basse { display: none; }
.barre-basse__quoi { display: grid; line-height: 1.15; }
.barre-basse__quoi span { font-size: 14px; }
.barre-basse__quoi b { font-weight: 800; font-size: 24px; min-width: 5.2em; }
.barre-basse .guidon { min-height: 48px; }
@media (min-width: 1100px) { .barre-basse { display: none; } }
@media (max-height: 480px) and (orientation: landscape) {
  :root { --entete-h: 56px; }
  .barre-basse { min-height: 56px; padding-block: 4px calc(4px + env(safe-area-inset-bottom)); }
}