body{
    background-color:#f7f6f1;
    padding-top: 55px; /* Pour garder header visible au scroll si ton header fait 60px de haut */
    min-width: 150px;
}

html {
  scroll-behavior: smooth;
}

/*///////////////////////////////////////////////////////*/
/* Mise en forme du header pour le menu haut de page*/
/*///////////////////////////////////////////////////////*/
header {
    display: flex;                  /* Active le mode flex */
    border-bottom: solid 2px #4b75b6;
    height: 60px;
    align-items: center;            /* Centre les éléments verticalement */
    transition: height 0.3s ease;   /* gère l'effet zoome de 3px sur l'hover*/
    background-color:#f7f6f1;     /*pour le scroll, permet de conserver le fond du header*/
    position: fixed;                /* fixe le header en haut de la fenêtre*/
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;                  /* garde le header au dessus des éléments de la page*/
    overflow: visible;
}

header:hover {
    background-color: white;
    height: 63px;
}

/*Mise en forme du logo à droite*/
#logo img {
    height: 50px;
    margin: 5px 5px 0 10px;
}

/* #bandeau contient tous les menus*/
#bandeau {
    display: flex;              /* Active le mode flex */
    align-items: center;        /* Centre les éléments verticalement */
    gap: 30px;                  /* Espace entre les menus */
    padding: 0 0 10px 20px;     /* Optionnel : ajoute un peu d’espace autour haut droite bas gauche*/
    
}

/*Mise en forme des titres du menu*/
#bandeau .titre{
    font-size: 20px;
    color:  #1958b6;
}

/*gère les effet au passage de souris sur les titre*/
#bandeau .menu:hover{
  transform: scale(1.05);
  filter: brightness(1.3);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

#bandeau .menu a {
    text-decoration: none;        /* enlève le souolignage de "présentation" et "lancer le calculateur"*/
}






#bandeau .menu.toggleable .arrow{
    color: #1958b6;             /* Choisis la couleur que tu veux */
    font-size: 1.6em;             /* Optionnel : agrandir la flèche */
    transition: transform 0.3s ease; 

}

/* Quand le sous-menu est ouvert */
#bandeau .menu.toggleable:hover .arrow {
  transform: rotate(180deg);
}


















#bandeau .menu.toggleable{
    display: flex;                /* Active le mode flex */
    align-items: center;          /* Centre les éléments verticalement (flèche et titres)*/
    position: relative;           /* nécessaire pour positionner le sous-menu */
     width: fit-content;          /* permet au menu de s'adapter à son contenu*/
}

/* permet de gérer les effets sur les titres du menu*/
#bandeau .menu, .menu.toggleable{
    transition: filter 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease; 
}

/* mise en forme des sous-menus*/
#bandeau .menu.toggleable .submenu{
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 100%;                      /* place le sous-menu juste sous le menu parent */
    width: 100%;                    /* permet au submenu de prendre la largeur du parent (menu toggleable)*/
    visibility: hidden;             /*cache le sous menu au départ*/
    transform: translateY(-10px);   /* le cache au dessus du menu pour un effet déroulant vers le bas ensuite*/
    transition: all 0.1s ease;      /* on adoucit les transition */
    z-index: 1000;                  /*permet d'apparaitre au dessus des autres éléments*/
    padding-bottom: 5px;            /* permet de décoller le dernier titre du sous menu du bas du sous menu*/
}

/*Mise forme de l'effet déroulant du sous menu au passage sur un titre à flèche*/
#bandeau .menu.toggleable:hover .submenu {
    visibility: visible;            /* le sous menu devient visible*/
    transform: translateY(0px);       /* on déroule vers le bas (-px au départ)*/
}

/*Mise en forme des titres des sous menus*/
#bandeau .menu.toggleable .submenu a{
    display: block;                 /*place les titres des sous menus en colonne*/
    color: #0f51b6;
    text-decoration: none;          /* empêche de souligner les titres des sous menus*/
    padding: 5px 10px;              /* décalage interne vertical et horizontal*/
}   


