/* ----------- RESET SIMPLE ----------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    color: #3b2b2b;
    background: #f7e5d6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}
/* Section POURQUOI : cartes plus propres */

#pourquoi .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3 colonnes */
    gap: 1.5rem;
    margin-top: 2rem;
}

#pourquoi .card {
    padding: 1.6rem 1.5rem;
    border-radius: 1.1rem;
    box-shadow: 0 14px 28px rgba(0,0,0,.2);
}

#pourquoi .card h3 {
    margin-bottom: .6rem;
}

#pourquoi .card ul li {
    margin-bottom: .25rem;
}

#pourquoi .card-large {
    grid-column: auto;  /* ne plus prendre toute la ligne */
}

/* Mettre un peu plus en avant la carte Bébé */
#pourquoi .card:nth-child(3) {
    background: #f1d7c2;
    border: 1px solid rgba(240,139,139,0.4);
}
.logo-sub {
    display: none;
}

/* ----------- LAYOUT GLOBAL ----------- */

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 3.2rem 0;   /* au lieu de 3.8 ou 5 */
}

@media (max-width: 768px) {
    .section {
        padding: 2.6rem 0;
    }
}



.section-alt {
    background: #5c4848;
    color: #f9e9dd;
}

.section-alt h2,
.section-alt h3,
.section-alt h4 {
    color: #fdf5ed;
}

.section-label {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    margin-bottom: .5rem;
    opacity: .8;
}

.section-intro {
    max-width: 600px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

/* ----------- HEADER / NAV ----------- */

.header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(248, 229, 212, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e2c6b5;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    gap: 1.5rem;
}

.logo-main {
    font-size: 1.05rem;
    font-weight: 600;
}

.logo-sub {
    display: block;
    font-size: .8rem;
    opacity: .8;
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: .9rem;
}

.nav-link {
    text-decoration: none;
    color: #4a3535;
    position: relative;
    padding-block: .2rem;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.25rem;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: #f08b8b;
    transition: width .2s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-cta {
    margin-left: .8rem;
}

.nav-toggle {
    display: none;
    position: relative;
    width: 32px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    border-radius: 999px;
    background: #3b2b2b;
    transition: transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
}

.nav-toggle span:nth-child(1) { top: 5px; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { bottom: 5px; }

.nav-toggle.open span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
    bottom: 11px;
    transform: rotate(-45deg);
}

/* ----------- BUTTONS ----------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.btn-primary {
    background: #f08b8b;
    color: #3b2b2b;
    box-shadow: 0 10px 20px rgba(240, 139, 139, 0.25);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(240, 139, 139, 0.35);
}

.btn-outline {
    border-color: #f08b8b;
    color: #4a3535;
    background: transparent;
}

.btn-outline:hover {
    background: #f08b8b;
    color: #3b2b2b;
}

.btn-ghost {
    border-color: #d5c3b5;
    background: rgba(255, 255, 255, 0.4);
    color: #4a3535;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .8);
}

/* ----------- HERO (version clean) ----------- */

.hero {
    padding: 2.2rem 0 3.4rem;
    min-height: 68vh;
    display: flex;
    align-items: flex-start;
    background: #f7e5d6;   /* uniquement beige */
	padding-bottom: 1.2rem !important; /* au lieu de ~3-4rem */
    );
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr);
    gap: 1.8rem;
    align-items: center;
}

.hero-text {
    max-width: 540px;
}

.hero h1 {
    margin-top: 0.3rem;
    margin-bottom: 0.9rem;
}

/* ----- Galerie ----- */

.hero-media {
    position: relative;
}

.hero-slider {
    position: relative;
    border-radius: 1.6rem;
    overflow: hidden;
    border: 12px solid #f7e5d6;
    aspect-ratio: 16 / 9;
    min-height: 450px;                 /* grande image */
    box-shadow: 0 28px 56px rgba(0,0,0,.45);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1.01);
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(247,229,214,0.96);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* Flèches du slider héro – toujours à l’intérieur du cadre */
.hero-arrow-prev {
    left: 10px;
}

.hero-arrow-next {
    right: 10px;
}

@media (max-width: 768px) {
    .hero-arrow-prev {
        left: 8px;
    }
    .hero-arrow-next {
        right: 8px;
    }
}



/* ----- Vignettes à cheval entre beige et marron ----- */

.hero-highlights {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.4rem;
    margin-bottom: -3.2rem;   /* fait descendre le bloc dans la zone marron */
    z-index: 5;
}

.highlight-card {
    background: #5b4848;
    color: #f7e5d6;
    padding: 1rem 1.1rem;
    border-radius: 1.05rem;
    font-size: .88rem;
    box-shadow: 0 12px 28px rgba(0,0,0,.4);
}

