/* Interdit l'inversion des couleurs par le mode sombre des navigateurs */
:root{ color-scheme: only light; }

/* ============================================
   GRAVANO — HEADER & FOOTER BLOCKSY (v1.16 — structure réelle confirmée)
   Structure confirmée par inspection :
   #header > [data-device] > [data-row="middle"] > .ct-container (GRID, pas flex)
     > [data-column="start"] > [data-items="primary"] (FLEX, ici vit le logo)
       > .site-branding (le logo)
   Panier et bandeau sont injectés DANS [data-items="primary"],
   aux côtés de .site-branding — PAS dans .ct-container (qui est en grid).
   ============================================ */

/* ————— HEADER : fond, hauteur ————— */
#header{
  max-height:100px !important;
  overflow:visible;
  position:fixed !important;
  top:0;left:0;right:0;
  z-index:9999 !important;
}
/* Compense la hauteur du header fixe pour ne pas masquer le haut de page */
body{ padding-top:88px !important; }
body.admin-bar #header{ top:32px; } /* barre admin WP connecté */
#header [data-row]{
  /* ⭐ Cadre-signature du groupe — le châssis sombre (la mère est passée du
     gris alu au sombre : le gris faisait « cheap » à côté du doré). Ici il vire
     naturellement au bleu acier, dans la famille de la boutique. Même reflet
     diagonal + fines rayures (la texture métal), seul le ton de fond change.
     ⚠️ Hauteur GRAVÉE : 88px desktop / 72px mobile, identique sur TOUTES les
     pages, avec la compensation body{padding-top} qui suit. */
  background:
    linear-gradient(115deg,
      transparent 22%, rgba(255,255,255,.07) 38%,
      rgba(255,255,255,.12) 46%, rgba(255,255,255,.06) 54%,
      transparent 70%),
    repeating-linear-gradient(102deg,
      rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(160deg, #1C2E3A 0%, #12232E 45%, #0A141A 100%) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.4) !important;
  position:relative;
}
/* Le liseré doré du header a été retiré : le logo (agrandi, à cheval sur le
   bord du header) fait maintenant lui-même office d'accent doré à cet
   endroit — un second liseré derrière lui aurait fait doublon. */
#header [data-device] [data-row],
#header [data-row]{
  min-height:88px !important;
  max-height:88px !important;
  height:88px !important;
  display:flex !important;
  align-items:center !important;
}

/* Le conteneur flex réel où vit le logo : on l'étire et on répartit son contenu */
#header [data-items="primary"]{
  width:100% !important;
  justify-content:space-between !important;
  align-items:center !important;
  position:relative !important;
  z-index:6;                     /* reste au-dessus du reflet diagonal */
}

/* Pleine largeur : la grille .ct-container et sa colonne "start" s'étirent
   sur tout l'écran (la colonne "end" — loupe — garde sa taille auto) */
#header .ct-container{
  max-width:100% !important;
  width:100% !important;
  padding-left:2vw !important;
  padding-right:2vw !important;
  grid-template-columns:1fr auto !important;
}
#header [data-column="start"]{
  width:100% !important;
}

/* La grille Blocksy cède toute la largeur à notre zone :
   une seule colonne pleine largeur au lieu de deux colonnes auto */
#header .ct-container{
  grid-template-columns:1fr !important;
  width:100% !important;
  max-width:100% !important;
}
#header [data-column="start"],
#header [data-column]{
  width:100% !important;
}
/* La colonne "end" vidée de son contenu ne doit plus réserver d'espace */
#header [data-column="end"]{
  display:none !important;
}

/* Le menu de navigation Blocksy est entièrement masqué */
#header nav.menu,
#header [data-items="primary"] nav,
#header .header-menu-1,
#header ul.menu{
  display:none !important;
}

/* Le texte "gravano.fr" est masqué visuellement (reste accessible aux lecteurs d'écran) */
#header span.site-title,
#header .site-title{
  font-size:0 !important;
  width:0;overflow:hidden;
}

/* Le logo Gravano : conteneur centré, image en vraie balise (pas ::before,
   pour un centrage fiable dans le flex de .site-branding) */
