/* ======================================================
   🌿 STYLE GLOBAL DU SITE - Cabinet de Psychopédagogie
   ====================================================== */

   :root {
    --primary-color: #e07b39;   /* orange chaud */
    --secondary-color: #f4a261; /* pêche doux */
    --background-color: #fff4e6; /* beige clair */
    --text-color: #2c2c2c;
  }
  
  /* ========================
     🧭 BASE & RESET
     ======================== */
  * {
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    text-align: center;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  img {
    max-width: 100%;
    display: block;
  }
  
  /* ========================
     🧩 CONTAINERS & STRUCTURE
     ======================== */
  .container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  section, .card, .specialite-illustration {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .service {
    max-width: 600px;   /* plus large */
    padding: 50px;      /* plus de place */
  }
  
  /* ========================
     🏠 HEADER / LOGO / NAV
     ======================== */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
  }
  
  .site-header .header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  /* === LOGO + TITRE === */
  .site-header .brand {
    display: flex;
    flex-direction: column;   /* logo au-dessus du texte */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    margin-bottom: 10px;
  }
  
  .site-header .logo {
    width: 450px; /* Taille du logo */
    height: auto;
    display: block;
    margin: 0 auto;
  }
  
  .site-header .brand-title {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #001B55;  /* 🔵 bleu foncé */
    margin-top: 0.3rem;
    letter-spacing: 0.5px;
}
  
  /* === NAVIGATION === */
  .main-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .nav-link {
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 14px;
    color: #0f172a99;
    border: 1px solid transparent;
    transition: 0.2s;
  }
  
  .nav-link:hover {
    background: #f1f5f9;
  }
  
  .nav-link.active {
    background: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
  }
  
  /* ========================
     🎯 SECTION HERO (TITRE)
     ======================== */
  .hero {
    background: var(--primary-color);
    text-align: center;
    padding: 2rem;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    border-radius: 20px;
    margin-top: 20px;
    width: 100%;
  }
  
  /* ========================
     💡 SERVICES / BLOCS
     ======================== */
  .services {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 2rem 0;
  }
  
  .service {
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .service:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }
  
  .service img {
    display: block;
    margin: 10px auto 0 auto;
    max-width: 120px;
  }
  
  .service h2 {
    font-size: 30px !important;   /* <-- agrandit le titre */
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--primary-color);
  }  
  
  /* ========================
     📍 SPÉCIALITÉ ILLUSTRATION
     ======================== */
  .specialite-illustration {
    margin-top: 32px;
    text-align: center;
  }
  
  .specialite-illustration img {
    display: block;
    margin: 20px auto;
    max-width: 80%;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  
  /* ========================
     ⚙️ FORM / BOUTONS
     ======================== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #0ea5e9;
    color: white;
    font-weight: 700;
    border: 1px solid #0284c7;
    box-shadow: 0 6px 16px rgba(2,132,199,.25);
    cursor: pointer;
    transition: 0.2s;
  }
  
  .btn:hover {
    filter: brightness(0.98);
  }
  
  .btn.soft {
    background: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
    box-shadow: none;
  }
  
  .btn.outline {
    background: transparent;
    color: #075985;
    border-color: #bae6fd;
  }
  
 /* === FOOTER (VERSION AVANT) === */
.site-footer {
  margin-top: 64px;
  border-top: 1px solid #e2e8f0;
  padding: 32px 0;
  background: #fff8;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  text-align: left;
}

.footer-contact p {
  margin: 0.3rem 0;
}

.footer-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.footer-bottom {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-top: 16px;
}

/* Logo footer comme avant */
.site-footer .logo {
  height: 60px;
  width: auto;
  margin-right: 10px;
  vertical-align: middle;
} 
/* === STYLE ANCIEN POUR PAGES AVIS & CONTACT === */

/* Structure générale */
.form {
  display: grid;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-weight: 600;
  color: #2c2c2c;
}

input, textarea, select {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  outline: none;
  font-size: 15px;
  background: #fff;
  width: 100%;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, textarea:focus, select:focus {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.25);
}

/* Boutons comme avant */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #0ea5e9;
  color: white;
  font-weight: 700;
  border: 1px solid #0284c7;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.25);
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.2s ease;
}

