/* ============================================================
   INTENSÉ'MANS — Composants
   Registre crème. Chaque bloc note la règle de design qu'il applique.
   ============================================================ */

/* ============================================================
   1. EN-TÊTE
   ============================================================ */

.im-header {
  position: sticky;
  z-index: var(--z-header);
  top: 0;
  min-height: var(--im-header-h);
  border-bottom: 1px solid var(--im-rule);
  background: var(--im-glass);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.im-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  min-height: var(--im-header-h);
  max-width: var(--im-maxw);
  margin-inline: auto;
  padding-inline: var(--im-page-x);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: max-width 0.45s var(--im-ease), padding 0.45s var(--im-ease),
              border-color 0.45s var(--im-ease), background 0.45s var(--im-ease),
              box-shadow 0.45s var(--im-ease);
}

/* Passé le premier défilement, la barre devient une pastille posée sur
   la page. La hauteur du bandeau ne change pas : le filtre de catégories
   reste calé dessous sans sauter. */
.im-header[data-scrolled="true"] {
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.im-header[data-scrolled="true"] .im-header__inner {
  max-width: min(1020px, calc(100% - var(--im-page-x)));
  padding-inline: clamp(16px, 1.6vw, 24px);
  border-color: var(--im-rule);
  background: var(--im-glass-2);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--im-shadow-sm), inset 0 1px 0 var(--im-edge);
}
@media (max-width: 1000px) {
  .im-header[data-scrolled="true"] .im-header__inner { max-width: calc(100% - 16px); }
}

.im-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.im-brand img {
  width: 42px; height: 42px;
  border-radius: 50%;
  box-shadow: var(--im-shadow-sm);
}
.im-brand__txt { display: flex; flex-direction: column; line-height: 1; }
.im-brand__name {
  font-family: var(--im-display);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--im-fg);
}
.im-brand__sub {
  margin-top: 4px;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--im-fg-muted);
}

.im-nav { margin-left: auto; }
.im-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin: 0; padding: 0;
  list-style: none;
}
.im-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 0.92rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--im-fg-soft);
  transition: color 0.3s var(--im-ease);
}
.im-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--im-rose-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--im-ease);
}
.im-nav a:hover { color: var(--im-fg); }
.im-nav a:hover::after,
.im-nav a[aria-current="page"]::after { transform: scaleX(1); }
.im-nav a[aria-current="page"] { color: var(--im-fg); font-weight: 500; }

.im-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.im-cartlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--im-rule-2);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--im-fg);
  transition: border-color 0.3s var(--im-ease), background 0.3s var(--im-ease);
}
.im-cartlink:hover { border-color: var(--im-rose-ink); background: var(--im-bg-2); }
.im-cartlink__count {
  display: grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--im-rose-ink);
  color: var(--im-bg);
  font-size: 0.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.im-cartlink__count[data-empty="true"] { background: var(--im-bg-4); color: var(--im-fg-muted); }

.im-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--im-rule-2);
  border-radius: 999px;
  place-items: center;
}
.im-burger span {
  display: block;
  width: 15px; height: 1.5px;
  margin: 3px 0;
  background: var(--im-fg);
  transition: transform 0.35s var(--im-ease), opacity 0.25s var(--im-ease);
}
.im-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.im-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.im-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .im-burger { display: grid; }

  /* La nav passe en `position: fixed` ci-dessous : elle quitte le flux
     et son `margin-left: auto` ne pousse donc plus rien. Sans ce relais,
     le logo et les actions se massent à gauche et laissent un tiers de
     la barre vide à droite. */
  .im-header__actions { margin-left: auto; }

  .im-nav {
    position: fixed;
    inset: var(--im-header-h) 0 auto;
    margin: 0;
    padding: 20px var(--im-page-x) 30px;
    border-bottom: 1px solid var(--im-rule);
    background: var(--im-bg);
    box-shadow: var(--im-shadow);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--im-ease), transform 0.3s var(--im-ease);
  }
  .im-nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .im-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .im-nav li + li { border-top: 1px solid var(--im-rule); }
  .im-nav a { padding: 15px 0; font-size: 1.05rem; }
  .im-nav a::after { display: none; }
  .im-brand__sub { display: none; }
}
@media (max-width: 560px) {
  .im-brand__txt { display: none; }
  .im-cartlink { padding: 9px 13px; font-size: 0.78rem; }
  .im-header__inner { gap: 10px; }
}

/* ============================================================
   2. BOUTONS
   Un seul bouton plein par écran. Le second niveau est un lien
   texte souligné, pas un second bouton fantôme.
   ============================================================ */

.im-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 clamp(24px, 3vw, 36px);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--im-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  transition: background 0.3s var(--im-ease), color 0.3s var(--im-ease),
              border-color 0.3s var(--im-ease), transform 0.2s var(--im-spring),
              box-shadow 0.3s var(--im-ease);
}
.im-btn:active { transform: translateY(1px) scale(0.985); }
.im-btn svg { width: 15px; height: 15px; }

.im-btn--primary {
  background: var(--im-fg);
  color: var(--im-bg);
  box-shadow: var(--im-shadow);
}
.im-btn--primary:hover {
  background: var(--im-rose);
  color: var(--im-on-accent);
  box-shadow: 0 20px 38px -20px rgba(217, 139, 136, 0.4);
}

/* Second niveau : contour discret, jamais aussi présent que le plein. */
.im-btn--ghost {
  border-color: var(--im-rule-2);
  background: transparent;
  color: var(--im-fg);
}
.im-btn--ghost:hover { border-color: var(--im-fg); background: var(--im-bg-2); }

.im-btn--block { width: 100%; }
.im-btn--sm { min-height: 42px; font-size: 0.82rem; padding-inline: 18px; }
.im-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Troisième niveau : lien texte. */
.im-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--im-rule-2);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--im-fg);
  transition: color 0.25s var(--im-ease), border-color 0.25s var(--im-ease);
}
.im-arrow svg { width: 16px; height: 8px; transition: transform 0.4s var(--im-spring); }
.im-arrow:hover { color: var(--im-rose-ink); border-color: var(--im-rose-ink); }
.im-arrow:hover svg { transform: translateX(5px); }

/* ============================================================
   3. ÉTIQUETTES
   Fanions carrés au filet de laiton, pas des pilules.
   ============================================================ */

.im-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 9px;
  border-left: 2px solid var(--im-rose-ink);
  border-radius: 0 var(--im-r-xs) var(--im-r-xs) 0;
  background: var(--im-glass-2);
  backdrop-filter: blur(4px);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--im-fg);
  box-shadow: var(--im-shadow-sm);
}
.im-badge--signature { border-left-color: var(--im-brass); color: var(--im-brass); }
.im-badge--brass { border-left-color: var(--im-brass); color: var(--im-brass); }

/* Le prix, et la valeur des mêmes articles pris séparément. Le
   barré fait le travail : aucune formule commerciale à écrire. */
.im-card__prix { display: flex; flex-direction: column; gap: 2px; }
.im-card__valeur {
  font-size: 0.72rem;
  color: var(--im-fg-muted);
  letter-spacing: 0.01em;
}
.im-card__valeur s { text-decoration-thickness: 1px; }

/* ============================================================
   4. PLACEHOLDERS PHOTO
   Papier légèrement creusé plutôt qu'un trou sombre dans la grille.
   ============================================================ */

.im-ph {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: var(--im-r-sm);
  background:
    radial-gradient(120% 90% at 28% 12%, rgba(217, 139, 136, 0.16), transparent 60%),
    radial-gradient(90% 70% at 82% 88%, rgba(208, 174, 114, 0.12), transparent 58%),
    linear-gradient(158deg, var(--im-bg-2) 0%, var(--im-bg-3) 62%, var(--im-bg-4) 100%);
}
.im-ph::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-xs);
  pointer-events: none;
}
.im-ph::after {
  content: attr(data-ph);
  position: relative;
  max-width: 74%;
  padding: 0 10px;
  font-family: var(--im-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-align: center;
  color: var(--im-fg-muted);
}

.im-ph--4x5  { aspect-ratio: 4 / 5; }
.im-ph--3x4  { aspect-ratio: 3 / 4; }
.im-ph--1x1  { aspect-ratio: 1 / 1; }
.im-ph--16x9 { aspect-ratio: 16 / 9; }

/* ============================================================
   5. PHOTOS RÉELLES
   Mêmes ratios que les placeholders : la bascule ne bouge rien.
   ============================================================ */

.im-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--im-r-sm);
  background: var(--im-bg-2);
}
.im-img--4x5  { aspect-ratio: 4 / 5; }
.im-img--3x4  { aspect-ratio: 3 / 4; }
.im-img--1x1  { aspect-ratio: 1 / 1; }
.im-img--16x9 { aspect-ratio: 16 / 9; }