/* rangée du bas un tout petit peu plus basse pour l'effet "escalier" */
.hero-highlights .highlight-card:nth-child(n+3) {
    transform: translateY(10px);
}

.hero-actions {
    margin-top: 1.6rem;
    display: flex;
    justify-content: center;     /* centre horizontalement */
}

.hero-main-cta {
    min-width: 260px;            /* jolie largeur */
    text-align: center;
}

/* ----------- HERO RESPONSIVE ----------- */

@media (max-width: 900px) {
    .hero {
        background: #f7e5d6;
        padding: 3.5rem 0 2.8rem;
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-media {
		max-width: 340px;           /* au lieu de ~820–900 */
		margin-left: auto;
	}

    .hero-slider {
        aspect-ratio: 16 / 10;
        min-height: 260px;
        border-width: 8px;
        box-shadow: 0 16px 32px rgba(0,0,0,.3);
    }

    .hero-highlights {
        margin-top: 1.6rem;
        margin-bottom: 0;
    }

    .hero-highlights .highlight-card:nth-child(n+3) {
        transform: none;
    }
}
	.hero-text h1 {
    font-size: 2.1rem;       /* réduit proprement */
    font-weight: 600;        
    line-height: 1.25;
    max-width: 480px;        /* évite que ça s’étale trop large */
    color: #3d2b2b;
    margin-bottom: 1.2rem;
}
	.hero-text h1 {
    animation: fadeSlide 0.8s ease-out forwards;
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 1.6rem;
        line-height: 1.3;
        max-width: 100%;
    }
}

	
/* ----- 4 VIGNETTES SOUS LA GALERIE ----- */

.hero-highlights-wrapper {
    margin-top: -3.8rem;        /* chevauchement beige/marron */
    margin-bottom: 1rem;
    position: relative;
    z-index: 5;
}

.hero-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 colonnes parfaitement alignées */
    gap: 1.2rem;
	
}

.highlight-card {
    background: #5b4848;
    color: #f7e5d6;
    padding: 1.1rem 1.2rem;
    border-radius: 1rem;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    font-size: .9rem;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 900px) {
    .hero-highlights-wrapper {
        margin-top: 0;
    }
    .hero-highlights {
        grid-template-columns: 1fr 1fr;  /* 2x2 sur mobile */
    }
}
 
/* ----------- CARDS / GRID ----------- */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.cards-grid .card-large {
    grid-column: span 2;
}

.card {
    background: rgba(249, 233, 221, .96);
    color: #3b2b2b;
    padding: 1.8rem;
    border-radius: 1.25rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.section-alt .card {
    background: #f7e0cf;
}

.card h3 {
    font-size: 1.15rem;
    margin-bottom: .8rem;
}

.card-foot {
    margin-top: 1rem;
    font-size: .9rem;
    opacity: .9;
}

.section-cta {
    margin-top: 2.8rem;
    text-align: center;
}

/* ----------- SPLIT SECTIONS ----------- */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
}

.split.reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.split-image img {
    border-radius: 1.5rem;
    box-shadow: 0 18px 36px rgba(0,0,0,.25);
    object-fit: cover;
    width: 100%;
    max-height: 420px;
}

.split-image.portrait img {
    max-height: 520px;
}

.split-text h2 {
    margin-bottom: 1rem;
}

.split-text h4 {
    margin-top: 1rem;
    margin-bottom: .3rem;
    font-size: 1rem;
}

.split-text ul {
    margin-left: 1.1rem;
    margin-bottom: .8rem;
}

/* ----------- INFO BOXES ----------- */

.infos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.info-box {
    background: rgba(247, 224, 207, .15);
    border-radius: 1.1rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(249, 233, 221, .45);
}

/* ----------- TARIFS ----------- */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.price-card {
    background: #fdf0e5;
    border-radius: 1.2rem;
    padding: 1.8rem 1.6rem;
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
    text-align: center;
}

.price-card-highlight {
    border: 2px solid #f08b8b;
}

.price-card h3 { margin-bottom: .5rem; }

