/* =============================================================================
   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. */
}

/* La hauteur, reprise d'un cran (le propriétaire, rev. 6) : la feuille gardait
   sa largeur mais montait trop haut, et le programme mangeait l'écran à lui
   seul. Tout ce qui se resserre ici est de l'air — bandeaux, rembourrages,
   interlignes ; la chasse du texte, la largeur des feuilles et les 42 px du
   bouton ne bougent pas. */
.jours{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(18px, 2.6vw, 30px) var(--pad) clamp(24px, 4vw, 42px);
}
.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, la tête a fini par disparaître. « Au programme » avait déjà
   remplacé un titre et un chapeau qui répétaient ce que les feuilles disent ;
   ces deux mots-là tenaient encore une ligne d'affichage entière au-dessus du
   rail, pour annoncer un calendrier qu'on reconnaît au premier coup d'œil. Ils
   passent hors de vue (`.hors-vue`, dans style.css) : le nom de la section
   demeure pour le lecteur d'écran, et le rail commence sous l'auvent.

   Ne reste ici que la note d'échantillon, qui ne paraît que si la
   programmation affichée est un exemple — d'où la marge portée par elle et non
   par la tête, qui ne mesure plus rien.
   Tout est porté par #horaire, que /v2 n'a pas : sa tête complète est intacte. */
#horaire .jours__tete{ display:block; margin-bottom:0; }
#horaire .jours__note{ margin:0 0 clamp(14px, 2vw, 20px); }

/* 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:16px max(var(--pad), calc(50% + var(--pad) - var(--carte)/2)) 21px
              max(var(--pad), calc(50% + var(--pad) - var(--carte-jour)/2));
  margin-bottom:-21px;
  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 -------------------------------- */

/* Le doigt de souris ne s'annonce que si la feuille se déplie vraiment : sans
   le bouton (voir `DEPLI` dans rail.js), une main tendue promettrait un geste
   qui n'arrive pas. La règle se règle donc toute seule sur ce que porte la
   carte, sans qu'un drapeau du script ait à se répéter ici. */
.jour:has(.jour__plus){ cursor:pointer; }
.jour{
  position:relative; flex:0 0 auto; width:var(--carte);
  scroll-snap-align:center;
  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:25px; padding-inline:12px;
  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:9px; height:9px; 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:14px; }

/* 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(-9px); box-shadow:8px 8px 0 var(--ink);
}
.jour[data-today]:hover, .jour[data-today]:focus-within, .jour[data-today][data-open]{
  transform:translateY(-13px); 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.    */

/* 1080×1350 (portrait 4:5) : le format des affiches du client, montrées sans
   recadrage. Un autre format reste recadré, jamais étiré — `object-fit:cover`. */
.jour__vue{
  position:relative; aspect-ratio:1080/1350; 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:11px 15px 13px; display:flex; flex-direction:column; gap:.4rem; }
.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:.2rem; 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:.7rem; border-top:1px dashed var(--hair); padding-top:.7rem; }
.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:8px 15px 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:6px; }