/* Jetons de mouvement */
:root {
  --courbe-douce: cubic-bezier(.2, .7, .2, 1);
  --courbe-menu: cubic-bezier(.7, 0, .2, 1);
  --courbe-bascule: cubic-bezier(.45, 0, .25, 1);
  --duree-compact: .5s;
  --duree-bascule: .4s;
  --flou-voile: 5px;
  --colonnes-menu: 5;
  --grain-opacite: .075;
  --grain-taille: 128px;
  --taille-fleche: clamp(12px, 1.1vw, 15px);
}

/* Jetons du pied de page */
:root {
  --taille-pied: 12px;
  --ecart-pied: 36px;
  --air-pied: 22px;
  --marge-lien-pied: 6px;
}

/* Base */
html {
  background-color: var(--creme);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  background-color: var(--creme);
  color: var(--noir);
  font-family: var(--police-texte), system-ui, sans-serif;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

:focus-visible,
.elementor .e-paragraph-link-base:focus-visible {
  outline: 2px solid var(--brique);
  outline-offset: 3px;
}

@media (hover: hover) {
  html:has(.menu-ouvert) {
    overflow: hidden;
  }
}

.elementor .menu-defilement {
  overscroll-behavior: contain;
}

/* Animations */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes grainZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.5); }
}

@keyframes heroLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* En-tête */
.elementor .entete {
  animation: heroUp .9s 0s var(--courbe-douce) backwards;
}

.admin-bar .elementor .entete {
  top: 32px;
}

.elementor .entete::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--verre);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 var(--trait-bande);
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.elementor .entete.est-defile::before {
  opacity: 1;
}

.menu-ouvert .elementor .entete::before {
  opacity: 0;
}

.elementor .entete .entete-interieur {
  transition: padding var(--duree-compact) var(--courbe-douce);
}

.elementor .entete.est-defile .entete-interieur {
  padding-block: 12px;
}

/* Logo */
.elementor .entete .logo-svg {
  transition: width var(--duree-compact) var(--courbe-douce);
}

.elementor .entete.est-defile .logo-svg {
  width: 42px;
}

.logo .logo-lettre {
  transition: transform .55s var(--courbe-bascule);
}

.logo .logo-lettre-p {
  transition-delay: .07s;
}

.logo:hover .logo-lettre,
.logo:focus-visible .logo-lettre {
  transform: translateY(-64px);
}

/* Bouton principal */
.elementor .bouton-principal:focus-visible {
  background-color: var(--brique-fonce);
  color: var(--blanc);
  transform: translateY(-1px);
}

.elementor .entete .bouton-principal {
  transition: background-color .35s ease, transform .35s ease, min-height var(--duree-compact) var(--courbe-douce), padding var(--duree-compact) var(--courbe-douce), font-size var(--duree-compact) var(--courbe-douce);
}

.elementor .entete.est-defile .bouton-principal {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14.5px;
}

/* Burger */
.elementor .entete .burger {
  transition: width var(--duree-compact) var(--courbe-douce);
}

.elementor .entete.est-defile .burger {
  width: 40px;
}

.elementor .burger::before,
.elementor .burger::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: auto;
  height: 1.5px;
  border: 0;
  border-radius: 0;
  background: var(--noir);
  mix-blend-mode: normal;
  opacity: 1;
  transform: translateY(-4px);
  transition: transform .4s var(--courbe-menu);
}

.elementor .burger::after {
  transform: translateY(4px);
}

.elementor .burger[aria-expanded="true"]::before {
  transform: translateY(0) rotate(9deg);
}

.elementor .burger[aria-expanded="true"]::after {
  transform: translateY(0) rotate(-9deg);
}

@media (hover: hover) {
  .elementor .burger:not([aria-expanded="true"]):hover::before {
    transform: translateY(-6px);
  }

  .elementor .burger:not([aria-expanded="true"]):hover::after {
    transform: translateY(6px);
  }

  .elementor .burger[aria-expanded="true"]:hover::before {
    transform: translateY(0) rotate(13deg);
  }

  .elementor .burger[aria-expanded="true"]:hover::after {
    transform: translateY(0) rotate(-13deg);
  }
}

.elementor .burger:not([aria-expanded="true"]):focus-visible::before {
  transform: translateY(-6px);
}

.elementor .burger:not([aria-expanded="true"]):focus-visible::after {
  transform: translateY(6px);
}