/*Pour femer les menu au clic en désactivant le hover (pour js)*/
/*-------------------------------------------------------------*/
.menu.toggleable.active .submenu {
    max-height: 300px;
    opacity: 1;
    pointer-events: auto;
}

/* Désactivation du hover temporaire */
body.force-hover-disable .menu.toggleable:hover .submenu,
.menu.toggleable.force-close .submenu,
.menu.toggleable.force-close:hover .submenu {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

/*-------------------------------------------------------------------*/



#burger {
  display: none;
  background: transparent;
  border: none;
  position: relative;
  cursor: pointer;
  z-index: 3000;

}
/*///////////////////////////////////////////////////////*/
/* FIN de la mise en forme du header pour le menu haut de page*/
/*///////////////////////////////////////////////////////*/

/*///////////////////////////////////////////////////////*/
/* Mise en forme du bandeau hero-section avec image*/
/*///////////////////////////////////////////////////////*/
.hero-section {
  aspect-ratio: 32 / 11;                /*adapte la hauteur automatiquement selon la largeur */
  width: 100%;                          /*Le bloc prend toute la largeur disponible du parent.*/
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('assets/images/bandeauAccueil.avif');
  background-size: cover;               /*conserve le ratio sans rognage */
  background-repeat: no-repeat;
  background-position: center;          /*Centre l’image dans le bloc.*/
  display: flex;                        /*Utilise Flexbox pour centrer verticalement et horizontalement les éléments enfants (le titre et le paragraphe).*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;                        /*Ajoute de l’espace intérieur autour du contenu.*/
  box-sizing: border-box;               /*nclut le padding dans le calcul de la largeur/hauteur du bloc.*/
}

.hero-section h1{
  color: white;
  font-size: clamp(1.5rem, 4vw, 3rem);  /*taille fluide entre 1.5rem et 3rem selon largeur écran */
  text-align: center;
}

.hero-section p{
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  max-width: 800px;                      /*limite la largeur pour une meilleure lisibilité */
  margin: 20px auto 0;
  line-height: 1.6;
  color: white;
  text-align: left;
}
/*///////////////////////////////////////////////////////*/
/* Fin de mise en forme du bandeau hero-section avec image*/
/*///////////////////////////////////////////////////////*/

