/* =============================================================================
   LE RENDEZ-VOUS — la page d'accueil
   Encre, papier et échelle viennent de tokens.css ; le carrousel des jours, de
   rail.css. Ce fichier ne décrit que ce qui appartient à cette page.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:1.5rem; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--butter); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }

/* ------------------------------ icônes ------------------------------------
   Tabler Icons (MIT), posées en planche de <symbol> dans la page et pointées
   par <use>. Les propriétés de tracé s'héritent à travers le <use> : une seule
   règle suffit à donner sa graisse à tout le jeu, et `currentColor` fait que
   chaque icône prend la couleur du texte qui l'entoure.

   La graisse descend quand l'icône grandit. Tabler dessine à 2 px sur 24 : à
   46 px d'affichage, cela ferait un trait de presque 4 px, plus gras que tout
   le reste de la page. */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{
  width:1.1em; height:1.1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic--ui{ width:15px; height:15px; }
.ic--big{ width:44px; height:44px; stroke-width:1.5; }
.ic--soc{ width:17px; height:17px; stroke-width:1.9; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

/* --- surfaces du navigateur : elles portent le design, elles aussi --------- */
::selection{ background:var(--bleu); color:var(--butter); }
:focus-visible{ outline:2px solid var(--bleu); outline-offset:3px; }
input, textarea{ caret-color:var(--bleu); }
html{ scrollbar-color: var(--ink) var(--butter); scrollbar-width: thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--butter); }
::-webkit-scrollbar-thumb{ background:var(--ink); border:3px solid var(--butter); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bleu); color:var(--butter); padding:12px 18px; font-weight:700; }
.skip:focus{ left:0; }

/* ------------------------------- typographie ------------------------------
   Les capitales sont réservées aux étiquettes de moins de .8 rem. Un seul
   élément dépasse 2 rem sur toute la page : la phrase d'identité.           */

.h2{
  font-family:var(--disp); font-weight:400;
  font-size:var(--t-head); line-height:1.12;
  letter-spacing:-.006em; margin:0 auto 1rem; max-width:24ch; text-wrap:balance;
  text-align:center;
}
.h3{ font-family:var(--disp); font-weight:400; font-size:var(--t-md); margin:0 0 .8rem; text-align:center; }
/* Une chapeau se centre comme son titre : la colonne reste étroite, elle est
   seulement posée au milieu de la page plutôt qu'à gauche. */
.lede{ font-size:var(--t-base); color:var(--ink-soft); max-width:60ch; margin-inline:auto;
  margin-block:0; text-align:center; }
.script{ font-family:var(--script); font-size:var(--t-script); line-height:1; }

.lbl{ font-size:var(--t-label); font-weight:700; letter-spacing:.13em; text-transform:uppercase; }

/* --------------------------------- boutons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  background:var(--ink); color:var(--butter); border:2px solid var(--ink);
  padding:.72rem 1.35rem; text-decoration:none; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:var(--t-sm);
  box-shadow:var(--shadow);
  transition:transform .13s var(--ease), box-shadow .13s var(--ease), background .13s;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn--plain{ background:transparent; color:var(--ink); box-shadow:none; border-color:var(--ink); }
.btn--plain:hover{ background:var(--ink); color:var(--butter); transform:none; box-shadow:none; }
.btn--sm{ padding:.44rem .9rem; font-size:var(--t-xs); }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ------------------------------ plaque du nom -----------------------------
   Deux rangées : les choix qui valent pour tout le site (quelle page, quelle
   langue), puis l'enseigne. Le sélecteur de langue était posé en absolu avec des
   décalages négatifs sur téléphone — il a maintenant une place à lui, et la
   plaque n'a plus besoin de lui réserver du vide au-dessus. */
.plate{ padding:1rem 0 1.1rem; }
/* Trois groupes sur une ligne : les pages à gauche, les sections au milieu, la
   langue à droite. Ils s'enroulent plutôt que de se serrer, et le milieu prend
   la place qui reste. */
/* `space-between` centrait les onglets ENTRE les deux bouts, pas sur la page :
   le sélecteur de page et le bouton de langue n'ont pas la même largeur, et la
   rangée penchait de la différence. Trois colonnes dont deux égales : le milieu
   tombe sur l'axe de la page, celui de l'enseigne juste dessous. */