.elementor .burger[aria-expanded="true"]:focus-visible::before {
  transform: translateY(0) rotate(13deg);
}

.elementor .burger[aria-expanded="true"]:focus-visible::after {
  transform: translateY(0) rotate(-13deg);
}

/* Lien bascule */
.elementor a.lien-bascule,
.elementor a.lien-bascule:hover,
.elementor a.lien-bascule:focus-visible {
  color: inherit;
}

.elementor a.lien-bascule {
  display: inline-flex;
  align-items: flex-start;
  vertical-align: top;
  text-decoration: none;
}

.lien-bascule-cadre {
  position: relative;
  display: block;
  overflow: hidden;
  margin: -.12em 0;
}

.lien-bascule-texte {
  display: block;
  padding: .12em 0;
  white-space: nowrap;
  transition: transform var(--duree-bascule) var(--courbe-bascule);
}

.lien-bascule-survol {
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--brique);
}

.lien-bascule:hover .lien-bascule-texte,
.lien-bascule:focus-visible .lien-bascule-texte {
  transform: translateY(-100%);
}

/* Flèche externe */
.fleche {
  position: relative;
  flex: none;
  display: block;
  width: var(--taille-fleche);
  height: var(--taille-fleche);
  margin: .22em 0 0 .2em;
  overflow: hidden;
}

.fleche-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duree-bascule) var(--courbe-bascule);
}

.fleche-survol {
  color: var(--brique);
  transform: translate(-100%, 100%);
}

.lien-bascule:hover .fleche-svg,
.lien-bascule:focus-visible .fleche-svg {
  transform: translate(100%, -100%);
}

.lien-bascule:hover .fleche-survol,
.lien-bascule:focus-visible .fleche-survol {
  transform: translate(0, 0);
}

/* Lien d'action */
.elementor .lien-action > a.lien-bascule {
  align-items: center;
  gap: 12px;
  min-height: var(--zone-tactile);
}

/* Flèche horizontale */
.fleche-horizontale {
  position: relative;
  flex: none;
  display: block;
  width: 22px;
  height: 13px;
  overflow: hidden;
}

.fleche-horizontale-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duree-bascule) var(--courbe-bascule);
}

.fleche-horizontale-survol {
  color: var(--brique);
  transform: translateX(-100%);
}

.lien-bascule:hover .fleche-horizontale-svg,
.lien-bascule:focus-visible .fleche-horizontale-svg {
  transform: translateX(100%);
}

.lien-bascule:hover .fleche-horizontale-survol,
.lien-bascule:focus-visible .fleche-horizontale-survol {
  transform: translateX(0);
}

/* Sur-titre */
.elementor .surtitre::before,
.elementor .surtitre::after {
  content: '';
  display: block;
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--noir);
  transform-origin: right;
  animation: heroLine 1s .3s var(--courbe-douce) both;
}

.elementor .surtitre::after {
  transform-origin: left;
}

/* Révélation */
.a-reveler .revele {
  opacity: 0;
}

.a-reveler.est-revele .revele {
  opacity: 1;
  animation: heroUp 1.1s var(--delai-revele, 0s) var(--courbe-douce) backwards;
}

.ligne-revele.a-reveler {
  opacity: 0;
}

.ligne-revele.est-revele {
  opacity: 1;
  animation: heroUp 1s var(--delai-revele, 0s) var(--courbe-douce) backwards;
}

/* Texte lecteur d'écran */
.texte-lecteur-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Grain */
.grain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: var(--grain-opacite);
  pointer-events: none;
}

.grain::before,
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/grain.png') left top / var(--grain-taille) auto repeat;
}

.grain::after {
  animation: grainZoom 3.2s linear infinite;
  will-change: transform;
}

.grain-curseur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Voile */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--voile);
  -webkit-backdrop-filter: blur(var(--flou-voile));
  backdrop-filter: blur(var(--flou-voile));
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s var(--courbe-menu);
}

/* Voile sur écran tactile */
@media (hover: none) {
  body::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .menu-panneau .grain::after {
    animation: none;
    will-change: auto;
  }
}

/* Menu */
.elementor .menu-panneau {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--courbe-menu), visibility 0s linear .8s;
}

.admin-bar .elementor .menu-panneau {
  top: 32px;
}

.admin-bar .elementor .menu-defilement {
  max-height: calc(100svh - 146px);
}

