@font-face {
    font-family : "Montserrat-ExtraLight";
    src: url("../fonts/Montserrat-ExtraLight.ttf");
}

@font-face {
    font-family : "Montserrat-Medium";
    src: url("../fonts/Montserrat-Medium.ttf");
}


/* ===== Reset léger + variables ===== */
:root{
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #6e6e6e;
  --primary: #061060;      /* bleu KAI */
  --primary-600: #0a157d;
  --accent: #C8A7A0;       /* rose pâle */
  --surface: #faf2f6;
  --border: #e6e6e6;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --text: #f2f2f2;
    --muted: #b6b6b6;
    --primary: #8ea2ff;
    --primary-600: #b6c4ff;
    --accent: #7b5e66;
    --surface: #171922;
    --border: #2a2d36;
    --shadow: 0 8px 28px rgba(0,0,0,.3);
  }
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{

      margin:0;
      background:var(--bg);
      color:var(--text);
	  background: #FFFFFF;
    }

    /* Bandeau supérieur (logo + burger) — identique à avant */
    .top-banner{
      position:sticky; top:0; z-index:1000;
      background:#FFFFFF; border-bottom:1px solid var(--border);
      padding:10px 14px; display:flex; align-items:center; justify-content:space-between;
    }
    .brand{display:flex; align-items:center; gap:10px; min-width:0;}

    .brand img.logo{
	width: clamp(380px, 20vw, 400px); /* min 120px, fluide 20vw, max 220px */
	height: auto;
	display: block;                   /* évite l’espace inline indésirable */
	}
	
	
	@media (max-width: 450px){
	  .brand img.logo{
		width: clamp(250px, 35vw, 250px);
	  }
	}

	
    .brand .brand-title{font-weight:600; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}


.burger-btn{
  background: transparent;
  border: none;
  padding: 10px;          /* un peu plus de confort au clic */
  margin: -10px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* définit la couleur des traits via currentColor */
  color: #0B1C38;
}


.burger-icon{
  width: 34px;            /* avant 26px */
  height: 34px;
  display: block;
}


/* Hover/focus (optionnel) */
.burger-btn:hover{
  background: rgba(10, 79, 99, 0.06); /* léger halo au survol */
}
.burger-btn:focus-visible{
  outline: 2px solid #0B1C38;
  outline-offset: 2px;
}



/* Épaissir légèrement les traits du burger */
.burger-icon path{
  stroke-width: 2.6;      /* avant 2 */
  stroke-linecap: round;  /* bouts arrondis pour un rendu plus propre */
}



.burger-icon {
  transition: transform .28s ease, opacity .25s ease;
}

.burger-btn.is-open .burger-icon {
  transform: rotate(90deg) scale(1.1);
  opacity: .85;
}

	.menu{
	 position: fixed;
	  top: 58px;
	  right: 10px;
	  background: #fff;
	  border: 1px solid var(--border);
	  box-shadow: 0 6px 20px rgba(0,0,0,.12);
	  border-radius: 10px;
	  width: min(78vw, 280px);
	  overflow: hidden;
	  opacity: 0;
	  visibility: hidden;
	  transform: translateX(16px);  /* décale légèrement à droite */
	  transition:
		opacity .28s ease,
		transform .28s cubic-bezier(.2,.75,.25,1),
		visibility .28s;
	 }
	 
	 .menu.open{opacity: 1;visibility: visible;transform: translateX(0);}

	/* Barre interne du menu (pour la croix de fermeture) */
	.menu-header{
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
	  padding: 8px 8px 0 8px;
	  font-family : "Montserrat-Medium";
	}
	.menu-close{
	  appearance: none;
	  background: transparent;
	  border: none;
	  padding: 6px;
	  border-radius: 8px;
	  cursor: pointer;
	  color: #0B1C38; /* bleu canard */
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  font-family : "Montserrat-Medium";
	}
	
	
	.menu-overlay {
	  position: fixed;
	  inset: 0;
	  background: rgba(0,0,0,.25);
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity .28s ease, visibility .28s;
	  z-index: 999; /* en dessous du menu (qui est à 1000 via top-banner) */
	}
	.menu-overlay.open {
	  opacity: 1;
	  visibility: visible;
	}

	.menu-close:hover{background: rgba(10,79,99,0.06);}
	.menu-close:focus-visible{outline: 2px solid #0B1C38; outline-offset: 2px;}
	.menu-close svg{width: 18px; height: 18px; display: block;}
	
	.menu a{
	  display:flex; 
	  align-items:center; 
	  gap:10px; 
	  padding:14px 16px; 
	  color:#0B1C38;   
	  text-decoration:none; 
	  font-size:1rem;
	  font-family: "Montserrat-Medium";
	  transition: background .25s ease, color .25s ease; /* petit fade sympa */
	}

	.menu a:hover{
	  background:#0B1C38;
	  color:#FFFFFF;  /* texte blanc */
	  font-family: "Montserrat-Medium";
	}

	.menu a + a{
	  border-top:1px solid var(--border);
	  font-family: "Montserrat-Medium";
	}

	.menu a:hover svg {
	  color: #FFFFFF;
	  fill: #FFFFFF;
	  stroke: #FFFFFF;
	}

    /* --- Bandeau 90% avec 3 colonnes d'icônes réseaux --- */

.sub-banner-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top:0px;
  z-index: 11;            /* au-dessus de la bande marron */
  margin-bottom: -40px; /* chevauchement visuel sur le rouge */
  border : 0px;
  padding-top:0px;
  border-top : solid 3px #FFFFFF;
}


