/* ============================================================================
   Les offres (`offers`) — la feuille du module, à côté de `offers.js`.
   Ce que seul ce module emploie ; ce qui sert à plusieurs pages reste dans
   `site.css`. Chargée par le site public après `site.css`, dans l'ordre des
   modules (`tests/admin/shell.spec.js`) : découpée de `site.css` au lot 6 sans
   changer l'ordre de la cascade, éprouvée contre l'ancienne feuille unique
   (`tools/comparer-styles.mjs`).
   ============================================================================ */
.tarif-note{font-size:12px;color:var(--encre-60);margin-top:20px;max-width:640px}
.exp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.exp-px{font-family:var(--font-serif);font-size:24px;color:var(--terracotta)}
.sticky-blk{position:sticky;top:calc(96px + var(--h-mode-test))}
/* Une fenêtre ouverte depuis une fiche (`.page`, couche 72) passe au-dessus
   d'elle : une `.ov` ordinaire (70) s'ouvrait DESSOUS, invisible et sans clic. */
.ov-sur-page{z-index:var(--z-ov-page)}
/* Mon rayonnement — le code d'ambassadrice se lit et se recopie : il mérite
   d'être gros et espacé, pas noyé dans une phrase. */
/* ---------- Fiche d'expérience (§13) ---------- */
/* L'accroche se pose sous le titre, discrète et espacée : c'est une signature,
   pas un sous-titre — elle ne doit pas concurrencer le nom. */
.exp-accroche{font-family:var(--font-serif);font-size:17px;letter-spacing:.06em;
  color:var(--terracotta-2);margin:6px 0 0}
/* La nuance est une mise au point, pas un argument : plus petite, en retrait. */
.exp-nuance{font-size:12.5px;color:var(--encre-60);border-left:2px solid var(--creme-2);
  padding-left:12px;margin-top:14px}
/* La mention « sans enfant » : une promesse, donc lisible, pas un avertissement. */
.exp-mention{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--terracotta-2);margin:10px 0 0}
/* La phrase signature respire seule entre deux blocs : c'est son rôle. */
.exp-signature{font-family:var(--font-serif);font-size:20px;line-height:1.5;text-align:center;
  color:var(--terracotta-2);margin:22px 0;padding:0 12px}
/* L'heure d'une étape, au-dessus de son titre. */
.exp-h{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--terracotta-2)}
.exp-rituels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.exp-rituels li b{display:block;font-size:13.5px}
.exp-rituels li span{display:block;font-size:12.5px;color:var(--encre-60)}
/* Les thématiques sont des étiquettes : on les parcourt du regard, on ne les lit pas. */
.exp-themes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.exp-themes li{font-size:12px;padding:6px 12px;border-radius:99px;background:var(--creme);
  color:var(--terracotta-2)}
/* Le bloc de fin : le seul de la page à être centré, pour qu'il se détache. */
.exp-final{text-align:center;background:var(--creme)}
.exp-final h3{font-size:22px;letter-spacing:.04em}
.exp-final p{margin:8px 0 16px}

.exp-theme{font-family:var(--font-serif);font-size:18px;letter-spacing:.05em;
  text-transform:uppercase;margin:0 0 6px}
/* Sept étapes numérotées : le rang est une information — c'est un déroulé. */
.exp-etapes{list-style:none;counter-reset:etape;margin:0;padding:0;
  display:flex;flex-direction:column;gap:12px}
/* ⚠️ La règle générique `.blk li::before` (l'étoile) est en `position:absolute` :
   le numéro n'occupait plus sa colonne, et le titre y tombait — 26 px —, sous
   le texte. Ici il redevient un élément de la grille. */
.exp-etapes li{counter-increment:etape;display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:10px;align-items:baseline;padding-left:0}
.exp-etapes li::before{content:counter(etape);position:static;font-family:var(--font-serif);font-size:15px;
  color:var(--terracotta-2);text-align:center}