/*///////////////////////////////////////////////////////*/
/* Responsive breakpoint en dessous de 710px*/
/*///////////////////////////////////////////////////////*/
@media screen and (max-width: 710px){
    /* Affiche le bouton burger */
    #burger {
        display: flex;               /*Rend l’élément visible et lui permet de s’afficher comme un bloc */
        font-size: 2em;              /*Agrandit la taille du symbole burger (≡) à 2 fois la taille de la police par défaut.*/
        background: none;                 
        border: none;
        color: #1958b6;
        cursor: pointer;
        position:absolute;          /*Permet de placer précisément le bouton dans le header, indépendamment du flux normal.*/
        top: 10px;                   /*Décale le bouton de 10 pixels depuis le haut du parent (header).*/
        right: 10px;
        z-index: 9000;
    }

    /*Cache le bandeau sur mobile*/
    #bandeau{  
        /*display:none masque bien le bandeau mais le retire du flux et empeche les animation*/                              
        flex-direction: column;                     /*place les titre du menu en colonne*/
        align-items: stretch;
        background-color: #fff;
        position: absolute;
        top: 60px;                                  /*Décale le menu de 60 pixels vers le bas, juste sous le header (qui fait 60px de haut*/
        left: 0;                                    /*Aligne le menu à gauche de la page.*/
        width: 100%;                                /*Le menu prend toute la largeur de l’écran.*/
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);    /*Ajoute une ombre douce sous le menu pour le faire ressortir visuellement.*/
        z-index: 1000;                              /*Place le menu au-dessus des autres éléments de la page.*/
        padding: 20px;                              /* Ajoute de l’espace intérieur tout autour du menu.*/
        transition: max-height 0.5s ease, opacity 0.5s ease;
        max-height: 0;                              /*cache le bandeau mais permet les animaitions pas comme display:none*/
        opacity: 0;                                 /*le rend invisible*/
        overflow: hidden;                           /* empêche le contenu de dépasser pendant l'animatio*/
    }

    /*Affiche le bandeau au clic sur le burger i.e. quand le bandeau à la classe active (via javascript)*/
    #bandeau.active {
        max-height: 500px;                      /* ou une valeur suffisante pour contenir ton menu */
        opacity: 1;                             /* le rend visible*/
    }
    /* Sous-menus deviennent statiques sur mobile */
    #bandeau .menu.toggleable .submenu{
        position: static;                   /*Le sous-menu devient statique, c’est-à-dire qu’il suit le flux normal du document.*/
        visibility: visible;                /*On évite les effets de survol (hover) qui ne fonctionnent pas bien sur écran tactile.*/
        transform: none;                    /*Le sous-menu s’affiche directement, sans animation.*/
        box-shadow: none;                   /*Sur mobile, on simplifie le design pour plus de clarté et de lisibilité.*/
        padding-left: 10px;                 /*Ajoute un petit décalage à gauche pour que les sous-menus soient légèrement indentés.*/
    }

    /* les div possédfant une classe menu en colonne avec séparation */
    #bandeau .menu {
        padding: 15px 0;                    /*Décale un peu les menus par le haut*/
        border-bottom: 1px solid #eee;    /* sépare physiquement les menus avec un trait*/
    }

    /*enlève le padding au toggleable pour améliorer le centrage*/
    #bandeau .toggleable {
        padding-top: 0; 
    }   

    /* Ajustement des titres */
    #bandeau .titre {
        font-size: 18px;
    }
    /* Flèche plus grande pour le tactile */
    #bandeau .arrow {
        font-size: 1.2em;                   /* on grossit 1 poil la flèche*/
        transform: rotate(-90deg);          /*retourner la flèche sachant que les sous-menus sont sur le côté*/
    }

    /*///////////////////////////////////////////////////////*/
                 /*animation du burger via CSS et JS*/
    /*Attention, si on supprimer cette partie, il faut remplire la div burger du html par ☰*/
    /*///////////////////////////////////////////////////////*/

    /*permet d'afficher un burger et de l'animer alors que la div du html est vide*/
    #burger::before {
        content: "☰";
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: 1;                         /* assure qu'il reste visible mais pas obligatoire*/
        transform: rotate(0deg);
    }

    #burger.active::before {
        content: "✖";                      /* ou "\2716" pour une croix plus fine */
        opacity: 1;                         /* assure qu'il reste visible mais pas obligatoire*/
        transform: rotate(180deg);
    }

    

}

/*///////////////////////////////////////////////////////*/
/* FIN du Responsive breakpoint en dessous de 525px*/
/*///////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////*/
/* Mise en forme du bloc main*/
/*///////////////////////////////////////////////////////*/

main {
    max-width: 1000px;              /*Espace de la colonne centrale pour plus de visibilité*/
    margin: 0 auto;                 /*centre horizontalement dans son conteneur.*/
    padding: 40px 20px;             /*marge interne de 40 en haut et bas et 20 sur les cotés*/
    font-family: 'Segoe UI', sans-serif;
    color: #333;
}

/*les différentes sections du documents*/
section {
    margin-bottom: 60px; /*chaque section écarte la suivante de 60px vers le bas*/
}

/*les différents titres du documents*/
h2 {
    color: #222;
    margin-bottom: 10px;
    font-size: clamp(1.3rem, 4vw, 1.9rem);  /*taille fluide entre 1.5rem et 3rem selon largeur écran */
    text-decoration: underline;
}
h3{
  font-size: 140%;
}

