/* Ce que WordPress, bb-theme et Beaver Builder ajoutent à une page et que le
   site Nuxt n'a pas. Écrit à la main, contrairement à base.css, components.css
   et aos.css, qui sont générés depuis la source. */

/* Connecté, la barre d'admin occupe le haut de la fenêtre : l'en-tête fixe et
   le tiroir mobile commencent dessous. Les visiteurs ne l'ont jamais. */
body.admin-bar [data-lp="header"] { top: 32px; }
body.admin-bar [data-lp-drawer] { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar [data-lp="header"] { top: 46px; }
  body.admin-bar [data-lp-drawer] { top: 46px; }
}

/* Beaver Builder donne min-height: 1px à chaque colonne. Le layout de l'en-tête
   ne contient que des éléments fixes : ce pixel devenait toute la hauteur de
   l'en-tête dans le flux, et chaque page commençait un pixel plus bas. */
.fl-builder-content[data-type="header"] .fl-col { min-height: 0; }

/* Le script de Beaver Builder ajoute « (opens in new tab) » aux liens qui
   ouvrent un onglet, pour les lecteurs d'écran. Gardé, mais hors du flux :
   dans un bouton en flex, il compterait comme un élément de plus. */
.fl-new-tab-notice.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Beaver Builder pose un contour sur chaque lien, bouton et champ au :focus :
   un clic souris laisse donc un anneau. La source n'en montre qu'au clavier. */
:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
  outline: none;
}
:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-offset: 3px;
}

/* Le lien d'évitement de bb-theme : masqué jusqu'au focus, comme le faisait la
   feuille du thème, retirée ici. */
.fl-screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fl-screen-reader-text:focus {
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible; z-index: 200;
  top: 8px; left: 8px; padding: 10px 16px; border-radius: 8px;
  background: var(--color-forest); color: var(--color-mimosa); font-size: .85rem; font-weight: 600;
}

/* Dans l'éditeur, une section ne doit jamais rester invisible : AOS est
   désactivé et retire ses attributs, mais une section déjà rendue avec un
   état de départ (l'en-tête, le hero) reprend sa place ici. */
.fl-builder-edit [data-lp="header"] { transform: none !important; opacity: 1 !important; }

/* ------------------------------------------------------- Contact Form 7
   L'extension apporte sa propre enveloppe et ses messages ; sa feuille de
   style, elle, est retirée avec celles du thème. Ce qui reste utile est
   remis ici, dans les couleurs du site ; le reste sort du flux. */

/* L'enveloppe et le formulaire ne dessinent rien : ils portent la mise en page
   du gabarit, comme le <form> de la source. */
.wpcf7, .wpcf7-form { display: block; }

/* Chaque champ est entouré d'un <span> par Contact Form 7 : en ligne, il
   casserait la largeur des champs. */
.wpcf7-form-control-wrap { display: block; }

/* Mécanique de l'extension, hors du flux : champs cachés, réponse globale,
   énoncé pour lecteurs d'écran, indicateur d'envoi. */
.wpcf7-form .hidden-fields-container,
.wpcf7-response-output,
.wpcf7-spinner { display: none; }
.screen-reader-response {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Le message d'un champ invalide : la source n'en a pas, mais sans lui le
   visiteur ne saurait pas ce qui bloque. Discret, dans le rouge du site. */
.wpcf7-not-valid-tip {
  display: block; margin-top: .5rem; font-size: .8rem; line-height: 1.4;
  color: oklch(50.5% .213 27.518);
}
.wpcf7-form-control.wpcf7-not-valid { border-color: oklch(50.5% .213 27.518); }