.sub-banner {
  width: 90%;
  font-family : "Montserrat-Medium";
  background: #0B1C38;
  border: 1px solid #C8A7A0;
  margin: 10px 0 8px;
  display: grid;
  grid-template-columns: auto 1fr; /* texte + icônes */
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  z-index: 21;  
  position: relative;
  margin-top: 0px;
}


/* Texte à gauche */
.banner-text {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  text-align : center;
}


/* Zone des icônes (3 colonnes) */
.banner-icons {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  justify-content: end;
  gap: 3px;
}

/* Style des icônes */
.banner-icons a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  color: #0b3b82;

  transition: 0.2s;
}


.banner-icons a:hover {
  background: #fff;
  color: #07306a;
  transform: scale(1.05);
}

.banner-icons svg {
  width: 22px;
  height: 22px;
}



.brown-separator {
  width: 100%;
  height: 50px;           /* ajustable */
  background: #FAF2F6;    /* rose */
  position: relative;
  z-index: 1;             /* sous le bandeau 90% */
  margin-top: 15px;       /* chevauchement (à cheval) : remonte sous le bandeau */
  margin-bottom: 0;       /* collée à l'image */
}


    /* Cellules d'icônes */
    .social{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px 6px;
    }
    .social a{
      display:inline-flex; align-items:center; justify-content:center;
      width:56px; height:56px; text-decoration:none;
      color:var(--icon); ;
    }
    .social a:active{transform:scale(.98);}
    .social a:hover{background:#fff; color:var(--icon-hover); box-shadow:0 2px 10px rgba(0,0,0,.08);}
    .social svg{width:26px; height:26px; display:block;}

    /* Image sous le bandeau */
    .hero-image img{
	width:100%; 
	height:450px; 
	overflow: hidden;
	position: relative;
	 background: #FFFFFF;
	}
	
    /* Header + contenu (facultatifs, comme précédemment) */
    header{background:var(--primary); color:#fff; padding:16px; text-align:center; font-size:1.2rem;}
    .container{padding:16px}
    .card{background:var(--card); padding:16px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.08); margin-bottom:16px;}
    button.primary{width:100%; padding:12px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:1rem; cursor:pointer;}
    button.primary:hover{filter:brightness(.95);}

    @media (min-width:768px){
      .container{max-width:720px; margin:0 auto}
    }
	
	
/* Bandeau animé "hello world" */
.scroll-banner {
  height: 150px;
  background: #FFFFFF; /* bleu KAI ou autre */
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin-top: 0;
}

.scroll-banner-text {
  background: #FFFFFF;
  font-size: 30px;
  font-family : "Montserrat-Medium";
  font-weight: 700;
  position: absolute;
  bottom: -60px;           /* point de départ : sous le cadre */
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.2s ease-out;
  width : 90%;
}

.scroll-banner.active .scroll-banner-text {
  bottom: 50%;             /* remonte jusqu'au milieu */
  transform: translateY(50%);
  opacity: 1;
}


/* Espace de 30px sous le bandeau hello world */
.duck-banner-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}


/* Bandeau bleu canard 90% */
.duck-banner {
  width: 90%;
  height: 120px;
  background: #0B1C38;   /* bleu canard */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 600;
  z-index: 10;
  font-family : "Montserrat-Medium";
}


/* ============================
   BANDEAU ROSE DERRIERE PHOTO (100% / 400px)
   ============================ */
   
/* ==== Ancienne version : MOBILE UNIQUEMENT ==== */
@media (max-width: 991px) {
.brown-big-banner {
  width: 100%;
  height: 450px;
  background: #C8A7A0; /* rose clair */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* important : on positionne le contenu en haut */
  padding-top: 20px;       /* petite marge esthétique */
  margin-top: 0;
}
}

/* ============================
   BANDEAU PHOTO2 (90% / 600px)
   ============================ */
.photo2-wrapper {
  width: 90%;
  height: 450px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  position: absolute;
  top: 90px; /* le bandeau flotte sur le marron */
  left: 50%;
  transform: translateX(-50%);
}

/* IMAGE PHOTO2 */
.photo2-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Bandeau rose pleine largeur derrière le bandeau bleu canard */
.full-pink-banner {
  width: 100%;
  height: 50px;        /* ajustable */
  background: #FFFFFF;  /* ton rose */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;    /* espace pour le bleu */
}



