/* ===========================================================================
   Pages ordinaires dans la nouvelle direction artistique.

   da.css habille l'accueil : chacune de ses classes vise une section précise
   de cette page. Il n'y a rien dedans pour une page de texte suivi. Cette
   feuille complète, elle ne remplace pas : à charger APRÈS da.css, dont elle
   reprend les variables, les fontes et les rythmes.
   =========================================================================== */

/* ---------- la tête de page ---------- */
.page-tete {
  padding: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)) var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
  max-width: 1180px;
  margin-inline: auto;
}
.page-tete .eyebrow { margin-bottom: 1rem; }
.page-tete h1 {
  margin: 0 0 1.4rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.page-tete h1 em { font-style: italic; color: var(--oak); }
.page-tete .lead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- le texte suivi ---------- */
.prose {
  max-width: 72ch;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 9vw, 8rem);
}
.prose > h2 {
  margin: clamp(2.8rem, 6vw, 4.4rem) 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  gap: .85rem;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h2 > span:first-child {
  flex: none;
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--rust);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-width: 2rem;
  padding: .35rem 0;
  text-align: center;
  transform: translateY(-.25em);
}
.prose h3 {
  margin: 2rem 0 .6rem;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oak);
}
.prose p, .prose li { font-size: 1rem; line-height: 1.75; color: var(--ink); }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.1rem; }
.prose li { margin-bottom: .55rem; }
.prose li::marker { color: var(--gold); }
.prose strong { font-weight: 600; }
.prose a { color: var(--rust); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--oak); }

/* la carte d'identité de la maison, et les encadrés */
.prose .identite,
.prose .encadre {
  margin: 0 0 1.4rem;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  background: var(--cream);
  border: 1px solid var(--line);
  line-height: 1.8;
}
.prose .encadre { border-left: 3px solid var(--gold); }
.prose .maj {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- une grille de cartes (points de vente, contact) ---------- */
/* Quatre cartes : une grille automatique les range en 3 + 1, avec une
   carte seule en bout de ligne. Des paliers francs donnent 1, puis 2 + 2,
   puis 4 — jamais d orpheline. */
.fiches {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: 1fr;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 9vw, 8rem);
}
.fiche {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .4s ease, transform .4s ease;
}
a.fiche:hover { background: var(--paper); transform: translateY(-3px); }
.fiche h2, .fiche h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.2;
}
.fiche p { margin: 0; font-size: .94rem; line-height: 1.65; color: var(--muted); }
.fiche address { font-style: normal; font-size: .94rem; line-height: 1.7; color: var(--ink); }
.fiche__num {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--rust);
}
.fiche strong { font-weight: 600; }
.fiche a { color: var(--rust); }

/* ---------- une bande d'images en pleine largeur ---------- */
.bandeau-photo {
  margin: 0 0 clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.bandeau-photo img {
  width: 100%;
  height: clamp(240px, 42vw, 560px);
  object-fit: cover;
}

/* ---------- deux colonnes texte + image ---------- */
.duo {
  display: grid;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
  max-width: 1180px;
  margin: 0 auto clamp(3.5rem, 8vw, 7rem);
  padding: 0 var(--gutter);
}
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } .duo--inverse > :first-child { order: 2; } }
.duo__texte h2 {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.duo__texte h2 em { font-style: italic; color: var(--oak); }
.duo__texte p { margin: 0 0 1.05rem; line-height: 1.75; color: var(--muted); }
.duo__texte p:last-child { margin-bottom: 0; }
.duo img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }

/* ---------- les boutiques, en cartes avec photo ---------- */
/* même raison que .fiches : pas de carte seule en bout de ligne */
.rayons {
  display: grid;
  gap: clamp(1rem, 2vw, 1.7rem);
  grid-template-columns: 1fr;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
}
.rayon {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background .4s ease, transform .4s ease;
}
.rayon:hover { background: var(--paper); transform: translateY(-3px); }
.rayon img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rayon__corps { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: clamp(1.3rem, 2.6vw, 1.9rem); }
.rayon h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.1;
}
.rayon p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--muted); }
.rayon__prix { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--gold); }
.rayon__aller {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust);
}
.rayon--bientot { pointer-events: none; opacity: .62; }
.rayon--bientot .rayon__aller { color: var(--muted); }

