/*
Theme Name: Musee d'Etretat - Astra Child
Template: astra
Version: 1.0
Text Domain: etretat-astra-child
*/

/* ===========================
   MENU PRINCIPAL (ASTRA)
   =========================== */

   /* Base : poids fixe pour éviter tout "saut" de mise en page */
.main-header-menu li > a {
  position: relative;
  font-weight: 500;
  line-height: 1.2;
  transition: color .25s ease;
  z-index: 1; /* pour passer au-dessus du "pinceau" */
}

/* Séparateurs verticaux entre items */
.main-header-menu > li {
  position: relative;
  padding: 0 1.5rem; /* espace horizontal */
}

.main-header-menu > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 2px;
  background-color: #002747; /* bleu principal */
  opacity: 0.85;
}

/* Effet "pinceau" au survol (version sans image : dégradé bleu) */
.main-header-menu li > a::before {
  content: "";
  position: absolute;
  left: -6px;           /* déborde un peu à gauche pour l'effet "coup de pinceau" */
  right: -6px;          /* idem à droite */
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  height: 1.6em;        /* hauteur du trait sous le texte */
  border-radius: 6px;   /* bords adoucis */
  background: linear-gradient(140deg, #3F789E 0%, #002747 100%);
  transition: transform .20s ease;
  z-index: -1;          /* derrière le texte */
}

.main-header-menu li > a:hover,
.main-header-menu li:hover > a {
  color: #ffffff !important; /* texte blanc au survol */
}

.main-header-menu li > a:hover::before,
.main-header-menu li:hover > a::before {
  transform: translateY(-50%) scaleX(1);
}

/* ---------------------------
   Variante avec image pinceau
   (décommente les 4 lignes ci-dessous et commente la version "background: linear-gradient" plus haut)
   --------------------------- */
/*
.main-header-menu li > a::before {
  background: url('/wp-content/themes/etretat-astra-child/images/brush.png') no-repeat center/cover;
}
*/

/* ===========================
   RESPONSIVE
   =========================== */

/* Masquer les séparateurs en mobile pour éviter la surcharge visuelle */
@media (max-width: 768px) {
  .main-header-menu > li { padding: 0 1rem; }
  .main-header-menu > li:not(:last-child)::after { display: none; }
}

/* ÉTAT ACTIF (page en cours) = même rendu que le survol */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a,
.main-header-menu .current-menu-ancestor > a,   /* parent actif (si sous-pages) */
.main-header-menu .current-menu-parent > a,
.main-header-menu li > a[aria-current="page"] {
  color: #ffffff !important;
}

.main-header-menu .current-menu-item > a::before,
.main-header-menu .current_page_item > a::before,
.main-header-menu .current-menu-ancestor > a::before,
.main-header-menu .current-menu-parent > a::before,
.main-header-menu li > a[aria-current="page"]::before {
  transform: translateY(-50%) scaleX(1);
}

/* Accessibilité clavier : focus = même rendu que hover */
.main-header-menu li > a:focus {
  outline: none;
  color: #ffffff !important;
}
.main-header-menu li > a:focus::before {
  transform: translateY(-50%) scaleX(1);
}

/* HERO vidéo : overlay foncé fiable */
.wp-block-cover.hero-video {
  position: relative;               /* nécessaire pour le ::after */
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #ffffff;
  padding: 4rem 2rem;
  padding-left: 5%;              /* espace depuis le bord gauche */
}

.wp-block-cover.hero-video h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  margin-bottom: 2rem;
}

.wp-block-cover.hero-video p {
  font-size: 1.2rem;
  max-width: 720px;
  margin: 0 0 2rem 0;   /* espace de 2rem en bas, rien en auto */
}

.wp-block-cover.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.50);      /* ← ajuste 0.35 à 0.6 selon le rendu voulu */
  pointer-events: none;
  z-index: 0;
}

.wp-block-cover.hero-video .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* texte à gauche */
  gap: 1.75rem;              /* <-- règle ici l’espace entre chaque bloc */
  position: relative;               /* texte au-dessus de l’overlay */
  max-width: 700px;              /* largeur max du texte */
  z-index: 1;
}

/* Optionnel : neutraliser les marges que le thème pourrait imposer */
.wp-block-cover.hero-video .wp-block-cover__inner-container > * {
  margin: 0 !important;
}