.quisuisje {
	font-family : "Montserrat-ExtraLight";
	padding-top: 60px;
	text-align : justify;
    margin-left: 40px;	
	margin-right: 40px;	
	color : #0B1C38;
	background: #FFFFFF;
}

.duck-banner-thin {
  font-family : "Montserrat-Medium";
  color: #FFFFFF;
  width: 100%;
  height: 50px;
  background: #0B1C38;           /* bleu canard */
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;      /* centre verticalement */
  justify-content: center;  /* centre horizontal */
  font-size : 1.3rem;

}


/* Section contenant les 7 bandeaux */
.multi-banner-section {
  width: 100%;
}

/* Chaque bandeau */
.mini-banner {
  width: 100%;
  height: 150px;
  background: #FAF2F6; /* rose */
  border-bottom: 1px solid #0B1C38; /* trait fin rouge */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family : "Montserrat-Medium";
  color : #FFFFFF;
}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-text {
  margin-top: 2px;
  font-family: "Montserrat-Medium";
  font-size: 15px;
  color: #0B1C38; /* Bleu canard identique à tes icônes */
  text-align: center;
}


/* Structure du bloc icône + texte */
.icon-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.icon-img{
  display:block;
  width:100px;
  height:100px;
  object-fit:contain;
}
.icon-label{
  margin-top:8px;
  font-family:"Montserrat-Medium";
  font-size:0.9rem;
  color:#0B1C38; /* même bleu que tes icônes */
}



/* Conteneur standard icône + texte */
.icon-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Taille conseillée pour tes PNG (ajuste si besoin) */
.icon-img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.icon-label {
  margin-top: 8px;
  font-family: "Montserrat-Medium";
  font-size: 20px;
  color: #0B1C38;
}

/* --- Animation générique (type "hello world") --- */
.animate-in {
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
}

/* Légère animation différée pour le texte */
.animate-in .icon-label {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;
  will-change: opacity, transform;
}

/* État activé par JS quand l'élément entre dans le viewport */
.animate-in.active {
  opacity: 1;
  transform: translateY(0);
}
.animate-in.active .icon-label {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibilité : réduit / supprime l’animation si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .animate-in,
  .animate-in .icon-label {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


.new-bottom-banner {
  width: 100%;
  height: 50px;
  background: #0B1C38; /* bleu canard (comme tes bandeaux) */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat-Medium";
  font-size: 1rem;
  border-top: 1px solid #C8A7A0; /* optionnel, cohérent avec ton style */
}


/* Bouton arrondi "En savoir +" */
.cta-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;         /* arrondi */
  background: #C8A7A0;          /* fond rose pâle */
  color: #0B1C38;               /* texte bleu canard */
  border: 1px solid #0B1C38;    /* contour fin */
  text-decoration: none;
  font-family: "Montserrat-Medium";
  font-size: 0.95rem;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Hover / Active */
.cta-rounded:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  background: #d9b7bf; /* léger éclaircissement */
}
.cta-rounded:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Focus accessibilité */
.cta-rounded:focus-visible {
  outline: 2px solid #FFFFFF;      /* visible sur fond bleu */
  outline-offset: 2px;
}



/* ===== Bandeau à image de fond fixe ===== */

.fixed-bg-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #0B1C38; /* couleur de secours */
}

/* L’image occupe toute la largeur, hauteur auto → pas de zoom */
.fixed-bg-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;         /* sécurité si tu lui fixes une hauteur en desktop */
}

/* Overlay et contenu restent identiques */
.fixed-bg-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.fixed-bg-content {
  position: absolute;    /* par-dessus l’image */
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  text-align: center;
}

