/* ==========================================================================
   STYLES SPÉCIFIQUES - PAGE D'ACCUEIL (Optimisé CRO & Compact & Responsive)
   ========================================================================== */

/* --- 0. HERO PRINCIPALE REVISITÉE --- */
.hero-section {
    padding: 0 0 2.5rem;
    background: linear-gradient(to bottom, #fbf6ec 0%, #faf3e3 20%, #fbf7ef 100%);
}

.hero-stage {
    background-image: url('../img/hero-home-2026.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 860px;
    display: flex;
    align-items: stretch;
    padding: 3.5rem 0 2.75rem;
}

.hero-stage-inner {
    width: 100%;
    display: flex;
    align-items: center;
}

.hero-copy-column {
    width: 60%;
    max-width: 760px;
    padding: 1rem 0;
}

.hero-copy-shell {
    text-align: center;
    padding: 1rem 1.5rem 1rem 0;
    color: var(--color-primary-dark);
}

.hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 0 auto 1.2rem;
    color: rgba(30, 51, 32, 0.7);
}

.hero-ornament span {
    display: block;
    width: 110px;
    max-width: 22vw;
    height: 1px;
    background: rgba(30, 51, 32, 0.35);
}

.hero-ornament i {
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1;
}

.hero-ornament.subtle {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.hero-ornament.bottom {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.hero-main-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--color-primary-dark);
    margin: 0;
    text-transform: uppercase;
}

.hero-main-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.6rem, 2.6vw, 2.75rem);
    line-height: 1.15;
    color: var(--color-accent);
    max-width: 14ch;
    margin: 1.3rem auto 0;
}

.hero-supporting-text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.95rem);
    line-height: 1.32;
    color: rgba(30, 51, 32, 0.9);
    max-width: 23ch;
    margin: 0 auto;
}

.hero-divider {
    width: min(420px, 78%);
    height: 1px;
    margin: 2rem auto 1.6rem;
    background: linear-gradient(to right, transparent, rgba(30, 51, 32, 0.55), transparent);
}

.hero-secondary-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4vw, 4.5rem);
    line-height: 1.03;
    color: var(--color-primary-dark);
    margin: 0;
    text-transform: uppercase;
}

.hero-secondary-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.6rem, 2.5vw, 2.5rem);
    color: var(--color-accent);
    margin: 0.55rem 0 1.7rem;
}

.hero-intro-line {
    font-size: clamp(1.12rem, 1.55vw, 1.4rem);
    color: rgba(30, 51, 32, 0.88);
    margin: 0 0 0.8rem;
}

.hero-emphasis-block {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 2.2vw, 2.35rem);
    line-height: 1.15;
    color: var(--color-primary-dark);
    margin: 0 auto;
}

.hero-emphasis-block > div + div {
    margin-top: 0.15rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.btn-large {
    color: #F2C89B;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    background: rgba(30, 51, 32, 0.82);
    border: 1px solid rgba(242, 200, 155, 0.55);
    box-shadow: 0 12px 25px rgba(30, 51, 32, 0.15);
}

.btn-large:hover {
    background: var(--color-accent);
    color: var(--color-cream);
    border-color: var(--color-accent);
}

.hero-reassurance-note {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.25rem, 1.85vw, 1.85rem);
    color: rgba(30, 51, 32, 0.94);
    margin: 0;
}

.hero-layout {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    margin-top: -0.25rem;
}

@media (max-width: 1200px) {
    .hero-stage {
        min-height: 760px;
        background-position: 62% center;
    }

    .hero-copy-column {
        width: 62%;
    }
}

@media (max-width: 992px) {
    .hero-stage {
        min-height: auto;
        padding: 2.75rem 0 2.25rem;
        background-position: 68% center;
    }

    .hero-copy-column {
        width: 72%;
        max-width: 100%;
    }

    .hero-copy-shell {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-bottom: 2rem;
    }

    .hero-stage {
        padding: 1.75rem 0 1.5rem;
        background-position: 72% center;
    }

    .hero-copy-column {
        width: 100%;
    }

    .hero-copy-shell {
        padding: 1rem;
        border-radius: 28px;
        background: rgba(250, 243, 227, 0.80);
        backdrop-filter: blur(4px);
        box-shadow: 0 8px 24px rgba(94, 72, 42, 0.08);
    }

    .hero-main-title {
        font-size: clamp(2.0rem, 8vw, 2.9rem);
    }

    .hero-main-subtitle,
    .hero-supporting-text,
    .hero-secondary-subtitle,
    .hero-reassurance-note {
        max-width: none;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-large {
        width: 100%;
        text-align: center;
    }
}

/* --- 2. CARTES (Maintenant dans la Hero Section) --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom:2rem;
}

.flip-card {
    background-color: transparent;
    height: 340px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.flip-card-front { background-color: var(--color-cream); border: 1px solid var(--color-rule); }
.flip-card-back { background-color: var(--color-primary); color: var(--color-cream); transform: rotateY(180deg); border: 1px solid var(--color-primary-dark); }

.flip-card-back h3 { color: var(--color-cream); margin-bottom: 1rem; font-size: 1.3rem; }
.flip-card-back p { color: rgba(252, 246, 234, 0.9); font-size: 0.95rem; margin-bottom: 1.5rem; }

.icon-pain { font-size: 2.5rem; margin-bottom: 1rem; }
.flip-card-front h3 { margin-bottom: 0.8rem; font-size: 1.3rem; color: var(--color-primary-dark); }
.flip-card-front p { font-size: 0.95rem; color: var(--color-text-muted); }
.flip-hint { margin-top: auto; font-size: 0.8rem; color: var(--color-primary); font-weight: bold; }

.btn-small { padding: 0.6rem 1.2rem; font-size: 0.85rem; border-radius: 50px; }

/* Entête commune pour autres sections */
.section-header { max-width: 600px; margin: 0 auto 3rem; }
.section-header h2 { font-size: 2.2rem; margin-bottom: 1rem; color: var(--color-primary-dark); }
.section-header p { color: var(--color-text-muted); }

/* --- 3. CASSURE VÉGÉTALE & KILLER CTA --- */
.killer-cta-section {
    position: relative;
    background-color: var(--color-bg);
    background-image: var(--paper-texture);
    padding: 1rem 0 0rem;
    /* Plus de margin-top négatif ici, on va gérer le chevauchement directement sur la vague */
}

.custom-shape-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: translateY(-99%); /* La magie est ici : on remonte le SVG juste au-dessus du bord de la section blanche */
    z-index: 10; /* On s'assure que la vague passe PAR-DESSUS l'image de la hero section */
}