/* ============================================================
   6. HERO
   ------------------------------------------------------------
   Reprise de la composition du composant Tailark : fond clair,
   texte centré, entrée en fondu-flou décalée, et la photo
   présentée dans un cadre plutôt qu'en fond plein écran.
   L'effet framer-motion (opacity + blur + y, ressort) est fait
   en CSS ; le décalage entre éléments vient de --i.
   ============================================================ */

.im-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(48px, 9vh, 104px);
}

/* Rais de lumière tièdes en diagonale, à peine perceptibles.
   L'équivalent des dégradés radiaux du composant, en chaud. */
.im-hero__rays {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
.im-hero__rays span {
  position: absolute;
  left: 0; top: 0;
  display: block;
  transform-origin: top left;
  rotate: -42deg;
}
.im-hero__rays span:nth-child(1) {
  width: 34rem; height: 74rem;
  translate: -6rem -20rem;
  border-radius: 999px;
  background: radial-gradient(68% 68% at 55% 31%, rgba(217, 139, 136, 0.2) 0%, rgba(217, 139, 136, 0.07) 50%, transparent 80%);
}
.im-hero__rays span:nth-child(2) {
  width: 14rem; height: 74rem;
  translate: 2rem -26rem;
  border-radius: 999px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 174, 114, 0.14) 0%, rgba(208, 174, 114, 0.05) 80%, transparent 100%);
}
.im-hero__rays span:nth-child(3) {
  width: 12rem; height: 74rem;
  translate: 12rem -22rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(217, 139, 136, 0.13) 0%, rgba(217, 139, 136, 0.04) 80%, transparent 100%);
}
/* Les rais étaient purement et simplement masqués sous 900 px, sans
   nécessité : `.im-hero` a `overflow: hidden`, ils ne peuvent pas
   déborder. Remis à l'échelle du téléphone, ils gardent la lueur
   derrière le logo — c'est elle qui donne sa profondeur au hero. */
@media (max-width: 900px) {
  .im-hero__rays span { rotate: -34deg; }
  .im-hero__rays span:nth-child(1) { width: 22rem; height: 46rem; translate: -4rem -14rem; }
  .im-hero__rays span:nth-child(2) { width: 9rem;  height: 46rem; translate: 3rem  -17rem; }
  .im-hero__rays span:nth-child(3) { width: 8rem;  height: 46rem; translate: 9rem  -15rem; }
}

.im-hero__inner { text-align: center; }

.im-hero__logo {
  width: clamp(58px, 6vw, 76px);
  height: auto;
  margin: 0 auto clamp(18px, 2.4vw, 26px);
  border-radius: 50%;
  box-shadow: var(--im-shadow-sm);
}

.im-hero h1 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(2.6rem, 6.6vw, 5.1rem);
  line-height: 1.04;
}
.im-hero .im-lead {
  max-width: 50ch;
  margin: clamp(20px, 2.6vw, 30px) auto 0;
}

/* Puce d'accroche avec la double flèche qui glisse au survol :
   le détail qui donne le ton du composant d'origine. */
.im-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(22px, 3vw, 34px);
  padding: 5px 5px 5px 18px;
  border: 1px solid var(--im-rule);
  border-radius: 999px;
  background: var(--im-bg-2);
  box-shadow: var(--im-shadow-sm);
  font-size: 0.9rem;
  color: var(--im-fg);
  transition: background 0.3s var(--im-ease), border-color 0.3s var(--im-ease);
}
.im-pill:hover { background: var(--im-bg); border-color: var(--im-rule-2); }
.im-pill__rule { width: 1px; height: 16px; background: var(--im-rule-2); }
.im-pill__chip {
  overflow: hidden;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--im-bg);
  box-shadow: inset 0 0 0 1px var(--im-rule);
}
.im-pill__chip div {
  display: flex;
  width: 52px;
  translate: -50% 0;
  transition: translate 0.5s var(--im-ease);
}
.im-pill:hover .im-pill__chip div { translate: 0 0; }
.im-pill__chip span { display: grid; place-items: center; width: 26px; height: 26px; }
.im-pill__chip svg { width: 12px; height: 12px; color: var(--im-fg); }

.im-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 40px);
}
/* Le bouton principal est posé dans un cadre matelassé : c'est ce
   double liseré qui fait la différence entre « bouton » et « objet ». */
.im-btn-frame {
  display: inline-block;
  padding: 3px;
  border: 1px solid var(--im-rule);
  border-radius: 999px;
  background: var(--im-bg-2);
}
.im-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--im-fg-soft);
}
.im-btn--quiet:hover { background: var(--im-bg-2); color: var(--im-fg); }

/* Marques de confiance en typographie, pas en faux logos partenaires. */
.im-hero__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px clamp(14px, 2.4vw, 30px);
  max-width: none;
  margin: clamp(30px, 4vw, 46px) auto 0;
  font-size: 0.82rem;
  color: var(--im-fg-muted);
}
.im-hero__marks span { display: inline-flex; align-items: center; gap: 9px; }
.im-hero__marks span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--im-rose);
}

/* La photo devient un objet encadré, avec un fondu vers le papier
   en bas : elle appartient à la page au lieu de la recouvrir. */
.im-hero__frame {
  position: relative;
  margin-top: clamp(34px, 5vw, 72px);
  padding-inline: var(--im-page-x);
}
.im-hero__frame-inner {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(6px, 0.8vw, 12px);
  border: 1px solid var(--im-rule);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: var(--im-bg-2);
  box-shadow: var(--im-shadow-lg), inset 0 1px 0 var(--im-edge);
}
.im-hero__frame-inner picture,
.im-hero__frame-inner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(9px, 1.1vw, 15px);
}
/* Fondu du bas du cadre vers le papier. */
.im-hero__frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--im-bg) 82%);
}

@media (max-width: 760px) {
  .im-hero__frame-inner picture,
  .im-hero__frame-inner img { aspect-ratio: 3 / 4; }
  .im-hero__frame::after { height: 26%; }
}
@media (max-width: 480px) {
  .im-hero__cta { flex-direction: column; align-items: stretch; }
  .im-hero__cta .im-btn-frame, .im-hero__cta .im-btn { width: 100%; }
}

/* ------------------------------------------------------------
   Entrée en fondu-flou décalée
   ------------------------------------------------------------ */

.im-anim {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--im-ease),
    filter 0.9s var(--im-ease),
    transform 1.15s var(--im-spring);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.im-anim.is-in { opacity: 1; filter: blur(0); transform: none; }

@media (prefers-reduced-motion: reduce) {
  .im-anim { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   Mot qui défile
   ------------------------------------------------------------ */

.im-rotator {
  position: relative;
  display: block;
  height: 1.14em;
  overflow: hidden;
}
.im-rotator span {
  position: absolute;
  inset: 0 0 auto;
  white-space: nowrap;
  font-family: var(--im-display);
  font-style: italic;
  font-weight: 500;
  color: var(--im-rose-ink);
  opacity: 0;
  /* La glissade d'origine, restaurée à l'identique à la demande de
     l'utilisateur après plusieurs tentatives de retouche (fondu,
     courbes plus lentes) toutes moins bonnes que ceci. Sa phase vive
     expédie le mot hors du cadre qui le rogne ; sa queue lente se
     joue hors champ. NE PLUS Y TOUCHER. */
  transition: transform 1.05s cubic-bezier(0.33, 1.06, 0.4, 1), opacity 0.62s var(--im-ease);
  will-change: transform, opacity;
}
.im-rotator span[data-pos="next"]     { transform: translateY(115%); }
.im-rotator span[data-pos="previous"] { transform: translateY(-115%); }
.im-rotator span[data-pos="current"]  { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .im-rotator span { transition: opacity 0.3s linear; transform: none !important; }
  .im-rotator span[data-pos="next"],
  .im-rotator span[data-pos="previous"] { opacity: 0; }
}

/* ============================================================
   7. BANDEAU DE RÉASSURANCE
   Grille asymétrique : la première colonne est plus large.
   ============================================================ */

.im-assure {
  /* Flex et non grid, pour la même raison que la synthèse du tableau
     de bord : `auto-fit` ne replie que les COLONNES vides, jamais la
     cellule manquante en bout de ligne. Quatre items sur trois
     colonnes laissaient un trou, qui se lit comme un bloc oublié.
     En flex, la dernière ligne étale simplement ce qu'elle a. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-lg);
  background: var(--im-rule);
  overflow: hidden;
}
.im-assure > div {
  /* 260 et non 210 : à 210, quatre blocs se rangeaient en 3 + 1 sur
     une tablette, et le solitaire s'étirait sur toute la largeur en
     face de trois colonnes étroites. À 260, on passe de 4 à 2 + 2. */
  flex: 1 1 260px;
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.2vw, 26px);
  background: var(--im-bg);
}
.im-assure dt {
  margin-bottom: 6px;
  font-family: var(--im-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--im-fg);
}
.im-assure dd { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--im-fg-muted); }


