:root{
      --blue-100:#e9f1f9;
      --blue-500:#005EB5; /* bleu marine */
      --red-500:#c4122f;  /* accent rouge */
      --white:#ffffff;
      --muted:#6c757d;
      --radius:12px;
      --header-height: 120px;  /* Ajuste si ton header est plus haut */
     --notice-height: 56px;   /* Hauteur de ta barre notification */
    }

.montserrat-h3 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color:var(--blue-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ia-caption {
  font-size: 0.75rem;
  color: #777;
  text-align: center;
  margin-top: 2px;
  font-style: italic;
transform: translateX(-40px);
}

.arrow {
  display: inline-block;
  width: 28px;
  height: 10px;
  margin: 0 8px;
  vertical-align: middle;
  background-color: currentColor;
color: var(--blue-500);

  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'>\
<line x1='0' y1='5' x2='26' y2='5' stroke='white' stroke-width='1.5'/>\
<polyline points='21,1 26,5 21,9' fill='none' stroke='white' stroke-width='1.5'/>\
</svg>") no-repeat center / contain;

  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'>\
<line x1='0' y1='5' x2='26' y2='5' stroke='white' stroke-width='1.5'/>\
<polyline points='21,1 26,5 21,9' fill='none' stroke='white' stroke-width='1.5'/>\
</svg>") no-repeat center / contain;
}

    *{box-sizing:border-box}
    html, body{
      font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#222;
      margin:0;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      scroll-behavior:smooth;
      background: #fff;
      scroll-behavior: smooth;
    }

    /* NAV */
    .navbar{background:var(--white); border-bottom:1px solid rgba(10,35,66,0.06);}
    .navbar-brand img{height:150px;}
    .nav-link{color:var(--blue-500) !important; font-weight:600;}
    .nav-link:hover{color:var(--red-500) !important;}

    /* HERO */
    .hero{
      background: linear-gradient(180deg, rgba(10,35,66,0.75), rgba(10,35,66,0.55)), url("../../assets/images/backgrounds/estacades-mini.jpg") center/cover no-repeat;
      color:var(--white);
      padding:8rem 0;
      text-align:center;
    }
    .hero h1{font-family:"Merriweather", serif; font-size:2.6rem; font-weight:700; margin-bottom:.5rem;}
    .hero p.lead{font-size:1.05rem; color:rgba(255,255,255,0.9); margin-bottom:1.25rem;}

    /* HERO-INTRO */
    .hero-intro{
      background: linear-gradient(180deg, rgba(10,35,66,0.75), rgba(10,35,66,0.55)), url("../../assets/images/backgrounds/marc.jpg") center/cover no-repeat;
      color:var(--white);
      padding:16.5rem 0;
      text-align:center;

    }
    .hero-intro h1{font-family:"Merriweather", serif; font-size:2.6rem; font-weight:700; margin-bottom:.5rem; transform: translateY(6cm);}
    .hero-intro p.lead{font-size:1.05rem; color:rgba(255,255,255,0.9); margin-bottom:1.25rem; transform: translateY(6cm);}


    /* Buttons */
    /* Primary */
    .btn-primary-brand{
        background: var(--blue-500);
  border: 1px solid transparent;
  color: var(--white);
  padding: 0.6rem 1.15rem;
  border-radius: 10px;
  transition: border-color 0.2s ease;    
}

    /* Secondary */
    .btn-outline-brand{
      background:transparent; border:1.5px solid rgba(255,255,255,0.22); color:var(--white); border-radius:10px;
    }


.btn-outline-secondary {
    --bs-btn-color: #005EB5;
    --bs-btn-border-color: #005EB5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #005EB5;
    --bs-btn-hover-border-color: #005EB5;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

/* Bouton CTA - Rester informé */
.btn-cta {
  background-color: #005EB5;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-left: 16px;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-cta:hover {
  background-color: #005EB5;
  transform: translateY(-1px);
}



    /* Sections page principale */
    presection-index{padding:4rem 0;}
    sectionindex{padding:200px 0; scroll-margin-top: calc(var(--header-height) + var(--notice-height));}
    h2.section-index-title{font-family:"Merriweather", serif; color:var(--blue-500); font-size:2.6rem; margin-bottom:1.25rem; text-align:center;}
    .muted{color:var(--muted);}


    /* Sections */
    presection{padding:4rem 0;}
    section{padding:20px 0; scroll-margin-top: calc(var(--header-height) + var(--notice-height));}
    h2.section-title{font-family:"Merriweather", serif; color:var(--blue-500); font-size:2.6rem; margin-bottom:1.25rem; text-align:center;}
    .muted{color:var(--muted);}

    /* Team cards */
    .team-card{
      background:#fff; border:1px solid rgba(10,35,66,0.06); padding:1.2rem; border-radius:var(--radius); text-align:center;
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .team-card:hover{transform:translateY(-6px); box-shadow:0 8px 24px rgba(10,35,66,0.08);}
    .team-photo{width:140px; height:140px; object-fit:cover; border-radius:50%; border:4px solid var(--blue-100); margin:0 auto 1rem; display:block;}

    /* Project & realization images */
    .illustration{width:80%; height:auto; border-radius:10px; box-shadow:0 6px 18px rgba(10,35,66,0.04);}
    .illustrationrea{width:300px; height:200px; border-radius:10px; box-shadow:0 6px 18px rgba(10,35,66,0.04);}

    /* Footer */
    footer{background:var(--blue-500); color:var(--white); padding:1rem 0;}
    footer a{color:var(--white); text-decoration:none;}

    /* Responsive tweaks */
    @media (max-width:767px){
      .hero h1{font-size:1.8rem;}
      .team-photo{width:110px;height:110px;}
    }
    /* Small accessibility focus */
    a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(196,18,47,0.15); outline-offset:2px;}

   #important-message {
    color: #005EB5;
   }

   red { color: red;
   }

   blue { color: #005EB5; font-weight: bold;
   }

    /* FAQ */
    .faq {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg);
    }

    /* Item */
    .faq-item + .faq-item {
      border-top: 1px solid var(--border);
    }
    .faq-header {
      display: flex;
      align-items: center;
      width: 100%;
      text-align: left;
      background: var(--item-bg);
      border: 0;
      padding: 16px 20px;
      cursor: pointer;
      font-size: 1rem;
      gap: 12px;
    }
    .faq-header:hover {
      background: #f3f4f6;
    }
    .faq-header:focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 2px;
    }
    .faq-title {
      flex: 1;
      font-weight: 600;
      color: #005EB5;
    }

    /* Flèche (chevron) */
    .chevron {
      width: 20px;
      height: 20px;
      display: inline-block;
      transition: transform 200ms ease;
    }
    .faq-header[aria-expanded="true"] .chevron {
      transform: rotate(180deg);
    }

    /* Contenu */
    .faq-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 200ms ease;
      background: var(--bg);
    }
    .faq-content[data-open="true"] {
      grid-template-rows: 1fr;
    }
    .faq-inner {
      overflow: hidden;
      padding: 0 20px 0 52px; /* espace pour la flèche alignée */
    }
    .faq-content[data-open="true"] .faq-inner {
      padding: 12px 20px 16px 52px;
    }

    /* Liens et listes dans les réponses */
    .faq-inner p {
      margin: 0 0 8px;
      line-height: 1.6;
    }
    .faq-inner ul {
      margin: 8px 0 0 18px;
    }