.custom-shape-divider-top svg {
    display: block;
    width: calc(100% + 4px);
    height: 80px; /* Hauteur augmentée pour des vagues bien plus profondes */
    transform: translateX(-2px);
}

.custom-shape-divider-top .shape-fill {
    fill: #FAF3E3; /* Parchemin : identique au fond de la section */
}

.killer-cta-content { 
    width: fit-content; /* Prend juste la largeur nécessaire */
    max-width: 1200px; /* Contraint la largeur max pour garder le texte lisible */
    margin: 0 auto; /* Centre le bloc parfaitement */
    position: relative; 
    z-index: 2; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.killer-cta-content h1 { 
    font-size: 2.2rem; 
    margin-bottom: 0.5rem; 
    color: var(--color-primary-dark); 
    line-height: 1.2;
}

.killer-cta-content h2 { 
    font-size: 1.5rem; 
    margin-bottom: 1.5rem; 
    color: var(--color-accent); /* Utilise la couleur terracotta de ta charte pour trancher */
    font-weight: 500;
}

/* Modification du conteneur pour s'élargir un peu et accueillir 2 colonnes */
.killer-cta-content { 
    width: 100%;
    max-width: 1200px; /* Plus d'espace pour le format 2 colonnes */
    margin: 0 auto; 
    position: relative; 
    z-index: 2; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- GRILLE TEXTE 2 COLONNES --- */
.killer-text-grid {
    display: flex;
    gap: 4rem; /* Grand espace aéré entre les deux colonnes sur PC */
    margin: 2.5rem 0 1rem; /* Marges avant le bouton */
    text-align: left; /* Aligné à gauche pour faire très "éditorial/magazine" */
    align-items: center; /* Centre verticalement si une colonne est plus longue */
}

.killer-col {
    flex: 1; /* Les deux colonnes ont exactement la même largeur */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espace entre les paragraphes d'une même colonne */
}

.killer-mission {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    line-height: 1.6;
    margin: 0;
}

.killer-mission strong {
    color: var(--color-accent);
    font-weight: 700;
}

.killer-empathy {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

.killer-urgency {
    font-size: 1.15rem;
    color: var(--color-text-dark);
    line-height: 1.6;
    margin: 0;
}

.killer-urgency strong {
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* ==========================================================================
   DESIGN DES BULLES - SECTION KILLER CTA
   ========================================================================== */

.killer-text-grid {
    position: relative;
}

.killer-text-grid .killer-col {
    position: relative;
    padding: 2.5rem 3rem; 
    border-radius: 40px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- BULLE 1 (Gauche) : Terracotta, Droite, avec flèche pointue extra-longue --- */
.killer-text-grid .killer-col:nth-of-type(1) {
    background-color: #F7E9DA;
    border: 1px solid #DFB597;
    transform: none; /* Inclinaison supprimée, c'est droit ! */
    border-radius: 40px 40px 15px 40px; 
    z-index: 2; 
}

/* 1. La bordure de la flèche (Triangle extérieur) */
.killer-text-grid .killer-col:nth-of-type(1)::before {
    content: '';
    position: absolute;
    bottom: -90px; /* Beaucoup plus long (90px de pointe) */
    left: 80px; /* On l'ancre côté droit */
    
    /* Le rapport 40px à gauche / 5px à droite crée une forte inclinaison vers la droite */
    border-top: 90px solid #DFB597;
    border-left: 40px solid transparent; 
    border-right: 5px solid transparent; 
    z-index: 3;
}

/* 2. Le remplissage de la flèche (Triangle intérieur) */
.killer-text-grid .killer-col:nth-of-type(1)::after {
    content: '';
    position: absolute;
    bottom: -88px; /* On remonte de 2px pour garder la bordure à la pointe */
    left: 81px; /* On décale de 1px pour la bordure droite */
    
    /* Mathématiquement ajusté pour s'emboîter en laissant 1px de bordure partout */
    border-top: 89px solid #F7E9DA;
    border-left: 39px solid transparent;
    border-right: 4px solid transparent;
    z-index: 4; 
}

.killer-text-grid .killer-col:nth-of-type(1) strong {
    color: var(--color-accent);
}

/* --- BULLE 2 (Droite) : Sage Vert, Droite, Formelle, Sans flèche --- */
.killer-text-grid .killer-col:nth-of-type(2) {
    background-color: #EAEFDF;
    border: 1px solid #C3CFA6;
    transform: none; /* Toujours bien droite */
    border-radius: 40px 40px 40px 15px; 
}

/* --- AJUSTEMENTS RESPONSIVE SMARTPHONE --- */
@media (max-width: 768px) {
    .killer-text-grid .killer-col {
        padding: 2rem;
        border-radius: 20px !important;
    }
    
    .killer-text-grid .killer-col:nth-of-type(1)::before {
        bottom: -50px;
        right: 40px;
        border-top-width: 50px;
        border-left-width: 25px;
        border-right-width: 5px;
    }
    .killer-text-grid .killer-col:nth-of-type(1)::after {
        bottom: -48px;
        right: 41px;
        border-top-width: 49px;
        border-left-width: 24px;
        border-right-width: 4px;
    }
}

/* --- RESPONSIVE : PASSAGE EN VERTICAL SUR MOBILE --- */
@media (max-width: 768px) {
    .killer-text-grid {
        flex-direction: column; /* Empile les colonnes l'une sur l'autre */
        gap: 2rem; /* Réduit un peu l'espacement */
        text-align: center; /* Repasse centré sur petit écran pour plus d'harmonie */
    }
}

/* --- 4. PROFIL THÉRAPEUTE --- */
.bg-soft { background-color: var(--color-bg-soft); }
.profile-section { padding: 4.5rem 0; }
.profile-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; }
.profile-img { width: 100%; border-radius: 10px; box-shadow: -15px 15px 0 var(--color-accent); }
.profile-content h2 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.profile-content p { padding-bottom:0.5rem;}
.lead-text { font-size: 1.2rem; color: var(--color-primary); font-weight: 600; margin-bottom: 1.5rem; }
.check-list { list-style: none; margin: 1.5rem 0; }
.check-list li { position: relative; padding-left: 1.8rem; margin-bottom: 0.8rem; font-weight: 600; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-primary); font-weight: bold; }
.link-arrow { font-weight: 700; font-size: 1.1rem; }
.link-arrow:hover { padding-left: 10px; }

/* --- 5. TÉMOIGNAGES --- */
.testimonials-section { padding: 5rem 0; background-color: var(--color-bg-soft); background-image: var(--paper-texture); }

.testimonials-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.google-badge { text-align: left; }
.stars { color: #C9922B; font-size: 1.8rem; letter-spacing: 2px; margin-bottom: 0.2rem; }

.testimonials-slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 2rem;
    scrollbar-width: none;
    align-items: stretch;
}
.testimonials-slider::-webkit-scrollbar { display: none; }

.testimonial-card {
    flex: 0 0 320px;
    scroll-snap-align: center;
    background: var(--color-cream);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--color-rule);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.quote { font-style: italic; font-size: 1.05rem; margin-bottom: 1.5rem; color: var(--color-text-dark); line-height: 1.6; }
.author { font-weight: 700; color: var(--color-primary-dark); margin-top: auto; }

/* --- 6. AGENDA & ATELIERS --- */
.agenda-section { padding: 4.5rem 0; }
.agenda-grid { display: flex; flex-direction: column; gap: 1.5rem; max-width: 800px; margin: 0 auto; }
.agenda-card { display: flex; background: var(--color-cream); border: 1px solid var(--color-rule); border-radius: 12px; box-shadow: 0 4px 15px rgba(94, 72, 42, 0.06); overflow: hidden; transition: transform 0.3s ease; }
.agenda-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
.agenda-date { background: var(--color-primary); color: var(--color-cream); padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 120px; }
.agenda-date .day { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.agenda-date .month { font-size: 1rem; text-transform: uppercase; font-weight: 600; }
.agenda-content { padding: 1.5rem 2rem; flex: 1; }
.agenda-content h3 { font-size: 1.2rem; margin: 0.5rem 0; color: var(--color-primary-dark); }
.agenda-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 0.3rem 0.8rem; background: rgba(46, 74, 43, 0.10); color: var(--color-primary); border-radius: 4px; }
.tag-visio { background: rgba(181, 97, 60, 0.15); color: var(--color-accent-dark); }

/* --- 7. BLOG PREVIEW --- */
.blog-preview-section { padding: 4.5rem 0; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }
.blog-card { background: var(--color-cream); border: 1px solid var(--color-rule); border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(94, 72, 42, 0.07); }
.blog-img { height: 200px; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.blog-card:hover .blog-img { transform: scale(1.05); }
.blog-card-content { padding: 1.8rem; position: relative; background: var(--color-cream); }
.blog-category { font-size: 0.8rem; color: var(--color-accent); font-weight: 700; text-transform: uppercase; }
.blog-card-content h3 { font-size: 1.2rem; margin: 0.8rem 0; }
.read-more { font-weight: 700; color: var(--color-primary); text-transform: uppercase; font-size: 0.85rem; }

/* --- 8. FINAL CTA --- */
.final-cta-section { padding: 5rem 0; background-color: var(--color-primary-dark); color: var(--color-cream); }
.final-cta-section h2 { color: var(--color-cream); margin-bottom: 1rem; }
.final-cta-section p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }
.final-cta-section .btn-primary { background: var(--color-cream); color: var(--color-primary-dark); }
.final-cta-section .btn-primary:hover { background: var(--color-accent); color: var(--color-cream); }

/* ==========================================================================
   MISE À JOUR GLOBALE RESPONSIVE (Mobiles & Tablettes)
   ========================================================================== */
@media (max-width: 768px) {
    /* Ajustements généraux des espacements */
    .hero-section { padding: 3rem 0; }
    .killer-cta-section, .profile-section, .testimonials-section, .agenda-section, .blog-preview-section, .final-cta-section { padding: 3.5rem 0; }
    
    /* Titres réduits */
    .section-header h2, .profile-content h2, .killer-cta-content h2 { font-size: 1.8rem; }
    
    /* Bandeau d'intro */
    .intro-branding-test { padding: 2rem 1rem 1.5rem; }
    .intro-main-title-test { font-size: 1.8rem; margin-bottom: 2rem; }
    .intro-main-title-test .text-highlight-test { font-size: 1.8rem; padding: 0 10px; }

    /* Hero Text Box - Responsive */
    .hero-text-box {
        padding: 1.5rem;
        border-radius: 20px;
        width: 100%;
    }
    .text-line-1 { font-size: 1.1rem; }
    .text-line-2 { font-size: 1.5rem; }
    
    /* Boutons en colonne et 100% de largeur */
    .hero-actions { flex-direction: column; width: 100%; }
    .btn-large, .btn-outline-light { width: 100%; text-align: center; }
    
    /* Cards (les 4 retournables) empilées */
    .cards-grid { grid-template-columns: 1fr; gap: 1.5rem; }

    /* L'image de fond redevient fixe sur mobile pour éviter les bugs iOS */
    .hero-section { background-attachment: scroll; }

    /* Section Profil */
    .profile-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .check-list li { text-align: left; } /* Garder la liste lisible à gauche */

    /* Témoignages */
    .testimonials-header { flex-direction: column; text-align: center; justify-content: center; }
    .testimonial-card { flex: 0 0 85vw; } /* Carte prend 85% de l'écran pour swipe */

    /* Agenda */
    .agenda-card { flex-direction: column; }
    .agenda-date { min-height: 80px; padding: 1rem; flex-direction: row; gap: 1rem; }
    .agenda-content { text-align: center; }
}
/* ==========================================================================
   --- 4 BIS. BLOC ACCOMPAGNEMENTS : « LA CARTE DES SOINS »
   Reprise fidèle du flyer : parchemin, filets terracotta, mise en page
   en trois colonnes façon carte de restaurant.
   ========================================================================== */
.carte-section {
    padding: 5rem 0;
    background-color: var(--color-bg-soft);
    background-image: var(--paper-texture);
    position: relative;
}

/* Le « papier » de la carte : le vrai papier du flyer sert de fond.
   L'image fait 1536 x 1024 et comporte trois volets séparés par deux plis
   (à 33,0 % et 66,9 %) qui tombent sur les séparateurs des trois colonnes. */
.carte-paper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 2.5rem;
    background-color: var(--color-cream);
    background-image: url('../img/carte-soin2.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--color-rule);
    border-radius: 6px;
    box-shadow: 0 18px 45px rgba(94, 72, 42, 0.14);
    position: relative;
}

/* Double filet intérieur, comme sur une vraie carte de restaurant */
.carte-paper::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid var(--color-rule);
    border-radius: 3px;
    pointer-events: none;
}

/* --- En-tête de la carte --- */
.carte-header {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.carte-eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.6rem;
}

.carte-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    line-height: 1.1;
    margin-bottom: 0.8rem;
}

/* Le petit filet terracotta sous les titres, signature du flyer */
.carte-rule {
    display: block;
    width: 120px;
    height: 2px;
    margin: 0.5rem auto 0;
    background: var(--color-accent);
    border: 0;
}

.carte-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--color-accent-dark);
    margin-top: 1rem;
}