.price {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.pricing-notes {
    margin-top: 1.5rem;
    font-size: .95rem;
}

/* ----------- ÉTAPES ----------- */

.steps-list {
    list-style: none;
    margin-top: 2rem;
}

.steps-list li + li { margin-top: 1.5rem; }

.steps-list h3 {
    font-size: 1.05rem;
    margin-bottom: .3rem;
}

/* ----------- TÉMOIGNAGES ----------- */

.testimonial-slider {
    margin-top: 2.5rem;
    background: #f5ded0;
    border-radius: 1.5rem;
    padding: 2rem 2.2rem;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
    position: relative;
}

.testimonial p { margin-bottom: .8rem; }

.testimonial .author { font-weight: 600; }

.testimonial .rating {
    color: #e39a2a;
    margin-bottom: .3rem;
}

.testimonial-nav {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

/* ----------- SONDAGE ----------- */

.poll-card {
    max-width: 640px;
    margin: 0 auto;
    background: rgba(249, 233, 221, .96);
    color: #3b2b2b;
    padding: 1.8rem;
    border-radius: 1.25rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}

.section-alt .poll-card {
    background: #f7e0cf;
}

.poll-options {
    display: grid;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: .95rem;
}

.poll-options label {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.poll-result {
    margin-top: 1rem;
    font-size: .9rem;
}

/* ----------- CONTACT ----------- */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: flex-start;
}

.hours-list {
    list-style: none;
    margin: .8rem 0 1.5rem;
}

.hours-list li + li { margin-top: .25rem; }

.map-wrapper h3 { margin-bottom: .3rem; }

.map-text {
    font-size: .9rem;
    opacity: .9;
    margin-bottom: .7rem;
}

.map-frame {
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.1);
    height: 260px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* ----------- FOOTER ----------- */

.footer {
    background: #3b2b2b;
    color: #f5ded0;
    padding: 1.5rem 0;
    font-size: .85rem;
}

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

.footer-small { opacity: .75; }


/* ----------- COOKIE BANNER ----------- */

.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    max-width: 640px;
    width: calc(100% - 2rem);
    background: #3b2b2b;
    color: #f7e5d6;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 50;
    font-size: .85rem;
}

.cookie-text { flex: 1; }

.cookie-actions {
    display: flex;
    gap: .5rem;
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-actions {
        align-self: stretch;
        justify-content: flex-end;
        width: 100%;
    }
}

/* ----------- ANIMATIONS DOUCES ----------- */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.soft-zoom img {
    transition: transform 0.6s ease-out;
}

.soft-zoom img:hover {
    transform: scale(1.03);
}

.parallax { will-change: transform; }

/* ----------- RESPONSIVE ----------- */

.carousel-btn.next {
    right: -20px;        /* éloigne la flèche du bord de l’image */
    transform: translateY(-50%);
}
.carousel-btn.prev {
    left: -20px;         /* idem pour la flèche gauche */
    transform: translateY(-50%);
}
/* Remonte légèrement les vignettes */
.features-row, 
.hero-highlights {
    margin-top: -1.5rem !important; /* ajuste entre -1rem et -3rem selon rendu souhaité */
}
/* ============================================================
   RESPONSIVE NAV + LAYOUT (MOBILE / TABLET)
   Version simple : menu déroulant sous le header
   ========================================================= */

/* TABLETTES + MOBILES (jusqu'à ~iPad portrait) */
@media (max-width: 900px) {

  /* Le header garde la même structure, mais on prépare le dropdown */
  .nav-container {
    position: relative;
  }

  /* Le bouton burger devient visible */
  .nav-toggle {
    display: block;
  }

  /* La nav devient un panneau déroulant sous le header */
  .nav {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    margin-top: 0.6rem;

    background: #f7e5d6;
    border-radius: 1rem;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);

    flex-direction: column;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    gap: 0.6rem;

    /* cachée par défaut */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
  }

  /* Quand JS ajoute .open sur #navMenu -> on l’affiche */
  .nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link {
    display: block;
    font-size: 0.95rem;
    padding: 0.3rem 0;
  }

  .nav-cta {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 0.4rem;
  }

  /* Layout en une colonne pour les zones principales */
  .hero {
    padding: 3rem 0 2.4rem;
    min-height: auto;
  }

  .hero-grid,
  .split,
  .split.reverse,
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* Image au-dessus du texte sur les sections split */
  .split .split-image,
  .split.reverse .split-image {
    order: -1;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-media {
    max-width: 360px;
    margin: 0 auto;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .hero-highlights {
    grid-template-columns: 1fr 1fr;
  }
}

/* PETITS TÉLÉPHONES (≤ 600px : iPhone SE, petits Samsung, etc.) */
@media (max-width: 600px) {

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .btn {
    width: 100%;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 2.4rem 0;
  }

  .section-intro {
    text-align: left;
  }

  .poll-card,
  .testimonial-slider,
  .price-card {
    padding: 1.3rem 1.2rem;
  }

  .cookie-banner {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2.5rem);
  }
}
/* ============================================================
   LAYOUT MOBILE / TABLET
   - Menu déroulant sous le header
   - Marges gauche/droite symétriques
   - Compatible iPhone / Samsung / iPad
   ============================================================ */

@media (max-width: 900px) {

  /* Marges symétriques sur tout le site */
  body {
    margin: 0;
  }

  .container {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .nav-container {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    position: relative;   /* pour accrocher le menu déroulant */
  }

  /* Le burger devient visible */
  .nav-toggle {
    display: block;
  }

  /* NAV = panneau déroulant sous le header */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: .5rem;

    background: #f7e5d6;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);

    padding: .9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;

    /* caché par défaut */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
    z-index: 50;
  }

  /* Quand le JS fait navMenu.classList.toggle('open') */
  .nav.open {
    max-height: 500px;   /* assez pour contenir tous les liens */
    opacity: 1;
    pointer-events: auto;
  }

  /* Les liens du menu en colonne */
  .nav-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }

  .nav-list a {
    font-size: .95rem;
    padding: .3rem 0;
  }

  /* Bouton RDV dans la nav : pleine largeur et bien centré */
  .nav-cta {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: .4rem;
  }

  /* Layout en une seule colonne pour les gros blocs */
  .hero {
    padding: 3rem 0 2.4rem;
    min-height: auto;
  }

  .hero-grid,
  .split,
  .split.reverse,
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* Image au-dessus du texte dans les sections split */
  .split .split-image,
  .split.reverse .split-image {
    order: -1;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-media {
    max-width: 360px;
    margin: 0 auto;   /* pour ne plus partir à droite */
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .hero-highlights {
    grid-template-columns: 1fr 1fr;
  }
}

/* Petits téléphones (iPhone SE, petits Samsung, etc.) */
@media (max-width: 600px) {

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }

  .btn {
    width: 100%;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 2.4rem 0;
  }

  .section-intro {
    text-align: left;
  }

  .poll-card,
  .testimonial-slider,
  .price-card {
    padding: 1.3rem 1.2rem;
  }

  .cookie-banner {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2.5rem);
  }
}
/* ============================================================
   RESPONSIVE MOBILE / TABLET – VERSION CLEAN
   ============================================================ */

