/* =========================================================
   ODTR — Pages spéciales (tourisme & expériences)
   Système visuel autonome pour 4 pages éditoriales :
   .sp-touristiques · .sp-demandes · .sp-voyages · .sp-partenariats
   ---------------------------------------------------------
   DÉCOUPLAGE STRICT : tout est scopé sous .speciale (classe du
   groupe racine de chaque page). Unique exception, fonctionnellement
   scopée elle aussi : main:has(.speciale) — nécessaire pour que le
   hero passe sous l'en-tête transparent (même approche que
   main:has(.scene) dans base.css).
   ---------------------------------------------------------
   SOMMAIRE
   01. Page & socle (variables)         09. Grille de cartes (offres)
   02. Ambiances (4 modificateurs)      10. Fiche voyage
   03. Contextes (covers / crème / nuit) 11. Points forts & atouts
   04. Typographie                      12. FAQ (details)
   05. Hero                             13. Badges & pastilles
   06. Bande évocatrice                 14. Boutons
   07. Manifeste / intro                15. CTA finale & filets
   08. Média + texte alterné            16. Apparitions (spr)
                                        17. Responsive · 18. Reduced motion
   19. Nuit de première (néon · art déco · profondeur · --defil · formulaire)
   ========================================================= */

/* ---------- 01. PAGE & SOCLE ---------- */
/* Le hero doit toucher le haut de la fenêtre (en-tête superposé). */
main:has(.speciale){padding:0}

.speciale{
  /* fonds & encres */
  --sp-fond:#050427;
  --sp-texte:rgba(255,255,255,.9);
  --sp-titre:#FFFFFF;
  --sp-eyebrow:#C3CD83;            /* surligne Montserrat espacée */
  --sp-eyebrow-sombre:#C3CD83;     /* version covers (toujours sur voile sombre) */
  --sp-lien:#C3CD83;
  --sp-trait:rgba(255,255,255,.16);/* filets, bordures fines */
  --sp-accent:#899E0D;             /* décor : puces, filets, marqueurs */
  --sp-accent-doux:#C3CD83;        /* cadres décalés, lueurs */
  --sp-or:#D8B46A;
  --sp-lueur:rgba(137,158,13,.14); /* halo des CTA finales sans image */
  --sp-em:var(--sp-eyebrow);       /* mot accentué dans les titres (em) */
  /* sections claires (redéfinies par contexte, cf. 03) */
  --sp-clair-fond:#FAF9F5;
  --sp-clair-texte:#3A3F58;
  --sp-clair-titre:#050427;
  --sp-clair-eyebrow:#66770B;
  --sp-clair-lien:#020071;
  /* boutons — paires « sur fond sombre » / « sur fond clair » ;
     les variables ACTIVES (--sp-cta-*) pointent sur l'une ou l'autre */
  --sp-cta-sombre-fond:#899E0D;  --sp-cta-sombre-texte:#020071;
  --sp-cta-sombre-hover:#C3CD83; --sp-cta-sombre-hover-texte:#020071;
  --sp-cta-clair-fond:#020071;   --sp-cta-clair-texte:#FAF9F5;
  --sp-cta-clair-hover:#01003A;  --sp-cta-clair-hover-texte:#FAF9F5;
  --sp-cta-fond:var(--sp-cta-sombre-fond);
  --sp-cta-texte:var(--sp-cta-sombre-texte);
  --sp-cta-hover:var(--sp-cta-sombre-hover);
  --sp-cta-hover-texte:var(--sp-cta-sombre-hover-texte);
  --sp-ligne-texte:#FFFFFF;                  /* bouton contour */
  --sp-ligne-bord:rgba(255,255,255,.55);
  --sp-ligne-hover-fond:rgba(255,255,255,.12);
  --sp-btn-radius:3px;
  /* cartes & panneaux */
  --sp-carte-fond:#FAF9F5; --sp-carte-texte:#3A3F58; --sp-carte-titre:#050427;
  --sp-carte-nom:#66770B;  --sp-carte-lien:#020071;
  --sp-rabais-fond:#899E0D; --sp-rabais-texte:#020071;
  --sp-invite-bord:rgba(255,255,255,.32);
  --sp-ombre:0 24px 60px rgba(0,0,20,.45);
  /* icônes & puces (décoratives) */
  --sp-puce:#899E0D; --sp-ic:#C3CD83; --sp-ic-bord:rgba(195,205,131,.5);
  /* badges */
  --sp-badge:#C3CD83; --sp-badge-alt:#D8B46A;
  /* voiles du hero (lisibilité du menu blanc en haut) */
  --sp-voile-haut:rgba(2,0,39,.86);
  --sp-voile-bas:rgba(2,0,39,.6);
  /* mouvement */
  --sp-duree:1s; --sp-distance:30px;
  --sp-radius:14px;
  background:var(--sp-fond);color:var(--sp-texte);
  font-family:var(--ui,'Montserrat',system-ui,sans-serif);
  overflow-x:clip;
}
.speciale a:not(.wp-block-button__link){color:var(--sp-lien)}
.speciale a:not(.wp-block-button__link):hover{color:var(--sp-titre)}
.speciale ::selection{background:var(--sp-accent);color:var(--sp-fond)}

