/*
couleur 1:#7DB5FA
couleur 2: #064A9D
couleur 3: #FFE0F9
couleur 4: #FFB3F0*/
/* Styles principaux du header et navigation */
header {
  /* header scrolle normalement avec la page */
  position:static;
  /* fond semi-transparent pour voir un peu le contenu derrière */
  background:rgba(230,241,254,.95);
  /* effet flou sur l'arrière-plan du header */
  backdrop-filter:blur(10px);
  /* au-dessus des autres éléments de la page */
  z-index:1000;
  /* ombre douce pour séparer du contenu */
  box-shadow:0 2px 15px rgba(0,0,0,.05);
  padding: 40px 0;
  text-align: center;
  font-size: 15px;
}

header .container .table .ligne {
  /* alignement horizontal des éléments du header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

header .logo .colone img {
  /* image du logo redimensionnée automatiquement */
  max-width: 100px;
  height: auto;
}

header nav ul {
  /* menu horizontal sans puces */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;   
}

header nav ul li {
  display: inline-block;
  margin: 0;
}

header nav ul li a {
  /* style des liens du menu principal */
  text-decoration: none;
  color: #064A9D;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 25px;
  font-weight: bold;
}

header nav ul li a:hover {
  background-color: #064A9D;
  color: #e6f1fe;
  text-decoration: underline;
}
/* Permet à .colone d'être transparent dans la structure du nav */
nav .colone { display: contents; }

/* Section d'accueil avec image de fond et dégradé léger */
#hero.homepage{
  /* grand bloc d'accueil centré verticalement */
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;

  /* superposition d'un dégradé léger sur l'image */
  background:
  linear-gradient(
    rgba(230,241,254,.82),
    rgba(230,241,254,.82)
  ),
  url('../images/home.jpeg');

  background-size:cover;
  background-position:center;
}

#hero h1{
  /* titre principal de la page d'accueil */
  font-size:5rem;
  margin-bottom:20px;
}

.introduction{
  /* bloc de texte d'introduction centré */
  max-width:900px;
  margin:auto;
}

/* Couleurs globales, texte et police par défaut du site */
body {
  /* police, taille et couleurs globales du site */
  font-family: "Source Serif 4", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  background-color: #E6F1FE;
  color: #064A9D;
}

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

/* Conteneur principal centré avec marges internes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

a.bouton {
  display: inline-block;
  padding: 10px 20px;
  background-color: #7DB5FA;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
}

.button {
  /* bouton secondaire clair avec ombre douce */
  display: inline-block;
  padding: 10px 20px;
  background-color: #E6F1FE;
  color:#064A9D;
  text-decoration:none;
  border-radius: 25px;
  border-width: 1px;
  border-color: #064A9D;
  background:white;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  border:none;
}
.button-index {
  /* bouton secondaire clair avec ombre douce */
  display: inline-block;
  padding: 10px 20px;
  background-color: #E6F1FE;
  color:#ffffff;
  text-decoration:underline;
  border-radius: 25px;
  border-width: 1px;
  border-color: #064A9D;
  background:#7DB5FA;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  border:none;
}

/* Bouton secondaire avec style clair et ombre légère */
h1 {
  font-family: "Cinzel Decorative", serif;
  font-weight: 1000;
  font-style: normal;
  color:#7DB5FA;
}
h1{
    /* texte avec dégradé horizontal sur les titres principaux */
    background: linear-gradient(90deg,#064A9D,#7DB5FA);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-weight: 1000;
}

h2 {
  font-family: "Cinzel Decorative", serif;
  font-weight: 1000;
  font-style: normal;
  color:#064A9D;
}

#experience p, h3, h2{
    text-align: center;
    color: #064A9D;
}

#experience .e-serieux,
#experience .e-serieux p {
    text-align: left !important;
}

p {
    font-size: 20px;
    color: #064A9D;
    text-decoration: none;
}

p.introduction {
    /* texte d'introduction plus grand pour être bien visible */
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #064A9D;
}

.contact-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #E6F1FE; ;
  color:#fff;
  text-decoration:none; 
}

.texte {
  /* style standard pour les paragraphes de texte */
  font-size: 20px;
  color: #064A9D;
  text-decoration: none;
  margin-top: 10px;
  text-align: left;
}

