/* ============================================================
   STRUCTIFY TECH — RESPONSIVE.CSS
   Breakpoints mobile-first.
   Approche : on part du mobile, on monte vers le desktop.

   Breakpoints :
   -- xs  : < 480px     (petit mobile)
   -- sm  : >= 480px    (mobile standard)
   -- md  : >= 768px    (tablette)
   -- lg  : >= 1024px   (petit desktop / landscape tablette)
   -- xl  : >= 1280px   (desktop standard)
   -- 2xl : >= 1440px   (grand écran)
   ============================================================ */


/* ----------------------------------------------------------
   MOBILE BASE — < 480px
   Styles appliqués à TOUS les écrans par défaut.
   Le desktop écrase ces styles avec des media queries min-width.
   ---------------------------------------------------------- */

/* Layout */
.container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.section--sm {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.section--lg {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

/* Grilles — empilées sur mobile */
.grid-2,
.grid-3,
.grid-4 {
    grid-template-columns: 1fr;
}

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

/* Navigation */
.nav {
    padding: 0 var(--space-5);
    height: var(--nav-height-mob);
}

.nav__links,
.nav__cta {
    display: none;
}

.nav__hamburger {
    display: flex;
}

.nav__mobile-menu {
    top: var(--nav-height-mob);
}

.lang-toggle {
    display: flex;
}

/* Ticker */
.ticker {
    margin-top: var(--nav-height-mob);
}

/* Hero */
.hero {
    min-height: 100svh;
    padding-bottom: var(--space-16);
    align-items: flex-end;
}

.hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
    letter-spacing: -0.02em;
}

.hero__desc {
    font-size: var(--text-base);
}

.hero__actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--space-12);
}

.hero__actions .btn {
    width: 100%;
    justify-content: center;
}

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

.hero__stat {
    padding: var(--space-5) var(--space-3);
}

.hero__stat-value {
    font-size: var(--text-2xl);
}

/* Section header */
.section-header {
    margin-bottom: var(--space-10);
}

/* Cartes */
.service-card {
    padding: var(--space-6);
}

.pricing-card {
    padding: var(--space-6);
}

/* Tableau */
.data-table thead th,
.data-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
}

/* Carrières */
.career-conditions {
    grid-template-columns: 1fr;
}

/* Footer */
.footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding: var(--space-16) 0 var(--space-10);
}

.footer__brand {
    max-width: 100%;
}

.footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.footer__legal-links {
    gap: var(--space-4);
}

/* Boutons flottants */
.floating-actions {
    bottom: var(--space-5);
    right: var(--space-5);
}

.floating-btn {
    height: 44px;
    max-width: 44px;
    padding: 0 var(--space-3);
}

.floating-btn:hover {
    max-width: 44px;
    padding: 0 var(--space-3);
}

.floating-btn__label {
    display: none;
}

/* Back to top */
.back-to-top {
    bottom: var(--space-5);
    left: var(--space-5);
    width: 40px;
    height: 40px;
}

/* Prévisualisations documents */
.doc-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* Grille tech */
.tech-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.tech-card {
    padding: var(--space-4) var(--space-3);
}

.tech-card__logo {
    width: 36px;
    height: 36px;
}

/* Cookie banner */
.cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
}

.cookie-banner__actions {
    width: 100%;
}

.cookie-banner__actions .btn {
    flex: 1;
    justify-content: center;
}

/* Solution cards */
.solution-card__actions {
    flex-direction: column;
}

.solution-card__actions .btn {
    width: 100%;
    justify-content: center;
}

/* Contact */
.social-links-row .social-link-btn {
    flex: 1;
    justify-content: center;
}

/* Questionnaire */
.questionnaire__item {
    padding: var(--space-5);
}

/* Textes display — réduits sur mobile */
.display-xl {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
}

.display-lg {
    font-size: clamp(2rem, 8vw, 3rem);
}

.display-md {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
}


/* ----------------------------------------------------------
   SMALL MOBILE — >= 480px
   ---------------------------------------------------------- */
@media (min-width: 480px) {

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

    .tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .doc-preview-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

}


/* ----------------------------------------------------------
   TABLETTE — >= 768px
   ---------------------------------------------------------- */
@media (min-width: 768px) {

    /* Layout */
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }

    .section {
        padding-top: var(--space-24);
        padding-bottom: var(--space-24);
    }

    .section--sm {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }

    .section--lg {
        padding-top: var(--space-32);
        padding-bottom: var(--space-32);
    }

    /* Grilles — 2 colonnes sur tablette */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    /* Hero */
    .hero__title {
        font-size: clamp(2.8rem, 6vw, 4.5rem);
    }

    .hero__stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero__actions {
        flex-direction: row;
        align-items: center;
    }

    .hero__actions .btn {
        width: auto;
    }

    /* Carrières */
    .career-conditions {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .footer__main {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-10);
    }

    /* Tech grid */
    .tech-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Doc previews */
    .doc-preview-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Solution card actions */
    .solution-card__actions {
        flex-direction: row;
    }

    .solution-card__actions .btn {
        width: auto;
    }

    /* Boutons flottants — label réactivé */
    .floating-btn {
        height: 48px;
    }

}


