/* =============================================
   CLUB321GO — Feuille de style globale
   ============================================= */

:root {
    --red: #C41230;
    --black: #111111;
    --white: #FFFFFF;
    --cream: #FDFAF7;
    --warm: #F5EFE8;
    --warm2: #EDE5DA;
    --gray: #6B6860;
    --gray-light: #E8E2DA;
    --light-gray: #F8F9FA;
    --red-soft: #E8172F;
    --red-pale: #FFF0F2;
    --red-pale2: #FFE0E5;
    --font-display: 'Nunito', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --fd: 'Nunito', sans-serif;
    --fb: 'Poppins', sans-serif;
    --r4: 4px; --r8: 8px; --r12: 12px; --r20: 20px; --r32: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--black); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 950; text-transform: uppercase; }
a { text-decoration: none; transition: 0.3s; }

/* --- COUPURE DES LIGNES (mots orphelins) ---------------------------------
   Un paragraphe dont la dernière ligne se réduit à UN SEUL mot (« …avec leur /
   accord. ») est un défaut de composition : le regard bute dessus, et il ne se
   voit qu'au rendu, jamais dans le code. Deux règles suffisent, appliquées une
   fois pour tout le site :
     · « pretty »  (textes courants)  = le navigateur remonte un mot à la ligne
       précédente pour éviter la ligne orpheline ;
     · « balance » (titres, 2-4 mots) = il répartit les lignes à parts égales.
   Les navigateurs qui ne connaissent pas ces valeurs les ignorent : aucun
   risque, aucune régression. Contrôle : tools-sg/verif-ui.sh
   ------------------------------------------------------------------------- */
p, li, dd, dt, figcaption, blockquote, label, .s-sub, .sub, .my321go-notice { text-wrap: pretty; }
h1, h2, h3, h4, .s-title, .hero h1 { text-wrap: balance; }

/* --- NAVIGATION --- */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 101;
    height: 80px;
    background: rgba(253,250,247,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-light);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5%;
    overflow: visible;
}
.top-banner {
    position: fixed; top: 80px; left: 0; right: 0; z-index: 100;
    background: var(--black); color: var(--white);
    text-align: center; padding: 1rem;
    font-family: var(--fb); font-weight: 600; font-size: 0.9rem;
}
.nav-logo { text-decoration: none; cursor: pointer; position: fixed; top: 8px; left: 8px; z-index: 103; }
.nav-logo img { height: 145px; width: auto; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); animation: heartbeat 10s ease-in-out infinite; }
@keyframes heartbeat {
  0%          { transform: scale(1); }
  50%         { transform: scale(1.08); }
  100%        { transform: scale(1); }
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { font-family: var(--fb); font-size: 0.85rem; font-weight: 600; color: var(--black); text-decoration: none; margin-left: 1.5rem; transition: color .2s; border-bottom: none; padding-bottom: 0; }
.nav-links a:hover { color: var(--red); }
/* Item de menu actif : souligné rouge gras */
.nav-links a.active { color: var(--red); font-weight: 800; border-bottom: 3px solid var(--red); padding-bottom: 3px; }
.nav-cta { background: var(--red) !important; color: var(--white) !important; padding: 10px 20px !important; border-radius: 8px !important; margin-left: 2rem !important; }
.nav-cta:hover { opacity: .9 !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 14px 11px; margin-left: auto; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--black); border-radius: 2px; transition: .3s; }
.mob { display: none; position: fixed; top: 132px; left: 0; right: 0; z-index: 99; background: var(--cream); border-bottom: 2px solid var(--red); flex-direction: column; padding: 16px 20px; box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.mob.open { display: flex; }
.mob a { font-family: var(--fd); font-size: 17px; font-weight: 800; color: var(--black); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--gray-light); }
.mob a:last-child { border-bottom: none; color: var(--red); }
/* Item actif (menu mobile) : rouge + barre rouge à gauche */
.mob a.active { color: var(--red); box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }

/* --- HERO PAGE FORMULE --- */
.hero-formule {
    background: var(--black);
    color: var(--white);
    padding: 5rem 10%;
    padding-top: calc(132px + 3rem);
    text-align: center;
}
/* Anniversaire + associations (héros `hero-split`) : espace bandeau→tagline réduit de moitié
   (3rem → 1.5rem). Secourisme (hero-formule sans hero-split) n'est pas concerné. */
.hero-formule.hero-split { padding-top: calc(132px + 1.5rem); }
.hero-formule .hero-eyebrow {
    font-family: var(--fd); font-size: 0.9rem; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: inherit; margin: 0 0 0.8rem; max-width: none;
}
/* Signature « Compte à rebours 3·2·1·GO » — décompte animé qui rappelle le nom 321GO + le go-stamp.
   Défini une fois ici (index.php charge style.css, comme les pages formule). Le `<p class="hero-eyebrow t321">`
   reste un BLOC (→ le tag pill passe bien à la ligne suivante) ; la rangée de pastilles est un span inline-flex.
   Les mots héritent de la couleur de l'eyebrow (ivoire sur fond sombre, anthracite sur fond clair) ;
   le rouge est réservé aux pastilles 3/2/1 et au gros rond « GO ». */
.t321-row{
  display:inline-flex; align-items:center; flex-wrap:nowrap; white-space:nowrap;
  gap:.6em; letter-spacing:1px; font-family:var(--fd);
  font-size:clamp(.72rem, 2.4vw, .95rem);
}
.t321-item{ display:inline-flex; align-items:center; gap:.34em; color:inherit; }
.t321-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.55em; height:1.55em; border-radius:50%;
  background:var(--red); color:#fff; font-weight:900; font-size:.66em; line-height:1;
  box-shadow:0 2px 8px rgba(196,18,48,.35);
}
.t321-go{
  display:inline-flex; align-items:center; justify-content:center; margin-left:.35em;
  width:2.4em; height:2.4em; border-radius:50%;
  background:var(--red); color:#fff; font-weight:900; font-size:.72em; letter-spacing:.5px; line-height:1;
  box-shadow:0 3px 14px rgba(196,18,48,.42);
}
@keyframes t321in{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
@keyframes t321bulb{ 0%{transform:scale(.4)} 55%{transform:scale(1.22)} 100%{transform:scale(1)} }
@keyframes t321go{ 0%{opacity:0; transform:scale(.4)} 60%{opacity:1} 100%{opacity:1; transform:scale(1)} }
.t321-row .t321-item{ opacity:0; animation:t321in .5s cubic-bezier(.22,1,.36,1) both; }
.t321-row .t321-item:nth-child(1){ animation-delay:.1s }
.t321-row .t321-item:nth-child(2){ animation-delay:.45s }
.t321-row .t321-item:nth-child(3){ animation-delay:.8s }
.t321-row .t321-item:nth-child(1) .t321-n{ animation:t321bulb .5s cubic-bezier(.22,1,.36,1) .1s both }
.t321-row .t321-item:nth-child(2) .t321-n{ animation:t321bulb .5s cubic-bezier(.22,1,.36,1) .45s both }
.t321-row .t321-item:nth-child(3) .t321-n{ animation:t321bulb .5s cubic-bezier(.22,1,.36,1) .8s both }
.t321-row .t321-go{ opacity:0; animation:t321go .5s cubic-bezier(.22,1,.36,1) 1.2s both }
@media (prefers-reduced-motion:reduce){
  .t321-row .t321-item, .t321-row .t321-go, .t321-row .t321-item .t321-n{ animation:none !important; opacity:1 !important; transform:none !important }
}
.hero-formule .tag {
    display: inline-block; background: var(--red); color: white;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 6px 16px; border-radius: 50px; margin-bottom: 1.5rem;
}
.hero-formule h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; margin-bottom: 1rem; }
.hero-formule h1 span { color: var(--red); }
.hero-formule p { font-size: 1.15rem; color: #ccc; max-width: 600px; margin: 0 auto 2.5rem; }

/* --- SECTIONS COMMUNES --- */
.section-padding { padding: 5rem 10%; }
.section-title { text-align: center; margin-bottom: 4rem; }
.section-title h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.8rem; }
.section-title p { color: #666; font-size: 1rem; max-width: 600px; margin: 0 auto; }

/* --- GRILLE ACTIVITES --- */
.grid-activites { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.card-act { background: var(--white); padding: 2rem; border-radius: 16px; border: 1px solid #eee; transition: 0.3s; }
.card-act:hover { border-color: var(--red); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.card-act h4 { color: var(--red); margin-bottom: 0.8rem; font-size: 1.1rem; }
.card-act p { font-size: 0.9rem; color: #666; }

/* --- GRILLE CIBLES --- */
.cibles-bg { background: var(--light-gray); }
.grid-cibles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.card-cible { background: var(--white); padding: 3rem; border-radius: 20px; text-align: center; border: 2px solid transparent; transition: 0.3s; }
.card-cible:hover { border-color: var(--red); transform: translateY(-4px); }
.card-cible .card-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.card-cible h3 { margin-bottom: 0.8rem; font-size: 1.3rem; }
.card-cible p { font-size: 0.9rem; color: #666; margin-bottom: 1.5rem; }
.card-cible a.link-formule { color: var(--red); font-weight: 700; font-size: 0.85rem; }
.card-cible .badge-soon { display: inline-block; background: #f0f0f0; color: #999; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 50px; letter-spacing: 1px; }

/* --- TARIFS --- */
.grid-tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.card-tarif { background: var(--white); border-radius: 20px; padding: 2.5rem; border: 2px solid #eee; text-align: center; transition: 0.3s; position: relative; }
.card-tarif.featured { border-color: var(--red); }
.card-tarif .badge-pop { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--red); color: white; font-size: 0.75rem; font-weight: 700; padding: 4px 14px; border-radius: 50px; letter-spacing: 1px; }
.card-tarif h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.card-tarif .price { font-size: 2.2rem; font-weight: 900; color: var(--red); margin: 1rem 0; font-family: var(--font-display); }
.card-tarif .price span { font-size: 1rem; color: #888; font-weight: 400; }
.card-tarif ul { list-style: none; text-align: left; margin: 1.5rem 0; }
.card-tarif ul li { padding: 0.4rem 0; font-size: 0.9rem; color: #555; }
.card-tarif ul li::before { content: "✓ "; color: var(--red); font-weight: 700; }

/* --- BOUTONS --- */
/* CTA principal « Demander un devis » — source unique pour toutes les pages formules.
   Doit rester identique à la copie inline de index.php (.btn + .btn-red). */
.btn-red {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--fd); font-size: 15px; font-weight: 800;
    padding: 14px 28px; border-radius: var(--r32);
    background: var(--red); color: var(--white);
    box-shadow: 0 4px 20px rgba(196,18,48,.28);
    border: none; cursor: pointer; white-space: nowrap;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-red::after { content: "→"; }
.btn-red:hover { transform: translateY(-2px); background: var(--red-soft); color: var(--white); box-shadow: 0 8px 28px rgba(196,18,48,.4); }
.btn-outline { border: 2px solid var(--red); color: var(--red); padding: 13px 33px; border-radius: 12px; font-weight: 700; display: inline-block; font-size: 0.9rem; }
.btn-outline:hover { background: var(--red); color: white; }
.btn-white { background: var(--white); color: var(--red); padding: 18px 40px; border-radius: 12px; font-weight: 800; display: inline-block; }
.btn-white:hover { background: #f0f0f0; }

/* --- CTA FINAL --- */
.cta-final { text-align: center; background: var(--red); color: var(--white); padding: 6rem 2rem; }
.cta-final h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.cta-final p { margin-bottom: 2rem; opacity: 0.9; }

/* --- FOOTER --- */
footer { background: #000; color: #888; padding: 4rem 10%; text-align: center; }
.footer-logo { height: 240px; width: auto; margin-bottom: 1.6rem; }
footer p { margin-top: 0.5rem; font-size: 0.9rem; }
footer .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; margin: 1.5rem 0; }
footer .footer-links a { color: #888; font-size: 0.85rem; }
footer .footer-links a:hover { color: var(--white); }

/* --- COMING SOON --- */
.coming-soon-section { text-align: center; padding: 6rem 10%; background: var(--light-gray); }
.coming-soon-icon { font-size: 4rem; margin-bottom: 1.5rem; }
.coming-soon-section h2 { margin-bottom: 1rem; }
.coming-soon-section p { color: #666; max-width: 500px; margin: 0 auto 2rem; font-size: 1rem; }
.notify-form { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.notify-form input { padding: 14px 20px; border-radius: 10px; border: 2px solid #ddd; font-size: 0.95rem; font-family: var(--font-body); width: 280px; }
.notify-form input:focus { outline: none; border-color: var(--red); }

/* --- LIENS NAV DÉSACTIVÉS --- */
.nav-disabled {
    color: #bbb !important;
    cursor: default !important;
    pointer-events: none !important;
    position: relative;
}
.nav-disabled::after {
    content: 'bientôt';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #aaa;
    white-space: nowrap;
}
.mob .nav-disabled {
    color: #bbb !important;
    pointer-events: none !important;
}
.mob .nav-disabled::after { display: none; }

/* --- MY321GO BOUTON NAV --- */
/* Pilule « pass VIP » : contour écarlate + cadenas dans une puce rouge pleine.
   Contour (vs CTA « Contactez-nous » plein) → rouge chirurgical, pas de doublon. */
.nav-my321go {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cream); color: #C41230;
  border: 1.5px solid #C41230; border-radius: 50px;
  font-family: var(--fb); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em;
  padding: 6px 18px 6px 7px;
  cursor: pointer; margin-left: 160px; flex-shrink: 0;
  transition: background .22s, color .22s, box-shadow .22s, transform .22s;
}
.nav-my321go .n-chip {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #C41230; color: #fff;
  transition: background .22s, color .22s;
}
.nav-my321go:hover { background: #C41230; color: #fff; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(196,18,48,0.28); }
.nav-my321go:hover .n-chip { background: #fff; color: #C41230; }
.nav-my321go:focus-visible { outline: 2px solid #C41230; outline-offset: 2px; }

/* --- MY321GO MODAL --- */
#my321go-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(17,17,17,0.55); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 1rem;
}
#my321go-overlay.open { display: flex; }
.my321go-modal {
  background: var(--white); border-radius: 20px;
  padding: 2.5rem 2.2rem 2rem; width: 100%; max-width: 380px;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22);
  animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.my321go-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  background: var(--cream); border: none; border-radius: 50%;
  width: 44px; height: 44px; cursor: pointer; color: var(--gray);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; font-size: 0.75rem; font-weight: 700;
}
.my321go-close:hover { background: var(--gray-light); color: var(--black); }
.my321go-close:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.my321go-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 1.6rem;
}
.my321go-icon-wrap {
  width: 44px; height: 44px; border-radius: 11px; background: var(--black);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.my321go-header-text { flex: 1; }
.my321go-header-text h2 {
  font-family: var(--fd); font-weight: 950; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--black);
  margin-bottom: 1px;
}
.my321go-header-text span {
  font-size: 0.78rem; color: var(--gray); font-family: var(--fb);
}
.my321go-label {
  font-family: var(--fb); font-weight: 600; font-size: 0.78rem;
  color: var(--black); letter-spacing: 0.04em; margin-bottom: 0.4rem; display: block;
}
#my321go-code {
  width: 100%; padding: 0.8rem 1rem;
  border: 1.5px solid var(--gray-light); border-radius: 9px;
  font-family: var(--fb); font-size: 1rem; color: var(--black);
  outline: none; background: var(--cream);
  letter-spacing: 0.2em; text-align: center; text-transform: uppercase;
  transition: border-color .2s, background .2s;
  margin-bottom: 0.5rem;
}
#my321go-code:focus { border-color: var(--black); background: var(--white); }
#my321go-code::placeholder { letter-spacing: 0.05em; text-transform: none; color: #c0b9b0; font-size: 0.85rem; }
.my321go-error {
  display: none; font-size: 0.8rem; color: #c41230;
  background: #fff0f2; border-radius: 7px; padding: 0.55rem 0.85rem;
  margin-bottom: 0.5rem; font-family: var(--fb);
}
.my321go-error.show { display: block; }
/* Message de retour après ?my321go=expired : ce n'est pas une erreur du
   visiteur → surface chaude neutre, pas le rouge de .my321go-error. */
.my321go-notice {
  display: none; font-family: var(--fb); font-size: 0.8rem;
  color: var(--gray); line-height: 1.5;
  background: var(--cream); border: 1px solid var(--gray-light);
  border-radius: 9px; padding: 0.7rem 0.9rem; margin-bottom: 1.2rem;
}
.my321go-notice.show { display: block; }
.my321go-notice strong {
  display: block; color: var(--black); font-weight: 600; margin-bottom: 2px;
}
#my321go-submit {
  width: 100%; background: var(--black); color: var(--white);
  font-family: var(--fd); font-weight: 950; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.85rem; border: none; border-radius: 9px;
  cursor: pointer; transition: background .2s; margin-bottom: 1.2rem;
}
#my321go-submit:hover { background: #2a2a2a; }
.my321go-hint {
  font-size: 0.75rem; color: var(--gray); text-align: center;
  line-height: 1.5; font-family: var(--fb);
  border-top: 1px solid var(--gray-light); padding-top: 1rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 960px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    nav > .nav-my321go { margin-left: auto; margin-right: 0.75rem; font-size: 0.62rem; padding: 4px 13px 4px 5px; gap: 6px; }
    nav > .nav-my321go .n-chip { width: 19px; height: 19px; }
    nav > .nav-my321go .n-chip svg { width: 10px; height: 10px; }
    /* Le hamburger est le dernier élément de la barre : sans cette marge, ses
       barres visibles arrivent à ~31 px du bord de l'écran (le padding de 11 px
       est INTERNE à la zone tactile de 44 px) et le menu paraît collé à droite. */
    .hamburger { margin-left: 0; margin-right: 10px; }
    .top-banner { padding: 0.6rem 1rem; font-size: 0.8rem; }
    .mob { top: 120px; }
    .hero-formule { padding: calc(120px + 2rem) 5% 4rem; }
    .hero-formule.hero-split { padding-top: calc(120px + 1rem); } /* anniv+asso : espace bandeau→tagline /2 */
    .section-padding { padding: 4rem 5%; }
}

@media (max-width: 768px) {
    /* Tagline « ligne de départ » : garder les 3 mots sur UNE seule ligne en mobile */
    .hero-formule .hero-eyebrow { white-space: nowrap; letter-spacing: 1px; font-size: 0.78rem; }
    .grid-tarifs { grid-template-columns: 1fr; }
    .section-padding { padding: 3rem 5%; }
    .cta-final { padding: 4rem 1.5rem; }
    .cta-final .btn-white { display: inline-block; word-break: break-all; }
    .hero-formule .btn-white { display: block; width: fit-content; margin: 0 auto; }
    .coming-soon-section { padding: 3rem 5%; }
    .notify-form { flex-direction: column; align-items: center; }
    .notify-form input { width: 100%; max-width: 320px; }
    .footer-logo { height: 100px; }
}

@media (max-width: 640px) {
    .banner-geo { display: none; }
    .top-banner { font-size: 0.75rem; padding: 0.4rem 1rem; }
    .nav-logo img { height: 72px; }
    .mob { top: 112px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .nav-logo img { height: 52px; }
    nav { height: 60px; }
    .top-banner { top: 60px; }
    .mob { top: 100px; }
}
/* --- FORMULAIRE DE CONTACT --- */
#contact { scroll-margin-top: 132px; }
.cta-band {
    background: var(--red);
    padding: 80px 8vw;
    /* Titre + villes AU-DESSUS, formulaire centré dessous (plus de deux colonnes). */
    display: flex; flex-direction: column; align-items: center;
    gap: 32px;
    position: relative; overflow: hidden;
}
.cta-band::before {
    content: '3·2·1';
    position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
    font-family: var(--fd); font-size: 200px; font-weight: 950;
    color: rgba(255,255,255,.05); line-height: 1; pointer-events: none; letter-spacing: -8px;
}
.cta-band h2 {
    color: var(--white); font-size: clamp(28px,3.5vw,44px);
    font-family: var(--fd); font-weight: 950; text-transform: none;
}
.cta-band h2 em { color: #111; font-style: normal; }
/* Pas de largeur maximale : le titre doit tenir sur UNE ligne en bureau
   (« Prêt à vivre un anniversaire unique ? » coupait à 720 px). */
.cta-left { text-align: center; }
.cta-left p { color: rgba(255,255,255,.8); font-size: 15px; margin-top: 10px; }
.cta-form-wrap {
    width: 100%; max-width: 560px; min-width: 0;
    background: rgba(0,0,0,.2);
    border-radius: var(--r20); padding: 32px;
    border: 1px solid rgba(255,255,255,.12);
}
/* Mentions sous le cadre du formulaire. Opacité .85 et non .6 : à .6 le blanc
   sur --red tombe à 2,9:1, sous le seuil de lisibilité de 4,5:1. */
.cta-legal {
    width: 100%; max-width: 560px; margin-top: -12px;
    text-align: center; font-size: 12px; line-height: 1.6;
    color: rgba(255,255,255,.85);
}
.cta-legal a { color: inherit; text-decoration: underline; }
.cta-form-title {
    font-family: var(--fd); font-size: 14px; font-weight: 800;
    color: rgba(255,255,255,.7); letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 20px;
}
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; gap: 12px; }
.form-row input { flex: 1; min-width: 0; }
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%; padding: 12px 16px;
    border-radius: var(--r8);
    border: 1.5px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    color: var(--white);
    font-family: var(--fb); font-size: 14px;
    outline: none;
    transition: border-color .2s, background .2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,.5); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.2);
}
.contact-form select { cursor: pointer; }
.contact-form select option { background: #1A1A1A; color: var(--white); }
.contact-form textarea { resize: vertical; min-height: 90px; }
.contact-form .btn-submit {
    display: flex; width: 100%; align-items: center; justify-content: center;
    background: var(--white); color: var(--red);
    font-family: var(--fd); font-weight: 800; font-size: 15px;
    padding: 14px 28px; border-radius: var(--r32);
    border: none; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    margin-top: 4px;
}
.contact-form .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.honeypot { display: none !important; }
.form-msg-error {
    background: rgba(0,0,0,.3); color: #fff;
    padding: 10px 16px; border-radius: var(--r8);
    font-size: 13px; border-left: 3px solid rgba(255,255,255,.5);
}
.form-success-box {
    text-align: center; padding: 24px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.form-success-box .success-icon { font-size: 44px; }
.form-success-box p { color: var(--white); font-size: 15px; line-height: 1.6; }
.form-success-box strong { font-family: var(--fd); font-size: 18px; display: block; margin-bottom: 4px; }

.mobile-br { display: none; }
.mobile-only { display: none; }
@media (max-width: 960px) {
    .cta-band { flex-direction: column; align-items: flex-start; padding: 40px 5vw; gap: 24px; }
    /* Tablette/téléphone : on garde la présentation d'avant (titre à gauche, formulaire pleine largeur). */
    .cta-left { text-align: left; }
    .cta-form-wrap { max-width: none; }
    .cta-reponse:not(.mobile-only), .cta-villes:not(.mobile-only) { display: none; }
    .mobile-only { display: block; }
}
@media (max-width: 768px) {
    .cta-band { padding: 20px 5vw; gap: 8px; }
    .cta-form-wrap { padding: 8px 20px; }
    .cta-legal { margin-top: 0; } /* écart de 8 px ici : le retrait de -12 px ferait chevaucher le cadre */
    .form-row { flex-direction: column; }
    .cta-left { width: 100%; text-align: center; }
    .mobile-br { display: block; }
}