/* Barre de notification en haut */
.site-notice {
  top: 0;
  z-index: 9999;
  background: var(--blue-500);    /* vert principal (modifiable) */
  color: #fff;
  padding: 0.75rem 1rem;
  border-bottom: 3px solid var(--blue-100); /* liseré foncé */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

}

/* Mise en page interne */
.site-notice__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto; /* message | CTA | close */
  gap: 0.75rem;
      text-align:center;
}

/* Message */
.site-notice__message {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  align: center;
}

/* Bouton d'action */
.site-notice__cta {
  background: #fff;
  color: #1b5e20;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-weight: 600;
  border: 2px solid transparent;
}
.site-notice__cta:hover,
.site-notice__cta:focus {
  background: #e8f5e9;
  border-color: #fff;
  outline: none;
}

/* Bouton fermer */
.site-notice__close {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.site-notice__close:hover,
.site-notice__close:focus {
  opacity: 0.85;
  outline: 2px solid #fff;
  border-radius: 3px;
}

/* Section Rester informé */
.newsletter-section {
  background: #f5f7fb;
  padding: 40px 20px;
  text-align: center;
}

.newsletter-section h2 {
  margin-bottom: 10px;
  font-size: 26px;
}

.newsletter-section p {
  margin-bottom: 20px;
  color: #444;
}

.newsletter-form {
  max-width: 420px;
  margin: 0 auto;
}

.newsletter-form input[type="email"] {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom: 12px;
  font-size: 15px;
}

.newsletter-form button {
  background-color: #005EB5;
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
}

.newsletter-form button:hover {
  background-color: #163bb0;
}

.newsletter-form .rgpd {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}

.pulse {
  background: #ffffff;
  color: white;
  padding: 15px 25px;
  font-weight: bold;
  animation: pulse 1.5s infinite;
  display: inline-block;
  border-radius: 8px;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(13,110,253,.7); }
  70% { box-shadow: 0 0 0 5px rgba(13,110,253,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
}

@media (max-width: 768px) {
  :root {
    --header-height: 160px;
    --notice-height: 56px;
  }
}