/* Tout est scopé sous .amb-page et préfixé amb- pour ne JAMAIS entrer
   en collision avec les classes déjà utilisées ailleurs sur le site
   (style.css global, blog, etc.). Ne pas retirer le préfixe.
   Fichier externe obligatoire : la CSP du site public interdit tout
   <style> inline (style-src 'self' ... sans 'unsafe-inline'). */
.amb-page{
  --amb-navy:#151A33; --amb-gold:#E8BD3A; --amb-gold-light:#FCE559; --amb-gold-dark:#A06A0F;
  --amb-tint:#F5F5FA; --amb-ink:#1A1B3D; --amb-sub:#54566e; --amb-gold-border:#F7E9D0;
}

/* Nav et footer réutilisent les classes globales de style.css (nav, .logo,
   .hero-nav-links, .mobile-menu, footer, .footer-social, .footer-links, .f)
   — pas de règles amb- pour eux, volontairement, pour garantir le même
   rendu que le reste du site. */

/* Reprend exactement la technique du hero de la home (.hero-photo dans
   style.css) : la nav est translucide (background:rgba(10,12,26,.22) +
   backdrop-filter, voir "nav{...}" dans style.css) et flotte AU-DESSUS de la
   photo plutôt qu'à côté — d'où la marge négative égale à la hauteur de la
   nav (108px desktop / 84px mobile, cf. nav{height:...} dans style.css) pour
   que l'image remonte sous elle. Sans ça, on a un bord net juste sous la
   barre de nav : c'est le bug qu'on corrige ici. .bg-santorin est une classe
   globale déjà définie dans style.css (background-image), pas besoin de la
   redéfinir. */
/* Décalage = nav (108px) + bandeau doré (hauteur fixée à 49px ci-dessous) ; mobile :
   84 + 40. Les deux hauteurs sont figées pour que la photo remonte exactement
   sous la nav, quelle que soit la largeur d'écran. */
.amb-page .index-savings-banner{height:49px; box-sizing:border-box; padding-top:0; padding-bottom:0; display:flex; align-items:center; justify-content:center;}
.amb-hero{
  position:relative; overflow:hidden;
  margin-top:-157px; padding-top:157px;
  min-height:640px;
  background-size:cover; background-position:center;
  display:flex; align-items:center;
}
@media (max-width:800px){
  .amb-banner-more{display:none;}
  /* Une seule ligne garantie (sinon le bandeau grandit et décale la photo) */
  .amb-page .index-savings-banner span{white-space:nowrap; font-size:min(.78rem, 3.4vw);}
  .amb-page .index-savings-banner{height:40px;}
  .amb-hero{margin-top:-124px; padding-top:124px; min-height:auto;}
}
/* Pas d'overlay sombre plaqué sur toute la photo : comme sur la home, le
   contraste vient du text-shadow sur le H1/kicker et du panneau blanc
   translucide (.lead-subtext, déjà stylé dans style.css). Un overlay ici
   assombrit le blanc du panneau et donne un rendu "sale" plutôt que le
   verre dépoli propre voulu. */
.amb-hero-inner{
  position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto;
  padding:60px 6vw 60px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
@media (max-width:900px){
  .amb-hero-inner{grid-template-columns:1fr; padding:28px 6vw 44px; gap:18px;}
  /* Mobile : le formulaire juste après le titre, comme sur /voyageur/ — le bloc
     de texte s'efface (display:contents) pour que ses enfants se rangent un à un. */
  .amb-hero-lead{display:contents;}
  .amb-hero .amb-kicker{order:1; margin-bottom:0; text-align:center;}
  .amb-hero .amb-h1{order:2; margin:0; text-align:center;}
  .amb-hero .hero-form{order:3;}
  .amb-hero-lead .lead-subtext{order:4; max-width:none;}
  .amb-hero-lead .amb-btn-secondary{order:5; margin:6px auto 0;}
}
.amb-hero-lead{color:#fff; text-align:left;}
.amb-hero .amb-kicker{
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amb-gold-light); margin-bottom:14px;
}
.amb-hero .amb-h1{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,2.8rem);
  line-height:1.15; margin:0 0 18px; color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.85), 0 10px 28px rgba(0,0,0,.7);
}
.amb-hero-lead .lead-subtext{max-width:480px;}
.amb-hero-lead .amb-btn-secondary{margin-top:24px;}
.amb-btn-secondary{
  display:inline-block; border:1px solid rgba(255,255,255,.5); color:#fff;
  font-family:'Work Sans',sans-serif; font-weight:600; font-size:.9rem;
  padding:13px 28px; border-radius:999px; text-decoration:none;
}
/* Le widget de prise de RDV lui-même (#rdv-form, étapes, calendrier, créneaux)
   réutilise entièrement les classes globales déjà stylées dans style.css pour
   l'index (.hero-form, .rdv-title-highlight, .lede, .funnel-form-row,
   .field-inset, .optin-row, .step-hidden, .rdv-cal-*, .rdv-slots, .rdv-slot,
   .rdv-empty-msg, .rdv-note, .rdv-back-link, .rdv-confirm-box, .submit-row,
   .submit-btn, .honeypot) — aucune règle amb- à écrire pour lui, volontairement,
   pour garantir le même rendu/comportement que sur la home. */