/* Smartphones + tablettes (jusqu'à ~900px) */
@media (max-width: 900px) {

  /* Conteneurs : marges symétriques */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nav-container {
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
  }

  /* Burger visible */
  .nav-toggle {
    display: block;
  }

  /* Menu déroulant sous le header */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: .5rem;

    background: #f7e5d6;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);

    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .9rem 1.1rem;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
    z-index: 50;
  }

  .nav.open {
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-list {
    flex-direction: column;
    gap: .4rem;
  }

  .nav-list a {
    font-size: .95rem;
    padding: .3rem 0;
  }

  .nav-cta {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: .4rem;
  }

  /* Blocs principaux en 1 colonne */
  .hero {
    padding: 3rem 0 2.4rem;
    min-height: auto;
  }

  .hero-grid,
  .cards-grid,
  .split,
  .split.reverse,
  .contact-grid,
  .infos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* Image au-dessus du texte pour les sections split */
  .split .split-image,
  .split.reverse .split-image {
    order: -1;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-media {
    max-width: 360px;
    margin: 0 auto;
  }

  .hero-highlights {
    grid-template-columns: 1fr 1fr;
  }
}

/* Très petits tél. (≈ iPhone SE & co) */
@media (max-width: 600px) {

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }

  .btn {
    width: 100%;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 2.4rem 0;
  }

  .section-intro {
    text-align: left;
  }

  .poll-card,
  .testimonial-slider,
  .price-card {
    padding: 1.3rem 1.2rem;
  }

  .cookie-banner {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2.5rem);
  }
}
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}
/* =========================
   FIX SLIDER / GALERIE HERO
   ========================= */

/* Centre vraiment la galerie */
.hero-media {
    display: flex;
    justify-content: center;
}

/* Slider centré, largeur contrôlée */
.hero-slider {
    width: 100%;
    max-width: 360px;      /* largeur sur mobile */
    margin: 0 auto;
    min-height: 260px;
}

/* Sur écrans plus larges : slider plus grand */
@media (min-width: 768px) {
    .hero-slider {
        max-width: 640px;
        min-height: 360px;
    }
}

/* Flèches : toujours à l'intérieur du slider, sans débordement */
.hero-arrow {
    width: 32px;
    height: 32px;
}

/* on écrase les anciens left:-15px / right:-295px */
.hero-arrow-prev {
    left: 0.75rem !important;
}

.hero-arrow-next {
    right: 0.75rem !important;
}
/* ========== FIX SLIDER + VIGNETTES (MOBILE & DESKTOP) ========== */

/* 1) Centrer la galerie et les flèches */
.hero-media {
    max-width: 600px;
    margin: 0 auto;              /* centre la galerie dans la page */
}

/* Le slider lui-même bien centré */
.hero-slider {
    margin: 0 auto;
}

/* On remet les flèches à l'intérieur du slider, bien alignées */
.hero-arrow-prev {
    left: 8px !important;
}

.hero-arrow-next {
    right: 8px !important;
}

