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

/* Hors de vue, mais dans la page. Pour un titre que le dessin n'a plus besoin
   de montrer et que la navigation au lecteur d'écran a encore besoin
   d'entendre. Ni `display:none` ni `visibility:hidden` : ceux-là retirent
   l'élément de l'arbre d'accessibilité, et la section perdrait son nom. */
.hors-vue{
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border: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; }
/* Le tiroir n'existe qu'au téléphone. Ici il s'efface : `display:contents` le
   retire de la grille sans retirer ce qu'il porte, et les deux nav retrouvent
   leurs colonnes désignées comme s'il n'y avait jamais eu d'enveloppe. */
.tiroir{ display:contents; }
.poignee{ display:none; }
/* 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; }
/* Trois colonnes, comme la rangée du dessus : les bailleurs à gauche, l'enseigne
   au milieu, rien à droite. Les deux colonnes de bord sont égales, donc
   l'enseigne tombe sur l'axe de la page et non entre ses voisines — c'est le
   même calcul que pour les onglets, et les deux axes se superposent.
   `minmax(0,…)` partout : sans plancher à zéro, la piste du milieu refuse de
   descendre sous la largeur naturelle du lettrage et pousse la tête hors du
   cadre sur les écrans intermédiaires. */
.plate__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,620px) minmax(0,1fr);
  align-items:center; gap:.7rem 1.4rem;
}
.plate__mark{ grid-column:2; display:block; width:100%; max-width:620px; }
.plate__mark img{ width:100%; height:auto; }

/* --- les bailleurs en tête ---
   La même plaque qu'au pied de page, mais sans la plaque : sur la crème, les
   logos détourés n'ont besoin d'aucun fond. Ils sont réglés à l'œil, comme en
   bas — l'arrondissement tient sur trois lignes, Desjardins sur une — et à
   peine plus hauts que l'étiquette qui les annonce.

   Tout sur UNE ligne (rev. 6) : l'étiquette d'abord, les marques à sa suite.
   Empilée, la mention prenait deux fois sa hauteur pour dire une seule chose,
   et c'est la hauteur de la tête de page qu'elle mangeait. Couchée, elle se
   lit comme une signature de bas d'affiche — ce qu'elle est. */
.soutien--tete{ display:flex; align-items:center; flex-wrap:wrap; gap:.3rem .8rem; }
/* Désigné par la plaque : `.soutien` porte la sienne plus bas dans la feuille,
   et à égalité de poids c'est la dernière écrite qui l'emporte. */
.plate .soutien--tete{
  grid-column:1; justify-self:start;
  margin:0; padding:0; background:none; border:0;
}
.soutien--tete .soutien__list{ gap:.4rem 1rem; }
.soutien--tete .soutien__list img{ height:min(72px, 5.1vw); }

/* --- 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. */
/* Elles vivaient au bas d'« À propos », où elles se lisaient comme une note de
   fin de texte. Elles ont maintenant une section à elles, entre les photos et la
   carte : la marge vient donc du cadre de la section, plus du paragraphe qui
   les précédait. */
.features{ padding:var(--gap) 0 0; }
.attr{ list-style:none; padding:0; margin: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. */
/* Les photos partent toutes de la MÊME ligne, quoi qu'il y ait au-dessus.
   Chaque case portait sa photo à la suite de son texte : une attraction sans
   description, ou dont le nom tenait sur deux lignes, remontait ou descendait
   la sienne, et la rangée se lisait comme trois affichettes mal accrochées.

   Les cases d'une rangée ont déjà la même hauteur (`stretch`, par défaut, dans
   une file souple) et la même largeur, donc des photos de même hauteur — il
   suffit de les caler par le bas pour que leurs hauts s'alignent. La cale
   ci-dessous, invisible et sans contenu, mange la hauteur en trop juste avant
   la photo : `flex:1 0 .9rem` — elle prend tout ce qui reste, et jamais moins
   que l'air qu'il y avait là avant. La case passe en file plutôt qu'en grille,
   parce qu'une marge automatique ne pousse rien dans une piste taillée sur son
   contenu. */
.attr li{ flex:1 1 15rem; max-width:24rem; display:flex; flex-direction:column;
  gap:.35rem; align-items:center; text-align:center; }
.attr li::after{ content:""; order:1; flex:1 0 .9rem; }
.attr__shot{ order:2; }
/* 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. */
/* L'air au-dessus de la photo est porté par la cale, pas par la photo : une
   marge fixe s'ajouterait à ce que la cale a déjà pris. */
.attr__shot{ margin: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, centré (le propriétaire, rev. 7), la photo du chalet lui fait face. */
.about__in{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,4vw,3.2rem); align-items:center; }
.about__copy{ max-width:52ch; margin-inline:auto; text-align:center; }
.about__copy .h2{ margin-inline:auto; text-align:center; }
.about__body{ color:var(--ink-soft); text-align:center; }
.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); }

