/*! ---------------------------------------------------------------------------
 *  a11y-perf.css — correctifs accessibilite (WCAG 2.2 AA) + performance.
 *  Charge APRES style.css : chaque regle ici corrige un echec Lighthouse precis.
 *  Fichier ecrit a la main : il ne sera jamais ecrase par une commande artisan.
 * ------------------------------------------------------------------------- */

/* ===========================================================================
   1. VARIABLES — correction d'une incoherence du theme
   ---------------------------------------------------------------------------
   style.css declare --bs-primary: #f9c232 (jaune) mais --bs-primary-rgb:
   248,69,37 (rouge-orange). Toutes les utilisations Bootstrap passant par rgba()
   — .bg-primary, .bg-opacity-*, .border-primary, .link-primary — affichaient
   donc la mauvaise couleur.
   ========================================================================= */
:root,
[data-bs-theme='light'] {
  --bs-primary-rgb: 249, 194, 50;

  /* Encre sombre posee sur le jaune : 10.3:1 (AAA). */
  --btp-on-brand: #1a1d21;
}

/* ===========================================================================
   2. CONTRASTE — audit « Les couleurs d'arriere-plan et de premier plan
      n'ont pas un rapport de contraste suffisant »
   ========================================================================= */

/* Boutons jaunes : Bootstrap force --bs-btn-color:#fff -> blanc sur jaune,
   1.64:1. On repasse en encre sombre (10.3:1). Concerne notamment
   « Trouver », « Vous etes professionnel » et « Decouvrez d'autres articles ». */
.btn-primary {
  --bs-btn-color: var(--btp-on-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--btp-on-brand);
}

/* Champ de recherche : <input type="submit" class="btn btn-primary"> herite bien
   des variables ci-dessus, mais on securise le cas ou une regle plus specifique
   du theme repasse en blanc. */
input.btn-primary,
.search-wrapper .btn-primary {
  color: var(--btp-on-brand);
}

/* --btp-brand-text (#8a6200) RETIRE le 01/09 sur demande.
   -------------------------------------------------------------------------
   Ce fichier remplacait ici le jaune de marque par un ambre plus sombre sur
   .text-primary / .text-primary1, avec la regle inverse pour les fonds sombres.
   Les trois blocs ont ete supprimes : le jaune de style.css (#f9c232) s'applique
   de nouveau partout, sur fond clair comme sur fond sombre.

   A savoir pour la suite : #f9c232 sur blanc mesure 1.64:1, en dessous du
   minimum AA de 4.5:1 pour du texte. Le contraste des BOUTONS jaunes n'est pas
   concerne — il passe par --btp-on-brand, conserve ci-dessus (10.3:1). */

/* ===========================================================================
   3. ZONES TACTILES — audit « Les cibles tactiles n'ont pas une taille
      suffisante » (WCAG 2.5.8, minimum 24x24 ; recommandation 44x44)
   ========================================================================= */

/* Puces de carrousel : la puce visible fait 6x6 px. On elargit la zone
   cliquable a 44x44 sans toucher au rendu (le span reste a 6 px). */
.owl-theme .owl-dots .owl-dot {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
}

/* Le conteneur des puces etait fige a 69 px de large : trop etroit
   des que chaque puce occupe 44 px. */
.owl-nav-bottom.owl-theme .owl-dots {
  width: auto;
  min-width: 132px;
  gap: 0;
}

/* Fleches prev/next : 56x56 en desktop, on garantit 44x44 minimum partout. */
.owl-theme .owl-nav [class*='owl-'],
.owl-nav-bottom.owl-theme .owl-nav [class*='owl-'] {
  min-width: 44px;
  min-height: 44px;
}

/* Bouton compte (icone seule) et burger : 44x44 minimum. */
.btn-user,
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

/* Icones sociales du pied de page. */
.social-icon .icon-wrap {
  min-width: 44px;
  min-height: 44px;
}

/* Liens du pied de page : espacement vertical suffisant entre cibles. */
.footer-nav .list-inline-item > a,
.main-footer .footer-row a {
  display: inline-block;
  padding-block: 4px;
}