/* ---------- les trois temps d'une commande ---------- */
.temps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
  margin: 0 auto clamp(4rem, 9vw, 8rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.temps > div { padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.6rem); border-left: 1px solid var(--line); }
.temps > div:first-child { border-left: 0; }
.temps b {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}
.temps span { font-size: .92rem; line-height: 1.65; color: var(--muted); }
@media (max-width: 760px) {
  .temps { grid-template-columns: 1fr; margin-inline: var(--gutter); }
  .temps > div { border-left: 0; border-top: 1px solid var(--line); }
  .temps > div:first-child { border-top: 0; }
}

/* ===========================================================================
   Le panier sur les pages catalogue.

   js/main.js fabrique ces éléments au chargement, autour de chaque prix
   portant data-borne : le bouton d'ajout, le compteur −/+, et la liste des
   versions quand l'article en a plusieurs. Rien de tout cela n'est dans le
   HTML : si ces règles manquent, les boutons existent mais ne se voient pas.
   =========================================================================== */

[data-borne], [data-borne-cat] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

.cart-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  padding: 0 1.15rem;
  border: 1px solid var(--rust);
  border-radius: 999px;
  background: transparent;
  color: var(--rust);
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cart-add:hover { background: var(--rust); color: var(--paper); }
.cart-add.on { background: var(--rust); color: var(--paper); }
@keyframes ajout-pulse { 0% { transform: scale(1); } 40% { transform: scale(.93); } 100% { transform: scale(1); } }
.cart-add.pulse { animation: ajout-pulse .35s ease; }

.cart-ctrl {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .22rem;
  border: 1px solid var(--rust);
  border-radius: 999px;
  background: rgba(156, 67, 38, .07);
}
.cart-ctrl button {
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--rust);
  font: 600 1.05rem/1 var(--body);
  cursor: pointer;
  touch-action: manipulation;
}
.cart-ctrl button:hover { background: rgba(156, 67, 38, .16); }
.cart-ctrl output {
  padding: 0 .6rem;
  font: 600 .7rem/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rust);
  white-space: nowrap;
}

/* le choix d'une version : 4, 6 ou 8 pièces, par exemple */
.cart-variants {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  flex-basis: 100%;
  margin-top: .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: var(--cream);
}
.cart-variants-head {
  flex: 1 1 100%; margin: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oak);
}
.cart-variant {
  display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
  touch-action: manipulation;
}
.cart-variant:hover { border-color: var(--rust); background: var(--cream); }
.cart-variant em { font-family: var(--display); font-style: italic; color: var(--rust); white-space: nowrap; }
.cart-variants-note { flex: 1 1 100%; margin: .2rem 0 0; font-size: .85rem; line-height: 1.6; color: var(--muted); }

/* la pastille du panier tressaille quand elle reçoit */
@keyframes panier-recoit { 0% { transform: scale(1); } 30% { transform: scale(1.14); } 55% { transform: scale(.96); } 100% { transform: scale(1); } }
.recoit { animation: panier-recoit .5s cubic-bezier(.2,.9,.3,1.3); }

/* sur un téléphone, chaque commande prend toute la largeur */
@media (max-width: 560px) {
  .cart-add, .cart-ctrl { display: flex; width: 100%; margin: .7rem 0 0; }
  .cart-ctrl { justify-content: space-between; }
  .cart-variant { width: 100%; justify-content: space-between; }
}

/* ===========================================================================
   Les pages catalogue : carte événements, entreprise.

   Leur structure n'a pas été touchée — elle porte les ancres de section et
   les 38 crochets du panier. Seul leur habillage passe à la nouvelle
   direction artistique, de la page sombre à la page claire.
   =========================================================================== */