/* 2) Vignettes en 2x2 sur mobile + tablette (≤ 900px) */
@media (max-width: 900px) {
    .hero-highlights {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 colonnes */
        gap: 0.8rem;
        margin-top: 1rem;
    }

    .hero-highlights .highlight-card {
        transform: none;  /* enlève le petit décalage en escalier */
    }
}
/* ===================================================================
   MOBILE & TABLET (≤ 900px)
   - H1 centré
   - Vignettes en 2x2
   - Marge avant les premières vignettes
   =================================================================== */
@media (max-width: 900px) {

    /* --- CENTRER LE H1 DANS LE HERO --- */
    .hero-text h1 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- VIGNETTES EN 2x2 UNIQUEMENT SUR MOBILE/TABLETTE --- */
    .hero-highlights {
        display: grid;
        grid-template-columns: 1fr 1fr;  /* 2 colonnes */
        gap: 1rem;
        width: 100%;
        margin: 0 auto; /* bien centré */
    }

    /* --- MARCHE AU-DESSUS DES PREMIÈRES VIGNETTES --- */
    .hero-highlights-wrapper {
        margin-top: 2rem !important; /* ajuste si tu veux plus ou moins */
    }
}
/* ==========================================
   ESPACEMENT MOBILE/TABLET : SLIDER + POUR QUI
   ========================================== */

@media (max-width: 900px) {

    /* 1) Marge sous la galerie (slider) */
    .hero-media,
    .hero-slider {
        margin-bottom: 2rem !important;
    }

    /* 2) Marge au-dessus du H2 "Pour qui ?" */
    #pourquoi {
        margin-top: 2.5rem !important;
    }

    /* S'assurer que le H1 est centré uniquement sur mobile/tablette */
    .hero-text h1 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* S'assurer que les vignettes (2x2) ont de l'air */
    .hero-highlights {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.4rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Ajout d'une vraie marge au-dessus et sous les vignettes */
    .hero-highlights-wrapper {
        margin-top: 2rem !important;   /* espace AU-DESSUS des vignettes */
        margin-bottom: 2rem !important;/* espace APRÈS les vignettes */
    }
}
/* --------------------------------------------------------
   MOBILE + TABLET – Section POUR QUI ?
   Mise en page propre, lisible et respirante
--------------------------------------------------------- */
@media (max-width: 900px) {

    /* Centrer le titre + sous-titre + textes */
    #pourquoi .section-label,
    #pourquoi h2,
    #pourquoi p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ajoute de l'air au-dessus et en dessous */
    #pourquoi {
        padding-top: 2.8rem !important;
        padding-bottom: 3rem !important;
    }

    /* Espacement entre les blocs haut et les cartes */
    #pourquoi .section-intro {
        margin-bottom: 2.2rem !important;
        padding: 0 1rem;
        text-align: center;
    }

    /* Cartes : grille 1 colonne tablette, 2 colonnes mobile */
    #pourquoi .cards-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2x2 */
        gap: 1.2rem !important;
        width: 100%;
        padding: 0 0.6rem;
    }

    /* Style des cartes : plus lisibles sur mobile */
    #pourquoi .card {
        padding: 1.4rem 1rem !important;
        border-radius: 1rem;
        box-shadow: 0 10px 22px rgba(0,0,0,0.18);
        background: #6b5656;
        color: #f7e5d6;
        text-align: left;
    }

    /* Enlever toute tentative de carte large */
    #pourquoi .card-large {
        grid-column: auto !important;
    }

    /* Titres dans les cartes */
    #pourquoi .card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.6rem;
        text-align: left !important;
    }

    /* Listes : plus aérées */
    #pourquoi .card ul li {
        margin-bottom: 0.35rem;
        font-size: .92rem;
        line-height: 1.35;
    }

    /* Texte trop au bord → padding interne augmenté */
    #pourquoi .card ul {
        padding-left: 1rem !important;
    }
}

/* Petits mobiles (iPhone SE & similaires) */
@media (max-width: 480px) {

    #pourquoi .cards-grid {
        grid-template-columns: 1fr !important; /* 1 colonne */
        gap: 1.1rem !important;
    }

    #pourquoi .card {
        padding: 1.4rem 1.1rem !important;
    }
}
/* ============================================================
   SECTION "POURQUOI" – VERSION MOBILE / TABLETTE
   (mise en forme plus propre, carte du milieu beige)
   ============================================================ */

