/* =====================================================
   DIGITELECT – STYLE GLOBAL FUSIONNÉ (SANS RÉPÉTITIONS)
   ===================================================== */

/* ---------- VARIABLES GLOBALES ---------- */
:root{
  --green-main: #7edfb2;
  --green-soft: #e9f8f1;
  --green-dark: #1f5c48;
  --text-dark: #083b2e;
  --glass: rgba(255,255,255,0.65);

  --sin-panel: #062d22;
  --sin-panel-2: #02110c;
  --sin-border: rgba(57,255,180,.35);
  --sin-accent: #39ffb4;
  --sin-accent-2:#9af7d2;
  --sin-text: #eafff7;
  --sin-radius: 14px;
}

/* ---------- RESET ---------- */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html, body{
  height:100%;
  overflow-x:hidden;
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #e6f7ef, #bfe9d6);
  color: var(--text-dark);
}

body{
  margin:0;
  padding:0;
}


a{
  color:inherit;
  text-decoration:none;
}

/* ---------- HEADER (iframe) ---------- */


/* ---------- MAIN ---------- */
.main-zone{
  flex:1;
  border:0;
  overflow:auto;
}


/* ---------- HERO ---------- */
.hero-banner{
  padding-top:8px;
  text-align:center;
}

.hero-banner h1{
  font-size:24px;
  margin:5px 0 5px;
}

.hero-banner h1 span{
  color: var(--green-dark);
}

.hero-banner p{
  font-size:14px;
  line-height:1.4;
  margin:0;
}

/* ---------- ENCARTS SUPÉRIEURS ---------- */
.top-cards{
  display:flex;
  justify-content:center;
  gap:2.5%;
  margin:10px 0 25px;
}

.card{
  width:17.5%;      /* -20% (avant ≈22%) */
  height:70px;     /* -20% (avant 130px) */
  background:#f5fff9;
  border-radius:12px;
  padding:11px;     /* padding réduit */
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
}

.card h3{
  font-size:20px;
}

.card p{
  font-size:15px;
}


/* ---------- SECTION IA ---------- */
 /* ===== BLOC IA : espacement maîtrisé ===== */
.ai-section{
  display:grid;
  grid-template-columns: 1fr 1.4fr 1fr;  /* centre plus large */
  align-items:center;
  column-gap: 1px;                       /* espace très petit mais visible */
}

/* Colonnes images */
.ai-left, .ai-right{
  display:flex;
  justify-content:center;
}

/* Images : même taille */
.ai-left img,
.ai-right img{
  width: 200px;
  height: 220px;
  object-fit: cover;
  border-radius: 25px;
}

/* Encart texte : fond plus clair STI2D */
.ai-center{
  background: #f0fff6;   /* vert très clair STI2D */
  border-radius: 24px;
  padding: 20px;
  width: 650px; 
  height:270px;
  text-align:center;

}


/* images −30% */



  .ai-left img,
.ai-right img{
  width:220px;
  height:290px;
  object-fit:cover;
  border-radius:25px;
}
  
  /***
.ai-left img,
.ai-right img{
  width:175px;
  height:215px;
}

  **/


/* texte +20% */
.ai-center h2{
  font-size:26px;
}


.btn-secondary{
  display:inline-block;
  margin-top:12px;
  padding:10px 22px;
  border-radius:22px;
  border:1px solid var(--green-dark);
  color:var(--green-dark);
}