.catalogue .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- la tête de la carte ---------- */
.catalogue .tete-carte {
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) var(--gutter) clamp(3rem, 6vw, 5rem);
  max-width: 1180px;
  margin-inline: auto;
  text-align: center;
}
.catalogue .tete-carte .logo { width: 86px; height: auto; margin: 0 auto 1.6rem; }
.catalogue .tete-carte h1 {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.02em;
}
.catalogue .tete-carte h1 em { font-style: italic; color: var(--oak); }
.catalogue .tete-carte .eyebrow { margin: 0 0 1.4rem; justify-content: center; }
.catalogue .tete-carte .sub { max-width: 60ch; margin: 0 auto; line-height: 1.7; color: var(--muted); }
.catalogue .meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.catalogue .meta div {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rust);
}
.catalogue .meta strong { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ---------- une section de la carte ---------- */
.catalogue .section { padding: clamp(3rem, 7vw, 6rem) 0; }
.catalogue .section.paper { background: var(--cream); }
.catalogue .section-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.catalogue .section-num {
  flex: none;
  font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--gold);
}
.catalogue .section-head h2 {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.015em;
  white-space: nowrap;
}
.catalogue .rule { flex: 1; height: 1px; background: var(--line); }
.catalogue .section-note { max-width: 62ch; margin: 0 0 clamp(1.8rem, 4vw, 3rem); line-height: 1.7; color: var(--muted); }

/* ---------- un article mis en avant, texte et photo ---------- */
.catalogue .feature {
  display: grid; gap: clamp(1.2rem, 3vw, 3rem); align-items: center;
  grid-template-columns: 1fr;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .catalogue .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .catalogue .feature.reverse .feature-media { order: 2; }
  .catalogue .feature.reverse .feature-caption { order: 3; }
}
.catalogue .feature-media { position: relative; overflow: hidden; background: var(--cream); }
.catalogue .feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalogue .ar-tall img { aspect-ratio: 3 / 4; }
.catalogue .ar-square img { aspect-ratio: 1 / 1; }
.catalogue .ar-wide img { aspect-ratio: 16 / 10; }
.catalogue .feature-media .tag {
  position: absolute; left: 0; bottom: 0;
  padding: .5rem .9rem;
  background: var(--paper);
  font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rust);
}
.catalogue .feature-caption {
  grid-column: 1 / -1;
  margin: -.6rem 0 0;
  font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--muted);
}
@media (min-width: 900px) { .catalogue .feature-caption { grid-column: 1; margin-top: -1.8rem; } }
.catalogue .feature-text h3 {
  margin: 0 0 .7rem;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.1;
}
.catalogue .feature-text p { margin: .7rem 0 0; line-height: 1.75; color: var(--muted); }
.catalogue .feature-text .price,
.catalogue .price {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--rust);
}

/* ---------- une ligne de carte : nom, pointillés, prix ---------- */
.catalogue .list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .3rem .7rem;
  padding: clamp(.9rem, 2vw, 1.3rem) 0;
  border-top: 1px solid var(--line);
}
.catalogue .list-row:last-child { border-bottom: 1px solid var(--line); }
.catalogue .list-main h3 {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.25;
}
.catalogue .list-leader { border-bottom: 1px dotted var(--line); transform: translateY(-.25em); }
.catalogue .list-price {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--rust);
  justify-self: end;
}
.catalogue .list-desc,
.catalogue .list-note {
  grid-column: 1 / -1;
  margin: .25rem 0 0;
  font-size: .93rem; line-height: 1.65; color: var(--muted);
}
.catalogue .list-note { font-style: italic; }
@media (max-width: 700px) {
  .catalogue .list-row { grid-template-columns: 1fr; }
  .catalogue .list-leader { display: none; }
  .catalogue .list-price { justify-self: start; }
}

/* ---------- les notes, les étiquettes ---------- */
.catalogue .note {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  background: var(--cream);
  border-left: 2px solid var(--gold);
  font-size: .9rem; line-height: 1.65; color: var(--muted);
}
.catalogue .section.paper .note { background: var(--paper); }
.catalogue .salad-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; }
.catalogue .salad-tags span {
  padding: .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem; color: var(--ink);
  background: var(--paper);
}

/* ---------- le bouton plein de la page entreprise ---------- */
.catalogue .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.catalogue .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: 0 1.5rem;
  border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
.catalogue .btn:hover { background: var(--ink); color: var(--paper); }
.catalogue .btn.solid { background: var(--ink); color: var(--paper); }
.catalogue .btn.solid:hover { background: var(--rust); border-color: var(--rust); }