#qui-suis-je {
  padding: 50px 0;
  background-color: #E6F1FE;
}

#qui-suis-je .table {
  /* carte qui regroupe le contenu du « qui suis-je » */
  display: table;
  width: 100%;
  border-radius: 30px;
  border-color: #064A9D;
  border-width: 0px;
  background:white;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  border:none;
  margin-bottom: 20px;
}

#qui-suis-je .ligne {
  display: table-row;
  
}

#qui-suis-je .colone {
  display: table-cell;
  padding: 20px;
  font-weight: 500;
   font-size: 30px;
  text-align: center;
  width: 50%;
  vertical-align: middle;
}

#presentation {
  padding: 50px 0;
  background-color: #E6F1FE;
}

#presentation .table{
  /* conteneur blanc dans la section présentation */
  background:white;
  border-radius:30px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  margin-bottom:30px;
}

#presentation .ligne {
  display: table-row;
  
}

#presentation .colone {
  display: table-cell;
  padding: 20px;
  text-align: center;
  width: 50%;
  vertical-align: middle;
}

/* Section projets en grille de type tableau */
#projet {
  padding: 50px 0;
  background-color: #E6F1FE;
}

#projet .table {
  display: table;
  width: 100%;
}

#projet .ligne {
  display: table-row;
}

#projet .colone { 
  /* colonnes de projet alignées au centre */
  display: table-cell; 
  padding: 20px; 
  text-align: center; 
  width: 33.33%; 
}

 footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

footer ul {
  /* affiche les liens en flex pour les aligner au centre */
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 10px;
}

footer li {
  /* éléments de la liste sans marge supplémentaire */
  margin: 0;
}

footer a {
  color: #064A9D;
  text-decoration: none;
}

footer a.button {
  /* bouton centré verticalement dans le footer */
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #E6F1FE;
  color: #064A9D;
  border-radius: 25px;
  border: 1px dashed #064A9D;
}

footer a.button:hover {
  /* effet au survol des boutons du footer */
  background-color: #7DB5FA;
  color: #fff;
  text-decoration: underline;
}


.cadre-simple {
    border: 5px dashed #043168; /* épaisseur, style et couleur */
    padding: 5px;           /* espace entre l'image et le cadre */
    background-color: #E6F1FE; /* couleur de fond du cadre */
    border-width: 3.5px;
}
img{
  /* coins arrondis et transition fluide pour toutes les images */
  border-radius:25px;
  transition:.3s;
}

img:hover{
  /* léger zoom sur les images au survol */
  transform:scale(1.02);
}

@media (max-width:768px){

/* Menu responsive : lien en colonne sur mobile */
header nav ul{
    flex-direction:column;
}

h1{
    font-size:2.5rem;
}

p.introduction{
    font-size:1.4rem;
}

}

/* Ligne animée sous les liens de navigation */
nav a{
    position:relative;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;

    width:0;
    height:3px;

    background:#064A9D;

    transition:.3s;
}

