/* ==========================================================================
   illbruck — Feuille de style personnalisée
   --------------------------------------------------------------------------
   Regroupe les styles qui étaient dupliqués dans un bloc <style> inline sur
   chaque page. Chargée APRÈS illbruck.css afin de pouvoir la surcharger.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design (couleurs de marque)
   -------------------------------------------------------------------------- */

:root {
  --illbruck-green: #7faf16;
  --illbruck-white: #ffffff;
  --illbruck-black: #000000;

  --overlay-backdrop: rgba(0, 0, 0, 0.25);
  --rule-subtle: rgba(0, 0, 0, 0.2);
  --rule-strong: rgba(0, 0, 0, 0.6);
  --text-muted: rgba(0, 0, 0, 0.8);

  --ease-out-expo: cubic-bezier(0.625, 0.05, 0, 1);
  --duration-accordion: 0.6s;
  --duration-hover: 0.25s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
}

a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* Rétablit un focus visible au clavier, supprimé par la règle ci-dessus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--illbruck-green);
  outline-offset: 2px;
}

img.hero-background {
  max-width: none;
}

/* Les attributs width/height des <img> réservent la place avant le chargement
   (métrique CLS). Ils agissent aussi comme indication de présentation sur la
   propriété `height` : sans cette règle, une image dont le CSS ne fixe que la
   largeur prendrait la hauteur intrinsèque du fichier au lieu de sa hauteur
   proportionnelle (portraits rendus 56 x 2024 au lieu de 56 x 61). Toute règle
   de classe fixant explicitement une hauteur reste prioritaire. */
img {
  height: auto;
}

/* Bloque le scroll global quand l'overlay de contact est ouvert. */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

/* --------------------------------------------------------------------------
   3. Carrousels
   -------------------------------------------------------------------------- */

/* Swipe horizontal au doigt.

   Le runtime gère bien le glissement (les deux carrousels ont
   `data-disable-swipe="false"`), mais aucun `touch-action` n'était déclaré et
   le script n'appelle pas `preventDefault` sur `touchmove`. Sur un vrai
   téléphone, le navigateur peut donc réclamer le geste pour son propre
   défilement dès que le mouvement a une composante verticale : le swipe
   devient aléatoire.

   `pan-y` répartit explicitement les rôles — le défilement vertical de la page
   reste au navigateur, le mouvement horizontal est laissé au carrousel. */
.w-slider-mask,
.w-slider-mask .w-slide {
  touch-action: pan-y;
}

/* Évite qu'un glissement horizontal ne déclenche une sélection de texte
   pendant le swipe, tout en gardant le texte sélectionnable au clic simple. */
.w-slider-mask .w-slide {
  -webkit-user-drag: none;
}

.w-slider-dot {
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
}

/* --------------------------------------------------------------------------
   4. Accordéon FAQ (piloté par [data-accordion-status] — voir js/main.js)
   -------------------------------------------------------------------------- */

.accordion-css__item-bottom {
  transition: grid-template-rows var(--duration-accordion) var(--ease-out-expo);
}

[data-accordion-status="active"] .accordion-css__item-bottom {
  grid-template-rows: 1fr;
}

.accordion-css__item-icon {
  transition: transform var(--duration-accordion) var(--ease-out-expo);
}

[data-accordion-status="active"] .accordion-css__item-icon {
  transform: rotate(0.001deg);
}

/* --------------------------------------------------------------------------
   5. Utilitaires
   -------------------------------------------------------------------------- */

/* Titres convertis de <div> en <h1>/<h2> pour donner une structure de document
   correcte. Les balises de titre héritent de `margin-top: 20px` /
   `margin-bottom: 10px` de base.css : on les neutralise pour conserver
   exactement le rendu d'origine. Les marges déjà prévues par une classe plus
   spécifique (ex. `.heading-1.font-green`) restent prioritaires. */
.heading--no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

/* Bouton rendu comme un lien — utilisé pour « Gestion des cookies », qui
   déclenche une action JavaScript et n'est donc pas un lien. */