/* ---------------------------- 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
   ne dispute rien au carrousel : pas d'ombre portée, pas d'aplat, rien qu'une
   étiquette et deux boutons.

   Elle portait aussi l'état « ouvert / fermé » et le relevé des trois jours,
   calés à gauche pendant que les comptes tenaient la droite. Les heures se
   disent maintenant une seule fois, dans « Nous trouver », et la feuille du
   jour dit déjà si la maison ouvre : la moitié gauche est partie avec elles.
   Restée seule, la moitié droite n'a plus de vis-à-vis à qui s'opposer — elle
   se pose au milieu, sur l'axe de la tablette et de l'enseigne. */
/* Desjardins finance la programmation : sa mention suit les feuilles qu'il paie. */
.prog-dj{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem .7rem;
  margin:1.2rem 0 0; font-size:var(--t-sm); color:var(--ink-soft); text-align:center; }
.prog-dj img{ display:block; width:auto; height:16px; }
.reglette{ display:flex; justify-content:center; margin-top:1.4rem; }

/* 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:center; text-align:center; }
.reglette__appel{ margin:0; color:var(--ink-soft); }
.reglette__liens{ margin:0; display:flex; flex-wrap:wrap; justify-content:center; 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); }

/* ================================ LES BANDES ================================
   Les photos de la maison, bord à bord, en grand. Une page de bande montre
   --n colonnes de --rows photos ; le reste attend à droite et vient à la
   flèche ou au doigt. Le défilement est celui du navigateur, aimanté à la
   colonne : rien à recalculer quand l'écran change de largeur. */