/* Desktop : on peut simuler l’effet 'fixed' en rebasculant l’image en bg */
@media (min-width: 992px) {
  .fixed-bg-banner {
    min-height: 260px;
    background-image: url("../images/ibanner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .fixed-bg-img { display: none; } /* on cache l'<img> en desktop */
}


/* Titre/accroche */
.fixed-bg-title {
  margin: 0;
  color: #FFFFFF;
  font-family: "Montserrat-Medium", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(1.1rem, 2.5vw + 0.6rem, 2rem); /* responsive */
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);        /* meilleure lisibilité */
}

/* Option: légère animation d’apparition au scroll (recycle ta logique) */
.fixed-bg-content {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.fixed-bg-content.active {
  opacity: 1;
  transform: translateY(0);
}


.partners-banner {
  width: 100%;
  height: 150px;
  background: #FAF2F6;         /* fond rose */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Montserrat-Medium";
  font-size: 1.6rem;
  color: #0B1C38;              /* bleu canard */
}



/* Grille partenaires : 2 colonnes fixes, cards plus petites */
.partners-grid {
  width: 100%;
  background: #ffffff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 colonnes sur toute la largeur */
  grid-auto-rows: 120px;                  /* hauteur plus compacte */
  gap: 12px;                              /* espace réduit */
  padding: 1px 1px;                     /* marges internes réduites */
}

/* Card partenaire compacte */
.partner-card {
  background: #0B1C38; /* bleu */
  border: 1px solid #FAF2F6; /*rose */
  border-radius: 10px;                    /* rayon légèrement réduit */
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-card1 {
  background: #FFFFFF;
  border: 1px solid #0B1C38;
  border-radius: 10px;                    /* rayon légèrement réduit */
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lien pleine card */
.partner-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Logo légèrement plus petit pour tenir à 2 par ligne sur mobile */
.partner-card img {
  max-width: 45%;
  max-height: 45%;
  object-fit: contain;
  transition: opacity .2s ease, transform .2s ease;
}

/* Effet au survol / focus */
.partner-card:hover img,
.partner-card:focus-within img {
  opacity: 0.5;          /* 50% */
  transform: scale(1.2);
}

/* Effet au survol / focus */
.partner-card1:hover img,
.partner-card1:focus-within img {
  opacity: 0.5;          /* 50% */
  transform: scale(1.2);
}

/* Accessibilité focus */
.partner-card a:focus-visible {
  outline: 3px solid #0B1C38;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ✅ On conserve 2 colonnes sur les petits écrans */
@media (max-width: 640px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);  /* 2 colonnes maintenues */
    grid-auto-rows: 110px;                  /* encore un peu plus compact */
    gap: 10px;
    padding: 14px;
  }
  .partner-card img {
    max-width: 60%;
    max-height: 60%;
  }
}

/* Option : écrans très étroits (≤ 360px) */
@media (max-width: 360px) {
  .partners-grid {
    gap: 8px;
    padding: 1px 1px;
    grid-auto-rows: 100px;
  }
  .partner-card img {
    max-width: 45%;   /* léger rééquilibrage pour lisibilité */
    max-height: 45%;
  }
}


.white-spacer-banner {
  width: 100%;
  height: 20px;
  background: #ffffff; /* fond blanc */
}


/* === Bandeau d'appel contact === */
.contact-cta-banner {
  width: 100%;
  height: 80px;
  background: #0B1C38;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat-Medium";
  font-size: 20px;
  text-transform: none;
  text-align: center;
}

/* === Section formulaire/contact === */
.contact-section {
  width: 100%;
  background: #0B1C38;
  padding: 20px 0 10px;
  color: #FFFFFF;
}


.contact-link .contact-text {
  display: inline-block;
  opacity: 0;

  /* ⇩ Part plus bas qu'avant : augmente la valeur si tu veux encore plus bas */
  transform: translateY(30px) scale(0.98);

  transition: opacity .7s ease-out,
              transform .7s cubic-bezier(.2,.75,.25,1);
  will-change: opacity, transform;

}

/* Quand on ajoute la classe .is-inview sur le <a>, le texte apparaît */
.contact-link.is-inview .contact-text {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibilité : si l’utilisateur préfère moins d’animations */
@media (prefers-reduced-motion: reduce) {
  .contact-link .contact-text {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}



/* Tableau 2 x 2 (Nom/Prénom, Email/Téléphone) */
.contact-table {
  width: min(900px, 92%);
  margin: 16px auto;
  border-collapse: separate;
  border-spacing: 16px; /* espace entre cellules */
  color: #FFFFFF;
}
.contact-table td {
  vertical-align: top;
  padding: 0;
  color: #FFFFFF;
}

/* Libellés + champs */
.contact-label {
  display: block;
  margin-bottom: 6px;
  font-family: "Montserrat-Medium";
  color: #0B1C38;
  font-size: 0.95rem;
  color: #FFFFFF;
}

.contact-input,
.contact-textarea {
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  color: #C8A7A0;
  background: #0B1C38;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) inset;
}
.contact-input {
  height: 44px;
}
.contact-input:focus,
.contact-textarea:focus {
  outline: 2px solid #0B1C38;
  outline-offset: 2px;
}

/* Zone 'Détaillez votre demande' pleine largeur */
.contact-textarea {
  height: 140px;
  resize: vertical;
  width: min(900px, 92%);
  margin: 8px auto 0;
  display: block;
}

/* Bouton Envoyer */
.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #0B1C38;
  color: #FFFFFF;
  border: 1px solid #0B1C38;
  font-family: "Montserrat-Medium";
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  margin: 14px auto 18px;
  display: block;
  border: 1px solid #e6e6e6;
}

.contact-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.contact-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.contact-submit:focus-visible {
  outline: 2px solid #C8A7A0;
  outline-offset: 2px;
}

/* Lignes d’infos textuelles */
.contact-infos {
  width: min(900px, 92%);
  color: #FFFFFF;
  margin: 0 auto 10px;
}
.contact-info-line {
  text-align: center;
  font-family: "Montserrat-Medium";
  color: #FFFFFF;
  margin: 6px 0;
  font-size: 1rem;
}

/* Ligne des réseaux sociaux : icônes blancs sur fond bleu canard */
.social-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 8px 0 18px;
}
.social-inline a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #0B1C38;
  color: #FFFFFF;              /* rend les SVG blancs (fill: currentColor) */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.social-inline a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.social-inline svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;          /* blanc */
}

/* Responsive : si l’écran est étroit, on espace un peu moins */
@media (max-width: 540px) {
  .contact-table { border-spacing: 12px; }
  .contact-textarea { height: 120px; }
}


/* Remplace le bloc d'icônes par une zone lien à droite */
.banner-contact {
  display: flex;
  justify-content: end;
  align-items: center;
  padding-right: 0px;       /* petit espace à droite */
}

/* Style du lien "contact" dans le sub-banner */
.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 0 10px;
  background: #C8A7A0;      /* cohérent avec ta charte */
  color: #0B1C38;
  border: 1px solid #0B1C38;
  text-decoration: none;
  font-family: "Montserrat-Medium";
  font-size: 0.95rem;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.contact-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  background: #d9b7bf;
}

.contact-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}