/* l'appel à l'action en fin de page catalogue */
.catalogue .appel { max-width: 62ch; text-align: left; }
.catalogue .appel h2 {
  margin: 0 0 1rem;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -.015em;
}
.catalogue .appel h2 em { font-style: italic; color: var(--oak); }
.catalogue .appel p { margin: 0; line-height: 1.75; color: var(--muted); }

/* ===========================================================================
   Les formulaires, partagés par le compte, la commande et les deux boutiques.
   Mêmes noms de classes que l'ancienne feuille : les scripts de ces pages
   les fabriquent parfois à la volée.
   =========================================================================== */

.form-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.3rem, 3vw, 2.3rem);
  border: 1px solid var(--line);
  background: var(--cream);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.form-field { display: flex; flex-direction: column; gap: .45rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oak);
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: .65rem .15rem;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  transition: border-color .3s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-bottom-color: var(--rust);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); opacity: .75; }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-submit { margin-top: 1.9rem; text-align: center; }
.resa-optional { text-transform: none; letter-spacing: 0; font-style: italic; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

/* le choix particulier / entreprise */
.resa-choice { border: 0; margin: 0 0 1.9rem; padding: 0; min-width: 0; }
.resa-choice legend {
  margin-bottom: .8rem; padding: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--oak);
}
.resa-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 620px) { .resa-options { grid-template-columns: 1fr; } }
.resa-option {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.resa-option input { position: absolute; opacity: 0; pointer-events: none; }
.resa-option-title { font-family: var(--display); font-size: 1.25rem; color: var(--ink); }
.resa-option-desc { font-size: .85rem; line-height: 1.55; color: var(--muted); }
.resa-option:hover { border-color: var(--rust); }
.resa-option.is-checked { border-color: var(--rust); background: rgba(156, 67, 38, .06); box-shadow: inset 0 0 0 1px var(--rust); }
.resa-option.is-checked .resa-option-title { color: var(--rust); }
.resa-option:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }

/* les boutons des pages fonctionnelles */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.6rem;
  border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--rust); border-color: var(--rust); }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.9rem; }

/* les liens discrets sous un formulaire (mot de passe oublié, premier accès) */
.lien-doux { color: var(--rust); text-decoration: underline; text-underline-offset: .18em; font-size: .9rem; }
.lien-doux:hover { color: var(--oak); }

/* ===========================================================================
   Les variables de l'ancienne feuille, traduites.

   Les pages fonctionnelles — boutiques, commande — ont chacune leur <style>
   interne, écrit avec le vocabulaire de css/style.css. Cinq de ces variables
   n'existent pas dans da.css : sans ces alias, toutes les règles qui s'en
   servent deviennent invalides et les éléments perdent bordures et couleurs.
   =========================================================================== */
:root {
  --ink2: var(--cream);         /* l'ancien fond de carte sombre : une carte est crème sur page claire */
  --grey: var(--muted);         /* le texte secondaire */
  --gold-soft: var(--rust);     /* l'accent : trop pâle sur fond clair, on prend le rouille */
  --line-dark: var(--line);     /* le filet sur fond clair, c'est déjà --line ici */
  --oak-dark: var(--oak);
  --paper2: var(--cream);
}

/* les sections des pages fonctionnelles, en clair */
.boutique-page .section { padding: clamp(3rem, 7vw, 6rem) 0; }
.boutique-page .section.paper { background: var(--cream); }
.boutique-page .section.tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.boutique-page .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.boutique-page .section-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.boutique-page .section-num { flex: none; font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--gold); }
.boutique-page .section-head h2 {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.015em;
  white-space: nowrap;
}
.boutique-page .rule { flex: 1; height: 1px; background: var(--line); }
.boutique-page .section-note { max-width: 70ch; margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem); line-height: 1.7; color: var(--muted); }

/* ---------- le tunnel de commande : pas de navigation, c'est voulu ---------- */
.tunnel .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.tunnel .section { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }

/* ===========================================================================
   La page de nuit : le Menu de Fêtes.

   Elle garde son ciel sombre, ses étoiles et son feuilletage. Le socle s'y
   accorde au lieu de lui passer une barre crème par-dessus. Les variables de
   l'ancienne feuille y reprennent leur sens « clair sur sombre » : sans ces
   redéfinitions, les alias posés plus haut pour les pages claires rendraient
   le texte illisible ici.
   =========================================================================== */
