/* ============================================================================
   SOCLE 2.1 — LA CHARTE LIVREE

   POURQUOI CE FICHIER EXISTE, ALORS QUE marque.css EST DEJA LA POUR CA
   marque.css est la charte DU MAGASIN : livree vide, ecrite pour un client.
   Ce fichier-ci est la charte DU SOCLE : le design complet, assume, pret a
   vendre tel quel. C'est la difference entre la 1.4 et la 2.1 — la 1.4 livrait
   un gabarit sobre qu'il fallait habiller, la 2.1 livre un site fini.
   Les deux cohabitent, dans cet ordre : charte.css pose le design, marque.css
   le corrige pour un client. Un magasin qui ne touche a rien a deja un site.

   LES QUATRE DECISIONS, ET RIEN D'AUTRE
   Un design a l'air dessine quand une poignee de decisions se repetent sans
   exception. En voici quatre, et tout le fichier n'est que leur application.

   1. UNE TYPO DE CARACTERE POUR LES TITRES, UNE NEUTRE POUR LE TEXTE.
      Bricolage Grotesque en display : une grotesque variable aux formes
      serrees, avec de vrais partis pris de dessin. Inter pour tout le reste,
      parce qu'un texte courant doit disparaitre derriere ce qu'il dit.
      Et une chasse fixe SYSTEME — zero fichier a telecharger — pour les
      references et les numeros : c'est elle qui donne le ton d'atelier.

   2. LES TITRES SONT GRANDS, SERRES, ET BAS.
      clamp() jusqu'a 4,6 rem, interlettrage negatif, interligne sous 1.
      Un titre timide est la marque d'un gabarit ; un titre qui occupe la
      largeur est une decision.

   3. CHAQUE SECTION EST NUMEROTEE, ET LE NUMERO EST DESSINE PAR LE CSS.
      Un compteur CSS, pas une balise : aucune page n'a ete touchee pour
      l'obtenir, et une section ajoutee demain se numerote toute seule. C'est
      la signature qui revient de page en page.

   4. LE RELIEF VIENT DU PAPIER, PAS DES TRAITS.
      Le fond est creme, les cartes sont blanches. Une carte blanche sur du
      creme se detache sans qu'on lui dessine un contour. Les traits d'1 px
      disparaissent donc presque partout — c'est ce qui separe une maquette
      d'un imprime.

   OU ELLE SE PLACE DANS LA PILE
     tokens.css      les couleurs, par role
     palettes.css    les six palettes du dashboard
     styles.css      la mise en page du socle          ← ne pas modifier
     site-1.2.css    ce que la 1.2 a ajoute            ← ne pas modifier
     site-1.4.css    ce que la 1.4 a ajoute            ← ne pas modifier
     panier.css      le panier et sa pastille
     pack.css        le bon de commande
     catalogue.css   la structure de la 2.1
     CE FICHIER      LA CHARTE                         ← le design livre
     marque.css      la charte du client               ← livree vide
   ========================================================================== */

/* ===========================================================================
   1. LES FAMILLES

   LA PILE SE TERMINE TOUJOURS PAR DU SYSTEME. Google Fonts peut etre lent,
   bloque, ou coupe : la page doit rester dessinee. L'ordre de repli est
   choisi pour que la substitution se voie le moins possible.
   =========================================================================== */