/* Bouton rond "remonter en haut" – caché par défaut */
#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  background: #0B1C38;
  color: #FFFFFF;
  border-radius: 50%;
  border: none;
  border: 3px solid #C8A7A0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  z-index: 99999;

  /* Effet d'apparition/disparition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);  /* descend légèrement quand caché */
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s;
}

/* État visible */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover */
#scrollTopBtn:hover {
  background: #08394b;
  transform: translateY(-3px);
}

/* Icône flèche */
#scrollTopBtn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}


input.error, textarea.error {
  border: 1px solid #D40000 !important;  /* rouge fin */
  background: #ffffff15;                 /* léger highlight */
}


/* Conteneur “pleine largeur” aligné comme ta textarea */
.field-full {
  width: min(900px, 92%);
  margin: 0 auto;          /* centre l’ensemble */
}


.form-error {
  display: block;
  min-height: 16px; /* espace réservé pour une ligne */
  font-size: 0.85rem;
  font-family: "Montserrat-Medium";
  color: #C8A7A0;
  margin-top: 4px;
  opacity: 0;          /* invisible mais occupe la place */
  transition: opacity .25s ease;
}

.form-error.show {
  opacity: 1;          /* devient visible */
}

/* Style erreur sur le champ */
input.error, textarea.error {
  border: 1px solid #D40000 !important;
  background: #ffffff15;
}


/* Couleur par défaut des liens dans les lignes d'infos */
.contact-info-line a {
  color: #FFFFFF;                 /* blanc */
  text-decoration: underline;     /* optionnel : garder/retirer selon préférence */
}

/* États : hover / focus / visited */
.contact-info-line a:hover,
.contact-info-line a:focus {
  color: #FFFFFF;                 /* reste blanc au survol et au focus */
  text-decoration: none;          /* optionnel : enlever le soulignement au hover */
}

.contact-info-line a:visited {
  color: #FFFFFF;                 /* force aussi les liens visités en blanc */
}

/* Accessibilité focus visible (anneau) */
.contact-info-line a:focus-visible {
  outline: 2px solid #C8A7A0;     /* liseré rose pâle de ta charte */
  outline-offset: 2px;
  border-radius: 4px;
}


/* --- Bandeau principal "Merci" --- */
.thank-banner{
  width:100%;
  height:180px;
  background: #0B1C38;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:"Montserrat-Medium";
  font-size:2rem;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
}

/* Text content */
.thank-content{
  width:90%;
  max-width:900px;
  margin:40px auto;
  background:#FFFFFF;
  padding:30px 20px;
  text-align:center;
  border-radius:12px;
  font-size:1.2rem;
  color:#0B1C38;
  line-height:1.6;
}

.thank-banner2{
  width:100%;
  height:180px;
  background: #0B1C38;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:"Montserrat-Medium";
  font-size:2rem;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
}

/* Bouton retour */
.return-btn{
  display:inline-block;
  margin-top:20px;
  background: #C8A7A0;
  color: #061060;
  border:1px solid #061060;
  padding:12px 24px;
  border-radius:999px;
  font-family:"Montserrat-Medium";
  font-size:1rem;
  text-decoration:none;
  transition:.2s;
}
.return-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}


/* ===== Grille 10 lignes × 1 colonne ===== */
.one-col-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;            /* 1 colonne */
  grid-template-rows: repeat(10, auto);  /* 10 lignes */
  gap: 12px;
  padding: 10px 0 20px;
  background: #FFFFFF;
}