/* --- La grille en 3 colonnes --- */
.carte-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
}

/* Les séparateurs verticaux entre colonnes, comme les plis du flyer */
.carte-col {
    padding: 0 1.25rem;
    border-left: 1px solid var(--color-rule);
    display: flex;
    flex-direction: column;
}

.carte-col:first-child { border-left: 0; }

.carte-col-head {
    text-align: center;
    margin-bottom: 2rem;
}

.carte-col-head h3 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    line-height: 1.3;
}

.carte-col-sub {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 0.5rem;
}

/* Colonne de droite : « Les spécialités de la maison » + « Pépites créatives » */
.carte-col-sub + .carte-col-sub { margin-top: 0.25rem; }

.carte-col-intro {
    text-align: center;
    font-size: 0.98rem;
    color: var(--color-text-dark);
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-accent);
}

/* --- Une prestation de la carte --- */
.carte-item {
    text-align: center;
    padding: 1.75rem 0;
    border-top: 1px solid var(--color-accent);
    /* Le filet ne fait plus que 50% de la largeur, centre. La declaration
       border-top ci-dessus n'est pas touchee : les regles qui la mettent a 0
       sur le premier item de chaque colonne continuent de fonctionner. */
    border-image: linear-gradient(to right, transparent 25%, var(--color-accent) 25%, var(--color-accent) 75%, transparent 75%) 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carte-col-intro + .carte-item { border-top: 0; padding-top: 0; }
.carte-col-head + .carte-item { border-top: 0; padding-top: 0; }

/* --- TITRE DU PLAT ---
   Une seule police pour les trois colonnes : celle de la colonne centrale
   (Lora italique). Les capitales qui titraient la colonne de droite ont
   été supprimées au profit de ce style unique. */
.item-name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 1000;
    font-style: italic;
    color: var(--color-primary-dark);
    line-height: 1.25;
}

