/* ════════════════════════════════════════════════════════════════════════
   LE POP-UP D'OFFRE — cf. inc/popup.php
   ════════════════════════════════════════════════════════════════════════
   Une carte blanc chaud (jamais #FFF), la photo de l'offre en tête, le titre
   en Manrope. Centrée en PC ; sur téléphone, elle monte du bas de l'écran,
   à portée du pouce. Chargée seulement là où le pop-up s'affiche.

   Mise en page reprise le 15 octobre 2026 de la maquette de Corentin : photo
   plus haute, titre en Manrope serrée et grande, texte à l'encre, croix
   agrandie. La phrase manuscrite sur la photo est retirée le même jour. */

.cp-popup{
  --cp-popup-blanc:#FDF9F4;
  width:min(100% - 32px,520px);max-width:none;max-height:calc(100svh - 32px);
  margin:auto;padding:0;border:0;border-radius:24px;overflow:auto;
  background:var(--cp-popup-blanc);color:var(--ink);
  box-shadow:0 2px 6px rgb(26 4 6 / .12),0 32px 80px rgb(26 4 6 / .35);
  /* L'entrée : un fondu qui remonte de 16px, sur la courbe du site. */
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .4s ease-out,transform .6s var(--ease-out-expo),
             overlay .4s allow-discrete,display .4s allow-discrete}
.cp-popup[open]{opacity:1;transform:none}
@starting-style{.cp-popup[open]{opacity:0;transform:translateY(16px) scale(.985)}}

/* Le voile : brun-noir chaud, comme celui du haut de page. */
.cp-popup::backdrop{background:rgb(26 4 6 / 0);transition:background .4s ease-out,overlay .4s allow-discrete,display .4s allow-discrete}
.cp-popup[open]::backdrop{background:rgb(26 4 6 / .5)}
@starting-style{.cp-popup[open]::backdrop{background:rgb(26 4 6 / 0)}}

.cp-popup__carte{position:relative;outline:none}

/* Le cadre de la maquette (1122 × 778) : la photo du pop-up se recadre à ce
   format, et le haut de l'image reste en place si elle est plus haute. */
.cp-popup__photo{position:relative;margin:0;aspect-ratio:1122 / 778;overflow:hidden;background:var(--linen-deep)}
.cp-popup__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* La croix : un rond crème posé sur la photo, 44px de cible. */
.cp-popup__fermer-form{position:absolute;top:16px;right:16px;margin:0}
.cp-popup__fermer{display:grid;place-items:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgb(249 241 231 / .94);color:var(--vin-900);box-shadow:0 2px 10px rgb(26 4 6 / .15);
  transition:background .2s ease-out,transform .2s ease-out}
.cp-popup__fermer:hover{background:var(--cp-popup-blanc);transform:rotate(90deg)}
.cp-popup__fermer svg{width:20px;height:20px}
.cp-popup__fermer:focus-visible,.cp-popup__non:focus-visible{outline:2px solid var(--vin-700);outline-offset:3px}

.cp-popup__corps{padding:26px 34px 16px;text-align:center}
/* Manrope, choisie par Corentin pour ce titre (15 octobre 2026) : grande,
   serrée, en demi-gras. Hors de la règle « Marcellus pour les titres », à
   dessein. */
.cp-popup__titre{margin:0;font-family:var(--font-body);font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1.08;color:var(--vin-900)}
.cp-popup__texte{margin:14px auto 0;max-width:36ch;font-size:16.5px;line-height:1.48;color:var(--ink)}

.cp-popup__cta{display:flex;align-items:center;justify-content:center;width:100%;height:54px;margin-top:26px;border-radius:8px;
  background:var(--vin-800);border-color:var(--vin-800);font-size:15px;font-weight:600;letter-spacing:.1em;line-height:1}