/* ============================================================
   8. FILTRE DE CATÉGORIES
   ============================================================ */

.im-catnav {
  position: sticky;
  z-index: var(--z-catnav);
  top: var(--im-header-h);
  border-bottom: 1px solid var(--im-rule);
  background: var(--im-glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.im-catnav__inner {
  display: flex;
  gap: 8px;
  max-width: var(--im-maxw);
  margin-inline: auto;
  padding: 11px var(--im-page-x);
  overflow-x: auto;
  scrollbar-width: none;
}
.im-catnav__inner::-webkit-scrollbar { display: none; }
.im-catnav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--im-rule);
  border-radius: 999px;
  font-size: 0.88rem;
  white-space: nowrap;
  color: var(--im-fg-soft);
  transition: border-color 0.3s var(--im-ease), background 0.3s var(--im-ease), color 0.3s var(--im-ease);
}
.im-catnav a svg { width: 16px; height: 16px; color: var(--im-rose-ink); }
.im-catnav a em {
  font-style: normal;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--im-fg-muted);
}
.im-catnav a:hover { border-color: var(--im-rule-2); background: var(--im-bg-2); }
.im-catnav a[aria-current="true"] {
  border-color: transparent;
  background: var(--im-fg);
  color: var(--im-bg);
}
.im-catnav a[aria-current="true"] svg,
.im-catnav a[aria-current="true"] em { color: var(--im-rose); }

/* ============================================================
   9. CARTES CATÉGORIE
   ============================================================ */

.im-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--im-gap);
}
.im-cat {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--im-r-lg);
  isolation: isolate;
  box-shadow: var(--im-shadow);
}
.im-cat .im-ph, .im-cat .im-img {
  border-radius: 0;
  transition: transform 0.9s var(--im-ease);
}
.im-cat:hover .im-ph, .im-cat:hover .im-img { transform: scale(1.05); }
.im-cat::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(20, 15, 15, 0.88));
  pointer-events: none;
}
.im-cat__body { position: absolute; z-index: 2; inset: auto 0 0; padding: clamp(18px, 2.2vw, 26px); }
.im-cat__glyph { display: block; color: var(--im-rose); }
.im-cat__glyph svg { width: 20px; height: 20px; }
.im-cat__name {
  margin: 10px 0 6px;
  font-family: var(--im-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--im-fg);
}
.im-cat__desc { font-size: 0.88rem; line-height: 1.5; color: var(--im-fg-soft); }
.im-cat__count { margin-top: 10px; font-size: 0.8rem; color: var(--im-rose); }

/* ============================================================
   10. GRILLE ET CARTES PRODUIT
   Pas de bordure, pas de fond : l'image porte la carte, l'ombre
   teintée assure l'élévation. Le pack signature occupe deux
   colonnes pour casser la symétrie de la grille.
   ============================================================ */

.im-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(28px, 3.4vw, 52px) var(--im-gap);
  align-items: start;
}

.im-card { position: relative; display: flex; flex-direction: column; }

.im-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--im-r-md);
  isolation: isolate;
  box-shadow: var(--im-shadow);
  transition: transform 0.5s var(--im-ease), box-shadow 0.5s var(--im-ease);
}
.im-card__media .im-ph,
.im-card__media .im-img {
  border-radius: 0;
  transition: transform 0.9s var(--im-ease);
}
.im-card:hover .im-card__media { transform: translateY(-4px); box-shadow: var(--im-shadow-lg); }
.im-card:hover .im-card__media .im-ph,
.im-card:hover .im-card__media .im-img { transform: scale(1.045); }

.im-card__flags {
  position: absolute;
  z-index: 2;
  inset: 12px auto auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.im-card__body { display: flex; flex-direction: column; flex: 1; padding-top: 16px; }
.im-card__kicker {
  margin-bottom: 5px;
  font-family: var(--im-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--im-rose-ink);
}
.im-card__name {
  font-family: var(--im-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.18;
  color: var(--im-fg);
}
.im-card__desc {
  margin: 8px 0 0;
  max-width: 38ch;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--im-fg-muted);
}

/* Le prix et l'action sont alignés au même Y sur toute la rangée. */
.im-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
}
.im-card__price { font-size: 1.32rem; }

.im-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 19px;
  border: 1px solid var(--im-fg);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--im-fg);
  transition: background 0.28s var(--im-ease), color 0.28s var(--im-ease), transform 0.2s var(--im-spring);
}
.im-add:hover { background: var(--im-fg); color: var(--im-bg); }
.im-add:active { transform: scale(0.96); }

/* Détails dépliables dans la carte. */
.im-card__more { margin-top: 14px; }
.im-card__more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--im-rose-ink);
  cursor: pointer;
  list-style: none;
}
.im-card__more summary::-webkit-details-marker { display: none; }
.im-card__more summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--im-ease);
}
.im-card__more[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.im-card__more ul { margin: 12px 0 0; padding: 0; list-style: none; }
.im-card__more li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--im-fg-soft);
}
.im-card__more li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px; height: 4px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--im-rose);
}
.im-card__legal { margin: 10px 0 0; font-size: 0.76rem; line-height: 1.5; color: var(--im-fg-muted); }

/* Le pack signature prend deux colonnes et passe en horizontal :
   la grille cesse d'être quatre boîtes identiques. */
@media (min-width: 900px) {
  .im-card[data-feature="true"] {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 34px);
    align-items: center;
  }
  /* Sans cette contrainte, l'image en 4:5 étirée sur deux colonnes
     ferait 700 px de haut et écraserait le reste de la grille. */
  .im-card[data-feature="true"] .im-card__media { border-radius: var(--im-r-lg); }
  .im-card[data-feature="true"] .im-card__media .im-img,
  .im-card[data-feature="true"] .im-card__media .im-ph { aspect-ratio: 1 / 1; }
  .im-card[data-feature="true"] .im-card__body { padding-top: 0; }
  .im-card[data-feature="true"] .im-card__kicker { font-size: 1.05rem; }
  .im-card[data-feature="true"] .im-card__name { font-size: 1.95rem; }
  .im-card[data-feature="true"] .im-card__desc { font-size: 1.02rem; max-width: 42ch; }
}

/* ============================================================
   11. FICHE PRODUIT
   ============================================================ */

.im-product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 900px) { .im-product { grid-template-columns: 1fr; } }

.im-product__gallery { display: grid; gap: 12px; }
.im-product__gallery > div:first-child {
  border-radius: var(--im-r-lg);
  overflow: hidden;
  box-shadow: var(--im-shadow-lg);
}
.im-product__gallery > div:first-child .im-ph,
.im-product__gallery > div:first-child .im-img { border-radius: 0; }
.im-product__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.im-product__thumbs .im-ph,
.im-product__thumbs .im-img { border-radius: var(--im-r-sm); box-shadow: var(--im-shadow-sm); }
.im-product__thumbs .im-ph::after { font-size: 0.54rem; letter-spacing: 0.06em; }
.im-product__thumbs .im-ph::before { inset: 7px; }

.im-product__panel { position: sticky; top: calc(var(--im-header-h) + 34px); }
@media (max-width: 900px) { .im-product__panel { position: static; } }

.im-product__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: clamp(18px, 2.6vw, 26px) 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.im-product__price small { font-size: 0.86rem; font-weight: 400; color: var(--im-fg-muted); }

.im-includes { margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; list-style: none; }
.im-includes li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--im-rule);
  font-size: 0.96rem;
  color: var(--im-fg-soft);
}
.im-includes li:last-child { border-bottom: 1px solid var(--im-rule); }
.im-includes li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--im-rose);
}

.im-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}
.im-product__actions .im-btn--primary { flex: 1 1 230px; }

.im-note {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 15px 18px;
  border-left: 2px solid var(--im-rose);
  border-radius: 0 var(--im-r-sm) var(--im-r-sm) 0;
  background: var(--im-bg-2);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--im-fg-soft);
}
.im-note > span:first-child { color: var(--im-rose-ink); }

