/* En-tête à deux étages blancs : le rang utile remonte au défilement, le rang principal reste. */
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 96px; pointer-events: none; }
.entete { position: fixed; z-index: 50; top: var(--demobar-offset, 0px); left: 0; right: 0;
  height: calc(var(--utile) + var(--rang)); background: var(--blanc);
  transition: transform .25s cubic-bezier(.3, .7, .2, 1), box-shadow .25s; }
.entete[data-etat="defile"] { transform: translateY(calc(-1 * var(--utile)));
  box-shadow: 0 1px 0 rgb(22 32 27 / .12), 0 8px 24px -16px rgb(22 32 27 / .35); }
.tableau-colle .entete[data-etat="defile"] { box-shadow: none; }
main { padding-top: calc(var(--utile) + var(--rang)); }

.entete__utile { height: var(--utile); border-bottom: 1px solid rgb(22 32 27 / .1); }
.entete__utile-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font: 500 14px/1 var(--texte); color: var(--gris); }
.entete__ouvert .court { display: none; }
.entete__tel { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1 var(--texte);
  color: var(--encre); text-decoration: none; z-index: 1; }
.entete__tel:hover { text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 4px; }
.entete__adresse { justify-self: end; }

.entete__rang { height: var(--rang); }
.entete__rang-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; }
.logo { display: block; justify-self: start; color: var(--encre); height: 44px; padding: 7px 0; }
.logo svg { height: 30px; width: auto; aspect-ratio: 6470 / 1510; }
.nav { display: flex; gap: 28px; }
.nav a { position: relative; display: flex; align-items: center; min-height: 44px; font: 500 16px/1 var(--texte); text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--rouge);
  transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav a:hover::after, .nav a[aria-current]::after { transform: none; }
.action { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 116px;
  border-radius: 8px; background: var(--rouge); color: var(--blanc); font: 700 16px/1 var(--texte); text-decoration: none;
  transition: background-color .15s; }
.action:hover { background: var(--rouge-f); }
.bouton-menu { display: none; }

@media (max-width: 1023.98px) {
  .entete__utile-in { grid-template-columns: 1fr auto; font-size: 14px; }
  .entete__ouvert .long, .entete__adresse { display: none; }
  .entete__ouvert .court { display: inline; }
  .entete__tel { justify-self: end; }
  .entete__rang-in { grid-template-columns: 1fr auto auto; column-gap: 8px; }
  .nav { display: none; }
  .logo { height: 44px; padding: 10px 0; }
  .logo svg { height: 24px; }
  .entete__rang .action { width: 100px; }
  .bouton-menu { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 2px 0 6px;
    border: 0; background: none; font: 700 16px/1 var(--texte); flex: none; }
  .bouton-menu__toise { width: 18px; height: 22px; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; }
  .bouton-menu__toise .rouge { stroke: var(--rouge); stroke-width: 3; }
  .bouton-menu__mot { display: inline-grid; } .bouton-menu__mot > * { grid-area: 1 / 1; }
  [aria-expanded="false"] .bouton-menu__mot > :last-child, [aria-expanded="true"] .bouton-menu__mot > :first-child { visibility: hidden; }
}
@media (max-width: 379.98px) {
  .logo svg { height: 22px; }
  .entete__rang .action { width: 92px; }
}

/* Le menu : une feuille rouge de 70 dvh qui monte de la barre basse. */
.menu { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: 70dvh; display: none; flex-direction: column;
  justify-content: flex-end; gap: 24px; padding: 24px var(--mg) calc(24px + env(safe-area-inset-bottom));
  background: var(--rouge); color: var(--blanc); overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1), display .35s; transition-behavior: allow-discrete; }
.menu-ouvert .menu { display: flex; transform: none; }
@starting-style { .menu-ouvert .menu { transform: translateY(100%); } }
.menu-ouvert { overflow: hidden; }
.menu-ouvert body::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgb(22 32 27 / .45); }
.menu__toise { width: auto; height: 96px; margin-bottom: auto; --q-corps: var(--blanc); --q-garde: var(--encre); --q-jour: var(--rouge);
  --q-moyeu: var(--rouge); --visiere: var(--rouge); color: var(--blanc); }
.menu__regle { fill: none; stroke: var(--blanc); stroke-width: 3; stroke-linecap: round; }
.menu__nav { display: grid; }
.menu__nav a { display: flex; align-items: center; min-height: 60px; font: 400 40px/1 var(--titre); text-decoration: none; }
.menu__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu__pratique { display: grid; gap: 4px; font: 500 15px/1.4 var(--texte); }
.menu__pratique a { display: inline-flex; align-items: center; min-height: 48px; font: 700 22px/1 var(--texte); text-decoration: none; justify-self: start; }
@media (min-width: 1024px) { .menu { display: none !important; } }

/* La barre basse du téléphone. */
.barre-basse { position: fixed; z-index: 48; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: space-between;
  gap: 12px; min-height: calc(56px + env(safe-area-inset-bottom)); padding: 6px var(--mg) calc(6px + env(safe-area-inset-bottom));
  background: var(--blanc); border-top: 2px solid var(--encre); transition: transform .25s; }
.barre-basse p { font: 500 15px/1.25 var(--texte); }
.barre-basse .action { width: 100px; flex: none; }
.barre-basse.est-masquee { transform: translateY(calc(100% + 4px)); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
:root:has(input:focus, select:focus) .barre-basse { visibility: hidden; }
@media (max-width: 1023.98px) { .barre-basse { display: flex; } }
@media (max-height: 500px) and (orientation: landscape) { .menu { height: 100dvh; } }
.menu-ouvert .barre-basse { visibility: hidden; }
.tableau-colle .tete th { box-shadow: 0 1px 0 rgb(22 32 27 / .12), 0 10px 18px -14px rgb(22 32 27 / .4); }
@media (max-width: 1023.98px) { .tableau-colle .tete th { box-shadow: none; } .tableau-colle .tableau thead { box-shadow: 0 1px 0 rgb(22 32 27 / .12), 0 10px 18px -14px rgb(22 32 27 / .4); } }