#header .site-branding{
  display:flex !important;
  align-items:center !important;
  flex-shrink:0;
}
/* Le logo (médaillon complet, déjà circulaire et détouré) est 2,5x plus
   gros que l'ancien format (76px -> ~190px) SANS changer la hauteur du
   header (88px, inchangée). .gv-logo-wrap reste un item flex normal
   (hauteur quasi nulle) qui réserve juste sa place à gauche du bandeau/
   panier, SANS positionner l'image : .gv-logo-img est en position:fixed,
   calée directement sur la fenêtre (comme #header lui-même) plutôt que
   sur .ct-container/[data-column]/[data-items] dont la hauteur réelle
   (grid interne à Blocksy) n'est pas fiable à supposer. Ancrage voulu :
   la ligne de texte "GRAVANO" tombe pile sur le bord bas du header
   (l'ancien emplacement du liseré) — le haut du médaillon touche le haut
   du header, le bas déborde sur le fil qui défile dessous. */
#header .gv-logo-wrap{
  width:170px;
  height:1px;
  flex-shrink:0;
}
/* Ancre du logo : ne génère aucune boîte (zéro impact layout), mais le clic sur
   l'image .gv-logo-img navigue vers l'accueil (jamais de cul-de-sac). */
#header .gv-logo-link{ display:contents; cursor:pointer; }
#header .gv-logo-img{ cursor:pointer; }
#header .gv-logo-img{
  display:block;
  position:fixed;
  left:2vw;
  top:-1px;
  width:192px;height:190px;
  object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
  z-index:10000;
  transition:filter .28s ease, transform .18s ease;
}
body.admin-bar #header .gv-logo-img{ top:31px; } /* barre admin WP : header décalé de 32px */

/* ⭐ LUEUR DORÉE au clic : une lueur DIFFUSE au CENTRE, sous le V (demande
   Florient). Élément dédié posé derrière le logo, centré sur le médaillon,
   dégradé radial doré très flou, opacité 0 au repos → pulse au clic (classe
   .on posée en JS). */
#header .gv-logo-glow{
  position:fixed;
  left:calc(2vw + 96px);      /* centre horizontal du médaillon (192px de large) */
  top:118px;                  /* sous le centre → la lueur rayonne sous le V */
  width:230px;height:230px;   /* plus large que le médaillon → halo visible autour */
  transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;
  /* Lueur DORÉE au clic (la mère l'a rouge). Sur un site bleu, un halo bleu ne
     se verrait pas ; l'or, lui, est le fil du groupe et claque comme du laiton. */
  background:radial-gradient(circle, rgba(224,187,74,.9) 0%, rgba(224,187,74,.5) 32%, rgba(224,187,74,0) 68%);
  filter:blur(14px);
  opacity:0;
  pointer-events:none;
  z-index:9999;               /* derrière le médaillon → le halo déborde autour et dessous */
}
body.admin-bar #header .gv-logo-glow{ top:150px; }
#header .gv-logo-glow.on{ animation:gv-glow-pulse .7s ease-out; }
@keyframes gv-glow-pulse{
  0%{   opacity:0;   transform:translate(-50%,-50%) scale(.5); }
  25%{  opacity:.95; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0;   transform:translate(-50%,-50%) scale(1.25); }
}

/* Le tampon produit digital ne vit plus ici : déplacé du logo (fixe) vers
   le "o" du hero (défilant) — voir accueil.css .tampon-produit-digital. */

/* Le panier thermique, injecté dans [data-items="primary"] par le JS */
#header .gv-panier{
  /* !important : Blocksy force un margin:10px sur les items du header, qui
     écrasait notre réglage (le panier « collait » au bord droit). */
  margin-left:auto !important;
  margin-right:clamp(1.6rem,4vw,4.5rem) !important;
  font-size:.92rem;
  padding:.55rem 1.3rem;
  flex-shrink:0;
}

/* ————— Bandeau de réassurance rotatif, injecté entre logo et panier —————
   Centré en absolu sur [data-items="primary"] (position:relative) plutôt
   que via flex:1 entre logo et panier : leurs largeurs sont inégales
   (logo agrandi ~170px, panier variable selon le contenu du panier), donc
   un centrage flex les aurait rendus otages de ce déséquilibre. */
