/* ══════════════════════════════════════════════════════════════════════
   Proposition : la page 7 en visuel (page ajoutée en fin, .p07b).

   Mêmes textes que la page 7, mot pour mot. C'est la vitrine de l'offre,
   traitée comme un catalogue haut de gamme :
     chaque offre      une photo plein cadre, son nom et sa description
                       posés en bas sur un voile marine ;
     son prix          une étiquette blanche qui pend du haut de la photo :
                       le prix membre en grand, en rose, le prix public
                       en petit, barré d'un trait rose ;
     partout en France une carte où chaque lieu nommé sur la page reçoit
                       son épingle (survoler une offre fait sauter la
                       sienne).
   La légende des catégories devient une rangée de pastilles.

   Le mouvement suit la grammaire de la présentation (css/anim.css) : les
   photos s'ouvrent dans l'ordre de lecture, le texte monte, l'étiquette
   tombe et se balance, l'épingle se plante. Les états de départ ne vivent
   que dans les animations : sans script, à l'impression ou avec
   « réduire les animations », tout est simplement posé.
   ══════════════════════════════════════════════════════════════════════ */

.p07b{ background:#f8f8f8; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p07b .p07b-tache{ background-size:contain; pointer-events:none; }
.p07b .p07b-tache--a{ opacity:.55; }
/* Elle reste au-dessus de la bande du pied de page. */
.p07b .p07b-tache--b{ opacity:.5; transform:rotate(-60deg); }

/* ─────────────────────────────── La carte ───────────────────────────── */
.p07b-france{
  position:absolute; left:666px; top:34px; width:148px; height:144px;
}
.p07b-france svg{ width:100%; height:100%; overflow:visible; display:block; }
.p07b-france svg *{ transform-box:fill-box; }
.p07b-pays{
  fill:#fff; stroke:#243282; stroke-width:1.6; stroke-linejoin:round;
  filter:drop-shadow(0 6px 10px rgba(36,50,130,.16));
}
.p07b-pin-goutte{ fill:#d20074; stroke:#fff; stroke-width:1.4; transform-origin:50% 100%; transition:scale .35s var(--anim-ressort); }
.p07b-pin-oeil{ fill:#fff; pointer-events:none; }
.p07b-pin-ombre{ fill:rgba(36,50,130,.28); }
.p07b-pin-onde{ fill:none; stroke:#d20074; stroke-width:1.4; opacity:0; transform-origin:center; }
/* Survoler une offre fait sauter son épingle. */
.p07b-pin-corps{ transition:opacity .3s; }
.p07b:has(.p07b-offre[data-lieu]:hover) .p07b-pin-corps{ opacity:.3; }

/* ────────────────────────────── La légende ──────────────────────────── */
.p07b-cats{
  position:absolute; right:84px; top:67px;
  display:flex; gap:8px;
}
.p07b-cat{
  display:flex; align-items:center; gap:7px;
  padding:5px 13px 5px 6px; border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
  font-family:'Montserrat', sans-serif; font-size:13px; font-weight:600; color:#2b3344;
  white-space:nowrap;
}
.p07b .p07b-cat-ico{ position:relative; flex:none; background-size:contain; }

/* ─────────────────────────────── Les offres ─────────────────────────── */
.p07b-offre{
  position:absolute; width:300px; height:264px; border-radius:24px;
  transition:translate .45s cubic-bezier(.16,1,.3,1);
}
.p07b-offre:hover{ translate:0 -4px; }

.p07b .p07b-photo{
  border-radius:24px; overflow:hidden;
  background-size:100% auto; background-position:var(--pos, 50% 50%);
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
  transition:background-size .8s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
/* Le survol soulève la carte (niveau 3) ; la rangée du bas garde le
   niveau 2, pour que son ombre ne descende pas sur le pied de page. */
.p07b-offre:not(.p07b-offre--bas):hover .p07b-photo{
  box-shadow:0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30);
}
.p07b-offre:hover .p07b-photo{ background-size:108% auto; }
/* Le voile marine qui porte le texte, et un léger assombrissement en
   haut à droite, sous l'étiquette. */
.p07b .p07b-photo::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(to top, rgba(17,22,62,.94) 0%, rgba(17,22,62,.78) 24%, rgba(17,22,62,.25) 50%, rgba(17,22,62,0) 64%),
    radial-gradient(120px 90px at 100% 0%, rgba(17,22,62,.28), rgba(17,22,62,0));
}

.p07b-legende{
  position:absolute; left:20px; right:20px; bottom:17px;
  font-family:'Montserrat', sans-serif; color:#fff;
}
.p07b-legende p{ margin:0; }
.p07b-nom{
  font-size:17px; font-weight:800; letter-spacing:.015em; line-height:1.15;
  margin-bottom:5px !important;
  text-shadow:0 1px 8px rgba(10,14,40,.35);
}
.p07b-desc, .p07b-lieu{
  text-wrap:pretty;
  font-size:13px; font-weight:500; line-height:1.38; color:rgba(255,255,255,.88);
}
.p07b-lieu{
  display:flex; align-items:center; gap:6px; margin-top:4px !important;
  font-weight:700; color:#fff;
}
.p07b-epingle{ width:11px; height:15px; flex:none; }
.p07b-epingle path{ fill:#e44597; }
.p07b-epingle circle{ fill:#fff; }

/* Le crédit photo, le long du bord gauche, au-dessus de la légende. */
.p07b-credit{
  position:absolute; left:8px; top:12px; margin:0; padding:8px 3px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  border-radius:999px; background:rgba(17,22,62,.62);
  font-family:'Montserrat', sans-serif; font-size:10px; line-height:1.2; letter-spacing:.02em;
  color:#fff;
}

/* L'étiquette : un fil depuis le haut de la photo, un carton blanc percé. */
.p07b-etiquette{
  position:absolute; top:-3px; right:16px; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  transform-origin:50% 0; rotate:3deg;
  filter:drop-shadow(0 1px 2px rgba(20,30,60,.10)) drop-shadow(0 6px 10px rgba(8,12,40,.30));
}
.p07b-etiquette::before{
  content:""; width:2px; height:23px; margin-bottom:-9px; border-radius:2px;
  background:linear-gradient(#fff, rgba(255,255,255,.85));
}
.p07b-etiquette::after{
  /* Le clou qui tient le fil. */
  content:""; position:absolute; top:0; left:50%; width:8px; height:8px; margin-left:-4px;
  border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(210,0,116,.9);
}
.p07b-etiquette-corps{
  display:flex; flex-direction:column; align-items:center;
  min-width:96px; box-sizing:border-box; padding:17px 12px 10px;
  border-radius:16px; background:#fff;
  font-family:'Montserrat', sans-serif; text-align:center;
  -webkit-mask:radial-gradient(circle at 50% 8px, transparent 3.6px, #000 4.2px);
          mask:radial-gradient(circle at 50% 8px, transparent 3.6px, #000 4.2px);
}
.p07b-etiquette-corps .tarif{
  font-size:31px; font-weight:800; line-height:1; letter-spacing:-.025em; color:#d20074;
  white-space:nowrap;
}
.p07b-au{
  margin-top:6px;
  font-size:11px; font-weight:700; letter-spacing:.06em; line-height:1.2; color:#5b6476;
}
.p07b-public{
  margin-top:2px;
  font-size:15px; font-weight:600; line-height:1.2; color:#4b5468; white-space:nowrap;
  text-decoration:line-through; text-decoration-color:#d20074; text-decoration-thickness:2px;
}
.p07b-etiquette--seule .p07b-etiquette-corps{ padding:18px 18px 13px; }
.p07b-etiquette--seule .tarif{ font-size:36px; }

/* ══════════════════════════════ Le mouvement ══════════════════════════
   `--d` est le départ de chaque élément (css/anim.css). */

/* La carte : le pays se dessine, puis les épingles se plantent une à une,
   au moment où leur offre se pose. */
.js-anim .p07b:is(.est-active, .est-sortante) .p07b-pays{
  stroke-dasharray:1 1;
  animation:p07b-trace 1100ms var(--anim-douce) 300ms both,
            p07b-remplit 700ms ease-out 900ms both;
}
@keyframes p07b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes p07b-remplit{ from{ fill-opacity:0; } to{ fill-opacity:1; } }
.js-anim .p07b:is(.est-active, .est-sortante) .p07b-pin{
  animation:p07b-plante 650ms cubic-bezier(.3,1.5,.6,1) var(--p) both;
}
@keyframes p07b-plante{
  from{ opacity:0; translate:0 -26px; }
  50% { opacity:1; }
  to  { opacity:1; translate:0 0; }
}
.js-anim .p07b:is(.est-active, .est-sortante) .p07b-pin-onde{
  animation:p07b-onde 900ms ease-out calc(var(--p) + 450ms) both;
}
@keyframes p07b-onde{
  from{ opacity:.9; scale:.2; }
  to  { opacity:0; scale:1.6; }
}
/* L'épingle de l'offre survolée reste vive et grossit. */
.p07b:has(.p07b-offre[data-lieu="poitiers"]:hover) .p07b-pin[data-lieu="poitiers"] .p07b-pin-corps{ opacity:1; }
.p07b:has(.p07b-offre[data-lieu="poitiers"]:hover) .p07b-pin[data-lieu="poitiers"] .p07b-pin-goutte{ scale:1.45; }
.p07b:has(.p07b-offre[data-lieu="plailly"]:hover) .p07b-pin[data-lieu="plailly"] .p07b-pin-corps{ opacity:1; }
.p07b:has(.p07b-offre[data-lieu="plailly"]:hover) .p07b-pin[data-lieu="plailly"] .p07b-pin-goutte{ scale:1.45; }
.p07b:has(.p07b-offre[data-lieu="perpignan-pau"]:hover) .p07b-pin[data-lieu="perpignan-pau"] .p07b-pin-corps{ opacity:1; }
.p07b:has(.p07b-offre[data-lieu="perpignan-pau"]:hover) .p07b-pin[data-lieu="perpignan-pau"] .p07b-pin-goutte{ scale:1.45; }
.p07b:has(.p07b-offre[data-lieu="bordeaux"]:hover) .p07b-pin[data-lieu="bordeaux"] .p07b-pin-corps{ opacity:1; }
.p07b:has(.p07b-offre[data-lieu="bordeaux"]:hover) .p07b-pin[data-lieu="bordeaux"] .p07b-pin-goutte{ scale:1.45; }

/* L'étiquette tombe du haut de la photo et se balance avant de se poser. */
.js-anim .p07b:is(.est-active, .est-sortante) .p07b-etiquette{
  animation:p07b-balance 1100ms cubic-bezier(.25,.9,.3,1) var(--d) both;
}
@keyframes p07b-balance{
  0%  { opacity:0; translate:0 -30px; rotate:-16deg; }
  25% { opacity:1; translate:0 0; }
  45% { rotate:11deg; }
  65% { rotate:-5deg; }
  82% { rotate:6deg; }
  100%{ opacity:1; translate:0 0; rotate:3deg; }
}

@media (prefers-reduced-motion:reduce){
  .js-anim .p07b *{ animation:none !important; }
}