/* ---------- 02. AMBIANCES ---------- */
/* Touristiques — vivant, lumineux : page CLAIRE, bleu d'eau + corail. */
.speciale.sp-touristiques{
  --sp-fond:#F3F6F8;
  --sp-texte:#3A4266; --sp-titre:#050427;
  --sp-eyebrow:#1E6E9C;            /* bleu d'eau, AA sur clair */
  --sp-eyebrow-sombre:#A8D3E8;     /* covers : eau claire lumineuse */
  --sp-lien:#1E6E9C; --sp-trait:rgba(5,4,39,.14);
  --sp-accent:#E9694A;             /* corail énergique (décor) */
  --sp-accent-doux:#7FB6D9;
  --sp-lueur:rgba(127,182,217,.2);
  --sp-clair-fond:#FFFFFF; --sp-clair-texte:#3A4266; --sp-clair-titre:#050427;
  --sp-clair-eyebrow:#1E6E9C; --sp-clair-lien:#1E6E9C;
  --sp-cta-sombre-fond:#E9694A;  --sp-cta-sombre-texte:#01003A;
  --sp-cta-sombre-hover:#F08A63; --sp-cta-sombre-hover-texte:#01003A;
  --sp-cta-clair-fond:#E9694A;   --sp-cta-clair-texte:#01003A;
  --sp-cta-clair-hover:#C24427;  --sp-cta-clair-hover-texte:#FAF9F5;
  --sp-cta-fond:var(--sp-cta-clair-fond);   /* page claire : actives = claires */
  --sp-cta-texte:var(--sp-cta-clair-texte);
  --sp-cta-hover:var(--sp-cta-clair-hover);
  --sp-cta-hover-texte:var(--sp-cta-clair-hover-texte);
  --sp-ligne-texte:#1E6E9C; --sp-ligne-bord:rgba(30,110,156,.45);
  --sp-ligne-hover-fond:rgba(30,110,156,.08);
  --sp-btn-radius:4px;
  --sp-carte-nom:#1E6E9C; --sp-carte-lien:#1E6E9C;
  --sp-rabais-fond:#E9694A; --sp-rabais-texte:#01003A;
  --sp-invite-bord:rgba(30,110,156,.4);
  --sp-ombre:0 22px 50px rgba(25,55,105,.16);
  --sp-puce:#C24427; --sp-ic:#1E6E9C; --sp-ic-bord:rgba(30,110,156,.4);
  --sp-badge:#1E6E9C; --sp-badge-alt:#8A5E12;
  --sp-duree:.85s; --sp-distance:34px;   /* rythme plus vif */
}
/* Demandes spéciales — calme, prestige, bleu nuit + soupçon d'or. */
.speciale.sp-demandes{
  --sp-fond:#01003A;
  --sp-texte:rgba(250,249,245,.88); --sp-titre:#FAF9F5;
  --sp-eyebrow:#C3CD83; --sp-eyebrow-sombre:#D8B46A;   /* covers : doré discret */
  --sp-lien:#C3CD83; --sp-trait:rgba(216,180,106,.28);
  --sp-accent:#899E0D; --sp-accent-doux:#D8B46A;
  --sp-lueur:rgba(216,180,106,.12);
  --sp-cta-sombre-fond:#FAF9F5;  --sp-cta-sombre-texte:#01003A;
  --sp-cta-sombre-hover:#D8B46A; --sp-cta-sombre-hover-texte:#01003A;
  --sp-btn-radius:10px;             /* coins doucement arrondis */
  --sp-invite-bord:rgba(216,180,106,.4);
  --sp-ic:#D8B46A; --sp-ic-bord:rgba(216,180,106,.45);
  --sp-ombre:0 26px 64px rgba(0,0,16,.5);
  --sp-duree:1.35s; --sp-distance:22px; /* lent et feutré */
  --sp-radius:16px;
}
/* Voyages lyriques — rêve et confiance : ciel, pierre, sable. */
.speciale.sp-voyages{
  --sp-fond:#050427;
  --sp-eyebrow:#9CC3DE; --sp-eyebrow-sombre:#9CC3DE;   /* bleu du ciel */
  --sp-lien:#9CC3DE; --sp-trait:rgba(156,195,222,.22);
  --sp-accent:#D8B46A; --sp-accent-doux:#BFB2A0;       /* sable · pierre */
  --sp-em:#9CC3DE;
  --sp-lueur:rgba(156,195,222,.14);
  --sp-clair-fond:#F2EEE6; --sp-clair-texte:#48435A; --sp-clair-titre:#050427;
  --sp-clair-eyebrow:#7A5D28; --sp-clair-lien:#1E4E7A;
  --sp-cta-sombre-fond:#D8B46A;  --sp-cta-sombre-texte:#01003A;
  --sp-cta-sombre-hover:#E7CD97; --sp-cta-sombre-hover-texte:#01003A;
  --sp-btn-radius:10px;
  --sp-carte-nom:#7A5D28;
  --sp-invite-bord:rgba(216,180,106,.4);
  --sp-puce:#D8B46A; --sp-ic:#9CC3DE; --sp-ic-bord:rgba(156,195,222,.42);
  --sp-badge:#9CC3DE;
  --sp-duree:1.2s; --sp-radius:16px;
}
/* Partenariats — « nuit de première » : la façade d'un opéra le soir.
   L'or n'est plus un accent : c'est la LUMIÈRE (enseigne, néon feutré,
   art déco). Composants nocturnes : section 19. */
.speciale.sp-partenariats{
  --sp-fond:#01002A;
  /* gamme néon : or → or clair → cœur chaud */
  --neon-or:#D8B46A; --neon-clair:#F5D48A; --neon-coeur:#FFF3D6;
  --neon-lueur:rgba(216,180,106,.5); --neon-lueur-2:rgba(245,212,138,.22);
  --sp-eyebrow:#F5D48A; --sp-eyebrow-sombre:#F5D48A;
  --sp-lien:#F5D48A; --sp-trait:rgba(216,180,106,.3);
  --sp-accent:#D8B46A; --sp-accent-doux:#D8B46A; --sp-em:#F5D48A;
  --sp-lueur:rgba(216,180,106,.16);
  --sp-cta-sombre-fond:#D8B46A;  --sp-cta-sombre-texte:#01002A;
  --sp-cta-sombre-hover:#F5D48A; --sp-cta-sombre-hover-texte:#01002A;
  --sp-ligne-bord:rgba(245,212,138,.5); --sp-ligne-hover-fond:rgba(245,212,138,.1);
  --sp-btn-radius:3px;
  --sp-puce:#D8B46A; --sp-ic:#F5D48A; --sp-ic-bord:rgba(216,180,106,.5);
  --sp-badge:#F5D48A; --sp-invite-bord:rgba(216,180,106,.45);
  --sp-ombre:0 24px 60px rgba(0,0,18,.55);
  --sp-duree:1s;
  /* halo bleu de scène en haut de page (par-dessus le fond du socle) */
  background-image:radial-gradient(120% 55% at 50% 0%,rgba(4,2,96,.5),transparent 62%);
}

/* ---------- 03. CONTEXTES ---------- */
/* Les covers (hero, bande, CTA) sont TOUJOURS sombres : on y verrouille
   les variables, quelle que soit l'ambiance (même sur la page claire). */