.wp-block-cover.hero-video .wp-block-button__link {
  background: #3F789E;
  color: #fff;
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
  transition: all 0.3s ease;
}
.wp-block-cover.hero-video .wp-block-button__link:hover {
  background: #002747;
}

/* Cadre sombre derrière le texte du hero */
.hero-textbox {
  background: rgba(0, 0, 0, 0.6); /* noir semi-transparent */
  padding: 1.5rem 2rem;
  border-radius: 12px; /* angles arrondis */
  display: inline-block; /* s'adapte au contenu */
  max-width: 800px;
  margin: 0 auto;
}

.hero-textbox h1,
.hero-textbox p {
  color: #fff !important; /* force le texte en blanc */
  margin: 0 0 0.75rem;
}

/* Supprime le fond blanc automatique d'Astra dans les colonnes info */
.info-cards,
.info-cards .wp-block-group,
.info-cards .wp-block-column {
  background: transparent !important;
}

/* Et si le thème Astra réapplique la variable blanche */
.info-cards [style*="--ast-global-color-5"],
.info-cards [style*="background-color: var(--ast-global-color-5)"] {
  background-color: transparent !important;
}

:root {
  --ast-global-color-5: transparent !important;
}

/* Force le header à fond blanc sur toutes les pages */
.site-header, .ast-transparent-header {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  position: relative !important;
}

/* Pour éviter que le hero vidéo passe derrière */
.ast-transparent-header-active .site-header {
  position: relative !important;
}

.text-justify {
  text-align: justify;
}

/* ===========================
   SECTION INFORMATIONS PRATIQUES
   =========================== */

.info-pratiques {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

.info-pratiques::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  z-index: 0;
}

.info-pratiques > * {
  position: relative;
  z-index: 1;
}

/* ===========================
   BLOCS D'INFORMATIONS (COLONNES)
   =========================== */

.info-cards {
  display: flex;
  align-items: stretch; /* même hauteur pour toutes les colonnes */
  justify-content: space-between;
  position: relative;
  gap: 0;
}

/* Colonnes */
.info-cards .wp-block-column {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 100px; /* ton espacement interne Gutenberg */
}

/* Traits verticaux parfaitement centrés et synchronisés */
.info-cards .wp-block-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;        /* commence après ton padding haut */
  bottom: 40px;     /* s’arrête avant ton padding bas */
  right: calc(-50px); /* moitié du padding horizontal = centrage exact */
  width: 2px;
  background: rgba(255, 255, 255, 0.65); /* blanc semi-transp. */
  border-radius: 2px;
}

/* Forcer la colonne centrale à s’étirer à la hauteur max */
.info-cards .wp-block-column:nth-child(2) {
  align-self: stretch;
}

/* Ajuste la carte pour qu’elle ne crée plus de hauteur aléatoire */
.info-cards iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px; /* hauteur mini lisible */
  border: none;
  object-fit: cover;
}

/* ===========================
   VERSION MOBILE
   =========================== */
@media (max-width: 768px) {
  .info-cards {
    flex-direction: column;
    align-items: stretch;
  }

  .info-cards .wp-block-column {
    padding: 40px 0;
  }

  .info-cards .wp-block-column:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
  }

  .info-cards .wp-block-column:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* ===========================
   SECTION PERSONNALITÉS
   =========================== */

.personnalites-section {
  background: var(--ast-global-color-5, #ffffff);
  padding: 4rem 2rem;
  position: relative;
  z-index: 1;
}

/* Structure interne identique au container global */
.personnalites-section .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Titres et texte d'intro */
.personnalites-section h2 {
  color: #002747;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}

.personnalites-section p {
  color: #002747;
  font-size: 1.1rem;
  max-width: 750px;
  margin: 0 auto 3rem;
}

/* ===========================
   CARTES PERSONNALITÉS - ESPACEMENT GLOBAL + OMBRE + DÉFILEMENT
   =========================== */

/* 3 cartes alignées, centrées, sans retour à la ligne */
.personnalites-cards {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;        /* empêche de passer à la ligne */
  gap: 5rem !important;                 /* ~80px entre cartes : 3×340 + 2×80 = 1180px < 1200px */
  margin: 4rem auto !important;         /* centre le conteneur */
  padding: 2rem 0 !important;
  width: 100%;
}

/* Sous 1190px, on autorise le wrap pour éviter l’overflow */
@media (max-width: 1190px) {
  .personnalites-cards {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3rem 2rem !important;          /* espacement un peu réduit pour les petits écrans */
  }
}

.card {
  width: 340px !important;
  height: 480px !important;
  perspective: 1200px !important;
  border-radius: 16px !important;
  position: relative !important;
}

/* Contenu pivotant */
.card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transition: transform 0.8s ease !important;
  border-radius: 16px !important;

  /* Ombre plus marquée à droite et en bas */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.8) !important;
  background: #fff !important;
}