.cp-popup__corps form{margin:0}
.cp-popup__non{margin-top:8px;min-height:44px;padding:0 12px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:15px;color:color-mix(in oklab,var(--vin-800) 72%,var(--ink-2));text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cp-popup__non:hover{color:var(--vin-900)}

/* ── L'ÉTAPE 2 : LE CHOIX MAT / REFORMER ────────────────────────────────
   Au clic sur le bouton, la photo, le texte et le bouton s'effacent ; le
   titre reste, et les deux cartes de la page Premiers Pas se posent dessous,
   empilées et basses. Leur habillage est celui de la page (squeeze-
   ouverture.css, `.ouv-carte`) : fond photo, voile sombre SOUS le texte,
   pastille crème. Recopié ici en court, parce que cette feuille-là n'est pas
   chargée sur les pages où vit le pop-up. */
.cp-popup.is-choix :is(.cp-popup__photo,#cp-popup-titre,.cp-popup__texte,.cp-popup__cta,.cp-popup__non-form){display:none}
.cp-popup.is-choix .cp-popup__corps{padding-top:66px}
.cp-popup.is-choix .cp-popup__fermer{box-shadow:0 0 0 1px var(--linen-deep),0 2px 10px rgb(26 4 6 / .08)}

.cp-popup__choix{display:grid;gap:12px;animation:cp-choix-entree .5s var(--ease-out-expo) both}
.cp-popup__choix[hidden]{display:none}
.cp-popup__choix > .cp-popup__titre{margin-bottom:6px;font-size:30px}
@keyframes cp-choix-entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.cp-choix{position:relative;isolation:isolate;display:grid;overflow:hidden;border-radius:18px;background:var(--vin-700);color:var(--davos);
  box-shadow:0 2px 6px rgb(26 4 6 / .14),0 14px 30px rgb(26 4 6 / .16),inset 0 0 30px rgb(10 2 3 / .22)}
.cp-choix--sombre{background:var(--vin-500)}
.cp-choix__fond{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cp-choix__fond img{display:block;width:100%;height:100%;object-fit:cover}
/* Le voile de la page : assombrit là où est le texte, laisse les bords vifs. */
.cp-choix__fond::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 74% 92% at 50% 48%,rgb(0 0 0 / .44) 0%,rgb(0 0 0 / .36) 44%,rgb(0 0 0 / .2) 72%,rgb(0 0 0 / .06) 90%,transparent 100%)}
.cp-choix__texte{display:grid;justify-items:center;padding:16px 14px 18px;text-align:center;
  text-shadow:0 1px 3px rgb(0 0 0 / .38),0 2px 18px rgb(0 0 0 / .30)}
/* Petits et fins sur une photo : encre PLEINE et halo serré. Sur la page,
   la même mention à 84 % tombe à 4,04:1 sur le sable du Reformer (mesuré par
   tests/contraste.mjs, défaut antérieur au pop-up) : on ne le recopie pas. */
.cp-choix__bandeau,.cp-choix__mention{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--davos);text-shadow:0 0 3px rgb(0 0 0 / .7),0 0 10px rgb(0 0 0 / .45)}
.cp-choix__pratique{margin:4px 0 0;font-family:var(--font-display);font-size:24px;font-style:italic;font-weight:400;line-height:1.1;
  text-shadow:0 0 4px rgb(0 0 0 / .45),0 0 10px rgb(0 0 0 / .35)}
.cp-choix__filet{position:relative;display:block;width:84px;height:1px;margin:10px 0 0;background:color-mix(in oklab,var(--davos) 38%,transparent)}
.cp-choix__filet::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%) rotate(45deg);
  background:color-mix(in oklab,var(--davos) 72%,transparent)}
/* Le prix et « par personne » sur UNE ligne : c'est ce qui rend la carte basse. */
.cp-choix__prix{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:10px 0 0}
.cp-choix__nombre{font-family:var(--font-display);font-size:32px;line-height:1}
.cp-choix__devise{font-size:.5em;vertical-align:.58em;margin-left:.06em}
/* Le prix barré (15 octobre 2026) : l'ancien prix plus petit, à gauche, rayé
   d'un trait de crayon lie-de-vin clair, effilé aux deux bouts et un peu
   montant (une forme SVG en masque, teintée par `background`). Un trait
   granuleux a été essayé : il faisait corde tricotée. Un trait lie-de-vin
   foncé ne se voit pas sur le fond sombre des cartes. La mention passe sous
   le prix. */
.cp-choix__prix--barre{align-items:center;gap:14px}
.cp-choix__barre{position:relative;font-family:var(--font-display);font-size:21px;line-height:1;text-decoration:none;
  color:color-mix(in oklab,var(--davos) 80%,transparent)}