/* --- SOUS-TITRE DU PLAT ---
   Un seul style pour les trois colonnes : une seule couleur terracotta
   (--color-accent) et les petites capitales espacées de la colonne 1.
   Remplace les deux anciens styles, qui différaient de couleur et de
   graisse d'une colonne à l'autre. */
.item-subtitle {
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 0.6rem;
}

.item-desc {
    font-size: 0.97rem;
    color: var(--color-text-dark);
    margin-top: 1rem;
    max-width: 38ch;
	text-shadow: 0 0 33px #e9dbc1, 0 0 22px #e9dbc1, 0 0 11px #e9dbc1, 0 0 6px #e9dbc1, 0 0 3px #e9dbc1;
}

/* Deux descriptions qui se suivent (« Pour ? » puis « Bienfaits : ») */
.item-desc + .item-desc { margin-top: 0.6rem; }

/* Amorce des lignes « Pour ? » et « Bienfaits : » */
.item-label {
    font-weight: 700;
    color: var(--color-primary);
}

.item-list {
    list-style: none;
    margin-top: 1rem;
    font-size: 0.97rem;
    color: var(--color-text-dark);
}

.item-list li { margin-bottom: 0.35rem; }
.item-list li::before { content: '• '; color: var(--color-accent); }

/* Le bouton vers la page dédiée de chaque accompagnement */
.carte-btn {
    display: inline-block;
    margin-top: 1.2rem;
    padding: 0.55rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-accent);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.carte-btn:hover,
.carte-btn:focus-visible {
    background: var(--color-accent);
    color: var(--color-cream);
    transform: translateY(-2px);
}

/* --- Le cartouche ovale « corps, âme et esprit » du flyer --- */
.carte-note {
    margin: 2.5rem auto 0;
    max-width: 520px;
    padding: 1.5rem 2.5rem;
    text-align: center;
    background: #E4EDE7;
    border: 1px solid #C3D3C7;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-primary-dark);
    position: relative;
    z-index: 1;
}

.carte-footnote {
    margin-top: 2.25rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
}

/* --- RESPONSIVE DU BLOC CARTE --- */
@media (max-width: 1100px) {
    .carte-paper { padding: 3rem 1.75rem; }
    .carte-col { padding: 0 1.4rem; }
    .carte-title { font-size: 2.4rem; }
    .item-name { font-size: 1.5rem; }
}

@media (max-width: 900px) {
    /* Deux colonnes : la 3e passe en pleine largeur sous les deux autres */
    .carte-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
    .carte-col { border-left: 0; padding: 0 1.25rem; }
    .carte-col + .carte-col { border-left: 1px solid var(--color-rule); }
    .carte-col:nth-child(3) {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--color-rule);
        padding-top: 2.5rem;
    }
}