.exp-etape{min-width:0;overflow-wrap:anywhere}
.exp-etape b{display:block;font-size:13.5px}
.exp-etape span{display:block;font-size:12.5px;color:var(--encre-60)}
.exp-inclus,.exp-engagements{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.exp-inclus li,.exp-engagements li{font-size:13px}
/* Les engagements se lisent comme un cadre : fond crème, sans puces. */
.exp-engagements{list-style:none;padding:14px 16px;background:var(--creme);border-radius:13px;gap:7px}
/* La prochaine édition. La date d'abord — c'est ce qu'on cherche —, puis son
   thème et sa photographie. ⚠️ `aspect-ratio` sur l'image et `overflow:hidden`
   sur la figure : un `border-radius` ne rogne pas un enfant, le défaut a déjà
   été commis sur la fiche d'intervenante et sur le médaillon du Cercle. */
.exp-edition-date{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-60);margin:0 0 6px}
/* Le bandeau d'une fiche d'expérience : mêmes proportions sur toutes les
   fiches, plus haut sur téléphone où la largeur manque. La photo se cadre au
   centre — une scène, pas un portrait. */
.exp-bandeau{
  margin:28px 0 0;aspect-ratio:16/7;border-radius:24px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.exp-bandeau img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.exp-bandeau svg{width:88px;height:88px}
@media(max-width:680px){
  .exp-bandeau{aspect-ratio:3/2;border-radius:18px;margin-top:18px}
  .exp-bandeau svg{width:60px;height:60px}
}
.exp-edition-photo{margin:12px 0 0;border-radius:13px;overflow:hidden}
.exp-edition-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.exp-univers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.exp-univers figure{margin:0}
.exp-univers figcaption{font-size:11.5px;color:var(--encre-60);margin-top:6px;text-align:center}
@media(max-width:600px){
  /* ⚠️ Trois vignettes à 390 px font 110 px de large : on empile plutôt que de
     rendre les photographies illisibles. */
  .exp-univers{grid-template-columns:1fr}
}

/* Le formulaire de la carte cadeau, dans l'ordre où il se remplit (recette du
   1er novembre 2026) : montant, pour qui, destinataire et date, récapitulatif,
   bouton. Chaque étape porte son libellé ; le récapitulatif et le bouton se
   détachent par un filet, comme un total. */
.gift-form{display:grid;gap:20px;min-width:0}
.gift-etape{min-width:0}
.gift-libelle{
  display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--terracotta-2);margin-bottom:9px;
}
/* Les montants proposés et le montant libre sur une ligne quand la place le
   permet ; le champ passe dessous, en pleine largeur, sur téléphone. */
.gift-montants{display:flex;flex-wrap:wrap;gap:8px}
.gift-chips{display:contents}
.gift-montants input{
  flex:1 1 170px;min-width:0;border:1.5px solid rgba(34,34,33,.18);border-radius:999px;
  padding:8px 18px;font-family:inherit;font-size:13px;background:var(--blanc);
}
.gift-montants input:focus{outline:none;border-color:var(--terracotta)}
.gift-seg{width:100%;background:rgba(253,250,245,.7);padding:4px}
/* !important : la règle générique .seg button impose une couleur trop pâle */
.gift-seg button{
  flex:1;color:var(--terracotta-2) !important;font-weight:600;opacity:1 !important;
  border-radius:999px;transition:.2s;
}
.gift-bloc{display:grid;gap:8px;margin-top:10px}
.gift-bloc[hidden]{display:none}
.gift-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.gift-dest input,.gift-dest textarea{
  width:100%;box-sizing:border-box;border:1.5px solid rgba(34,34,33,.18);border-radius:14px;
  padding:11px 14px;font-family:inherit;font-size:13px;background:var(--blanc);resize:vertical;
}
.gift-dest input:focus,.gift-dest textarea:focus{outline:none;border-color:var(--terracotta)}
.gift-form [aria-invalid="true"]{border-color:var(--brique)}
.gift-quand{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:4px}
.gift-quand .gift-libelle{margin:0}
.gift-quand-mot{font-size:12.5px;color:var(--encre-60)}
.gift-err{font-size:12px;line-height:1.4;color:var(--brique);margin:6px 2px 0}
.gift-err:empty{display:none}
.gift-fin{display:grid;gap:10px;padding-top:18px;border-top:1px dashed rgba(122,74,45,.28)}
.gift-recap{font-family:var(--font-serif);font-size:19px;line-height:1.3;color:var(--encre)}
.gift-recap[hidden]{display:none}
.gift-offrir{width:100%}
.gift-aide{font-size:12px;line-height:1.4;color:var(--encre-60);text-align:center}
.gift-aide:empty{display:none}
@media(max-width:560px){
  .gift-duo{grid-template-columns:minmax(0,1fr)}
  /* Le libellé au-dessus : le champ et « Aujourd'hui » tiennent alors sur une ligne. */
  .gift-quand .gift-libelle{flex-basis:100%}
}
/* Sous 16 px, Safari iOS zoome sur le champ touché (voir core/css/final.css). */
@media (pointer: coarse){
  .gift-montants input,.gift-dest input,.gift-dest textarea{font-size:16px}
}