h4{
  text-decoration: underline;
  font-size: 120%;
  color: #2081ff;
}
h5{
  font-size: 120%;
}
p, ul {
    line-height: 1.6;                /*espace entre les lignes pour plus de lisibilté*/
}

/*gestion des puces des listes*/
ul {
    padding-left: 20px;             /*décalage des items de 20px / bords gache du cadre*/
}


/* Mise en forme de la section nouveauté*/
/*///////////////////////////////////////////////////////*/
#blur{
background-image:url(assets/images/blur.jpg); /*texture pour l'effet blur*/
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}

#nouveaute{
backdrop-filter: blur(10px);                  /* Floute l’arrière-plan derrière cet élément */
border-radius: 10px;
padding: 10px 10px;
}
/* Ensemble titre clignotant et cadre des dates*/
.TitreEtDates {
  display: flex;
  flex-direction: column;                     /* empile les éléments */
  gap: 1rem;
}

/*Titre clignotant*/
.encap {
  display: flex;                            /*Active Flexbox pour aligner les éléments .word1 et .word2*/
  flex: 1;                                  /*Active Flexbox pour aligner les éléments .word1 et .word2*/
  justify-content: left;                    /*Aligne les éléments à gauche dans le conteneur. (flex-start est équivalent)*/
  align-items: center;                      /*Aligne les éléments verticalement au centre du conteneur.*/
  height: 3rem;                             /*Définit une hauteur fixe de 3 rem (≈48px si 1rem = 16px).*/
  font-family: 'Roboto', sans-serif;
  font-weight: 300;                         /*Texte en gras léger (300 = light).*/
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);  /* s’adapte entre 1rem et 2rem */
  color: #2081ff;
  overflow: hidden;                         /*Cache tout ce qui dépasse du conteneur .encap (utile si animation ou texte trop long)*/
  position: relative;                       /*Prépare le conteneur à recevoir des éléments positionnés en absolu à l’intérieur (même si ce n’est pas utilisé ici)*/
  margin-top: 1rem;
  margin-left: 0px;
  gap: 1vw;                                 /* Ajoute un espacement horizontal entre .word1 et .word2, proportionnel à la largeur de l’écran */
}

.word2 span {
  display: inline-block;                    /*Permet d’appliquer des animations et des dimensions au texte*/
  opacity: 0;                               /*Le texte est invisible au départ*/
  animation: fadeLoop 3s ease-in-out infinite; /* Lance l’animation fadeLoop avec effet doux (ease-in-out)*/
}

@keyframes fadeLoop {
  0% {
    opacity: 0;                             /*De 0% à 30% : le texte apparaît*/
  }
  30% {
    opacity: 1;
  }                                         /*De 30% à 70% : le texte reste visible*/
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;                             /*De 70% à 100% : le texte disparaît*/
  }
}

.dateDNB {
  position: relative;                                   /*Permet de positionner des éléments enfants en absolute si besoin. Ici, ça prépare le terrain.*/
  max-width: 100%;                                      /*Le bloc ne dépassera jamais la largeur de son conteneur. Il est fluide et responsive.*/
  box-sizing: border-box;                               /*Inclut les padding et bordures dans le calcul de la largeur/hauteur. Très utile pour éviter les débordements.*/
  display: inline-block;                                /*Le bloc se comporte comme un élément en ligne, mais accepte les dimensions (width, height, etc.).*/
  margin-top: 0.5rem;
  margin-left: 0px;
  padding: 15px;
  font-family: Arial, sans-serif;                       /*Utilise une police classique et lisible.*/
  border: 3px solid transparent;                        /*Crée une bordure invisible mais avec une épaisseur de 3px. Elle sert de base pour le dégradé animé.*/
  border-radius: 10px;                                  /*Arrondit les coins du cadre pour un effet plus doux et moderne.*/
  background:
    linear-gradient(#fff, #fff) padding-box,        /*1er fond intérieur blanc*/
    linear-gradient(45deg, #ff6ec4, #7873f5, #4ade80, #facc15) border-box; /*2nd fond dégradé sur bordure */
  background-size: 300% 300%;                           /*Agrandit le fond pour permettre une animation fluide du dégradé.*/
  background-origin: border-box;                        /* Le fond s’applique à partir de la bordure, pas du contenu.*/
  animation: rotateBorder 3s linear infinite;           /*Lance l’animation de 3s à vitesse constante (linear) à l'infini*/
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);         /*Ajoute une ombre douce pour donner du relief au cadre.*/
  z-index: 1;                                           /*Place le cadre au-dessus des éléments de même niveau si besoin.*/
}

/* Animation du dégradé */
@keyframes rotateBorder {
  0% {
    background-position: 0% 50%;                        /*Départ à gauche*/
  }
  50% {
    background-position: 100% 50%;                      /*Milieu à droite*/
  }
  100% {
    background-position: 0% 50%;                        /*Retour à gauche*/
  }
}

/* Pour le texte interne (facultatif, juste du style) */
#titreDates {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 8px;
  text-decoration: underline;
}