@media (max-width: 768px) {
    .carte-section { padding: 3.5rem 0; }
    .carte-paper { padding: 2.25rem 1.25rem; border-radius: 4px; }
    .carte-paper::before { inset: 8px; }

    .carte-grid { grid-template-columns: 1fr; row-gap: 0; }
    .carte-col,
    .carte-col + .carte-col,
    .carte-col:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-rule);
        padding: 2.25rem 0 0;
    }
    .carte-col:first-child { border-top: 0; padding-top: 0; }

    .carte-title { font-size: 2rem; }
    .carte-subtitle { font-size: 1.05rem; }
    .item-name { font-size: 1.35rem; }
    .item-desc, .item-list { font-size: 0.95rem; }

    /* L'ovale devient une pastille arrondie, plus lisible sur mobile */
    .carte-note {
        border-radius: 24px;
        padding: 1.25rem 1.5rem;
        max-width: 100%;
    }

    /* Bouton pleine largeur pour le confort tactile */
    .carte-btn { width: 100%; max-width: 320px; padding: 0.8rem 1.2rem; }
}

@media (max-width: 480px) {
    .carte-paper { padding: 1.75rem 1rem; }
    .carte-title { font-size: 1.65rem; letter-spacing: 0.04em; }
    .carte-eyebrow { letter-spacing: 0.18em; font-size: 0.72rem; }
    .carte-col-head h3 { font-size: 1.05rem; }
    .item-desc { max-width: 100%; }
}

/* ==========================================================================
   AJOUTS RESPONSIVE - PAGE D'ACCUEIL
   (compléments aux media queries existantes, rien n'est retiré)
   ========================================================================== */

/* 1. TABLETTES PAYSAGE (769px -> 992px)
   Tranche fermée : sans borne basse, ces règles écraseraient le bloc 768px existant. */
@media (min-width: 769px) and (max-width: 992px) {
    .intro-main-title-test { font-size: 2rem; }
    .intro-main-title-test .text-highlight-test { font-size: 2rem; }

    .hero-text-box { padding: 2rem; }
    .text-line-2 { font-size: 2.2rem; }

    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .flip-card { height: 320px; }

    .killer-text-grid { gap: 2rem; }
    .killer-cta-content h1 { font-size: 1.9rem; }

    .profile-grid { gap: 2rem; }
    .profile-img { box-shadow: -10px 10px 0 var(--color-accent); }

    .blog-grid { gap: 1.5rem; }
}

/* 2. SMARTPHONES (max 768px) - compléments */
@media (max-width: 768px) {
    /* Sur mobile le survol n'existe pas : les cartes se retournent au toucher */
    .flip-card { height: auto; perspective: none; }
    .flip-card-inner { transform: none !important; transform-style: flat; height: auto; }
    .flip-card-front, .flip-card-back {
        position: relative;
        backface-visibility: visible;
        transform: none !important;
        height: auto;
    }
    .flip-card-front { border-radius: 12px 12px 0 0; }
    .flip-card-back { border-radius: 0 0 12px 12px; padding-top: 1.5rem; }
    .flip-hint { display: none; }

    .profile-img { box-shadow: -8px 8px 0 var(--color-accent); }
    .link-arrow { display: inline-block; }

    .final-cta-section p { font-size: 1rem; }
    .final-cta-section .btn-large { width: 100%; }
}

/* 3. PETITS SMARTPHONES (max 480px) */
@media (max-width: 480px) {
    .intro-main-title-test { font-size: 1.5rem; line-height: 1.4; }
    .intro-main-title-test .text-highlight-test { font-size: 1.5rem; }

    .hero-text-box { padding: 1.25rem 1rem; }
    .text-line-1 { font-size: 1rem; }
    .text-line-2 { font-size: 1.3rem; }
    .text-line-2 div { font-size: 1.4rem !important; }

    .killer-cta-content h1 { font-size: 1.5rem; }
    .killer-cta-content h2 { font-size: 1.15rem; }
    .killer-mission, .killer-empathy, .killer-urgency { font-size: 1rem; }

    .section-header h2, .profile-content h2 { font-size: 1.5rem; }
    .lead-text { font-size: 1.05rem; }

    .testimonial-card { flex: 0 0 88vw; padding: 1.5rem; }
    .stars { font-size: 1.4rem; }

    .agenda-date .day { font-size: 1.8rem; }
    .blog-img { height: 160px; }
    .blog-card-content { padding: 1.25rem; }
}

/* ==========================================================================
   COMPLÉMENTS RESPONSIVE — PASSE 2 (page d'accueil)
   Ajouts uniquement, placés en fin de fichier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. APPAREILS TACTILES, QUELLE QUE SOIT LA LARGEUR
   Les cartes « problème / solution » se retournaient au survol : sur une
   tablette tactile de 900px, le verso restait donc inaccessible. On les
   déplie en recto-verso empilé dès qu'il n'y a pas de survol possible.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .flip-card { height: auto; perspective: none; }

    .flip-card-inner {
        transform: none !important;
        transform-style: flat;
        height: auto;
    }

    .flip-card-front,
    .flip-card-back {
        position: relative;
        backface-visibility: visible;
        transform: none !important;
        height: auto;
    }

    .flip-card-front { border-radius: 12px 12px 0 0; }
    .flip-card-back { border-radius: 0 0 12px 12px; padding-top: 1.5rem; }
    .flip-hint { display: none; }

    /* Le fond fixe saccade au défilement tactile */
    .hero-section { background-attachment: scroll; }

    /* Zones de contact confortables sur les liens de contenu */
    .link-arrow,
    .read-more {
        display: inline-block;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .link-arrow:hover { padding-left: 0; }

    /* Indique qu'il y a d'autres témoignages à faire défiler */
    .testimonials-slider { scroll-padding-left: 1rem; }
}

