/* ===== Thème bleu nuit premium ===== */
:root{
  --bg:#07131a;
  --bg-hero:#0a1a22;
  --txt:#f6fbff;
  --muted:#b9c9d3;
  --primary-2:#0f8c99;
  --primary:#32b3be;
  --accent:#ffc533;
  --card:#0b1b23;
  --stroke:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --radius-lg:20px;
  --maxw:1120px;
}

.section.alt1 {background: #0b1b23;}  /* un ton plus clair */
.section.alt2 {background: #08171e;}  /* un ton plus foncé */

.section + .section {
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg-hero),var(--bg) 30%, var(--bg) 100%);
  color:var(--txt);
  line-height:1.6;
}
.container{max-width:var(--maxw);margin:0 auto;padding:24px}

/* ===== Header sombre translucide ===== */
/* MENU MOBILE */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,0.92);
  position: absolute;
  top: 70px;
  right: 0;
  width: 70%;
  padding: 20px;
  border-radius: 12px 0 0 12px;
  box-shadow: -6px 0 25px rgba(0,0,0,0.4);
  z-index: 9999;
}

.mobile-nav a {
  color: white;
  padding: 12px 0;
  font-size: 18px;
}

/* RESPONSIVE RULES */
@media (max-width: 900px) {

  .desktop-nav {
    display: none;
  }
  .desktop-cta {
    display: none;
  }

  .hamburger {
    display: block;
  }
}

.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:30;
  background:rgba(7,19,26,.70);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex;align-items:center;gap:12px}

.logo{
  height: 50px;
  width: auto;
  object-fit: contain;
  margin-right: 4px;
}


.brand-name{font-weight:800;letter-spacing:.3px;color:#eaf6fb}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;position:relative;padding:6px 0}
.nav a:hover{color:var(--txt)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease
}
.nav a:hover::after{transform:scaleX(1)}
.btn{border:none;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;transition:transform .12s ease, box-shadow .2s ease}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#042a28;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary)}

/* Overlay du popup Cal.com : fondu sombre + blur premium */
.my-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.75) !important;
}



/* ===== CTA JAUNE PREMIUM + ICÔNE ===== */
.btn-accent-icon {
  background: linear-gradient(90deg, var(--accent), #ffd86a);
  color: #2b1f00;
  border: none;
  border-radius: 999px;
  padding: 12px 22px 12px 18px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .12s ease, box-shadow .25s ease;
  box-shadow: 0 10px 25px rgba(255,197,51,0.25);
}

/* petite icône flèche → SVG intégré comme pseudo-élément */
.btn-accent-icon::after {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center;
  color: #2b1f00;
}

.btn-accent-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255,197,51,0.35);
}

.btn-accent-icon:active {
  transform: scale(0.97);
}

.cta-row {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement si besoin */
  text-align: center;
  margin-top: 32px;  
}

.btn-cta-big {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 16px 32px;
  border-radius: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(255, 200, 0, 0.25);
  transition: all 0.25s ease;
}

/* Ligne principale */
.btn-cta-big .cta-main {
  font-size: 1.15rem;
  line-height: 1.3;
}

/* Sous-ligne discrète */
.btn-cta-big .cta-sub {
  font-size: 0.85rem;
  opacity: 0.8;
  line-height: 1.3;
  margin-top: -2px;
}

/* Hover premium */
.btn-cta-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 200, 0, 0.35);
}



/* ===== HERO ===== */
.hero{position:relative;min-height:78vh;display:grid;align-items:center;background:var(--bg-hero)}
.hero-bg{position:absolute;inset:0;background-image:url('hero.jpg');background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.02)}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,125,139,.55),rgba(7,19,26,.86)),
             radial-gradient(60% 60% at 70% 20%, rgba(0,127,139,.35) 0%, transparent 60%);
}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px}
.hero-title{font-size:42px;line-height:1.18;margin:0;font-weight:900;letter-spacing:.2px;text-shadow:0 1px 0 rgba(0,0,0,.35)}

.accent {
  color: #ffd447;
  font-weight: 900;
}

.accent2 {
  color: #ffd447;
}


/* Deux panneaux dans le hero (glass effect) */
.hero-cols{
  display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch;
   margin-top: 28px;
}


@media (max-width: 960px){ .hero-cols{grid-template-columns:1fr} }
.panel{
  padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.18);
  background:rgba(10,26,34,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease, background .2s ease, transform .15s ease;
}

.panel p {
  max-width: 500px;
}

.panel-titre {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);      /* turquoise principal */
  margin-bottom: 12px;
  letter-spacing: 0.3px;
  text-transform: none;      /* tu peux mettre uppercase si besoin */
}

.panel-titre::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--primary);
  margin-top: 6px;
  border-radius: 2px;
  opacity: 0.8;
}


.panel:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.pill{display:inline-block;
  background:var(--accent);color:#2b1f00;font-weight:900;border-radius:999px;padding:0px 12px;margin-bottom:0px;
}

.panel .pill {
  margin-left: 15px;
  margin-top: 4px; 
  margin-bottom: 6px;
}


