/* ==========================================
   GRENIKA RESPONSIVE ENGINE V1.0

   Références de validation :

   320px  → iPhone SE (1st gen)
   375px  → iPhone SE 2022
   390px  → iPhone 14 / 15
   412px  → Xiaomi / Samsung Android
   768px  → iPad
   1200px → Desktop

   Mobile First
========================================== */

/* ==========================================
   BASE RESPONSIVE
========================================== */

*{
    box-sizing:border-box;
}

img,
svg,
video{
    max-width:100%;
    height:auto;
}

body{
    overflow-x:hidden;
}

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding-left:20px;
    padding-right:20px;
}
/* ==========================================
   320px → 375px
========================================== */

@media (max-width:375px){

    h1{
        font-size:2rem;
    }
    h2{
        font-size:1.5rem;
    }
    .choice-grid{
        grid-template-columns:1fr !important;
    }
    .form-grid{
        grid-template-columns:1fr !important;
    }
    .installation-groups{
        grid-template-columns:1fr !important;
    }
    .wizard-navigation{
        flex-direction:column;
        gap:12px;
    }
    .btn-nav-prev,
    .btn-nav-next,
    .submit-application{
        width:100%;
    }

}
@media (max-width:480px){

  .hero-actions{
    padding:0 12px;
  }

  .hero-actions .btn-highlight,
  .hero-actions .btn-qr-scanner-close{
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
  }

}
@media (max-width:480px){

  .hero-benefits{
    padding:0 12px;
  }

}
@media (max-width:768px){

  .hero-actions{
    padding-inline:24px;
  }

  .hero-actions .btn-highlight,
  .hero-actions .btn-qr-scanner-close{
    width:100%;
    max-width:420px;
    margin-inline:auto;
  }

  .hero-benefits{
    padding-inline:24px;
  }
  .hero-content h1{
  margin-bottom:32px;
  }

  .hero-content p{
    line-height:1.8;
  }

}
/* ==========================================
   376px → 480px
========================================== */

@media (min-width:376px)
and (max-width:480px){

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

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

}
/* ==========================================
   iPhone SE / Mobile XS
========================================== */

@media (max-width:480px){

  .why-grenika-section{
    padding:60px 16px;
  }
 .why-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .why-card{
    width:100% !important;
    max-width:100% !important;
    padding:24px !important;
    margin:0 !important;
    box-sizing:border-box;
  }
  .grenika-manifesto{
    padding:24px;
    margin-top:40px;
    border-radius:24px;
  }
  .grenika-manifesto h3{
    font-size:1.5rem;
    line-height:1.3;
    margin:20px 0;
  }
  .grenika-manifesto h4{
    font-size:1rem;
    line-height:1.6;
  }
  .manifesto-line{
    width:80px;
  }

}
/* ==========================================================
   BACK TO TOP — GRENIKA DESIGN SYSTEM
========================================================== */

@media (max-width:768px){

    #backToTop{

        right:16px;
        bottom:16px;

        width:48px;
        height:48px;

        font-size:1.15rem;

    }

}

@media (max-width:480px){

    #backToTop{

        right:14px;
        bottom:14px;

        width:44px;
        height:44px;

        font-size:1.05rem;

        box-shadow:
            0 10px 24px rgba(0,0,0,.18);

    }

}

@media (max-width:360px){

    #backToTop{

        right:12px;
        bottom:12px;

        width:42px;
        height:42px;

    }

}



/* ==========================================
   Programme pilote - Avantages pionniers
========================================== */

@media (max-width:480px){

  .benefits-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:40px;
  }

  .benefit-card{
    padding:24px;
  }

  .benefit-card h3{
    font-size:1.5rem;
  }

  .benefit-number{
    width:56px;
    height:56px;
    font-size:1.2rem;
    margin-bottom:18px;
  }

}
/* ==================================================
   COMMUNES PILOTES
================================================== */

@media (max-width:480px){

  .pilot-why-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .pilot-why-card{
    padding:24px;
    border-radius:24px;
  }

  .pilot-why-icon{
    width:72px;
    height:72px;
    font-size:1.8rem;
    margin-bottom:20px;
  }

  .pilot-why-card h3{
    font-size:1.5rem;
    line-height:1.3;
    margin-bottom:16px;
  }

  .pilot-why-card p{
    line-height:1.7;
  }

}
@media (max-width:480px){

  .pilot-why-banner{
    padding:24px;
    margin-top:40px;
    border-radius:24px;
  }

  .pilot-why-banner h3{
    font-size:1.6rem;
  }

  .pilot-why-banner p{
    font-size:1rem;
    line-height:1.7;
  }

}
/* ==================================================
   KIT DÉMARRAGE
================================================== */