.cp-choix__barre::after{content:"";position:absolute;inset:0 -14%;background:var(--wp--preset--color--vin-300);
  filter:drop-shadow(0 0 1.5px rgb(0 0 0 / .35));
  --cp-trait:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M2 14 C 30 11.8, 62 8.6, 98 5.4 C 99.2 5.3, 99.4 6.5, 98.4 6.8 C 62 10.6, 30 14.6, 2.4 15.6 C 1.2 15.6, 0.9 14.2, 2 14 Z'/></svg>");
  -webkit-mask:var(--cp-trait) center / 100% 100% no-repeat;mask:var(--cp-trait) center / 100% 100% no-repeat}
.cp-choix__prix--barre .cp-choix__nombre{font-size:36px}
.cp-choix__mention--dessous{margin-top:6px}
.cp-choix__cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:12px;padding:0 22px;border-radius:999px;
  background:var(--linen-deep);color:var(--vin-700);text-decoration:none;text-shadow:none;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .18s var(--ease-out-expo)}
/* TOUTE LA CARTE EST CLIQUABLE (demandé par Corentin) : le lien du bouton
   s'étend sur la carte par un pseudo-élément. Un seul lien, donc un seul
   arrêt clavier et une seule annonce au lecteur d'écran. Pour que ce voile
   couvre la carte, rien entre elle et lui n'est positionné ni transformé :
   la photo passe derrière par `z-index:-1` dans une carte isolée.
   ⚠ SANS ARRONDI : hérité du bouton (une pilule à 999px), il faisait du
   voile une pilule géante, et les clics dans les coins tombaient à côté.
   La carte rogne déjà ses coins. */
.cp-choix__cta:not(.cp-choix__cta--inerte)::after{content:"";position:absolute;inset:0;z-index:1}
.cp-choix:has(a.cp-choix__cta:hover) .cp-choix__cta,.cp-choix__cta:focus-visible{background:var(--cream)}
.cp-choix:has(a.cp-choix__cta:hover){box-shadow:0 2px 6px rgb(26 4 6 / .16),0 18px 36px rgb(26 4 6 / .22),inset 0 0 30px rgb(10 2 3 / .22)}
.cp-choix:has(a.cp-choix__cta:focus-visible){outline:2px solid var(--vin-700);outline-offset:3px}
.cp-choix__cta span{font-size:1.15em;line-height:1;transition:transform .32s var(--ease-out-expo)}
.cp-choix:has(a.cp-choix__cta:hover) .cp-choix__cta span{transform:translateX(3px)}
/* Complet ou pas encore payable : lisible, opaque, et sans geste promis. */
.cp-choix__cta--inerte{cursor:default}
.cp-choix__cta--inerte:hover{background:var(--linen-deep)}

.cp-popup__retour{justify-self:center;min-height:44px;margin-top:2px;padding:0 12px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;color:var(--ink-2)}
.cp-popup__retour:hover{color:var(--ink)}
.cp-popup__retour:focus-visible{outline:2px solid var(--vin-700);outline-offset:3px}

/* ── TÉLÉPHONE : une feuille qui monte du bas ──────────────────────────── */
@media (max-width:599px){
  .cp-popup{width:100%;max-height:calc(100svh - 24px);margin:auto 0 0;border-radius:22px 22px 0 0;
    transform:translateY(100%)}
  .cp-popup[open]{transform:none}
  @starting-style{.cp-popup[open]{transform:translateY(100%)}}
  .cp-popup__corps{padding:22px 22px calc(12px + env(safe-area-inset-bottom))}
  .cp-popup__titre{font-size:31px}
  .cp-popup__texte{font-size:16px}
  .cp-popup__cta{margin-top:22px}
  .cp-popup__choix > .cp-popup__titre{font-size:26px}
}

@media (prefers-reduced-motion: reduce){
  .cp-popup__choix{animation:none}
  .cp-choix__cta,.cp-choix__cta span{transition:none}
  .cp-popup,.cp-popup[open]{transform:none;transition:opacity .2s linear,overlay .2s allow-discrete,display .2s allow-discrete}
  @starting-style{.cp-popup[open]{transform:none}}
  .cp-popup__fermer:hover{transform:none}
}