/* ============================================================
   Café de Rouen — animations partagées (boutons + transitions de pages)
   Chargé après le <style> de chaque page pour en surcharger les transitions.
   ============================================================ */

/* ---------- Transitions entre les pages (View Transitions API) ----------
   Chrome/Edge 126+, Safari 18.2+. Les autres navigateurs changent de page
   normalement, sans effet. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: cdr-page-out .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: cdr-page-in .42s cubic-bezier(.16, 1, .3, 1) both; }

/* L'en-tête reste en place pendant que le contenu change */
.cdr-header { view-transition-name: cdr-header; }
::view-transition-group(cdr-header) { animation-duration: .3s; }

@keyframes cdr-page-out { to   { opacity: 0; transform: translateY(-10px); } }
@keyframes cdr-page-in  { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Boutons ---------- */
.cdr-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Reflet qui balaie le bouton au survol */
.cdr-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .28) 50%, transparent 75%);
  transform: translateX(-120%);
  pointer-events: none;
}
@media (hover: hover) {
  .cdr-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55); }
  .cdr-btn:hover::after { transform: translateX(120%); transition: transform .65s ease; }
  /* Boutons à contour : ils se remplissent au survol */
  .cdr-ghost-light:hover { background: #F2F0EB !important; color: #1B1E1F !important; }
  .cdr-ghost-dark:hover  { background: #1B1E1F !important; color: #FFFFFF !important; }
  .cdr-btn:hover .cdr-arrow { transform: translateX(5px); }
}
/* Appui (souris et doigt) : le bouton s'enfonce */
.cdr-btn:active {
  transform: translateY(0) scale(.96);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .4);
  transition-duration: .08s;
}
.cdr-arrow { display: inline-block; margin-left: .35em; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Puces / onglets de la carte ---------- */
.cdr-chip {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background-color .2s ease,
              border-color .2s ease, color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .cdr-chip[aria-selected="false"]:hover,
  .cdr-chip[aria-pressed="false"]:hover { transform: translateY(-1px); border-color: #D91F16 !important; }
}
.cdr-chip:active { transform: scale(.95); transition-duration: .08s; }
/* La puce qui vient d'être choisie « rebondit » */
.cdr-chip[aria-selected="true"], .cdr-chip[aria-pressed="true"] { animation: cdr-pop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cdr-pop { 0% { transform: scale(.92); } 100% { transform: scale(1); } }

/* Contenu de la carte : les rubriques arrivent en cascade à chaque changement d'onglet */
#cdr-groups:not([data-anim="off"]) > section { animation: cdr-rise .45s cubic-bezier(.16, 1, .3, 1) both; }
#cdr-groups > section:nth-child(2) { animation-delay: .06s; }
#cdr-groups > section:nth-child(3) { animation-delay: .12s; }
#cdr-groups > section:nth-child(4) { animation-delay: .18s; }
@keyframes cdr-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Menu mobile ---------- */
.cdr-burger { transition: transform .15s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.cdr-burger:active { transform: scale(.92); }
.cdr-burger svg { animation: cdr-icon-in .28s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cdr-icon-in { from { opacity: 0; transform: rotate(-90deg) scale(.6); } }

.cdr-menu.is-open { animation: cdr-menu-in .26s cubic-bezier(.16, 1, .3, 1); transform-origin: top; }
.cdr-menu.is-open a { animation: cdr-rise .34s cubic-bezier(.16, 1, .3, 1) both; }
.cdr-menu.is-open a:nth-child(2) { animation-delay: .03s; }
.cdr-menu.is-open a:nth-child(3) { animation-delay: .06s; }
.cdr-menu.is-open a:nth-child(4) { animation-delay: .09s; }
.cdr-menu.is-open a:nth-child(5) { animation-delay: .12s; }
@keyframes cdr-menu-in { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } }

/* ---------- Mouvement réduit : on coupe tout ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cdr-btn, .cdr-chip, .cdr-burger, .cdr-arrow { transition: none !important; }
  .cdr-btn:hover, .cdr-btn:active, .cdr-chip:active, .cdr-chip:hover { transform: none !important; }
  .cdr-btn::after { display: none; }
  .cdr-chip, .cdr-burger svg, .cdr-menu.is-open, .cdr-menu.is-open a, #cdr-groups > section { animation: none !important; }
}