@media (max-width: 900px) {

  /* 1 seule colonne mais avec un peu d'air entre les cartes */
  #pourquoi .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
    margin-top: 2.2rem;
  }

  /* style de base des cartes sur mobile */
  #pourquoi .card {
    padding: 1.5rem 1.3rem;
    border-radius: 1.1rem;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }

  /* titres centrés dans les 3 vignettes */
  #pourquoi .card h3 {
    text-align: center;
    margin-bottom: .5rem;
  }

  /* texte un peu plus lisible */
  #pourquoi .card ul {
    margin-left: 1rem;
  }

  /* --- carte du milieu (Grossesse & post-partum) en beige --- */
  #pourquoi .card:nth-child(2) {
    background: #f7e5d6;      /* beige */
    color: #3b2b2b;           /* texte foncé lisible */
    border: 1px solid rgba(0,0,0,.06);
  }

  #pourquoi .card:nth-child(2) h3 {
    color: #3b2b2b;
  }
}
/* ================================
   POUR QUI — MOBILE & TABLET
   ================================ */
@media (max-width: 900px) {

    /* Titres centrés */
    #pourquoi .card h3 {
        text-align: center;
        width: 100%;
        margin-bottom: .6rem;
    }

    /* 1ère vignette = MARRON */
    #pourquoi .cards-grid .card:nth-child(1) {
        background: #5b4848 !important;
        color: #f7e5d6 !important;
    }

    /* 2ème vignette = BEIGE + texte NOIR */
    #pourquoi .cards-grid .card:nth-child(2) {
        background: #f1d7c2 !important;
        color: #3b2b2b !important;
        border: 1px solid rgba(0,0,0,0.1);
    }

    /* 3ème vignette = MARRON (pas beige !) */
    #pourquoi .cards-grid .card:nth-child(3) {
        background: #5b4848 !important;
        color: #f7e5d6 !important;
    }
}
/* ======================================================
   POUR QUI ? — VERSION MOBILE / TABLETTE
   ====================================================== */

@media (max-width: 900px) {

    /* Structure : empile en colonne */
    #pourquoi .cards-grid {
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        margin-top: 1.5rem;
    }

    /* Vignettes — style commun */
    #pourquoi .card {
        border-radius: 1rem;
        padding: 1.4rem 1.2rem;
        box-shadow: 0 18px 38px rgba(0,0,0,0.35); /* ombre + profonde */
        border: none !important; /* supprime toute bordure résiduelle */
    }

    /* TITRES CENTRÉS SANS TOUCHER LE HTML */
    #pourquoi .card h3 {
        text-align: center;
        width: 100%;
        margin-bottom: 0.8rem;
    }

    /* Texte dans les listes */
    #pourquoi .card ul {
        margin-left: 0.8rem;
    }

    /* -------- COULEURS SPÉCIFIQUES -------- */

    /* 1er bloc = MARRON */
    #pourquoi .card:nth-child(1) {
        background: #5b4848;
        color: #f7e5d6;
    }

    /* 2e bloc = BEIGE */
    #pourquoi .card:nth-child(2) {
        background: #f7e5d6 !important;
        color: #3b2b2b !important;
    }

    /* 3e bloc = MARRON */
    #pourquoi .card:nth-child(3) {
        background: #5b4848 !important;
        color: #f7e5d6 !important;
        border: none !important; /* retire définitivement la bordure beige */
    }
}
 /* TITRES CENTRÉS */
    #pourquoi .card h3 {
        text-align: center !important;
        width: 100% !important;
        display: block;
        margin-bottom: .8rem;
    }
/* =========================================
   GROSSESSE – VERSION MOBILE / TABLETTE
   ========================================= */
@media (max-width: 900px) {
    /* 1) On désactive le parallax pour éviter que l'image descende */
    #grossesse .parallax {
        transform: none !important;
    }

    /* 2) Mise en page plus propre du bloc grossesse */
    #grossesse .split {
        grid-template-columns: 1fr;  /* une seule colonne */
        gap: 1.4rem;
        align-items: flex-start;
    }

    #grossesse .split-image {
        margin-bottom: 0.5rem;
    }

    #grossesse .split-image img {
        display: block;
        width: 100%;
        max-height: 260px;
        object-fit: cover;
        border-radius: 1.3rem;
        box-shadow: 0 14px 30px rgba(0,0,0,0.25);
    }

    #grossesse .split-text {
        padding: 0 .2rem;
    }

    /* 3) Listes plus “propres” (sans changer le HTML) */
    #grossesse .split-text ul {
        list-style: none;
        padding-left: 0;
        margin-top: 0.6rem;
    }

    #grossesse .split-text ul li {
        position: relative;
        padding-left: 1.2rem;
        margin-bottom: 0.45rem;
        line-height: 1.6;
    }

    #grossesse .split-text ul li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0.18rem;
        font-size: 1.1rem;
        color: #f08b8b;   /* petite puce rose */
    }
}