.hero-list{margin:8px 0 0 18px}

.hero-subtitle {
  text-align: center;
  margin: 8px auto 0;
  max-width: 680px;      /* optionnel mais très élégant pour éviter une ligne trop longue */
  opacity: 0.9;          /* légère finesse visuelle */
  font-size: 1.05rem;
}

/*.hero-subtitle {
  margin-top: 8px;
  font-size: 1.1rem;
  opacity: 0.85;
} */


/* ===== Sections génériques ===== */
.section{padding:48px 0}
.h2{
  margin:0 0 12px;font-size:30px;line-height:1.25;font-weight:800;letter-spacing:.2px;
  margin-bottom: 20px;
}
.h2::after{
  content:"";display:block;width:72px;height:4px;margin-top:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  box-shadow:0 4px 14px rgba(15,140,153,.15);
}
.strip-dark{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.muted{color:var(--muted)}
.center{text-align:center}
.mt{margin-top:12px}

/* ===== HBlocks (blocs horizontaux lisibles) ===== */
.hblocks{display:flex;flex-direction:column;gap:26px;margin-top:24px}
.hblock{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius-lg);
  padding:16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.hblock:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.45);border-color:rgba(15,140,153,.35)}
.hblock-tag{
  flex:0 0 auto;
  font-weight:900;letter-spacing:.3px;
  color:#042a28;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  padding:8px 12px;border-radius:999px
}
.hblock-body{color:var(--muted)}
@media (max-width: 720px){
  .hblock{flex-direction:column;gap:10px}
  .hblock-tag{align-self:flex-start}
}

/* ===== Grids & Cards ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width: 960px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}

#quoi 
.grid2 .card.list:nth-child(3) 
{
  margin-top: 14px;
}

.card{
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  background:var(--card);border:1px solid var(--stroke);
 /* border-radius:var(--radius);*/
  padding:20px;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.45);border-color:rgba(15,140,153,.35)}
.card.list ul{padding-left:18px;margin:10px 0}
.card.list li{margin:8px 0}

#quoi 
.card.list {
  padding: 26px 28px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

#quoi 
.card.list .btn {
  margin-top: 18px;
}
#quoi 
p {
  max-width: 800px;
}

#quoi .container {
  padding-bottom: 70px;
}


/* ===== Steps ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.step{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:20px;position:relative;box-shadow:var(--shadow)}
/*.step-n{position:absolute;top:12px;right:12px;background:linear-gradient(90deg,var(--primary),
var(--primary-2));color:#042a28;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-weight:900}
*/
@media (max-width: 960px){ .steps{grid-template-columns:1fr} }

.steps .step {
  padding: 24px 26px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  max-width: 300px;
}

.step-n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primary);
  color: #042a28;
  font-weight: 800;
  margin-bottom: 12px;
}


.steps {
  gap: 30px;
  margin-top: 20px;
}

#process .container {
  padding-top: 70px;
  padding-bottom: 70px;
}


/* ===== Plans ===== */
.plan{position:relative}

.plan-featured{border-color:rgba(15,140,153,.45);box-shadow:0 0 0 1px rgba(15,140,153,.45), 0 10px 30px rgba(15,140,153,.18)}

.ribbon {
  position: absolute;     /* ← corrige l’erreur "position:right" */
  top: 30px;
  right: -5px;           /* ← dépasse légèrement sur la droite */
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color: #042a28;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 10px;
  z-index: 5;             /* ← assure qu’il passe au-dessus de la card */
}


/* ===== Tableau comparatif ===== */
.table-wrap{overflow-x:auto;margin-top:10px}
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--stroke);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--stroke);text-align:left}
.table thead th{background:rgba(255,255,255,.03);font-weight:800}
.table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.table tr.emph td{font-weight:900}
.table tr.emph td:first-child{border-left:4px solid var(--primary)}

.table td.brazil-emph {
  background: rgba(255, 200, 0, 0.08); /* jaune très léger */
  font-weight: 800;
  color: var(--primary);
}


/* Section comparaison */
#comparaison .container {
  padding-top: 70px;
}

/* Sous-titre muted */
#comparaison p.muted {
  margin-bottom: 22px;
  font-size: 0.92rem;
  opacity: 0.7;
}

/* Wrapper tableau */
.table-wrap {
  margin-top: 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* Tableau */
.table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

.table th,
.table td {
  padding: 14px 18px;
  text-align: left;
}

.table thead th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 700;
}

.table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Ligne mise en avant */
.table tr.emph td {
  font-weight: 700;
  background: rgba(0, 255, 255, 0.07);
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
 border-radius: 0 0 12px 12px; /* arrondis élégants uniquement en bas */  
}

/* Highlight sous le tableau */
.highlight {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  color: var(--primary);
}

.highlight2 {
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--primary);
}

/* Note de bas de section */
#comparaison 
.note {
  margin-top: 4px;
  font-size: 0.8rem;
  opacity: 0.55;
}


