.section-1{
    margin-top: 50px;
    background-color: rgba(245, 245, 248, 1);
}

.section-1 .title {
    margin-top: 60px; 
}

.section-1 .card .card-body{
    display: flex;
    text-align: center;
    justify-content: space-between; /* Change pour mieux répartir */
    flex-direction: column;
    height: 250px !important; /* Force la hauteur réduite */
    padding: 20px !important;
}

.section-1 .card-title {
    margin-top: 10px; /* Réduit */
    font-size: 24px; /* Plus grand que les 12px d'origine */
    font-weight: 600;
    margin-bottom: 15px;
}

.section-1 .card-text {
    margin-top: 0px; /* Supprime la marge */
    font-size: 24px; /* Plus grand (était 15px) */
    font-weight: 500; /* Moins bold que 700 */
    text-align: center;
    line-height: 1.3;
    flex-grow: 1; /* Permet au texte de prendre l'espace disponible */
    margin-bottom: 15px;
}

.section-1 .button-card {
    width: 180px; /* Légèrement plus petit que 200px */
    font-size: 14px; /* Plus grand que notre 12px précédent */
    font-weight: 600;
    margin: 0 auto;
    padding: 8px 16px;
    text-align: center; /* Centre le texte dans le bouton */
}

.tarif-1 .container .row{
    padding-left: 50px; /* Moins que 200px pour plus de largeur */
    padding-right: 50px;
}

.zoomCenter{
    transform: scale(1.04);
    transform-origin: center;
}

/* === REMPLACE LA SECTION RÉMUNÉRATION DANS TON tarifCss.css === */

.section-remuneration {
    padding: 60px 0 120px 0 !important; /* Réduit padding-top de moitié pour FAQ */
    text-align: center;
}

/* === HERO SECTION - TEXTE DESCRIPTIF === */
/* Desktop et Mobile : Semi-bold */
.section-1 .description {
    font-weight: 600 !important; /* Semi-bold au lieu de regular */
}

/* === HERO SECTION - TEXTE DESCRIPTIF MOBILE === */
@media (max-width: 600px) {
    .section-1 .description {
        font-size: 1.4rem !important; /* Encore plus gros sur mobile */
        line-height: 1.4 !important;
        max-width: 90% !important; /* Plus large sur mobile */
        margin: 0 auto !important;
        font-weight: 600 !important; /* Semi-bold confirmé */
    }
    
    /* Force le semi-bold avec plus de spécificité */
    .section-1 .text-muted.description {
        font-weight: 600 !important; /* Semi-bold avec classe Bootstrap */
    }
    
    /* Réduire l'espace header → titre sur mobile */
    .section-1 {
        margin-top: 25px !important; /* Réduit de moitié (50px → 25px) */
    }
    
    /* Réduire l'espace rémunération → FAQ sur mobile */
    .section-faq {
        margin-top: -60px !important; /* Force la réduction d'espace */
        padding-top: 60px !important; /* Compense avec padding interne */
    }
}

/* TITRE PRINCIPAL - Ajusté 20% plus petit */
.section-remuneration h2 {
    font-size: 3.6rem !important; /* 58px - Réduit de 20% */
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 60px !important; /* Réduit de 80px à 60px */
    line-height: 1.1;
}

.remuneration-columns {
    display: flex;
    justify-content: center;
    gap: 60px; /* Espace entre colonnes */
    margin-top: 30px;
    max-width: 800px; /* Largeur réduite pour colonnes plus étroites */
    margin: 0 auto; /* Centré sous le titre */
}

.remuneration-columns .col {
    flex: 1;
    text-align: left;
}

/* TEXTES DES BLOCS - Police plus grasse et légèrement plus petite sur desktop */
.remuneration-columns p.block1,
.remuneration-columns p.block2 {
    text-align: left !important; /* Justifié à gauche sur desktop */
    width: auto !important; /* Supprime les largeurs fixes */
    font-weight: 700 !important; /* Plus gras (600 → 700) */
    font-size: 1.5rem !important; /* Légèrement réduit (1.8rem → 1.5rem) */
    line-height: 1.4;
    margin-bottom: 30px !important;
}

.remuneration-columns a {
    color: #007bff;
    font-size: 1.2rem !important; /* 19px - Plus gros */
    text-decoration: none;
    display: block; /* Block pour contrôle */
    text-align: left; /* Aligné à gauche sur desktop */
}

