/* =============================================================================
   L'ÉPHÉMÉRIDE — le carrousel des jours

   Une carte par jour, arrachée d'un calendrier mural : perforation et deux
   trous en haut, l'image ensuite, le texte dessous. Les cartes reposent PAR LE
   BAS sur une tablette encrée — les hauts sont inégaux, comme des feuillets
   alignés sur une étagère, jamais une grille de tuiles.

   Cette feuille est partagée : la page d'accueil et l'atelier /v2 montrent le
   même carrousel. Elle ne définit que le composant — encre, papier et échelle
   viennent de tokens.css, que les deux pages chargent d'abord.

   Les tailles ont été recalées sur la rampe de dix pas en arrivant sur le site :
   l'atelier avait sa propre échelle, dix-neuf valeurs à la main. Un module qui
   descend de l'atelier apporte son dessin, pas son échelle.
   ========================================================================== */

:root{
  /* La largeur d'une feuille, et celle du jour, un peu plus grande. */
  --carte: clamp(238px, 72vw, 284px);
  --carte-jour: calc(var(--carte) + 26px);
  /* La gouttière `--pad` vit dans tokens.css : le bandeau s'en sert lui aussi,
     y compris sur les pages qui ne chargent pas le rail. */
}

.jours{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(22px, 3.4vw, 38px) var(--pad) clamp(30px, 5vw, 52px);
}
.jours__tete{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(16px, 2.2vw, 24px);
}
.jours__kicker{ margin:0 0 .5rem; color:var(--ink-soft); }
.jours__titre{
  font-family:var(--disp); font-weight:400; letter-spacing:-.008em;
  font-size:var(--t-head); line-height:1.05;
  margin:0; max-width:18ch;
}
.jours__lede{ margin:.45rem 0 0; color:var(--ink-soft); font-size:var(--t-base); }
.jours__note{
  margin:.7rem 0 0; font-size:var(--t-xs); color:var(--ink-soft);
  border-top:2px solid var(--hair); padding-top:.55rem; max-width:42ch;
}

/* ------------------- la tête de section, page d'accueil --------------------
   Sur l'accueil, « Au programme » est resté seul : le titre répétait ce que la
   feuille du jour annonce déjà, et le compteur numérotait des jours qu'on voit
   défiler. Il n'est donc plus une étiquette mais le titre de la section — d'où
   la display et le calage à gauche, comme un intertitre de journal. Les
   capitales suivies restent réservées aux pas sous .8 rem : elles tombent.
   Tout est porté par #horaire, que /v2 n'a pas : sa tête complète est intacte. */
#horaire .jours__tete{ display:block; margin-bottom:clamp(18px, 2.4vw, 26px); }
#horaire .jours__kicker{
  margin:0; font-family:var(--disp); font-weight:400;
  font-size:var(--t-head); line-height:1.05; letter-spacing:-.008em;
  text-transform:none; color:var(--ink); text-align:left; max-width:18ch;
}
#horaire .jours__note{ margin-top:.8rem; }

/* la rame : où l'on est dans les jours, et comment on s'y déplace */
.rame{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin:0; }
.rame__compte{
  font-family:var(--disp); font-size:var(--t-base); letter-spacing:.04em; color:var(--ink-soft);
}
.rame__compte span{ color:var(--ink); }
.rame__aide{
  font-size:var(--t-label); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px dashed var(--hair); padding-bottom:.15rem;
}

/* ---------------------------------- le rail --------------------------------
   Plein bord : les cartes sortent du cadre à droite, c'est ce qui dit qu'il y en
   a d'autres. Elles reposent PAR LE BAS sur la tablette — align-items:flex-end.  */

.rail{
  display:flex; align-items:flex-end; gap:clamp(14px, 2vw, 22px);
  /* Un seul axe défile. Sans `overflow-y` déclaré, la règle en cascade rend
     l'axe vertical `auto` dès que l'horizontal ne l'est plus : le rail gagnait
     une barre verticale et rognait ce qui dépasse. `hidden` ferme l'axe ; le
     rembourrage plus bas rend la place pour que rien n'ait à dépasser. */
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--pad));
  /* Le rembourrage laisse la première feuille — celle du jour — se poser au
     milieu du rail. À gauche, la place des jours déjà arrachés.
     En bas : les feuilles sont posées de travers et portent une ombre, toutes
     deux passaient sous le bord. La marge négative annule la hauteur ajoutée,
     pour que la tablette reste collée dessous. */
  padding:22px max(var(--pad), calc(50% + var(--pad) - var(--carte)/2)) 26px
              max(var(--pad), calc(50% + var(--pad) - var(--carte-jour)/2));
  margin-bottom:-26px;
  cursor:grab; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail[data-drag]{ cursor:grabbing; scroll-snap-type:none; }