/* ---------- DOMAINES ---------- */
.domains{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.domain{
  background:rgba(0,0,0,0.08);
  padding:14px;
  border-radius:16px;
  text-align:center;
}

/* ---------- PROJETS ---------- */
.projets-premium{
  max-width:1400px;
  margin:20px auto;
  padding:20px 30px;
}

.projets-titre{
  text-align:center;
  font-size:1.4rem;
  margin:40px 0 20px;
  color:#1aa784;
}

.projets-ligne{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.projet-card{
  width:220px;
  height:220px;
  background:white;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
  transition:.25s;
}

.projet-card:hover{
  transform:translateY(-6px) scale(1.03);
}

.projet-card iframe{
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
}

/* ---------- RÉSULTATS ---------- */

  .resultats-section{
  background:#f4fff6;
  padding:60px 20px;
  text-align:center;
color:#1565c0;
}


  /****
.resultats-section{
  background: linear-gradient;
    180deg,
    #dff3fa 0%,
    #c6e6f3 100%
 text-align:center;
 
}
***/


.resultats-section{
  background: linear-gradient(
    180deg,
    #dff3fa 0%,
    #c6e6f3 100%
  );
}


.resultats-intro{
  max-width:700px;
  margin:0 auto 30px;
}

.resultats-grid{
  display:flex;
  justify-content:center;
  gap:1%;
  
}

.resultat-card{
  width:22%;
  height:160px;
  background:white;
  border-radius:12px;
  padding:20px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.resultat-card h3{
  font-size:20px;
 

 color:#1565c0; 
}   



.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.impact-item {
    background: rgba(255,255,255,0.12);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}



/* ---------- FOOTER ---------- */
.footer-frame{
  width:100%;
  height:80px;
  border:0;
}


  /**** Page  ***/

  /* ================= LAYOUT GLOBAL ================= */

.page{
  display:grid;
  grid-template-areas:
    "header header"
    "menu main"
    "footer footer";

  grid-template-rows: 90px 1fr 70px;  /* header / contenu / footer */
  grid-template-columns: 220px 1fr;  /* menu / contenu */

  height:100vh;
  overflow:hidden;
}

/* zones */

.header-frame{
  height:130px;
  overflow:hidden;
}

  /*** .header-zone{
  height:130px;
  border:0;
  display:block;
  background:#002b22;  /* même couleur que le header */
}
   **/

.menu-zone{
  grid-area: menu;
  overflow:auto;
}

.main-zone{
  grid-area: main;
  overflow:auto;
  padding:10px;
}

.footer-zone{
  grid-area: footer;
}


/* Réduction texte encarts résultats */

/* IMPORTANT: ne pas couper la popup */
.projet-card{
  overflow: visible; /* remplace overflow:hidden */
}

/* Popup globale */

  
/* ================= POPUP PROJET ================= */

.popup-projet{
  position: absolute;
  width: 330px;
  height: 330px;

  background: #f0fff6;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);

  display: none;
  z-index: 99999;
  overflow: hidden;

  pointer-events: none;
}

.popup-logo{
  height: 55%;
  background: white;
}

.popup-logo iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

.popup-text{
  height: 45%;
  padding: 10px;
  font-size: 12px;
  color: #083b2e;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup-text h3{
  font-size: 13px;
  margin-bottom: 6px;
  color: #0a5f8f;
}

 /*** footer ***/


.resultat-card{
  width:22%;
  height:140px;
  background:white;
  border-radius:12px;
  padding:20px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}


  /***  .footer-sin {
  position: relative;
  height: 10vh;              
  margin-bottom: 3px;       
  background: linear-gradient(90deg, #0c6f5c, #0a5f8f);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

  ***/

/* Footer adaptatif (taille & charte) */
@media (max-width: 700px){
  footer{
    font-size: 0.8em;
    padding: 9px 10px;
    min-height: 40px;
  }
}
.footer-content {
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1;
}

  //=============  //

/* ================= HEADER SANS ASCENSEUR ================= */

.header-zone{
  height:20vh;          /* même hauteur que le header interne */
  min-height:103px;
  border:0;
  overflow:hidden;      /* supprime ascenseur */
  display:block;
}

/* Sécurité iframe */
.header-zone iframe{
  width:100%;
  height:100%;
  border:0;
  overflow:hidden;
}

/* Empêche scroll interne */
iframe{
  overflow:hidden;
}

/* Layout stable */
.page{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

.main-zone{
  flex:1;
  overflow:auto;
}