:root{
  --police-titre:"Bricolage Grotesque","Inter","Segoe UI",system-ui,sans-serif;
  --police-texte:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  /* Zero fichier : ce sont les chasses fixes deja installees sur la machine.
     Elles different d'un systeme a l'autre, et c'est sans importance — on ne
     leur demande que d'etre monospace. */
  --police-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* L'arabe garde Tajawal : Bricolage n'a pas de jeu arabe, et une grotesque
   latine appliquee a de l'arabe retombe sur une police systeme au hasard. */
:root[lang="ar"], [dir="rtl"]{
  --police-titre:"Tajawal","Inter",system-ui,sans-serif;
  --police-texte:"Tajawal","Inter",system-ui,sans-serif;
}

body{
  font-family:var(--police-texte);
  /* Les chiffres sur la meme largeur : un prix qui change ne fait plus sauter
     la ligne, et une colonne de montants s'aligne a la virgule. */
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* ===========================================================================
   2. LES TITRES — decision n°2
   =========================================================================== */

h1,h2,h3,.fiche-nom,.carte-nom{
  font-family:var(--police-titre);
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--texte-0);
}

h1{
  font-size:clamp(2.4rem,6.4vw,4.6rem);
  line-height:.98;
  letter-spacing:-.045em;
}

h2{
  font-size:clamp(1.5rem,3.2vw,2.3rem);
  line-height:1.04;
}

/* La 1.4 centrait tous les h2 : c'est le reflexe d'une page de vente, ou
   chaque titre est une annonce. Un catalogue se lit en colonne, de gauche a
   droite : un titre centre au-dessus d'une grille alignee a gauche flotte. */
h2,.section-titre{text-align:start;}

/* ===========================================================================
   3. LA SIGNATURE — decision n°3

   Le compteur se remet a zero sur chaque <main>, s'incremente sur chaque
   titre de section, et se dessine en chasse fixe avec un filet qui le suit.
   Aucune page n'a ete modifiee pour cela.
   =========================================================================== */

main{counter-reset:section;}

.section-titre{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:22px;
}

.section-titre::before{
  counter-increment:section;
  content:counter(section,decimal-leading-zero);
  font-family:var(--police-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--orange-vif);
  /* La ligne de base du numero est calee sur celle du titre par `baseline` ;
     ce decalage le remonte a hauteur de capitale, ou l'oeil l'attend. */
  transform:translateY(-.15em);
  flex:none;
}

/* Le filet qui prolonge le titre jusqu'au bord. Il est en ::after du titre et
   non en bordure du conteneur : il s'arrete donc exactement ou le texte
   s'arrete, quelle que soit sa longueur. */
.section-titre::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--ligne);
  transform:translateY(-.3em);
}

/* Dans une tete de section qui porte deja les fleches de defilement, le filet
   mangerait l'espace des boutons. */
.section-tete .section-titre::after{display:none;}
.section-tete{gap:18px;margin-bottom:22px;}
.section-tete .section-titre{margin-bottom:0;flex:1;}

/* ===========================================================================
   4. LE HEADER ANIME

   L'EMPLACEMENT EST LIVRE VIDE, ET IL N'A PAS L'AIR VIDE.
   Le magasin y pose sa video d'atelier (voir MARQUE.hero dans js/marque.js) :
   un ecran qu'on decolle, un tournevis sur une carte mere. Tant qu'il n'y a
   rien, une composition dessinee en SVG tourne a sa place — elle ne pretend
   pas etre une photo, elle occupe le cadre avec le meme rythme.

   LE CADRE NE CHANGE JAMAIS DE HAUTEUR. C'est un rapport 21:9 sur grand
   ecran, 4:3 sur telephone : la video posee par le magasin se recadre dedans
   (object-fit:cover), et la page ne saute pas au chargement.
   =========================================================================== */

.hero{padding:26px 0 10px;}

.hero-cadre{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-bloc);
  background:var(--fond-1);
  aspect-ratio:4/3;
  box-shadow:var(--ombre-image);
}
@media (min-width:760px){ .hero-cadre{aspect-ratio:21/9;} }

.hero-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Le voile : sans lui, un titre blanc pose sur une video claire disparait des
   que l'image s'eclaircit. Il part du bas, la ou le texte est. */
.hero-cadre::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(21,22,26,.82) 0%,rgba(21,22,26,.35) 42%,rgba(21,22,26,0) 72%);
  pointer-events:none;
}

.hero-texte{
  position:absolute;
  inset-inline:0;bottom:0;
  z-index:2;
  padding:clamp(18px,4vw,42px);
  color:#FFFFFF;
}
/* Le titre du hero est sur une image : il ne suit pas --texte-0, qui vire au
   noir en theme clair et deviendrait illisible sur une video sombre. */