body.nuit {
  background: var(--black);
  color: var(--paper);

  --ink2: var(--charcoal);                  /* le fond des cartes */
  --grey: var(--oak-light);                 /* le texte secondaire, lisible sur sombre */
  --gold-soft: #c9a77a;                     /* l'accent doré, dans sa version claire */
  --line: rgba(156, 128, 103, .32);         /* le filet sur fond sombre */
  --line-dark: rgba(130, 102, 80, .26);
  --paper2: var(--cream);
}
body.nuit .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
body.nuit .section { padding: clamp(3rem, 7vw, 6rem) 0; }

/* la tête de page, en clair sur la nuit */
body.nuit .page-tete h1 { color: var(--paper); }
body.nuit .page-tete h1 em { color: var(--gold-soft); }
body.nuit .page-tete .lead { color: var(--oak-light); }
body.nuit .eyebrow { color: var(--gold-soft); }

/* l'en-tête : même dessin, couleurs inversées */
body.nuit .site-header { color: var(--paper); }
body.nuit .site-header::before { background: rgba(11, 10, 12, .96); border-bottom-color: var(--line-light); }
body.nuit .icone-entete { border-color: var(--line-light); }
body.nuit .icone-entete:hover, body.nuit .icone-entete.est-plein { border-color: var(--gold); }
body.nuit .menu-button { color: var(--paper); }
body.nuit .menu-button__lines span { background: var(--paper); }
body.nuit .pill--dark { background: var(--paper); color: var(--black); }
body.nuit .pill--dark .pill__icon { background: var(--black); color: var(--paper); }
body.nuit .skip-link { background: var(--paper); color: var(--black); }

/* le menu plein écran, de nuit lui aussi */
@media (max-width: 1100px) {
  body.nuit .site-nav { background: var(--black); }
}
body.nuit .site-nav > a { color: var(--paper); }
body.nuit .site-nav__num { color: var(--gold-soft); }
body.nuit .site-nav__plus a { color: var(--oak-light); }
body.nuit .site-nav__contact a { color: var(--oak-light); }

/* le bouton rond du menu, qui est noir sur la page claire */
body.nuit .menu-button__lines { background: var(--paper); }
body.nuit .menu-button__lines span { background: var(--black); }

/* ===========================================================================
   Les cibles tactiles.

   Mesuré sur un écran de 375 px : des liens de 15 à 26 px de haut, qu'on
   tape à côté. Un doigt demande environ 44 px. On ne grossit pas le texte,
   on lui donne de la hauteur.
   =========================================================================== */