.vitrine{
  --n:4; --rows:1; --h:clamp(320px, 34vw, 580px);
  position:relative; margin-top:var(--gap); background:var(--paper-2);
}
.vitrine__piste{
  display:grid; grid-auto-flow:column;
  grid-template-rows:repeat(var(--rows), var(--h));
  grid-auto-columns:calc(100% / var(--n));
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.vitrine__piste::-webkit-scrollbar{ display:none; }
.vitrine__piste img{
  display:block; width:100%; height:100%; object-fit:cover;
  scroll-snap-align:start; background:var(--paper-2);
}
.vitrine__fl{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0; cursor:pointer;
  background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  transition:background .13s var(--ease), color .13s var(--ease);
}
.vitrine__fl[hidden]{ display:none; }
.vitrine__fl:hover{ background:var(--ink); color:var(--paper); }
.vitrine__fl .ic{ width:24px; height:24px; }
.vitrine__fl--prec{ left:clamp(10px, 2vw, 24px); }
.vitrine__fl--suiv{ right:clamp(10px, 2vw, 24px); }
/* Les paquets de la bande d'ambiance n'existent que pour la mosaïque du
   téléphone. Ailleurs ils s'effacent, et leurs reprises avec eux. */
.mosaique{ display:contents; }
.mosaique .bis{ display:none; }

/* ================================ BIENVENUE =================================
   Rev. 11 — la même chose à toutes les tailles. La photo du chalet passe
   DERRIÈRE le texte, plein écran, épinglée tant qu'on lit, et elle recule
   doucement (zoom arrière) à mesure qu'on descend : --p, posé par app.js. Le
   texte monte par-dessus en crème, sur une ombre d'encre qui ne s'épaissit que
   là où il y a des lignes : la photo s'ouvre seule en haut, se referme seule
   en bas. Les colonnes qui glissaient de chaque côté sont parties.

   Photo et texte partagent la même case de grille : la photo donne le fond,
   le texte la hauteur. */
.about.bienvenue{
  --p:.5;
  display:grid; grid-template-areas:"a"; padding:0;
  /* `clip` et non `hidden` : `hidden` ferait de la section un conteneur de
     défilement, et la photo épinglée ne s'épinglerait plus. */
  margin-top:var(--gap); overflow:hidden; overflow:clip;
}
.bienvenue .hero{
  grid-area:a; align-self:stretch; position:relative; margin:0;
  border:0; background:var(--ink);
}
.bienvenue .hero img{
  position:sticky; top:0; height:100vh; height:100svh; aspect-ratio:auto;
  transform:scale(calc(1.3 - var(--p) * .3));
}
.bienvenue .hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(2,2,2,0) 0, rgba(2,2,2,.48) 22%, rgba(2,2,2,.48) 86%, rgba(2,2,2,.1) 100%);
}
.bienvenue .bienvenue__texte{
  grid-area:a; position:relative; z-index:1; display:block; max-width:none;
  /* Repli en `vh` pour les vieux Safari, propriété par propriété : une ligne
     qui mêlerait `svh` et var(--pad) serait jetée en entier, repli compris. */
  padding-inline:var(--pad);
  padding-top:46vh; padding-top:46svh; padding-bottom:34vh; padding-bottom:34svh;
  color:var(--butter);
  text-shadow:0 1px 2px rgba(2,2,2,.7), 0 2px 14px rgba(2,2,2,.65);
}
.bienvenue .bienvenue__texte > *{ max-width:46ch; margin-inline:auto; }
.bienvenue .h2{ font-size:var(--t-display); max-width:14ch; margin-bottom:1.2rem; }
/* Le texte est justifié — un bloc carré sur la photo, comme une colonne de
   journal — et un cran plus grand. La coupure des mots suit la langue de la
   page (i18n.js tient <html lang> à jour) : sans elle, justifier sur une
   colonne de téléphone ouvrirait des trous entre les mots. */
.bienvenue .about__body{
  color:var(--butter); font-size:clamp(1.1rem, .98rem + .5vw, 1.3rem); line-height:1.62;
  text-align:justify; -webkit-hyphens:auto; hyphens:auto;
}

@media (max-width: 1000px){
  .bienvenue .bienvenue__texte > *{ max-width:40ch; }
  .vitrine{ --n:2; --h:min(64vw, 540px); }
}

/* ============================ LA PLAQUE DE PORTE ===========================
   Les heures sous « Bienvenue », téléphone seulement. Une plaque crème dans
   le cadre des feuilles du calendrier — filet, ombre pleine, à peine penchée,
   bande perforée — avec, en tête, l'état du moment sur une étiquette de papier.
   Pas d'encre en aplat : le propriétaire veut la plaque du jaune de la page. */
.heures-tel{ display:none; }
.porte{
  max-width:24rem; margin-inline:auto;
  background:var(--butter); color:var(--ink);
  border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  transform:rotate(.6deg);
}
.porte__in{ padding:1.3rem 1.3rem 1.1rem; text-align:center; }
.porte__titre{ font:400 var(--t-display)/1 var(--disp); margin:0 0 .9rem; letter-spacing:.01em; }
.porte__etat{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1.2rem;
  padding:.38rem .8rem; background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  font-size:var(--t-sm);
}
.porte__prec::before{ content:"·"; margin:0 .4rem 0 .1rem; }
.porte__point{ width:10px; height:10px; border:2px solid var(--ink); border-radius:50%; flex:none; }
.porte__point[data-on]{ background:var(--bleu); border-color:var(--bleu); animation:porte-pouls 2.4s var(--ease) infinite; }
@keyframes porte-pouls{
  0%{ box-shadow:0 0 0 0 rgba(27,60,204,.55); }
  70%, 100%{ box-shadow:0 0 0 8px rgba(27,60,204,0); }
}
.porte__scene{ display:none; }
.porte--scene .porte__scene:not([hidden]){
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  margin:-.6rem 0 1.1rem; font-weight:700; font-size:var(--t-sm);
}
.porte .hourslist{ min-width:0; text-align:left; }
.porte .hourslist li{ font-size:var(--t-base); padding:.45rem 0; }
.porte .hourslist li:last-child{ border-bottom:0; }
/* Aujourd'hui : une rayure de store posée sur la ligne, entre deux filets. */
.porte .hourslist li.is-today{
  background:var(--butter-2); margin-inline:-.6rem; padding-inline:.6rem;
  border-block:2px solid var(--ink);
}
.porte .hourslist li.is-today .d{ color:var(--bleu); }