.card:hover .card-inner {
  transform: rotateY(180deg) !important;
}

/* Faces avant et arrière */
.card-front,
.card-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  z-index: 1 !important;
}

/* Face avant */
.card-front {
  background: #f4f4f4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  transform: rotateY(0deg) !important;
}

.card-front img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 16px !important;
}

/* Face arrière */
.card-back {
  background: #002747 !important;
  color: #fff !important;
  transform: rotateY(180deg) translateY(0) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  text-align: left !important;
  z-index: 3 !important;

  /* marge interne (espacement du contenu) */
  padding: 3rem 2.5rem 3.5rem !important;
  gap: 1.75rem !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Correction critique du décalage vertical */
.card-inner,
.card-front,
.card-back,
.card-back * {
  transform-origin: center center !important;
  vertical-align: baseline !important;
  line-height: normal !important;
}

/* ----------- TEXTE DÉFILANT + FLÈCHE ----------- */

/* Zone défilable à l’intérieur du dos */
.card-back .scroll-zone {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent !important;
  height: 100% !important;
  padding-right: 0.5rem !important;
}

/* Scrollbar personnalisée (Webkit) */
.card-back .scroll-zone::-webkit-scrollbar {
  width: 6px;
}
.card-back .scroll-zone::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

/* Flèche indicatrice */
.card-back::after {
  content: "▼";
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.7;
  animation: bounceArrow 1.4s infinite;
  pointer-events: none;
}

/* Animation flèche */
@keyframes bounceArrow {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* Flèche disparaît quand on survole */
.card-back:hover::after {
  opacity: 0;
  animation: none;
}

/* Titre et texte */
.card-back h3 {
  margin-top: 0 !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: 0.5px !important;
}

.card-back p {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .personnalites-cards {
    flex-direction: column !important;
    align-items: center !important;
    gap: 3rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .card {
    width: 85% !important;
    max-width: 360px !important;
    height: auto !important;
  }
}

/* === 0) Neutralise les wrappers Astra + fond global noir === */
#colophon .site-primary-footer-wrap,
#colophon .site-footer-primary,
#colophon .site-footer-primary .ast-container,
#colophon .site-footer-primary .ast-builder-grid-row-container,
#colophon .site-footer-primary .ast-builder-grid-row,
#colophon .site-footer-primary .site-footer-section {
  background: #111111 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#colophon .site-footer-primary .ast-container,
#colophon .site-footer-primary .ast-builder-grid-row-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === 1) Grille à 4 colonnes === */
#colophon .site-footer-primary .ast-builder-grid-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* === 2) Colonnes internes === */
.footer-col {
  position: relative;
  box-sizing: border-box;
  padding: 50px !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === 3) Colonne 1 : logo (fond blanc plein, sans halo noir) === */
#colophon .site-footer-primary .ast-builder-grid-row > *:first-child {
  background: #ffffff !important;   /* le conteneur est blanc */
  display: flex !important;
  align-items: stretch !important;
}

#colophon .site-footer-primary .ast-builder-grid-row > *:first-child .footer-col--logo {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  background: #ffffff !important;
  color: #1A2C47 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 50px !important;
}

.footer-logo {
  max-width: 220px;
  height: auto;
  display: block;
}

/* === 4) Colonnes 2, 3 et 4 : fond noir + texte blanc === */
.footer-col--dark {
  background: #111111 !important;
  color: #ffffff !important;
}

/* === 5) Liens blancs (et non bleus) === */
#colophon .footer-col a {
  color: #ffffff !important;
  text-decoration: none;
  transition: color 0.25s;
}
#colophon .footer-col a:hover {
  color: #3F789E !important;
}

/* === 6) Séparateurs verticaux subtils === */
.footer-col--sep::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50px;
  bottom: 50px;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}
