/* ==========================================================================
   Micro-interactions — mercihenrysante.nc
   Chargé après styles.css. Additif : transitions, états et élévation.

   PARTI PRIS
   Ce site a déjà un langage abouti — cartes en rayon 30 px, bordures crème,
   fonds beige, une ombre douce sur le bloc d'onglets. Contrairement au site
   d'accompagnement, il n'est pas plat : il est inerte. Les cartes ne réagissent
   pas, l'onglet actif ne se distingue pas, les champs du formulaire n'ont aucun
   état de saisie.

   On ne redessine donc rien. Trois règles :

   1. Les rayons reprennent les 30 px du thème, jamais une valeur intermédiaire.
      Un arrondi de 8 px à côté d'un arrondi de 30 px se voit immédiatement.

   2. Les ombres sont TEINTÉES DE BLEU NUIT, pas noires. Le thème utilise
      rgba(0,0,0,.05) ; sur des fonds crème, une ombre noire ternit la couleur.
      Une ombre reprenant la dominante du site paraît voulue.

   3. Un FILET SABLE marque où se porte l'attention — carte survolée, onglet
      actif, champ en cours de saisie — et un seul élément le porte à la fois.

   Mouvement court et décéléré : les choses se posent. Le site s'adresse à des
   personnes venant faire un bilan de santé, un rythme calme se suit mieux.
   ========================================================================== */

:root {
  /* Relevés dans styles.css, non inventés. */
  --mh-navy: #274259;
  --mh-sand: #e5ba84;

  --mh-tint-04: rgba(39, 66, 89, 0.04);
  --mh-tint-10: rgba(39, 66, 89, 0.10);

  /* Élévation en deux couches : une ombre serrée qui pose la carte, une large
     et diffuse qui lui donne son volume. Une seule couche reste toujours plate
     ou lourde — c'est la limite de l'ombre unique du thème. */
  --mh-lift-1: 0 2px 6px rgba(39, 66, 89, 0.05), 0 10px 30px rgba(39, 66, 89, 0.07);
  --mh-lift-2: 0 3px 8px rgba(39, 66, 89, 0.07), 0 18px 44px rgba(39, 66, 89, 0.12);

  --mh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mh-fast: 180ms;
  --mh-mid: 300ms;
  --mh-slow: 480ms;

  /* Le thème arrondit à 30 px : on ne s'en écarte pas. */
  --mh-radius: 30px;
}

/* --------------------------------------------------------------------------
   Accessibilité clavier
   L'anneau de focus disparaissait sous un `outline: none !important` appliqué à
   tous les liens dans styles.css. Il est rétabli au clavier uniquement, dans la
   couleur sable de la charte.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.open-menu:focus-visible,
.nav_tabs a:focus-visible {
  outline: 2px solid var(--mh-sand) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

.mh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 14px 24px;
  background: var(--mh-navy);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--mh-sand);
  border-radius: 0 0 var(--mh-radius) 0;
}
.mh-skip-link:focus {
  left: 0;
}

/* Le titre visé par une ancre ne doit pas passer sous l'en-tête fixe. Tout le
   menu de ce site pointe des ancres : c'est la règle la plus visible ici. */
[id^="section_"] {
  scroll-margin-top: 150px;
}

/* --------------------------------------------------------------------------
   Boutons
   Le thème ne leur donne aucune ombre, et une transition `all 0.15s linear`
   qui anime tout indistinctement. On cible les propriétés utiles et on décélère.
   -------------------------------------------------------------------------- */
.btn,
a.btn,
input[type="submit"],
button[type="submit"] {
  box-shadow: var(--mh-lift-1);
  transition:
    box-shadow var(--mh-mid) var(--mh-ease),
    transform var(--mh-fast) var(--mh-ease),
    filter var(--mh-fast) var(--mh-ease);
}
/* Un seul pixel de soulèvement : au-delà, le bouton décolle et l'effet se
   remarque plus que l'action. */
.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--mh-lift-2);
  /* Éclaircir le sable plutôt que changer sa teinte : la couleur de marque
     reste reconnaissable. */
  filter: brightness(1.04);
}
.btn:active,
a.btn:active,
input[type="submit"]:active,
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--mh-lift-1);
  filter: brightness(0.98);
}

/* --------------------------------------------------------------------------
   Navigation
   Uniquement la couleur : pas de soulignement animé.
   -------------------------------------------------------------------------- */