.rail[data-drag] *{ pointer-events:none; }

/* la tablette : un trait d'encre et un bout de store rayé, plein bord */
.tablette{
  height:13px; border-top:3px solid var(--ink);
  margin-inline:calc(-1 * var(--pad));
  background:repeating-linear-gradient(45deg, var(--butter-2) 0 8px, var(--butter) 8px 16px);
}

/* ------------------------ les bords du rail, accueil -----------------------
   Le rail et sa tablette tombent sur le cadre de la page — le même que suit le
   filet sous les onglets, à 24 px en dehors de la colonne de texte. Les avoir
   rentrés sur le texte les désalignait de ce filet ; ils reprennent donc leur
   plein bord (la marge négative, plus haut).

   Restait la coupe : au bord, une feuille était tranchée net par le cadre. Le
   masque la fait disparaître dans le fond au lieu de la couper. On garde ce que
   la coupe disait — il y a d'autres jours de ce côté — sans l'arête. Le masque
   s'applique au cadre, pas au contenu : il ne défile pas avec les feuilles.
   /v2 n'a pas #horaire et garde sa coupe franche. */
#horaire .rail{
  --fondu:clamp(26px, 4.5vw, 58px);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fondu),
                     #000 calc(100% - var(--fondu)), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--fondu),
                     #000 calc(100% - var(--fondu)), transparent 100%);
}

/* --------------------------------- la carte -------------------------------- */

.jour{
  position:relative; flex:0 0 auto; width:var(--carte);
  scroll-snap-align:center; cursor:pointer;
  display:flex; flex-direction:column;
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(var(--tilt,0deg)); transform-origin:bottom center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rail > .jour:nth-child(4n+1){ --tilt:-.7deg; }
.rail > .jour:nth-child(4n+2){ --tilt:.5deg; }
.rail > .jour:nth-child(4n+3){ --tilt:-.35deg; }
.rail > .jour:nth-child(4n)  { --tilt:.75deg; }
.jour:hover, .jour:focus-within, .jour[data-open]{
  --tilt:0deg; transform:translateY(-5px); box-shadow:8px 8px 0 var(--ink);
}

/* la déchirure : deux trous de calendrier et un pointillé */
.jour__perf{
  flex:0 0 auto; height:30px; padding-inline:13px;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:var(--butter-2); border-bottom:2px dashed var(--ink);
}
.jour__trou{
  flex:0 0 auto; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--ink); background:var(--butter);
}
.jour__mois{
  font-size:var(--t-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* les jours passés : la feuille est arrachée, elle pâlit dans la crème et ne se
   déplie plus. Elle reste lisible — c'est le contexte d'aujourd'hui, pas un
   décor — et remonte au survol pour qui veut vérifier ce qu'il a manqué. */
.jour[data-passe]{ opacity:.42; box-shadow:3px 3px 0 var(--ink); }
.jour[data-passe]:hover, .jour[data-passe]:focus-within{ opacity:.85; }
.jour[data-passe] .jour__corps{ padding-bottom:18px; }

/* aujourd'hui : la déchirure passe au cobalt. Un seul aplat de bleu sur la page.
   La feuille est plus grande et décollée de la tablette — elle dépasse les autres
   par le haut ET par le bas, c'est elle qu'on regarde en arrivant. */
.jour[data-today] .jour__perf{ background:var(--bleu); color:var(--butter); }
.jour[data-today] .jour__trou{ background:var(--bleu); border-color:var(--butter); }
.jour[data-today]{
  width:var(--carte-jour); --tilt:0deg;
  transform:translateY(-11px); box-shadow:8px 8px 0 var(--ink);
}
.jour[data-today]:hover, .jour[data-today]:focus-within, .jour[data-today][data-open]{
  transform:translateY(-16px); box-shadow:11px 11px 0 var(--ink);
}

/* --------------------------------- la vue ----------------------------------
   RÈGLE JUSQU'AU DÉPLOIEMENT : aucune illustration ici. L'emplacement se montre
   pour ce qu'il est — un cadre vide, croisé en diagonale, qui attend la photo du
   client. Une affiche téléversée depuis /admin prend la place telle quelle.    */

.jour__vue{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  display:grid; place-items:center; border-bottom:2px solid var(--ink);
  background:var(--paper-2);
}
.jour__vue::before{           /* la croix du cadre vide */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--hair) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom left,  transparent calc(50% - 1px), var(--hair) 50%, transparent calc(50% + 1px));
}
.jour__vue img{ width:100%; height:100%; object-fit:cover; grid-area:1/1; z-index:1; }
.jour__vue:has(img)::before{ display:none; }