/* Filet discret à droite de la colonne logo */
.footer-col--logo::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50px;
  bottom: 50px;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* === 7) Bouton === */
.footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3F789E;
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 1.25rem;
  transition: all 0.25s ease;
  line-height: 1.2;
  min-height: 48px;
}
.footer-button:hover {
  background: #fff;
  color: #111111;
}

/* === 8) Ligne de séparation au-dessus du copyright === */
.site-below-footer-wrap {
  border-top: 3px solid #677486 !important;
}

/* === 9) Responsive === */
@media (max-width: 992px) {
  #colophon .site-footer-primary .ast-builder-grid-row {
    grid-template-columns: 1fr !important;
  }
  .footer-col {
    padding: 40px 20px !important;
    text-align: center;
  }
  .footer-col--logo::after,
  .footer-col--sep::before {
    display: none !important;
  }
}

/* Force un header blanc sur les pages système d’Astra */
.error404 .site-header,
.search .site-header,
.archive .site-header,
.error404 .ast-transparent-header,
.search .ast-transparent-header,
.archive .ast-transparent-header {
  background-color: #ffffff !important;
  position: relative !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Empêche Astra d’injecter son bleu via inline-style */
.error404 .main-header-bar,
.search .main-header-bar,
.archive .main-header-bar {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* === Pages système : 404, recherche, archives (au cas où) === */
.error404 #masthead,
.error404 .site-header,
.error404 .site-primary-header-wrap,
.error404 .main-header-bar,
.error404 .ast-primary-header-bar,
.error404 .ast-above-header-bar,
.error404 .ast-below-header-bar,
.error404 .ast-mobile-header-wrap,
.search  #masthead,
.search  .site-header,
.search  .site-primary-header-wrap,
.search  .main-header-bar,
.search  .ast-primary-header-bar,
.search  .ast-above-header-bar,
.search  .ast-below-header-bar,
.search  .ast-mobile-header-wrap,
.archive #masthead,
.archive .site-header,
.archive .site-primary-header-wrap,
.archive .main-header-bar,
.archive .ast-primary-header-bar,
.archive .ast-above-header-bar,
.archive .ast-below-header-bar,
.archive .ast-mobile-header-wrap {
  background:#ffffff !important;
  position:relative !important;
  backdrop-filter:none !important;
  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
}

/* (Optionnel) si le thème force un fond via une variable couleur */
body:not(.home) .ast-primary-header-bar::before,
.error404 .ast-primary-header-bar::before,
.search  .ast-primary-header-bar::before,
.archive .ast-primary-header-bar::before {
  background:#ffffff !important;
  opacity:1 !important;
}

/* Couleur des liens du menu sur fond blanc (hors accueil) */
body:not(.home) .main-header-menu > li > a {
  color:#0e1b2d !important;   /* bleu nuit lisible */
}

/* === FIL D'ARIANE (BREADCRUMB) === */

/* Style général : texte sobre, bleu foncé */
.ast-breadcrumbs,
.ast-breadcrumbs-wrapper {
  color: #002747 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

/* Liens dans le fil d’Ariane */
.ast-breadcrumbs a {
  color: #002747 !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.25s ease, text-decoration-color 0.25s ease !important;
}

/* Effet au survol : couleur + soulignement */
.ast-breadcrumbs a:hover {
  color: #3F789E !important; /* bleu du site */
  text-decoration: underline !important;
  text-underline-offset: 3px !important; /* petit décalage pour plus d’élégance */
  text-decoration-thickness: 1.5px !important; /* trait fin et propre */
}

/* Séparateur (› ou /) */
.ast-breadcrumb-separator {
  color: rgba(0, 39, 71, 0.4) !important;
  margin: 0 0.5rem !important;
}

/* Supprimer le fil d’Ariane sur la page d’accueil */
body.home .ast-breadcrumbs,
body.home .ast-breadcrumbs-wrapper {
  display: none !important;
}

.wpcf7 form p { margin: 0 0 1rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  max-width: 680px;
  padding: .75rem 1rem;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  background: #fff;
}
.wpcf7 textarea { min-height: 180px; }
.wpcf7 .footer-button {
  background: #3F789E; color:#fff; border-radius:8px;
  padding:.8rem 1.6rem; display:inline-flex; align-items:center; justify-content:center;
}
.wpcf7 .footer-button:hover { background:#002747; }

.wpcf7 {
  margin-top: 30px !important;
}

/* Amélioration formulaire Contact */
.wpcf7 form {
  max-width: 700px;
  margin: 0 auto;
}

.wpcf7-submit {
  background: #3F789E !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 0.8rem 1.6rem !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.wpcf7-submit:hover {
  background: #002747 !important;
}

.wpcf7-acceptance {
  font-size: 0.9rem;
  color: #111;
  margin-top: 10px;
}

.wpcf7-acceptance a {
  color: #3F789E;
  text-decoration: underline;
}
.wpcf7-acceptance a:hover {
  color: #002747;
}

/* === Page Nous contacter === */
.page-id-226 .wp-block-heading {
  text-align: start;
  color: #002747;
  font-size: 2rem;
  margin-top: 40px;
  margin-bottom: 10px;
}

.page-id-226 p {
  text-align: start;
  color: #3F789E;
  font-size: 1.1rem;
  margin-bottom: 40px;
}

.page-id-226 .wpcf7 {
  max-width: 680px;
  margin: 0 auto 80px;
}

.page-id-226 .wpcf7 form {
  background: #f9f9f9;
  padding: 40px 50px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Centre uniquement le bouton d’envoi du formulaire */
.page-id-226 .wpcf7 form p:last-of-type {
  text-align: center !important;
}

/* Centre le bouton "Envoyer le message" */
.page-id-226 .wpcf7 .wpcf7-submit {
  display: block !important;
  margin: 18px auto 0 !important; /* auto = centrage horizontal */
}

/* (optionnel) Style cohérent + hover */
.page-id-226 .wpcf7 .wpcf7-submit {
  background: #3F789E;
  color: #fff;
  border: 0;
  padding: .8rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}
.page-id-226 .wpcf7 .wpcf7-submit:hover { background:#002747; }

/* ===========================
   CORRECTIONS FOOTER (Texte & Copyright)
   =========================== */

/* 1️⃣ Forcer texte et liens blancs par défaut */
#colophon,
#colophon p,
#colophon span,
#colophon a,
#colophon li,
#colophon h2,
#colophon h3 {
  color: #ffffff !important;
}

/* 2️⃣ Couleur des liens au survol */
#colophon a:hover {
  color: #3F789E !important;
}

/* 3️⃣ Centrage du copyright */
.site-below-footer-wrap {
  text-align: center !important;
}

/* 4️⃣ Ajustement vertical du logo du footer (optionnel si décalé) */
.footer-col--logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === Correction finale : centrer le copyright === */
.site-below-footer-wrap,
.site-below-footer-inner-wrap,
.site-below-footer-section-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.site-below-footer-section-1 p,
.site-below-footer-section-1 a {
  text-align: center !important;
  margin: 0 auto !important;
}

/* === PAGE INFORMATIONS PRATIQUES === */
.page-id-234 {
  color: #002747;
}

.page-id-234 h2 {
  color: #002747;
  margin-top: 40px;
  margin-bottom: 20px;
}

.page-id-234 p, 
.page-id-234 li {
  font-size: 1.1rem;
  color: #3F789E;
  line-height: 1.6;
}

.page-id-234 iframe {
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Espacement global */
.page-id-234 .wp-block-group {
  margin-bottom: 60px;
}

/* === UNIFICATION DU HEADER SUR TOUTES LES PAGES === */

/* 1️⃣ Même fond blanc et comportement stable */
.site-header,
.ast-transparent-header,
.main-header-bar,
.ast-primary-header-bar {
  background-color: #ffffff !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  z-index: 999 !important;
}

/* 2️⃣ Liens du menu : bleu foncé par défaut */
.main-header-menu > li > a {
  color: #002747 !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  transition: color 0.25s ease;
}

/* 3️⃣ Survol du menu : effet pinceau et texte blanc */
.main-header-menu li > a:hover,
.main-header-menu li:hover > a {
  color: #ffffff !important;
  transition: color 0.25s ease;
}

/* 4️⃣ Page active (le lien de la page en cours) */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a,
.main-header-menu .current-menu-parent > a {
  color: #ffffff !important;
}

/* 5️⃣ Supprime toute différence entre home et autres pages */
body:not(.home) .main-header-menu > li > a {
  color: #002747 !important;
}

/* 6️⃣ Supprime les styles transparents d’Astra */
.ast-primary-header-bar::before {
  background: #ffffff !important;
  opacity: 1 !important;
}

/* 7️⃣ Alignement vertical cohérent */
.site-header-section-left,
.site-header-section-right {
  display: flex;
  align-items: center;
}

/* 8️⃣ Correction responsive */
@media (max-width: 768px) {
  .main-header-menu > li > a {
    color: #002747 !important;
  }
}

/* === Correction finale : priorité au texte blanc au survol === */
.main-header-menu > li > a {
  color: #002747 !important; /* bleu foncé au repos */
  transition: color 0.25s ease;
}

.main-header-menu > li:hover > a,
.main-header-menu > li > a:hover {
  color: #ffffff !important; /* devient blanc au survol */
}

/* Empêche body:not(.home) de réimposer le bleu après hover */
body:not(.home) .main-header-menu > li:hover > a,
body:not(.home) .main-header-menu > li > a:hover {
  color: #ffffff !important;
}

/* === Forcer le texte blanc sur le lien actif du menu === */
body .main-header-menu .current-menu-item > a,
body .main-header-menu .current_page_item > a,
body .main-header-menu .current-menu-ancestor > a,
body .main-header-menu .current-menu-parent > a,
body .main-header-menu li > a[aria-current="page"] {
  color: #ffffff !important;
}

/* === MENU MOBILE (burger) === */

/* Couleur du texte par défaut dans le menu mobile */
.ast-mobile-popup-inner .main-header-menu li > a {
  color: #002747 !important;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.25s ease;
}

/* Couleur du texte au survol */
.ast-mobile-popup-inner .main-header-menu li > a:hover {
  color: #ffffff !important;
  background: linear-gradient(140deg, #3F789E 0%, #002747 100%) !important;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Lien actif (page actuelle) */
.ast-mobile-popup-inner .main-header-menu .current-menu-item > a,
.ast-mobile-popup-inner .main-header-menu .current_page_item > a,
.ast-mobile-popup-inner .main-header-menu .current-menu-parent > a {
  color: #ffffff !important;
  background: linear-gradient(140deg, #3F789E 0%, #002747 100%) !important;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Supprime le fond gris que met Astra par défaut */
.ast-mobile-popup-drawer.active {
  background: #ffffff !important;
}

/* Optionnel : améliore la lisibilité du menu mobile */
.ast-mobile-popup-inner {
  padding: 2rem 1rem !important;
}

.ast-mobile-popup-inner .main-header-menu {
  gap: 0.5rem !important;
}

/* === ANIMATION DU MENU MOBILE === */

/* Transition fluide du panneau mobile */
.ast-mobile-popup-drawer {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand le menu est actif */
.ast-mobile-popup-drawer.active {
  opacity: 1;
  transform: translateY(0);
}

/* Animation douce sur les liens */
.ast-mobile-popup-inner .main-header-menu li {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ast-mobile-popup-drawer.active .main-header-menu li {
  opacity: 1;
  transform: translateY(0);
}

/* === PAGE VISITER ÉTRETAT === */
.page-id-257 {
  color: #002747;
}

/* Titres */
.page-id-257 h1, 
.page-id-257 h2 {
  color: #002747;
  margin-bottom: 15px;
}

/* Paragraphes */
.page-id-257 p {
  color: #3F789E;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* Boutons */
.page-id-257 .wp-block-button__link {
  background: linear-gradient(140deg, #3F789E 0%, #002747 100%);
  color: #fff;
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.page-id-257 .wp-block-button__link:hover {
  background: #fff;
  color: #002747;
}

/* Images */
.page-id-257 img {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  width: 100%;
  height: auto;
}

/* Colonnes */
.page-id-257 .wp-block-columns {
  margin-top: 60px;
  margin-bottom: 60px;
  align-items: center;
}

#colophon .footer-mail {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.25s ease, text-decoration 0.25s ease;
}

#colophon .footer-mail:hover {
  color: #3F789E !important; /* bleu au survol */
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* === Numéro de téléphone cliquable dans le footer === */
#colophon .footer-phone {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.25s ease, text-decoration 0.25s ease;
}

#colophon .footer-phone:hover {
  color: #3F789E !important; /* même bleu au survol */
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* === ALIGNEMENT GAUCHE PARFAIT POUR LA PAGE "LE MUSÉE" === */

.page-id-281 .wp-block-group[style*="padding-left"],
.page-id-281 .wp-block-group[style*="padding-right"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Supprime aussi la marge latérale que Gutenberg ajoute parfois */
.page-id-281 .wp-block-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Aligne le contenu principal au même bord que le fil d’Ariane */
.page-id-281 .entry-content {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* === Correction superposition reCAPTCHA / flèche haut === */
#ast-scroll-top {
  right: 90px !important; /* éloigne la flèche du bord droit */
  bottom: 30px !important; /* espace depuis le bas */
  z-index: 9998 !important; /* sous le reCAPTCHA, mais au-dessus du contenu */
}

/* Si le reCAPTCHA est trop haut, on peut aussi l’ajuster */
.grecaptcha-badge {
  z-index: 9999 !important; /* priorité au-dessus de tout */
}

/* === PAGE ÉVÈNEMENTS À NE PAS MANQUER === */
.page-id-317 {
  color: #002747;
}

/* Supprime les marges internes par défaut à gauche et à droite */
.page-id-317 .wp-block-group.is-layout-constrained {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Uniformise les titres et paragraphes avec les autres pages */
.page-id-317 h1,
.page-id-317 h2 {
  color: #002747;
  margin-bottom: 15px;
}

.page-id-317 p {
  color: #3F789E;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* Harmonise les colonnes et images */
.page-id-317 .wp-block-columns {
  margin-top: 60px;
  margin-bottom: 60px;
  align-items: center;
}

.page-id-317 img {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  width: 100%;
  height: auto;
}

/* Boutons */
.page-id-317 .wp-block-button__link {
  background: linear-gradient(140deg, #3F789E 0%, #002747 100%);
  color: #fff !important;
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.page-id-317 .wp-block-button__link:hover {
  background: #fff;
  color: #002747 !important;
}

/* === Correction du logo coupé dans le header === */
.site-logo-img img,
.custom-logo-link img {
  max-height: 80px !important;  /* ajuste selon la taille idéale */
  height: auto !important;
  width: auto !important;
  object-fit: contain !important; /* empêche tout rognage */
  border-radius: 0 !important; /* évite les coins arrondis */
}

/* === Boutons uniformisés avec animation fluide et élégante === */
a.footer-button,
.wp-block-button__link,
.page-id-226 .wpcf7-submit {
  display: inline-block !important;
  text-align: center !important;
  border-radius: 8px !important;
  background: linear-gradient(140deg, #3F789E 0%, #002747 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 0.8rem 1.6rem !important;
  text-decoration: none !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

/* Effet au survol : légère élévation + éclaircissement */
a.footer-button:hover,
.wp-block-button__link:hover,
.page-id-226 .wpcf7-submit:hover {
  background: linear-gradient(140deg, #b8e2ff 0%, #5ca1d4 100%) !important;
  color: #001a2e !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(63, 120, 158, 0.4);
}

/* Effet clic : rebond doux */
a.footer-button:active,
.wp-block-button__link:active,
.page-id-226 .wpcf7-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(63, 120, 158, 0.3);
}

/* =========================================================
   HARMONISATION DU TEXTE (hors .info-pratiques, .personnalites-section, .hero-video)
   ========================================================= */

/* Paragraphes et listes : couleur bleue harmonisée, sauf zones sombres */
body p:not(.info-pratiques p):not(.personnalites-section p):not(.hero-video p),
body li:not(.info-pratiques li):not(.personnalites-section li):not(.hero-video li) {
  color: #3F789E !important;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Titres h1–h4 : bleu foncé, sauf dans les zones sombres */
body h1:not(.info-pratiques h1):not(.personnalites-section h1):not(.hero-video h1),
body h2:not(.info-pratiques h2):not(.personnalites-section h2):not(.hero-video h2),
body h3:not(.info-pratiques h3):not(.personnalites-section h3):not(.hero-video h3),
body h4:not(.info-pratiques h4):not(.personnalites-section h4):not(.hero-video h4) {
  color: #002747 !important;
}

/* === Blason des partenaires : aligné à gauche et taille réduite === */
.footer-col--dark img {
  max-width: 90px !important;   /* largeur harmonieuse (ajuste si besoin) */
  height: auto !important;      /* garde les proportions naturelles */
  display: block !important;    /* force l’alignement vertical correct */
  margin: 12px 0 0 0 !important; /* espace au-dessus, aligné à gauche */
}