/* --------------------------------------------------------------------------
   B. TABLETTES EN PAYSAGE / PETITS PORTABLES (901 -> 1100px)
   La carte reste sur trois colonnes, mais les titres en capitales
   ("CONSTELLATIONS SYMBOLIQUES...") imposaient leur largeur minimale et
   déséquilibraient la grille. minmax(0, 1fr) rend les colonnes égales.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1100px) {
    .carte-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .carte-col { padding: 0 1.1rem; }
    .carte-col-head h3 { font-size: 1.08rem; }
    .carte-col-sub { font-size: 0.78rem; letter-spacing: 0.1em; }
    .item-name { font-size: 1.35rem; }
    .item-desc, .item-list { font-size: 0.92rem; }
    .carte-note { max-width: 460px; font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   C. TABLETTES EN PORTRAIT (769 -> 992px) — compléments
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 992px) {
    .hero-section { padding-bottom: 3rem; }
    .hero-layout { gap: 3rem; }

    .custom-shape-divider-top svg { height: 55px; }

    .killer-cta-content h2 { font-size: 1.3rem; }
    .killer-text-grid .killer-col { padding: 2rem; }

    .profile-section,
    .testimonials-section,
    .agenda-section,
    .blog-preview-section { padding: 4rem 0; }

    .profile-grid { grid-template-columns: 1fr 1.1fr; }
    .profile-content h2 { font-size: 1.9rem; }

    .testimonial-card { flex: 0 0 300px; }
    .agenda-content { padding: 1.25rem 1.5rem; }
    .blog-img { height: 175px; }
    .final-cta-section { padding: 4rem 0; }
}

/* --------------------------------------------------------------------------
   D. GRANDS TÉLÉPHONES ET PETITES TABLETTES (521 -> 768px)
   Une seule colonne de cartes était beaucoup trop large à 700px :
   on repasse à deux colonnes sur cette tranche.
   -------------------------------------------------------------------------- */
@media (min-width: 521px) and (max-width: 768px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-actions { flex-direction: row; }
    .btn-large, .btn-outline-light { width: auto; }
    .agenda-card { flex-direction: row; }
    .agenda-content { text-align: left; }
}

