/* 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]{
  background:
    linear-gradient(115deg,
      transparent 22%, rgba(255,255,255,.14) 38%,
      rgba(255,255,255,.22) 46%, rgba(255,255,255,.12) 54%,
      transparent 70%),
    repeating-linear-gradient(102deg,
      rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(160deg, #d7dade 0%, #b7bcc3 32%, #8b9096 68%, #5f6469 100%) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(0,0,0,.25) !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;
}
body.admin-bar #header .gv-logo-img{ top:31px; } /* barre admin WP : header décalé de 32px */

/* 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){
  /* 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-confessions-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; }
}