.plate__top{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:.5rem 1rem; margin-bottom:1rem;
}
/* Chaque groupe tient SA colonne, désignée. Sans cela le placement automatique
   décide, et une page sans onglets de section — /publications — fait tomber la
   langue dans la colonne du milieu : elle se retrouvait alors au centre exact
   de la page. La colonne vide se réduit à rien, les deux 1fr se partagent le
   reste, et la langue reste au coin. */
.pages{ grid-column:1; justify-self:start; }
.secnav{ grid-column:2; justify-self:center; }
/* La langue est TOUJOURS à droite, dans toutes les dispositions : c'est un
   repère qu'on retrouve sans le chercher, jamais un élément de la rangée qu'on
   recentre. `margin-left:auto` tient la règle même si cette rangée redevenait
   une file souple un jour. */
.plate__top .lang{ grid-column:3; justify-self:end; margin-left:auto; }
.plate__in{ display:grid; justify-items:center; }
.plate__mark{ display:block; width:100%; max-width:620px; }
.plate__mark img{ width:100%; height:auto; }

/* --- le sélecteur de page ---
   Deux mots et un filet. Pas des pastilles : les pastilles sont déjà prises par
   les onglets de section sous l'auvent, et deux jeux de pastilles au-dessus l'un
   de l'autre ne diraient plus lequel change de page. */
.pages{ display:flex; align-items:center; gap:.55rem; }
.pages__lien{
  display:inline-flex; align-items:center; min-height:40px;
  font-size:var(--t-xs); font-weight:700;
  text-decoration:none; border-bottom:2px solid transparent;
  transition:border-color .13s var(--ease);
}
.pages__lien:hover{ border-bottom-color:var(--hair); }
/* La page où l'on est ne s'ouvre pas : elle se souligne, et le trait tient. */
.pages__lien[aria-current="page"]{ border-bottom-color:var(--ink); }
.pages__sep{ color:var(--hair); user-select:none; }

.lang{
  position:relative; flex:none;
  display:flex; align-items:center; width:82px; min-height:40px; cursor:pointer;
  background:transparent; border:2px solid var(--ink); padding:.25rem;
}
.lang span{ flex:1; text-align:center; font-size:var(--t-label); font-weight:700; letter-spacing:.06em; z-index:1; transition:color .18s; }
.lang::before{
  content:""; position:absolute; inset:2px auto 2px 2px; width:calc(50% - 2px);
  background:var(--ink); transition:transform .2s var(--ease); transform:translateX(100%);
}
.lang .lang__fr{ color:var(--butter); } .lang .lang__en{ color:var(--ink); }
html[lang="en"] .lang::before{ transform:translateX(0); }
html[lang="en"] .lang .lang__en{ color:var(--butter); }
html[lang="en"] .lang .lang__fr{ color:var(--ink); }

/* ------------------------------ bande de store ----------------------------
   Le motif de l'auvent, une seule fois, en filet. C'est le signe de la maison :
   il n'a pas besoin de faire quatre cents pixels de haut pour se reconnaître. */
.awning{
  height:14px; border-block:2px solid var(--ink);
  background:repeating-linear-gradient(90deg, var(--butter) 0 18px, var(--butter-2) 18px 32px);
  /* le seul mouvement composé de la page */
  animation:unroll .8s var(--ease) both;
}
@keyframes unroll{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }

/* ---------------------------------- nav -----------------------------------
   Quatre mots gris soulignés au survol ne se lisaient pas comme des commandes,
   surtout au doigt. Des pastilles encadrées : on voit qu'on peut appuyer, et
   celle de la section qu'on lit se remplit d'encre. */
/* --- les onglets de section ---
   Ils vivaient dans une bande à eux sous l'auvent, avec son propre filet : une
   rangée entière de hauteur pour quatre mots. Remontés dans la tête de page,
   ils gardent leur pastille encadrée — c'est ce qui les distingue des liens de
   page, qui ne sont que des mots soulignés. */
