html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;   /* autorise le scroll vertical */
  overflow-y: auto;
}

/* Limite hauteur header */
header{
    height: 28h;
    max-height: 30vh;
    overflow: hidden;
}

/* Adapter le logo au header */
.logo{
    height: 100%;
    max-height: 28vh;
}



  /*** lien ***/

 a {
    color: inherit;          /* hérite la couleur du parent */
    text-decoration: none;   /* supprime le soulignement */
    font-family: inherit;    /* garde la police */
}


.header-frame{
  height: 120px;
 width:  100%; 
}




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

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


/* sidebar */
.sidebar{
position:fixed;
top:80px;
left:0;
width:200px;
height:calc(100vh - 80px);
background:#062d22;
padding:15px;
border-right:1px solid #39ffb4;
}

.sidebar h3{
text-align:center;
color:#39ffb4;
}

.accordion{
background:none;
border:none;
color:white;
width:100%;
text-align:left;
padding:6px 0;
cursor:pointer;
}

.panel{
display:none;
padding-left:10px;
}

.panel a{
display:block;
color:#9af7d2;
padding:3px 0;
}

/* contenu */
.content{
margin-left:200px;
padding: 10px;
}

 //==== Menu latéral ===//

 /* Logo gauche */
.logo {
    font-size: 22px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

.logo span {
    color: #7fffd4;
}

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


/* encarts */
.wrapper{
display:flex;
gap:20px;
}

.box{
width:40%;
 /** background: rgb(255, 230, 201)  **/

 background: rgb(200, 230, 201)

border:1px solid #39ffb4;
padding:15px;
border-radius:10px;
}

.box h3{
color:#4CAF50
text-align:center;
}

.menu-frame{
position:fixed;
top:80px;
left:0;
width:200px;
height:calc(100vh - 80px);
border:0;
}


/* MENU LATERAL */

.sidebar{
position:fixed;
top:80px;
left:10;
width:120px;
height:calc(100vh - 80px);
background:#062d22;
padding:15px;
font-family:Segoe UI, Arial;
border-right:1px solid #39ffb4;
overflow:auto;
}

.menu-title{
text-align:center;
color:#39ffb4;
margin-bottom:10px;
}

.accordion{
background:none;
border:none;
color:white;
width:100%;
text-align:left;
padding:6px 0;
cursor:pointer;
font-size:14px;
}

.accordion:hover{
color:#39ffb4;
}

.panel{
display:none;
padding-left:10px;
font-size:13px;
}

.panel a{
display:block;
color:#9af7d2;
padding:3px 0;
text-decoration:none;
}

.panel a:hover{
color:#39ffb4;
}


.programme-box {
    background-color: #c8e6c9;  /* vert praliné */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}


 //=** ====  Menu lateral ===//

/* ==============================
   MENU LATERAL STI2D SIN
   ============================== */

:root{
  --sin-bg: #071a14;
  --sin-panel: #062d22;
  --sin-panel-2: #02110c;
  --sin-border: rgba(57,255,180,.35);
  --sin-accent: #39ffb4;      /* vert STI2D */
  --sin-accent-2:#9af7d2;
  --sin-text: #eafff7;
  --sin-muted: rgba(234,255,247,.75);
  --sin-radius: 14px;
}
.logo {
    color: var(--vert-fonce);
}

.sin-accent {
    color: var(--jaune-sin);
}


/* si le menu est chargé en iframe */
.menu-body{
  margin:0;
  background: transparent;
  color: var(--sin-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

/* conteneur */
    /* .sin-sidebar{
    // width: 210px;

   width: 30%;
 

  min-height: 100vh;
  background: linear-gradient(180deg, var(--sin-panel), var(--sin-panel-2));
  border-right: 1px solid var(--sin-border);
  padding: 14px 12px;
  box-sizing: border-box;
  overflow: auto;
}  +/
 .sin-sidebar{
  width: 20%;
  height: calc(100vh - 80px);
  background: linear-gradient(180deg, var(--sin-panel), var(--sin-panel-2));
  border-right: 1px solid var(--sin-border);
  padding: 14px 12px;
  box-sizing: border-box;
  overflow: auto;
}



/* en-tête */
.sin-sidebar__brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 8px 6px 14px;
  border-bottom: 1px solid rgba(57,255,180,.18);
  margin-bottom: 10px;
}

.sin-badge{
  width: 52px;
  height: 36px;
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing:.5px;
  color: #04110d;
  background: linear-gradient(135deg, rgba(57,255,180,.95), rgba(154,247,210,.75));
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(57,255,180,.3);
}

.sin-brand-title{
  font-weight: 700;
  font-size: 14px;
  color: var(--sin-text);
  line-height: 1.2;
}

.sin-accent{
  color: #ffd400; /* ✅ SIN en jaune vif */
  font-weight: 700;
}

/* bouton accordéon */
.sin-acc{
  width:80%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(57,255,180,.20);
  border-radius: var(--sin-radius);
  padding: 10px 10px;

  color: var(--sin-text);
  cursor:pointer;
  margin: 10px 0 6px;
  text-align:left;
}

.sin-acc:hover{
  border-color: rgba(57,255,180,.45);
}

.sin-acc__icon{ width: 22px; text-align:center; }
.sin-acc__label{ flex:1; font-weight: 700; font-size: 13.5px; }
.sin-acc__chev{ opacity:.9; transition: transform .15s ease; }

.sin-acc[aria-expanded="true"] .sin-acc__chev{
  transform: rotate(90deg);
}

/* panels déroulants */
.sin-panel{
  padding: 6px 6px 8px;
  margin-bottom: 6px;
  border-left: 1px solid rgba(57,255,180,.18);
  margin-left: 6px;
}

.sin-link{
  display:block;
  text-decoration:none;
  color: var(--sin-accent-2);
  padding: 6px 6px;
  border-radius: 10px;
  font-size: 13px;
}

.sin-link:hover{
  background: rgba(57,255,180,.10);
  color: var(--sin-accent);
}

/* pied du menu */
.sin-sidebar__foot{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(57,255,180,.14);
}

.sin-footnote{
  font-size: 12px;
  color: var(--sin-muted);
}


   //==== Menu olateral ===//

 
/* ==============================
   MENU LATERAL STI2D SIN
   ============================== */

:root{
  --sin-bg: #071a14;
  --sin-panel: #062d22;
  --sin-panel-2: #02110c;
  --sin-border: rgba(57,255,180,.35);
  --sin-accent: #39ffb4;      /* vert STI2D */
  --sin-accent-2:#9af7d2;
  --sin-text: #eafff7;
  --sin-muted: rgba(234,255,247,.75);
  --sin-radius: 14px;
}

/* si le menu est chargé en iframe */
.menu-body{
  margin:0;
  background: transparent;
  color: var(--sin-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

/* conteneur */
    /* .sin-sidebar{
    // width: 210px;

   width: 30%;
 

  min-height: 100vh;
  background: linear-gradient(180deg, var(--sin-panel), var(--sin-panel-2));
  border-right: 1px solid var(--sin-border);
  padding: 14px 12px;
  box-sizing: border-box;
  overflow: auto;
}  +/
 .sin-sidebar{
  width: 20%;
  height: calc(100vh - 80px);
  background: linear-gradient(180deg, var(--sin-panel), var(--sin-panel-2));
  border-right: 1px solid var(--sin-border);
  padding: 14px 12px;
  box-sizing: border-box;
  overflow: auto;
}



/* en-tête */
.sin-sidebar__brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 8px 6px 14px;
  border-bottom: 1px solid rgba(57,255,180,.18);
  margin-bottom: 10px;
}

.sin-badge{
  width: 52px;
  height: 36px;
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing:.5px;
  color: #04110d;
  background: linear-gradient(135deg, rgba(57,255,180,.95), rgba(154,247,210,.75));
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(57,255,180,.3);
}

.sin-brand-title{
  font-weight: 700;
  font-size: 14px;
  color: var(--sin-text);
  line-height: 1.2;
}

.sin-accent{
  color: #ffd400; /* ✅ SIN en jaune vif */
  font-weight: 700;
}

/* bouton accordéon */
.sin-acc{
  width:80%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(57,255,180,.20);
  border-radius: var(--sin-radius);
  padding: 10px 10px;

  color: var(--sin-text);
  cursor:pointer;
  margin: 10px 0 6px;
  text-align:left;
}

.sin-acc:hover{
  border-color: rgba(57,255,180,.45);
}

.sin-acc__icon{ width: 22px; text-align:center; }
.sin-acc__label{ flex:1; font-weight: 700; font-size: 13.5px; }
.sin-acc__chev{ opacity:.9; transition: transform .15s ease; }

.sin-acc[aria-expanded="true"] .sin-acc__chev{
  transform: rotate(90deg);
}

/* panels déroulants */
.sin-panel{
  padding: 6px 6px 8px;
  margin-bottom: 6px;
  border-left: 1px solid rgba(57,255,180,.18);
  margin-left: 6px;
}

.sin-link{
  display:block;
  text-decoration:none;
  color: var(--sin-accent-2);
  padding: 6px 6px;
  border-radius: 10px;
  font-size: 13px;
}

.sin-link:hover{
  background: rgba(57,255,180,.10);
  color: var(--sin-accent);
}

/* pied du menu */
.sin-sidebar__foot{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(57,255,180,.14);
}

.sin-footnote{
  font-size: 12px;
  color: var(--sin-muted);
}

   /*** Menu Lateral ===***/

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

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

body {
    font-family: "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(180deg, #e6f7ef, #bfe9d6);
    color: var(--text-dark);
   margin:0;
  padding:0;
  




}

/* ================= HEADER ================= */
/* ================= HEADER ================= */

.header {
    background: #0e3b2f;
    width: 100%;
}

.header-bar {
    max-width: 1400px;
    margin: auto;
    padding: 14px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo gauche */
.logo {
    font-size: 22px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

.logo span {
    color: #7fffd4;
}

/* Menu centre */
.nav {
    display: flex;
    gap: 26px;
    font-size: 14px; 
}

.nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
   font-size: 14px; 
}

.nav a:hover {
    color: #7fffd4;
}

/* Connexion droite */
.header-actions {
    display: flex;
   
    gap: 12px;
}

.btn-login {
    background: #1a7f63;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
align-items: right;
}

/* ================= FOOTER ================= */

.footer {
    background: #08241d;
    color: white;
    padding: 20px 30px;
}

.footer-bar {
    max-width: 1400px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-logo {
    font-weight: bold;
}

.footer-menu {
    opacity: 0.85;
}

.footer-right {
    opacity: 0.6;
}

/* ================= MAIN ================= */
 .main{
margin-top:10px;
padding-top:0;
}


 


/* ================= HERO ================= */
.hero-banner{
margin-top:0;
padding-top:5px;
}


.hero-banner h1 {
    font-size: 36px;
}

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

.hero-banner p {
    margin: 10px 0 16px;
}

.btn-main {
    display: inline-block;
    background: var(--green-main);
    padding: 12px 30px;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 600;
    color: #063226;
}

/* ================= TOP CARDS ================= */
.top-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

/* CONTENEUR DES ENCARTS */

 /** .top-cards{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10%;
    margin-top:10px;
}
  ***/

/* LARGEUR DES CARTES */

/* CONTENEUR DES ENCARTS */

/* CONTENEUR DES CARTES */
.top-cards{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2vw; /* espace dynamique entre cartes */
    margin-top:10px;
}

/* CARTES */
.card{
    width:20%;
    background:#f5fff9; /* plus clair que le fond */
    border-radius:12px;
    padding:16px;
    text-align:center;
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* texte lisible */
.card h3{
    margin:0 0 6px 0;
}

.card p{
    margin:0;
}

/* ================= AI SECTION ================= */
  /** .ai-section {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 22px;
}

  **/

.ai-left img,
.ai-right img {
    width: 50%;
    max-height: auto;
    object-fit: contain;
}

.ai-center {
    background: var(--glass);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
}

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

/* ================= DOMAINS ================= */
.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;
    font-size: 14px;
}

/* ================= FOOTER ================= */
.footer {
    background: rgba(0,0,0,0.08);
    margin-top: 10px;
}

.footer-inner {
    max-width: 1200px;
    margin: auto;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.footer-links a {
    margin-left: 12px;
    text-decoration: none;
    color: var(--text-dark);
}


==================




/* CONTENEUR COURS */
.cours-container {
    display: flex;
    gap: 60px;
    padding: 40px 80px; /* marges gauche/droite */
    background: #f5fff9;
}

/* Colonnes */
.colonne {
    flex: 1;
}

/* Titres */
.colonne h2 {
    color: #0f4c3a;
    margin-bottom: 20px;
}

/* Listes */
.colonne ul {
    list-style: none;
    padding: 0;
}

.colonne li {
    background: white;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-left: 5px solid #1e7c61;
    border-radius: 6px;
}



.cours-container {
    display: flex;
    gap: 40px;

    max-width: 1600px;
    margin: auto;
    padding: 40px 20px;
}

  /* Header Frame  */
 
        /* contenu page */
        .page-content {
            padding: 40px 20px;
            max-width: 1400px;
            margin: auto;
        }


 //*** liste des cours ===*/

/* ================= PAGE COURS ================= */

/* ===============================
   SECTION LISTE DES COURS
================================ */

/* ================= COURS PAGE ================= */

/* ===== PAGE COURS ===== */

.page-content {
    padding: 40px 20px;
}

/* conteneur central */
.cours-wrapper {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 30px; /* marge entre les deux encarts */
}

/* encarts */
.cours-box {
    background: #e9f7f2; /* vert pâle STI2D */
    width: 45%;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* titres encarts */
.cours-box h3 {
    text-align: center;
    color: #0f4c3a;
    margin-bottom: 20px;
    font-size: 22px;
}

/* liste */
.cours-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cours-box li {
    padding: 8px 0;
    border-bottom: 1px solid #cde7df;
    font-size: 16px;
}

/* responsive mobile */
@media (max-width: 900px) {
    .cours-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .cours-box {
        width: 90%;
    }
}


/* ==============================
   MENU LATERAL STI2D SIN
   ============================== */

:root{
  --sin-bg: #071a14;
  --sin-panel: #062d22;
  --sin-panel-2: #02110c;
  --sin-border: rgba(57,255,180,.35);
  --sin-accent: #39ffb4;      /* vert STI2D */
  --sin-accent-2:#9af7d2;
  --sin-text: #eafff7;
  --sin-muted: rgba(234,255,247,.75);
  --sin-radius: 14px;
}

/* si le menu est chargé en iframe */
.menu-body{
  margin:0;
  background: transparent;
  color: var(--sin-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

/* conteneur */
   .sin-sidebar{
  width: 210px;
  // min-height: 100vh;
  background: linear-gradient(180deg, var(--sin-panel), var(--sin-panel-2));
  border-right: 1px solid var(--sin-border);
  padding: 14px 12px;
  box-sizing: border-box;
  overflow: auto;
  height: calc(50vh - 40px);
}

  

/* en-tête */
.sin-sidebar__brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 8px 6px 14px;
  border-bottom: 1px solid rgba(57,255,180,.18);
  margin-bottom: 10px;

}
  /**
.sin-badge{
  width: 52px;
  height: 36px;
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing:.5px;
  color: #04110d;
  background: linear-gradient(135deg, rgba(57,255,180,.95), rgba(154,247,210,.75));
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(57,255,180,.3);
}

 **/

.sin-sidebar{
  width: 210px;
  height: auto;
  background: linear-gradient(180deg, var(--sin-panel), var(--sin-panel-2));
  border-right: 1px solid var(--sin-border);
  padding: 14px 12px;
  box-sizing: border-box;
  overflow: visible;
}


.sin-brand-title{
  font-weight: 700;
  font-size: 14px;
  color: var(--sin-text);
  line-height: 1.2;
}

.sin-accent{
  color: #ffd400; /* ✅ SIN en jaune vif */
  font-weight: 800;
}

/* bouton accordéon */
.sin-acc{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(57,255,180,.20);
  border-radius: var(--sin-radius);
  padding: 10px 10px;

  color: var(--sin-text);
  cursor:pointer;
  margin: 10px 0 6px;
  text-align:left;
}

.sin-acc:hover{
  border-color: rgba(57,255,180,.45);
}

.sin-acc__icon{ width: 22px; text-align:center; }
.sin-acc__label{ flex:1; font-weight: 700; font-size: 13.5px; }
.sin-acc__chev{ opacity:.9; transition: transform .15s ease; }

.sin-acc[aria-expanded="true"] .sin-acc__chev{
  transform: rotate(90deg);
}

/* panels déroulants */
.sin-panel{
  padding: 6px 6px 8px;
  margin-bottom: 6px;
  border-left: 1px solid rgba(57,255,180,.18);
  margin-left: 6px;
}

.sin-link{
  display:block;
  text-decoration:none;
  color: var(--sin-accent-2);
  padding: 6px 6px;
  border-radius: 10px;
  font-size: 13px;
}

.sin-link:hover{
  background: rgba(57,255,180,.10);
  color: var(--sin-accent);
}

/* pied du menu */
.sin-sidebar__foot{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(57,255,180,.14);
}

.sin-footnote{
  font-size: 12px;
  color: var(--sin-muted);
}

.content { margin-left: 230px; }


  /**** Header ===**/

header {
    background: #002b22;
    padding: 0 30px;   /* ← supprime espace vertical */
    height: 95px;      /* hauteur fixe du header */
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.header-sin{
background:linear-gradient(90deg,#062d22,#02110c);
color:white;
padding:15px 30px;
display:flex;
justify-content:space-between;
align-items:center;
font-family:Segoe UI, Arial;
}

.logo{
font-size:22px;
font-weight:bold;
color:#39ffb4;
}

.nav a{
color:white;
text-decoration:none;
margin:0 12px;
font-size: 12px; 

}

.nav a:hover{
color:#39ffb4;
}

.login-btn{
background:#39ffb4;
border:none;
padding:6px 12px;
font-weight:bold;
cursor:pointer;
border-radius:4px;
}


   /*** Footer  ***/

.site-footer {
    height: 120px; /* même valeur que le calcul du main */
    width: 100%;
}

.site-footer iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.ai-center {
    text-align: center;
    max-width: 800px;
    margin: auto;
}

.ai-icon {
    margin-bottom: 20px;
}

.ai-icon img {
    width: 120px;
    height: auto;
}

   /*** Projet d'envergure ****/

/* ================= PROJETS ICÔNES ================= */
/* ================= PROJETS PREMIUM ================= */



/* carte individuelle */
.projet-card {
    width: 230px;
    height: 230px;
    border-radius: 18px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

/* glow STI2D */
.projet-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 14px 28px rgba(0,0,0,0.18),
        0 0 18px rgba(57,255,180,0.35);
}

/* clic tactile */
.projet-card:active {
    transform: scale(0.94);
}

/* iframe purement visuel */
.projet-card iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

/* ===== SECTION PROJETS PREMIUM ===== */



.projets-premium {
    margin-top: 0;

    max-width: 1400px;
    margin: 5px auto 20px;   /* ↓ réduit fortement l’espace en haut */
    padding: 20px 30px;
}



/* Titres */
.projets-titre {
    margin: 40px 0 20px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1f7a4d; /* vert STI2D */
    text-align: center;
  

}

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

.projet-card iframe {
    width: 100%;
    height: 220px;
    border: none;
    overflow: hidden;
    scrollbar-width: none;      /* Firefox */
}

.projet-card iframe::-webkit-scrollbar {
    display: none;              /* Chrome / Edge / Safari */
}


.footer-frame {
    width: 100%;
    height: 90px;
    border: none;
    display: block;
}

/* Images héros + prof IA — arrondi garanti */
   

.ai-left img,
.ai-right img {
    width: 60%;
    height: auto;
    object-fit: cover;
    border-radius: 25px;
   overflow: hidden;
}
.ai-section {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr; /* ← clé du centrage */
    gap: 30px;
    align-items: center;
}

.ai-left,
.ai-right {
    display: flex;
    justify-content: center;
}


/* ================= SECTION RESULTATS ================= */

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

.resultats-section h2 {
    color: #0a6d36;
    font-size: 28px;
    margin-bottom: 10px;
}

.resultats-intro {
    max-width: 700px;
    margin: auto;
    color: #444;
    font-size: 16px;
    margin-bottom: 40px;
}

.resultats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: auto;
}

.resultat-card {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.resultat-card:hover {
    transform: translateY(-5px);
}

.resultat-card h3 {
    font-size: 26px;
    color: #0a6d36;
    margin-bottom: 10px;
}

.resultat-card p {
    font-size: 14px;
    color: #555;
}



.de-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1bb36b;          /* Vert DigitElect */
  font-weight: 700;
  text-decoration: none;   /* pas de soulignement */
}


.de-link:visited{
  color: #1bb36b;          /* garde le vert même après clic */
}

.de-link-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}