/*
Theme Name: Argane
Theme URI: https://argane-group.com
Description: Thème sur mesure du site Argane (anciennement Bugnot 55) — fabricant français de broyeurs de végétaux et de balayeuses. Conçu et développé par wait: agency. ⚠️ Attention : modifier les fichiers du thème peut casser le site.
Author: wait: agency
Author URI: https://wait.agency
Version: 0.9.67
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: argane
*/

/* ============================================================
   ARGANE — Fondations globales
   ------------------------------------------------------------
   Tokens de marque (couleurs, typo, layout) + reset de base.
   Source : :root de la maquette de référence.
   L'échelle typographique vit dans assets/css/components/argane-type.css
   (chargée avant ce fichier). Les boutons : argane-buttons.css.
   ============================================================ */

:root{
  /* ---- Couleurs charte ---- */
  --forge:#081F2C;          /* fond sombre principal (bleu-nuit industriel) */
  --acier:#253746;          /* bleu acier, dégradés, texte secondaire */
  --ardoise:#57728B;        /* gris-bleu, légendes, italiques de hiérarchie */
  --ardoise-brut:#506D85;   /* variante ardoise (fonds chauds) */
  --braise:#EE2737;         /* rouge accent — CTA, focus, puces actives */
  --paper:#FAFAFA;          /* fond clair / texte sur sombre */
  --paper-warm:#F2F2F2;     /* fond clair alternatif (section réseau) */

  /* ---- Dérivés (opacités sur forge/paper) ---- */
  --ink-90:#0F2632;
  --ink-70:#324354;
  --ink-15:rgba(250,250,250,0.15);
  --ink-10:rgba(250,250,250,0.10);
  --ink-08:rgba(250,250,250,0.08);
  --ink-05:rgba(250,250,250,0.05);
  --paper-25:rgba(250,250,250,0.25);
  --paper-60:rgba(250,250,250,0.60);
  --forge-15:rgba(8,31,44,0.12);
  --forge-08:rgba(8,31,44,0.08);

  /* ---- Familles typographiques (référencées par argane-type.css) ---- */
  --ff-display:"Space Grotesk", sans-serif;
  --ff-body:"DM Sans", sans-serif;
  --ff-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Layout ---- */
  --gutter:clamp(20px, 4vw, 64px);   /* marge latérale */
  --max:1440px;                      /* largeur de contenu (conteneur .wrap) */
}

/* ============================================================
   Reset de base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Empêche tout débordement horizontal sans casser le smooth-scroll Lenis */
html,body{overflow-x:clip;}
html{background:var(--forge);}
body{
  background:transparent;
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* padding-bottom défini en JS = hauteur du footer fixed (effet reveal) */
  /* Filet de sécurité : un mot trop long (titre, e-mail, URL sans espace)
     se coupe au lieu de faire déborder et casser la mise en page. */
  overflow-wrap:break-word;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

/* Focus visible accessible (braise) */
:focus-visible{
  outline:2px solid var(--braise);
  outline-offset:3px;
  border-radius:2px;
}

/* Util & Nav : z-index renforcés (au-dessus du reveal footer) */
.util{z-index:70;}
.nav{z-index:60;}

/* ============================================================
   Conteneur principal
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--max);
  padding:0 var(--gutter);
  margin-inline:auto;
}

/* ============================================================
   Skip-link clavier (accessibilité)
   ============================================================ */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--braise);
  color:var(--paper);
  padding:12px 20px;
  font-family:var(--ff-mono);
  font-size:13px;
  border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ============================================================
   Révélation des titres mot-à-mot (GSAP/ScrollTrigger — voir app.js)
   Le titre est splitté en <span.word> animés en opacity scrubée.
   Pas de layout shift, texte sélectionnable.
   ============================================================ */
.reveal-title .word{
  display:inline-block;
  opacity:0.15;
  will-change:opacity;
}
/* Fallback : si JS n'a pas encore splitté, titre normal */
.reveal-title:not(.is-split) .word{opacity:1;}

@media (prefers-reduced-motion: reduce){
  .reveal-title .word{opacity:1 !important;}
}

/* ============================================================
   Images dans les emplacements — remplissent + recadrent leur
   conteneur (comportement de l'ancien <image-slot> de la maquette).
   Les conteneurs définissent déjà aspect-ratio + overflow:hidden ;
   on force l'<img> à couvrir, quel que soit son ratio d'origine.
   ============================================================ */
.tech-img > img,
.u-img > img,
.story-media > img,
.closeup-img > img,
.hm-fig > img,
.rh-cell > img,
.hero-video-thumb > img,
.h2-media > img,
.pdp-head-media > img,
.gallery-main > img,
.g-slide > img,
.gthumb > img,
.vcard-img > img,
.video-stage > img,
.mega .pcard-photo > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================================
   Smooth-scroll Lenis (site entier — voir app.js)
   CSS recommandé par Lenis pour un comportement fiable.
   ============================================================ */
html.lenis,
html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:clip; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

/* ============================================================
   Pages utilitaires (404, mentions légales…) : footer en flux
   normal, sans l'effet « reveal » fixe (évite le footer visible
   derrière les sections transparentes + le décentrage).
   La classe footer-static est ajoutée via body_class (functions.php).
   ============================================================ */
body.footer-static .site-footer{ position:static !important; }
body.footer-static{ padding-bottom:0 !important; }
body.footer-static > section:last-of-type{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* ============================================================
   Rythme vertical — pas de double intervalle sans rupture de fond
   ------------------------------------------------------------
   .is-stacked est posée par assets/js/components/argane-rhythm.js
   sur toute section qui suit une section de même couleur de fond.
   Double sélecteur pour passer devant le padding défini par page,
   sans toucher aux trois autres côtés.
   ============================================================ */
section.is-stacked.is-stacked{padding-top:clamp(16px,1.7vw,28px);}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Page « Notre métier » : un champ ACF vidé sort un élément vide → masqué,
   pour respecter « champ vide = rien affiché » (voir page-notre-metier.php). */
body.nm-hide-empty :where(h1,h2,h3,p,small,.series,.cap,.fa-tag):empty{ display:none; }