.speciale :is(.sp-hero,.sp-bande,.sp-cta-finale){
  --sp-titre:#FFFFFF; --sp-texte:rgba(255,255,255,.92);
  --sp-eyebrow:var(--sp-eyebrow-sombre); --sp-lien:#FFFFFF;
  --sp-trait:rgba(255,255,255,.2);
  --sp-cta-fond:var(--sp-cta-sombre-fond);
  --sp-cta-texte:var(--sp-cta-sombre-texte);
  --sp-cta-hover:var(--sp-cta-sombre-hover);
  --sp-cta-hover-texte:var(--sp-cta-sombre-hover-texte);
  --sp-ligne-texte:#FFFFFF; --sp-ligne-bord:rgba(255,255,255,.55);
  --sp-ligne-hover-fond:rgba(255,255,255,.12);
  color:var(--sp-texte);
}
/* Sections claires : toutes les couleurs rebasculent par variables. */
.speciale .sp-section-creme{
  --sp-texte:var(--sp-clair-texte); --sp-titre:var(--sp-clair-titre);
  --sp-eyebrow:var(--sp-clair-eyebrow); --sp-lien:var(--sp-clair-lien);
  --sp-trait:rgba(5,4,39,.14);
  --sp-cta-fond:var(--sp-cta-clair-fond);
  --sp-cta-texte:var(--sp-cta-clair-texte);
  --sp-cta-hover:var(--sp-cta-clair-hover);
  --sp-cta-hover-texte:var(--sp-cta-clair-hover-texte);
  --sp-ligne-texte:var(--sp-clair-lien); --sp-ligne-bord:rgba(2,0,113,.35);
  --sp-ligne-hover-fond:rgba(2,0,113,.07);
  --sp-puce:var(--sp-clair-eyebrow); --sp-ic:var(--sp-clair-eyebrow);
  --sp-ic-bord:rgba(5,4,39,.22);
  --sp-badge:var(--sp-clair-eyebrow); --sp-badge-alt:#8A5E12;
  --sp-ombre:0 22px 50px rgba(20,30,80,.14);
  background:var(--sp-clair-fond);color:var(--sp-texte);
}
/* Section nuit : îlot sombre (utile sur la page claire des touristiques). */
.speciale .sp-section-nuit{
  --sp-texte:rgba(255,255,255,.9); --sp-titre:#FFFFFF;
  --sp-eyebrow:var(--sp-eyebrow-sombre); --sp-lien:var(--sp-eyebrow-sombre);
  --sp-trait:rgba(255,255,255,.16);
  --sp-cta-fond:var(--sp-cta-sombre-fond);
  --sp-cta-texte:var(--sp-cta-sombre-texte);
  --sp-cta-hover:var(--sp-cta-sombre-hover);
  --sp-cta-hover-texte:var(--sp-cta-sombre-hover-texte);
  --sp-ligne-texte:#FFFFFF; --sp-ligne-bord:rgba(255,255,255,.55);
  --sp-ligne-hover-fond:rgba(255,255,255,.12);
  --sp-ombre:0 24px 60px rgba(0,0,20,.45);
  background:#01003A;color:var(--sp-texte);
}
/* Accessibilité : anneau de focus lisible sur la page claire. */
.speciale.sp-touristiques :focus-visible{outline-color:#1E6E9C}

/* ---------- 04. TYPOGRAPHIE ---------- */
.speciale :is(h1,h2,h3,h4){
  font-family:var(--serif,'Fraunces',Georgia,serif);font-weight:400;
  line-height:1.06;letter-spacing:-.015em;color:var(--sp-titre)}
.speciale h1{font-size:clamp(2.7rem,6.5vw,5.4rem)}
.speciale h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.speciale h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.speciale :is(h1,h2) em{font-style:italic;color:var(--sp-em,var(--sp-eyebrow))}
.speciale .sp-eyebrow{
  font-family:var(--ui,'Montserrat',system-ui,sans-serif);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  color:var(--sp-eyebrow);margin-bottom:0}
.speciale .sp-eyebrow + :is(h1,h2,h3){margin-block-start:16px}
.speciale .sp-lead{
  font-family:var(--serif,'Fraunces',Georgia,serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.42;color:var(--sp-titre)}
.speciale .sp-desc{font-size:clamp(1rem,1.4vw,1.18rem);font-weight:300;max-width:54ch}
.speciale p{color:inherit}

/* ---------- SECTIONS (rythme vertical) ---------- */
.speciale .sp-section{padding:clamp(70px,9vw,124px) clamp(22px,5vw,60px)}
.speciale .sp-section-serree{padding-block:clamp(44px,6vw,72px)}
.speciale h2 + :is(.sp-alterne,.sp-cartes,.sp-atouts,.sp-faq),
.speciale .sp-desc + :is(.sp-alterne,.sp-cartes,.sp-atouts,.sp-faq){
  margin-block-start:clamp(36px,5vw,60px)}

/* ---------- 05. HERO ---------- */
.speciale .sp-hero{
  position:relative;min-height:min(88vh,960px);display:flex;align-items:flex-end;
  padding:clamp(130px,20vh,180px) clamp(22px,5vw,60px) clamp(60px,10vh,110px)}
/* voile : dense en haut (menu blanc), ouvert au centre, assis en bas */
.speciale .sp-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--sp-voile-haut) 0%,rgba(2,0,39,0) 40%,rgba(2,0,39,0) 58%,var(--sp-voile-bas) 100%)}
.speciale .sp-hero .wp-block-cover__inner-container{
  position:relative;z-index:2;max-width:1140px;width:100%;margin:0 auto}
.speciale .sp-hero h1{max-width:18ch}
.speciale .sp-hero .sp-desc{margin-top:20px}
.speciale .sp-hero .wp-block-buttons{margin-top:32px}
.speciale .sp-hero-centre{align-items:center;text-align:center;
  padding-bottom:clamp(80px,14vh,140px)}
.speciale .sp-hero-centre h1,
.speciale .sp-hero-centre .sp-desc{margin-inline:auto}
.speciale .sp-hero-centre .wp-block-buttons{justify-content:center}

/* ---------- 06. BANDE ÉVOCATRICE ---------- */
.speciale .sp-bande{
  position:relative;min-height:min(52vh,560px);display:flex;align-items:center;
  text-align:center;padding:clamp(90px,14vh,140px) clamp(22px,5vw,60px)}
.speciale .sp-bande::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,0,39,.5),rgba(2,0,39,.28) 46%,rgba(2,0,39,.56))}
.speciale .sp-bande .wp-block-cover__inner-container{
  position:relative;z-index:2;max-width:820px;width:100%;margin:0 auto}
.speciale .sp-bande h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
/* prestige feutré : liseré doré sous les bandes des demandes spéciales */
.speciale.sp-demandes .sp-bande{border-bottom:1px solid rgba(216,180,106,.35)}

/* ---------- 07. MANIFESTE / INTRO ---------- */
.speciale .sp-manifeste{text-align:center}
.speciale .sp-manifeste .sp-lead{max-width:34ch;margin-inline:auto}
.speciale .sp-manifeste .sp-desc{max-width:62ch;margin-inline:auto;margin-block-start:22px}

/* ---------- 08. MÉDIA + TEXTE ALTERNÉ ---------- */
.speciale .sp-alterne{display:grid;gap:clamp(52px,8vw,104px)}
.speciale .sp-alterne>*{margin-block-start:0} /* le gap de la grille remplace les marges de flux WP */
.speciale .sp-bloc.wp-block-media-text{
  grid-template-columns:minmax(0,44%) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.speciale .sp-bloc.wp-block-media-text.has-media-on-the-right{
  grid-template-columns:1fr minmax(0,44%)}
.speciale .sp-bloc .wp-block-media-text__media{position:relative;margin:0}
.speciale .sp-bloc .wp-block-media-text__media img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.4;
  border-radius:var(--sp-radius);box-shadow:var(--sp-ombre)}