#main_menu > li > a,
#responsive_navigation a {
  transition: color var(--mh-fast) var(--mh-ease);
}

.open-menu {
  cursor: pointer;
}
.open-menu .bar {
  transition: transform var(--mh-mid) var(--mh-ease);
}
.open-menu:hover .bar1 { transform: translateY(-1px); }
.open-menu:hover .bar3 { transform: translateY(1px); }

a[href^="tel:"],
a[href^="mailto:"] {
  transition: color var(--mh-fast) var(--mh-ease), opacity var(--mh-fast) var(--mh-ease);
}
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
  opacity: 0.8;
}

/* Recherche de l'en-tête : le bouton doit se signaler comme actionnable. */
.form_search button {
  transition:
    color var(--mh-fast) var(--mh-ease),
    transform var(--mh-fast) var(--mh-ease);
}
.form_search button:hover {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Cartes (.col_item)
   Le thème leur donne un rayon de 30 px, un fond blanc et une bordure crème,
   mais aucune réaction. Au survol : soulèvement de 2 px, ombre qui s'installe,
   bordure qui se réchauffe vers le sable. Trois signaux légers valent mieux
   qu'un seul appuyé.
   -------------------------------------------------------------------------- */
.col_item {
  transition:
    transform var(--mh-mid) var(--mh-ease),
    box-shadow var(--mh-mid) var(--mh-ease),
    border-color var(--mh-mid) var(--mh-ease);
}
.col_item:hover {
  transform: translateY(-2px);
  box-shadow: var(--mh-lift-1);
  border-color: var(--mh-sand);
}

/* Lignes de prestations : filet sable à gauche, fond à peine teinté. */
.row_item,
.rows_item_bottom {
  position: relative;
  transition: background-color var(--mh-mid) var(--mh-ease);
}
.row_item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: var(--mh-sand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--mh-mid) var(--mh-ease);
}
.row_item:hover {
  background-color: var(--mh-tint-04);
}
.row_item:hover::before {
  transform: scaleY(1);
}

/* --------------------------------------------------------------------------
   Onglets
   La barre est une pilule blanche en rayon 30 px, mais rien ne distingue
   l'onglet actif. Une pastille sable se remplit derrière le libellé : elle
   reprend la forme de la barre, au lieu d'ajouter un soulignement étranger au
   vocabulaire du site.
   -------------------------------------------------------------------------- */
.nav_tabs a {
  position: relative;
  z-index: 1;
  transition: color var(--mh-mid) var(--mh-ease);
}
.nav_tabs a::before {
  content: "";
  position: absolute;
  inset: -8px -18px;
  z-index: -1;
  border-radius: var(--mh-radius);
  background: var(--mh-sand);
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--mh-mid) var(--mh-ease),
    transform var(--mh-mid) var(--mh-ease);
}
.nav_tabs a:hover::before {
  opacity: 0.18;
  transform: scale(1);
}
.nav_tabs a.active::before,
.nav_tabs li.active a::before {
  opacity: 1;
  transform: scale(1);
}
.nav_tabs a.active,
.nav_tabs li.active a {
  color: var(--mh-navy);
}

/* Le bloc d'onglets porte déjà une ombre noire à 5 % : on la reprend teintée. */
.tab_responsive {
  box-shadow: var(--mh-lift-1);
  transition: box-shadow var(--mh-slow) var(--mh-ease);
}

/* --------------------------------------------------------------------------
   Images de contenu
   Encadrées au rayon du thème ; le cadre reste immobile, seule la photo
   respire à l'intérieur. Déplacer le cadre ferait bouger la mise en page.
   -------------------------------------------------------------------------- */
.col_item .image,
.row_item .image {
  overflow: hidden;
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-lift-1);
  transition: box-shadow var(--mh-slow) var(--mh-ease);
}
.col_item .image img,
.row_item .image img {
  transform: scale(1.001);   /* évite un liseré au bord pendant la transition */
  transition: transform var(--mh-slow) var(--mh-ease);
}
.col_item:hover .image img,
.row_item:hover .image img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Formulaire de contact
   Les champs n'avaient aucun état de saisie. Filet discret au survol, sable
   une fois le champ actif.
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  transition:
    box-shadow var(--mh-fast) var(--mh-ease),
    background-color var(--mh-fast) var(--mh-ease);
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
  box-shadow: 0 0 0 1px var(--mh-tint-10);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow:
    0 0 0 1px var(--mh-sand),
    0 0 0 4px rgba(229, 186, 132, 0.22);
}