.hero-texte h1{color:#FFFFFF;max-width:16ch;}
.hero-sub{
  margin:.6em 0 0;
  max-width:46ch;
  color:rgba(255,255,255,.88);
  font-size:clamp(.95rem,1.6vw,1.1rem);
}

/* L'etiquette au-dessus du titre : chasse fixe, tres petite, tres espacee.
   C'est le meme vocabulaire que les numeros de section. */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--police-mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);
  margin:0 0 .9em;
}
.hero-eyebrow::before{
  content:"";width:22px;height:2px;background:var(--signal);
}

/* ---- La composition de repli, dessinee ----------------------------------
   Trois disques flous qui derivent lentement derriere une trame de points.
   Rien de figuratif : une photo dessinee aurait l'air d'un placeholder, une
   matiere abstraite a l'air d'un parti pris. Elle disparait des qu'une video
   est posee. */
.hero-dessin{position:absolute;inset:0;overflow:hidden;background:var(--fond-1);}

.hero-dessin::before{
  content:"";
  position:absolute;inset:-20%;
  background:
    radial-gradient(38% 46% at 22% 32%,var(--voile-orange-fort),transparent 62%),
    radial-gradient(32% 40% at 78% 28%,var(--voile-signal),transparent 60%),
    radial-gradient(44% 52% at 58% 84%,var(--voile-orange),transparent 64%);
  animation:hero-derive 22s ease-in-out infinite alternate;
}

/* La trame : un point tous les 22 px, tres pale. C'est elle qui donne la
   texture « plan technique » sans qu'on ait a charger une image. */
.hero-dessin::after{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--texte-4) .9px,transparent .9px);
  background-size:22px 22px;
  opacity:.22;
}

@keyframes hero-derive{
  from{transform:translate3d(-3%,-2%,0) scale(1);}
  to{transform:translate3d(4%,3%,0) scale(1.1);}
}

/* ===========================================================================
   5. LES TUILES DE TYPE — l'emoji comme element de design

   UN EMOJI N'EST PAS UNE DECORATION ICI, C'EST LE REPERE.
   Neuf types de piece se ressemblent tous en toutes lettres : « afficheur »,
   « connecteur », « petite piece » font la meme longueur et la meme couleur.
   Un pictogramme couleur se retrouve au coup d'oeil, et il se retrouve APRES
   la premiere visite — c'est ce qui fait gagner du temps a un reparateur qui
   revient trois fois par semaine.

   ILS SONT CONFIGURABLES (js/marque.js, cle `emoji`), et une tuile sans emoji
   reste complete : elle garde son filigrane de deux lettres.
   =========================================================================== */

.tuile{
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  min-height:132px;
  padding:16px;
  background:var(--fond-2);
  border:0;
  box-shadow:var(--ombre-douce);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease;
}
.tuile:hover{transform:translateY(-3px);box-shadow:var(--ombre-carte);}

.tuile-emoji{
  font-size:2rem;line-height:1;
  /* Les emoji ont un dessin a eux : on empeche la police de titre de
     s'appliquer, et on les laisse au systeme. */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

.tuile-nom{
  font-family:var(--police-titre);
  font-size:1rem;font-weight:700;letter-spacing:-.02em;
}

/* La tuile « tout le catalogue » : l'aplat cobalt, une fois, en tete de
   grille. C'est le seul endroit de la vitrine ou l'accent couvre une
   surface — ailleurs il ne fait que souligner. */
.tuile-tout{
  background:var(--orange);
  border:0;
}
.tuile-tout .tuile-nom,.tuile-tout .tuile-emoji{color:var(--sur-orange);}
.tuile-tout:hover{background:var(--orange-sombre);}
.tuile-filigrane{color:var(--texte-1);opacity:.06;font-size:3.6rem;bottom:-10px;}

/* ===========================================================================
   6. LES CARTES — decision n°4 : le relief vient du papier
   =========================================================================== */

.carte-piece,.vignette-modele,.tuile-marque,.carte-compte,.form-carte,
.bandeau-pro,.recherche-liste,.menu-panneau{
  border-color:transparent;
  background:var(--fond-2);
  box-shadow:var(--ombre-douce);
}

.carte-piece{
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease;
}
.carte-piece:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:var(--ombre-carte);
}

/* L'image d'une vignette : creme, pas gris. Un fond gris sous une photo
   detouree la fait paraitre sale. */