.remuneration-columns a:hover {
    text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .section-remuneration {
        padding: 100px 30px; /* Plus d'espace */
        text-align: center;
    }
    
    .section-remuneration h2 {
        font-size: 2.8rem !important; /* 45px sur mobile - Réduit de 20% */
        margin-bottom: 60px !important;
    }
    
    .remuneration-columns {
        flex-direction: column;
        gap: 50px;
    }
    
    .remuneration-columns p.block1,
    .remuneration-columns p.block2 {
        font-size: 1.6rem !important; /* 25px sur mobile */
        text-align: center !important; /* Centré sur mobile */
    }
    
    .remuneration-columns a {
        font-size: 1.2rem !important;
        text-align: center !important; /* Centré sur mobile */
    }
    
    .remuneration-columns a {
        font-size: 1.2rem !important;
    }
}

/* RESPONSIVE TRÈS PETIT ÉCRAN */
@media (max-width: 480px) {
    .section-remuneration h2 {
        font-size: 2.4rem !important; /* 38px sur très petit écran */
        margin-bottom: 35px !important; /* Réduit encore l'espace */
    }
    
    .remuneration-columns p.block1,
    .remuneration-columns p.block2 {
        font-size: 1.4rem !important; /* 22px */
        text-align: center !important; /* Centré sur très petit écran */
        margin-bottom: 12px !important; /* Encore moins d'espace */
    }
    
    .remuneration-columns a {
        text-align: center !important; /* Centré sur très petit écran */
    }
}

/* === FAQ SECTION COMPLÈTE - STYLE CLICKUP + MASONRY === */

/* Titre FAQ inchangé */
.section-faq h2 {
    text-align: center;
    font-weight: 700;
}

/* Texte sous le titre - Correction majuscules et poids */
.section-faq p.subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    font-weight: 400 !important; /* Regular au lieu de semi-bold */
    text-transform: none !important; /* Supprime les majuscules forcées */
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
}

.section-faq p.subtitle a {
    color: #5b5bf0;
    text-decoration: none;
}

/* Container FAQ */
.section-faq .container {
    padding-left: 200px;
    padding-right: 200px;
}