/* cadre décalé, signature discrète (eau/corail, or, pierre selon la page) */
.speciale .sp-bloc .wp-block-media-text__media::before{
  content:"";position:absolute;inset:20px -16px -16px 20px;z-index:-1;
  border:1.5px solid var(--sp-accent-doux);border-radius:var(--sp-radius);
  opacity:.55;pointer-events:none}
.speciale .sp-bloc.has-media-on-the-right .wp-block-media-text__media::before{
  inset:20px 20px -16px -16px}
.speciale .sp-bloc .wp-block-media-text__content{padding:clamp(6px,1.5vw,20px) 0}
.speciale .sp-bloc h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.speciale .sp-bloc .wp-block-buttons{margin-top:26px}

/* ---------- 09. GRILLE DE CARTES (offres partenaires) ---------- */
.speciale .sp-cartes.wp-block-columns{gap:clamp(18px,2.6vw,30px);align-items:stretch}
.speciale .sp-carte.wp-block-column{
  position:relative;display:flex;flex-direction:column;
  background:var(--sp-carte-fond);color:var(--sp-carte-texte);
  border-radius:var(--sp-radius);overflow:hidden;box-shadow:var(--sp-ombre);
  padding-bottom:26px;transition:transform .5s ease,box-shadow .5s ease}
.speciale .sp-carte:hover{transform:translateY(-6px)}
.speciale .sp-carte>:not(.wp-block-image):not(.sp-rabais){margin-inline:24px}
.speciale .sp-carte .wp-block-image{margin:0 0 20px;width:100%}
.speciale .sp-carte .wp-block-image img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:0}
.speciale .sp-carte .sp-carte-nom{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--sp-carte-nom);margin-block:0 2px}
.speciale .sp-carte h3{font-size:1.35rem;color:var(--sp-carte-titre);margin-block:6px 0}
.speciale .sp-carte h3+p{margin-block-start:10px}
.speciale .sp-carte p{font-size:.95rem;line-height:1.55}
.speciale .sp-rabais{
  position:absolute;top:14px;right:14px;z-index:2;margin:0;
  background:var(--sp-rabais-fond);color:var(--sp-rabais-texte);
  border-radius:40px;padding:7px 15px;font-size:.64rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 22px rgba(0,0,20,.3)}
.speciale .sp-carte .sp-lien-action{margin-block-start:auto;padding-top:16px}
/* carte d'invitation « votre entreprise ici » */
.speciale .sp-carte-invite.wp-block-column{
  display:flex;flex-direction:column;background:transparent;box-shadow:none;overflow:visible;
  border:1.5px dashed var(--sp-invite-bord);border-radius:var(--sp-radius);
  align-items:center;justify-content:center;text-align:center;
  padding:44px 26px;color:var(--sp-texte)}
.speciale .sp-carte-invite h3{color:var(--sp-titre)}
.speciale .sp-carte-invite>*{margin-inline:0}
/* lien d'action (cartes, blocs) */
.speciale .sp-lien-action a{
  color:var(--sp-carte-lien);text-decoration:none;font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid currentColor;
  padding-bottom:4px;transition:opacity .3s}
.speciale .sp-lien-action a:hover{opacity:.7;color:var(--sp-carte-lien)}
.speciale :is(.sp-section,.sp-section-nuit)>.sp-lien-action a,
.speciale .sp-bloc .sp-lien-action a{color:var(--sp-lien)}

/* ---------- 10. FICHE VOYAGE ---------- */
.speciale .sp-voyage.wp-block-media-text{
  grid-template-columns:minmax(0,44%) 1fr;gap:0;align-items:stretch;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--sp-trait);border-radius:calc(var(--sp-radius) + 4px);
  overflow:hidden;box-shadow:var(--sp-ombre)}
.speciale .sp-voyage.wp-block-media-text.has-media-on-the-right{
  grid-template-columns:1fr minmax(0,44%)}
.speciale .sp-voyage .wp-block-media-text__media{margin:0;height:100%;min-height:420px}
.speciale .sp-voyage .wp-block-media-text__media img{
  width:100%;height:100%;object-fit:cover;min-height:420px}
.speciale .sp-voyage .wp-block-media-text__content{
  padding:clamp(30px,4.5vw,58px) clamp(24px,4vw,56px)}
.speciale .sp-voyage h3{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.speciale .sp-voyage-dates+h3{margin-block-start:14px}
.speciale .sp-voyage-dates{
  display:inline-block;border:1px solid var(--sp-trait);color:var(--sp-eyebrow);
  border-radius:40px;padding:7px 16px;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;margin-bottom:4px}
.speciale .sp-voyage .wp-block-buttons{margin-top:26px}

/* ---------- 11. POINTS FORTS & ATOUTS ---------- */
/* liste à puces épurées (glyphe CSS, aucune image) */
.speciale ul.sp-points{list-style:none;padding:0;margin-block:22px;display:grid;gap:12px}
.speciale ul.sp-points li{position:relative;padding-left:30px}
.speciale ul.sp-points li::before{
  content:"◆";position:absolute;left:2px;top:.4em;font-size:.55em;
  color:var(--sp-puce);line-height:1}
.speciale ul.sp-points-2col{grid-template-columns:1fr 1fr;column-gap:34px}
/* atouts en colonnes : glyphe cerclé + titre court + phrase */
.speciale .sp-atouts.wp-block-columns{gap:clamp(20px,3vw,36px)}
.speciale .sp-atout.wp-block-column{text-align:center}
.speciale .sp-atout .sp-atout-ic{
  width:58px;height:58px;border-radius:50%;border:1.5px solid var(--sp-ic-bord);
  display:grid;place-items:center;font-size:1.3rem;line-height:1;
  color:var(--sp-ic);margin:0 auto 4px}
.speciale .sp-atout h3{font-size:1.2rem;margin-block:12px 0}
.speciale .sp-atout h3+p{margin-block-start:8px}
.speciale .sp-atout p{font-size:.92rem;line-height:1.55;max-width:30ch;margin-inline:auto}

/* ---------- 12. FAQ (bloc details) ---------- */
.speciale .sp-faq{max-width:780px;margin-inline:auto}
.speciale .sp-faq .wp-block-details{
  border-bottom:1px solid var(--sp-trait);padding:4px 0;margin:0}
.speciale .sp-faq .wp-block-details:first-of-type{border-top:1px solid var(--sp-trait)}
.speciale .sp-faq summary{
  list-style:none;cursor:pointer;position:relative;
  font-family:var(--serif,'Fraunces',Georgia,serif);
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.3;
  color:var(--sp-titre);padding:20px 52px 20px 0;transition:color .3s}
.speciale .sp-faq summary:hover{color:var(--sp-eyebrow)}
.speciale .sp-faq summary::-webkit-details-marker{display:none}
.speciale .sp-faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;translate:0 -50%;
  font-family:var(--ui,'Montserrat',system-ui,sans-serif);font-weight:300;
  font-size:1.6rem;color:var(--sp-accent);transition:rotate .45s ease}
