/* =========================================================
   TABLETTE / PETITS ÉCRANS
========================================================= */

@media (max-width: 1050px) {

    .main-nav {
        gap: 0;
    }

    .main-nav a {
        padding-inline: 9px;
    }

    .main-nav .nav-cta {
        margin-left: 4px;
        padding-inline: 16px;
    }

    .hero-content {
        grid-template-columns: 1fr 0.8fr;
        gap: 35px;
    }

    .hero h1 {
        font-size: clamp(56px, 7vw, 82px);
    }

    .intro-grid,
    .about-preview-grid,
    .philosophy-grid,
    .about-story-grid,
    .adaptation-grid,
    .contact-grid {
        gap: 60px;
    }

    .about-visual,
    .philosophy-visual,
    .about-story-visual {
        min-height: 470px;
    }

    .contact-grid {
        grid-template-columns: 0.85fr 1.15fr;
    }

    .footer-grid {
        gap: 40px;
    }
}

/* =========================================================
   TABLETTE / MENU MOBILE
========================================================= */

@media (max-width: 850px) {

    .container {
        width: min(calc(100% - 36px), var(--container));
    }

    .section {
        padding: 85px 0;
    }

    .header-inner {
        min-height: 76px;
    }

    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: fixed;
        z-index: 999;
        top: 76px;
        right: 18px;
        left: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: rgba(255, 250, 241, 0.97);
        box-shadow: 0 20px 60px rgba(41, 39, 31, 0.14);
        backdrop-filter: blur(18px);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .main-nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .main-nav a {
        padding: 13px 15px;
        border-radius: 12px;
    }

    .main-nav a::after {
        display: none;
    }

    .main-nav a:hover,
    .main-nav a.active {
        background: var(--yellow-pale);
    }

    .main-nav .nav-cta {
        margin: 5px 0 0;
        text-align: center;
    }

    .hero {
        min-height: auto;
        padding-top: 145px;
        padding-bottom: 80px;
    }

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

    .hero-copy {
        max-width: 720px;
    }

    .hero-visual {
        min-height: 420px;
        margin-top: 20px;
    }

    .sun {
        width: 240px;
        height: 240px;
    }

    .sun::before {
        width: 340px;
        height: 340px;
    }

    .sun::after {
        width: 440px;
        height: 440px;
    }

    .hero-rays span {
        left: 50%;
        width: 500px;
    }

    .intro-grid,
    .about-preview-grid,
    .philosophy-grid,
    .about-story-grid,
    .adaptation-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .intro-grid {
        gap: 40px;
    }

    .about-preview-grid,
    .philosophy-grid,
    .about-story-grid,
    .adaptation-grid,
    .contact-grid {
        gap: 50px;
    }

    .values-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .value-card,
    .process-card {
        padding: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-card-large {
        grid-column: 1 / -1;
    }

    .section-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-hero {
        min-height: 500px;
    }

    .page-hero-rays {
        right: -170px;
    }

    .rich-content {
        margin-left: 0;
    }

    .about-visual,
    .philosophy-visual,
    .about-story-visual,
    .adaptation-visual {
        min-height: 420px;
    }

    .contact-form-wrapper {
        padding: 30px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .section {
        padding: 70px 0;
    }

    .header-inner {
        min-height: 70px;
    }

    .main-nav {
        top: 70px;
        right: 14px;
        left: 14px;
    }

    .brand-sun {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .brand-text strong {
        font-size: 19px;
    }

    .brand-text span {
        font-size: 10px;
    }

    .hero {
        padding-top: 125px;
        padding-bottom: 60px;
    }

    .hero h1,
    .page-hero h1 {
        font-size: clamp(46px, 14vw, 66px);
        letter-spacing: -0.045em;
    }

    .hero-text,
    .page-hero-copy > p:last-child {
        font-size: 17px;
    }

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

    .hero-actions .button {
        width: 100%;
    }

    .hero-actions .button-link {
        justify-content: flex-start;
    }

    .hero-visual {
        min-height: 350px;
    }

    .sun {
        width: 190px;
        height: 190px;
    }

    .sun::before {
        width: 270px;
        height: 270px;
    }

    .sun::after {
        width: 350px;
        height: 350px;
    }

    .floating-word {
        font-size: 10px;
    }

    .floating-word-one {
        top: 16%;
        left: 0;
    }

    .floating-word-two {
        right: 0;
        bottom: 26%;
    }

    .floating-word-three {
        right: 14%;
        bottom: 5%;
    }

    .section-heading h2,
    .center-heading h2,
    .section-top h2 {
        font-size: 43px;
    }

    .lead {
        font-size: 18px;
    }

    .values-grid,
    .services-grid,
    .process-grid {
        gap: 14px;
    }

    .service-card,
    .service-card-large {
        min-height: 275px;
        padding: 25px;
    }

    .service-card-large {
        grid-column: auto;
    }

    .service-card h3 {
        font-size: 25px;
    }

    .quote-section {
        padding: 90px 0;
    }

    .quote-inner blockquote {
        font-size: 42px;
    }

    .quote-mark {
        font-size: 72px;
    }

    .about-visual,
    .philosophy-visual,
    .about-story-visual,
    .adaptation-visual {
        min-height: 350px;
        border-radius: 28px;
    }

    .about-sun,
    .philosophy-sun,
    .large-sun {
        width: 175px;
        height: 175px;
    }

    .about-sun span,
    .philosophy-sun span,
    .large-sun span {
        font-size: 48px;
    }

    .philosophy-circle {
        width: 300px;
        height: 300px;
    }

    .story-orbit-one {
        width: 280px;
        height: 280px;
    }

    .story-orbit-two {
        width: 370px;
        height: 370px;
    }

    .adaptation-sun {
        width: 150px;
        height: 150px;
    }

    .adaptation-sun span {
        font-size: 43px;
    }

    .adaptation-ring-one {
        width: 250px;
        height: 250px;
    }

    .adaptation-ring-two {
        width: 340px;
        height: 340px;
    }

    .page-hero {
        min-height: 470px;
        padding-top: 125px;
        padding-bottom: 70px;
    }

    .page-hero-rays {
        right: -230px;
        width: 420px;
        height: 420px;
    }

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

    .process-card {
        padding: 27px;
    }

    .faq-item summary {
        padding: 22px 0;
        font-size: 20px;
    }

    .faq-answer {
        padding-right: 15px;
    }

    .contact-form-wrapper {
        padding: 22px;
        border-radius: 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-heading > span {
        font-size: 26px;
    }

    .contact-highlight {
        padding: 18px;
    }

    .cta-section {
        padding: 75px 0;
    }

    .cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

    .cta-inner h2 {
        font-size: 43px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-grid > div:first-child {
        grid-column: auto;
    }

    .footer-bottom > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* =========================================================
   ACCESSIBILITÉ / MOUVEMENT
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .menu-toggle span,
    .main-nav,
    .button,
    .value-card,
    .service-card,
    .process-card,
    .reveal {
        transition: none !important;
    }
}

/* =========================================================
   CORRECTION MOBILE — HERO
========================================================= */

@media (max-width: 560px) {

    .hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .hero-actions .button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-actions .button-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .scroll-indicator {
        display: none;
    }

}


/* =========================================================
   MOBILE — VISUEL HERO
========================================================= */

@media (max-width: 560px) {

    .hero-visual {
        min-height: 230px;
        height: 230px;
        margin-top: 5px;
        overflow: hidden;
    }

    .hero-visual .sun {
        width: 150px;
        height: 150px;
        bottom: -55px;
        top: auto;
    }

    .hero-visual .sun::before {
        width: 210px;
        height: 210px;
    }

    .hero-visual .sun::after {
        width: 275px;
        height: 275px;
    }

    .hero-visual .hero-circle-one,
    .hero-visual .hero-circle-two {
        transform: scale(0.65);
    }

    .floating-word {
        display: none;
    }

}


/* =========================================================
   DESKTOP — POSITION DU SCROLL INDICATOR
========================================================= */

@media (min-width: 851px) {

    .scroll-indicator {
        right: 28px;
    }

}



/* =========================================================
   CORRECTIF MOBILE — ACCOMPAGNEMENTS
========================================================= */

@media (max-width: 560px) {

    /* -----------------------------------------------------
       1. GRILLE DES PRESTATIONS
       Une seule carte par ligne sur téléphone
    ----------------------------------------------------- */

    .services-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .service-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .service-card-large {
        grid-column: auto !important;
    }


    /* -----------------------------------------------------
       2. CONTENU DES CARTES
    ----------------------------------------------------- */

    .service-card-content {
        min-width: 0;
        width: 100%;
    }

    .service-card h3,
    .service-card p {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }


    /* -----------------------------------------------------
       3. TARIFS
       Empêche les badges de sortir de la carte
    ----------------------------------------------------- */

    .service-meta {
        width: 100%;
        min-width: 0;
        gap: 12px;
        align-items: center;
    }

    .service-meta span {
        min-width: 0;
        flex: 1 1 auto;
    }

    .service-meta strong {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        padding: 9px 15px;
        white-space: normal;
        text-align: center;
        overflow-wrap: break-word;
        line-height: 1.25;
    }


    /* -----------------------------------------------------
       4. TARIF LONG
       Exemple : 60 € + ingrédients
    ----------------------------------------------------- */

    .service-meta strong {
        font-size: 14px;
    }


    /* -----------------------------------------------------
       5. FORFAITS RÉGULIERS
       Une seule colonne sur mobile
    ----------------------------------------------------- */

    .values-grid,
    .process-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .value-card,
    .process-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }


    /* -----------------------------------------------------
       6. TITRES DES CARTES
       Évite les débordements horizontaux
    ----------------------------------------------------- */

    .value-card h3,
    .process-card h3 {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }


    /* -----------------------------------------------------
       7. SECTION FRAIS ANNEXES
       La structure desktop devient verticale
    ----------------------------------------------------- */

    .adaptation-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        min-width: 0;
    }

    .adaptation-grid > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .adaptation-visual {
        min-height: 260px;
        width: 100%;
        max-width: 100%;
    }


    /* -----------------------------------------------------
       8. CONTENU TEXTE DES FRAIS ANNEXES
    ----------------------------------------------------- */

    .adaptation-grid h2,
    .adaptation-grid h3,
    .adaptation-grid p {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }


    /* -----------------------------------------------------
       9. SÉCURITÉ CONTRE LES DÉBORDEMENTS
    ----------------------------------------------------- */

    .section,
    .section .container {
        max-width: 100%;
        min-width: 0;
    }

    .section .container > * {
        min-width: 0;
    }


    /* -----------------------------------------------------
       10. FORFAITS — TARIF
    ----------------------------------------------------- */

    .value-card .service-meta,
    .process-card .service-meta {
        width: 100%;
        min-width: 0;
    }

    .value-card .service-meta strong,
    .process-card .service-meta strong {
        max-width: 100%;
        white-space: normal;
    }


    /* -----------------------------------------------------
       11. PAS DE DÉBORDEMENT HORIZONTAL
    ----------------------------------------------------- */

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 390px) {

    .service-meta {
        gap: 8px;
    }

    .service-meta span {
        font-size: 12px;
    }

    .service-meta strong {
        padding: 8px 12px;
        font-size: 13px;
    }

    .value-card,
    .process-card {
        padding: 24px !important;
    }

}