.im-alcool {
  max-width: 96ch;
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-sm);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--im-fg-muted);
}

/* ============================================================
   12. QUANTITÉ
   ============================================================ */

.im-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--im-rule-2);
  border-radius: 999px;
  overflow: hidden;
}
.im-qty button {
  width: 44px; height: 50px;
  font-size: 1.05rem;
  color: var(--im-fg);
  transition: background 0.25s var(--im-ease);
}
.im-qty button:hover { background: var(--im-bg-3); }
.im-qty output {
  min-width: 32px;
  text-align: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--im-fg);
}
.im-qty--sm button { width: 34px; height: 36px; font-size: 0.92rem; }
.im-qty--sm output { min-width: 26px; font-size: 0.9rem; }

/* ============================================================
   13. UPSELL
   ============================================================ */

.im-bump {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--im-r-lg);
  background: var(--im-bg-2);
  box-shadow: var(--im-shadow-sm);
}
.im-bump__media { flex: 0 0 auto; width: clamp(62px, 7vw, 82px); }
.im-bump__media .im-ph { border-radius: var(--im-r-sm); }
.im-bump__media .im-ph::after { font-size: 0.44rem; letter-spacing: 0.04em; }
.im-bump__media .im-ph::before { inset: 5px; }
.im-bump__body { flex: 1; min-width: 0; }
.im-bump__kicker {
  font-family: var(--im-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--im-rose-ink);
}
.im-bump__name {
  margin: 3px 0;
  font-family: var(--im-display);
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--im-fg);
}
.im-bump__desc { font-size: 0.86rem; line-height: 1.45; color: var(--im-fg-muted); }
.im-bump__side { flex: 0 0 auto; text-align: right; }
.im-bump__side .im-price { display: block; margin-bottom: 8px; }

@media (max-width: 560px) {
  .im-bump { flex-wrap: wrap; }
  .im-bump__side { width: 100%; text-align: left; }
  .im-bump__side .im-btn { width: 100%; }
}

/* ============================================================
   14. PANIER ET VALIDATION
   ============================================================ */

.im-cart {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.9fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 940px) { .im-cart { grid-template-columns: 1fr; } }

.im-line {
  display: grid;
  grid-template-columns: clamp(74px, 10vw, 108px) minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  padding: clamp(16px, 2.4vw, 24px) 0;
  border-bottom: 1px solid var(--im-rule);
}
.im-line:first-child { border-top: 1px solid var(--im-rule); }
.im-line .im-ph, .im-line .im-img { border-radius: var(--im-r-sm); }
.im-line .im-ph::after { font-size: 0.42rem; letter-spacing: 0.02em; line-height: 1.5; }
.im-line .im-ph::before { inset: 5px; }
.im-line__name { font-family: var(--im-display); font-size: 1.2rem; font-weight: 500; color: var(--im-fg); }
.im-line__meta { margin-top: 4px; font-size: 0.84rem; color: var(--im-fg-muted); }
.im-line__ctrl { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.im-line__side { text-align: right; }
.im-line__remove {
  font-size: 0.84rem;
  color: var(--im-fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s var(--im-ease);
}
.im-line__remove:hover { color: var(--im-rose-ink); }

@media (max-width: 560px) {
  .im-line { grid-template-columns: 70px minmax(0, 1fr); }
  .im-line__side { grid-column: 2; text-align: left; }
}

.im-summary {
  position: sticky;
  top: calc(var(--im-header-h) + 26px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--im-r-lg);
  background: var(--im-bg-2);
  box-shadow: var(--im-shadow);
}
@media (max-width: 940px) { .im-summary { position: static; } }
.im-summary h2 { margin-bottom: 18px; font-size: 1.55rem; }
.im-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 0.94rem;
  color: var(--im-fg-soft);
}
.im-summary__row + .im-summary__row { border-top: 1px solid var(--im-rule); }
.im-summary__row--total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--im-rule-2);
  font-size: 1.05rem;
  color: var(--im-fg);
}
.im-summary__row--total .im-price { font-size: 1.5rem; }
.im-summary .im-btn { margin-top: 22px; }
.im-summary__legal { margin-top: 16px; font-size: 0.8rem; line-height: 1.6; color: var(--im-fg-muted); }

.im-empty {
  padding: clamp(50px, 8vw, 96px) clamp(20px, 4vw, 44px);
  border-radius: var(--im-r-lg);
  background: var(--im-bg-2);
  text-align: center;
}
.im-empty h2 { margin-bottom: 12px; }
.im-empty .im-btn { margin-top: 24px; }

/* ============================================================
   15. FORMULAIRES
   ============================================================ */

.im-form { display: grid; gap: clamp(18px, 2.2vw, 24px); }
.im-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2.2vw, 24px);
}
.im-field { display: flex; flex-direction: column; gap: 8px; }
.im-field > label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--im-fg-muted);
}
.im-field > label .im-req { color: var(--im-rose-ink); }
.im-field input,
.im-field select,
.im-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--im-rule-2);
  border-radius: var(--im-r-sm);
  background: var(--im-bg);
  color: var(--im-fg);
  font-size: 0.98rem;
  transition: border-color 0.3s var(--im-ease), box-shadow 0.3s var(--im-ease);
}
.im-field textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.im-field input:hover, .im-field select:hover, .im-field textarea:hover { border-color: var(--im-fg-muted); }
.im-field input:focus, .im-field select:focus, .im-field textarea:focus {
  border-color: var(--im-rose-ink);
  box-shadow: 0 0 0 3px var(--im-rose-veil);
  outline: none;
}
.im-field input::placeholder, .im-field textarea::placeholder { color: var(--im-fg-muted); }
.im-field__help { font-size: 0.8rem; line-height: 1.5; color: var(--im-fg-muted); }
.im-field__err { font-size: 0.8rem; color: var(--im-danger); }

/* Confirmation, pas erreur : « le lien vient de partir » ne doit pas
   s'afficher dans le rouge réservé aux refus. */
.im-field__note { font-size: 0.8rem; color: var(--im-fg-soft); }
.im-field[data-invalid="true"] input,
.im-field[data-invalid="true"] select { border-color: var(--im-danger); }

/* ============================================================
   CALENDRIER DE RÉSERVATION
   Deux mois côte à côte, un seul sous 780 px. Le rose marque les
   deux bornes du séjour, un voile plus discret les nuits entre.
   ============================================================ */

.im-cal {
  border: 1px solid var(--im-rule-2);
  border-radius: var(--im-r-md);
  background: var(--im-bg-2);
  padding: clamp(18px, 2.6vw, 30px);
}

.im-cal__note {
  margin-bottom: 18px;
  padding: 11px 15px;
  border-left: 2px solid var(--im-brass);
  background: var(--im-glass);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--im-fg-soft);
}

.im-cal__mois-lot {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3.4vw, 46px);
}

.im-cal__fleche {
  position: absolute;
  top: -4px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--im-rule-2);
  border-radius: 50%;
  background: var(--im-bg);
  color: var(--im-fg-soft);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s var(--im-ease), color 0.3s var(--im-ease);
}
.im-cal__fleche--prec { left: 0; }
.im-cal__fleche--suiv { right: 0; }
.im-cal__fleche:hover:not(:disabled) { border-color: var(--im-rose-ink); color: var(--im-fg); }
.im-cal__fleche:disabled { opacity: 0.3; cursor: default; }

.im-cal__titre {
  margin-bottom: 14px;
  font-family: var(--im-display);
  font-size: 1.12rem;
  text-align: center;
  color: var(--im-fg);
  text-transform: capitalize;
}

.im-cal__grille { width: 100%; border-collapse: collapse; }
.im-cal__grille th {
  padding-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--im-fg-muted);
}
.im-cal__grille th abbr { text-decoration: none; border: 0; }
.im-cal__grille td { padding: 1px; }

.im-cal__jour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  border: 0;
  border-radius: var(--im-r-sm);
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--im-fg-soft);
  cursor: pointer;
  transition: background 0.2s var(--im-ease), color 0.2s var(--im-ease),
              transform 0.15s var(--im-ease);
}

/* Le prix sous le chiffre : c'est ce qu'on vient chercher dans un
   calendrier de réservation. Discret, il ne doit pas voler la date. */
