/* ============================================================
   INVprod — style-01-base.css  (FEUILLE DE STYLE « SOCLE »)
   ------------------------------------------------------------
   RÔLE : c'est la base commune à TOUT le site. On y définit :
     - les « tokens » (les couleurs, espacements et réglages
       réutilisables partout, déclarés dans :root ci-dessous) ;
     - la remise à zéro (« reset ») des marges du navigateur ;
     - la texture rayée signature affichée en fond (body::before) ;
     - la typographie (titres, textes, étiquettes de section) ;
     - les boutons et les liens standards.

   ORDRE DE CHARGEMENT — TRÈS IMPORTANT :
   Le grand fichier style.css a été DÉCOUPÉ en 4 tranches, chargées
   dans cet ordre par inc/site-header.php et mon-espace/inc/top.php :
        01-base  →  02-home  →  03-pages  →  04-responsive
   En CSS, quand deux règles se contredisent, c'est la DERNIÈRE
   chargée qui gagne (principe de la « cascade »). Il ne faut donc
   JAMAIS changer cet ordre, sous peine de casser l'apparence.
   Ce fichier 01 doit rester le PREMIER : tout le reste s'appuie
   sur ses variables et sa typographie.

   CHARTE GRAPHIQUE v9 (à respecter partout) :
     - Uniquement noir / blanc / gris — AUCUNE couleur d'accent.
     - Police Montserrat.
     - Texture rayée discrète en fond (signature du studio).
     - Coins droits (border-radius:0), jamais d'arrondi.
     - Cadres blancs fins, pas d'ombre, pas de dégradé.
     - Esprit studio de production audiovisuelle premium.
   ============================================================ */
/* ============================================================
   INVprod — design system v2 « studio »
   Charte v9 : noir profond, blanc pur, gris, Montserrat,
   texture rayée, cadres blancs fins, coins droits.
   Direction : grandes typographies, beaucoup de noir,
   interactions sobres — esprit agence de production.
   ============================================================ */

/* ---------- Tokens : les réglages réutilisables partout ----------
   :root = la « racine » du document. Les variables déclarées ici
   (les --xxx) sont accessibles dans TOUT le CSS via var(--xxx).
   Avantage : pour changer une couleur ou un espacement sur tout le
   site, on ne modifie qu'UNE seule ligne ici. */

:root{
  /* La palette de la charte v9 — que du noir, du blanc et des gris. */
  --noir:#000000;
  --gris-fonce:#1A1A1A;         /* fonds de cartes / cadres médias */
  --gris-moyen:#707070;         /* textes secondaires, étiquettes */
  --gris-clair:#D9D9D9;         /* textes courants sur fond noir */
  --blanc:#FFFFFF;
  /* Deux niveaux de « lignes » (cadres et séparateurs) en blanc
     translucide : .18 = trait discret, .9 = trait bien visible.
     rgba = rouge/vert/bleu + opacité (le dernier chiffre). */
  --ligne:rgba(255,255,255,.18);
  --ligne-forte:rgba(255,255,255,.9);
  --max:1280px;                 /* largeur maxi du contenu centré */
  /* clamp(mini, idéal, maxi) = taille FLUIDE : le navigateur prend la
     valeur « idéale » (ici 4vw = 4% de la largeur écran) mais sans
     jamais descendre sous 20px ni dépasser 48px. Évite d'écrire
     plein de @media pour ajuster les marges selon l'écran. */
  --pad:clamp(20px,4vw,48px);   /* marge intérieure gauche/droite */
  --s1:clamp(72px,11vw,150px);  /* respiration (grande) entre sections */
  --s2:clamp(40px,6vw,80px);    /* respiration moyenne */
  /* Courbe d'accélération des animations : démarrage franc puis
     ralentissement en fin de course (effet « doux » et soigné). */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset : on repart d'une base propre ----------
   Les navigateurs ajoutent des marges par défaut différentes.
   On les remet à zéro pour tout maîtriser. box-sizing:border-box
   = la bordure et le padding sont COMPTÉS DANS la largeur d'un
   élément (bien plus simple à raisonner). */
*{margin:0;padding:0;box-sizing:border-box}
/* Défilement doux quand on clique sur une ancre (#section). */
html{scroll-behavior:smooth}
body{
  background:var(--noir);        /* fond noir sur tout le site */
  color:var(--blanc);            /* texte blanc par défaut */
  /* Montserrat en premier ; si elle n'a pas encore chargé, on
     retombe sur des polices système équivalentes (la liste). */
  font-family:'Montserrat',Arial,Helvetica,system-ui,sans-serif;
  font-weight:300;               /* texte fin/léger par défaut */
  line-height:1.65;              /* hauteur de ligne aérée */
  -webkit-font-smoothing:antialiased;  /* rendu texte plus net (Safari/Chrome) */
  /* Empêche une barre de défilement HORIZONTALE parasite : la vidéo
     du hero et la texture sont volontairement plus larges que l'écran
     (voir parallaxe) et pourraient déborder — ici on masque ce débord. */
  overflow-x:hidden;
}

/* ---------- Texture rayée signature (fond du site) ---------- */

/* Texture rayée officielle — signature, jamais envahissante.
   Légèrement plus haute que l'écran : elle glisse doucement au défilement
   (parallaxe pilotée par --texture-shift dans main.js). */
/* body::before = un calque décoratif « fantôme » ajouté derrière le
   contenu, sans balise HTML. Il porte l'image de texture rayée. */
body::before{
  content:"";                    /* obligatoire pour qu'un ::before existe */
  position:fixed;                /* reste collé à l'écran, ne défile pas avec la page */
  /* On l'étend 25vh au-dessus et en dessous de l'écran (vh = % de la
     hauteur d'écran). Ce surplus permet de le faire glisser verticalement
     (parallaxe) sans jamais découvrir de bord vide. */
  left:0;right:0;top:-25vh;bottom:-25vh;
  /* cover = l'image couvre toute la zone sans se déformer ; center = centrée. */
  background:url('../img/texture.webp') center / cover no-repeat;
  opacity:.06;                   /* très discrète : 6 % — signature, pas décor envahissant */
  pointer-events:none;           /* n'intercepte aucun clic (purement visuel) */
  z-index:0;                     /* tout au fond, sous le contenu */
  /* translateY(...) fait glisser la texture selon --texture-shift, une
     variable pilotée en JavaScript au défilement (effet parallaxe).
     scale(1.12) l'agrandit de 12 % pour cacher les bords pendant ce glissement. */
  transform:translateY(var(--texture-shift,0px)) scale(1.12);
  will-change:transform;         /* prévient le navigateur : cette couche va bouger (perf) */
}
/* Accessibilité : si l'internaute a demandé « réduire les animations »
   dans son système, on fige la texture (plus de glissement au scroll). */
@media(prefers-reduced-motion:reduce){
  body::before{transform:scale(1.12)}
}
/* Le contenu réel passe AU-DESSUS de la texture (z-index:1 > 0). */
main,header,footer{position:relative;z-index:1}

img,video{max-width:100%;display:block}  /* jamais plus large que leur conteneur */
a{color:var(--blanc);text-decoration:none}  /* liens blancs, sans soulignement par défaut */
::selection{background:var(--blanc);color:var(--noir)}  /* surlignage inversé à la sélection texte */

/* Conteneur centré : limite la largeur du contenu et ajoute les marges latérales. */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--s1) 0}                  /* grande respiration verticale par défaut */
.section-tight{padding:var(--s2) 0 var(--s1)} /* variante : haut resserré, bas normal */

