/* =============================================================================
   blocs/offcanvas.css — LE PANNEAU COULISSANT MOBILE (`buildOffCanvasPanel()` de la maquette,
   `mobile.js:653`) et ses DEUX usages : les filtres du catalogue (Nos offres) et « Chercher un
   autre animal » sur la fiche espèce.
   =============================================================================
   Repris de `mobile.css` par classe. Sous 1024 px seulement : au-dessus, tout est `display:none`.
   ⚠️ Le site entier glisse à droite pendant que le panneau est ouvert (`html.of-open` décale
   `.site-header` et `#main-content`) — `#main-content` est l'`id` du `<main>` du gabarit, le
   seul sélecteur d'identifiant gardé : c'est la structure du layout, pas un composant.
   ⚠️ `#ofReset` / `#ofToggle` deviennent `.of-reset` / `.of-toggle` (convention : aucun `id` stylé).
   ============================================================================= */

/* mobile.css l. 46 */
.an-panel-bar{ display:none; }
/* mobile.css l. 1397 */
.of-panel,
.of-scrim,
.of-mob-btn{ display:none; }
/* mobile.css l. 1398 */
@media (max-width:1024px){
  :root{ --of-panel-w: min(80vw, 340px); }   /* mobile.css l. 1401 */
  html.of-open .site-header,
  html.of-open #main-content{ transform:translateX(var(--of-panel-w)); }
  .of-scrim{
    display:block; position:fixed; inset:0; z-index:1240;
    background:rgba(14,14,14,.45);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .of-scrim.is-open{ opacity:1; pointer-events:auto; }
  .of-panel{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; width:var(--of-panel-w);
    z-index:1250; background:#0e0e0e;
    box-shadow:24px 0 60px -20px rgba(0,0,0,.6);
    transform:translateX(-100%);
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .of-panel.is-open{ transform:translateX(0); }
  .of-panel__head{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:calc(env(safe-area-inset-top,0px) + 20px) 20px 16px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .of-panel__title{ font-family:var(--serif); font-size:clamp(20px,5.5vw,24px); color:var(--blanc); margin-right:auto; }
  .of-panel__reset{
    flex:0 0 auto; width:40px; height:40px; border-radius:6px;
    background:var(--noir); border:1px solid rgba(255,255,255,.18); color:var(--blanc);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  .of-panel__body .of-reset{ display:none; }
  .of-panel__close{
    flex:0 0 auto; width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.08); border:none; color:var(--blanc);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    touch-action:manipulation;
  }
  .of-panel__close:focus,
  .of-panel__reset:focus{ outline:none; }
  .of-panel__close:focus-visible,
  .of-panel__reset:focus-visible{
    outline:2px solid var(--jaune); outline-offset:2px;
  }
  .of-panel__body{
    flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    scrollbar-width:none;
    padding:18px 20px 24px; display:flex; flex-direction:column; gap:16px;
  }
  .of-panel__body::-webkit-scrollbar{ display:none; }
  .of-panel__foot{
    flex:0 0 auto; padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(255,255,255,.12);
  }
  .of-panel__see{ width:100%; justify-content:center; }
  .of-panel__body .of-types{ padding:0; justify-content:flex-start; }
  .of-panel__body .of-filtres__inner{
    display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:0;
  }
  .of-panel__body .of-toggle{ width:100%; justify-content:center; margin:0; }
  .of-panel__body .of-chip{ width:100%; }
  .of-panel__body .of-chip__btn{ width:100%; justify-content:space-between; }
  .of-panel__body .of-grad,
  .of-panel__body .of-slider{ display:flex; width:100%; justify-content:space-between; }
  .of-panel__body .of-slider__range{ flex:1 1 auto; width:auto; }
  .of-panel__body .of-pop{
    position:static; width:100%; min-width:0; max-width:none; margin-top:8px;
    box-shadow:none; border-color:rgba(255,255,255,.14); background:var(--blanc);
  }
  .of-panel__body .of-list--pays,
  .of-panel__body .of-list--fam{ min-width:0; }
  .of-panel__body .of-list--pays{ grid-template-columns:1fr; }
  .of-panel__body .of-cal{ min-width:0; }
  .of-panel__body .of-nivpop{
    position:fixed; left:20px; right:20px; bottom:calc(90px + env(safe-area-inset-bottom,0px));
    width:auto; top:auto; transform:none;
  }
  .of-mob-btn{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:14px 18px; border-radius:14px; border:none; cursor:pointer;
    background:var(--jaune); color:var(--noir); font:inherit; font-size:var(--fs-small);
    font-weight:700; touch-action:manipulation;
  }
  .of-mob-btn__n{ font-weight:600; opacity:.7; }
  html.of-open .mob-fab{
    opacity:0; pointer-events:none; visibility:hidden;   /* visibility (pas juste opacity) : sort aussi le
      burger caché de l'ordre de tabulation clavier - sinon un Tab pourrait encore l'atteindre et ouvrir
      le volet menu PAR-DESSUS ce panneau modal. */
    transition:opacity .2s var(--ease), visibility 0s .2s;
  }
}
/* mobile.css l. 1554 */
@media (prefers-reduced-motion:reduce){
  .of-panel,
  .of-scrim,
  html.of-open .mob-fab{ transition:none; }
}
/* mobile.css l. 1725 */
@media (max-width:1024px){
  .an-panel-bar{ display:block; background:var(--noir); padding:16px clamp(16px,4vw,44px); }
  .of-panel__body:has(.an-panel-list){ padding-top:0; }
  .an-panel-list{ display:flex; flex-direction:column; padding-top:18px; }
  .an-panel-letter{
    position:sticky; top:0; z-index:1; background:#0e0e0e;
    color:rgba(255,255,255,.5); font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; padding:10px 4px 6px;
  }
  .an-panel-item{
    display:block; padding:12px 4px; color:var(--blanc); text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-family:var(--serif); font-size:16px; touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .an-panel-item[aria-current="page"]{ color:var(--jaune); font-weight:600; }
}
/* mobile.css l. 1782 */
@media (hover:none){
  .an-panel-item:hover{ color:var(--blanc); }
}
/* mobile.css l. 2023 */
@media (max-width:1024px){
  .of-panel__body{ overflow-x:hidden; }
  .of-panel__body .of-slider__val{ min-width:0; }
}
/* mobile.css l. 2038 */
@media (max-width:1024px){
  .of-panel__body .of-slider{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:12px 10px;
  }
  .of-panel__body .of-slider__lbl{ grid-column:1; grid-row:1; }
  .of-panel__body .of-slider__val{ grid-column:2; grid-row:1; min-width:0; text-align:right; }
  .of-panel__body .of-slider__range{ grid-column:1 / -1; grid-row:2; width:100%; min-width:0; }
}
/* mobile.css l. 2066 */
@media (max-width:1024px){
  .of-panel__body .of-slider__range::-webkit-slider-thumb{ width:26px; height:26px; }
  .of-panel__body .of-slider__range::-moz-range-thumb{ width:26px; height:26px; }
  .of-panel__body .of-chip__btn{ justify-content:flex-start; }
  .of-panel__body .of-chip__car{ margin-left:auto; }
  .of-panel__body .of-chip .of-pic{ width:24px; height:24px; }
  .of-panel__body .of-chip[data-chip="fam"]:not(.is-active) .of-pic{ display:none; }
  .of-panel__body .of-grad{ justify-content:flex-start; }
  .of-panel__body .of-grad__pattes{ margin-left:6px; }
  .of-panel__body .of-grad__txt{ margin-left:auto; }
  .of-panel__body .of-grad__info{ margin-left:12px; }
  .of-panel__body .of-patte{ width:20px; height:20px; }
}