/* Cellule standard */
.one-col-item {
  width: 90%;
  margin: 0 auto;
  padding: 14px;
  background: #FAF2F6;         /* rose léger de ta charte */
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variante texte */
.one-col-text {
  width: 100%;
  color: #0B1C38;
  font-family: "Montserrat-Medium";
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

/* Variante image */
.one-col-image {
  display: block;
  max-width: 100%;
  max-height: 260px;         /* limite pour conserver une hauteur raisonnable */
  object-fit: contain;
}

.one-col-item2 {
  width: 90%;
  margin: 0 auto;
  padding: 14px;
  background: #C8A7A0;         /* rose léger de ta charte */
  border: 1px solid #FAF2F6;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive léger */
@media (max-width: 640px) {
  .after-sub-text-inner { width: 92%; font-size: 1rem; }
  .one-col-item { width: 92%; padding: 12px; }
  .one-col-image { max-height: 200px; }
}

/* ===== Bloc texte sous le sub-banner (version de départ) ===== */
.after-sub-text {
  width: 100%;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.after-sub-text-inner {
  width: 90%;
  background: #FFFFFF;
  color: #0B1C38;
  font-family: "Montserrat-Medium";
  font-size: 1.05rem;
  line-height: 1.55;
  text-align: justify;
}


/* ----- Banner text plus gros en mode desktop ----- */
@media (min-width: 992px) {
  .banner-text {
    font-size: 20px;   /* ajuste la taille selon ton goût */
    font-weight: 700;    /* optionnel : un peu plus d’impact */
    letter-spacing: 0.5px; /* optionnel : plus lisible en grand écran */
  }
}


/* ====== NAV HORIZONTALE ====== */
.desktop-nav {
  display: none;                 /* caché par défaut (mobile) */
  gap: 20px;
  align-items: center;
}

.desktop-nav a {
  font-family: "Montserrat-Medium";
  color: #0A4F63;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 8px;
  border-radius: 8px;
  transition: color .2s ease, background-color .2s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus {
  background: #D4AEB8;           /* ton accent rosé */
  color: #0A4F63;
  outline: none;
}

.desktop-nav a.is-active {
  background: #0A4F63;
  color: #FFFFFF;
}

/* ====== POINT DE RUPTURE (desktop) ======
   Ajuste 992px → 1024px si tu veux basculer plus tard/plus tôt */
@media (min-width: 992px) {
  /* On montre la nav horizontale */
  .desktop-nav { display: flex; }

  /* On cache le burger et son menu mobile */
  .burger-btn { display: none; }
  .menu { display: none !important; }       /* cache le panneau mobile */
  .menu-overlay { display: none !important; } /* cache l’overlay */
}

/* Optionnel : s'assurer que la top-bar gère la place */
@media (min-width: 992px) {
  .top-top-banner {
	justify-content: center;
	display: flex;
	position : relative;
	background: #FFFFFF;
  }
  .top-banner {
    gap: 20px;
	width : 90%;
	justify-content: center;
	display: flex;
	position : relative;
	background: #FFFFFF;
  }
  .brand {
    flex: 0 1 auto;
  }
  .desktop-nav {
    margin-left: auto;           /* pousse la nav à droite */
  }
}

/* ===== Desktop : image collée en haut, scroll-banner masquée ===== */


/* ===== Split hero (desktop) : image à gauche + bloc texte à droite ===== */
@media (min-width: 992px) {
  .hero-row {
    display: grid;
    grid-template-columns: 50vw 50vw; /* 2 colonnes égales */
    width: 100vw;
    height: 100vh;                     /* moitié de la hauteur d’écran */
    margin: 0;                        /* bord à bord à gauche */
    overflow: hidden;
    background: #FFFFFF;
	margin-top: -200px;
  }

  /* Colonne gauche : image, alignée à gauche, collée en haut */
  .hero-row .hero-image {
    width: 50vw;
	height: 100vh;
    margin: 0;                        /* alignée à gauche */
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    margin-bottom: 0px;
    display: block;                   /* sécurité */
    visibility: visible;              /* sécuri*/

  }
  .hero-row .hero-image img {
    width: 100%;
	height : 100%;
    display: block;
    object-fit: cover;                /* couvre sans déformer */
  }

  /* Colonne droite : bloc texte desktop */
  .hero-text-desktop {
    width: 50vw;
    height: 50vh;
    display: flex;
    align-items: center;              /* centre verticalement le texte */
    justify-content: center;          /* centre horizontalement le texte */
    color: #FFFFFF;
    text-align: left;
    overflow: hidden;
    padding: 0 16px;
	margin-top : 250px;
  }

  /* Style du texte interne */
  .hero-text-inner {
    width: 90%;
    font-family: "Montserrat-Medium";
    font-weight: 700;
    font-size: clamp(1.1rem, 2.2vw + 0.4rem, 3rem);
    line-height: 1.35;
	color: #0B1C38;
    transform: translateY(16px);
    transition: opacity .7s ease-out, transform .7s ease-out;
  }

  /* Classe d’activation (si tu veux une petite anim à l’apparition) */
  .hero-text-desktop.active .hero-text-inner {
    opacity: 1;
    transform: translateY(0);
  }

  /* (Option) si tu gardes ta scroll-banner mobile plus bas, masque-la en desktop */
  .scroll-banner { display: none !important; }
}

/* Mobile / tablette : on n’affiche pas le bloc texte desktop,
   et on garde ton comportement actuel pour l’image */
@media (max-width: 991.98px) {
  .hero-row { display: block; }
  .hero-text-desktop { display: none; }

  .hero-image img {
    width: 100%;
    height: 450px;       /* ta valeur actuelle */
    object-fit: cover;
  }
}




/* ----- HERO : effet scroll-banner plus ample (desktop) ----- */
@media (min-width: 992px) {
  .hero-text-desktop {
    position: relative;   /* nécessaire pour le positionnement absolu interne */
    overflow: hidden;     /* masque le texte au départ */
    height: 50vh;         /* assure la hauteur cible */
  }

  /* État initial : on part plus bas et un peu plus “loin” */
  .hero-text-desktop .hero-text-inner {
    position: absolute;
    left: 50%;
    width: 90%;
    text-align: left;

    /* départ plus bas qu’avant */
    bottom: -100px;               /* avant: -60px */
    transform: translate(-50%, 120px); /* + de distance verticale */
    opacity: 0;

    /* animation plus longue & plus douce */
    transition: 
      transform 1.4s cubic-bezier(.2,.75,.25,1),
      bottom 1.4s cubic-bezier(.2,.75,.25,1),
      opacity 1.2s ease-out;
  }

  /* État actif : on monte légèrement au-dessus du centre pour un rendu plus “ample” */
  .hero-text-desktop.active .hero-text-inner {
    bottom: 52%;                   /* avant: 50% */
    transform: translate(-50%, 40%); /* avant: 50% → donne un léger overshoot visuel */
    opacity: 1;
  }

  /* Option: typographie responsive et un peu plus grande en desktop */
  .hero-text-desktop .hero-text-inner {
    font-size: clamp(1.2rem, 2.6vw + 0.3rem, 2.2rem);
  }
}


/* === Corriger la micro-bande entre top-banner et sub-banner === */

/* 1) Supprimer le border-bas et utiliser une ombre (évite la “ligne” dure) */
.top-banner {
  border-bottom: none !important;                 /* on neutralise la bordure */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);        /* liseré doux à la place */

  backface-visibility: hidden;                     /* évite les hairlines GPU */
  transform: translateZ(0);                        /* idem (compositing) */
}

/* 2) S'assure que tout est blanc entre les deux blocs */
.top-top-banner,


/* 3) Neutraliser toute marge haute qui peut créer un interstice visible */
.sub-banner-wrap { margin-top: 0 !important; }

/* Si tu veux coller encore plus : on retire la marge haute interne du sous-bandeau */
.sub-banner { margin-top: 0 !important; }

/* Option : si tu veux un trait plus visible (au lieu de l'ombre légère) */
.top-banner.has-divider {
  box-shadow: none;
  border-bottom: 1px solid #e6e6e6 !important;     /* à activer en ajoutant la classe "has-divider" au besoin */
}




/* ===== SUB-BANNER : texte à gauche, bouton centré (desktop) ===== */
@media (min-width: 992px) {

  /* On garde la structure en 2 colonnes */
  .sub-banner {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
    align-items: center;
  }

  /* Texte aligné à gauche */
  .banner-text {
    text-align: left;
    justify-self: start;
    padding-left: 20px; /* optionnel : petit décalage élégant */
  }

  /* Centrage parfait du bouton dans la colonne droite */
  .banner-contact {
    display: flex;
    justify-content: left; /* centre horizontalement */
    align-items: left;
    padding-right: 0 !important; /* empêche le décalage droit */
    width: 100%;
  }
}


/* ===== Icônes LinkedIn + Instagram dans le sub-banner (desktop) ===== */

.banner-social-desktop {
  display: none; /* masqué par défaut (mobile) */
}

@media (min-width: 992px) {

  /* On passe le sub-banner en 3 colonnes */
  .sub-banner {
    grid-template-columns: 1fr auto 1fr; /* texte | bouton | icônes */
    align-items: center;
  }

  /* Colonne texte */
  .banner-text {
    justify-self: start;
    text-align: left;
    padding-left: 20px;
  }

  /* Bouton centré */
  .banner-contact {
    display: flex;
    justify-content: center !important;
  }

  /* Icônes visibles à droite */
  .banner-social-desktop {
    display: flex;
    justify-self: end;
    gap: 14px;
    padding-right: 20px;
  }

  .banner-social-desktop a {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;        /* icônes blanches */
    text-decoration: none;
    transition: transform .2s ease;
  }

  .banner-social-desktop a:hover {
    transform: scale(1.15);
  }

  .social-icon {
    width: 22px;
    height: 22px;
    fill: currentColor; /* blanc */
    display: block;
  }
}



/* ===== Masquer photo2-wrapper et quisuisje en mode desktop ===== */
@media (min-width: 992px) {
  .brown-big-banner .photo2-wrapper,
  .brown-big-banner + .quisuisje {
    display: none !important;
  }
}





/* ============================================================
   VERSION FINALE DE LA SECTION QUI-SUIS-JE EN DESKTOP
   ============================================================ */

/* MOBILE : ancien système */
@media (max-width: 991px) {
  .photo2-wrapper,
  .quisuisje {
    display: block !important;
  }
  .brown-big-inner {
    display: none !important;
  }
}

/* DESKTOP : nouveau système */
@media (min-width: 992px) {

  /* ---- On force un RESET complet ---- */
  .brown-big-banner {
    width: 100%;
    background: #C8A7A0;
    margin: 0;             /* supprime tout décalage vertical hérité */
    display: flex;
    justify-content: center;
    align-items: flex-start !important;
    height: auto !important;
    position: relative;
  }

  /* ---- On masque l'ancien système ---- */
  .photo2-wrapper,
  .quisuisje {
    display: none !important;
  }

  /* ---- Grille 50 / 50 ---- */
  .brown-big-inner {
    width: 90%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 0 !important;   /* ← colle juste sous le bandeau */
	background: #FFFFFF;
  }

  /* ---- Colonne gauche : texte ---- */
  .about-text {
    width: 100%;
	height: 100%;
	font-size: 22px;
    padding: 0 10px;
    margin: 0 !important;
    box-sizing: border-box;
    text-align: justify;
    color: #0B1C38;
    background: #FFFFFF;
	padding-top : 100px;
	font-family: "Montserrat-ExtraLight";
  }

  /* ---- Colonne droite : photo ---- */
  .about-photo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #FFFFFF;
  }

  .about-photo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}


/* ===== Bloc espace blanc 50px au-dessus de "Mes atouts" (desktop seulement) ===== */
@media (min-width: 992px) {
  .white-gap-50 {
    width: 100%;
    height: 50px;      /* hauteur demandée */
    background: #FFFFFF;
    display: block;    /* garantir l'affichage */
  }
}



/* ========== Images adaptatives dans .one-col-item2 ========== */

/* Mobile : images fluides à 100% */
.one-col-item3 img.grid-image {
  width: 80%;
  height: auto;
  object-fit: contain;
  display: block;
}


/* Desktop : 3 images fluides qui s’adaptent à la largeur du navigateur */
@media (min-width: 992px) {

  .one-col-item3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;     /* passe automatiquement sur deux lignes si trop étroit */
    gap: 20px;           /* espace entre les images */
  }

  .one-col-item3 img.grid-image {
    flex: 1 1 calc(33% - 20px); /* 3 images par ligne, flexibles */
    max-width: calc(33% - 20px);
    height: auto;
    object-fit: contain;
  }
}


/* ===== Mobile : photos centrées et largeur 80% ===== */
@media (max-width: 991px) {

  .one-col-item3 {
    width: 80%;
    margin: 0 auto;            /* centre le bloc sur la page */
    display: flex;
    flex-direction: column;    /* 1 image par ligne */
    align-items: center;       /* centre chaque image */
    gap: 20px;                 /* espace entre images */
  }

  .one-col-item3 img,
  .one-col-item3 .grid-image {
    width: 100%;               /* image responsive */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}



/* Conteneur de la grille */
.multi-banner-section {
  /* Si tu as plusieurs sections successives, garde un wrapper commun (voir plus bas) */
  margin-bottom: 2rem;
}

.multi-banner-grid {
  display: grid;
  grid-template-columns: 1fr;   /*repeat(auto-fit, minmax(100px, 1fr)); /* adapte 200px si besoin */
  gap: 1.25rem;                 /* espace entre cartes */
  align-items: stretch;         /* hauteur homogène des cartes */
  justify-items: center;        /* centrage du contenu si plus étroit que la cellule */
  width: min(1100px, 100%);     /* largeur max cohérente */
  margin-inline: auto;          /* centrer la grille dans la page */
  padding: 0 1rem;              /* respiration sur bords */
}

/* Carte / case */
.mini-banner {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* ou center selon le rendu désiré */
  text-align: center;
  background: transparent;      /* garde le fond actuel si tu en as un */
  border-radius: 12px;          /* optionnel : arrondi */
  padding: 1rem 0.5rem;
  height: 100%;                 /* pour que toutes les cartes alignent leur hauteur */
}

/* Image + label */
.mini-banner .icon-img {
  width: clamp(64px, 8vw, 100px);  /* responsive, sans casser tes @2x */
  height: auto;
  aspect-ratio: 1 / 1;             /* évite les sauts de layout si l'image tarde */
  object-fit: contain;
  Display: block; 
}

.mini-banner .icon-label {
  margin-top: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Option : réduire la densité sur très petits écrans */
@media (max-width: 360px) {
  .multi-banner-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
  }
}



/* À partir de 900px : 3 colonnes (ou auto-fit si tu veux fluide) */
@media (min-width: 600px) {
  .multi-banner-grid {
    /* ---- Alternative fluide : */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}



/* Préserve le confort si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce) {
  .animate-in { transition: none !important; }
}