#dates {
  margin: 0;
  padding-left: 20px;
}


#simulateurLink{
  text-decoration: none;                                  /*Retire le soulignage du lien "simulateur"*/
  color: #222;
}


.anchor-offset {
  scroll-margin-top: 80px;                                /* Décalage de 80px depuis le haut pour passer sous le header et se voir*/
}


.iconeSection{                                            /* icône de début de section*/
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("./assets/icons/icons_titre.webp") no-repeat center/contain;
  vertical-align: middle;
  margin-right: 8px;
}


.iconeSoustitre{                                            /* icône de début de section*/
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("./assets/icons/icons_soustitre.webp") no-repeat center/contain;
  vertical-align: middle;
  margin-right: 8px;
}

.iconeCalendar{
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("./assets/icons/icon_calendar.webp") no-repeat center/contain;
  vertical-align: middle;
  margin-right: 8px;
}

.link{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("./assets/icons/link.webp") no-repeat center/contain;
  vertical-align: middle;
  margin-right: 0px;
}


.download{
  height: 30px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  font-weight: bold;
}

.titreConseil{
  margin-bottom: 7px;
}
 .paraConseil{
  margin-top: 8px ;
 }




/* Mise en forme de la section nouveauté*/
/*///////////////////////////////////////////////////////*/
.tableau{
  padding-top: 20px;            /*décolle légèrement le tableau du cadre précédent*/
}
img {
    max-width: 100%;
    height: auto;
    display: block;             /*transforme l’image en bloc (par défaut, une image est inline)*/
    margin: 0 auto;             /*centre horizontalement dans son conteneur.*/
}


/*///////////////////////////////////////////////////////*/
/* Fin de mise en forme du bloc main*/
/*///////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////*/
/* Mise en forme du footer*/
/*///////////////////////////////////////////////////////*/
footer {
  background-color: #3663a5;
  color: #e0e0e0;
  padding: 10px 10px 10px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 40px;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 30px;
  
}
.footer-section {
  padding: 5px 0; 
}


.footer-section h4 {
  font-size: 15px;
  margin-top: 4px;
  margin-bottom: 8px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-section p,
.footer-section li {
  margin: 4px 0;
}

.footer-section a {
  color: #90caf9;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: #64b5f6;
}

.footer-bottom {
  text-align: center;

  border-top: 1px solid #333;

  font-size: 12px;
  color: #aaaaaa;
}

/*responsive et règle les bugs du header qui disparait... (bizarre mais ok !*/
@media (max-width: 380px) {
  .footer-container {
    grid-template-columns: 1fr; /*force les sections à s'empiler verticalement sur une seule */
    padding: 0 15px;
    gap: 20px;/*diminue l’espace entre les sections pour une meilleure lisibilité.*/
  }

  .footer-section {
    padding: 10px 0;
  }
}