/* ---------- Typographie ----------
   Titres, étiquettes de section et paragraphes d'introduction. */
/* Style commun aux trois niveaux de titre : gras, MAJUSCULES,
   lignes serrées. text-wrap:balance équilibre le nombre de mots
   par ligne pour éviter un dernier mot orphelin. */
h1,h2,h3{
  font-weight:800;
  text-transform:uppercase;
  line-height:1.04;
  letter-spacing:-.015em;        /* lettres légèrement resserrées (look éditorial) */
  text-wrap:balance;
}
/* Tailles fluides via clamp() : grandissent avec l'écran, entre bornes.
   1rem = la taille de base (~16px) ; 7vw = 7 % de la largeur écran. */
h1{font-size:clamp(2.5rem,7vw,5.4rem);font-weight:900}
h2{font-size:clamp(1.7rem,4vw,3rem)}
h3{font-size:1.05rem;letter-spacing:.06em;line-height:1.3}

/* Petite étiquette au-dessus des sections (ex. « 01 — SERVICES »).
   flex + gap : le texte et le petit trait (::after) s'alignent côte à côte. */
.section-label{
  font-size:.75rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;  /* lettres très espacées = look « signalétique » */
  color:var(--gris-moyen);
  display:flex;align-items:center;gap:18px;
  margin-bottom:clamp(20px,3vw,34px);
}
/* Le petit trait blanc à droite de l'étiquette. flex:0 0 56px = largeur
   fixe de 56px, ne s'étire ni ne se comprime. */
.section-label::after{content:"";flex:0 0 56px;height:1px;background:var(--ligne-forte)}
.section-title{margin-bottom:clamp(28px,4vw,52px)}

/* Paragraphe d'accroche (« lead ») : plus gros et plus clair que le
   corps de texte. max-width en « em » = limité à ~48 caractères de large
   pour un confort de lecture optimal. */
.lead{
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  font-weight:400;color:var(--gris-clair);
  max-width:48em;
}

/* ---------- Boutons & liens ----------
   Boutons cadrés (bordure fine) et liens « flèche » animés. */
/* Bouton standard : cadre blanc fin, fond transparent, texte blanc.
   transition = la couleur change en douceur (0,25s) au survol. */
.btn{
  display:inline-block;
  border:1px solid var(--ligne-forte);
  padding:16px 36px;
  font-size:.78rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--blanc);background:transparent;
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
/* Au survol : le fond devient blanc et le texte noir (inversion nette,
   pas d'effet clinquant — dans l'esprit sobre de la charte). */
.btn:hover{background:var(--blanc);color:var(--noir)}
/* Variante « pleine » : blanche au repos, elle s'inverse au survol. */
.btn--solid{background:var(--blanc);color:var(--noir)}
.btn--solid:hover{background:transparent;color:var(--blanc)}

/* Lien « flèche » : un libellé souligné suivi d'une → qui avance au survol. */
.link-arrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.8rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--ligne-forte);   /* soulignement fin */
  padding-bottom:6px;
}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}  /* la flèche, ajoutée en CSS */
.link-arrow:hover::after{transform:translateX(6px)}  /* elle glisse de 6px vers la droite au survol */