.secnav{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tab{
  display:inline-flex; align-items:center; min-height:40px;
  padding:.25rem .8rem; border:2px solid var(--ink); background:transparent;
  text-decoration:none; font-weight:700; font-size:var(--t-xs); color:var(--ink);
  transition:background .13s var(--ease), color .13s var(--ease);
}
.tab:hover{ background:var(--butter-2); }
.tab[aria-current="true"]{ background:var(--ink); color:var(--butter); }

/* ------------------------- ce qu'on trouve sur place -----------------------
   Les quatre dessins ont quitté la tête de page pour « À propos » : ils
   décrivent la maison, ils ne vendent rien. Chaque case est centrée sur son
   dessin — la rangée se lit alors comme quatre affichettes, pas comme un
   tableau qu'on parcourt de gauche à droite.                              */
/* Quatre colonnes fixes laissaient une case vide dès qu'il y avait trois
   activités, et la rangée penchait à gauche. En file souple, chaque rangée se
   centre d'elle-même quel qu'en soit le nombre — c'est le propriétaire qui
   décide combien il y en a, pas la feuille de style. */
.attr{ list-style:none; padding:0; margin:2.6rem 0 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem; }
/* Les cases s'élargissent pour porter une photo, et s'étirent pour remplir la
   rangée : trois ou quatre attractions se répartissent alors d'elles-mêmes. */
.attr li{ flex:1 1 15rem; max-width:24rem; display:grid; gap:.35rem; align-content:start;
  justify-items:center; text-align:center; }
/* Le dessin annonce en haut, la photo montre en bas — une seule case pour les
   deux, au lieu d'une rangée d'icônes et d'une rangée d'images sans lien. */
.attr__shot{ margin:.9rem 0 0; width:100%; border:2px solid var(--ink); background:var(--paper); }
.attr__shot img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.attr__shot .ph--shot{ aspect-ratio:4/3; }
.attr .ic--big{ color:var(--ink); }
.attr h3{ margin:.3rem 0 0; font-family:var(--disp); font-weight:400; font-size:var(--t-md); line-height:1.15; }
.attr p{ margin:0; font-size:var(--t-sm); color:var(--ink-soft); max-width:26ch; }

/* ================================ LE BULLETIN ==============================
   La première chose de la page, et la seule qui demande quelque chose. Le
   titre annonce au milieu ; dessous, l'échange est montré tel qu'il est —
   à gauche ce qu'on reçoit, à droite ce qu'on donne.                      */
.offer{ padding:var(--gap) 0 0; }
.offer__head{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.offer__kicker{ margin:0 0 .6rem; color:var(--bleu); text-align:center; }
.offer__in{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.2rem);
  align-items:start; max-width:56rem; margin-inline:auto;
}
.offer__shot{ border:2px solid var(--ink); background:var(--paper); }
.offer__shot img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
/* Mise en avant sans coupon : rien à demander, donc rien à droite. La photo
   reste seule au milieu plutôt que de s'étirer sur toute la largeur. */
.offer--wide .offer__in{ grid-template-columns:1fr; max-width:34rem; }
/* Les précisions se rangent sous les deux colonnes, en une file centrée : ce
   sont les petites lignes de l'échange, elles appartiennent aux deux. */
.ticks{ list-style:none; padding:0; margin:1.4rem auto 0; display:grid; gap:.45rem;
  width:max-content; max-width:100%; justify-items:start; }
/* La coche vient du même jeu que le reste : c'était le dernier dessin taillé
   à la main sur la page, sous forme de polygone CSS. */
.ticks li{ display:flex; gap:.55rem; align-items:baseline; color:var(--ink-soft); font-size:var(--t-sm); }
.ticks .ic{ width:.95rem; height:.95rem; color:var(--bleu); transform:translateY(.15em); }

/* le billet : le second et dernier objet à porter l'ombre dure */
.ticket{ border:2px solid var(--ink); background:var(--paper); box-shadow:var(--shadow); }
.ticket__body{ padding:1.5rem; }
.ticket__stub{
  margin:0; border-top:2px dashed var(--ink); background:var(--ink); color:var(--butter);
  font-size:var(--t-label); font-weight:700; letter-spacing:.2em; text-align:center; padding:.55rem;
}

/* --------------------------------- formulaires ---------------------------- */
.form{ display:grid; gap:.95rem; }
.field{ display:grid; gap:.28rem; }
.field__lbl{ font-size:var(--t-label); font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); }
.field input, .field textarea{
  font:inherit; font-size:var(--t-base); color:var(--ink); width:100%; background:var(--paper);
  border:2px solid var(--ink); padding:.66rem .8rem; border-radius:0;
  transition:box-shadow .13s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; box-shadow:3px 3px 0 var(--bleu); }