/* Erreur : contour rouge et teinte légère. Pas de secousse — sur un formulaire
   de rendez-vous médical, une animation brusque met en faute au lieu d'aider. */
.error input,
.error textarea,
input.error,
textarea.error {
  box-shadow: 0 0 0 1px #c0392b, 0 0 0 4px rgba(192, 57, 43, 0.14);
  background-color: rgba(192, 57, 43, 0.02);
}

/* Envoi en cours */
@keyframes mh-spin { to { transform: rotate(360deg); } }
.mh-sending {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
}
.mh-sending::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  border: 2px solid var(--mh-navy);
  border-right-color: transparent;
  border-radius: 50%;
  animation: mh-spin 700ms linear infinite;
}

/* --------------------------------------------------------------------------
   Carte
   Encadrée au rayon du thème, pour que la section contact ne se termine pas
   sur un rectangle à vif au milieu de blocs arrondis.
   -------------------------------------------------------------------------- */
.acf-map {
  border-radius: var(--mh-radius);
  overflow: hidden;
  box-shadow: var(--mh-lift-1);
}

/* --------------------------------------------------------------------------
   Carrousel et retour en haut
   -------------------------------------------------------------------------- */
.owl-dot span {
  transition:
    width var(--mh-mid) var(--mh-ease),
    height var(--mh-mid) var(--mh-ease),
    background-color var(--mh-mid) var(--mh-ease);
}
.owl-nav button {
  transition:
    opacity var(--mh-fast) var(--mh-ease),
    transform var(--mh-fast) var(--mh-ease),
    box-shadow var(--mh-mid) var(--mh-ease);
}
.owl-nav button:hover {
  transform: scale(1.06);
  box-shadow: var(--mh-lift-1);
}

#back-to-top,
.back-to-top,
.scroll-to-top {
  transition:
    opacity var(--mh-mid) var(--mh-ease),
    transform var(--mh-mid) var(--mh-ease),
    box-shadow var(--mh-mid) var(--mh-ease);
}
#back-to-top:hover,
.back-to-top:hover,
.scroll-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--mh-lift-2);
}

/* --------------------------------------------------------------------------
   Carte de la section contact (Leaflet + OpenStreetMap)
   L'ancienne carte Google utilisait un style personnalise tres doux — eau
   #f9f7f3, terres #efede9, routes blanches. Les tuiles OpenStreetMap sont bien
   plus colorees ; ce filtre les desature et les eclaircit pour retrouver la
   meme discretion, sans dependre d'un fournisseur de tuiles aux conditions
   commerciales floues.
   -------------------------------------------------------------------------- */
.acf-map .leaflet-tile-pane {
  /* Carte en niveaux de gris. Le leger gain de luminosite et la baisse de
     contraste evitent l'aspect « photocopie » d'un grayscale brut, et
     rapprochent le rendu du fond creme de l'ancienne carte Google. */
  filter: grayscale(1) brightness(1.06) contrast(0.92);
}
/* Le marqueur et l'attribution ne doivent pas etre desatures avec le fond. */
.acf-map .leaflet-marker-pane,
.acf-map .leaflet-shadow-pane,
.acf-map .leaflet-control-container {
  filter: none;
}
.acf-map .leaflet-container {
  font: inherit;
  background: #f9f7f3;
}
.acf-map .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.72);
}

/* Lien d'itineraire ajoute sous la carte : une carte non deplacable laisse
   sinon le visiteur sans moyen d'obtenir un trajet. */
.mh-carte-itineraire {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  transition: opacity var(--mh-fast) var(--mh-ease);
}
.mh-carte-itineraire:hover {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   Ce réglage système est une demande explicite : les animations de défilement
   provoquent nausées ou migraines chez certaines personnes. On neutralise le
   mouvement — y compris WOW.js et le parallaxe — en conservant l'élévation, qui
   ne bouge pas, et sans jamais masquer de contenu.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .wow,
  .animated {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .parallax_child {
    transform: none !important;
  }
  .col_item:hover,
  .col_item:hover .image img,
  .row_item:hover .image img,
  .owl-nav button:hover,
  .form_search button:hover,
  .btn:hover,
  a.btn:hover {
    transform: none !important;
  }
}