.exp-date{font-size:12.5px;color:var(--terracotta-2);font-weight:600;margin-top:8px}
.exp-cartes{font-size:11px;color:var(--encre-60);margin-top:6px;padding-top:6px;border-top:1px dashed rgba(196,122,83,.22)}
.exp-dispo{font-size:11.5px;color:var(--encre-60);margin-top:6px}
.tarif-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--terracotta);color:var(--blanc);white-space:nowrap;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-radius:999px;padding:5px 13px;box-shadow:0 6px 14px -8px rgba(122,74,45,.7);
}
.tarif-unite{
  display:block;font-size:11.5px;color:var(--terracotta-2);font-weight:600;margin-top:4px;
}
/* « Nos offres & formules » en trois parties (REFERENCE-2026-10.md §7). La
   grille des passeports en porte deux par partie : elle se centre sur ce
   qu'elle porte plutôt que de laisser une troisième colonne vide. */
.offre-partie{margin-top:52px}
.offre-partie > h3{margin-bottom:6px}
.offre-sous{font-size:13px;color:var(--encre-60);max-width:640px}
.tarif-cond{
  list-style:none;flex:1;display:grid;align-content:start;gap:6px;
  margin:0 0 14px;padding:12px 0 0;border-top:2px dashed var(--sable-profond);
  font-size:11.5px;line-height:1.45;color:var(--encre-60);text-align:left;
}
.tarif-cond li{position:relative;padding-left:14px}
.tarif-cond li::before{content:"✦";position:absolute;left:0;top:1px;font-size:8px;color:var(--terracotta)}
.pass-sous{margin-top:14px}
.tarif-tete,.tarif-prix,.tarif-action{display:flex;flex-direction:column;align-items:center;gap:5px}
.tarif-prix{justify-content:flex-start}
.tarif-action{justify-content:flex-end}
.tarif-action-pleine{align-items:stretch}   /* les cours : bouton pleine largeur, comme avant */
.pass-economie{
  display:block;font-size:11.5px;font-weight:600;color:var(--terracotta-2);margin-top:2px;
}
/* Cinq emplacements par carte — titre, prix, description, conditions, bouton —,
   alignés d'une carte à l'autre par `subgrid` dans une rangée, et sur toute la
   page par les hauteurs que pose `egaliserCartes()` (offers.js). La description
   descend contre le filet ; le prix reste en haut. Empilées sous 681 px, les
   cartes gardent leur colonne. */
@media(min-width:681px){
  .tarif-grid > .tarif{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:5px}
  .tarif-grid > .tarif > .det{display:flex;align-items:flex-end;justify-content:center}
  .tarif-tete{min-height:var(--tarif-h1,0)}
  .tarif-prix{min-height:var(--tarif-h2,0)}
  .tarif-grid > .tarif > .det{min-height:var(--tarif-h3,0)}
  .tarif-grid > .tarif > :nth-child(4){min-height:var(--tarif-h4,0)}
  .tarif-action{min-height:var(--tarif-h5,0)}
}
.gift-txt h3{font-size:29px;line-height:1.2;margin-bottom:10px}
.gift-txt p{font-size:14px;color:rgba(34,34,33,.72)}
.gift-code{
  background:var(--blanc);border:1.5px dashed var(--terracotta);border-radius:14px;
  padding:14px;text-align:center;margin-top:12px;
}
.gift-code b{font-family:var(--font-serif);font-size:23px;letter-spacing:.13em;color:var(--terracotta)}
.gift-code small{display:block;font-size:11px;color:var(--encre-60);margin-top:4px}
.coffrets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}

/* ---------- Cartes cadeaux : comment ça marche ----------
   Quatre cartes indépendantes, puis une conclusion qui ferme la section
   (Delphine, 6 octobre 2026). Elles remplacent une frise animée qui laissait
   croire à un cinquième temps après le 4.
   ⚠️ `minmax(0,1fr)` : une colonne en `1fr` refuse de descendre sous son
   contenu, et un mot long élargirait sa carte au détriment des trois autres. */