@media (max-width:480px){

  .choose-kit-section{
    padding-left:16px;
    padding-right:16px;
  }

  .kit-option{
    width:100%;
    max-width:100%;
    padding:24px 0;
  }

  .kit-hero-card{
    display:flex;
    flex-direction:column;
    gap:24px;
    width:100%;
    max-width:100%;
  }

  .kit-complete-card,
  .kit-main-image,
  .kit-option-card{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .kit-main-image img{
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
  }

  .kit-capacity-banner{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }

  .spec-row{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

}
/* ==========================================
   481px → 768px
========================================== */

@media (min-width:481px)
and (max-width:768px){

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

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

}
/* ==========================================
   TABLETTES
========================================== */

@media (min-width:769px)
and (max-width:1199px){

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

}
/* ==========================================
   DESKTOP
========================================== */

@media (min-width:1200px){

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

}


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

@media (max-width:980px){
  .hero-container{
    flex-direction:column;
  }
  .hero-content,
  .hero-media{
    width:100%;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions a{
    width:100%;
    text-align:center;
  }
}
@media (max-width:768px){
  .hero{
    padding:120px 0 80px;
  }
  .hero-title{
    font-size:clamp(2.4rem,10vw,3.5rem);
  }
}
@media (max-width:480px){
   .hero-microcopy{
    font-size:.9rem;
  }
}

/* =========================================================
   MODE DESKTOP (min-width: 768px)
   ========================================================= */
@media (min-width: 768px) {
    .hero-section {
        padding: 160px 48px 80px !important; /* Dégagement parfait sous le header fixe PC */
    }

    .hero-container {
        display: grid !important;
        grid-template-columns: 1.2fr 0.8fr !important; /* Texte large à gauche, image à droite */
        align-items: center;
        text-align: left; /* Aligné à gauche proprement sur PC */
        gap: 60px;
    }

    .hero-content h1 {
        font-size: 3.5rem; /* Titre plus grand et percutant sur ordinateur */
    }
    .footer-container{
        grid-template-columns:repeat(3,1fr);
        gap:40px;
    }
}


/* ==========================================================================
   3. GRANDS ÉCRANS ET ORDINATEURS (min-width: 1100px)
   ========================================================================== */
@media (min-width: 1100px) {
    
    /* Confort maximal pour les grands moniteurs de bureau */
    .footer-container,
    .why-grid {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 60px !important;
    }
    
    /* Ajustement des grilles à 3 éléments si nécessaire sur PC */
    .why-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .hero-media{
      display:flex;
      flex-direction:column;
      gap:30px;
    }
}

/* ==========================================================================
   SUCCESS SCREEN PREMIUM
   ========================================================================== */

@media (max-width:768px){
    .application-success{
        margin:30px 20px;
        padding:28px;
    }
    .success-icon{
        font-size:3rem;
    }
    .application-success h2{

        font-size:2rem;
    }

}

/* ==========================================================================
   RESPONSIVE — COMMUNICATION CARD - GRENIKA Design System
========================================================================== */

@media (max-width:768px){

    .communication-card{

        gap:16px;

        padding:18px;

    }

    .communication-card__icon{

        width:42px;
        height:42px;

        font-size:1rem;

    }

    .communication-card__title{

        font-size:1rem;

    }

}

@media (max-width:480px){

    .communication-card{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

        padding:16px;

    }

    .communication-card__icon{

        width:40px;
        height:40px;

    }

}

@media (max-width:768px){

    .final-cta-benefits{

        flex-direction:column;

        align-items:stretch;

    }

    .final-cta-benefit{

        justify-content:center;

    }

}
/* ==========================================================================
   RESPONSIVE — SELECTION CARD - GRENIKA Design System
========================================================================== */

/* TABLETTE */
@media (max-width:980px){

    .choice-card__content{

        min-height:160px;

        padding:22px;

    }

}

@media (max-width:980px){

  .final-cta-benefits{
    flex-wrap:wrap;
  }

}

/* =========================================================
   HERO — DESKTOP
   ========================================================= */

@media (min-width:980px){

    .hero-container{

        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        align-items:center;

        gap:64px;

    }

}

/* MOBILE */

@media (max-width:768px){

    .choice-card__content{

        justify-content:flex-start;

        padding:20px;

        gap:10px;

    }

    .choice-card__icon{

        font-size:1.6rem;

    }

    .choice-card__title{

        font-size:1.20rem;

    }

    .choice-card__subtitle{

        font-size:.95rem;

    }

}


/* MOBILE COMPACT (≤ 480px) */

@media (max-width:480px){

  .choice-grid{

      grid-template-columns:1fr;

      gap:14px;

  }

  .choice-card__content{

      justify-content:flex-start;

      padding:18px 16px;

      gap:8px;

      border-radius:18px;

  }

  .choice-card__icon{

      font-size:1.35rem;

  }

  .choice-card__title{

      font-size:1.05rem;

      line-height:1.30;

  }

  .choice-card__subtitle{

      font-size:.90rem;

      line-height:1.45;

  }

}

@media (max-width:980px){

    .header-cta{

        min-width:auto;

        padding-inline:24px;

        font-size:.95rem;

    }

}

@media (max-width:768px){

    .header-actions{

        display:none;

    }

}