.carte-image{background:var(--fond-1);}
.carte-image-creux{font-family:var(--police-titre);font-weight:800;}

.carte-nom{font-weight:700;letter-spacing:-.015em;font-size:.94rem;}

.carte-prix-val{
  font-family:var(--police-titre);
  font-size:1.15rem;font-weight:800;letter-spacing:-.03em;
}

.vignette-modele:hover,.tuile-marque:hover{
  border-color:transparent;
  transform:translateY(-3px);
  box-shadow:var(--ombre-carte);
}
.vignette-modele,.tuile-marque{transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease;}
.vignette-nom{font-family:var(--police-titre);font-weight:700;letter-spacing:-.01em;}
.tuile-marque-nom{font-family:var(--police-titre);font-weight:800;letter-spacing:.02em;}

/* ===========================================================================
   7. CE QU'ON MANIPULE : boutons, puces, champs
   =========================================================================== */

.btn{
  font-family:var(--police-texte);
  font-weight:600;
  letter-spacing:-.01em;
  border-radius:var(--radius);
  transition:transform .14s ease,box-shadow .18s ease,background .18s ease;
}
.btn-primary{box-shadow:var(--shadow-accent);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{
  background:var(--fond-2);
  border:1px solid var(--ligne);
  color:var(--texte-1);
}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-vif);}

/* Les puces de filtre et les etiquettes sont des pilules : c'est le troisieme
   rayon de la grammaire, et il ne sert qu'a ca. */
.puce,.etiquette-gamme,.carte-prix-pro,.entete-remise,.menu-compte,.compteur{
  border-radius:var(--radius-pilule);
}
.puce{
  background:var(--fond-2);
  border-color:transparent;
  box-shadow:var(--ombre-douce);
  font-weight:500;
}

/* LA PUCE ACTIVE REPETE SON FOND, ET CE N'EST PAS UNE REDONDANCE.
   catalogue.css la peint en cobalt ; la regle `.puce` ci-dessus a la MEME
   specificite et passe APRES elle dans la pile. Elle lui reprenait donc son
   fond, et le libelle — ecrit en blanc — disparaissait sur du blanc : le
   filtre en cours devenait une pastille vide. On repose les trois proprietes
   ici, apres `.puce`, ou plus rien ne peut les reprendre. */
.puce-active{
  background:var(--orange);
  color:var(--sur-orange);
  font-weight:600;
  box-shadow:var(--shadow-accent);
}

/* L'etiquette du tarif reparateur : le citron acide, premier des deux seuls
   usages de la couleur de surprise (voir tokens.css). */
.carte-prix-pro,.entete-remise{
  background:var(--signal);
  color:var(--signal-encre);
  font-family:var(--police-mono);
  font-weight:700;
  letter-spacing:.02em;
}

.field input,.field select,.field textarea,.recherche-champ{
  border-radius:var(--radius);
  background:var(--fond-2);
  border-color:var(--ligne);
}

/* La recherche est l'outil principal du site : elle a droit a une ombre, et
   elle s'eclaire au focus plutot que de changer de contour. */
.recherche-champ{
  box-shadow:var(--ombre-douce);
  border-color:transparent;
}
.recherche-champ:focus{box-shadow:var(--shadow-accent);}

/* ===========================================================================
   8. LES DETAILS QUI PORTENT LE TON D'ATELIER

   La chasse fixe sur ce qui est une REFERENCE et jamais sur ce qui est une
   phrase. Un slug, un numero de page, une gamme : ce sont des codes, et un
   code se lit mieux en chasse fixe.
   =========================================================================== */

.fiche-reference span:last-child,.pagination-etat,.suggestion-marque,
.catalogue-compte,.hero-eyebrow,.etiquette-gamme{
  font-family:var(--police-mono);
  font-size:.78rem;
  letter-spacing:.02em;
}
.etiquette-gamme{font-size:.68rem;font-weight:700;}

.fiche-nom{font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.05;}
.fiche-prix-val{font-family:var(--police-titre);font-weight:800;letter-spacing:-.04em;}