nav a:hover::after{
    width:100%;
}
form{
    max-width:600px;
    margin:auto;
    padding:30px;
    background:white;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
/* page contact ok*/
input, textarea{
    width:97%;
    padding:12px;
    margin-top:8px;
    margin-bottom:20px;
    margin-right: 50px;
    color: #064A9D;
    background-color: #E6F1FE;
    border:1.5px solid #064A9D;
    border-radius:10px;
    font-size:16px;
}

input:focus,
textarea:focus{
    outline:none;
    border-color:#064A9D;
}

button{
    background:#064A9D;
    color:white;
    border:none;
    padding:12px 25px;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
}

select {
    transform:translateY(-3px);
}
select {
    background-color: #E6F1FE; /* Couleur du bouton */
    color: #064A9D;              /* Couleur du texte */
    border: 1.5px solid #064A9D;
    border-radius: 12px;
    padding: 12px 20px;        /* Taille du bouton */
    border-radius: 15px;       /* Coins arrondis */
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

select {
    background-color: #E6F1FE; /* Couleur au survol */
}
input[type="submit"]{
    background-color: #E6F1FE;
    color: #064A9D;
    border: 1.5px solid #064A9D;
    border-radius: 12px;
    padding: 15px 30px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: 0.3s;
}

.message {
    margin-top: 30px;
    font-size: 2rem;
    /*display: none;*/
}
.message{
    max-width: 800px;
    margin: 100px auto;
    padding: 10px 10px;
    background: #E6F1FE;
    color: #064A9D;
    border: 1.5px solid #064A9D;
    border-radius: 12px;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(6, 74, 157, 0.15);
}

/*experience*/
.e-humour{
    background:white;
    border-radius:30px;
    padding:40px;
    box-shadow:0 8px 25px rgba(6,74,157,.08);
}

.e-humour h3{
    text-align:center;
    color:#064A9D;
    margin-bottom:30px;
    font-size:2rem;
}

.e-humour ul{
    list-style:none;
    padding:0;
    margin:0;
}

.e-humour li{
    background:#E6F1FE;
    color:#064A9D;

    margin-bottom:15px;
    padding:18px 25px;

    border-radius:15px;

    font-size:20px;
    font-weight:500;

    transition:.3s;
}

/* frise*/

.frise:hover {
  /* léger zoom sur les images au survol */
  transform:none;
}

.frise {
    border: 5px dashed #043168; /* épaisseur, style et couleur */
    padding: 5px;           /* espace entre l'image et le cadre */
    background-color: #E6F1FE; /* couleur de fond du cadre */
    border-width: 3.5px;
}
img.frise{
  /* coins arrondis et transition fluide pour toutes les images */
  border-radius:25px;
  transition:.3s;
}
/*qui suis-je image*/
img.qui-suis-je:hover {
  /* léger zoom sur les images au survol */
  transform:none;
}
.qui-suis-je {
    border: 5px dashed #043168; /* épaisseur, style et couleur */
    padding: 5px;           /* espace entre l'image et le cadre */
    background-color: #E6F1FE; /* couleur de fond du cadre */
    border-width: 3.5px;
}
/*projet*/
.avenir{
    padding:50px 5%;
    background:#E6F1FE;
}

.avenir h2{
    text-align:center;
    color:#064A9D;
    font-family:'Cinzel Decorative', serif;
    margin-bottom:50px;
}

.projets-colonnes{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.projet{
    width:280px;
    min-height:350px;
    background:#fff;
    border-radius:20px;
    padding:25px;
    text-align:center;
    border:2px solid rgba(6,74,157,0.15);
    box-shadow:0 5px 15px rgba(6,74,157,0.08);
    transition:0.3s ease;
}

.projet:hover{
    transform:none;
    box-shadow:0 10px 25px rgba(6,74,157,0.15);
}

.projet h3{
    color:#064A9D;
    font-family:'Cinzel Decorative', serif;
    margin-bottom:15px;
}

.projet p{
    color:#064A9D;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:285px;
    height:auto;
    margin-bottom:1px;
}

.plan-b img{
    width:140px;
    height:auto;
    margin-bottom:15px;
}
/*plan b et c*/
/* Carte principale */
.carte-retournee{
    width:280px;
    min-height:350px;
    background:#fff;
    border-radius:20px;
    padding:25px;
    /* Crée l'effet de profondeur 3D */
    perspective:1000px;
}

/* Élément qui va pivoter */
.carte-interieur{
    position:relative;
    width:100%;
    height:100%;

    /* Animation fluide */
    transition:transform 0.8s;

    /* Autorise les éléments enfants à être en 3D */
    transform-style:preserve-3d;
}

/* Rotation lorsque la souris passe sur la carte */
.carte-retournee:hover .carte-interieur{
    transform:rotateY(180deg);
}

/* Paramètres communs aux deux faces */
.face{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    /* Cache l'arrière de chaque face */
    backface-visibility:hidden;
}

/* Face visible par défaut */
.avant{
    text-align:center;
}

/* Image du plan B */
.avant img{
    width:235px;
    margin-bottom:15px;
}

/* Face cachée au départ */
.arriere{

    /* Retourne la face arrière */
    transform:rotateY(180deg);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:#ffffff;
    color:#064A9D;
}
.arriere img{
    width:235px;
    margin-bottom:15px;
}

/* Titres */
.face h2{
    margin-bottom:15px;
    font-family:'Cinzel Decorative', serif;
}
.m-projet p{
    color:#064A9D;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    height:auto;
    margin-bottom:1px;
}