/* Menu telephone (2026-10-05). Sous 64rem, la barre ne garde que le logo,
   un bouton « Menu », la bascule de theme et l appel. Le menu est une
   feuille sous la barre : un BON DE ROUTE vertical, meme langage que le
   menu Solution (route en pointilles, arrets numerotes, papier qui se
   deroule, arrets qui entrent penches de 8,3 degres comme le logotype).
   Il est construit par js/nav-telephone.js a partir des liens de la barre :
   rien n est recopie dans les pages. Accent navy sur clair, or sur navy. */

.menu-tel {
  --tel-accent: var(--navy);
  --tel-survol: rgba(11, 5, 47, 0.05);
}
html[data-theme="dark"] .menu-tel { --tel-accent: var(--gold-2); --tel-survol: rgba(196, 184, 118, 0.12); }

/* Le bouton : absent au-dessus de 64rem (36rem jusqu au 05/10 : jusqu a ~1000 px la barre debordait, et le lien Blog l a allongee). */
.menu-tel__btn { display: none; }

@media (max-width: 64rem) {
  .nav .nav__links { display: none !important; }
  .nav__inner { justify-content: space-between; }
  .menu-tel__btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-left: auto; min-height: 44px; padding: 0 0.75rem;
    font: inherit; font-size: var(--fs-small); font-weight: 700; color: var(--ink);
    background: none; border: 0; border-radius: var(--radius-full); cursor: pointer;
  }
  body.nav-over-dark .menu-tel__btn, html[data-theme="dark"] .menu-tel__btn { color: var(--text-on-dark); }
  .menu-tel__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}

/* L icone : deux traits qui se croisent a l ouverture. */
.menu-tel__icone { position: relative; width: 1.1rem; height: 0.7rem; }
.menu-tel__icone::before,
.menu-tel__icone::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 1px; background: currentColor;
  transform-origin: center; transition: transform 0.5s var(--ease-out-expo);
}
/* Seul transform s anime : les traits se rejoignent au centre (0,35rem
   moins un demi-trait) puis se croisent. */
.menu-tel__icone::before { top: 0; }
.menu-tel__icone::after { bottom: 0; transform: scaleX(0.72); transform-origin: left center; }
.menu-tel-ouvert .menu-tel__icone::before { transform: translateY(calc(0.35rem - 0.75px)) rotate(45deg); }
.menu-tel-ouvert .menu-tel__icone::after { transform-origin: center; transform: translateY(calc(-0.35rem + 0.75px)) rotate(-45deg); }

/* La feuille : sous la barre, toute la hauteur restante. */
.menu-tel {
  position: fixed; left: 0; right: 0; top: var(--tel-top, 4.5rem); bottom: 0; z-index: 110;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--off-white); color: var(--ink);
  border-top: 1px solid var(--ink-faint);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.35s cubic-bezier(0.7, 0, 0.84, 0), visibility 0s linear 0.35s;
}
.menu-tel.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.8s var(--ease-out-expo), visibility 0s; }

.menu-tel__tete {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 0.75rem 2.2rem; padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--ink-faint);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.menu-tel__tete b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink); }

.menu-tel__groupe { margin: 0.9rem 0 0.2rem 2.2rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.menu-tel__liste { position: relative; list-style: none; margin: 0; padding: 0; }
/* La route : du premier point au dernier de chaque liste. */
.menu-tel__liste::before {
  content: ""; position: absolute; left: 1.4rem; top: var(--r-haut, 1.4rem); height: var(--r-long, 0px); width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--tel-accent) 0 6px, transparent 6px 11px);
  transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease;
}
.menu-tel.is-open .menu-tel__liste::before { transform: scaleY(1); transition: transform 0.9s var(--ease-out-expo) 0.15s; }

.menu-tel__lien {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; gap: 0 0.6rem;
  min-height: 44px; padding: 0.6rem 0.6rem; border-radius: 0.8rem; color: inherit; text-decoration: none;
  opacity: 0; transform: translateX(-0.9rem) skewX(-8.3deg);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.3s ease;
}
.menu-tel.is-open .menu-tel__lien {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease calc(var(--i) * 0.06s + 0.15s), transform 0.75s var(--ease-out-expo) calc(var(--i) * 0.06s + 0.15s), background 0.3s ease;
}
.menu-tel__lien:active, .menu-tel__lien:focus-visible { background: var(--tel-survol); outline: none; }
.menu-tel__lien:focus-visible { box-shadow: 0 0 0 2px var(--tel-accent); }
.menu-tel__point {
  grid-row: span 2; justify-self: center; margin-top: 0.4rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--off-white); border: 2px solid var(--tel-accent);
  position: relative; z-index: 1;
}
.menu-tel__lien[aria-current="page"] .menu-tel__point { background: var(--tel-accent); }
.menu-tel__nom { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.menu-tel__num { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--tel-accent); margin-right: 0.45rem; }
.menu-tel__desc { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); margin-top: 0.1rem; }

/* Le pied : appeler, ecrire. */
.menu-tel__pied {
  margin: 1.1rem 0 0 2.2rem; padding-top: 0.9rem; border-top: 1px dashed var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  opacity: 0; transition: opacity 0.2s ease;
}
.menu-tel.is-open .menu-tel__pied { opacity: 1; transition: opacity 0.6s ease 0.6s; }
.menu-tel__pied a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1rem; color: var(--ink);
  text-decoration: underline; text-underline-offset: 0.28em; text-decoration-thickness: 1px; text-decoration-color: var(--ink-faint);
}

/* La page ne defile pas sous la feuille. */
html.menu-tel-ouvert, html.menu-tel-ouvert body { overflow: hidden; }
/* Au-dessus de 64rem, rien de ce menu n existe. */
@media (min-width: 64.01rem) { .menu-tel { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .menu-tel, .menu-tel.is-open { transition: none; clip-path: none; }
  .menu-tel { opacity: 0; } .menu-tel.is-open { opacity: 1; }
  .menu-tel__lien, .menu-tel.is-open .menu-tel__lien { transition: none; transform: none; opacity: 1; }
  .menu-tel__liste::before, .menu-tel.is-open .menu-tel__liste::before { transform: none; transition: none; }
  .menu-tel__pied, .menu-tel.is-open .menu-tel__pied { transition: none; opacity: 1; }
  .menu-tel__icone::before, .menu-tel__icone::after { transition: none; }
}