.button-as-link {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Masque visuellement sans retirer du flux d'accessibilité — à préférer à
   `display: none` pour les <label> lisibles par les lecteurs d'écran. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Formulaire de contact
   -------------------------------------------------------------------------- */

.input-form.ui-input,
.input-msg.ui-input {
  display: flex;
  width: 100%;
  outline: none;
  background-color: var(--illbruck-green);
  border: none;
  color: var(--illbruck-white);
  padding: 15px 24px;
}

.input-form.ui-input {
  height: fit-content;
  border-radius: 999px;
}

.input-msg.ui-input {
  border-radius: 10px;
}

.input-form.ui-input::placeholder,
.input-msg.ui-input::placeholder {
  color: var(--illbruck-white);
}

/* --------------------------------------------------------------------------
   7. Overlay de contact
   -------------------------------------------------------------------------- */

.formulaire-section.is-open {
  background-color: var(--overlay-backdrop);
  pointer-events: auto;
}

.formulaire-section.is-open .formulaire-scroll {
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   8. Boutons
   -------------------------------------------------------------------------- */

/* Le libellé est enveloppé dans `.cta-label-inner` par js/main.js (module 6),
   puis clippé ici : on annule les transforms héritées de l'export et on anime
   un calque interne en CSS, ce qui évite le texte « en suspension » hors du
   bouton quand le survol ne s'inverse pas (souris rapide, tactile). */
.cta-primary .text-label-cta-primary {
  display: block;
  overflow: hidden;
  transform: none !important;
  text-shadow: none;
}

.cta-primary .cta-label-inner {
  display: block;
  text-shadow: 0 1.5em currentColor;
  transition: transform 0.5s var(--ease-out-expo);
}

.cta-primary .cta-label-inner * {
  transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .cta-primary:hover .cta-label-inner,
  .cta-primary:focus-visible .cta-label-inner {
    transform: translateY(-1.5em);
  }
}

.cta-secondary-hero {
  background-color: transparent;
  color: var(--illbruck-white);
  border: 1px solid var(--illbruck-white);
  transition:
    background-color var(--duration-hover) ease,
    color var(--duration-hover) ease,
    border-color var(--duration-hover) ease;
}

.cta-secondary-hero:hover {
  background-color: var(--illbruck-white);
  color: var(--illbruck-black);
  border-color: var(--illbruck-white);
}

.cta-secondary-hero:focus,
.cta-secondary-hero:active {
  color: var(--illbruck-white);
  background-color: transparent;
  outline: none;
}

.cta-tertiary {
  border-bottom: 1px solid var(--rule-subtle);
  transition:
    border-color var(--duration-hover) ease,
    color var(--duration-hover) ease;
}

.cta-tertiary:hover {
  border-bottom-color: var(--rule-strong);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   9. Navigation (survol et masquage au scroll — voir js/main.js)
   -------------------------------------------------------------------------- */

[link-nav],
[store-link] {
  transition: opacity var(--duration-hover) ease;
}

[nav-hidden].is-hidden {
  transform: translateY(-100%);
}

/* --------------------------------------------------------------------------
   10. Correctifs mobile
   -------------------------------------------------------------------------- */

/* Carrousel « Nos produits » : navigation invisible en mobile.

   Ce carrousel n'a pas de puces — son conteneur porte `.slide-nav-none`
   (display:none à tous les breakpoints) : il repose donc uniquement sur ses
   flèches. Or à ≤767px les flèches passent à `opacity: 0`, ce qui supprime
   toute navigation visible : seul le glissement au doigt restait, sans aucune
   indication. Le carrousel « Témoignages », lui, conserve flèches ET puces.

   On rétablit donc les flèches pour ce seul carrousel. `display` n'est pas
   forcé en !important : le runtime pose un `display:none` inline sur la flèche
   inutilisable en début et fin de liste (data-hide-arrows), comportement
   souhaitable qu'on laisse intact. */
@media screen and (max-width: 767px) {
  /* Les flèches héritent d'un positionnement absolu faussé : mesuré à 390px,
     `left: 0` place la flèche à 68px et `right: 0` la fait finir à 419px, soit
     un décalage uniforme de +48px par rapport au cadre du slider (20..371) —
     elles sortaient donc de l'écran des deux côtés. Plutôt que de compenser
     par une valeur magique, on les fait rentrer dans le flux : le slider
     devient une grille flexible et les deux flèches se rangent sous le
     carrousel, centrées, dans l'espace vide déjà présent. */
  .slider-produits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;

    /* `display: flex` change la résolution de `width: fit-content` : le slider
       passait de 351px centrés (retrait de 20px) à 390px pleine largeur, la
       carte perdant son retrait latéral. On le rétablit explicitement. */
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  .slider-produits .masque-slider {
    flex: 0 0 100%;
  }

  .slider-produits .left-arrow,
  .slider-produits .right-arrow {
    position: static;
    order: 2;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Cible tactile de 44px (recommandation WCAG 2.5.5). */
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    margin: 0;
    background-color: #ffffff26;
  }

  /* Le runtime pose un `display:none` inline sur la flèche inutilisable en
     début et fin de liste (data-hide-arrows) : ce style inline reste
     prioritaire, le comportement est donc préservé. */
}

/* Section « Où nous trouver ? » : rythme vertical incohérent en mobile.

   Les deux blocs (`.nous-trouver-container` orange et `.conseil-container`
   blanc) sont carrés via `aspect-ratio: 1`, ce qui sert la mise en page
   desktop où ils sont côte à côte. Cette règle est déclarée hors media query
   et n'est jamais annulée : elle reste active en mobile, alors que les blocs
   sont empilés en pleine largeur, où le carré n'a plus de raison d'être.

   Conséquence mesurée à 390px : le bloc orange dépasse son carré à cause de
   son contenu et se retrouve avec 54px de marge intérieure seulement, tandis
   que le bloc blanc, moins rempli, garde son carré et hérite de 71px — deux
   blocs voisins avec des respirations différentes.

   On libère la hauteur dès que la section s'empile (≤991px) et on applique la
   même marge verticale aux deux blocs. Ajuster --pad-bloc-mobile pour changer
   la respiration des deux d'un coup. */
@media screen and (max-width: 991px) {
  :root {
    --pad-bloc-mobile: 72px;
  }

  .nous-trouver-container,
  .conseil-container {
    aspect-ratio: auto;
    padding-top: var(--pad-bloc-mobile);
    padding-bottom: var(--pad-bloc-mobile);
  }
}

/* --------------------------------------------------------------------------
   11. Accessibilité — respect de « réduire les animations »
   -------------------------------------------------------------------------- */

/* Neutralise uniquement les transitions définies dans ce fichier : les
   animations du runtime et de GSAP sont gérées côté JS (voir js/main.js). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-accordion: 0.01ms;
    --duration-hover: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }

  .cta-secondary-hero,
  .cta-tertiary,
  .cta-primary .cta-label-inner {
    transition-duration: 0.01ms;
  }

  .cta-primary:hover .cta-label-inner,
  .cta-primary:focus-visible .cta-label-inner {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. Lien d'évitement (WCAG 2.4.1)
   Hors écran au repos, ramené en vue à la prise de focus au clavier.
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 12px 20px;
  background-color: var(--illbruck-white);
  color: var(--illbruck-black);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--illbruck-black);
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--duration-hover) var(--ease-out-expo);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition-duration: 0.01ms;
  }
}