.jour__photo{
  position:relative; z-index:1;
  background:var(--paper-2); border:1px dashed var(--hair); padding:.32rem .6rem;
  font-size:var(--t-label); font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
.jour__lab{
  position:absolute; z-index:1; left:11px; bottom:4px;
  font-family:var(--script); font-size:var(--t-script); line-height:1; color:var(--ink);
}
.jour[data-off] .jour__vue{ background:var(--paper-2); }

/* --------------------------------- le corps -------------------------------- */

.jour__corps{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:.55rem; }
.jour__quand{ display:flex; align-items:baseline; gap:.55rem; }
.jour__num{ font-family:var(--disp); font-size:var(--t-display); line-height:.82; letter-spacing:-.01em; }
.jour__nom{ font-size:var(--t-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.jour__nom em{ display:block; font-style:normal; font-weight:400; letter-spacing:.06em;
  color:var(--ink-soft); text-transform:none; font-size:var(--t-xs); }
.jour__titre{
  font-family:var(--disp); font-weight:400; font-size:var(--t-md); line-height:1.1;
  margin:0; text-wrap:balance;
}
.jour__heure{ margin:0; font-size:var(--t-xs); color:var(--ink-soft); }
.jour[data-off] .jour__titre{ color:var(--ink-soft); }
.jour[data-off]{ background:var(--paper-2); }

/* le bouton : le + bascule en × quand la carte est ouverte */
.jour__plus{
  margin-top:.35rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem;
  /* 42 px : rien de ce qu'on touche sur ce site ne descend en dessous. */
  min-height:42px; background:none; border:2px solid var(--ink);
  padding:.42rem .8rem; cursor:pointer;
  font-size:var(--t-label); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.jour__plus:hover{ background:var(--ink); color:var(--paper); }
.jour__plus .ic{ width:13px; height:13px; transition:transform .3s var(--ease); }
/* Ouvert, le « + » bascule en « × » : un seul dessin pour deux états. */
.jour[data-open] .jour__plus .ic{ transform:rotate(135deg); }

/* le dépli : 0fr → 1fr, la carte pousse vers le haut puisqu'elle repose au sol */
.jour__det{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease); }
.jour[data-open] .jour__det{ grid-template-rows:1fr; }
.jour__det-in{ overflow:hidden; min-height:0; }
.jour__det-in > *:first-child{ margin-top:.85rem; border-top:1px dashed var(--hair); padding-top:.85rem; }
.jour__det p{ margin:0 0 .5rem; font-size:var(--t-sm); color:var(--ink-soft); }
.jour__det dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.15rem .7rem; font-size:var(--t-xs); }
.jour__det dt{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:var(--t-label);
  align-self:center; color:var(--ink); }
.jour__det dd{ margin:0; color:var(--ink-soft); }
.jour__libre{ font-family:var(--script); font-size:var(--t-script); line-height:1; color:var(--bleu);
  margin:.7rem 0 0 !important; }

/* --------------------------------- écrans étroits -------------------------- */

@media (max-width:640px){
  .jours__tete{ align-items:flex-start; }
  .rame{ width:100%; justify-content:flex-end; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rail{ scroll-behavior:auto; }
  .jour{ --tilt:0deg !important; }
}

/* --------------------- le bouton « ajouter au calendrier » -----------------
   Il vivait sur les anciennes cartes d'affiche. Il suit la soirée dans son
   dépli plutôt que de disparaître avec elles. */
.jour__cal{
  display:inline-flex; align-items:center; gap:.45rem;
  margin:.85rem 0 0; min-height:40px; padding:.4rem .8rem; cursor:pointer;
  background:transparent; border:1px solid var(--ink); color:var(--ink);
  font-size:var(--t-label); font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  transition:background .13s var(--ease), color .13s var(--ease);
}
.jour__cal:hover{ background:var(--ink); color:var(--paper); }
.jour__cal .ic{ width:12px; height:12px; }

/* Cadres vides éteints depuis l'admin et pas encore d'affiche : la fenêtre à
   images n'a plus rien à montrer. La feuille se referme sur son texte plutôt
   que de garder un trou, et l'étiquette du soir passe au-dessus du titre. */
.jour[data-nu] .jour__vue{
  aspect-ratio:auto; display:block; padding:10px 16px 0;
  background:transparent; border-bottom:0;
}
.jour[data-nu] .jour__vue::before{ display:none; }
.jour[data-nu] .jour__lab{ position:static; display:inline-block; }
.jour[data-nu] .jour__corps{ padding-top:8px; }