@media (max-width: 780px) {
  /* les coordonnées d'une fiche : on les tape pour appeler ou écrire */
  .fiche h2 a, .fiche address a, .prose .identite a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* le compte : voir son mot de passe, les liens sous le formulaire */
  .lien-doux, .mdp-voir {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  /* le crédit de l'agence */
  .site-footer__credit a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* le fil d'Ariane des boutiques, en haut de page : c'est le chemin de retour,
   il doit se toucher */
.eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: inherit;
  text-decoration: none;
}
.eyebrow a:hover { color: var(--rust); }

/* les paliers de .fiches et .rayons */
@media (min-width: 580px) {
  .fiches, .rayons { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .fiches, .rayons { grid-template-columns: repeat(4, 1fr); }
}

/* La couverture du menu est un document en hauteur : dans un cadre en
   largeur, un recadrage centré lui coupe le logo en haut et les cadeaux en
   bas. On vise plus bas, sur le bandeau qui porte le titre et les
   casse-noisettes. */
.rayon__couverture { object-position: center 76%; }

/* ===========================================================================
   Le sommaire d'une carte longue : la barre qui permet de sauter au barbecue
   ou au brunch. Elle se colle sous l'en-tête dès qu'on la dépasse.
   =========================================================================== */
.page-toc {
  position: sticky;
  top: var(--header-h);
  z-index: 100;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(242, 236, 225, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-toc-inner {
  display: flex;
  gap: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.page-toc-inner::-webkit-scrollbar { display: none; }
.page-toc-inner a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 .9rem;
  color: var(--muted);
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.page-toc-inner a:first-child { padding-left: 0; }
.page-toc-inner a:hover { color: var(--ink); }
.page-toc-inner a.active { color: var(--rust); border-bottom-color: var(--rust); }

/* sur la page de nuit, la barre s'y accorde */
body.nuit .page-toc { background: rgba(11, 10, 12, .96); border-color: var(--line-light); }
body.nuit .page-toc-inner a { color: var(--oak-light); }
body.nuit .page-toc-inner a:hover { color: var(--paper); }
body.nuit .page-toc-inner a.active { color: var(--gold); border-bottom-color: var(--gold); }

/* les ancres descendent sous l'en-tête ET sous le sommaire */
.section[id] { scroll-margin-top: calc(var(--header-h) + 60px); }

/* quand la barre du haut s'efface, le sommaire prend sa place au lieu de
   flotter au milieu de la page */
.page-toc { transition: top .5s var(--ease-out); }
body:has(.site-header.is-hidden) .page-toc { top: 0; }
body.barre-cachee .page-toc { top: 0; }

/* ===========================================================================
   Choisir ses bouchées.

   Sur téléphone c'est une feuille qui monte du bas : hauteur plafonnée à
   85vh et défilement interne, sinon le bas est coupé sur iPhone et le
   bouton « Ajouter » devient inatteignable.
   =========================================================================== */
.choix-fond {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(11, 10, 12, .55);
  backdrop-filter: blur(3px);
  animation: choix-fondu .25s ease;
}
@keyframes choix-fondu { from { opacity: 0; } to { opacity: 1; } }
body.choix-ouvert { overflow: hidden; }

.choix {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: 0;
  animation: choix-monte .35s var(--ease-out);
}
@keyframes choix-monte { from { transform: translateY(22px); } to { transform: none; } }

.choix-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.choix-titre {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
}
.choix-fermer {
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}
.choix-fermer:hover { border-color: var(--rust); color: var(--rust); }

/* le corps défile, la tête et le pied restent */
.choix-corps { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.1rem 1.3rem; }
.choix-attente { margin: 0; color: var(--muted); }

.choix-saisons { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.choix-saison {
  flex: 1;
  min-height: 44px;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: 600 .72rem/1 var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.choix-saison[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.choix-groupe {
  margin: 1.4rem 0 .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oak);
}
.choix-groupe:first-of-type { margin-top: 0; }
.choix-liste { display: grid; gap: .4rem; }

.choix-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  background: var(--cream);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.choix-item:hover { border-color: var(--gold); }
.choix-item input { flex: none; width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--rust); cursor: pointer; }
.choix-item span { font-size: .94rem; line-height: 1.5; color: var(--ink); }
.choix-item:has(input:checked) { border-color: var(--rust); background: rgba(156, 67, 38, .07); }
.choix-item:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.choix-item:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }

.choix-note { margin: 1.3rem 0 0; font-size: .85rem; line-height: 1.6; color: var(--muted); font-style: italic; }

.choix-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 1rem 1.3rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.choix-compte { font-size: .88rem; color: var(--muted); }
.choix-compte.est-complet { color: var(--rust); font-weight: 600; }
.choix-valider {
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 600 .72rem/1 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.choix-valider:hover:not(:disabled) { background: var(--rust); border-color: var(--rust); }
.choix-valider:disabled { opacity: .35; cursor: not-allowed; }

/* sur un écran large, la feuille devient une boîte centrée */
@media (min-width: 680px) {
  .choix-fond { align-items: center; padding: 1.5rem; }
  .choix { max-height: 82vh; border-bottom: 1px solid var(--line); }
  .choix-liste { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   Le piège à robots.

   Ce champ doit rester dans le formulaire — c'est lui qui arrête le spam,
   les robots le remplissent, pas les humains — mais il ne doit jamais se
   voir. Sans cette règle il s'affiche en clair, « Ne pas remplir : » avec
   sa case, en haut du tunnel de commande.
   =========================================================================== */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* la note sous un formulaire */
.form-note {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-style: italic;
  font-size: .88rem;
  text-align: center;
  color: var(--muted);
}

/* ---------- relire son mot de passe ----------
   Indispensable quand on le recopie depuis le mail d'ouverture de compte.
   Sans ces règles le bouton « Voir » sort du champ au lieu de s'y loger. */
.mdp-boite { position: relative; display: block; }
.mdp-boite input { padding-right: 86px; }
.mdp-voir {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .6rem;
  border: 0;
  background: none;
  font-family: var(--body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
  cursor: pointer;
}
.mdp-voir:hover { color: var(--oak); }

/* ---------- l'accent doré des sous-titres de la carte ---------- */
.catalogue .accent { color: var(--gold); }

/* Les apparitions en fondu au défilement ne sont PAS remises.
   L observateur de js/main.js a un seuil de 12 % : un bloc plus haut que
   l écran ne l atteint jamais et resterait invisible — 11 éléments dans ce
   cas sur la carte événements, dont une section entière. Tant que ce seuil
   n est pas corrigé et reverifie, mieux vaut pas d animation du tout. */

/* ===========================================================================
   Le matériel d'événement.

   On pose la question catégorie par catégorie ; un « j'en ai besoin » ouvre
   le catalogue, qui glisse d'une catégorie à l'autre comme le menu de fêtes.
   =========================================================================== */
.loc-questions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}
@media (min-width: 620px) { .loc-questions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .loc-questions { grid-template-columns: repeat(4, 1fr); } }

.loc-question {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: left;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--line);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.loc-question:hover { border-color: var(--rust); transform: translateY(-2px); }
.loc-question__nom { font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink); }
.loc-question__sous { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.loc-question__nb {
  align-self: flex-start;
  margin-top: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--rust);
  color: var(--paper);
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.loc-question__oui {
  margin-top: .7rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rust);
}

/* le bandeau de total du matériel */
.loc-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem;
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: var(--cream);
}
.loc-total[hidden] { display: none; }
.loc-total span { font-size: .9rem; color: var(--muted); }
.loc-total b { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--rust); }
.loc-total .line-link { margin-left: auto; }

/* ---------- le catalogue plein écran ---------- */
.loc-vue {
  position: fixed; inset: 0; z-index: 420;
  display: flex; flex-direction: column;
  background: var(--paper);
}
.loc-vue[hidden] { display: none; }
body.loc-ouvert { overflow: hidden; }

.loc-barre {
  display: flex; align-items: center; gap: .8rem; flex: none;
  padding: .8rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.loc-titre { flex: none; font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.loc-recherche { flex: 1 1 auto; min-width: 0; }
.loc-recherche input {
  width: 100%; min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: .95rem;
}
.loc-recherche input:focus { outline: none; border-color: var(--rust); }
.sr { position: absolute; left: -9999px; }
.loc-fermer {
  flex: none; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 600 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}

.loc-onglets {
  display: flex; gap: 0; flex: none;
  padding: 0 var(--gutter);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.loc-onglets::-webkit-scrollbar { display: none; }
.loc-onglet {
  flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 46px; padding: 0 .9rem;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted);
  font: 600 .68rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.loc-onglet:hover { color: var(--ink); }
.loc-onglet[aria-current="true"] { color: var(--rust); border-bottom-color: var(--rust); }
.loc-onglet__nb {
  padding: .1rem .4rem; border-radius: 999px;
  background: var(--rust); color: var(--paper);
  font-size: .6rem; letter-spacing: 0;
}

.loc-fenetre { flex: 1 1 auto; overflow: hidden; }
.loc-rail { display: flex; height: 100%; transition: transform .45s cubic-bezier(.22,.8,.26,1); will-change: transform; }
.loc-rail.sans-transition { transition: none; }
.loc-page { flex: 0 0 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.loc-liste {
  display: grid; gap: .5rem;
  grid-template-columns: 1fr;
  max-width: 1180px; margin: 0 auto;
  padding: 1rem var(--gutter) 2rem;
}
@media (min-width: 720px) { .loc-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .loc-liste { grid-template-columns: 1fr 1fr 1fr; } }

.loc-article {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  background: var(--cream);
  transition: border-color .25s ease, background .25s ease;
}
.loc-article.est-pris { border-color: var(--rust); background: rgba(156, 67, 38, .07); }
.loc-article img, .loc-sans-photo {
  width: 64px; height: 64px; object-fit: cover;
  background: var(--paper); border: 1px solid var(--line);
}
.loc-sans-photo { display: block; }
.loc-article__texte { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.loc-article__texte b { font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.loc-article__prix { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--rust); }
.loc-article__prix small { font-family: var(--body); font-style: normal; font-size: .72rem; color: var(--muted); }

.loc-compteur { display: inline-flex; align-items: center; gap: .1rem; }
.loc-compteur button {
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--rust);
  font: 600 1.05rem/1 var(--body); cursor: pointer;
  touch-action: manipulation;
}
.loc-compteur button:hover { border-color: var(--rust); }
.loc-compteur output { min-width: 34px; text-align: center; font: 600 .95rem/1 var(--body); color: var(--ink); }

.loc-rien { padding: 2rem 0; color: var(--muted); font-style: italic; }

.loc-pied {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex: none;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.loc-pied button {
  width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font-size: 1.15rem; cursor: pointer;
}
.loc-pied button:disabled { opacity: .3; cursor: default; }
.loc-pages { font-size: .8rem; letter-spacing: .12em; color: var(--muted); min-width: 56px; text-align: center; }

/* le choix du nombre de pièces, en tête du panneau des bouchées */
.choix-versions { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.choix-version {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: 56px; padding: .6rem .4rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--cream); color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.choix-version b { font-family: var(--body); font-size: .8rem; font-weight: 600; }
.choix-version em { font-family: var(--display); font-style: italic; font-size: .85rem; color: var(--rust); }
.choix-version[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choix-version[aria-pressed="true"] em { color: var(--gold); }

/* le bouton d'ajout du catalogue, qui laisse la place au compteur */
.loc-ajouter {
  min-height: 40px;
  padding: 0 .9rem;
  border: 1px solid var(--rust);
  border-radius: 999px;
  background: transparent;
  color: var(--rust);
  font: 600 .66rem/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.loc-ajouter:hover { background: var(--rust); color: var(--paper); }
.loc-ajouter[hidden], .loc-compteur[hidden] { display: none; }


/* `hidden` doit toujours gagner. Sans cette ligne, une regle de classe comme
   .cc-field{display:flex} l'emporte sur l'attribut, et un bloc masque par le
   script reapparait — c'est ce qui remettait « Payer maintenant » sur un
   devis d'evenement. */
[hidden] { display: none !important; }

/* Le nombre de convives : un trait loin sous son titre ne se voit pas comme
   une case. On lui donne la pastille bordée de l'heure de retrait, juste
   au-dessus de lui. */
.cc-nombre {
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 0 1rem !important;
  min-height: 48px;
  background: var(--paper) !important;
  max-width: 220px;
}
.cc-nombre:focus { border-color: var(--rust) !important; }

/* dans le tunnel, le catalogue n'a pas de marges de section */
#cc-corps #location .wrap, .tunnel #location .wrap { padding: 0; max-width: none; }
.tunnel #location { margin-bottom: 1.4rem; }
.tunnel .loc-questions { grid-template-columns: 1fr 1fr; gap: .6rem; }
.tunnel .loc-question { padding: .9rem; }
.tunnel .loc-question__sous { display: none; }
@media (min-width: 620px) { .tunnel .loc-questions { grid-template-columns: repeat(4, 1fr); } }

/* ===========================================================================
   Jamais de champ sous 16 px.

   Safari sur iPhone zoome automatiquement dès qu'on touche un champ dont le
   texte fait moins de 16 px, et la page reste décalée ensuite : les deux
   bords se retrouvent coupés. C'est ce qui arrivait à l'étape 3 du tunnel,
   avec l'intitulé de facture à 13,3 px.
   =========================================================================== */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ===========================================================================
   Les apparitions au défilement.

   Chaque bloc monte doucement en entrant à l'écran. Le style est volontairement
   discret : 18 px de montée, pas de glissement latéral, pas de zoom — on doit
   sentir la page vivre, pas la voir s'agiter.

   js/main.js garantit qu'aucun bloc ne reste invisible : seuil à zéro et un
   filet qui révèle aussi ce qui a été dépassé. Le réglage « animations
   réduites » du téléphone désactive tout, côté script comme ici.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s cubic-bezier(.16, .8, .3, 1),
                transform .8s cubic-bezier(.16, .8, .3, 1);
  }
  .reveal.in-view { opacity: 1; transform: none; }
}