.im-cal__prix {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--im-fg-muted);
}
.im-cal__jour[data-bord] .im-cal__prix { color: inherit; opacity: 0.72; }
.im-cal__jour[data-plage="true"] .im-cal__prix { color: var(--im-fg-soft); }
/* Le survol d'un jour ne doit jamais l'emporter sur un jour choisi.

   Il le faisait pourtant : `.im-cal__jour:hover:not(:disabled)` pèse
   trois pseudo-classes, contre deux pour `[data-plage]` et
   `[data-bord]` qui marquent la sélection. Le survol gagnait donc et
   repeignait la nuit choisie en gris neutre au lieu du rose. Sur un
   téléphone, où `:hover` reste collé après le tap, la date qu'on
   venait de choisir cessait d'avoir l'air choisie. */
@media (hover: hover) {
  .im-cal__jour:hover:not(:disabled):not([data-plage="true"]):not([data-bord]) {
    background: var(--im-glass-2);
    color: var(--im-fg);
  }
}
.im-cal__jour:disabled {
  color: var(--im-fg-muted);
  text-decoration: line-through;
  cursor: default;
  opacity: 0.45;
}
.im-cal__jour[data-plage="true"] { background: var(--im-rose-veil); color: var(--im-fg); }
.im-cal__jour[data-bord] {
  background: var(--im-rose-ink);
  color: var(--im-bg);
  font-weight: 600;
}

.im-cal__aide {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--im-fg-muted);
}

.im-cal__choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--im-rule);
}
.im-cal__dates { font-family: var(--im-display); font-size: 1.15rem; color: var(--im-fg); }
.im-cal__nuits { margin-top: 4px; font-size: 0.85rem; color: var(--im-fg-muted); }

/* Deuxième étape : les coordonnées, une fois les dates arrêtées. */
.im-cal__form { margin-top: 4px; }
.im-cal__recap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--im-rule);
}
.im-cal__changer {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--im-fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.im-cal__changer:hover { color: var(--im-fg); }

.im-cal__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--im-rule);
  font-size: 0.9rem;
  color: var(--im-fg-muted);
}
.im-cal__total .im-price { font-size: 1.3rem; color: var(--im-fg); }

@media (max-width: 780px) {
  .im-cal__mois-lot { grid-template-columns: 1fr; }
  .im-cal__mois-lot .im-cal__mois:last-child { display: none; }
  .im-cal__choix > * { width: 100%; }
  .im-cal__choix .im-btn { justify-content: center; }
}

/* Page de réservation */
.im-resa__photo { margin: clamp(28px, 4vw, 46px) 0; }
.im-resa__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--im-r-md);
  box-shadow: var(--im-shadow);
}
.im-resa__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(30px, 4vw, 48px);
  list-style: none;
}
.im-resa__points li { padding-top: 14px; border-top: 1px solid var(--im-rule); }
.im-resa__points strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--im-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--im-fg);
}
.im-resa__points span { font-size: 0.87rem; color: var(--im-fg-muted); }

/* Case à cocher : même cadre que les champs, le rose marque l'accord. */
.im-field--check > label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--im-rule-2);
  border-radius: var(--im-r-sm);
  background: var(--im-bg);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--im-fg-soft);
  cursor: pointer;
  transition: border-color 0.3s var(--im-ease), background 0.3s var(--im-ease);
}
.im-field--check > label:hover { border-color: var(--im-fg-muted); }
.im-field--check input {
  flex: none;
  width: 19px;
  height: 19px;
  min-height: 0;
  padding: 0;
  accent-color: var(--im-rose-ink);
  cursor: pointer;
}
.im-field--check > label:has(input:checked) {
  border-color: var(--im-rose-ink);
  background: var(--im-rose-veil);
  color: var(--im-fg);
}
.im-field--check[data-invalid="true"] > label { border-color: var(--im-danger); }

/* Échec du départ vers le paiement : à lire avant d'atteindre le bouton. */
.im-pay-error {
  padding: 13px 16px;
  border-left: 2px solid var(--im-danger);
  background: var(--im-glass);
  font-size: 0.88rem;
  line-height: 1.5;
}

.im-form > .im-btn { justify-self: start; }
.im-form > .im-btn[data-busy] { opacity: 0.6; cursor: progress; }
@media (max-width: 560px) { .im-form > .im-btn { justify-self: stretch; width: 100%; } }

/* ============================================================
   16. FIL D'ÉTAPES
   ============================================================ */

.im-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 clamp(28px, 3.6vw, 44px);
  padding: 0;
  font-size: 0.86rem;
  color: var(--im-fg-muted);
}
.im-steps li { display: flex; align-items: center; gap: 16px; list-style: none; }
.im-steps li + li::before { content: ""; width: 22px; height: 1px; background: var(--im-rule-2); }
.im-steps [aria-current="step"] { color: var(--im-rose-ink); font-weight: 500; }
.im-steps [data-done="true"] { color: var(--im-fg); }

/* ============================================================
   18. BARRE DE PANIER
   ============================================================ */

.im-cartbar {
  position: fixed;
  z-index: var(--z-cartbar);
  inset: auto 0 0;
  border-top: 1px solid var(--im-rule);
  background: var(--im-glass-2);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top-color: var(--im-rule-2);
  box-shadow: 0 -22px 44px -30px rgba(0, 0, 0, 0.8);
  transform: translateY(100%);
  transition: transform 0.4s var(--im-spring);
}
.im-cartbar[data-show="true"] { transform: none; }
.im-cartbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
  max-width: var(--im-maxw);
  margin-inline: auto;
  padding: 12px var(--im-page-x) calc(12px + env(safe-area-inset-bottom));
}
.im-cartbar__info { flex: 1; min-width: 0; }
.im-cartbar__label { margin: 0; font-size: 0.84rem; color: var(--im-fg-muted); }
.im-cartbar__total { margin: 2px 0 0; font-size: 1.45rem; }
.im-cartbar__hint { font-size: 0.86rem; color: var(--im-fg-muted); }
.im-cartbar .im-btn { flex: 0 0 auto; }
body[data-has-cartbar="true"] { padding-bottom: calc(var(--im-cartbar-h) + 14px); }

@media (max-width: 560px) {
  .im-cartbar__total { font-size: 1.24rem; }
  .im-cartbar__hint { display: none; }
  .im-cartbar .im-btn { min-height: 46px; padding-inline: 20px; font-size: 0.86rem; }
}

/* ============================================================
   19. NOTIFICATION D'AJOUT
   ============================================================ */

.im-toast {
  position: fixed;
  z-index: var(--z-toast);
  right: clamp(14px, 3vw, 30px);
  bottom: clamp(14px, 3vw, 30px);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(360px, calc(100vw - 28px));
  padding: 14px 18px;
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-md);
  background: var(--im-bg-4);
  color: var(--im-fg);
  box-shadow: var(--im-shadow-lg), inset 0 1px 0 var(--im-edge);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s var(--im-ease), transform 0.35s var(--im-spring);
}
.im-toast[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.im-toast__glyph { color: var(--im-rose); }
.im-toast__txt { font-size: 0.9rem; line-height: 1.4; }
.im-toast__txt small { display: block; font-size: 0.8rem; color: var(--im-fg-muted); }
.im-toast .im-arrow { color: var(--im-rose); border-color: var(--im-rose); font-size: 0.86rem; }

@media (max-width: 760px) { .im-toast { bottom: calc(var(--im-cartbar-h) + 14px); } }

/* ============================================================
   20. TABLEAU DE PRÉPARATION
   ============================================================ */

.im-notif {
  width: 100%;
  overflow: hidden;
  border-radius: var(--im-r-lg);
  background: var(--im-bg);
  box-shadow: var(--im-shadow-lg);
}
.im-notif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px clamp(15px, 2vw, 20px);
  border-bottom: 1px solid var(--im-rule);
  background: var(--im-bg-2);
}
.im-notif__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--im-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--im-fg);
}
.im-notif__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--im-rose-ink);
  color: var(--im-bg);
  font-family: var(--im-sans);
  font-size: 0.74rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.im-notif__actions { display: flex; align-items: center; gap: 16px; }
.im-notif__actions button {
  font-size: 0.82rem;
  color: var(--im-fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s var(--im-ease);
}
.im-notif__actions button:hover { color: var(--im-fg); }
.im-notif__actions button[data-danger]:hover { color: var(--im-danger); }

.im-notif__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(15px, 2vw, 20px);
  border-bottom: 1px solid var(--im-rule);
  background: var(--im-bg-3);
  font-family: var(--im-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--im-fg);
}
.im-notif__group span:last-child {
  font-family: var(--im-sans);
  font-style: normal;
  font-size: 0.78rem;
  color: var(--im-fg-muted);
}

.im-notif__list { margin: 0; padding: 0; list-style: none; }