/* --------------------------------------------------------------------------
   E. TÉLÉPHONES (≤ 768px) — compléments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* La vague de séparation faisait 80px de haut, soit un quart d'écran */
    .custom-shape-divider-top svg { height: 40px; }

    /* La flèche de la bulle terracotta recevait à la fois left et right :
       on neutralise l'ancrage horizontal hérité du grand écran. */
    .killer-text-grid .killer-col:nth-of-type(1)::before,
    .killer-text-grid .killer-col:nth-of-type(1)::after { left: auto; }

    /* Les cartes témoignages ne collent plus au bord de l'écran */
    .testimonials-slider { padding-left: 0.25rem; padding-right: 0.25rem; }

    .section-header { margin-bottom: 2rem; }
    .agenda-grid { gap: 1rem; }
    .blog-grid { gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   F. TRÈS PETITS ÉCRANS (≤ 340px)
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
    .intro-main-title-test { font-size: 1.3rem; }
    .intro-main-title-test .text-highlight-test { font-size: 1.3rem; padding: 0 6px; }

    .hero-text-box { padding: 1rem 0.75rem; border-radius: 16px; }
    .text-line-1 { font-size: 0.92rem; }
    .text-line-2 { font-size: 1.15rem; }
    .text-line-2 div { font-size: 1.2rem !important; }

    .custom-shape-divider-top svg { height: 28px; }

    .flip-card-front, .flip-card-back { padding: 1.5rem 1rem; }
    .flip-card-front h3, .flip-card-back h3 { font-size: 1.1rem; }

    .killer-text-grid .killer-col { padding: 1.5rem 1rem; }
    .testimonial-card { flex: 0 0 90vw; padding: 1.25rem; }
    .agenda-date .day { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   G. TÉLÉPHONES EN PAYSAGE (hauteur d'écran réduite)
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
    .intro-branding-test { padding: 0.75rem 1rem 0.5rem; margin-bottom: 0.5rem; }
    .intro-main-title-test { font-size: 1.4rem; line-height: 1.35; margin-bottom: 1rem; }
    .intro-main-title-test .text-highlight-test { font-size: 1.4rem; }

    .hero-section { padding-bottom: 2rem; background-attachment: scroll; }
    .hero-layout { gap: 2rem; }
    .hero-text-box { padding: 1.25rem 1.5rem; }
    .text-line-2 { font-size: 1.5rem; }
    .hero-actions { flex-direction: row; margin-top: 1rem; }
    .btn-large { width: auto; font-size: 0.95rem; padding: 0.7rem 1.25rem; }

    .cards-grid { grid-template-columns: repeat(2, 1fr); }

    .killer-cta-section,
    .profile-section,
    .testimonials-section,
    .agenda-section,
    .blog-preview-section,
    .final-cta-section,
    .carte-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* --------------------------------------------------------------------------
   H. TRÈS GRANDS ÉCRANS (≥ 1800px)
   -------------------------------------------------------------------------- */
@media (min-width: 1800px) {
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
    .carte-paper { max-width: 1480px; padding: 4rem 3.5rem; }
    .carte-col { padding: 0 3rem; }
    .agenda-grid { max-width: 900px; }
}

/* ==========================================================================
   FOND DU PAPIER SELON LE NOMBRE DE COLONNES
   L'image du flyer est en paysage et comporte trois volets. Quand la carte
   n'affiche plus trois colonnes, on ne montre plus qu'une partie de l'image
   (en l'élargissant) pour qu'aucun pli ne tombe au milieu d'un texte.
   ========================================================================== */

/* Sous trois colonnes, le bloc devient beaucoup plus haut que large : étirer
   une image en paysage sur cette hauteur la transformait en traînées
   verticales, plis compris. On repasse donc en « cover » : l'image garde ses
   proportions et on n'en montre qu'une bande centrale, sans pli ni déformation. */
@media (max-width: 900px) {
    .carte-paper {
        background-size: cover;
        background-position: 50% 22%;
    }
}

/* ==========================================================================
   ██  MODE FLYER — BLOC DE SURCHARGE  ██
   --------------------------------------------------------------------------
   S'active uniquement quand $flyerMode = true dans pages/home.php
   (la section reçoit alors la classe .carte-flyer).

   Ce bloc ne fait qu'UNE chose : caler la planche et les jonctions de
   colonnes sur les volets de img/carte-soin.png. Il ne touche à aucune
   taille de texte ni à aucun espacement du site.

   Repères mesurés sur l'image (1536 x 1024 px) :
       pli gauche  -> x = 507 px  =  33,0 %
       pli droit   -> x = 1027 px =  66,9 %
     volet gauche  =  33,0 %   volet central = 33,9 %   volet droit = 33,1 %

   Les ajustements de mise en page (tailles, marges, positions) sont à
   écrire dans la zone prévue en bas de ce bloc.
   ========================================================================== */

/* --- La planche : dimensions natives de l'image --- */
.carte-section.carte-flyer {
    padding: 0;
    background: none;
    display: flex;
    justify-content: center;
}

.carte-flyer .container {
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
}

.carte-flyer .carte-paper {
    width: 1536px;
    height: 1024px;
    max-width: none;
    margin: 0;
    padding: 0;                      /* indispensable : la grille doit couvrir
                                        toute la largeur pour tomber sur les plis */
    background-size: 1536px 1024px;
    background-position: 0 0;
    border: 0;                       /* le cadre du site ne doit pas s'imprimer */
    border-radius: 0;
    box-shadow: none;
}

.carte-flyer .carte-paper::before { display: none; } /* double filet du site */

/* --- Les trois colonnes calées sur les trois volets --- */
.carte-flyer .carte-grid {
    grid-template-columns: 33.0% 33.9% 33.1%;
}

.carte-flyer .carte-col {
    border-left: 0; /* les plis de l'image tiennent lieu de séparateurs */
}

/* ==========================================================
   FIX FLIP-CARDS — restauration animation de retournement
   ========================================================== */

@media (min-width: 769px) {

    .flip-card {
        perspective: 1000px !important;
    }

    .flip-card .flip-card-inner {
        transform: rotateY(0deg);
        transform-style: preserve-3d !important;

        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;

        will-change: transform;
    }

    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg) !important;
    }

    .flip-card-front,
    .flip-card-back {
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    .flip-card-back {
        transform: rotateY(180deg) !important;
    }
}

/* ==========================================================================
   ▼▼▼  ZONE LIBRE — AJUSTEMENTS DU MODE FLYER  ▼▼▼
   Écrire ici les retouches de mise en page propres à la planche.
   Tout ce qui est écrit dans cette zone ne s'applique QU'EN MODE FLYER.
   Préfixer chaque sélecteur par .carte-flyer

   Exemples de points d'accroche :
     .carte-flyer .carte-header  { }   en-tête « Carte des soins »
     .carte-flyer .carte-col     { }   les trois colonnes (padding, hauteur…)
     .carte-flyer .carte-col:nth-child(1) { }   volet gauche
     .carte-flyer .carte-col:nth-child(2) { }   volet central
     .carte-flyer .carte-col:nth-child(3) { }   volet droit
     .carte-flyer .carte-item    { }   un « plat »
     .carte-flyer .item-name     { }   son titre
     .carte-flyer .item-subtitle { }   son sous-titre terracotta
     .carte-flyer .item-desc     { }   sa description
     .carte-flyer .carte-note    { }   le cartouche ovale
     .carte-flyer .carte-footnote{ }   la mention légale
   ========================================================================== */



/* ▲▲▲  FIN DE LA ZONE LIBRE  ▲▲▲ */

/* ==========================================================
   HERO REFACTOR 2026 V2 — mise en page inspirée de la maquette
   ========================================================== */
.hero-section {
    padding: 0 0 2.6rem !important;
    background: #faf3e3 !important;
}

.hero-stage {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    padding: 2.1rem 0 2rem;
    background-image: url('../img/hero-home-2026-v2.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

.hero-stage-inner {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-copy-column {
    position: relative;
    width: 65%;
    max-width: none;
    padding: 1.15rem 2.25rem 1.25rem 2rem;
    isolation: isolate;
}

/* Le parchemin n'existe QUE derrière la colonne gauche. */
.hero-copy-column::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -1.2rem -0.7rem -1.2rem -1rem;
    border-radius: 58px 74px 64px 54px;
    background:
        radial-gradient(circle at 13% 18%, rgba(255,255,255,.68), transparent 33%),
        radial-gradient(circle at 77% 73%, rgba(230,208,165,.22), transparent 35%),
        linear-gradient(90deg, rgba(253,246,230,.97) 0%, rgba(251,241,218,.95) 74%, rgba(250,239,213,.83) 91%, rgba(250,239,213,0) 100%);
    box-shadow: 0 14px 34px rgba(82,58,27,.08);
    filter: saturate(.98);
}

.hero-copy-shell {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: var(--color-primary-dark);
}

.hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 0 auto 1rem;
    color: #71804d;
}

.hero-ornament span {
    display: block;
    width: 92px;
    height: 1px;
    background: rgba(91,105,58,.62);
}

.hero-ornament i {
    font-style: normal;
    font-size: 1.15rem;
    line-height: 1;
}

.hero-ornament-mid { margin-top: 1.05rem; margin-bottom: 1rem; }
.hero-ornament-tight { margin-top: .95rem; margin-bottom: .75rem; }
.hero-ornament-bottom { margin-top: .7rem; margin-bottom: 0; }

.hero-main-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.0rem, 3.0vw, 3rem);
    line-height: 1.03;
    font-weight: 600;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: #17341f;
}

.hero-main-subtitle {
    margin: 1rem auto 0;
    max-width: 760px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.35rem, 1.9vw, 2rem);
    line-height: 1.15;
    color: #b84d2b;
}

.hero-supporting-text {
    max-width: 700px;
    margin: 0 auto;
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.45vw, 1.45rem);
    line-height: 1.45;
    font-style: italic;
    font-weight: 500;
    color: #29422f;
}

.hero-divider {
    width: min(430px, 70%);
    height: 1px;
    margin: 1.25rem auto 1rem;
    background: linear-gradient(90deg, transparent, rgba(87,94,59,.75), transparent);
}

.hero-secondary-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 3.15vw, 3.55rem);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #183720;
}

.hero-secondary-subtitle {
    margin: .3rem 0 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.45rem, 1.9vw, 2rem);
    line-height: 1.1;
    color: #b84d2b;
}

.hero-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: min(690px, 96%);
    margin: .9rem auto 0;
}

.hero-menu-card {
    position: relative;
    min-height: 136px;
    padding: 1rem 2.8rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid #9a6a3e;
    outline: 1px solid rgba(255,228,181,.55);
    outline-offset: -8px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 7px 14px rgba(68,44,21,.20), inset 0 0 0 2px rgba(73,44,18,.25);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.hero-menu-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 20px rgba(68,44,21,.25), inset 0 0 0 2px rgba(73,44,18,.2);
    filter: brightness(1.04);
}