@media (max-width: 640px){
  .heures-tel{ display:block; padding:var(--gap) var(--pad) 0; }
  .infos__col:has(.hourslist){ display:none; }
  /* Une photo à la fois, haute — sur un téléphone, quatre de front ne
     seraient plus que des timbres. */
  /* `vh` d'abord : Safari avant iOS 15.4 (iPhone 7, 8…) ne connaît pas `svh`.
     Dans une variable, une unité inconnue ne retombe pas d'elle-même — elle
     rendrait la hauteur de la bande invalide, et la mosaïque prendrait la
     hauteur naturelle de ses photos, bien plus haute que l'écran. */
  .vitrine{ --n:1; --h:min(120vw, 68vh); }
  @supports (height:1svh){ .vitrine{ --h:min(120vw, 68svh); } }
  /* Pas de flèches au téléphone : les deux bandes se tournent au doigt, et
     les deux carrés blancs couvraient les photos. */
  .vitrine__fl{ display:none; }
  /* LA MOSAÏQUE — l'ambiance seulement ; la nourriture reste une photo à la
     fois. Une page = deux rangs et deux colonnes : une photo d'une demie et
     deux d'un quart. La plus petite division est le quart : plus petites, les
     photos ne se lisaient plus. La demie fait le tour de la page, d'une page à
     l'autre : debout à gauche, couchée en haut, debout à droite, couchée en bas. */
  .vitrine[data-bande="1"] .mosaique{
    /* Hauteur posée, pas seulement héritée de la bande : les Safari d'iOS 15
       ne tiennent pas pour fixe la hauteur d'une grille étirée dans une autre,
       et les rangs de la mosaïque reprenaient la taille de leurs photos. */
    height:var(--h); min-height:0;
    display:grid; gap:3px; background:var(--butter); scroll-snap-align:start;
    /* minmax(0, …) : sans lui, un rang prend la hauteur naturelle de sa photo,
       la mosaïque déborde de sa fenêtre et la fenêtre se met à défiler toute
       seule, de haut en bas, sous le doigt. */
    grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr));
    grid-template-areas:"a b" "a c";
  }
  .vitrine[data-bande="1"] .mosaique:nth-child(4n+2){ grid-template-areas:"a a" "b c"; }
  .vitrine[data-bande="1"] .mosaique:nth-child(4n+3){ grid-template-areas:"b a" "c a"; }
  .vitrine[data-bande="1"] .mosaique:nth-child(4n+4){ grid-template-areas:"b c" "a a"; }
  /* Une mosaïque CARRÉE, à toutes les tailles de téléphone : deux rangs et
     deux colonnes égaux, des quarts carrés, la même lecture du plus petit
     écran au plus grand. Un carré tient sur tous les téléphones ; le plafond
     n'est qu'un garde-fou pour les fenêtres très basses (navigateur intégré,
     écran couché). `vh` d'abord pour les Safari qui ignorent `svh`. */
  .vitrine[data-bande="1"]{ --h:min(100vw, 78vh); }
  @supports (height:1svh){ .vitrine[data-bande="1"]{ --h:min(100vw, 78svh); } }
  /* Au doigt, la mosaïque se tourne de gauche à droite, une page à la fois ;
     un geste vertical fait défiler la page. Rien ne doit déborder en hauteur
     (voir minmax plus haut), sinon la fenêtre défilerait sur elle-même. */
  .vitrine[data-bande="1"] .vitrine__piste{ overflow-y:hidden; }
  .vitrine[data-bande="1"] .mosaique .bis{ display:block; }
  .vitrine[data-bande="1"] .mosaique img{ scroll-snap-align:none; }
  .mosaique img:nth-child(1){ grid-area:a; }
  .mosaique img:nth-child(2){ grid-area:b; }
  .mosaique img:nth-child(3){ grid-area:c; }
}
/* Un téléphone haut a la place de deux photos l'une sur l'autre. */
@media (max-width: 640px) and (min-height: 780px){
  /* La mosaïque remplit déjà sa page : elle ne s'empile pas. */
  .vitrine:not([data-bande="1"]){ --rows:2; --h:min(80vw, 37vh); }
  @supports (height:1svh){ .vitrine:not([data-bande="1"]){ --h:min(80vw, 37svh); } }
}
@media (prefers-reduced-motion: reduce){
  .vitrine__piste{ scroll-behavior:auto; }
  .porte__point[data-on]{ animation:none; }
}

