/* ================================================================
   FARMA SECURE SOLUTIONS — Styles Responsifs
   Cybersécurité | Audit SSI | Gouvernance ISO 27001
   © 2026 Farma Secure Solutions. Tous droits réservés.
   ================================================================ */

/* ================================================================
   TABLE DES MATIÈRES
   ----------------------------------------------------------------
   1.  Breakpoints Reference
   2.  Large Desktop  (max-width: 1400px)
   3.  Desktop        (max-width: 1200px)
   4.  Small Desktop  (max-width: 1024px)
   5.  Tablet         (max-width: 768px)
   6.  Mobile Large   (max-width: 640px)
   7.  Mobile         (max-width: 480px)
   8.  Mobile Small   (max-width: 360px)
   9.  Landscape Phones
   10. Reduced Motion
   11. High Contrast
   12. Print
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   Breakpoints Reference (mobile-first NOT used here;
   desktop-first with max-width to override style.css)

   1400px — Large Desktop
   1200px — Desktop
   1024px — Small Desktop / Large Tablet
    768px — Tablet
    640px — Mobile Large
    480px — Mobile
    360px — Mobile Small
   ──────────────────────────────────────────────────────────────── */


/* ================================================================
   2. LARGE DESKTOP — max-width: 1400px
   ================================================================ */

@media (max-width: 1400px) {

    :root {
        --container-max: 1140px;
    }

}


/* ================================================================
   3. DESKTOP — max-width: 1200px
   ================================================================ */

@media (max-width: 1200px) {

    :root {
        --container-max: 960px;
        --section-padding: 5rem;
    }

    /* ── Typography ── */
    h1 { font-size: var(--fs-4xl); }
    h2 { font-size: var(--fs-2xl); }

    .hero__title {
        font-size: var(--fs-4xl);
    }

    .hero__title-highlight {
        font-size: var(--fs-5xl);
    }

    /* ── Services Grid ── */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Why Grid ── */
    .why__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Projects Grid ── */
    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Pricing Grid ── */
    .pricing__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ── Footer ── */
    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--space-8);
    }

}


/* ================================================================
   4. SMALL DESKTOP / LARGE TABLET — max-width: 1024px
   ================================================================ */

@media (max-width: 1024px) {

    :root {
        --container-max: 100%;
        --container-padding: 2rem;
        --section-padding: 4.5rem;
        --header-height: 70px;
    }

    /* ── Header / Navigation ── */
    .header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(10, 22, 40, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        flex-direction: column;
        justify-content: center;
        padding: var(--space-16) var(--space-8);
        transition: right var(--transition-slow);
        z-index: var(--z-header);
        border-left: 1px solid rgba(0, 212, 255, 0.1);
    }

    .header__nav.open {
        right: 0;
    }

    .header__nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        width: 100%;
    }

    .header__nav-link {
        font-size: var(--fs-lg);
        padding: var(--space-3) var(--space-4);
        width: 100%;
        border-radius: var(--radius-lg);
    }

    .header__nav-link:hover,
    .header__nav-link.active {
        background: rgba(0, 212, 255, 0.05);
    }

    .header__nav-link::after {
        display: none;
    }

    .header__cta {
        display: none;
    }

    .header__toggle {
        display: flex;
    }

    /* ── Mobile Overlay ── */
    .header__nav::before {
        content: '';
        position: fixed;
        top: 0;
        left: -100vw;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity var(--transition-slow);
        pointer-events: none;
        z-index: -1;
    }

    .header__nav.open::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Hero ── */
    .hero__title {
        font-size: var(--fs-3xl);
    }

    .hero__title-highlight {
        font-size: var(--fs-4xl);
    }

    .hero__subtitle {
        font-size: var(--fs-base);
    }

    /* ── About ── */
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

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

    /* ── Founder ── */
    .founder__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: center;
    }

    .founder__photo-frame {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }

    .founder__bio {
        text-align: left;
    }

    .founder__pillars,
    .founder__profile-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* ── Projects ── */
    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Pricing ── */
    .pricing__grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    /* ── Contact Grid ── */
    .contact__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* ── Footer ── */
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }

    /* ── Approach ── */
    .approach__timeline {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .approach__timeline::before {
        display: none;
    }

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

    /* ── Sectors ── */
    .sectors__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

}