.hero-menu-card-green {
    background: linear-gradient(145deg, #234f32, #2f6540);
    color: #f8efdd;
}

.hero-menu-card-terracotta {
    background: linear-gradient(145deg, #a94b28, #bf5a30);
    color: #fff0df;
}

.hero-menu-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.35vw, 1.45rem);
    line-height: 1.05;
    font-weight: 600;
    text-transform: uppercase;
}

.hero-menu-rule {
    display: block;
    width: 72%;
    height: 1px;
    margin: .48rem auto .4rem;
    background: rgba(255,241,219,.72);
}

.hero-menu-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(.95rem, 1.1vw, 1.12rem);
    line-height: 1.12;
    font-style: italic;
}

.hero-menu-arrow {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1;
}

.hero-reassurance-note {
    margin: 1.15rem 0 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.12rem, 1.5vw, 1.5rem);
    line-height: 1.15;
    color: #29422f;
}

.hero-layout {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    margin-top: 1.4rem;
}

@media (max-width: 1200px) {
    .hero-stage { min-height: 700px; background-position: 56% center !important; }
    .hero-stage-inner { min-height: 640px; }
    .hero-copy-column { width: 65%; padding-left: 1rem; padding-right: 1.5rem; }
}

@media (max-width: 900px) {
    .hero-stage { min-height: auto; background-position: 61% center !important; padding: 1.5rem 0; }
    .hero-stage-inner { min-height: auto; }
    .hero-copy-column { width: 72%; padding: 1rem; }
    .hero-copy-column::before { inset: -.7rem -1rem -.7rem -.7rem; }
    .hero-desktop-break { display: none; }
    .hero-menu-actions { grid-template-columns: 1fr; width: min(520px, 92%); }
    .hero-menu-card { min-height: 112px; }
}

@media (max-width: 680px) {
    .hero-section { padding-bottom: 2rem !important; }
    .hero-stage {
        padding: 1rem 0;
        background-position: 68% center !important;
    }
    .hero-copy-column {
        width: 100%;
        padding: .8rem .65rem;
    }
    .hero-copy-column::before {
        inset: -.3rem .15rem;
        border-radius: 26px;
        background: rgba(252,244,225,.92);
        box-shadow: 0 8px 24px rgba(82,58,27,.11);
    }
    .hero-main-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .hero-main-subtitle { font-size: clamp(1.25rem, 6vw, 1.65rem); }
    .hero-secondary-title { font-size: clamp(1.95rem, 8vw, 2.6rem); }
    .hero-secondary-subtitle { font-size: clamp(1.25rem, 5.8vw, 1.6rem); }
    .hero-supporting-text { font-size: 1.02rem; }
    .hero-menu-actions { width: 100%; gap: .8rem; }
    .hero-menu-card { min-height: 102px; padding-left: .9rem; padding-right: 2.3rem; }
    .hero-reassurance-note { font-size: 1.05rem; }
}

.mobile-break { display: none; }

@media (max-width: 800px) {
    .mobile-break { display: block; }
}
/* ========================================================================== 
   FIX DEFINITIF FLIP-CARDS MOBILE/TABLETTE — <= 925px
   Les anciennes règles tactiles empilaient recto + verso dans le flux,
   ce qui doublait la hauteur de chaque carte et cassait le retournement.
   ========================================================================== */
@media (max-width: 925px) {
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
        align-items: start !important;
    }

    .flip-card {
        position: relative !important;
        width: 100% !important;
        height: 330px !important;
        min-height: 330px !important;
        perspective: 1100px !important;
        -webkit-perspective: 1100px !important;
    }

    .flip-card .flip-card-inner {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        transform: rotateY(0deg) !important;
        -webkit-transform: rotateY(0deg) !important;
        transform-style: preserve-3d !important;
        -webkit-transform-style: preserve-3d !important;
        transition: transform .65s cubic-bezier(.4, 0, .2, 1) !important;
        -webkit-transition: -webkit-transform .65s cubic-bezier(.4, 0, .2, 1) !important;
        will-change: transform;
    }

    .flip-card-front,
    .flip-card-back {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform-style: preserve-3d !important;
        -webkit-transform-style: preserve-3d !important;
        padding: 1.5rem 1.1rem !important;
        overflow: hidden;
    }

    .flip-card-front {
        transform: rotateY(0deg) !important;
        -webkit-transform: rotateY(0deg) !important;
        pointer-events: auto;
    }

    .flip-card-back {
        transform: rotateY(180deg) !important;
        -webkit-transform: rotateY(180deg) !important;
        pointer-events: none;
    }

    .flip-card.is-flipped .flip-card-inner {
        transform: rotateY(180deg) !important;
        -webkit-transform: rotateY(180deg) !important;
    }

    .flip-card.is-flipped .flip-card-front {
        pointer-events: none;
    }

    .flip-card.is-flipped .flip-card-back {
        pointer-events: auto;
    }

    .flip-card .icon-pain {
        margin-bottom: .75rem !important;
        flex: 0 0 auto;
    }

    .flip-card .icon-pain img {
        display: block;
        width: 78px !important;
        height: 78px !important;
        object-fit: contain;
        margin: 0 auto;
    }

    .flip-card-front h3,
    .flip-card-back h3 {
        font-size: 1.16rem !important;
        line-height: 1.3 !important;
        margin-bottom: .65rem !important;
    }

    .flip-card-front p,
    .flip-card-back p {
        font-size: .92rem !important;
        line-height: 1.55 !important;
        margin-bottom: .8rem !important;
    }

    .flip-card .btn-small {
        margin-top: auto;
    }

    .flip-card {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Sur tactile, neutralise le :hover persistant d'iOS/Chrome : seul .is-flipped pilote le flip. */
@media (max-width: 925px) and (hover: none) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(0deg) !important;
        -webkit-transform: rotateY(0deg) !important;
    }

    .flip-card.is-flipped:hover .flip-card-inner {
        transform: rotateY(180deg) !important;
        -webkit-transform: rotateY(180deg) !important;
    }
}

/* Vrai smartphone étroit : une seule carte par ligne. */
@media (max-width: 559px) {
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .flip-card {
        width: min(100%, 390px) !important;
        height: 320px !important;
        min-height: 320px !important;
        margin-inline: auto !important;
    }
}