/* Optionnel : même style de listes pour la section bébé */
@media (max-width: 900px) {
    #bebe .split-text ul {
        list-style: none;
        padding-left: 0;
        margin-top: 0.6rem;
    }

    #bebe .split-text ul li {
        position: relative;
        padding-left: 1.2rem;
        margin-bottom: 0.45rem;
        line-height: 1.6;
    }

    #bebe .split-text ul li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0.18rem;
        font-size: 1.1rem;
        color: #f08b8b;
    }
}
@media (max-width: 900px) {
    .soft-zoom img {
        transform: none !important;
        transition: none !important;
    }
}
@media (max-width: 900px) {
    #grossesse .split-image img {
        margin-top: 0;
        margin-bottom: 1.2rem; /* respirer un peu */
    }
}
@media (max-width: 900px) {

    #grossesse ul,
    #bebe ul {
        padding-left: 1.2rem; /* aligne les puces */
        margin-bottom: 1.6rem;
    }

    #grossesse ul li,
    #bebe ul li {
        margin-bottom: 0.6rem;
        line-height: 1.55;
    }

    /* Puces plus douces */
    #grossesse ul li::marker,
    #bebe ul li::marker {
        color: #c48a7d; /* petite touche pastel */
    }
}
@media (max-width: 900px) {

    #grossesse .section-cta,
    #bebe .section-cta {
        text-align: center !important;
        margin-top: 1.8rem;
    }

    #grossesse .section-cta .btn,
    #bebe .section-cta .btn {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 900px) {
    #grossesse .split-text,
    #bebe .split-text {
        margin-top: 0.5rem;
    }
}
/* ============================================
   ESPACEMENT DES BOUTONS (MOBILE + TABLETTE)
   ============================================ */
@media (max-width: 900px) {
    
    /* Boutons de prise de rendez-vous dans les sections split */
    .split .btn-primary,
    .split .hero-main-cta,
    .split .btn {
        margin-top: 1.6rem !important;   /* espace au-dessus */
        margin-bottom: 1.8rem !important; /* espace en dessous */
        display: block;
        text-align: center;
        width: 100%;                      /* bouton bien centré */
        max-width: 320px;                 /* largeur propre */
        margin-left: auto;
        margin-right: auto;
    }
}
/* Correction marge excessive sous le bouton grossesse/post-partum */
#grossesse .section-cta {
    margin-bottom: 0.8rem !important; /* réduit la marge */
}

/* Harmonisation du bouton bébé (évite qu'il colle trop en haut mais pas trop en bas) */
#bebe .section-cta {
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
}
@media (max-width: 900px) {

    #grossesse .section-cta,
    #grossesse .section-cta .btn {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #grossesse.split,
    #grossesse .split {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #grossesse.section,
    #grossesse .section {
        padding-bottom: 1rem !important;
    }
}
/* ============================================================
   TARIFS – Version moderne & alignée
   ============================================================ */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 2.5rem;
}

.price-card {
    background: #fdf0e5;
    padding: 2rem 1.6rem;
    border-radius: 1.4rem;
    text-align: center;
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    border: none !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

.price-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .8rem;
    color: #3b2b2b;
}

.price {
    font-size: 2.2rem;
    font-weight: 700;
    color: #3b2b2b;
    margin-bottom: .6rem;
}

.price-card p {
    font-size: .92rem;
    opacity: .85;
}

/* Carte mise en avant */
.price-card-highlight {
    background: #fce7df;
    box-shadow: 0 16px 36px rgba(0,0,0,.15);
    transform: scale(1.03);
    border: none !important;
}

/* ===========================
   Mobile + Tablette
   =========================== */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .price-card,
    .price-card-highlight {
        padding: 1.8rem 1.4rem;
    }

    .price {
        font-size: 2rem;
    }
}
/* Header toujours visible sur mobile / tablette */
@media (max-width: 900px) {

  /* On fixe la barre en haut de l'écran */
  .header {
    position: fixed;   /* au lieu de sticky */
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;      /* devant le contenu */
  }

  /* On laisse la même largeur que le reste du site */
  .nav-container {
    max-width: 1120px;
    margin: 0 auto;
  }

  /* On évite que le header masque le début de la page */
  body {
    padding-top: 60px;   /* ajuste à 70px si tu vois que ça touche encore */
  }
}
/* ============================================================
   COOKIE BANNER : affichage / disparition corrects
   ============================================================ */

.cookie-banner {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    transform: translateY(20px);
}

.cookie-banner.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cookie-banner.hide {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}
/* === CENTRAGE PARFAIT DU COOKIE BANNER === */
.cookie-banner {
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: flex;
    flex-direction: column;
    align-items: center;      /* centre horizontalement */
    text-align: center;

    width: calc(100% - 2rem); /* marges correctes sur mobile */
    max-width: 480px;         /* évite qu’elle devienne trop large */
}