.field textarea{ resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); opacity:1; }
.check{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--t-xs); color:var(--ink-soft); line-height:1.45; }
.check input{ margin-top:.22rem; accent-color:var(--bleu); width:17px; height:17px; flex:none; }
.form__err{ margin:0; font-size:var(--t-xs); color:var(--err); font-weight:600; }

/* le coupon révélé */
.coupon{ text-align:center; animation:pop .4s var(--ease) both; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.coupon__title{ font-family:var(--disp); font-size:var(--t-md); margin:0 0 .9rem; }
.coupon__code{ background:var(--paper); border:2px solid var(--ink); padding:.85rem .7rem .45rem; display:flex; justify-content:center; }
/* Le code-barres est dessiné à sa largeur NATURELLE : les barres fines tombent
   sur des pixels entiers et restent lisibles au scanner. max-width l'empêche de
   déborder sur un petit écran, height:auto préserve le rapport. */
.barcode{ max-width:100%; height:auto; }
.coupon__num{ font-family:var(--disp); letter-spacing:.2em; font-size:var(--t-base); margin:.65rem 0 .3rem; }
.coupon__fine{ font-size:var(--t-xs); color:var(--ink-soft); margin:0 0 1rem; }

/* ================================== MENU =================================== */
.card{ padding:var(--gap) 0 0; }
.card__sheet{ position:relative; border-block:2px solid var(--ink); background:var(--paper); overflow:hidden; }
.card__stripes{ position:absolute; inset:0;
  /* Période élargie : les rayures redeviennent un fond de carte imprimée
     au lieu de battre derrière chaque ligne de texte. */
  background:repeating-linear-gradient(90deg, var(--paper) 0 34px, var(--paper-2) 34px 48px); }
.card__in{ position:relative; max-width:var(--wrap); margin-inline:auto; padding:clamp(2rem,4vw,3.2rem) 24px; }

/* ---------------------------- la carte repliable --------------------------
   Le résumé porte le titre et dit ce qu'il y a dedans, pour qu'on sache si
   ça vaut la peine d'ouvrir. Le triangle natif est retiré : le signe dessiné
   suit la grammaire de la page. */
.menu > summary{
  display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:1.5rem;
  cursor:pointer; list-style:none; padding:.2rem 0;
}
.menu > summary::before{ content:""; }          /* le contrepoids du bouton */
.menu > summary::-webkit-details-marker{ display:none; }
.menu__head{ display:grid; gap:.3rem; }
.menu__head{ text-align:center; }
.menu__head .h2{ margin:0 auto; }
.menu__hint{ font-size:var(--t-sm); color:var(--ink-soft); }
.menu__toggle{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border:2px solid var(--ink); color:var(--ink); background:var(--paper);
  transition:background .13s var(--ease), color .13s var(--ease);
}
.menu > summary:hover .menu__toggle{ background:var(--ink); color:var(--paper); }
/* Ouvert, le « + » devient un « − ». Deux icônes de la planche qui se relaient :
   on ne peut pas viser un tracé à l'intérieur d'un <use> depuis la page. */
.menu__shut{ display:none; }
.menu[open] .menu__open{ display:none; }
.menu[open] .menu__shut{ display:block; }
.menu > summary:focus-visible{ outline:2px solid var(--bleu); outline-offset:4px; }
.menu__body{ padding-top:1.8rem; animation:unfold .28s var(--ease) both; }
@keyframes unfold{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.menu__grid{ columns:2; column-gap:3.2rem; }
.menu__sec{ break-inside:avoid; margin:0 0 1.9rem; }
.menu__sec h3{
  font-family:var(--disp); font-weight:400; font-size:var(--t-md);
  margin:0 0 .6rem; padding-bottom:.3rem; border-bottom:1px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
}
.menu__sec h3 .ic{ width:34px; height:34px; stroke-width:1.6; margin-bottom:-3px; }
.menu__sec ul{ list-style:none; padding:0; margin:0; display:grid; gap:.36rem; }
.menu__sec li{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.5rem; font-size:var(--t-sm); }
.menu__sec .nm .nt{ display:block; font-size:var(--t-xs); color:var(--ink-soft); }
.menu__sec .pr{ font-weight:700; }
.menu__sec .pr--tbd{ font-weight:700; font-size:var(--t-label); color:var(--bleu); text-transform:uppercase; letter-spacing:.1em; }
.menu__winter{ margin-top:.4rem; }
.menu__winter h3{ color:var(--bleu); border-color:var(--bleu); }
.card__note{ margin:1.6rem 0 0; font-size:var(--t-xs); color:var(--ink-soft); text-align:center; }

/* ================================= À PROPOS ================================ */
.about{ padding:var(--gap) 0 0; }
/* Le texte tient la gauche, la photo du chalet lui fait face. Un paragraphe
   posé à côté d'une image se lit au fer à gauche : centré, chaque ligne
   repartirait d'un bord différent que celui de la photo. */
.about__in{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,4vw,3.2rem); align-items:center; }
.about__copy{ max-width:52ch; text-align:left; }
.about__copy .h2{ margin-inline:0; text-align:left; }
.about__body{ color:var(--ink-soft); text-align:left; }
.about__body p{ margin:0 0 1em; }
.about__body p:last-child{ margin-bottom:0; }
/* L'aparté manuscrit ferme le texte, comme la signature au bas d'une lettre :
   il respire au-dessus, et les précisions qui suivent gardent leur filet. */
.about__sign{ margin:1.1rem 0 0; color:var(--ink); }
.facts{ margin:1.4rem 0 0; display:grid; gap:.7rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,max-content)); justify-content:start; }
.facts div{ border-top:1px solid var(--hair); padding-top:.55rem; }
.facts dt{ font-size:var(--t-label); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }
.facts dd{ margin:.1rem 0 0; font-size:var(--t-sm); font-weight:600; }