.amb-final-cta{text-align:center;}
.amb-final-cta-text{
  font-family:'Karla',sans-serif; color:var(--amb-sub); max-width:520px;
  margin:0 auto 28px; line-height:1.6;
}
.amb-btn-primary-dark{
  display:inline-block; background:var(--amb-navy); color:#fff;
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:.9rem;
  padding:14px 30px; border-radius:999px; text-decoration:none;
}

.amb-section{padding:70px 6vw; max-width:1100px; margin:0 auto;}
.amb-section-kicker{
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amb-gold-dark); text-align:center; margin-bottom:10px;
}
.amb-h2{
  font-family:'Zilla Slab',serif; font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--amb-ink); text-align:center; margin:0 0 40px;
}

/* --- Icônes (sprite #amb-i-* en haut de page) : trait fin, couleur héritée --- */
.amb-ic{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.amb-round-ic{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(232,189,58,.16); color:var(--amb-gold-dark);
}

/* --- Bandes pleine largeur : rythme des fonds comme sur /voyageur/
   (blanc / tint / bleu nuit). Le contenu garde la largeur de .amb-section. --- */
.amb-band-tint{background:var(--amb-tint);}
.amb-band-navy{background:var(--amb-navy); border-top:1px solid rgba(201,162,39,.25); border-bottom:1px solid rgba(201,162,39,.25);}
.amb-band > .amb-section{padding-top:84px; padding-bottom:84px;}
.amb-band-navy .amb-section-kicker{color:var(--amb-gold-light);}
.amb-band-navy .amb-h2{color:#fff;}
.amb-band-navy .amb-stats-intro{color:#c9cae0;}
.amb-band-navy .amb-stat-card{background:rgba(255,255,255,.04); border:1px solid rgba(232,189,58,.28);}
.amb-band-navy .amb-stat-num{
  background-image:linear-gradient(180deg,#FCE559 0%,#E8BD3A 55%,#C9962A 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.amb-band-navy .amb-stat-label{color:#c9cae0;}

/* --- Étapes : composant .steps-section de style.css + une icône par étape --- */
.amb-step-ic{display:block; width:30px; height:30px; margin:0 auto 12px; color:var(--amb-gold-dark);}
.amb-steps-section .step-card{max-width:300px;}

.amb-destinations{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:800px){.amb-destinations{grid-template-columns:repeat(2,1fr);}}
.amb-destination{margin:0; border-radius:12px; overflow:hidden; position:relative; box-shadow:0 8px 20px rgba(0,0,0,.12);}
.amb-destination img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block;}
.amb-destination figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 12px 10px;
  background:linear-gradient(to top, rgba(10,12,26,.85), rgba(10,12,26,0));
  color:#fff; font-family:'Work Sans',sans-serif; font-weight:600; font-size:.82rem;
}

.amb-revenu-disclaimer{
  font-family:'Karla',sans-serif; font-size:.82rem; color:var(--amb-sub);
  text-align:center; margin-top:28px; padding-top:24px; border-top:1px solid var(--amb-gold-border);
  max-width:680px; margin-left:auto; margin-right:auto;
}

.amb-confiance-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:800px){.amb-confiance-grid{grid-template-columns:1fr;}}
.amb-confiance-card{text-align:center; padding:10px;}
.amb-confiance-card h3{font-family:'Work Sans',sans-serif; font-weight:700; font-size:.98rem; color:var(--amb-ink); margin:0 0 8px;}
.amb-confiance-card p{font-family:'Karla',sans-serif; font-size:.88rem; color:var(--amb-sub); line-height:1.5; margin:0;}

/* --- "Pourquoi maintenant" : chiffres marché (sur bande bleu nuit) --- */
.amb-stats-intro{
  font-family:'Karla',sans-serif; font-size:1rem; color:var(--amb-sub); text-align:center;
  max-width:680px; margin:0 auto 36px; line-height:1.6;
}
.amb-stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:800px){.amb-stats-grid{grid-template-columns:1fr;}}
.amb-stat-card{background:var(--amb-tint); border-radius:12px; padding:28px 22px; text-align:center;}
.amb-stat-num{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:2.4rem; color:var(--amb-gold-dark); margin-bottom:8px;
}
.amb-stat-label{font-family:'Karla',sans-serif; font-size:.9rem; color:var(--amb-sub); line-height:1.5;}

/* --- Comparatif client / ambassadeur : colonne ambassadeur mise en avant --- */
.amb-compare-intro{
  font-family:'Karla',sans-serif; font-size:1rem; color:var(--amb-sub); text-align:center;
  max-width:680px; margin:0 auto 32px; line-height:1.6;
}
.amb-compare-table-wrap{overflow-x:auto; border-radius:12px; border:1px solid var(--amb-gold-border); box-shadow:0 10px 30px rgba(26,27,61,.06);}
.amb-compare-table{width:100%; border-collapse:collapse; font-family:'Karla',sans-serif; font-size:.9rem; background:#fff;}
.amb-compare-table th, .amb-compare-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--amb-gold-border);}
.amb-compare-table th{
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:.82rem; color:#fff;
  background:var(--amb-navy); white-space:nowrap;
}
.amb-compare-table th.amb-compare-highlight{background:linear-gradient(180deg,#FCE559 0%,#E8BD3A 100%); color:var(--amb-navy);}
.amb-compare-table td.amb-compare-highlight{background:rgba(232,189,58,.08); font-weight:600; color:var(--amb-ink);}
.amb-compare-table th:not(:first-child), .amb-compare-table td:not(:first-child){text-align:center;}
.amb-compare-table tr:last-child td{border-bottom:none;}
.amb-compare-yes .amb-ic{width:20px; height:20px; stroke-width:2.4; color:var(--amb-gold-dark); vertical-align:middle;}
.amb-compare-no{color:var(--amb-sub);}
/* Tableau comparatif sur mobile : en-têtes sur plusieurs lignes et marges réduites,
   pour tenir dans l'écran sans défilement horizontal. */
@media (max-width:600px){
  .amb-compare-table{font-size:.8rem;}
  .amb-compare-table th, .amb-compare-table td{padding:10px 8px;}
  .amb-compare-table th{white-space:normal; font-size:.72rem;}
  .amb-compare-table td:first-child{width:42%;}
}

/* --- Plan de rémunération : 2 groupes (vos recommandations / équipe) --- */
.amb-bonus-group-title{
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amb-navy); margin:40px 0 16px;
  display:flex; align-items:center; gap:14px;
}
.amb-bonus-group-title::after{content:''; flex:1; height:1px; background:var(--amb-gold-border);}
.amb-bonus-group-title span{font-weight:500; text-transform:none; letter-spacing:0; color:var(--amb-sub);}
.amb-bonus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){.amb-bonus-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.amb-bonus-grid{grid-template-columns:1fr;}}
.amb-bonus-card{background:#fff; border-radius:12px; padding:24px 20px; border:1px solid var(--amb-gold-border); display:flex; flex-direction:column;}
.amb-bonus-grid-main .amb-bonus-card{border:2px solid var(--amb-gold); box-shadow:0 12px 30px rgba(26,27,61,.08);}
.amb-bonus-ic{
  width:46px; height:46px; border-radius:12px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(232,189,58,.16); color:var(--amb-gold-dark);
}
.amb-bonus-grid-main .amb-bonus-ic{background:var(--amb-navy); color:var(--amb-gold-light);}
.amb-bonus-card h3{font-family:'Work Sans',sans-serif; font-weight:700; font-size:.98rem; color:var(--amb-ink); margin:0 0 8px;}
.amb-bonus-card p{font-family:'Karla',sans-serif; font-size:.86rem; color:var(--amb-sub); line-height:1.5; margin:0 0 12px; flex:1;}
.amb-bonus-amount{
  font-family:'Work Sans',sans-serif; font-weight:600; font-size:.82rem; color:var(--amb-ink);
  background:var(--amb-tint); border-radius:8px; padding:8px 10px; line-height:1.4;
}

/* --- Ce qui est inclus : cartes horizontales (icône à gauche), 2 par ligne,
   la 5e centrée. 5 (puis 3) colonnes étroites rendaient le texte illisible. --- */
.amb-included-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px;}
.amb-included-item{
  flex:0 1 calc((100% - 18px) / 2); box-sizing:border-box; min-width:0; max-width:480px;
  display:flex; gap:16px; align-items:flex-start; text-align:left;
  padding:22px 22px; background:#fff; border-radius:12px; border:1px solid #E6E6F0;
}
.amb-included-item .amb-round-ic{flex-shrink:0; width:48px; height:48px; margin:0;}
.amb-included-item h3{font-family:'Work Sans',sans-serif; font-weight:700; font-size:.98rem; line-height:1.3; color:var(--amb-ink); margin:2px 0 6px;}
.amb-included-item p{font-family:'Karla',sans-serif; font-size:.9rem; color:var(--amb-sub); line-height:1.5; margin:0;}
@media (max-width:860px){.amb-included-item{flex-basis:100%; max-width:560px;}}
/* --- À qui ça s'adresse : 3 profils types (photo + accroche + 3 points) --- */
.amb-profiles{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){.amb-profiles{grid-template-columns:1fr; max-width:520px; margin:0 auto;}}
.amb-profile{background:#fff; border-radius:14px; overflow:hidden; border:1px solid #E6E6F0; box-shadow:0 10px 30px rgba(26,27,61,.06); display:flex; flex-direction:column;}
.amb-profile-img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.amb-profile-img-left{object-position:15% center;}
.amb-profile-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.amb-profile-tag{
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amb-gold-dark); margin-bottom:8px;
}
.amb-profile h3{font-family:'Zilla Slab',serif; font-weight:600; font-size:1.15rem; line-height:1.3; color:var(--amb-ink); margin:0 0 10px;}
.amb-profile p{font-family:'Karla',sans-serif; font-size:.9rem; color:var(--amb-sub); line-height:1.55; margin:0 0 16px;}
.amb-profile-list{list-style:none; margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--amb-gold-border); display:flex; flex-direction:column; gap:8px;}
.amb-profile-list li{display:flex; gap:10px; align-items:flex-start; font-family:'Karla',sans-serif; font-size:.86rem; color:var(--amb-ink); line-height:1.4;}
.amb-profile-list .amb-ic{width:18px; height:18px; stroke-width:2.4; color:var(--amb-gold-dark); margin-top:1px;}
/* --- Photos propres au programme ambassadeur (23/09/2026) ---
   Chemins relatifs (/img/...) et non https://travel-club.fr/img/... : les
   nouvelles images n'existent pas encore en ligne, elles doivent aussi
   s'afficher en aperçu local. */