/* ===========================================================================
   4. FOCUS CLAVIER — WCAG 2.4.7 / 2.4.11
      Le theme neutralise le halo Bootstrap (--bs-btn-focus-shadow-rgb: none),
      ce qui supprime tout indicateur de focus sur les boutons.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.owl-dot:focus-visible,
.owl-nav button:focus-visible {
  outline: 3px solid var(--btp-on-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sur fond sombre, un contour clair reste visible. */
.footer-dark a:focus-visible,
.hero-header a:focus-visible,
.hero-header button:focus-visible,
.navbar-transfarent a:focus-visible {
  outline-color: #fff;
}

/* Lien d'evitement : visible uniquement au focus clavier (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--btp-on-brand);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  transition: transform 0.15s ease-in-out;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: #fff;
}

/* ===========================================================================
   5. IMAGES — CLS et audit « image-aspect-ratio »
   ========================================================================= */

/* <x-optimized-image> emet un <picture>. display:contents le rend transparent
   pour la mise en page : le <img> conserve exactement le comportement qu'il
   avait en enfant direct (indispensable pour .bg-image, en position absolue). */
picture {
  display: contents;
}

/* width/height sont desormais poses sur chaque <img> (ratio intrinseque connu).
   Sans ce garde-fou, ces attributs ecraseraient la mise en page fluide. */
img {
  max-width: 100%;
}

img[width][height] {
  height: auto;
}

/* Exceptions : images dont la hauteur est pilotee par le CSS. */
.bg-image,
.object-fit-cover,
[class*='h-100'] > img,
.card-img-wrap img,
.card-img-wrap2 img {
  height: 100%;
}

.bg-image {
  height: 100% !important;
}

/* Logo : dimensions intrinseques enormes (2940x1908), affichage ~110x70.
   On fige le ratio pour eviter tout saut de mise en page au chargement. */
.logo-btp {
  width: auto;
  height: auto;
  max-height: 3.375rem;
  aspect-ratio: 2940 / 1908;
}

@media (min-width: 768px) {
  .logo-btp {
    max-height: 4.375rem;
  }
}

/* Le logo touchait le bord haut/bas de la barre et le bord gauche du
   conteneur. On l'aere legerement, sans changer sa taille de rendu : le
   padding est porte par le lien, la hauteur max du <img> reste la meme. */
.navbar-logo-link {
  display: inline-block;
  padding: 0.375rem 0.5rem 0.375rem 0;
}

@media (min-width: 768px) {
  .navbar-logo-link {
    padding: 0.5rem 0.75rem 0.5rem 0.25rem;
  }
}

.footer-logo img,
.logo-white {
  width: auto;
  height: auto;
  max-width: 120px;
  aspect-ratio: 2940 / 1908;
}

/* ===========================================================================
   6. RENDU — reduction du cout de mise en page
   ---------------------------------------------------------------------------
   content-visibility: auto laisse le navigateur sauter la mise en page et le
   peinturage des sections hors ecran. contain-intrinsic-size fournit une taille
   estimee pour que la barre de defilement reste stable (pas de CLS).
   ========================================================================= */
@supports (content-visibility: auto) {
  .cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}

/* ===========================================================================
   7. MOUVEMENT — WCAG 2.3.3
      AOS, Owl et simpleParallax animent en permanence. On respecte le reglage
      systeme « reduire les animations ».
   ========================================================================= */
@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;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================================================
   8. DIVERS
   ========================================================================= */

/* Owl remplace le conteneur par un role="presentation" tout en laissant des
   attributs ARIA sur les items : conflit signale par Lighthouse. Le JS
   (a11y.js) nettoie le DOM ; on neutralise ici l'effet visuel eventuel. */
.owl-carousel .owl-stage-outer {
  overflow: hidden;
}

/* Le bouton « haut de page » injecte par script.js doit rester atteignable. */
#toTop {
  min-width: 44px;
  min-height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
}

#toTop.is-visible {
  display: flex;
}