/* ================================================================
   5. TABLET — max-width: 768px
   ================================================================ */

@media (max-width: 768px) {

    :root {
        --section-padding: 3.5rem;
        --container-padding: 1.25rem;
    }

    /* ── Typography ── */
    h1 { font-size: var(--fs-3xl); }
    h2 { font-size: var(--fs-xl);  }
    h3 { font-size: var(--fs-lg);  }

    .section__title {
        font-size: var(--fs-2xl);
    }

    .section__header {
        margin-bottom: var(--space-10);
    }

    /* ── Hero ── */
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
    }

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

    .hero__badge {
        font-size: var(--fs-xs);
        margin-bottom: var(--space-6);
    }

    .hero__title {
        font-size: var(--fs-2xl);
    }

    .hero__title-highlight {
        font-size: var(--fs-3xl);
    }

    .hero__subtitle {
        font-size: var(--fs-sm);
        margin-bottom: var(--space-8);
    }

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

    .hero__actions .btn {
        justify-content: center;
    }

    .hero__trust {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .hero__trust-divider {
        display: none;
    }

    .hero__trust-item {
        font-size: var(--fs-xs);
        background: rgba(255, 255, 255, 0.03);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hero__scroll {
        display: none;
    }

    /* ── Hero Particles ── */
    .hero__particle--3,
    .hero__particle--5,
    .hero__particle--6 {
        display: none;
    }

    /* ── About ── */
    .about__stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

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

    .stat-card__number {
        font-size: var(--fs-3xl);
    }

    /* ── Services Grid ── */
    .services__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

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

    /* ── Projects Grid ── */
    .projects__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

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

    /* ── Why Grid ── */
    .why__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

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

    /* ── Founder ── */
    .founder__grid {
        margin-bottom: var(--space-12);
    }

    .founder__photo-frame {
        width: 240px;
        height: 240px;
    }

    .founder__name {
        font-size: var(--fs-2xl);
    }

    /* ── Vision ── */
    .vision__title {
        font-size: var(--fs-2xl);
    }

    .vision__pillars {
        gap: var(--space-6);
    }

    /* ── Pricing ── */
    .pricing-card {
        padding: var(--space-6);
    }

    /* ── FAQ ── */
    .faq__question {
        padding: var(--space-4) var(--space-5);
        font-size: var(--fs-sm);
    }

    .faq__answer p {
        padding: 0 var(--space-5) var(--space-5);
        font-size: var(--fs-sm);
    }

    /* ── Contact Form ── */
    .contact__form {
        padding: var(--space-6);
    }

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

    /* ── Footer ── */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .footer__bottom-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    /* ── Approach ── */
    .approach__commitment {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-4);
    }

    /* ── Sectors ── */
    .sectors__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* ── CTA Conversion ── */
    .cta-conversion__wrapper {
        padding: var(--space-8) var(--space-6);
    }

    .cta-conversion__list {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

}


/* ================================================================
   6. MOBILE LARGE — max-width: 640px
   ================================================================ */

@media (max-width: 640px) {

    :root {
        --section-padding: 3rem;
        --container-padding: 1rem;
    }

    /* ── Typography ── */
    .section__title {
        font-size: var(--fs-xl);
    }

    .section__description {
        font-size: var(--fs-sm);
    }

    .section__tag {
        font-size: var(--fs-xs);
    }

    .section__tag::before,
    .section__tag::after {
        width: 16px;
    }

    /* ── Hero ── */
    .hero__title {
        font-size: var(--fs-xl);
    }

    .hero__title-highlight {
        font-size: var(--fs-2xl);
    }

    /* ── About values ── */
    .about__value {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .about__value-icon {
        margin-bottom: var(--space-2);
    }

    /* ── Stat Cards ── */
    .stat-card__number {
        font-size: var(--fs-2xl);
    }

    .stat-card__label {
        font-size: var(--fs-xs);
    }

    .stat-card {
        padding: var(--space-5);
    }

    /* ── Founder ── */
    .founder__photo-frame {
        width: 200px;
        height: 200px;
    }

    .founder__name {
        font-size: var(--fs-xl);
    }

    .founder__title-role {
        font-size: var(--fs-sm);
    }

    /* ── Vision ── */
    .vision__title {
        font-size: var(--fs-xl);
    }

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

    .vision__pillar-icon {
        width: 44px;
        height: 44px;
    }

    /* ── Header Logo ── */
    .header__logo-img {
        height: 34px;
    }

    .header.scrolled .header__logo-img {
        height: 30px;
    }

    /* ── Achievements Stats ── */
    .achievements__stat-number {
        font-size: var(--fs-2xl);
    }

    .achievements__stat-label {
        font-size: var(--fs-xs);
    }

    /* ── Why Cards ── */
    .why__card-number {
        font-size: var(--fs-3xl);
    }

    /* ── Buttons ── */
    .btn--lg {
        padding: 0.875rem 1.5rem;
        font-size: var(--fs-sm);
    }

    /* ── Contact Info Card ── */
    .contact__info-card {
        padding: var(--space-6);
    }

    /* ── Partners ── */
    .partner-logo {
        min-width: 90px;
        height: 48px;
    }

    .partner-logo__text {
        font-size: var(--fs-sm);
    }

    /* ── Back to Top ── */
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: var(--space-4);
        right: var(--space-4);
    }

}


/* ================================================================
   7. MOBILE — max-width: 480px
   ================================================================ */

@media (max-width: 480px) {

    :root {
        --section-padding: 2.5rem;
    }

    /* ── Typography ── */
    .hero__title {
        font-size: var(--fs-xl);
    }
 
    .hero__title-highlight {
        font-size: var(--fs-2xl);
    }

    .hero__badge {
        font-size: 0.6875rem;
        padding: var(--space-1) var(--space-3);
    }

    .section__title {
        font-size: var(--fs-lg);
    }

    /* ── Header ── */
    .header__logo-text {
        display: none;
    }

    .header__nav {
        width: 100%;
        max-width: 100%;
        border-left: none;
    }

    /* ── About Stats ── */
    .about__stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .certs-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* ── Achievements ── */
    .achievements__stats {
        grid-template-columns: 1fr 1fr;
        padding: var(--space-5);
        gap: var(--space-6);
    }

    /* ── Case Card Results ── */
    .case-card__results {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .case-card__result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: var(--space-2) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .case-card__result:last-child {
        border-bottom: none;
    }

    .case-card__result-value {
        font-size: var(--fs-base);
    }

    .case-card__result-label {
        font-size: var(--fs-sm);
    }

    /* ── Service Cards ── */
    .service-card {
        padding: var(--space-5);
    }

    .service-card__icon-wrap {
        width: 48px;
        height: 48px;
        margin-bottom: var(--space-4);
    }

    .service-card__title {
        font-size: var(--fs-base);
    }

    /* ── Why Cards ── */
    .why__card {
        padding: var(--space-5);
    }

    .why__card-icon {
        width: 44px;
        height: 44px;
        margin-bottom: var(--space-4);
    }

    .why__card-icon svg {
        width: 28px;
        height: 28px;
    }

    /* ── Timeline ── */
    .methodology__timeline {
        padding-left: var(--space-8);
    }

    .methodology__timeline::before {
        left: 14px;
    }

    .timeline__marker {
        left: calc(-1 * var(--space-8) + 3px);
        width: 24px;
        height: 24px;
        box-shadow: 0 0 0 3px var(--color-navy), var(--shadow-cyan);
    }

    .timeline__step {
        font-size: 0.5625rem;
    }

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

    .timeline__title {
        font-size: var(--fs-base);
    }

    .timeline__icon {
        width: 40px;
        height: 40px;
    }

    .timeline__icon svg {
        width: 24px;
        height: 24px;
    }

    /* ── Experience Timeline Mobile ── */
    .experience-timeline {
        padding-left: var(--space-6); /* 24px */
        gap: var(--space-6);
    }

    .experience-timeline::before {
        left: 8px;
        top: 48px;
        bottom: 48px;
    }

    .experience-timeline__indicator {
        left: -23px; /* 24px padding - 23px offset = 1px, centers the 14px dot precisely on the 8px line */
        top: 38px;
    }

    /* ── Contact Form ── */
    .contact__form {
        padding: var(--space-5);
    }

    .form__label {
        font-size: var(--fs-xs);
    }

    .form__input,
    .form__select,
    .form__textarea {
        padding: var(--space-3);
        font-size: var(--fs-sm);
    }

    /* ── FAQ ── */
    .faq__question {
        padding: var(--space-3) var(--space-4);
    }

    .faq__answer p {
        padding: 0 var(--space-4) var(--space-4);
    }

    /* ── Footer Newsletter ── */
    .footer__newsletter-input {
        font-size: var(--fs-sm);
    }

    /* ── CTA Conversion Mobile ── */
    .cta-conversion__title {
        font-size: var(--fs-xl);
    }

    .cta-conversion__text {
        font-size: var(--fs-sm);
    }

    .cta-conversion__actions {
        flex-direction: column;
        width: 100%;
        gap: var(--space-4);
    }

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

    /* ── Preloader ── */
    .preloader__shield {
        width: 60px;
        height: 60px;
    }

    .preloader__text {
        font-size: var(--fs-base);
    }

    .preloader__bar {
        width: 150px;
    }

}


/* ================================================================
   8. MOBILE SMALL — max-width: 360px
   ================================================================ */

@media (max-width: 360px) {

    :root {
        --section-padding: 2rem;
        --container-padding: 0.75rem;
    }

    /* ── Typography ── */
    .hero__title {
        font-size: var(--fs-lg);
    }
 
    .hero__title-highlight {
        font-size: var(--fs-xl);
    }

    .section__title {
        font-size: var(--fs-md);
    }

    /* ── Hero Trust ── */
    .hero__trust {
        gap: var(--space-2);
    }

    .hero__trust-item {
        font-size: 0.625rem;
        padding: var(--space-1) var(--space-2);
    }

    .hero__trust-item svg {
        width: 14px;
        height: 14px;
    }

    /* ── Stat Cards ── */
    .about__stats-grid {
        gap: var(--space-3);
    }

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

    .stat-card__number {
        font-size: var(--fs-xl);
    }

    .stat-card__icon {
        display: none;
    }

    /* ── Achievements ── */
    .achievements__stats {
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .achievements__stat-number {
        font-size: var(--fs-xl);
    }

    /* ── Contact ── */
    .contact__info-card {
        padding: var(--space-5);
    }

    .contact__info-icon {
        width: 36px;
        height: 36px;
    }

    .contact__info-icon svg {
        width: 18px;
        height: 18px;
    }

}


/* ================================================================
   9. LANDSCAPE PHONES
   ================================================================ */

@media (max-height: 500px) and (orientation: landscape) {

    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + var(--space-8));
        padding-bottom: var(--space-8);
    }

    .hero__container {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .hero__title {
        font-size: var(--fs-xl);
    }

    .hero__title-highlight {
        font-size: var(--fs-2xl);
    }

    .hero__subtitle {
        margin-bottom: var(--space-6);
    }

    .hero__trust {
        margin-top: var(--space-4);
    }

    .hero__scroll {
        display: none;
    }

    /* ── Header Mobile Nav ── */
    .header__nav {
        padding: var(--space-8) var(--space-6);
        overflow-y: auto;
    }

    .header__nav-link {
        font-size: var(--fs-base);
        padding: var(--space-2) var(--space-3);
    }

}


/* ================================================================
   10. REDUCED MOTION
   ================================================================ */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }

    .hero__particle {
        animation: none;
    }

    .hero__scroll-wheel {
        animation: none;
    }

    .hero__badge-dot {
        animation: none;
    }

    .partners__track {
        animation: none;
    }

    .text-gradient {
        animation: none;
    }

    .preloader__progress {
        animation: none;
        width: 100%;
    }

    .preloader__shield {
        animation: none;
    }

    .preloader__check {
        animation: none;
        stroke-dashoffset: 0;
    }

    /* Disable scroll reveal animations */
    .animate-fade-up,
    [data-animate="fade-up"],
    [data-animate="fade-right"],
    [data-animate="fade-left"],
    [data-animate="zoom-in"] {
        opacity: 1;
        transform: none;
        transition: none;
    }

}