.gv-bandeau{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  height:2rem;
  overflow:hidden;
  width:100%;
  max-width:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gv-bandeau-item{
  position:absolute;left:0;right:0;top:50%;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  font-size:1.15rem;color:var(--gv-or);
  opacity:0;transform:translateY(calc(-50% + 6px));
  transition:opacity .6s ease, transform .6s ease;
  white-space:nowrap;
  text-align:center;
}
.gv-bandeau-item[data-actif="1"]{
  opacity:1;transform:translateY(-50%);
}
/* Variante citation-signature : PLAQUE DORÉE « socle technologique » à vis,
   dans l'esprit châssis premium du groupe (§11). Desktop uniquement (le
   centre du header est masqué ≤760px). Le texte, contextuel selon le rayon
   (voir functions.php), reste en Cormorant italique. */
.gv-bandeau--citation{
  /* Centrage FIABLE sur la fenêtre : en absolu, la plaque se calait sur la
     zone flex [data-items=primary] (décentrée par le logo) → ~10px à droite.
     En position:fixed on la centre sur le viewport, comme le logo lui-même. */
  /* Centrage VERTICAL fiable : top:24px était codé en dur → sur d'autres
     écrans/zoom la plaque « montait au plafond ». On la centre sur le milieu du
     header (88px de haut → 44px), translateY(-50%) → alignée avec le panier,
     quelle que soit sa hauteur. */
  position:fixed;left:50%;top:44px;transform:translate(-50%,-50%);margin:0;
  width:auto;height:auto;max-width:760px;
  padding:.44rem 2.5rem;border-radius:9px;
  background:linear-gradient(168deg,#F0D77E 0%,#CDA62B 42%,#A67E1B 100%);
  border:1px solid #7d5f13;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 5px rgba(80,54,4,.4),
    0 2px 6px rgba(0,0,0,.32);
}
/* ⚠️ Barre d'admin WordPress (utilisateur CONNECTÉ) : elle décale le header fixe
   de 32px vers le bas. Le panier suit (centré par flex dans le header), mais la
   plaque est en position:fixed avec un top codé → sans ça elle « monte au
   plafond » pour l'admin connecté. Invisible pour les visiteurs (non connectés,
   pas de barre). On répercute donc le décalage de 32px. */
body.admin-bar .gv-bandeau--citation{ top: calc(44px + 32px); }

/* Une seule ligne (pas de rotation) → l'item passe en statique et donne sa
   hauteur à la plaque. */
.gv-bandeau--citation .gv-bandeau-item{
  position:static;opacity:1;transform:none;white-space:nowrap;font-size:1.3rem;
}
/* Les 4 vis d'angle (rivets) : un overlay avec 4 dégradés radiaux (trou
   sombre + rebord clair + micro-reflet), façon plaque rivetée. */
.gv-bandeau--citation::before{
  content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;
  background:
    radial-gradient(circle at 12px 9px, #5c460d 0 1.5px,#8a6a17 1.5px 3px,rgba(255,255,255,.45) 3px 3.7px,transparent 4.1px),
    radial-gradient(circle at calc(100% - 12px) 9px, #5c460d 0 1.5px,#8a6a17 1.5px 3px,rgba(255,255,255,.45) 3px 3.7px,transparent 4.1px),
    radial-gradient(circle at 12px calc(100% - 9px), #5c460d 0 1.5px,#8a6a17 1.5px 3px,rgba(255,255,255,.45) 3px 3.7px,transparent 4.1px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 9px), #5c460d 0 1.5px,#8a6a17 1.5px 3px,rgba(255,255,255,.45) 3px 3.7px,transparent 4.1px);
}
/* Sécurité mobile : panier et bandeau doivent rester visibles et lisibles,
   quelle que soit la structure Blocksy mobile (burger menu, etc.) */
@media(max-width:760px){
  /* Le header mobile fait 72px (pas 88px) → la compensation de body doit suivre,
     sinon 16px de vide mort sous le header sur TOUTES les pages mobiles. */
  body{ padding-top:72px !important; }
  /* Pas de bandeau sur mobile — seulement logo + panier, alignés sur une ligne */
  .gv-bandeau{ display:none !important; }
  #header [data-items="primary"]{
    flex-wrap:nowrap !important;
    align-items:center !important;
    height:100%;
  }
  #header [data-device="mobile"] [data-row]{
    min-height:72px !important;
    max-height:72px !important;
    height:72px !important;
    align-items:center !important;
  }
  /* Même logique qu'en desktop (2,5x, texte calé sur le bord bas du
     header), rapportée à la hauteur du header mobile (72px). */
  #header .gv-logo-wrap{
    width:120px;
  }
  .gv-logo-img{
    width:131px !important;height:130px !important;
    top:11px !important;
  }
  .gv-panier{
    font-size:.8rem !important;
    padding:.4rem 1rem !important;
  }
}

/* ————— FOOTER NATIF BLOCKSY — masqué sur l'accueil ————— */
body.page-template-template-accueil #footer,
body.page-template-template-accueil .ct-footer{
  display:none !important;
}


/* ————— Header aluminium clair : bandeau en gris foncé pour la lisibilité ————— */
#header .gv-bandeau-item{
  color:var(--gv-encre) !important;
}

/* ============================================================
   ⭐ HEADER COHÉRENT PARTOUT (règle globale, cf. §4/§5 du .md).
   Le grand logo est fixe et « chevauche le haut par son milieu » sur TOUTES les
   pages — identité constante, comme la boutique. Blocksy ajoutait 60px de padding
   conteneur qui creusait un espace mort en tête des pages de CONTENU → neutralisé
   (l'accueil garde son hero, les pages produit/panier gardent leur galerie).
   ============================================================ */
body.gv-legal-page #main .ct-container-full,
body.gv-ebook-page #main .ct-container-full,
body.gv-contact-page #main .ct-container-full,
body.gv-avis-page #main .ct-container-full,
body.gv-article-page #main .ct-container-full,
body.gv-blog-index #main .ct-container-full{ padding-top:.6rem !important; }
/* Mobile : les liens « Retour à la boutique » (alignés à gauche) sont CENTRÉS
   pour dégager le grand logo (sinon chevauchement, cf. fix contact). */
@media (max-width:820px){
  body.gv-legal-page .gv-legal-retour,
  body.gv-ebook-page .gv-eb-retour,
  body.gv-article-page .gv-article-retour{ text-align:center; }
}

/* ❤ Cœur bookend du footer (test « tendresse », Florient) — or, discret.
   Marche arrière : retirer le <span class="gv-footer-coeur"> dans inc/footer.php. */
.gv-footer-coeur{ display:inline-block;vertical-align:middle;margin-left:.15rem; }
.gv-footer-coeur svg{ width:15px;height:15px;fill:currentColor;color:var(--gv-or);filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); }


