/* ---------------------------------------------------------------------------
   Menu mobile : le sommaire du numero, accessible depuis n'importe ou.
   Le bandeau est deja fixe en haut de toutes les pages, donc le bouton reste
   sous le pouce quelle que soit la position dans la page. Rien ne s'affiche
   au-dessus de 900 px : le bandeau y porte deja sa navigation.
   --------------------------------------------------------------------------- */

.mm-btn{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer; color:var(--ink,#1C3754);
  -webkit-tap-highlight-color:transparent;
}
.mm-break{ display:none; }
.mm-bars{ display:block; width:21px; height:13px; position:relative; }
.mm-bars i{
  position:absolute; left:0; right:0; height:1.5px; background:currentColor; opacity:.85;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.mm-bars i:nth-child(1){ top:0; }
.mm-bars i:nth-child(2){ top:50%; margin-top:-.75px; }
.mm-bars i:nth-child(3){ bottom:0; }
.mm-btn[aria-expanded="true"] .mm-bars i:nth-child(1){ transform:translateY(5.75px) rotate(45deg); }
.mm-btn[aria-expanded="true"] .mm-bars i:nth-child(2){ opacity:0; }
.mm-btn[aria-expanded="true"] .mm-bars i:nth-child(3){ transform:translateY(-5.75px) rotate(-45deg); }

@media (max-width:900px){
  .mm-btn{ display:inline-flex; }
  /* Accueil : le bandeau est centre sur le logo, le bouton prend le coin droit
     que la mention Catalogue occupait. Elle revient dans le panneau, en 15. */
  .masthead-row .mm-btn{ position:absolute; right:14px; top:50%; transform:translateY(-50%); }
  .masthead .catalogue-link{ display:none; }
  /* Pages interieures : le bouton tient la premiere ligne avec le logo et la
     langue, la mention de retour prend la seconde sur toute la largeur. */
  .head-row .mm-btn{ order:2; margin-right:-10px; }
  /* Une coupure sans hauteur renvoie la mention de retour a la ligne sans
     l'etirer : son filet reste colle au texte au lieu de traverser l'ecran. */
  .head-row .mm-break{ display:block; order:3; flex-basis:100%; height:0; }
  .head-row .back-link{ order:4; }
  /* Les quatre liens du bandeau interieur passent dans le panneau. */
  .home-links{ display:none; }
}

/* ---- Voile ---- */
.mm-scrim{
  position:fixed; inset:0; z-index:290;
  background:rgba(28,55,84,.38);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.mm-on .mm-scrim{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }

/* ---- Panneau ---- */
.mm-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:300;
  width:min(100%,400px);
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.975);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border-left:1px solid rgba(28,55,84,.14);
  box-shadow:-18px 0 48px rgba(28,55,84,.12);
  transform:translateX(100%); visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s;
  overscroll-behavior:contain;
}
.mm-on .mm-panel{ transform:none; visibility:visible; transition-delay:0s; }

.mm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px 10px 22px;
  border-bottom:1px solid rgba(28,55,84,.14);
}
.mm-logo{ display:flex; align-items:center; text-decoration:none; }
.mm-logo img{ height:46px; width:auto; display:block; }
.mm-close{
  width:44px; height:44px; padding:0; margin-right:-8px;
  background:none; border:0; cursor:pointer; color:var(--ink,#1C3754);
  font-family:Georgia,'Times New Roman',serif; font-size:1.6rem; line-height:1; opacity:.55;
  -webkit-tap-highlight-color:transparent;
}
.mm-close:hover{ opacity:1; }

.mm-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 22px 8px; }
/* Le titre reprend le Didot italique du sommaire imprime, pour que le panneau
   soit lu comme la meme page et non comme un menu rapporte. */
.mm-kicker{
  font-family:Didot,'Bodoni 72','Bodoni MT',Georgia,'Times New Roman',serif;
  font-style:italic; font-weight:400; font-size:1.35rem;
  color:var(--ink,#1C3754); margin:0 0 12px;
}
.mm-groupe{
  font-family:'Changa',sans-serif; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grenadine,#751311);
  margin:18px 0 2px;
}
.mm-kicker + .mm-groupe{ margin-top:0; }
.mm-row{
  display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid rgba(28,55,84,.14);
  text-decoration:none; color:var(--ink,#1C3754);
  transition:background .2s ease;
}
.mm-row:last-child{ border-bottom:0; }
.mm-num{ font-family:'Changa',sans-serif; font-size:.64rem; opacity:.45; }
.mm-title{ font-family:Georgia,'Times New Roman',serif; font-size:.98rem; line-height:1.2; }
.mm-row:active{ background:rgba(28,55,84,.05); }
/* La ou l'on se trouve dans la page, pour que le menu situe autant qu'il conduise. */
.mm-row.mm-ici{
  margin:0 -14px; padding-left:14px; padding-right:14px;
  background:rgba(117,19,17,.05); box-shadow:inset 2px 0 0 var(--grenadine,#751311);
}
.mm-row.mm-ici .mm-title{ color:var(--grenadine,#751311); }
.mm-row.mm-ici .mm-num{ opacity:.75; }

.mm-foot{
  border-top:1px solid rgba(28,55,84,.14);
  padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:10px;
}
.mm-salon{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Changa',sans-serif; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ink,#1C3754);
}
.mm-salon::before{
  content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--safran,#F4C61F); box-shadow:0 0 0 3px rgba(244,198,31,.22);
}
.mm-mail{
  font-family:'Changa',sans-serif; font-size:.64rem; letter-spacing:.06em;
  text-decoration:none; color:var(--ink,#1C3754); opacity:.55;
}

/* Page verrouillee pendant que le panneau est ouvert : le fond ne defile pas
   derriere lui, et la position est retrouvee telle quelle a la fermeture. */
html.mm-lock, html.mm-lock body{ overflow:hidden; }
/* L'accueil aimante ses pages les unes aux autres. Fige pendant l'ouverture,
   sinon le blocage du defilement fait sauter le fond de quelques dizaines de
   pixels et l'on ne revient pas exactement la ou l'on etait. */
html.mm-lock{ scroll-snap-type:none; }

@media (prefers-reduced-motion:reduce){
  .mm-panel, .mm-scrim, .mm-bars i{ transition:none; }
}

/* ------------------------------------------------------------------
   Le curseur BEYT : le palmier officiel en Olive, à la taille d'une
   souris. Le fichier source est
   Visuels/Identite-Visuelle/Icones/Palmier/Vectoriel/
   2026-08-20-BEYT-Icone-Palmier-Vectorisee-Olive-v01.svg, rendu en 32
   et 64 pixels pour rester net sur un écran Retina.
   Les éléments cliquables gardent la main du système : le curseur est
   une signature, il ne doit pas coûter une affordance.
   ------------------------------------------------------------------ */
html,
body {
  cursor: url("/assets/curseur/palmier-olive-32.png") 6 3, auto;
  cursor: -webkit-image-set(
      url("/assets/curseur/palmier-olive-32.png") 1x,
      url("/assets/curseur/palmier-olive-64.png") 2x) 6 3, auto;
  cursor: image-set(
      url("/assets/curseur/palmier-olive-32.png") 1x,
      url("/assets/curseur/palmier-olive-64.png") 2x) 6 3, auto;
}

a,
button,
summary,
label,
select,
[role="button"],
input[type="submit"],
input[type="button"] {
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea {
  cursor: text;
}