.elementor .menu-panneau::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to right, transparent calc(100% - 1px), var(--trait-colonne) calc(100% - 1px)) 0 0 / calc(100% / var(--colonnes-menu)) 100% repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, transparent 60px, #000 140px);
  mask-image: linear-gradient(to bottom, transparent 60px, #000 140px);
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}

.menu-panneau .grain::after {
  animation-play-state: paused;
}

.elementor .menu-contact {
  opacity: 0;
  transition: opacity .6s ease .35s;
}

.elementor .menu-lien {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease .18s, transform .8s var(--courbe-douce) .18s;
}

.elementor .menu-navigation .menu-lien:nth-child(2) { transition-delay: .24s, .24s; }
.elementor .menu-navigation .menu-lien:nth-child(3) { transition-delay: .30s, .30s; }
.elementor .menu-navigation .menu-lien:nth-child(4) { transition-delay: .36s, .36s; }
.elementor .menu-navigation .menu-lien:nth-child(5) { transition-delay: .42s, .42s; }
.elementor .menu-reseaux .menu-lien:nth-child(1) { transition-delay: .24s, .24s; }
.elementor .menu-reseaux .menu-lien:nth-child(2) { transition-delay: .30s, .30s; }

/* Menu ouvert */
body.menu-ouvert::after {
  opacity: 1;
  pointer-events: auto;
}

.menu-ouvert .elementor .menu-panneau {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .8s var(--courbe-menu), visibility 0s linear 0s;
}

.menu-ouvert .menu-panneau .grain::after {
  animation-play-state: running;
}

.menu-ouvert .elementor .menu-contact {
  opacity: 1;
}

.menu-ouvert .elementor .menu-lien {
  opacity: 1;
  transform: translateY(0);
}

/* Menu dans l'éditeur */
.elementor-editor-active .elementor .menu-panneau {
  position: relative;
  clip-path: none;
  visibility: visible;
}

.elementor-editor-active .elementor .menu-contact,
.elementor-editor-active .elementor .menu-lien {
  opacity: 1;
  transform: none;
}

/* Pied de page */
.elementor .pied-lien > a {
  display: block;
  padding: var(--marge-lien-pied) 0;
  color: var(--noir);
  text-decoration: none;
  background: linear-gradient(var(--noir), var(--noir)) 0 calc(100% - 3px) / 0% 1px no-repeat;
  transition: background-size .5s var(--courbe-douce);
}

.elementor .pied-lien > a:focus-visible {
  background-size: 100% 1px;
}

@media (hover: hover) {
  .elementor .pied-lien > a:hover {
    color: var(--noir);
    background-size: 100% 1px;
  }
}

/* Pages de contenu */
body:not(.elementor-page) main.site-main {
  width: auto;
  max-width: calc(68ch + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: calc(114px + clamp(40px, 8vh, 80px)) var(--gouttiere) clamp(64px, 10vh, 112px);
}

body:not(.elementor-page) .site-main h1 {
  margin: 0 0 clamp(32px, 5vh, 56px);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-h2);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--noir);
  text-wrap: balance;
}

body:not(.elementor-page) .site-main h2 {
  margin: 2.2em 0 .6em;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--noir);
}

body:not(.elementor-page) .site-main p {
  margin: 0 0 1em;
  font-size: var(--taille-corps);
  line-height: 1.62;
  color: var(--noir);
  text-wrap: pretty;
}

body:not(.elementor-page) .site-main a {
  color: var(--brique);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body:not(.elementor-page) .site-main a:hover {
  color: var(--brique-fonce);
}

/* Tablette */
@media (max-width: 1024px) {
  body:not(.elementor-page) main.site-main {
    padding-top: calc(96px + clamp(32px, 6vh, 64px));
  }

  .elementor .entete.est-defile .entete-interieur {
    padding-block: 8px;
  }

  .elementor .entete.est-defile .logo-svg {
    width: 34px;
  }

  .admin-bar .elementor .menu-defilement {
    max-height: calc(100svh - 128px);
  }

  .elementor .menu-panneau {
    bottom: 0;
  }
}

/* Barre d'administration mobile */
@media (max-width: 782px) {
  .admin-bar .elementor .entete,
  .admin-bar .elementor .menu-panneau {
    top: 46px;
  }

  .admin-bar .elementor .menu-defilement {
    max-height: calc(100svh - 142px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --colonnes-menu: 4;
  }

  .elementor .entete .entete-actions .bouton-principal {
    display: none;
  }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition: none !important;
  }

  .grain::after {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}