/* ----------------------------------------------------------
   PETIT DESKTOP — >= 1024px
   ---------------------------------------------------------- */
@media (min-width: 1024px) {

    /* Navigation — desktop */
    .nav {
        padding: 0 var(--space-8);
        height: var(--nav-height);
    }

    .nav__links {
        display: flex;
    }

    .nav__cta {
        display: inline-flex;
    }

    .nav__hamburger {
        display: none;
    }

    .nav__mobile-menu {
        display: none !important;
    }

    .ticker {
        margin-top: var(--nav-height);
    }

    /* Grilles — 3 colonnes */
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* Hero */
    .hero {
        padding-bottom: var(--space-24);
    }

    .hero__actions {
        margin-bottom: var(--space-20);
    }

    /* Footer */
    .footer__main {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: var(--space-12);
    }

    .footer__bottom {
        flex-direction: row;
        align-items: center;
    }

    /* Boutons flottants — label visible */
    .floating-btn:hover {
        max-width: 200px;
        padding: 0 var(--space-5);
    }

    .floating-btn__label {
        display: inline;
    }

    /* Doc previews */
    .doc-preview-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Tech grid */
    .tech-grid {
        grid-template-columns: repeat(5, 1fr);
    }

}


/* ----------------------------------------------------------
   DESKTOP STANDARD — >= 1280px
   ---------------------------------------------------------- */
@media (min-width: 1280px) {

    /* Grilles */
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Section paddings finaux */
    .section {
        padding-top: var(--space-32);
        padding-bottom: var(--space-32);
    }

    .section--lg {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40);
    }

    /* Hero */
    .hero__title {
        font-size: clamp(3.5rem, 6.5vw, 5.5rem);
    }

    /* Tech grid */
    .tech-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Doc previews */
    .doc-preview-grid {
        grid-template-columns: repeat(6, 1fr);
    }

}


/* ----------------------------------------------------------
   GRAND ÉCRAN — >= 1440px
   ---------------------------------------------------------- */
@media (min-width: 1440px) {

    .container {
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }

    .nav {
        padding: 0 var(--space-12);
    }

}


/* ----------------------------------------------------------
   UTILITAIRES RESPONSIVE
   Afficher / masquer selon le breakpoint
   ---------------------------------------------------------- */

.hide-mobile   { display: none !important; }
.show-mobile   { display: block !important; }
.hide-tablet   { display: none !important; }
.show-tablet   { display: none !important; }
.hide-desktop  { display: none !important; }
.show-desktop  { display: none !important; }

@media (min-width: 768px) {
    .hide-mobile  { display: block !important; }
    .show-mobile  { display: none !important; }
    .show-tablet  { display: block !important; }
    .hide-tablet  { display: none !important; }
}

@media (min-width: 1024px) {
    .hide-tablet  { display: block !important; }
    .show-tablet  { display: none !important; }
    .show-desktop { display: block !important; }
    .hide-desktop { display: none !important; }
}

/* Flex uniquement sur certains breakpoints */
@media (min-width: 768px) {
    .md\:flex { display: flex !important; }
    .md\:grid { display: grid !important; }
    .md\:hide { display: none !important; }
}

@media (min-width: 1024px) {
    .lg\:flex { display: flex !important; }
    .lg\:grid { display: grid !important; }
    .lg\:hide { display: none !important; }
}

/* Textes — alignements responsives */
@media (min-width: 768px) {
    .md\:text-center { text-align: center; }
    .md\:text-left   { text-align: left; }
}

/* Grilles en colonne sur mobile */
@media (max-width: 767px) {
    .sm\:flex-col   { flex-direction: column !important; }
    .sm\:w-full     { width: 100% !important; }
    .sm\:text-center { text-align: center !important; }
}

/* Tableau — scroll horizontal sur mobile */
@media (max-width: 767px) {
    .table-wrapper {
        border-radius: 0;
        margin-left: calc(-1 * var(--space-5));
        margin-right: calc(-1 * var(--space-5));
        border-left: none;
        border-right: none;
    }
}

/* Fix 100vh sur iOS Safari */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available;
    }
}

/* Écrans très petits — moins de 360px */
@media (max-width: 360px) {
    :root {
        --text-base: 0.875rem;
        --text-sm:   0.75rem;
    }

    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

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

    .hero__stat-value {
        font-size: var(--text-xl);
    }
}