/* ---------------------------- cadres à remplir -----------------------------
   Un cadre vide dit où ira la photo tant qu'il n'y en a pas. Il se coupe depuis
   l'administration le jour où toutes les images sont là. La feuille du jour a
   le sien, dans rail.css : même idée, autre dessin.                        */
.ph{
  position:relative; display:grid; place-items:center; padding:.9rem;
  background:var(--paper-2); color:var(--ink-soft); text-align:center;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top right,    transparent calc(50% - .5px), var(--hair) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--hair) 50%, transparent calc(50% + .5px));
}
.ph__lbl{
  position:relative; background:var(--paper-2); padding:.25rem .5rem;
  font-size:var(--t-label); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.ph--shot{ aspect-ratio:4/3; }
.ph--hero{ aspect-ratio:16/7; }

.hero{ border:2px solid var(--ink); background:var(--paper); }
.hero img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.hero .ph--hero{ aspect-ratio:4/3; }

.shot{ margin:0; }

/* ================================ LA RÉGLETTE ==============================
   La bande de service, dans le vide qui suivait la tablette du programme. Elle
   se lit d'un coup d'œil et ne dispute rien au carrousel : pas d'ombre portée,
   pas de pastille encadrée, une seule règle d'encre au-dessus d'elle.

   Le seul cobalt de la bande est la pastille d'état — c'est exactement ce que
   la couleur veut dire ailleurs sur la page : ici, maintenant, en cours. */
.reglette{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem 2rem; margin-top:1.5rem;
}
.reglette__etat{ min-width:0; }
.reglette__ligne{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem; }

/* Le point d'état : plein et cobalt quand c'est ouvert, creux et encre douce
   quand ce ne l'est pas. Jamais un vert et un rouge — la page n'a pas ces
   couleurs, et la forme suffit à distinguer les deux états. */
.pastille{
  width:10px; height:10px; flex:none; border-radius:50%;
  border:2px solid var(--ink-soft); background:transparent; transform:translateY(-1px);
}
.pastille[data-on]{ border-color:var(--bleu); background:var(--bleu); }
.reglette__mot{ font-family:var(--disp); font-weight:400; font-size:var(--t-md); line-height:1; }
.reglette__prec{ color:var(--ink-soft); font-size:var(--t-sm); }
/* Ce qui se joue en ce moment, ou ce soir : la seule ligne de la bande qui
   porte de l'encre pleine, parce que c'est la seule qui peut faire traverser
   le parc à quelqu'un. */
.reglette__scene{ margin:.3rem 0 0; display:flex; align-items:baseline; gap:.45rem;
  font-size:var(--t-sm); font-weight:700; }
.reglette__scene .ic{ color:var(--bleu); transform:translateY(.15em); }
/* Trois jours, séparés par des filets verticaux : un registre, pas une liste
   à puces. Il se replie en colonne sur téléphone, où trois blocs côte à côte
   couperaient les heures en deux. */
.reglette__jours{
  list-style:none; margin:.55rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.15rem .9rem; font-size:var(--t-xs); color:var(--ink-soft);
}
.reglette__jours li{ display:flex; gap:.4rem; padding-right:.9rem; border-right:1px solid var(--hair); }
.reglette__jours li:last-child{ border-right:0; padding-right:0; }
.reglette__jours .j{ font-weight:700; color:var(--ink); }
.reglette__jours li[data-off] .h{ font-style:italic; }

/* L'appel à suivre. Deux pastilles encadrées, la même grammaire que les onglets
   de section : encadré = on peut appuyer. */
.reglette__suivre{ display:grid; gap:.45rem; justify-items:start; }
.reglette__appel{ margin:0; color:var(--ink-soft); }
.reglette__liens{ margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.suivre{
  display:inline-flex; align-items:center; gap:.5rem; min-height:42px;
  padding:.25rem .85rem; border:2px solid var(--ink); background:transparent;
  text-decoration:none; font-weight:700; font-size:var(--t-xs); color:var(--ink);
  transition:background .13s var(--ease), color .13s var(--ease);
}
.suivre:hover{ background:var(--ink); color:var(--butter); }

/* ================================== LE RUBAN ===============================
   Les photos de la maison, bord à bord, sans fin. Aucun cadre et aucune
   gouttière : les images se touchent et forment un seul bloc qui traverse la
   page — c'est le contraire exact des feuilles du calendrier, qui sont des
   objets séparés posés sur une étagère.

   La piste porte les images DEUX fois. L'animation la décale de la moitié de
   sa largeur puis reprend à zéro : la seconde copie est alors exactement là où
   était la première, et la boucle ne se voit pas. La durée est calculée dans
   le script à partir de la largeur réelle, pour que la vitesse ne dépende pas
   du nombre de photos.

   Hauteur constante, largeur libre entre le carré et le double carré : une
   photo portrait est recadrée en carré, une panoramique s'arrête à 2:1. Rien
   n'est déformé — c'est toujours un recadrage, jamais un étirement. */
.ruban{
  --ruban-h: clamp(160px, 24vw, 280px);
  margin-top:var(--gap);
  overflow:hidden; background:var(--paper-2);
}
.ruban__piste{
  display:flex; width:max-content;
  animation:ruban var(--ruban-duree, 60s) linear infinite;
  will-change:transform;
}
/* Le survol arrête le ruban : on veut pouvoir regarder une photo qui passe. */
.ruban:hover .ruban__piste, .ruban:focus-within .ruban__piste{ animation-play-state:paused; }
.ruban img{
  display:block; flex:none; height:var(--ruban-h); width:auto;
  min-width:var(--ruban-h); max-width:calc(var(--ruban-h) * 2);
  object-fit:cover; background:var(--paper-2);
}
@keyframes ruban{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ================================== INFOS ================================== */
.infos{ padding:var(--gap) 0 0; }
.infos__in{ display:grid; grid-template-columns:1.1fr 1fr .85fr;
  gap:clamp(1.6rem,3.2vw,2.8rem); align-items:center; justify-items:center; text-align:center; }
.infos__col{ width:100%; }
.infos__social{ justify-content:center; }

/* ---------------------------------- le plan --------------------------------
   Une image, pas une carte tierce : elle ne charge rien, ne suit personne et
   ne peut pas tomber en panne. Elle est désaturée pour tenir dans la crème de
   la page — une carte à pleine couleur ferait tache à côté de l'encre. Le parc
   est au centre exact du cadre, l'épingle s'y pose donc à 50 %. */
.plan{
  position:relative; display:block; width:100%; align-self:center;
  border:2px solid var(--ink); background:var(--paper);
  overflow:hidden; text-decoration:none; box-shadow:var(--shadow);
}
.plan__img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  filter:saturate(.5) contrast(1.05); transition:filter .16s var(--ease);
}
.plan:hover .plan__img, .plan:focus-visible .plan__img{ filter:saturate(.95) contrast(1.05); }
.plan__pin{
  position:absolute; left:50%; top:50%; width:36px; height:36px;
  transform:translate(-50%, -86%); color:var(--rouge); stroke-width:2.1;
  filter:drop-shadow(0 0 2px var(--paper)) drop-shadow(0 0 2px var(--paper));
}
.plan__credit{
  position:absolute; right:0; bottom:0; padding:.12rem .38rem;
  background:var(--paper); border-top:2px solid var(--ink); border-left:2px solid var(--ink);
  font-size:var(--t-label); font-weight:700; letter-spacing:.06em; color:var(--ink-soft);
}
.infos__addr{ font-family:var(--disp); font-size:var(--t-lg); line-height:1.2; margin:0 0 .45rem; }
.infos__addr a{ text-decoration:none; box-shadow:inset 0 -5px 0 var(--butter-2); }
.infos__addr a:hover{ box-shadow:inset 0 -5px 0 var(--bleu); }
.infos__transit{ margin:0 0 1.2rem; color:var(--ink-soft); font-size:var(--t-sm); }
.infos__social{ display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; margin:0; }
/* 26 px de haut pour trois liens côte à côte, c'était une cible au pouce trop
   petite. Le lien garde sa taille de texte et gagne sa hauteur en padding. */
.infos__social a{
  display:inline-flex; align-items:center; gap:.45rem; min-height:42px; padding-block:.2rem;
  font-weight:600; text-decoration:none;
}
/* Le soulignement descend sur l'étiquette : sur le lien entier il barrait
   aussi le dessin, qui n'est pas du texte. */
.infos__social a span{
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px;
}
.infos__social a:hover{ color:var(--bleu); }
.infos__social .ic--soc{ flex:none; }
/* Un registre jour ↔ heures : centré comme bloc, mais assez large pour que les
   deux colonnes ne se touchent pas. */
.hourslist{ list-style:none; padding:0; margin:0; min-width:15rem; }
.hourslist li{ display:flex; justify-content:space-between; gap:1rem; padding:.38rem 0; border-bottom:1px solid var(--hair); font-size:var(--t-sm); }
.hourslist .d{ color:var(--ink-soft); }
.hourslist li.is-today{ font-weight:700; }
.hourslist li.is-today .d{ color:var(--bleu); }
.hourslist .closed{ color:var(--ink-soft); }

/* =================================== PIED ================================== */
.foot{ background:var(--ink); color:var(--butter); padding:2.8rem 0 3rem; }
/* Le nom de la maison à gauche, ses bailleurs à droite, tous deux calés sur la
   même ligne de départ : c'est la page de garde d'un programme, pas une pile. */
.foot__in{ display:grid; grid-template-columns:1fr auto; align-items:start;
  gap:1.6rem clamp(1.8rem,4vw,3.4rem); }
/* Sans cela, la piste `1fr` se dimensionne sur le contenu minimum de la plaque
   et déborde l'écran étroit, en emportant le texte avec elle. */
.foot__in > *{ min-width:0; }
.foot__id{ display:grid; justify-items:start; gap:.6rem; }
.foot__mark{ width:min(340px,72%); height:auto; margin-bottom:.5rem; }
.foot__tag{ color:var(--butter); margin:0; }
.foot__note{ margin:0; color:var(--cream-soft); font-size:var(--t-xs); max-width:54ch; }
.foot__legal{ margin:.5rem 0 0; color:var(--cream-soft); font-size:var(--t-label); }

/* ------------------------------- les bailleurs -----------------------------
   Une plaque crème dans le noir. L'arrondissement écrit son nom en noir : sur
   le fond du pied de page il ne resterait que la fleur rouge. Plutôt que de
   recolorer la marque de quelqu'un d'autre, on lui donne le fond clair qu'elle
   attend. Les deux logos sont réglés à l'œil et non à la même hauteur : celui
   de l'arrondissement tient sur trois lignes, celui de Desjardins sur une. */
.soutien{
  margin:0; padding:1rem 1.3rem;
  background:var(--paper); border:2px solid var(--paper);
}
.soutien__lbl{ margin:0 0 .7rem; color:var(--ink-soft); }
.soutien__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 2.2rem;
}
.soutien__list img{ display:block; width:auto; height:74px; }
/* Deux classes : `.soutien__list img` l'emporterait sinon sur une classe
   seule, et les deux logos sortiraient à la même hauteur. */
.soutien__list .soutien__dj{ height:32px; }
/* Sans marge, une bande crème traîne sous le noir quand la location est masquée. */
.foot{ margin-top:var(--gap); }

/* -------------------------------- responsive ------------------------------
   Le téléphone est l'écran par défaut : c'est là qu'on ouvre le site, debout
   dans le parc, pour savoir si c'est ouvert et qui joue. Rien ne dépasse,
   rien ne se lit à moins de 16 px, et tout ce qu'on touche fait 42 px.
   Le carrousel des jours porte ses propres seuils dans rail.css.          */
@media (max-width: 1000px){
  .offer__in, .about__in{ grid-template-columns:1fr; }
  /* Le plan passe au-dessus, en pleine largeur, et les deux colonnes de texte
     se partagent la ligne en dessous. */
  .infos__in{ grid-template-columns:1fr 1fr; }
  .infos__in .plan{ grid-column:1 / -1; max-width:30rem; margin-inline:auto; }
  .about__copy{ max-width:none; }
  .menu__grid{ columns:1; }
}
@media (max-width: 640px){
  body{ font-size:16px; }
  .wrap{ padding-inline:18px; }
  .plate{ padding:.9rem 0 .9rem; }
  .plate__top{ margin-bottom:.8rem; }
  .plate__mark{ max-width:100%; }

  /* Les quatre onglets tiennent sur deux rangées plutôt que de se serrer
     jusqu'à devenir intouchables. Sur téléphone la rangée du haut se déplie :
     pages et langue d'abord, sections dessous, sur toute la largeur. */
  .plate__top{ grid-template-columns:auto auto; gap:.6rem; }
  .pages{ grid-area:1 / 1; }
  .plate__top .lang{ grid-area:1 / 2; justify-self:end; margin-left:auto; }
  .secnav{ grid-area:2 / 1 / 3 / 3; justify-self:stretch; justify-content:center; gap:.45rem; }
  .tab{ padding:.3rem .7rem; }

  .attr{ gap:1.6rem; }
  /* Avec une photo dans chaque case, deux par rangée deviennent illisibles. */
  .attr li{ flex-basis:100%; max-width:none; }
  .attr .ic--big{ width:38px; height:38px; }

  .offer__in{ max-width:26rem; }
  /* Les deux moitiés de la bande passent l'une sous l'autre, et les trois jours
     se rangent en colonne : côte à côte, les heures se coupaient en deux. */
  .reglette{ flex-direction:column; align-items:stretch; gap:1.2rem; }
  .reglette__jours{ flex-direction:column; gap:.2rem; }
  .reglette__jours li{ border-right:0; padding-right:0; justify-content:space-between; max-width:16rem; }
  .infos__in{ grid-template-columns:1fr; }
  /* Trop étroit pour deux colonnes : les bailleurs repassent sous le nom. */
  .foot__in{ grid-template-columns:1fr; }
  .hero{ margin-bottom:1.4rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  /* La règle ci-dessus jetterait le ruban à la fin de sa course en une
     milliseconde. Il s'arrête net à sa place, et se pousse à la main. */
  .ruban__piste{ animation:none !important; transform:none !important; }
  .ruban{ overflow-x:auto; }
}

@media print{
  .plate,.awning,.nav,.season,.jours,.ruban,.card,.about,.infos,.foot,.form{ display:none !important; }
  .offer{ padding:0; }
  .offer__copy{ display:none; }
  .ticket{ box-shadow:none; }
}