/* La bande defilante : un aplat d'encre en travers du papier. C'est le seul
   bloc sombre de la page claire, et c'est ce qui lui donne son rythme. */
.marquee{background:var(--bande);color:var(--sur-bande);}
.marquee span{
  font-family:var(--police-mono);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ===========================================================================
   9. L'EN-TETE ET LE PIED
   =========================================================================== */

.site-header{
  background:var(--voile-entete);
  border-bottom:1px solid var(--ligne);
  backdrop-filter:saturate(1.4) blur(12px);
}

.entete-logo .logo-marque{max-height:24px;}

/* LE PIED DE PAGE EST SOMBRE, ET C'EST LUI QUI FERME LA PAGE.
   Un pied creme sur une page creme ne finit rien : on fait defiler, le contenu
   s'arrete, et le site a l'air coupe. Un aplat d'encre pose en bas donne un
   bord bas a la page — exactement ce que fait la bande defilante en haut. Les
   deux aplats sombres encadrent le catalogue.
   LES COULEURS Y SONT ECRITES EN DUR, ET C'EST LA SEULE EXCEPTION DU FICHIER :
   le pied ne suit pas le theme. Clair ou sombre, il reste encre — sinon il
   disparaitrait en theme sombre, et la page n'aurait plus de bord du tout. */
.pied{
  background:var(--bande);
  color:var(--sur-bande);
  border-top:0;
  margin-top:48px;
  padding-top:44px;
}
.pied h2,.pied p,.pied a,.pied .pied-etiquette{color:var(--sur-bande);}
.pied-colonne h2{
  font-family:var(--police-mono);
  font-size:.7rem;font-weight:500;letter-spacing:.14em;
  opacity:.65;
}
.pied-colonne a{opacity:.82;}
.pied-colonne a:hover{opacity:1;color:var(--signal);}
/* Le logo du pied est dessine en encre : sur l'aplat sombre il disparaitrait.
   On l'inverse, comme le fait deja .logo-marque en theme sombre. */
.pied .logo-marque{filter:invert(1) brightness(1.6);}

/* ===========================================================================
   9 bis. LE RYTHME DE LA PAGE

   UNE PAGE D'UN SEUL APLAT N'A PAS DE RYTHME. La vitrine enchaine cinq
   sections de meme fond : on fait defiler sans savoir ou l'on en est. Une
   section sur deux passe sur un sable plus soutenu — pas une couleur de plus,
   la meme en plus dense — et la page se lit par paliers.
   =========================================================================== */

.section:nth-of-type(even){
  background:linear-gradient(to bottom,transparent,var(--fond-1) 14%,var(--fond-1) 86%,transparent);
}

/* ===========================================================================
   10. L'ARRIVEE DES BLOCS

   Un decalage de huit pixels, une fois, a l'apparition. Pas de parallaxe, pas
   de compteur qui monte : sur un catalogue qu'on ouvre quinze fois par jour,
   une animation qu'on attend devient une animation qui retarde.
   Et rien du tout pour qui demande moins de mouvement.
   =========================================================================== */

@media (prefers-reduced-motion:reduce){
  .hero-dessin::before{animation:none;}
  .tuile:hover,.carte-piece:hover,.vignette-modele:hover,.tuile-marque:hover,
  .btn-primary:hover{transform:none;}
}

/* ============================================================================
   LES RESEAUX DU MAGASIN — SOCLE 2.1

   Ils ont remplace le bandeau du compte reparateur sur la vitrine, et la
   colonne « Mon compte » du pied de page. Les boutons portent le NOM du
   reseau : un logo appartient a son proprietaire, et le socle n'en embarque
   aucun.
   ========================================================================== */

.bandeau-reseaux{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:12px;
}
.bandeau-reseaux .btn{padding:9px 18px;font-size:.88rem;}

/* Dans le pied, ce sont des liens comme les autres de la colonne — ils ne
   doivent pas y faire trois boutons pleins sur un aplat sombre. */
.pied-reseau{
  display:block;
  color:var(--sur-bande);
  text-decoration:none;
  font-size:.9rem;
  opacity:.82;
  margin-bottom:8px;
}
.pied-reseau:hover{opacity:1;color:var(--signal);}