/* ================================== 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__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; }
.soutien__list .soutien__dj{ height:32px; }
/* Au pied, pas de plaque crème : les deux marques passent en monochrome clair,
   la version qu'un partenaire fournit pour un fond sombre. Le filtre ramène
   chaque pixel opaque au blanc ; l'opacité le cale sur le beurre du texte. */
.soutien--pied{ padding:0; background:none; border:0; }
.soutien--pied img{ filter:brightness(0) invert(1); opacity:.9; }
/* 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; }
  /* Sous cette largeur, la colonne de gauche serre les bailleurs jusqu'à
     couper l'étiquette en deux lignes, et l'enseigne perd ce que la mention
     lui prend. La plaque repasse donc en pile : l'enseigne d'abord — c'est
     elle qu'on est venu reconnaître — la mention dessous, centrée. */
  .plate__in{ grid-template-columns:1fr; justify-items:center; gap:.6rem; }
  .plate__mark{ grid-column:1; grid-row:1; }
  /* Toujours la même ligne couchée, simplement centrée sous l'enseigne. */
  .plate .soutien--tete{ grid-column:1; grid-row:2; justify-self:center;
    justify-content:center; text-align:center; }
  .soutien--tete .soutien__list{ justify-content:center; gap:.4rem .9rem; }
  .soutien--tete .soutien__list img{ height:45px; }
  /* 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%; }

  /* LA POIGNÉE ET LE TIROIR.
     Les cinq liens tenaient deux rangées pleines au-dessus de l'enseigne :
     une pour la page et la langue, une pour les quatre sections, et sur un
     téléphone étroit la seconde débordait. Ils rentrent dans un tiroir. La
     rangée de tête n'a plus que deux objets, un à chaque bout — poignée à
     gauche, langue à droite — et ne peut plus déborder de quoi que ce soit.

     Le tiroir s'ouvre EN PLACE, en troisième colonne de la même grille : la
     tête grandit, l'enseigne descend, et rien ne flotte au-dessus de la page.
     Fermé, il n'est pas seulement invisible mais absent — `display:none` le
     retire aussi du parcours au clavier, ce qu'un simple `opacity:0` ne fait
     pas. */
  .plate__top{ grid-template-columns:auto minmax(0,1fr); gap:.5rem; }
  .poignee{
    display:inline-flex; align-items:center; justify-content:center;
    grid-column:1; grid-row:1; justify-self:start;
    width:44px; min-height:44px; padding:0; cursor:pointer;
    background:transparent; border:2px solid var(--ink); color:var(--ink);
    transition:background .13s var(--ease), color .13s var(--ease);
  }
  .poignee:hover{ background:var(--ink); color:var(--paper); }
  .poignee .ic{ width:20px; height:20px; }
  /* Une seule poignée pour deux états : les trois traits deviennent la croix. */
  .poignee__ferme{ display:none; }
  .poignee[aria-expanded="true"] .poignee__ouvre{ display:none; }
  .poignee[aria-expanded="true"] .poignee__ferme{ display:block; }

  .plate__top .lang{ grid-column:2; grid-row:1; justify-self:end; margin-left:auto; }

  .tiroir{ display:none; }
  .tiroir[data-ouvert]{
    display:grid; gap:.5rem;
    grid-column:1 / -1; grid-row:2; justify-self:stretch;
    border:2px solid var(--ink); background:var(--paper); padding:.6rem .7rem;
  }
  /* Les deux nav portent des colonnes désignées pour la rangée du bureau ;
     dans le tiroir elles se suivent, l'une sous l'autre. */
  .tiroir[data-ouvert] > *{ grid-column:1; justify-self:stretch; }
  .tiroir[data-ouvert] .pages{ display:grid; gap:.2rem; }
  .tiroir[data-ouvert] .pages__lien{ min-height:44px; }
  /* Le filet sépare les deux grammaires : au-dessus, ce qui change de page ;
     au-dessous, ce qui descend dans celle-ci. */
  .tiroir[data-ouvert] .secnav{
    display:grid; gap:.4rem; padding-top:.55rem; border-top:1px solid var(--hair);
  }
  .tiroir[data-ouvert] .tab{ justify-content:center; min-height:44px; }
  .lang{ width:72px; }

  .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; }

  /* « BIENVENUE » : LA PHOTO, LE TITRE, PUIS LE TEXTE.
     En colonne, la photo du chalet tombait après les deux paragraphes et les
     précisions — au bas d'un texte que rien n'illustrait pendant qu'on le
     lisait. Elle est remontée en tête : c'est la maison elle-même qui ouvre la
     section, un soir d'été dans le parc, et le titre lui sert de légende. Le
     texte, ensuite, parle de ce qu'on vient de voir.

     Le titre vit dans la colonne de texte, la photo à côté : pour les
     intercaler il faut qu'ils soient frères. `display:contents` dissout la
     colonne — ses enfants deviennent ceux de la section — et `order` les
     redistribue. La gouttière de la grille tombe à zéro : chaque morceau
     retrouve alors ses propres marges, celles qu'il porte déjà sur écran
     large, au lieu d'un écart unique de 1,8 rem entre le texte et sa
     signature. */
  .about__in{ gap:0; align-items:stretch; }
  .about__copy{ display:contents; }
  .hero{ order:1; margin:0 0 1.1rem; }
  .about__copy .h2{ order:2; }
  .about__body{ order:3; }
  .about__sign{ order:4; }

  /* « NOUS TROUVER » : LES HEURES, L'ADRESSE, LE PLAN.
     L'ordre du bureau se lit de gauche à droite — le plan situe, l'adresse
     nomme, les heures concluent. Empilé, il se lisait de haut en bas et
     mettait une image de 30 rem entre le doigt et la seule chose qu'on
     descend vérifier dans le parc : est-ce ouvert, et jusqu'à quand. Les
     heures remontent donc en tête, le plan ferme la marche.

     Chaque colonne est reconnue à ce qu'elle porte, non à son rang : une
     colonne ajoutée un jour ne décalera pas les deux autres. */
  .infos__in{ grid-template-columns:1fr; }
  .infos__col:has(.hourslist){ order:1; }
  .infos__col:has(.infos__addr){ order:2; }
  .infos__in .plan{ order:3; }
  /* Le plan situe, il n'a pas à occuper l'écran : une bande basse suffit. */
  .infos__in .plan__img{ aspect-ratio:2/1; }

  /* Trop étroit pour deux colonnes : les bailleurs repassent sous le nom. */
  .foot__in{ grid-template-columns:1fr; }
}

/* Les petits téléphones — 320 à 400 px de large, encore nombreux dans le parc.
   La rangée de tête n'y risque plus rien depuis qu'elle ne porte que deux
   objets ; c'est la mention des bailleurs, couchée sur une ligne, qui y est
   maintenant la plus large. Elle rétrécit d'un cran, la plaque de langue
   aussi. Rien de ce qu'on touche ne descend sous 44 px. */
@media (max-width: 400px){
  .plate{ padding:.7rem 0 .8rem; }
  .plate__top{ gap:.45rem; margin-bottom:.7rem; }
  .lang{ width:64px; padding:.2rem; }
  .soutien--tete{ gap:.25rem .6rem; }
  .soutien--tete .soutien__list{ gap:.35rem .7rem; }
  .soutien--tete .soutien__list img{ height:38px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  /* Les colonnes de « Bienvenue » et la photo qui recule reçoivent une
     valeur fixe d'app.js : elles restent dans leur composition de repos. */
}

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