/* Row devient un container Masonry */
.section-faq .row {
    display: block !important; /* Supprime flex Bootstrap */
    columns: 3 !important; /* 3 colonnes Masonry */
    column-gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Chaque div devient un item Masonry */
.section-faq .col-md-4,
.section-faq .col-6 {
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important; /* Espacement vertical uniforme */
    padding: 0 !important;
    break-inside: avoid !important; /* Évite de couper les cartes */
    page-break-inside: avoid !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

/* Blocs FAQ - Style ClickUp */
.section-faq .faq-card {
    border: 1px solid #E8EBF0; /* Gris bleuté comme ClickUp */
    border-radius: 16px; /* Plus arrondi comme ClickUp */
    padding: 24px; /* Plus de padding */
    background: white;
    transition: all 0.2s ease;
    height: auto !important; /* Hauteur dynamique */
    margin-bottom: 0 !important; /* Masonry gère l'espacement */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Ombre subtile */
}

.section-faq .faq-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Ombre plus prononcée au hover */
    border-color: #D1D6E0;
}

/* Titres des questions - Plus gros comme ClickUp */
.section-faq .faq-card h3 {
    font-size: 1.25rem !important; /* Plus gros (était 0.9rem) */
    font-weight: 600;
    margin-bottom: 16px;
    color: #1A1A1A;
    line-height: 1.3;
}

/* Réponses - Plus grosses et lisibles */
.section-faq .faq-card p {
    font-size: 1rem !important; /* Plus gros (était 0.6rem) */
    color: #4A5568;
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .section-faq .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* 1 colonne sur mobile */
    .section-faq .row {
        columns: 1 !important;
        column-gap: 0 !important;
    }
    
    .section-faq .col-md-4,
    .section-faq .col-6 {
        margin: 0 0 20px 0 !important;
    }
    
    .section-faq .faq-card {
        padding: 20px;
        margin: 0;
    }
    
    .section-faq .faq-card h3 {
        font-size: 1.1rem !important;
    }
    
    .section-faq .faq-card p {
        font-size: 0.95rem !important;
    }
}

/* =========================
   WHY FREE — styles Apple-like
   Namespace: ntk-story
   ========================= */

/* Vars */
:root{
  --ntk-blue: #397CC5;      /* bleu fond panneau */
  --ntk-blue-text: #E3F2FE; /* blanc bleuté demandé (pas 100% blanc) */
  --ntk-radius-lg: 28px;
  --ntk-shadow: 0 18px 50px rgba(17, 20, 40, .18);
}

/* Section teaser */
.ntk-story { padding: clamp(32px, 6vw, 72px) 0; }
.ntk-story-wrap{ max-width: min(1120px, 92vw); margin-inline:auto; }

.ntk-story-hero{
  margin: 0 auto;
  width: min(920px, 96%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--ntk-shadow);
  background: #000;
}
.ntk-story-hero img{
  display:block; width:100%; height:auto;
  filter: grayscale(1) contrast(1.06);
  object-fit: cover; object-position: center 35%;
}

/* Bloc bleu citation (comme Apple) */
.ntk-story-quote{
  margin: clamp(18px, 3.5vw, 26px) auto 0;
  width: min(920px, 96%);
  background: var(--ntk-blue);
  color: var(--ntk-blue-text);
  border-radius: 28px;
  padding: clamp(24px, 5vw, 44px) clamp(20px, 5vw, 44px);
  box-shadow: var(--ntk-shadow);
  text-align: left;
}
.ntk-story-title{
  margin: 0 0 clamp(18px, 2.4vw, 24px) 0;
  font-size: clamp(24px, 4.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 800;
}
.ntk-story-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  border: 0;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.ntk-story-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.ntk-story-cta:active{ transform: translateY(0); }

/* =========================
   MODAL
   ========================= */
.ntk-story-lock{ overflow: hidden; }

.ntk-story-modal[aria-hidden="true"]{ display:none; }
.ntk-story-modal[aria-hidden="false"]{ display:block; }

.ntk-story-modal{
  position: fixed; inset: 0; z-index: 9999;
}
.ntk-story-backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 15% 0%, rgba(57,124,197,.25), transparent 60%),
    rgba(6,10,25,.45);
  backdrop-filter: blur(8px); /* flou autour comme Apple */
}

/* Dialogue */
.ntk-story-dialog{
  position: relative;
  max-width: min(980px, 94vw);
  margin: 4vh auto;
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 25px 80px rgba(10,16,40,.38),
    0 10px 24px rgba(10,16,40,.20);
  outline: none;
  background: #fff; /* conteneur global */
}

/* Close (pictogramme fourni), en haut à gauche comme Apple */
.ntk-story-close{
  position: absolute;
  left: 14px; top: 14px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; background: transparent; padding: 0; z-index: 5;
}
.ntk-story-close img{ width: 48px; height: 48px; display:block; }

/* Grille interne : panneau bleu + image */
.ntk-story-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 520px;
}

/* Panneau bleu (texte en #E3F2FE) */
.ntk-dialog-blue{
  background: var(--ntk-blue);
  color: var(--ntk-blue-text);
  padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px);
  display:flex; flex-direction:column; justify-content:space-between;
}
.ntk-dialog-head{
  margin: 8px 0 16px;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ntk-dialog-body{
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
}
.ntk-dialog-body strong{ font-weight: 800; }
.ntk-dialog-body em{ font-style: italic; }

.ntk-dialog-footer{
  display:flex; align-items:center; justify-content:flex-start;
  margin-top: 24px;
}
.ntk-dialog-avatar{
  width: 64px; height: 64px; object-fit: contain; display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

/* Visuel */
.ntk-dialog-visual{
  position: relative; margin: 0; overflow:hidden; background:#000;
}
.ntk-dialog-visual img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
  object-position: center 35%; /* cadrage desktop */
  filter: grayscale(1) contrast(1.08);
}

/* Responsive */
@media (max-width: 980px){
  .ntk-story-grid{ grid-template-columns: 1fr; }
  .ntk-dialog-visual{ order: -1; height: 44vh; min-height: 260px; }
  .ntk-story-dialog{ margin: 0 auto; top: 0; bottom: 0; height: 100dvh; border-radius: 0; }
  .ntk-story-close{ left: 10px; top: 10px; }
}