.speciale .sp-faq .wp-block-details[open]>summary::after{rotate:45deg}
.speciale .sp-faq .wp-block-details>:not(summary){
  margin-block:0 20px;max-width:60ch;font-size:.98rem;font-weight:300}

/* ---------- 13. BADGES & PASTILLES ---------- */
.speciale .sp-badge{
  display:inline-block;border:1px solid currentColor;color:var(--sp-badge);
  border-radius:40px;padding:6px 15px;font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:0}
.speciale .sp-badge-bientot{color:var(--sp-badge-alt)}

/* ---------- 14. BOUTONS ---------- */
.speciale .wp-block-buttons{gap:12px 14px}
.speciale .wp-block-button__link{
  background:var(--sp-cta-fond);color:var(--sp-cta-texte);
  border:1.5px solid var(--sp-cta-fond);border-radius:var(--sp-btn-radius);
  padding:15px 30px;font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;
  transition:transform .35s ease,background .35s ease,color .35s ease,border-color .35s ease}
.speciale .wp-block-button__link:hover{
  background:var(--sp-cta-hover);border-color:var(--sp-cta-hover);
  color:var(--sp-cta-hover-texte);transform:translateY(-2px)}
.speciale .wp-block-button.is-style-outline>.wp-block-button__link{
  background:transparent;color:var(--sp-ligne-texte);border-color:var(--sp-ligne-bord);
  padding:15px 30px;border-width:1.5px}
.speciale .wp-block-button.is-style-outline>.wp-block-button__link:hover{
  background:var(--sp-ligne-hover-fond);border-color:var(--sp-ligne-texte);
  color:var(--sp-ligne-texte)}
/* demandes & voyages : gabarit plus feutré, lettrage plus aéré */
.speciale.sp-demandes .wp-block-button__link,
.speciale.sp-voyages .wp-block-button__link{
  font-size:.72rem;letter-spacing:.16em;padding:16px 34px}

/* ---------- 15. CTA FINALE & FILETS ---------- */
.speciale .sp-cta-finale{
  position:relative;min-height:min(60vh,640px);display:flex;align-items:center;
  text-align:center;padding:clamp(80px,12vh,130px) clamp(22px,5vw,60px)}
.speciale .sp-cta-finale::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(110% 70% at 50% 0%,var(--sp-lueur),transparent 62%),
    linear-gradient(180deg,rgba(2,0,39,.42),rgba(2,0,39,.6))}
.speciale .sp-cta-finale .wp-block-cover__inner-container{
  position:relative;z-index:2;max-width:820px;width:100%;margin:0 auto}
.speciale .sp-cta-finale h2{font-size:clamp(2.2rem,5vw,4rem)}
.speciale .sp-cta-finale .sp-desc{margin-inline:auto;margin-top:18px}
.speciale .sp-cta-finale .wp-block-buttons{justify-content:center;margin-top:34px}
/* filet séparateur — ligne fondue au centre */
.speciale hr.sp-filet{
  border:0;height:1.5px;width:min(240px,42%);margin:0 auto;opacity:.85;
  background:linear-gradient(90deg,transparent,var(--sp-accent),transparent)}
