/* Compléments au thème : polices hébergées localement et reconstruction du slider d'accueil. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/roboto-500.woff2") format("woff2"); }

/* Slider d'accueil (ex-Revolution Slider) : grille de 1240 × 800 centrée, réduite proportionnellement
   en dessous de 1240 px. Chaque calque porte dans le HTML ses valeurs d'origine en pixels de la grille.
   --u vaut un pixel de la grille, calculé comme Revolution Slider sur la largeur du slider (hors barre de défilement).
   Repli sur la largeur de la fenêtre pour les navigateurs sans requêtes de conteneur (Safari ≤ 15). */
.mfn-main-slider { --u: calc(min(100vw, 1240px) / 1240); }
@supports (container-type: inline-size) {
  .mfn-main-slider { container-type: inline-size; --u: calc(min(100cqw, 1240px) / 1240); }
}
.heros {
  position: relative;
  height: calc(800 * var(--u));
  background: url("../img/heros/fond.png") no-repeat center / cover;
  overflow: hidden;
}
.scene {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(1240 * var(--u));
  height: 100%;
  transform: translateX(-50%);
}
.calque {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  margin: 0;
  white-space: normal;
  animation: calque-entree var(--duree, 1000ms) var(--courbe, cubic-bezier(.645, .045, .355, 1)) var(--delai, 0ms) both;
}
img.calque { width: calc(var(--w) * var(--u)); max-width: none; height: auto; }
@keyframes calque-entree {
  from {
    opacity: 0;
    transform: translate(calc(var(--dx, 0) * var(--u)), calc(var(--dy, 0) * var(--u))) scale(var(--s, 1));
  }
}
.heros__titre {
  box-sizing: border-box;
  width: calc(348 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #1e80a0;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: calc(37 * var(--u));
  line-height: calc(60 / 37);
  letter-spacing: calc(-1 * var(--u));
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}
.heros__mentions {
  width: calc(210 * var(--u));
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: calc(19 * var(--u));
  line-height: calc(25 / 19);
  white-space: nowrap;
}
.heros__surtitre {
  width: calc(645 * var(--u));
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: calc(29 * var(--u));
  line-height: calc(39 / 29);
  text-align: right;
}
.heros__bouton {
  padding: calc(3 * var(--u)) calc(40 * var(--u));
  border: 1px solid #fff;
  border-radius: calc(25 * var(--u));
  background: #13a6b3;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: calc(17 * var(--u));
  line-height: calc(40 / 17);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .7s, background-color .7s;
}
.heros__bouton:hover, .heros__bouton:focus-visible { background: #fff; color: #1e80a0; }

/* Lien « Mentions légales » du pied de page : couleur du thème assez contrastée sur fond blanc */
#Footer .copyright a { color: #1e80a0; }

/* Focus clavier visible (le thème le supprimait) : anneau bleu doublé de blanc, lisible sur fond clair ou foncé.
   « html » donne la priorité sur la règle a:focus{outline:0} du thème ; sans effet au clic souris. */
html :focus-visible {
  outline: 2px solid #1e80a0;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #fff;
}

@media (prefers-reduced-motion: reduce) {
  .calque, .animate { animation: none !important; }
  .animate[data-anim-type] { opacity: 1; }
}