/* ================================================================
   11. HIGH CONTRAST
   ================================================================ */

@media (prefers-contrast: high) {

    :root {
        --color-gray-300:  #d4d4d8;
        --color-gray-400:  #a1a1aa;
        --color-gray-500:  #71717a;
    }

    .service-card,
    .case-card,
    .why__card,
    .stat-card,
    .timeline__content,
    .faq__item,
    .contact__form,
    .contact__info-card {
        border-color: rgba(255, 255, 255, 0.15);
    }

    .header.scrolled {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .form__input,
    .form__select,
    .form__textarea {
        border-color: rgba(255, 255, 255, 0.25);
    }

    .btn--outline {
        border-color: rgba(255, 255, 255, 0.4);
    }

    .faq__question {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

}


/* ================================================================
   12. PRINT
   ================================================================ */

@media print {

    /* ── Hide non-essential elements ── */
    .preloader,
    .header,
    .hero__bg,
    .hero__particles,
    .hero__scroll,
    .hero__canvas,
    .back-to-top,
    .partners__marquee,
    .btn,
    .header__toggle,
    .contact__social,
    .footer__newsletter,
    .service-card__glow {
        display: none !important;
    }

    /* ── Reset colors ── */
    body {
        background: white !important;
        color: #1a1a1a !important;
        font-size: 12pt;
    }

    * {
        color: #1a1a1a !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        page-break-after: avoid;
    }

    .text-gradient {
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }

    /* ── Layout ── */
    .section {
        padding: 1.5rem 0;
    }

    .container {
        max-width: 100%;
        padding: 0 1rem;
    }

    /* ── Grids to single column ── */
    .about__grid,
    .services__grid,
    .achievements__cases,
    .why__grid,
    .achievements__stats,
    .contact__grid,
    .footer__top {
        display: block;
    }

    .service-card,
    .case-card,
    .why__card,
    .stat-card,
    .timeline__content,
    .faq__item,
    .about__value {
        border: 1px solid #ccc !important;
        margin-bottom: 1rem;
        padding: 1rem;
        page-break-inside: avoid;
    }

    /* ── Hero ── */
    .hero {
        min-height: auto;
        padding: 2rem 0;
    }

    /* ── FAQ ── */
    .faq__answer {
        max-height: none !important;
        overflow: visible !important;
    }

    .faq__chevron {
        display: none;
    }

    /* ── Timeline ── */
    .methodology__timeline::before {
        background: #ccc;
    }

    .timeline__marker {
        border-color: #333;
    }

    /* ── Stat numbers ── */
    .stat-card__number,
    .achievements__stat-number {
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }

    /* ── Links ── */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666 !important;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }

    /* ── Footer ── */
    .footer {
        border-top: 1px solid #ccc;
    }

    .footer__bottom-links a::after {
        content: "";
    }

}