.btn:hover {
  filter: brightness(0.98);
  transform: translateY(-2px);
}

.btn.soft {
  background: #e0f2fe;
  color: #075985;
  border-color: #bae6fd;
  box-shadow: none;
}

/* Section titre */
.intro h2 {
  font-size: clamp(22px, 3vw, 34px);
  margin: 10px 0 6px;
  text-align: center;
}

/* Liste d'avis comme avant */
.reviews-list {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.review {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.review-name {
  font-weight: 700;
  font-size: 1rem;
}

.review-date {
  color: #6b7280;
  font-size: 13px;
}

.review-stars {
  color: #facc15;
  font-size: 18px;
  margin-top: 4px;
}

/* Centrer le tout dans la page */
.page-avis, .page-contact {
  max-width: 800px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
/* ======================================================
   🧩 TABLEAU DE PRÉSENTATION TEXTE + IMAGE
   ====================================================== */

   .table-layout {
    width: 100%;
    display: flex;
    gap: 40px;
    margin-top: 30px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .table-left,
  .table-right {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 500px;
  }
  
  .table-right img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    object-fit: contain;
  }
  
  .table-left h3,
  .table-left h4,
  .table-left h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
  }
  
  .table-left ul {
    text-align: left;
    padding-left: 20px !important;
  }
  
  .table-left p {
    text-align: left;
  }  

/* === Ajustement du footer pour la page Séances === */
body[data-page="seances"] .footer-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* Agrandir le logo */
body[data-page="seances"] .site-footer .logo {
  height: 120px;
  width: auto;
  margin: 0 auto;
  display: block;
}

/* Centrer les boutons */
body[data-page="seances"] .footer-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Texte sous les boutons */
body[data-page="seances"] .footer-description {
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
  color: #444;
}

/* Masquer le texte d’origine pour ne garder que le logo */
body[data-page="seances"] .brand-title,
body[data-page="seances"] .footer-grid > div:first-child p.muted {
  display: none;
}
/* === Footer personnalisé pour la page Séances === */
body[data-page="seances"] .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  text-align: left;
  gap: 24px;
}

/* Logo à gauche, un peu plus grand */
body[data-page="seances"] .footer-logo .logo {
  height: 270px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Centrer le contenu dans chaque colonne */
body[data-page="seances"] .footer-contact {
  text-align: center;
}

body[data-page="seances"] .footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* Boutons côte à côte */
body[data-page="seances"] .footer-actions .btn {
  margin: 4px;
}

/* Texte en dessous des boutons */
body[data-page="seances"] .footer-description {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: #444;
}

/* Ajustement mobile (empiler les colonnes) */
@media (max-width: 768px) {
  body[data-page="seances"] .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body[data-page="seances"] .footer-logo,
  body[data-page="seances"] .footer-contact,
  body[data-page="seances"] .footer-actions {
    text-align: center;
  }
}
/* ======================================================
   🦋 Footer global — même design sur toutes les pages
   ====================================================== */

.site-footer {
  margin-top: 64px;
  border-top: 1px solid #e2e8f0;
  padding: 32px 0;
  background: #fff8;
}

/* --- disposition en 3 colonnes --- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  text-align: left;
  gap: 24px;
}

/* --- logo à gauche --- */
.footer-logo .logo {
  height: 250px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* --- bloc contact au centre --- */
.footer-contact {
  text-align: center;
}

.footer-contact p {
  margin: 0.3rem 0;
}

/* --- boutons + texte à droite --- */
.footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.footer-buttons {
  display: flex;
  gap: 8px;
}

.footer-description {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: #444;
}

/* --- ligne du bas --- */
.footer-bottom {
  text-align: center;
  color: var(--muted, #555);
  font-size: 14px;
  margin-top: 16px;
}

/* --- responsive mobile --- */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }

  .footer-buttons {
    flex-direction: column;
  }

  .footer-contact {
    text-align: center;
  }
}
/* ======================================================
   🎨 Mise en forme des deux blocs : Déroulement + Tarifs
   ====================================================== */

.seances-flex {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* ------- Cartes générales ------- */
.bloc-left,
.bloc-right {
  background: #ffffff;
  border: 1px solid #e6dfd8;
  border-radius: 18px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
  overflow: hidden;

  padding-bottom: 40px; /* ⭐ AJOUT QUI RÈGLE LE PROBLÈME ⭐ */
}

/* Empêche les cellules de passer à la ligne */
.tarif-table th,
.tarif-table td {
  white-space: nowrap;   /* ⭐ TOUT RESTE SUR UNE LIGNE */
}

.tarif-table {
  table-layout: auto;   /* permet au tableau de s’adapter à la largeur du texte */
}

.tarif-table th,
.tarif-table td {
  white-space: nowrap !important; /* empêche le retour à la ligne */
}

.tarif-table {
  width: auto !important;
  table-layout: auto !important;
}

.tarif-table th,
.tarif-table td {
  word-break: keep-all !important;
}

.tableau-container {
  max-width: 1000px;   /* augmente la largeur de l’encart */
  width: 100%;
  margin: 0 auto;
}


/* ============================
   📌 Bloc DÉROULEMENT
   ============================ */

.bloc-left {
  padding: 24px 26px;
}

.bloc-left h3 {
  color: #e07b39;
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 12px;
}

.bloc-left p {
  line-height: 1.55;
  margin-bottom: 14px;
  font-size: 16px;
}


/* ============================
   📌 Bloc TARIFS
   ============================ */

/* ➜ Pas de padding global pour laisser le tableau occuper toute la largeur */
.bloc-right {
  padding: 0;
}

/* Titre Tarifs */
.bloc-right h3 {
  margin: 0;
  padding: 20px 24px;
  color: #e07b39;
  font-size: 22px;
  border-bottom: 1px solid #f0ece9;
  font-weight: 700;
}


/* ============================
   🧮 Tableau des TARIFS
   ============================ */

.tarif-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px;
}

/* Header orange */
.tarif-table thead th {
  background: #e07b39;
  color: #fff;
  padding: 12px;
  font-weight: 600;
  text-align: center;
}

/* Cellules */
.tarif-table tbody td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #f0ece9;
  font-weight: 600;
}

.tarif-table tbody tr:last-child td {
  border-bottom: none;
}

/* Petit texte sous le tableau */
.bloc-right p {
  padding: 18px 24px 24px;   /* ➜ PLUS D’ESPACE EN BAS */
  text-align: center;
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Bouton */
.bloc-right .btn {
  display: block;
  width: fit-content;
  margin: 0 auto 30px;        /* ➜ BOUTON PLUS BAS POUR LIBÉRER DE L’ESPACE */
}

.tarif-table {
  width: 100%;
  table-layout: fixed;   /* ⭐ STOP AU DÉBORDEMENT ⭐ */
}

.tarif-table th,
.tarif-table td {
  word-wrap: break-word;
  white-space: normal;
}

/* ============================
   🟠 SECTION DES 3 SERVICES
   ============================ */

.services {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  margin: 60px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.service {
  background: #ffffff;
  border: 1px solid #e6dfd8;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
  padding: 20px;
  width: 100%;
  max-width: 320px; /* ⭐ RESSERRE LES BLOCS POUR QU’ILS SOIENT CÔTE À CÔTÉ */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* TITRES */
.service h2 {
  color: #e07b39;
  font-size: 22px;
  margin-bottom: 12px;
}

/* TEXTES */
.service p {
  font-size: 16px;
  color: #444;
  margin-bottom: 18px;
}

/* IMAGES PLUS GRANDES */
.service img {
  width: 100% !important;        /* image s’adapte à l’encart */
  max-width: 280px !important;   /* limite propre */
  height: auto;
  object-fit: contain;           /* évite toute déformation */
  margin: 0 auto 25px;
}

/* BOUTON PAR ENCADRÉ */
.service-btn {
  background: #3d9df2;
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(61,157,242,0.3);
  transition: 0.2s ease;
  margin-top: auto;
}

.service-btn:hover {
  background: #1c82d6;
  box-shadow: 0 4px 16px rgba(61,157,242,0.45);
}

.service {
  padding: 35px !important;
}

/* VERSION MOBILE */
@media (max-width: 900px) {
  .services {
    flex-direction: column;
    gap: 20px;
  }

  .service {
    max-width: 100%;
  }

  .service img {
    width: 60%;
  }
}
/* ★★★★★ WIDGET ÉTOILES ★★★★★ */

.stars {
  display: flex;
  gap: 6px;
  font-size: 28px;
  cursor: pointer;
  color: #d1d5db;
}

.star.active,
.star.hover {
  color: #fbbf24; /* jaune doré */
}

.star {
  transition: 0.2s;
}
/* ======================================================
   📱 VERSION MOBILE — Optimisation smartphone
   ====================================================== */

@media (max-width: 768px) {

  /* ----- Header ----- */
  .site-header .logo {
    width: 220px;
  }

  .site-header .brand-title {
    font-size: 1.1rem;
  }

  .main-nav {
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px;
  }

  .nav-link {
    padding: 6px 10px;
    font-size: 13px;
  }

  /* ----- Hero ----- */
  .hero {
    font-size: 1.6rem;
    padding: 1.4rem;
  }

  /* ----- Services (3 cartes) ----- */
  .services {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 10px;
  }

  .service {
    max-width: 100%;
    padding: 18px;
  }

  .service img {
    width: 65%;
    max-width: 160px;
  }

  /* ----- Blocs texte + image (pages internes) ----- */
  .table-layout {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .table-left, 
  .table-right {
    max-width: 100%;
  }

  .table-left p, 
  .table-left ul {
    text-align: left;
  }

  /* ----- Page Séances (Déroulement + Tarifs) ----- */
  .seances-flex {
    flex-direction: column;
    gap: 30px;
  }

  .bloc-left,
  .bloc-right {
    max-width: 100%;
    width: 100%;
  }

  .tarif-table th,
  .tarif-table td {
    font-size: 14px;
    padding: 10px;
  }

  /* ----- Forms (contact + avis) ----- */
  .page-avis,
  .page-contact {
    margin: 20px auto;
    padding: 20px;
  }

  .form {
    gap: 14px;
  }

  /* ----- Footer global ----- */
  .site-footer {
    padding: 24px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
  }

  .footer-logo .logo {
    height: 170px;
  }

  .footer-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .footer-description {
    max-width: 90%;
    margin: 0 auto;
  }
}
.service-link {
  display: block;             /* pour que le lien prenne la largeur du bloc */
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.services {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  flex-wrap: wrap;      /* permet le responsive */
  max-width: 1400px;
  margin: 60px auto;
}

.service {
  background: #ffffff;
  border: 2px solid #e6dfd8;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 30px;
  width: 100%;
  max-width: 400px;       /* ⭐ ENCARDS PLUS GRANDS ⭐ */
  min-height: 480px;      /* ⭐ FORCE UNE GRANDE TAILLE ⭐ */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .25s ease, box-shadow .25s ease;
}

.service:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.service img {
  width: 90%;
  max-width: 260px;     /* taille généreuse */
  margin: 20px auto;
  display: block;
}
.service h2 {
  font-size: 26px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.service p {
  font-size: 18px;
  color: #444;
  margin-bottom: 20px;
}
.services {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  width: 100%;
  max-width: 1400px;
  margin: 60px auto;
}
.service-link {
  text-decoration: none;
  color: inherit;
  flex: 0 1 380px;   /* <- permet d'être côte à côte */
  display: block;    /* pour envelopper la carte */
}
/* ============================
   🌟 VERSION FINALE DES SERVICES
   ============================ */

.services {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  flex-wrap: nowrap;      /* ⭐ IMPORTANT : empêche qu'ils se mettent en colonne */
  width: 100%;
  max-width: 1400px;
  margin: 60px auto;
}

.service-link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 0 1 400px;        /* ⭐ fixe une largeur pour aligner proprement */
}

.service {
  background: #ffffff;
  border: 2px solid #e6dfd8;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 30px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
}

.service:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.service img {
  width: 85%;
  max-width: 260px;
  margin: 20px auto;
  display: block;
}

.service h2 {
  font-size: 26px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.service p {
  font-size: 18px;
  color: #444;
  margin-bottom: 20px;
}

/* VERSION MOBILE */
@media (max-width: 900px) {
  .services {
    flex-wrap: wrap;    /* ⭐ en mobile ils redeviennent en colonne */
    flex-direction: column;
  }

  .service-link {
    flex: 1 1 100%;
  }
}

.encart,
.content-container,
.bloc-info,
.card-container {
  max-width: 1100px !important;  /* élargit l’encart */
  width: 100%;
  margin: 0 auto;
  padding: 40px !important;       /* rend l’intérieur plus aéré */
}
/* ===========================
   🔹 Séances : Déroulement + Tarifs
   =========================== */
.seances-flex {
  display: flex;
  flex-wrap: nowrap;         /* empêche de passer à la ligne sur grand écran */
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin-top: 40px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.bloc-left,
.bloc-right {
  flex: 1 1 0;               /* prend un espace égal pour rester côte à côte */
  max-width: 600px;           /* limite largeur pour chaque bloc */
}

/* Responsive : en dessous de 900px, empile les blocs */
@media (max-width: 900px) {
  .seances-flex {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 30px;
  }

  .bloc-left,
  .bloc-right {
    max-width: 100%;
    width: 100%;
  }
}
/* Agrandir le bloc Tarifs */
.bloc-right {
  max-width: 800px;    /* largeur plus large */
  width: 100%;
}

/* Agrandir le tableau à l’intérieur */
.bloc-right .tarif-table {
  width: 100%;
  table-layout: fixed;  /* reste à l’intérieur du bloc */
}
/* Container flex des deux blocs */
.seances-flex {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;  /* empêche le retour à la ligne */
}

/* Bloc Déroulement */
.bloc-left {
  flex: 1 1 500px;   /* peut s’agrandir */
  max-width: 600px;  /* limite largeur pour que ça reste équilibré */
}

/* Bloc Tarifs */
.bloc-right {
  flex: 1 1 600px;   /* plus large que bloc-left */
  max-width: 700px;  /* largeur maximale du bloc */
}
/* Container flex des deux blocs */
.seances-flex {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;       /* empêche que ça descende */
  width: 100%;
  max-width: 1400px;       /* largeur totale possible */
  margin: 40px auto 0 auto;
}

/* Bloc Déroulement */
.bloc-left {
  flex: 1 1 500px;         /* prend de la place mais reste raisonnable */
  max-width: 600px;         /* ne dépasse pas */
  padding: 24px 26px;
  background: #ffffff;
  border: 1px solid #e6dfd8;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}

/* Bloc Tarifs */
.bloc-right {
  flex: 1 1 1000px;         /* plus large que le gauche */
  max-width: 800px;         /* limite maximale */
  padding: 0;
  background: #ffffff;
  border: 1px solid #e6dfd8;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}

/* Tableau à l’intérieur du bloc Tarifs */
.bloc-right .tarif-table {
  width: 100%;
  table-layout: fixed;     /* reste à l’intérieur du bloc */
  word-break: break-word;  /* empêche de déborder */
}
/* --- PATCH RÉDUCTION DU VIDE DANS LES CARTES (sans toucher aux images) --- */

.service,
.solution-item,
.biometric-item {
    padding-top: 0.5rem !important;
    padding-bottom: 0.8rem !important;
}

.service img,
.solution-item img,
.biometric-item img {
    margin-bottom: 0.3rem !important; /* juste un peu moins de vide sous l’image */
}
/* --- PATCH : RÉDUCTION DU VIDE SUR LES CÔTÉS DES CARTES --- */

.service,
.solution-item,
.biometric-item {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}