/* ── Équilibre du header (28/07/2026, Florient : « le centrage des éléments
   n'est pas top ») ─────────────────────────────────────────────────────────
   La plaque de citation est centrée sur la FENÊTRE (choix mûr : la centrer sur
   la zone flex la décalait davantage, le logo faussant le calcul). Mais l'espace
   réellement libre, lui, n'est pas symétrique — le panier est bien plus large
   que le logo et il était repoussé loin du bord droit. La plaque semblait donc
   penchée vers la droite alors qu'elle était au centre exact.
   On rapproche le panier du bord : l'espace libre redevient symétrique autour
   du milieu, et la plaque retrouve un centre PERÇU juste. */
#header .gv-panier{
  margin-right:clamp(1rem,2.2vw,2.2rem) !important;
}


/* ── Panier mobile 29/07/2026 ──────────────────────────────────────────────
   Sur téléphone, la pilule du panier sortait de l'écran par la droite : son
   texte (« Panier — vide. Ça ne va pas rester comme ça. ») est écrit pour un
   grand écran. On la laisse s'adapter au lieu de la laisser déborder — elle se
   contente de la place disponible et coupe proprement s'il le faut. */
@media(max-width:760px){
  #header .gv-panier{
    max-width:calc(100vw - 165px) !important;   /* 165px = la place du logo */
    margin-right:.7rem !important;
    padding:.5rem .9rem !important;
    font-size:.78rem !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}


/* ── Le logo CHEVAUCHE, il n habite pas le header (29/07/2026) ──────────────
   Florient : « le header est beaucoup trop grand, il intègre le logo au lieu
   qu il soit chevauchant. »
   Le logo mesure 130px alors que le header mobile en fait 72 : s il reste dans
   le flux, il POUSSE le header, qui grandit pour le contenir — et l effet
   voulu (un médaillon posé à cheval sur le bord, qui déborde sur la page qui
   défile) disparaît.
   On garantit donc les deux conditions, explicitement, à la fin de la feuille :
     · l image est hors flux (position:fixed) — elle ne pousse rien ;
     · sa place réservée dans le header a une hauteur NULLE — le header garde
       ses 72px quoi qu il arrive.
   ⚠️ Hauteur gravée : 88px desktop / 72px mobile, sur toutes les pages et
   toutes les boutiques. Ne jamais laisser un élément la faire varier. */
@media(max-width:760px){
  #header [data-device] [data-row],
  #header [data-device=\"mobile\"] [data-row],
  #header [data-row]{
    min-height:72px !important; max-height:72px !important; height:72px !important;
    overflow:visible !important;
  }
  #header .gv-logo-wrap{
    height:0 !important; min-height:0 !important; max-height:0 !important;
    align-self:center !important; flex:0 0 auto !important;
  }
  #header .gv-logo-img{
    position:fixed !important;
  }
  body{ padding-top:72px !important; }
}