/* Les boutons centrés sous le texte */
.cookie-actions {
    width: 100%;
    display: flex;
    justify-content: center;   /* centre les boutons */
    gap: 0.6rem;
    margin-top: 0.6rem;
}

/* Sur mobile : tout reste bien centré */
@media (max-width: 600px) {
    .cookie-banner {
        padding: 1rem 1.2rem;
    }
}
/* ====== ESPACEMENT PC AU-DESSUS DES BOUTONS (Grossesse / Bébé) ====== */

/* Version PC uniquement */
@media (min-width: 901px) {

    /* Bouton Grossesse / post-partum */
    #grossesse .btn-primary,
    #grossesse .hero-main-cta {
        margin-top: 1.8rem !important;   /* ajoute de l’air propre */
        display: inline-flex;
        justify-content: center;
    }

    /* Bouton Bébé */
    #bebe .btn-primary,
    #bebe .hero-main-cta {
        margin-top: 1.8rem !important;
        display: inline-flex;
        justify-content: center;
    }
}
/* ============================================================
   Amélioration des vignettes "Femmes / Grossesse / Bébé"
   PC uniquement (>= 1024px)
   ============================================================ */

@media (min-width: 1024px) {

  /* Grille bien espacée et alignée */
  #pourquoi .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.2rem;
    align-items: stretch;
    margin-top: 2.8rem;
  }

  /* Style de base des 3 vignettes */
  #pourquoi .card {
    background: #fbe5d3;
    border-radius: 1.8rem;
    padding: 2.1rem 2.2rem 2.3rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
    border: none;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Titre centré et un peu plus présent */
  #pourquoi .card h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
    letter-spacing: 0.02em;
  }

  /* Liste plus aérée */
  #pourquoi .card ul {
    padding-left: 1.1rem;
    margin: 0;
  }

  #pourquoi .card ul li {
    margin-bottom: 0.4rem;
  }

  /* Petit texte de pied (si présent) */
  #pourquoi .card-foot {
    margin-top: 1.2rem;
    font-size: 0.9rem;
    opacity: 0.9;
  }

  /* Mise en avant douce de la vignette centrale (grossesse) */
  #pourquoi .card:nth-child(2) {
    background: linear-gradient(145deg, #fbe5d3 0%, #f3d2be 40%, #fbe5d3 100%);
    box-shadow: 0 24px 48px rgba(0,0,0,0.22);
    transform: translateY(-6px);
  }

  /* On s’assure qu’il n’y a plus de bordure rouge/beige résiduelle */
  #pourquoi .card:nth-child(3),
  #pourquoi .card:nth-child(1) {
    border: none;
  }
}
/* Espace supplémentaire uniquement au-dessus du "POUR QUI ?" */
/* Version PC uniquement */
@media (min-width: 900px) {
    #pourqui-title {
        margin-top: 3rem !important; /* ajuste entre 2rem et 5rem selon le rendu */
        display: block; /* pour être sûr que la marge s'applique */
    }
}
/* Alignement des 3e et 4e vignettes de la ligne "Spécialisée / Ostéo / Cabinet / +500" */
/* Desktop uniquement */
@media (min-width: 901px) {
  .hero-highlights .highlight-card:nth-child(3),
  .hero-highlights .highlight-card:nth-child(4) {
      transform: translateY(1px); /* essaie -4px, -6px, -8px selon le rendu souhaité */
  }
}
.hero-actions {
    margin-top: clamp(30px, 4vw, 60px);
    margin-bottom: clamp(40px, 6vw, 80px);
}


.hero-main-cta {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1.1rem;
}

/* =========================================================
   PAGE OSTÉOPATHIE GÉNÉRIQUE (hommes & femmes)
   ========================================================= */

/* HERO générique : même base que le hero, mais un peu recentré */
.generic-hero {
    padding-top: 2.6rem;
    padding-bottom: 3rem;
}

.generic-hero .hero-grid {
    align-items: center;
}

.generic-hero .lead {
    margin-top: 0.6rem;
    font-size: 0.98rem;
}

/* Petits badges de besoins sous le texte */
.need-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

.need-tag {
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(240, 139, 139, 0.55);
    background: rgba(249, 233, 221, 0.9);
    color: #3b2b2b;
    white-space: nowrap;
}

/* Slider sur cette page : on garde ton style mais en limitant un peu la taille sur desktop */
.generic-slider {
    max-width: 520px;
    margin: 0 auto;
}

/* Responsive : hero générique sur mobile */
@media (max-width: 900px) {
    .generic-hero {
        padding-top: 3rem;
        padding-bottom: 2.4rem;
    }

    .generic-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .generic-hero .hero-text h1 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .need-tags {
        justify-content: center;
    }
}