@keyframes im-notif-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.im-notif__row {
  position: relative;
  display: flex;
  gap: 13px;
  padding: 14px clamp(15px, 2vw, 20px) 14px calc(clamp(15px, 2vw, 20px) + 5px);
  border-bottom: 1px solid var(--im-rule);
  cursor: pointer;
  animation: im-notif-in 260ms ease-out both;
  transition: background 0.25s var(--im-ease);
}
.im-notif__row:hover { background: var(--im-bg-2); }
.im-notif__row:last-child { border-bottom: 0; }
.im-notif__row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; }
.im-notif__row[data-tone="danger"]::before  { background: var(--im-danger); }
.im-notif__row[data-tone="warning"]::before { background: var(--im-brass); }
.im-notif__row[data-tone="info"]::before    { background: var(--im-info); }
.im-notif__row[data-tone="success"]::before { background: var(--im-success); }
.im-notif__row[data-tone="default"]::before { background: var(--im-rose); }
.im-notif__row[data-prepared="true"] { opacity: 0.62; }

.im-notif__glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  margin-top: 2px;
  border-radius: var(--im-r-md);
  background: var(--im-bg-3);
  color: var(--im-rose-ink);
}
.im-notif__glyph svg { width: 18px; height: 18px; }

.im-notif__body { min-width: 0; flex: 1; }
.im-notif__source { margin: 0 0 3px; font-size: 0.78rem; color: var(--im-fg-muted); }

/* Deux origines cohabitent désormais dans le tableau : une nuit
   réservée sur le site, ou des attentions pour un séjour déjà pris
   ailleurs. Elles ne se préparent pas pareil, elles doivent donc se
   distinguer sans avoir à déplier la ligne. */
.im-notif__tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border: 1px solid var(--im-rose-veil);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--im-rose-ink);
  vertical-align: 1px;
}
.im-notif__tag[data-ton="neutre"] { border-color: var(--im-rule-2); color: var(--im-fg-muted); }
.im-notif__tag[data-ton="urgent"] { border-color: var(--im-danger); color: var(--im-danger); }
.im-notif__line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.im-notif__name {
  min-width: 0; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--im-display);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--im-fg);
}
.im-notif__time { flex: 0 0 auto; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--im-fg-muted); }
.im-notif__row[data-tone="danger"] .im-notif__time { color: var(--im-danger); font-weight: 500; }
.im-notif__text { margin: 4px 0 0; max-width: none; font-size: 0.9rem; line-height: 1.5; color: var(--im-fg-soft); }
.im-notif__row:not([data-open="true"]) .im-notif__text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.im-notif__detail { margin-top: 12px; display: grid; gap: 10px; }
.im-notif__row:not([data-open="true"]) .im-notif__detail { display: none; }

.im-notif__items { margin: 0; padding: 0; list-style: none; }
.im-notif__items li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--im-fg-soft);
}
.im-notif__items li + li { border-top: 1px solid var(--im-rule); }

.im-notif__msg {
  padding: 11px 13px;
  border-left: 2px solid var(--im-rose);
  border-radius: 0 var(--im-r-sm) var(--im-r-sm) 0;
  background: var(--im-bg-2);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--im-fg);
}
.im-notif__msg strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--im-display);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--im-rose-ink);
}
.im-notif__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8rem; color: var(--im-fg-muted); }
.im-notif__meta b { font-weight: 500; color: var(--im-fg); }

.im-notif__side {
  display: flex; flex: 0 0 auto; flex-direction: column;
  align-items: center; justify-content: space-between;
  gap: 8px; padding: 2px 0;
}
.im-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--im-rose-ink); }
.im-notif__tick {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--im-rule-2);
  border-radius: var(--im-r-sm);
  color: var(--im-fg-muted);
  transition: border-color 0.25s var(--im-ease), color 0.25s var(--im-ease), background 0.25s var(--im-ease);
}
.im-notif__tick svg { width: 15px; height: 15px; }
.im-notif__tick:hover { border-color: var(--im-fg); color: var(--im-fg); background: var(--im-bg-3); }
.im-notif__row[data-prepared="true"] .im-notif__tick { border-color: var(--im-success); color: var(--im-success); }

.im-notif__empty {
  display: grid; place-items: center; gap: 12px;
  padding: clamp(44px, 7vw, 70px) 24px;
  text-align: center;
  color: var(--im-fg-muted);
}
.im-notif__empty svg { width: 26px; height: 26px; color: var(--im-success); }
.im-notif__empty p { margin: 0; font-size: 0.95rem; }

.im-notif__foot {
  padding: 12px clamp(15px, 2vw, 20px);
  border-top: 1px solid var(--im-rule);
  background: var(--im-bg-2);
  font-size: 0.8rem;
  color: var(--im-fg-muted);
}

@media (max-width: 520px) {
  .im-notif__head { flex-wrap: wrap; }
  .im-notif__name { white-space: normal; }
  .im-notif__line { flex-direction: column; gap: 2px; }
}

/* ============================================================
   21. PIED DE PAGE
   Bloc d'encre en fin de page : une clôture assumée, pleine largeur,
   pas une section sombre isolée au milieu du papier.
   ============================================================ */

.im-footer {
  position: relative;
  z-index: var(--z-base);
  padding: clamp(54px, 7vw, 96px) 0 30px;
  border-top: 1px solid var(--im-rule);
  background: var(--im-bg-deep);
  color: var(--im-fg-soft);
}
.im-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px);
}
@media (max-width: 700px) { .im-footer__grid { grid-template-columns: 1fr; } }

.im-footer__brand img { width: 62px; height: 62px; border-radius: 50%; margin-bottom: 16px; }
.im-footer__brand .im-brand__name { color: var(--im-fg); }
.im-footer__brand .im-brand__sub { color: var(--im-fg-muted); }
.im-footer__tag {
  margin-top: 12px;
  font-family: var(--im-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--im-rose);
}
.im-footer h3 {
  margin-bottom: 14px;
  font-family: var(--im-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--im-rose);
}
.im-footer ul { margin: 0; padding: 0; list-style: none; }
.im-footer li + li { margin-top: 9px; }
.im-footer a { font-size: 0.9rem; transition: color 0.25s var(--im-ease); }
.im-footer a:hover { color: var(--im-fg); }
.im-footer .im-alcool {
  margin-top: clamp(30px, 4vw, 52px);
  border-color: var(--im-rule);
  color: var(--im-fg-muted);
}
.im-footer__legal {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--im-rule);
  font-size: 0.8rem;
  color: var(--im-fg-muted);
}

/* Colonnes de liens du pied, réparties en deux blocs. */
.im-footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(26px, 4vw, 48px);
}

/* Le cœur d'un grand titre : rendu texte à la taille d'un signe de
   ponctuation, pas un émoji noir plein aussi large qu'une lettre. */
h1 [aria-hidden="true"],
h2 [aria-hidden="true"] {
  font-family: var(--im-sans);
  font-size: 0.4em;
  font-variant-emoji: text;
  vertical-align: 0.45em;
  color: var(--im-rose-ink);
}
/* Sur les boutons, le cœur suit la couleur du libellé. */
.im-btn [aria-hidden="true"] { font-variant-emoji: text; font-size: 0.9em; }

/* ============================================================
   22. VITRINE DES PACKS
   ------------------------------------------------------------
   Deux colonnes : une grande photo à gauche (les autres packs
   restent montés juste en-dessous, en fondu, pour une transition
   douce), un panneau de texte à part à droite — jamais de texte
   plaqué sur l'image. Flèches et pastilles pour circuler entre
   les packs.
   ============================================================ */

.im-flow {
  position: relative;
  padding-block: clamp(48px, 6vw, 86px) clamp(40px, 5vw, 70px);
  border-block: 1px solid var(--im-rule);
  background: var(--im-bg-deep);
}

.im-flow__inner {
  max-width: var(--im-maxw);
  margin-inline: auto;
  padding-inline: var(--im-page-x);
}

/* Sur-titre encadré de deux filets de laiton. */
.im-flow__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(28px, 3.6vw, 42px);
  font-family: var(--im-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--im-brass);
}
.im-flow__label::before,
.im-flow__label::after {
  content: "";
  width: clamp(28px, 4vw, 46px);
  height: 1px;
}
.im-flow__label::before { background: linear-gradient(90deg, transparent, var(--im-brass-line)); }
.im-flow__label::after  { background: linear-gradient(90deg, var(--im-brass-line), transparent); }

/* --- Mise en page à deux colonnes --- */

.im-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

@media (max-width: 860px) {
  .im-flow__grid { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 36px); }
}

/* --- Photo --- */