.cc-etapes{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
}
/* Chaque carte se retourne (recette du 1er novembre 2026) : le verso — le seul
   numéro — d'abord, puis le recto, la carte telle qu'elle était, une à une quand
   la section paraît (`offers.js`). Le recto est la carte ; le verso se pose
   dessus, à la même taille. Sans le script (`.cc-arme` absent), rien ne tourne :
   le recto se voit. On n'anime que `transform`. */
.cc-et{
  position:relative;display:grid;transform-style:preserve-3d;
}
.cc-recto{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:22px;
  padding:30px 22px 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.cc-verso{
  position:absolute;inset:0;border-radius:22px;background:var(--creme);
  border:1px solid rgba(196,122,83,.45);
  display:flex;align-items:center;justify-content:center;
  transform:rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.cc-verso::before{
  content:"";position:absolute;inset:12px;border-radius:14px;
  border:1px dashed rgba(196,122,83,.4);
}
.cc-verso b{font-family:var(--font-serif);font-weight:400;font-size:92px;line-height:1;color:var(--terracotta)}
/* Armer ne s'anime pas (la carte passe sur son verso sans tourner) : seul le
   passage au recto (`.cc-vu`) porte la transition. */
.cc-arme .cc-et{transform:perspective(1100px) rotateY(180deg);transition:none}
.cc-arme .cc-et.cc-vu{transform:perspective(1100px) rotateY(0deg);
  transition:transform .6s cubic-bezier(.33,0,.2,1) var(--cc-delai,0s)}
@media (prefers-reduced-motion: reduce){
  .cc-arme .cc-et,.cc-arme .cc-et.cc-vu{transform:none;transition:none}
}
.cc-pict{
  width:78px;height:78px;border-radius:50%;flex:none;
  border:1px solid rgba(196,122,83,.35);color:var(--terracotta);
  display:flex;align-items:center;justify-content:center;
}
.cc-pict svg{width:36px;height:36px}
/* le numéro, encadré de deux filets terminés par une étoile : un ornement
   propre à la carte — rien ne le relie à la suivante */
.cc-num{display:flex;align-items:center;gap:8px;margin:18px 0 12px}
.cc-num::before,.cc-num::after{content:"";width:44px;height:1px;background:rgba(196,122,83,.45)}
.cc-num b{
  width:34px;height:34px;border-radius:50%;background:var(--terracotta);color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:19px;font-weight:600;
}
.cc-et h4{
  font-family:var(--font-serif);font-weight:400;font-size:25px;line-height:1.15;
  color:var(--terracotta);margin:0 0 8px;text-wrap:balance;
}
.cc-et p{font-size:14px;line-height:1.55;color:var(--encre-60);margin:0;text-wrap:pretty}

.cc-fin{
  margin-top:22px;border-radius:22px;border:1px solid rgba(196,122,83,.28);
  background:linear-gradient(135deg,var(--accent-soft),var(--creme) 55%,var(--accent-soft));
  padding:30px 24px 32px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.cc-fleur{width:34px;height:34px}
.cc-fin-titre{
  font-family:var(--font-serif);font-size:32px;line-height:1.15;color:var(--encre);
  margin:0;text-wrap:balance;
}
.cc-scintille{width:.62em;height:.62em;color:var(--terracotta);vertical-align:.32em;margin-left:2px}
.cc-fin-txt{font-size:15px;color:var(--encre-60);margin:0 0 10px}
@media(max-width:1000px){
  .cc-etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .cc-etapes{grid-template-columns:minmax(0,1fr);gap:14px}
  .cc-fin-titre{font-size:27px}
}
@media(max-width:1000px){
  .coffrets-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .gift-txt h3{font-size:25px}
}
@media(max-width:1000px){
  .sticky-blk{position:static}
}

/* La règle qui coûte de l'argent, sur la carte et plus seulement sur la fiche.
   Discrète — elle informe, elle ne crie pas. */
.exp-hp{margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--encre-60)}

/* Mention de l'offre de lancement, sous le prix. Discrète : elle informe,
   elle ne crie pas — un bandeau promotionnel jurerait avec la charte. */
.tarif-lancement{
  display:block;
  margin-top:6px;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--terracotta);
  font-weight:500;
}