/* ============================================================
   PRÉPARATEUR.E46 — EN-TÊTE, PIED, ET LE MÉNAGE GÉNÉRAL
   ============================================================ */

/* ── Le socle ────────────────────────────────────────────────────────────────
   Le site est sombre par choix. On le dit au niveau du corps de page pour que
   les zones que le thème parent dessine lui-même (marges, colonnes vides) ne
   laissent pas passer de bandes claires entre deux sections. */
/* `html body` et non `body` : Blocksy écrit ses couleurs dans une balise <style>
   injectée dans l'en-tête HTML, qui sort donc APRÈS toutes les feuilles liées.
   Aucune priorité d'enqueue ne peut passer devant du CSS en ligne — seule une
   spécificité supérieure y arrive. Deux sélecteurs contre un suffisent, et c'est
   plus honnête qu'un !important qui bloquerait toute retouche future. */
html body{
  background:var(--pe-carbone);
  color:var(--pe-blanc);
}

/* Aucun élément ne fait défiler la page en largeur. C'est la première chose à
   vérifier sur mobile, et la dernière à laisser passer. */
html, body{ overflow-x:clip; max-width:100%; }
img, video, iframe{ max-width:100%; height:auto; }


/* ── L'EN-TÊTE ───────────────────────────────────────────────────────────────
   Fixe, sombre, avec un seul liseré doré en bas. Hauteur strictement identique
   partout — 76 px en grand écran, 62 px en mobile — et le corps de page décalé
   d'autant. Si les deux valeurs divergent, on obtient soit un trou mort sous
   l'en-tête, soit un titre coupé dessous : c'est exactement ce qui vient
   d'arriver sur ce site avec la bannière de titre d'Astra. */
:root{ --pe-h-entete:76px; }

#header,
.ct-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:200;
  background:linear-gradient(180deg, #14161a 0%, var(--pe-noir) 100%);
  border-bottom:1px solid rgba(201,148,14,.42);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
/* La couleur se pose sur la RANGÉE, pas sur l'en-tête : c'est là que Blocksy
   écrit la sienne, en CSS injecté dans l'en-tête HTML. Peindre `#header` seul
   laissait la barre blanche alors que la règle existait — vu à l'écran, pas
   deviné. */
html #header [data-row],
html #header [data-row] > div{
  background:transparent;
}
html #header{
  background:linear-gradient(180deg,#14161a 0%,var(--pe-noir) 100%) !important;
}

/* UNE seule rangée, à hauteur fixe. Blocksy en génère plusieurs par défaut
   (logo d'un côté, nom du site dans une autre) : la deuxième débordait sous la
   barre fixe et coupait le titre en deux. On garde la rangée principale et on
   éteint les autres — un en-tête à géométrie variable rend impossible le calcul
   du décalage du corps de page, et c'est comme ça qu'on obtient soit un trou
   mort, soit du texte coupé. */
#header [data-row="middle"]{
  height:var(--pe-h-entete);
  min-height:var(--pe-h-entete);
  max-height:var(--pe-h-entete);
}
#header [data-row="top"],
#header [data-row="bottom"]{ display:none !important; }

body{ padding-top:var(--pe-h-entete); }

/* Le nom du site est déjà écrit en grand dans le fil : le répéter dans la barre
   à côté du logo fait bégayer la page. Le logo suffit — et il ramène à l'accueil. */
#header .site-title,
#header .site-description{ display:none; }

@media (max-width:760px){
  :root{ --pe-h-entete:62px; }
}

/* Le nom dans l'en-tête suit la même règle que dans le fil : le métier en
   blanc, le modèle en or. Une seule identité, à deux endroits. */
.site-title a, .ct-logo-container .site-title{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--pe-blanc) !important;
  text-decoration:none !important;
}


/* ── CE QU'ON ÉTEINT ─────────────────────────────────────────────────────────
   Une boutique à fil unique n'a pas besoin de la signalétique interne d'un CMS.
   Chacune de ces règles retire quelque chose de nommé, jamais « au cas où ». */

/* La bannière de titre de page : sur le fil, le nom de la maison est déjà le
   titre, et une deuxième ligne « Accueil » par-dessus n'apporte rien. */
.page-title, .entry-header .page-title,
.ct-hero-section .page-title{ display:none; }

/* Le fil d'Ariane : « Accueil › Boutique › Intérieur » décrit une arborescence
   que le visiteur ne parcourt pas. */
.woocommerce-breadcrumb, .ct-breadcrumbs{ display:none !important; }

/* Le compteur de résultats et le tri de WooCommerce : il n'y a pas d'archive à
   trier, tout est rangé par zone. */
.woocommerce-result-count, .woocommerce-ordering{ display:none !important; }

/* La catégorie sous le nom du produit : le visiteur sait dans quelle zone il
   est, il vient d'en lire le titre. Et l'UGS est l'identifiant du fournisseur —
   illisible, et il trahit d'où vient la pièce. */
.product_meta{ display:none !important; }


/* ── LE PIED DE PAGE ─────────────────────────────────────────────────────────
   Il finit dans le noir, comme le bas du fil : la page se termine là où le
   dégradé se termine, sans rupture. */
#footer, .ct-footer{
  background:var(--pe-noir);
  border-top:1px solid rgba(201,148,14,.28);
  color:var(--pe-blanc-doux);
}
#footer a, .ct-footer a{
  color:var(--pe-or-clair);
  text-decoration:none;
}
#footer a:hover, .ct-footer a:hover{ color:var(--pe-blanc); }

/* L'avertissement d'indépendance. Il existait déjà dans le pied de page de la
   boutique, et il est nécessaire : citer « BMW » pour indiquer une
   compatibilité est licite, laisser croire à un lien officiel ne l'est pas.
   Il reste discret — c'est une mention, pas un argument. */
.pe-independance{
  max-width:56ch;
  margin:1.2rem auto 0;
  font-size:.74rem;
  line-height:1.5;
  text-align:center;
  color:rgba(243,243,243,.44);
}


/* ── LA BANDE D'APERÇU ───────────────────────────────────────────────────────
   Visible uniquement quand le thème est affiché en mode aperçu, pour qu'on ne
   confonde jamais l'essai avec la boutique en ligne. */
.pe-apercu{
  position:fixed;
  inset-inline:0; bottom:0;
  z-index:9999;
  padding:.45rem .9rem;
  text-align:center;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#17130a;
  background:linear-gradient(180deg,var(--pe-or-clair),var(--pe-or));
  box-shadow:0 -4px 14px rgba(0,0,0,.4);
}
.pe-apercu a{ color:#17130a; text-decoration:underline; }