.im-flow__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: clamp(12px, 1.4vw, 18px);
  background: var(--im-bg-2);
  box-shadow: var(--im-shadow-lg);
}
@media (max-width: 860px) {
  .im-flow__media { max-width: 360px; margin-inline: auto; }
}

.im-flow__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(0.92) rotate(var(--tilt, 4deg));
  transition: opacity 0.7s var(--im-ease), transform 0.7s var(--im-ease);
  pointer-events: none;
}
.im-flow__photo[data-pos="active"] {
  z-index: 2;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.im-flow__photo img,
.im-flow__photo .im-ph {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  object-fit: cover;
}
.im-flow__tag {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
}

/* --- Panneau de texte --- */

.im-flow__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1vw, 10px);
  min-height: clamp(300px, 32vw, 400px);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--im-rule);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: var(--im-glass-2);
  box-shadow: var(--im-shadow);
}
@media (max-width: 860px) {
  .im-flow__content { min-height: 0; }
}

.im-flow__panel {
  opacity: 0;
  transform: translateY(14px);
}
.im-flow__panel.im-flow__panel--in {
  animation: im-flow-in 0.55s var(--im-ease) forwards;
}
@keyframes im-flow-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.im-flow__kicker {
  margin: 0;
  font-family: var(--im-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--im-rose-ink);
}
.im-flow__name {
  margin: 6px 0 0;
  font-family: var(--im-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--im-fg);
}
.im-flow__rule {
  display: block;
  width: 40px; height: 2px;
  margin: 16px 0 6px;
  border-radius: 2px;
  background: var(--im-brass);
  box-shadow: 0 0 10px rgba(208, 174, 114, 0.55);
}
.im-flow__desc {
  max-width: 46ch;
  margin: 10px 0 6px;
  font-size: var(--im-fs-body);
  line-height: 1.55;
  color: var(--im-fg-soft);
}
.im-flow__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
}
.im-flow__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--im-brass) 0%, var(--im-brass-deep) 100%);
  color: var(--im-on-accent);
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 18px -6px rgba(208, 174, 114, 0.5);
  transition: transform 0.2s var(--im-spring), box-shadow 0.25s var(--im-ease);
}
.im-flow__cta svg { width: 14px; height: 14px; }
.im-flow__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 26px -6px rgba(208, 174, 114, 0.7); }
.im-flow__cta:active { transform: scale(0.97); }
.im-flow__cta[data-state="added"] { background: var(--im-fg); }
.im-flow__detail {
  font-size: 0.9rem;
  color: var(--im-fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.im-flow__detail:hover { color: var(--im-fg); }

/* --- Pied du panneau : pastilles + flèches --- */

.im-flow__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--im-rule);
}

.im-flow__dots { display: flex; align-items: center; gap: 8px; }
.im-flow__dots button {
  height: 8px; width: 8px;
  border-radius: 999px;
  background: var(--im-rule-2);
  transition: width 0.3s var(--im-ease), background 0.3s var(--im-ease), box-shadow 0.3s var(--im-ease);
}
.im-flow__dots button[aria-current="true"] {
  width: 26px;
  background: var(--im-brass);
  box-shadow: 0 0 12px rgba(208, 174, 114, 0.6);
}

.im-flow__arrows { display: flex; gap: 10px; }
.im-flow__nav {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--im-rule-2);
  border-radius: 50%;
  background: rgba(6, 4, 5, 0.5);
  color: var(--im-fg);
  transition: border-color 0.25s var(--im-ease), background 0.25s var(--im-ease), transform 0.2s var(--im-spring);
}
.im-flow__nav:hover { border-color: var(--im-brass); background: rgba(6, 4, 5, 0.8); transform: translateY(-1px); }
.im-flow__nav svg { width: 18px; height: 18px; }

/* Sans animation : un simple échange, sans échelle ni rotation. */
@media (prefers-reduced-motion: reduce) {
  .im-flow__photo { transition: opacity 0.2s linear; }
  .im-flow__photo[data-pos="active"] { transform: none; }
  .im-flow__panel,
  .im-flow__panel.im-flow__panel--in { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   23. CE QUI EST COMPRIS
   ------------------------------------------------------------
   Portage natif du composant « stack interactor » : le menu
   numéroté à gauche, la photo découpée par un masque à droite.
   L'actif est en plein, les autres en contour. Les formes du
   masque entrent en décalé, respirent, puis se retirent — le tout
   en animation CSS, sans GSAP ni aucune bibliothèque.
   ============================================================ */

.im-atouts {
  /* Le halo décoratif fait 118 % de son parent et le déborde : sur une
     tablette, il poussait la page 20 px au-delà de l'écran et créait
     une barre de défilement horizontale. On le rogne ici. `clip`
     plutôt que `hidden` : pas de conteneur de défilement créé. */
  overflow-x: clip;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  max-width: var(--im-maxw);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 110px) var(--im-page-x);
}
@media (max-width: 900px) {
  .im-atouts { grid-template-columns: 1fr; gap: clamp(32px, 7vw, 48px); }
}

/* --- Le menu --- */

.im-atouts__menu ul {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.4vw, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.im-atouts__menu button {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 24px);
  width: 100%;
  padding: 0;
  text-align: left;
}

.im-atout__num {
  margin-top: 0.5em;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 600;
  color: var(--im-fg-muted);
  transition: color 0.5s var(--im-ease), transform 0.5s var(--im-ease);
}

/* Le nom : plein quand l'atout est actif, en contour sinon. Le
   contour passe par -webkit-text-stroke, seule propriété largement
   suivie ; `color: transparent` évide alors la lettre. */
.im-atout__nom {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--im-rule-2);
  opacity: 0.55;
  transition: color 0.6s var(--im-ease), opacity 0.6s var(--im-ease),
              transform 0.6s var(--im-ease), -webkit-text-stroke-color 0.6s var(--im-ease);
}

.im-atouts__menu button[aria-pressed="true"] .im-atout__num {
  color: var(--im-brass);
  transform: scale(1.1);
}
.im-atouts__menu button[aria-pressed="true"] .im-atout__nom {
  color: var(--im-fg);
  -webkit-text-stroke-color: transparent;
  opacity: 1;
  transform: translateX(10px);
}

/* Au survol d'un inactif, le contour s'éclaire : on sent que c'est
   cliquable avant même d'avoir basculé dessus.

   Deux garde-fous, tous les deux nécessaires :

   `[aria-pressed="false"]` — sans lui, la règle s'appliquait AUSSI à
   l'atout actif et y écrasait son `-webkit-text-stroke-color:
   transparent`. On obtenait des lettres pleines crème portant un
   contour brun de 1,4 px, qui rongeait chaque jambage.

   `@media (hover: hover)` — sur un écran tactile, `:hover` reste
   collé après le tap. Le défaut n'était donc pas fugace sur
   téléphone, il était définitif jusqu'au rechargement. */
@media (hover: hover) {
  .im-atouts__menu button[aria-pressed="false"]:hover .im-atout__nom {
    opacity: 0.85;
    -webkit-text-stroke-color: var(--im-brass-line);
  }
}
.im-atouts__menu button[aria-pressed="false"]:focus-visible .im-atout__nom {
  opacity: 0.85;
  -webkit-text-stroke-color: var(--im-brass-line);
}

.im-atouts__note {
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  font-size: 0.9rem;
  color: var(--im-fg-muted);
}
/* Sur sa propre ligne : accolé à la phrase, le lien se lisait comme
   la fin de celle-ci et ne s'offrait pas au clic. */
.im-atouts__lien {
  display: inline-block;
  margin-top: 8px;
  color: var(--im-rose-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--im-ease);
}
.im-atouts__lien:hover { color: var(--im-fg); }

/* --- La photo découpée --- */

.im-atouts__vue {
  position: relative;
  display: grid;
  place-items: center;
}
.im-atouts__halo {
  position: absolute;
  width: 118%; height: 118%;
  border-radius: 50%;
  background: rgba(208, 174, 114, 0.07);
  filter: blur(110px);
  pointer-events: none;
}
.im-atouts__vue svg {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: auto;
}

/* Chaque forme du masque part de rien, s'ouvre en décalé, respire,
   se referme, puis marque une pause avant de recommencer. Les
   pourcentages découpent un cycle de 6,2 s. */