.bg-amb-hero{background-image:url('/img/Ambassadeur_Hero.webp');}
/* Photo plus claire que l'ancienne (Santorin au couchant) : sans aide, le kicker
   doré et le texte blanc du panneau ne se lisent plus. Dégradé bleu nuit limité
   à la moitié gauche (sous le texte) — le formulaire, à droite, reste sur la
   photo nette, ce qui évite le rendu "sale" d'un voile uniforme. */
.bg-amb-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(21,26,51,.72) 0%, rgba(21,26,51,.45) 38%, rgba(21,26,51,0) 62%);
}
@media (max-width:900px){
  .bg-amb-hero::before{background:rgba(21,26,51,.45);}
}

/* Section finale sur la photo du balcon : le ciel clair en haut à gauche
   accueille le texte (bleu nuit, pas de voile sombre), la personne reste
   visible en bas à droite. */
.amb-final-cta-photo{
  text-align:left; max-width:1100px; width:calc(100% - 12vw);
  margin:40px auto 70px; padding:56px 48px; min-height:460px; border-radius:18px;
  background:linear-gradient(100deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.25) 38%, rgba(255,255,255,0) 55%), url('/img/Ambassadeur_Balcon.webp') center/cover no-repeat;
}
.amb-final-cta-photo .amb-h2{text-align:left;}
.amb-final-cta-photo .amb-final-cta-text{margin:0 0 28px; max-width:420px; color:var(--amb-navy);}
@media (max-width:700px){
  .amb-final-cta-photo{padding:36px 24px; min-height:520px; background-position:72% center;}
}

/* Très petits écrans (≤ 400px, ex. iPhone SE 1re génération) */
@media (max-width:400px){
  .amb-hide-xs{display:none;}
  .amb-compare-table{font-size:.76rem;}
  .amb-compare-table th, .amb-compare-table td{padding:9px 6px; hyphens:auto; -webkit-hyphens:auto;}
}
@media (max-width:359px){
  .amb-included-item{flex-direction:column; gap:12px;}
  .amb-compare-table{font-size:.7rem;}
  .amb-compare-table th, .amb-compare-table td{padding:8px 4px;}
  .amb-compare-table th{font-size:.66rem;}
}