/* ===== Founder ===== */
.ticks{list-style:none;padding-left:0;margin:0}
.ticks li{position:relative;padding-left:26px;margin:8px 0;color:var(--muted)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:900}
.founder-facts{}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--stroke);background:#061017}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;align-items:start}
.links{list-style:none;padding:0;margin:0}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--txt)}
.small{color:var(--muted);font-size:14px;margin-top:8px}

/* ====== Palette utilitaire Rio Fiscal ====== */

/* --- Couleurs principales --- */
.txt-accent {
  color: var(--accent);              /* jaune doré */
  font-weight: 700;
}

.txt-primary {
  color: var(--primary);             /* teal profond */
  font-weight: 700;
}

.txt-primary-light {
  color: var(--primary-2);           /* teal clair */
  font-weight: 700;
}

.txt-muted {
  color: var(--muted);
}

.txt-white {
  color: #ffffff;
}

/* --- Variantes d’emphase --- */
.txt-glow-accent {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255,197,51,0.35); /* léger halo doré */
  font-weight: 800;
}

.txt-glow-primary {
  color: var(--primary);
  text-shadow: 0 0 8px rgba(15,140,153,0.4);
  font-weight: 700;
}

.txt-error {
  color: #ff5e5e;
  font-weight: 700;
}

.txt-success {
  color: #4be28a;
  font-weight: 700;
}

/* --- Utilitaires d’accentuation --- */
.bold { font-weight: 800; }
.light { font-weight: 300; }
.italic { font-style: italic; }
.underline { text-decoration: underline; text-decoration-color: var(--primary); }

/* --- Arrière-plans ponctuels (pour mots clés / badges inline) --- */
.bg-accent {
  background: var(--accent);
  color: #2b1f00;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}

.bg-primary {
  background: var(--primary);
  color: #032a29;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}

.bg-fade {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 6px;
}

.hero-title {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: left;       /* centre verticalement si besoin */
}

/* Layout fondateur */
.founder-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 3rem;
  align-items: center;
}

@media (max-width: 900px) {
  .founder-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .founder-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .founder-meta .btn {
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
}

/* Photo */
.founder-photo-wrap {
  display: flex;
  justify-content: center;
}

.founder-photo {
  width: 100%;
  max-width: 280px;
  border-radius: 999px;
  display: block;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

/* Texte fondateur */
.founder-content p {
  margin-bottom: 0.75rem;
  max-width: 600px;
  padding-top: 0.8rem;
}

.founder-content h2 {
  margin-bottom: 1.3rem;
}

.founder-intro {
  font-weight: 600;
  margin-top: 0.5rem;
}

.founder-quote {
  font-style: italic;
  opacity: 0.9;
}

/* Carte + bouton */
.founder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.5rem;
}

.founder-facts {
  flex: 1 1 230px;
  max-width: 340px;
  border-radius: 14px;
}


.founder-meta .btn {
  align-self: flex-start;
  min-width: 210px;
  margin-top: 0.5rem;
}

.founder-meta .btn {
  margin-left: 1rem;
}

#offres .btn-primary {
  min-width: 200px;
  font-weight: 800;
}

#offres p {
  max-width: 600px;
}

.plan {
  border-radius: 18px;
  padding: 26px;
}

#offres .container {
  padding-top: 64px;
}

.section-header {
  max-width: 640px;
  margin-bottom: 2rem;
}

.section-sub {
  color: var(--muted);
}

.offers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
}

@media (max-width: 900px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}

.plan-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.plan-tagline {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.plan-list {
  margin: 0 0 1.2rem;
}

.plan-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.plan-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Lisibilité des liens sur les pages légales et pricing */
.legal-page a,
.pricing-page a {
  color: #f5c542 !important;    /* ton jaune doré */
  text-decoration: underline;
}

.legal-page a:hover,
.pricing-page a:hover {
  color: #ffd86b !important;
}

/* ========= HEADER / NAV ========= */

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(7,19,26,.70);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stroke);
}

/* Nav desktop */
.desktop-nav{
  display:flex;
  align-items:center;
  gap:24px;
}

.desktop-nav a{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* CTA desktop dans le header */
.desktop-cta{
  margin-left:16px;
}

/* Bouton burger (mobile) */
.hamburger{
  display:none;              /* caché par défaut */
  background:none;
  border:none;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

/* Menu mobile */
.mobile-nav{
  display:none;              /* CACHÉ PAR DÉFAUT */
  position:absolute;
  top:64px;
  right:16px;
  background:rgba(0,0,0,0.94);
  padding:18px 20px;
  border-radius:16px;
  width:75%;
  max-width:320px;
  box-shadow:0 18px 45px rgba(0,0,0,0.6);
  flex-direction:column;
  gap:8px;
}

.mobile-nav a{
  font-size:15px;
  padding:6px 0;
}

/* état ouvert (via JS) */
.mobile-nav.is-open{
  display:flex;
}

/* Breakpoint mobile */
@media (max-width: 900px){
  .desktop-nav{
    display:none;
  }
  .desktop-cta{
    display:none;
  }
  .hamburger{
    display:block;
  }
}