.im-path {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: im-atout-masque 6.2s infinite;
}
@keyframes im-atout-masque {
  0%              { transform: scale(0);    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  13%             { transform: scale(1);    animation-timing-function: ease-in-out; }
  37%             { transform: scale(1.05); animation-timing-function: ease-in-out; }
  61%             { transform: scale(1);    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  74%, 100%       { transform: scale(0); }
}

/* Le décalage d'entrée, forme par forme. Neuf valeurs couvrent le
   plus grand des trois masques. */
.im-path:nth-child(1) { animation-delay: 0.00s; }
.im-path:nth-child(2) { animation-delay: 0.14s; }
.im-path:nth-child(3) { animation-delay: 0.07s; }
.im-path:nth-child(4) { animation-delay: 0.24s; }
.im-path:nth-child(5) { animation-delay: 0.04s; }
.im-path:nth-child(6) { animation-delay: 0.19s; }
.im-path:nth-child(7) { animation-delay: 0.11s; }
.im-path:nth-child(8) { animation-delay: 0.28s; }
.im-path:nth-child(9) { animation-delay: 0.16s; }

/* Sans animation : le masque reste ouvert, la photo est simplement
   visible. C'est l'état utile, pas un repli dégradé. */
@media (prefers-reduced-motion: reduce) {
  .im-path { transform: scale(1); animation: none; }
  .im-atout__num, .im-atout__nom { transition: none; }
}


/* ============================================================
   Pages légales
   ------------------------------------------------------------
   Du texte long qu'on lit rarement mais qui doit rester lisible :
   colonne étroite, interlignage large, hiérarchie franche. Aucun
   effet décoratif, ce n'est pas une page de vente.
   ============================================================ */
.im-legal { max-width: 72ch; }
.im-legal > * + * { margin-top: 18px; }

.im-legal h2 {
  font-family: var(--im-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.24;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--im-rule);
}
.im-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.im-legal h3 {
  font-family: var(--im-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--im-brass);
  margin-top: 32px;
}

.im-legal p,
.im-legal li,
.im-legal dd { color: var(--im-fg-soft); line-height: 1.72; }

.im-legal ul { padding-left: 1.1em; }
.im-legal li + li { margin-top: 9px; }
.im-legal li::marker { color: var(--im-rose); }

.im-legal dl > div { padding: 12px 0; border-bottom: 1px solid var(--im-rule); }
.im-legal dd { margin-inline-start: 0; }   /* le retrait par défaut du navigateur casse l'alignement de la colonne */
.im-legal dt {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--im-fg-muted);
  margin-bottom: 4px;
}

.im-legal a { color: var(--im-rose-ink); }

/* Sommaire en tête de page : ces documents se consultent en
   diagonale, pour retrouver un point précis. */
.im-legal__toc {
  padding: 20px 24px;
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-lg);
  background: var(--im-bg-2);
}
.im-legal__toc ul { list-style: none; padding-left: 0; }
.im-legal__toc li + li { margin-top: 7px; }

/* Date de dernière mise à jour, discrète mais obligatoire. */
.im-legal__stamp {
  font-size: 0.82rem;
  color: var(--im-fg-muted);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   Trou à combler. Volontairement CRIARD : ces mentions sont
   fausses tant qu'elles ne sont pas remplacées, et une page
   légale fausse est pire que pas de page du tout.
   ------------------------------------------------------------ */
.im-todo {
  display: inline;
  background: rgba(230, 148, 144, 0.16);
  border-bottom: 2px dashed var(--im-danger);
  color: var(--im-danger);
  font-family: var(--im-sans);
  font-size: 0.86em;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Bandeau d'avertissement en haut des pages non finalisées.
   Se retire en supprimant le bloc dans tools/build_pages.py. */
.im-legal__warn {
  padding: 16px 20px;
  margin-bottom: 34px;
  border: 1px solid var(--im-danger);
  border-radius: var(--im-r-lg);
  background: rgba(230, 148, 144, 0.09);
}
.im-legal__warn p { color: var(--im-fg); font-size: 0.92rem; line-height: 1.6; }

/* Un titre de 4,8 rem sur « Conditions générales de vente » sonne
   faux : ces pages se consultent, elles ne se vendent pas. */
.im-head--legal { max-width: 30ch; }
.im-head--legal h1 { font-size: clamp(2rem, 4vw, 2.9rem); }

/* Le meilleur prix du mois. Le vert ne décore pas : il dit à quelqu'un
   dont les dates sont souples qu'un jour de décalage change le prix. */
.im-cal__jour[data-mini="true"] .im-cal__prix {
  color: var(--im-success);
  font-weight: 600;
}
.im-cal__jour[data-mini="true"][data-bord] .im-cal__prix { color: inherit; }

.im-cal__legende {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--im-fg-muted);
}
.im-cal__pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--im-success);
  flex: none;
}

/* ============================================================
   SYNTHÈSE DU TABLEAU DE BORD
   Écran interne. Des chiffres, lisibles d'un coup d'œil sur un
   téléphone, sans décor.
   ============================================================ */

.im-synth {
  border: 1px solid var(--im-rule-2);
  border-radius: var(--im-r-lg);
  background: var(--im-bg-2);
  overflow: hidden;
}
.im-synth__tete {
  padding: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--im-rule);
}
.im-synth__tete h2 {
  font-family: var(--im-display);
  font-size: 1.3rem;
  text-transform: capitalize;
  color: var(--im-fg);
}
.im-synth__tete p { margin: 4px 0 0; font-size: 0.86rem; color: var(--im-fg-muted); }
.im-synth__tete strong { color: var(--im-fg); font-weight: 500; }

.im-synth__grille {
  /* Flex, pas grid, et c'est le point important.

     En grille, cinq chiffres sur trois colonnes laissent forcément
     une case vide en bout de ligne : `auto-fit` ne replie que les
     COLONNES vides, jamais une cellule manquante. Ce trou se lit
     comme un chiffre qui n'a pas chargé.

     En flex, la dernière ligne étale simplement ce qu'elle a. Le
     nombre de chiffres peut changer sans jamais faire de trou. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--im-rule);
}
/* Le fond du conteneur transparaît dans les gouttières d'un pixel :
   ce sont elles qui dessinent les filets, pas des bordures. */
.im-synth__case {
  flex: 1 1 150px;
  padding: clamp(14px, 1.8vw, 18px);
  background: var(--im-bg-2);
}
.im-synth__case[data-alerte="true"] { background: var(--im-glass); }
.im-synth__case[data-alerte="true"] .im-synth__val { color: var(--im-danger); }

.im-synth__val {
  display: block;
  font-family: var(--im-display);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--im-fg);
}
.im-synth__lib {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--im-fg-muted);
}

.im-synth__note {
  padding: clamp(13px, 1.6vw, 16px) clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--im-rule);
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--im-fg-muted);
}
.im-synth__note a { color: var(--im-rose-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   BANDEAU D'ALERTE DU TABLEAU DE BORD
   Portage du composant « Banner ». Repris : bandeau collant en
   haut, hauteur animée, fermeture mémorisée.
   Écarté : la variante arc-en-ciel, ses quatre dégradés fluo et
   son `mix-blend-mode: difference` n'ont rien à voir avec la
   charte, et un tableau de bord n'a pas à clignoter.

   Il ne s'affiche que s'il y a quelque chose à faire. Un bandeau
   permanent devient invisible au bout d'une semaine.
   ============================================================ */

.im-alerte {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px clamp(44px, 6vw, 60px);
  border-bottom: 1px solid var(--im-rule-2);
  background: var(--im-bg-2);
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
  color: var(--im-fg);
  transition: height 0.3s var(--im-ease), opacity 0.3s var(--im-ease);
}
.im-alerte[hidden] { display: none; }

/* Rouge seulement pour ce qui doit être fait aujourd'hui. */
.im-alerte[data-ton="urgent"] {
  border-bottom-color: var(--im-danger);
  background: var(--im-glass);
}
.im-alerte[data-ton="urgent"] strong { color: var(--im-danger); }
.im-alerte strong { font-weight: 600; color: var(--im-fg); }

.im-alerte__fermer {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--im-fg-muted);
  cursor: pointer;
}
.im-alerte__fermer:hover { color: var(--im-fg); background: var(--im-glass-2); }
.im-alerte__fermer svg { width: 15px; height: 15px; }

/* ============================================================
   RETOUR AU TOUCHER
   Sur un écran tactile il n'y a pas de survol : sans état enfoncé,
   taper un élément ne produit rien de visible avant le changement
   d'écran, et la page paraît morte. Les boutons principaux ont déjà
   leur `:active` ; voici les éléments tapables qui n'en avaient pas.
   ============================================================ */

.im-atouts__menu button:active .im-atout__nom { transform: scale(0.97); }
.im-qr__q:active { opacity: 0.7; }
.im-qr__onglet:active { transform: scale(0.96); }
.im-cal__jour:active:not(:disabled) { transform: scale(0.92); }