/* touristiques : le fil de la rivière (eau → corail) */
.speciale.sp-touristiques hr.sp-filet{
  background:linear-gradient(90deg,transparent,#7FB6D9 32%,#E9694A 68%,transparent)}
/* demandes : filet d'or */
.speciale.sp-demandes hr.sp-filet{
  background:linear-gradient(90deg,transparent,#D8B46A,transparent)}

/* ---------- 16. APPARITIONS (spr) ----------
   Opt-in : sans JS, .spr-actif n'est jamais posé → contenu visible.
   .spr        : l'élément apparaît (fondu + translation douce)
   .spr-lent   : version plus lente (grands blocs, images)
   .spr-groupe : posé AVEC .spr sur un conteneur → ce sont ses enfants
                 qui apparaissent en cascade (stagger automatique)
   .spr-d1…d5  : délais manuels (styles inline interdits dans les blocs) */
.speciale .spr{--spr-delai:0s}
.speciale .spr-d1{--spr-delai:.12s}
.speciale .spr-d2{--spr-delai:.24s}
.speciale .spr-d3{--spr-delai:.36s}
.speciale .spr-d4{--spr-delai:.48s}
.speciale .spr-d5{--spr-delai:.6s}
.speciale.spr-actif .spr:not(.spr-groupe){
  opacity:0;transform:translateY(var(--sp-distance));
  transition:opacity var(--sp-duree) cubic-bezier(.22,.65,.2,1) var(--spr-delai),
             transform var(--sp-duree) cubic-bezier(.22,.65,.2,1) var(--spr-delai)}
.speciale.spr-actif .spr.spr-in:not(.spr-groupe){opacity:1;transform:none}
.speciale.spr-actif .spr-lent:not(.spr-groupe){transition-duration:1.4s}
/* groupe : cascade sur les enfants directs */
.speciale.spr-actif .spr-groupe>*{
  opacity:0;transform:translateY(var(--sp-distance));
  transition:opacity var(--sp-duree) cubic-bezier(.22,.65,.2,1) var(--spr-delai),
             transform var(--sp-duree) cubic-bezier(.22,.65,.2,1) var(--spr-delai)}
.speciale.spr-actif .spr-groupe>:nth-child(2){transition-delay:calc(var(--spr-delai) + .14s)}
.speciale.spr-actif .spr-groupe>:nth-child(3){transition-delay:calc(var(--spr-delai) + .28s)}
.speciale.spr-actif .spr-groupe>:nth-child(4){transition-delay:calc(var(--spr-delai) + .42s)}
.speciale.spr-actif .spr-groupe>:nth-child(5){transition-delay:calc(var(--spr-delai) + .56s)}
.speciale.spr-actif .spr-groupe>:nth-child(n+6){transition-delay:calc(var(--spr-delai) + .7s)}
.speciale.spr-actif .spr-groupe.spr-in>*{opacity:1;transform:none}

/* ---------- 17. RESPONSIVE ---------- */
@media(max-width:781px){
  .speciale .sp-section{padding:clamp(54px,11vw,80px) 22px}
  .speciale .sp-hero{min-height:76vh;padding-top:120px;padding-bottom:56px}
  .speciale .sp-bande{min-height:40vh;padding-block:80px}
  .speciale ul.sp-points-2col{grid-template-columns:1fr}
  /* atouts : passage en rangées (glyphe à gauche), plus digeste au pouce */
  .speciale .sp-atout.wp-block-column{
    display:grid;grid-template-columns:58px 1fr;gap:4px 18px;text-align:left}
  .speciale .sp-atout .sp-atout-ic{grid-column:1;grid-row:1/span 2;margin:0}
  .speciale .sp-atout h3{align-self:center;margin-block:0}
  .speciale .sp-atout p{margin-inline:0;max-width:none}
}
@media(max-width:600px){
  /* media-text empilé par le CSS cœur : on range les décors */
  .speciale .sp-bloc .wp-block-media-text__media::before{display:none}
  .speciale .sp-bloc .wp-block-media-text__media img{aspect-ratio:16/10}
  .speciale .sp-bloc .wp-block-media-text__content{padding:22px 0 0}
  .speciale .sp-voyage .wp-block-media-text__media,
  .speciale .sp-voyage .wp-block-media-text__media img{min-height:240px}
  .speciale .sp-voyage .wp-block-media-text__content{padding:26px 20px 32px}
  .speciale .sp-rabais{top:10px;right:10px}
}

/* ---------- 18. REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .speciale.spr-actif .spr:not(.spr-groupe),
  .speciale.spr-actif .spr-groupe>*{
    opacity:1!important;transform:none!important;transition:none!important}
  .speciale .sp-carte,.speciale .wp-block-button__link{transition:none}
  .speciale .sp-carte:hover{transform:none}
  .speciale .wp-block-button__link:hover{transform:none}
  .speciale .sp-faq summary::after{transition:none}
}

/* ---------- 19. NUIT DE PREMIÈRE (néon · motifs · défilement) ----------
   Système nocturne conçu pour .sp-partenariats, réutilisable ailleurs :
   tous les composants portent des fallbacks var(--neon-…,or). Tout l'art
   vit en CSS (pseudo-éléments, gradients) : le markup de blocs reste
   100 % éditable. Effets au défilement : le moteur JS (speciales.js)
   pose --defil (0 → 1) sur chaque élément .spd ; la CSS n'anime que
   transform et opacity. Conventions de fallback (sans JS = état final) :
   - var(--defil, 1)  → effets de progression (tracés, sweeps, lueurs)
   - var(--defil, .5) → parallaxes (position neutre sans JS)            */

/* --- Texte néon (sur heading ou paragraphe : classe sp-neon) --- */
.speciale .sp-neon{
  color:var(--neon-clair,#F5D48A); /* repli si background-clip:text absent */
  text-shadow:0 0 14px var(--neon-lueur,rgba(216,180,106,.5)),
              0 0 42px var(--neon-lueur-2,rgba(245,212,138,.22))}
.speciale .sp-neon em{color:inherit} /* l'italique reste dans le dégradé */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .speciale .sp-neon{
    background-image:linear-gradient(180deg,var(--neon-coeur,#FFF3D6) 8%,
      var(--neon-clair,#F5D48A) 46%,var(--neon-or,#D8B46A) 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
/* variante hero : l'enseigne s'allume (2 sursauts puis stable, une fois).
   NE PAS cumuler avec .spr (conflit d'opacité). */
@keyframes sp-allumage{
  0%{opacity:0}8%{opacity:1}12%{opacity:.35}16%{opacity:1}
  24%{opacity:.55}30%,100%{opacity:1}}
.speciale.spr-actif .sp-neon-titre{animation:sp-allumage 2.6s ease-out .25s both}

/* --- Marquee : cadre d'enseigne (group autour du bloc titre du hero) --- */
.speciale .sp-marquee{
  position:relative;max-width:min(860px,100%);margin-inline:auto;
  padding:clamp(34px,5vw,60px) clamp(22px,4vw,56px);
  border:1px solid rgba(216,180,106,.55);
  background:linear-gradient(180deg,rgba(3,1,70,.38),rgba(1,0,42,.6));
  box-shadow:0 0 30px rgba(216,180,106,.12),inset 0 0 46px rgba(3,2,90,.4)}
.speciale .sp-marquee::before{ /* second liseré intérieur */
  content:"";position:absolute;inset:7px;border:1px solid rgba(216,180,106,.3);
  pointer-events:none}
.speciale .sp-marquee::after{ /* rangée d'ampoules sur le périmètre */
  content:"";position:absolute;inset:-15px;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(circle,var(--neon-coeur,#FFF3D6) 1.3px,var(--neon-lueur-2,rgba(245,212,138,.22)) 2.4px,transparent 3.8px),
    radial-gradient(circle,var(--neon-coeur,#FFF3D6) 1.3px,var(--neon-lueur-2,rgba(245,212,138,.22)) 2.4px,transparent 3.8px),
    radial-gradient(circle,var(--neon-coeur,#FFF3D6) 1.3px,var(--neon-lueur-2,rgba(245,212,138,.22)) 2.4px,transparent 3.8px),
    radial-gradient(circle,var(--neon-coeur,#FFF3D6) 1.3px,var(--neon-lueur-2,rgba(245,212,138,.22)) 2.4px,transparent 3.8px);
  background-size:28px 8px,28px 8px,8px 28px,8px 28px;
  background-position:top center,bottom center,left center,right center;
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y}

/* --- Rayons art déco en éventail — POUR COVERS (hero, cta-finale).
   Peints au-dessus de l'image/voile (z1), sous le contenu (z2). --- */
.speciale .sp-deco-rayons::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* 2 couches, même pseudo : halo doux CENTRÉ SUR L'ORIGINE DE ROTATION
     (invariant quand le pseudo tourne → il « reste au fond ») + rayons
     fins nets (plan proche, seuls perçus en rotation) */
  background:
    radial-gradient(58% 46% at 50% 118%,rgba(216,180,106,.12),transparent 70%),
    repeating-conic-gradient(from -90deg at 50% 118%,
    rgba(216,180,106,.075) 0deg .9deg,transparent .9deg 6.6deg);
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 40%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent 4%,#000 40%,#000 78%,transparent);
  transform:rotate(calc((var(--defil,.5) - .5) * 8deg));
  transform-origin:50% 118%;will-change:transform}
.speciale .sp-cta-finale.sp-deco-rayons::after{
  opacity:clamp(.25,calc(var(--defil,1) * 1.6),.9)} /* la lueur monte à l'entrée */

/* --- Écailles art déco filaires — POUR SECTIONS (group sp-section).
   Derrière le contenu, devant le fond (z-1 + isolation). --- */
.speciale .sp-deco-ecailles{position:relative;isolation:isolate;overflow:hidden}
.speciale .sp-deco-ecailles::after{
  content:"";position:absolute;inset:-40px 0;z-index:-1;pointer-events:none;
  /* 2 échelles dans le même pseudo : écailles fines nettes (proche) +
     grandes écailles douces à trait épais estompé (lointain) */
  background-image:
    radial-gradient(circle at 50% 130%,transparent 34px,rgba(216,180,106,.075) 35px,transparent 36.5px),
    radial-gradient(circle at 50% 130%,transparent 34px,rgba(216,180,106,.06) 35px,transparent 36.5px),
    radial-gradient(circle at 50% 130%,transparent 66px,rgba(216,180,106,.045) 68px,transparent 72px),
    radial-gradient(circle at 50% 130%,transparent 66px,rgba(216,180,106,.035) 68px,transparent 72px);
  background-size:72px 36px,72px 36px,144px 72px,144px 72px;
  background-position:0 0,36px 18px,0 0,72px 36px;
  opacity:clamp(0,calc(var(--defil,1) * 1.9),.85); /* s'éclaire en entrant */
  transform:translateY(calc((var(--defil,.5) - .5) * -26px)); /* parallaxe douce */
  will-change:transform}

/* --- Portée musicale qui se dessine (wp:separator, classes sp-portee spd) --- */
.speciale hr.sp-portee{
  border:0;height:37px;width:min(560px,72%);margin:0 auto;position:relative;
  opacity:1;display:block;
  background:repeating-linear-gradient(180deg,rgba(216,180,106,.55) 0 1px,transparent 1px 9px);
  transform:scaleX(clamp(0,calc(var(--defil,1) * 1.7),1));transform-origin:left center}
.speciale hr.sp-portee::after{ /* la note qui clôt la mesure */
  content:"♪";position:absolute;right:-24px;top:50%;translate:0 -50%;
  font-size:1.5rem;line-height:1;color:var(--neon-clair,#F5D48A);
  text-shadow:0 0 12px var(--neon-lueur,rgba(216,180,106,.5));
  opacity:clamp(0,calc((var(--defil,1) - .45) * 4),1)}

/* --- Fil d'or vertical qui se trace (classe sur une sp-section, + spd) --- */
.speciale .sp-fil-lumiere{position:relative;isolation:isolate}
.speciale .sp-fil-lumiere::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  z-index:-1;
  background:linear-gradient(180deg,transparent,var(--neon-or,#D8B46A) 18%,
    var(--neon-or,#D8B46A) 82%,transparent);
  box-shadow:0 0 12px var(--neon-lueur,rgba(216,180,106,.5));
  transform:scaleY(clamp(0,calc(var(--defil,1) * 1.5),1));transform-origin:top center}

/* --- Vitrines illuminées (wp:column : classes sp-carte sp-vitrine) --- */
.speciale .sp-vitrine.sp-carte.wp-block-column{
  --sp-carte-texte:rgba(250,249,245,.85);
  --sp-carte-titre:#FFF3D6; --sp-carte-nom:#F5D48A; --sp-carte-lien:#F5D48A;
  --sp-rabais-fond:#F5D48A; --sp-rabais-texte:#01002A;
  background:linear-gradient(175deg,#0A0944 0%,#03012F 55%,#01002A 100%);
  border:1px solid rgba(216,180,106,.5);
  box-shadow:0 0 0 1px rgba(216,180,106,.12),0 14px 40px rgba(0,0,20,.55),
    0 0 26px rgba(216,180,106,.1);
  transition:transform .5s ease,box-shadow .5s ease,border-color .5s ease}
.speciale .sp-vitrine.sp-carte:hover{
  border-color:rgba(245,212,138,.8);
  box-shadow:0 0 0 1px rgba(245,212,138,.3),0 18px 48px rgba(0,0,20,.6),
    0 0 44px rgba(216,180,106,.28)}
.speciale .sp-vitrine .sp-rabais{box-shadow:0 0 16px rgba(245,212,138,.45)}
/* sweep de brillance : traverse la vitrine au défilement (--defil hérité
   de la grille .sp-cartes.spd), et rejoue au survol */
.speciale .sp-vitrine.sp-carte::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,243,214,.16) 50%,transparent 58%);
  transform:translateX(calc(-130% + clamp(0,calc(var(--defil,1) * 1.3),1) * 260%))}
@keyframes sp-sweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
.speciale .sp-vitrine.sp-carte:hover::after{animation:sp-sweep 1s ease .1s 1}

/* --- Profondeur : la scène en plans étagés --------------------------
   Plan 1 (infini)   : ::before du GROUP RACINE (classe spd à poser sur
                       « speciale sp-partenariats spd ») — cage de scène
                       (vignettage latéral), lueurs très diffuses, deux
                       granulométries de poussière d'or ; parallaxe
                       ultra-lente : --defil y parcourt toute la page.
   Plan 2 (lointain) : rayons larges estompés fondus dans le VOILE des
                       covers (statiques) · grandes écailles douces et
                       halo d'origine (couches lentes des pseudos).
   Plan 3 (proche)   : rayons fins en rotation · écailles fines (-34px).
   Plan 4            : le contenu, net. Sans JS : positions neutres.  */
.speciale.sp-partenariats{position:relative}
.speciale.sp-partenariats::before{
  content:"";position:absolute;inset:-40px 0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(0,0,22,.42),transparent 16%,transparent 84%,rgba(0,0,22,.42)),
    radial-gradient(46% 30% at 16% 14%,rgba(216,180,106,.05),transparent 70%),
    radial-gradient(52% 36% at 85% 55%,rgba(6,3,120,.4),transparent 72%),
    radial-gradient(circle,rgba(245,212,138,.34) .8px,transparent 2px),
    radial-gradient(circle,rgba(245,212,138,.2) 1.3px,transparent 3.2px);
  background-size:100% 100%,100% 100%,100% 100%,210px 210px,340px 340px;
  background-position:0 0,0 0,0 0,17px 29px,120px 87px;
  transform:translateY(calc((var(--defil,.5) - .5) * -18px));
  will-change:transform}
/* le voile des covers reçoit la couche de rayons LARGES estompés :
   immobile pendant que les rayons fins (::after) tournent → profondeur */
.speciale.sp-partenariats .sp-hero.sp-deco-rayons::before{
  background:
    repeating-conic-gradient(from -90deg at 50% 118%,
      rgba(216,180,106,.05) 0deg 2.6deg,transparent 2.6deg 12deg),
    linear-gradient(180deg,var(--sp-voile-haut) 0%,rgba(2,0,39,0) 40%,rgba(2,0,39,0) 58%,var(--sp-voile-bas) 100%)}
.speciale.sp-partenariats .sp-cta-finale.sp-deco-rayons::before{
  background:
    repeating-conic-gradient(from -90deg at 50% 118%,
      rgba(216,180,106,.05) 0deg 2.6deg,transparent 2.6deg 12deg),
    radial-gradient(110% 70% at 50% 0%,var(--sp-lueur),transparent 62%),
    linear-gradient(180deg,rgba(2,0,39,.42),rgba(2,0,39,.6))}

/* --- Hero plein écran (Partenariats seulement) --- */
.speciale.sp-partenariats .sp-hero{
  min-height:100vh;min-height:100svh;align-items:center;
  padding-top:clamp(120px,16vh,170px);padding-bottom:clamp(48px,8vh,90px)}

/* --- Formulaire « Devenir partenaire » : la dernière vitrine --------
   Style le rendu du bloc odtr/formulaire-partenaire (contrat de markup
   ferme : #partenariat.sp-form-cadre > .sp-form-merci? + form.sp-form >
   .sp-form-grille > label.sp-champ > span + input/textarea, puis
   button.sp-form-envoi). Public d'affaires et 60+ : étiquettes toujours
   visibles, cibles 52px minimum, contrastes AA, focus = lueur néon.   */
.speciale .sp-form-cadre{
  max-width:720px;margin-inline:auto;text-align:left;
  background:linear-gradient(175deg,rgba(10,9,68,.92),rgba(1,0,42,.94));
  border:1px solid rgba(216,180,106,.5);border-radius:var(--sp-radius,14px);
  box-shadow:0 0 0 1px rgba(216,180,106,.12),0 24px 60px rgba(0,0,20,.55),
    0 0 30px rgba(216,180,106,.12);
  padding:clamp(26px,4vw,46px)}
.speciale .sp-cta-finale .sp-form-cadre{margin-top:34px}
.speciale .sp-form-merci{
  border:1px solid rgba(216,180,106,.5);border-radius:10px;
  background:radial-gradient(120% 100% at 50% 0,rgba(216,180,106,.14),rgba(216,180,106,.05));
  color:var(--neon-coeur,#FFF3D6);text-shadow:0 0 12px rgba(216,180,106,.35);
  padding:16px 20px;margin:0 0 24px;font-size:.98rem;font-weight:500}
.speciale .sp-form-grille{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.speciale .sp-champ-long{grid-column:1/-1}
.speciale .sp-champ{display:flex;flex-direction:column;gap:8px}
.speciale .sp-champ>span{
  font-family:var(--ui,'Montserrat',system-ui,sans-serif);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--neon-clair,#F5D48A)}
.speciale .sp-champ input,.speciale .sp-champ textarea{
  width:100%;min-height:52px;padding:14px 16px;
  background:rgba(2,1,58,.55);color:#FAF9F5;
  border:1px solid rgba(216,180,106,.35);border-radius:8px;
  font:inherit;font-size:1rem;line-height:1.4;
  transition:border-color .3s,box-shadow .3s,background .3s}
.speciale .sp-champ textarea{min-height:132px;resize:vertical}
.speciale .sp-champ input::placeholder,
.speciale .sp-champ textarea::placeholder{color:rgba(250,249,245,.5)}
.speciale .sp-champ input:focus,.speciale .sp-champ textarea:focus{
  outline:none;border-color:var(--neon-clair,#F5D48A);background:rgba(3,2,70,.72);
  box-shadow:0 0 0 1.5px rgba(245,212,138,.55),0 0 18px var(--neon-lueur,rgba(216,180,106,.5))}
.speciale .sp-form-envoi{
  margin-top:24px;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:16px 36px;cursor:pointer;
  border:1.5px solid var(--neon-or,#D8B46A);border-radius:var(--sp-btn-radius,3px);
  background:linear-gradient(180deg,var(--neon-clair,#F5D48A),var(--neon-or,#D8B46A));
  color:#01002A;
  font-family:var(--ui,'Montserrat',system-ui,sans-serif);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 20px var(--neon-lueur-2,rgba(245,212,138,.22));
  transition:transform .35s ease,box-shadow .35s ease}
.speciale .sp-form-envoi:hover{
  transform:translateY(-2px);
  box-shadow:0 0 34px var(--neon-lueur,rgba(216,180,106,.5))}
.speciale .sp-form-envoi:focus-visible{
  outline:2px solid var(--neon-coeur,#FFF3D6);outline-offset:3px}

/* --- Raffinements de la page Partenariats --- */
.speciale.sp-partenariats .sp-eyebrow{letter-spacing:.34em}
.speciale.sp-partenariats .wp-block-button__link{
  box-shadow:0 0 18px var(--neon-lueur-2);
  transition:transform .35s ease,background .35s ease,color .35s ease,
    border-color .35s ease,box-shadow .35s ease}
.speciale.sp-partenariats .wp-block-button__link:hover{
  box-shadow:0 0 30px var(--neon-lueur)}
.speciale.sp-partenariats .sp-atout .sp-atout-ic{
  text-shadow:0 0 10px var(--neon-lueur);
  box-shadow:0 0 18px rgba(216,180,106,.22),inset 0 0 12px rgba(216,180,106,.12)}
.speciale.sp-partenariats .sp-carte-invite.wp-block-column{
  background:radial-gradient(60% 50% at 50% 50%,rgba(216,180,106,.06),transparent)}

/* --- Nuit de première : responsive (mobile spectaculaire mais léger) --- */
@media(max-width:781px){
  .speciale .sp-marquee{padding:26px 18px}
  .speciale .sp-marquee::after{display:none} /* ampoules : desktop seulement */
  .speciale .sp-deco-rayons::after,
  .speciale .sp-deco-ecailles::after{transform:none;will-change:auto} /* parallaxe off */
  .speciale hr.sp-portee{width:82%}
  /* fond profond simplifié : vignettage + une lueur + une poussière, statiques */
  .speciale.sp-partenariats::before{
    transform:none;will-change:auto;
    background-image:
      linear-gradient(90deg,rgba(0,0,22,.32),transparent 20%,transparent 80%,rgba(0,0,22,.32)),
      radial-gradient(52% 36% at 85% 55%,rgba(6,3,120,.35),transparent 72%),
      radial-gradient(circle,rgba(245,212,138,.28) .8px,transparent 2px);
    background-size:100% 100%,100% 100%,230px 230px;
    background-position:0 0,0 0,20px 30px}
  .speciale .sp-form-grille{gap:14px 16px}
}
@media(max-width:640px){
  .speciale .sp-form-grille{grid-template-columns:1fr}
  .speciale .sp-champ-long{grid-column:auto}
  .speciale .sp-form-envoi{width:100%}
}
/* --- Nuit de première : reduced motion (tout figé à l'état final) --- */
@media(prefers-reduced-motion:reduce){
  .speciale.spr-actif .sp-neon-titre{animation:none}
  .speciale .sp-deco-rayons::after{transform:none;opacity:.8}
  .speciale .sp-deco-ecailles::after{transform:none;opacity:.6}
  .speciale hr.sp-portee{transform:none}
  .speciale hr.sp-portee::after{opacity:1}
  .speciale .sp-fil-lumiere::before{transform:none}
  .speciale .sp-vitrine.sp-carte::after{display:none}
  .speciale .sp-vitrine.sp-carte{transition:none}
  .speciale.sp-partenariats::before{transform:none;will-change:auto}
  .speciale .sp-champ input,.speciale .sp-champ textarea,
  .speciale .sp-form-envoi{transition:none}
  .speciale .sp-form-envoi:hover{transform:none}
}