/* =========================================================
   V1.6.8 — CARBON UI POLISH
   Ajustements ciblés : header global, JORIS et grille sociale.
   ========================================================= */

/* Header Carbon plus présent, sans réduire la lisibilité. */
body > .site-header {
  /* Un seul fond, pris sur le jeton, donc il suit la bascule jour et
     nuit. Il y avait ici quatre declarations concurrentes empilant
     jusqu'a cinq couches de degrades, de rayures et de halos verts :
     la barre restait noire en mode jour, et le nom de la marque y
     disparaissait. La charte demande « quelque chose de tres propre,
     sobre » : c'est une couleur, pas cinq couches. */
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* =========================================================
   V1.7.0 — Ergonomie Accueil et interface Carbon
   ========================================================= */

/* ==========================================================
   La barre de navigation
   ----------------------------------------------------------
   Ce bloc portait DEUX generations de style empilees : une premiere qui
   posait un degrade sombre et une ombre portee sur chaque lien, une
   seconde qui annulait tout par « background: transparent !important »
   et reposait le sien. Huit declarations de fond se disputaient un
   simple lien de menu.

   Consequence mesuree le 26 aout 2026 : le menu s'affichait en 11 px,
   dans des boitiers de 32 px de haut, et il restait sombre en mode
   jour. Les corrections faites dans base.css n'avaient aucun effet,
   puisque cette feuille est chargee apres.

   Une seule generation desormais, par les jetons. Le filet lumineux
   sous chaque lien est parti avec : la charte refuse les effets neon,
   et il ne signalait rien qu'un fond ne dise deja.
   ========================================================== */

body > .site-header .navbar {
  min-height: 46px;
}

/* Ni cadre autour du groupe, ni cadre autour de chaque entree.
   Demande de Joris le 26 aout 2026 : « enlever les petits cadres de
   chaque menu ». Six declarations de bordure se disputaient un lien de
   menu, la derniere gagnait et dessinait le cadre. Le menu est du
   texte : il se lit, il ne s'encadre pas. Seul le survol pose un fond,
   et seul « Nous contacter » garde le sien, parce que c'est un
   bouton. */
body > .site-header .nav-links {
  gap: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body > .site-header .nav-links a {
  min-height: var(--tap) !important;
  padding-inline: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  /* 16 px, comme partout ailleurs. Les majuscules sont conservees :
     elles distinguent la barre du reste sans rien couter en lisibilite
     sur des mots aussi courts. */
  font: 700 16px var(--ff-texte) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
}

body > .site-header .nav-links a {
  border: 0 !important;
}

body > .site-header .nav-links a:hover,
body > .site-header .nav-links a:focus-visible,
body > .site-header .nav-links a[aria-current="page"] {
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

/* La texture Carbon est plus présente sur les pages produit, sans animation coûteuse. */
.shop-page .shop-section,
.resource-page .resource-shell > section {
  background-image:
    linear-gradient(145deg,rgba(5,15,10,.9),rgba(3,10,7,.94)),
    repeating-linear-gradient(135deg,rgba(111,240,163,.035) 0 1px,transparent 1px 8px) !important;
}

/* Pseudo presque blanc : seule la base reçoit une légère teinte menthe. */

/* Ressources : introduction courte et centrée. */

/* Les logos vivent sans seconde boîte visuelle. */

/* Contact plus structuré, lisible et compact. */
#contact.section-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 52px) !important;
  border-color: rgba(85,230,149,.18) !important;
  background:
    linear-gradient(145deg, rgba(10,22,16,.96), rgba(4,12,8,.985)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.2);
}

#contact.section-panel::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -220px;
  top: -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(85,230,149,.09), transparent 68%);
  pointer-events: none;
}

#contact .section-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
}

#contact .section-heading h2 { margin-bottom: 8px; }

/* La démo adopte l’accent choisi dans la boutique. */

@media (max-width: 700px) {
  #contact.section-panel { padding: 26px 18px !important; }
}

body > .site-header .nav-links a {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body > .site-header .nav-links a:hover,
body > .site-header .nav-links a:focus-visible,
body > .site-header .nav-links a[aria-current="page"] {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  transform: translateY(-1px);
}

/* JORIS : gradient plus doux, glow premium contenu. */

/* Plateformes : deux colonnes strictement identiques et cadres alignés. */
.home-platform-selector {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: min(100%, 700px) !important;
  max-width: 700px !important;
}

@media (max-width: 700px) {
  body > .site-header .nav-links a {
  }

  .home-platform-selector {
    gap: 10px !important;
  }

  .home-platform {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon name"
      "icon free";
    min-height: 72px !important;
    padding: 9px 11px !important;
    gap: 2px 9px !important;
  }

  .home-platform .platform-icon { grid-area: icon; width: 38px !important; height: 38px !important; }
  .home-platform .platform-name { grid-area: name; align-self: end; }
  .home-platform small { grid-area: free; align-self: start; text-align: left; }
}

@media (max-width: 420px) {
  .home-platform-selector {
    grid-template-columns: 1fr !important;
  }

  .home-platform {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas: "icon name free";
    min-height: 62px !important;
  }

  .home-platform .platform-icon { width: 42px !important; height: 42px !important; }
  .home-platform .platform-name,
  .home-platform small { align-self: center; }
  .home-platform small { text-align: right; }
}

/* =========================================================
   V1.6.9 — Lisibilité et finition Carbon
   ========================================================= */

/* La texture reste sur le header. Les commandes passent sur un plan opaque. */
body > .site-header .navbar,
body > .site-header .brand,
body > .site-header .shop-brand-name,
body > .site-header .menu-toggle,
body > .site-header .nav-links {
  position: relative;
  z-index: 2;
}

body > .site-header .nav-links a {
  isolation: isolate;
  overflow: hidden;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body > .site-header .nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

body > .site-header .nav-links a:hover::before,
body > .site-header .nav-links a:focus-visible::before,
body > .site-header .nav-links a[aria-current="page"]::before {
  opacity: 1;
}

/* JORIS : blanc menthe dominant, vert limité à la base du mot. */

/* Boutique : densité desktop légèrement réduite, sans transformer la page. */
@media (min-width: 1000px) {
  .shop-shell {
    width: min(100%, 1360px) !important;
    padding-top: 98px !important;
  }

  .shop-hero {
    min-height: 540px !important;
    padding: 48px !important;
  }

  .shop-hero h1 {
    font-size: clamp(34px, 3.7vw, 52px) !important;
  }

  .shop-section {
    padding: 46px !important;
  }

  .shop-heading h2,
  .personalization h2,
  .shop-contact h2 {
    font-size: clamp(27px, 3.2vw, 39px) !important;
  }

  .edition-card,
  .edition-visual {
    min-height: 310px !important;
  }
}

/* Priorité finale V1.7.0 : ces règles restent après les anciens correctifs. */
body > .site-header .nav-links a {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body > .site-header .nav-links a:hover,
body > .site-header .nav-links a:focus-visible,
body > .site-header .nav-links a[aria-current="page"] {
}

/* V1.7.1 — finitions ciblées */

/* V1.7.4 — Twitch conserve sa silhouette native, sans tuile arrondie. */

/* Boutons cohérents : libellés nets, technologiques et en capitales. */
body > .site-header .nav-links a,
.primary-button,
.secondary-button,
.hero-cta,
.resource-promo-cta,
.shop-primary,
.shop-secondary,
.cart-fab,
.cart-continue,
button {
}

/* V1.7.5 — navigation épurée, légère et high-tech. */
body > .site-header .nav-links { gap: 7px !important; }
body > .site-header .nav-links a {
  padding: 0 16px !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}
body > .site-header .nav-links a:hover,
body > .site-header .nav-links a:focus-visible,
body > .site-header .nav-links a[aria-current="page"] {
}

/* Logos sociaux : même emprise visuelle, aucune découpe. */

/* V1.7.5.1 — garde-fous de cadrage pour les petites cartes. */

@media (max-width: 700px) {
  .home-platform {
    grid-template-columns: 36px minmax(0,1fr) 32px !important;
    grid-template-areas: "icon name free" !important;
    gap: 7px !important;
  }
  .home-platform small { align-self: center !important; text-align: right !important; }
}

body > .site-header .nav-links a {
}

body > .site-header .nav-links a[href="ressources.html"] {
}

/* V1.7.2 — lisibilité et cohérence intégrale du thème personnalisé */

#contact input::placeholder,
#contact textarea::placeholder {
  color: rgba(205,222,213,.42);
  opacity: 1;
}

/* =========================================================
   Cible tactile sur telephone
   ---------------------------------------------------------
   Une regle plus haut ramenait deja les entrees a 44 px sous 700 px,
   mais sans !important : trois regles de pleine largeur posees plus bas
   la battaient, et les entrees faisaient donc 32 px meme sur telephone.
   Un doigt vise mal une cible de 32 px.

   Cette regle ferme la feuille pour qu'il n'y ait plus de doute : la
   barre reste compacte sur ordinateur, confortable au doigt en dessous.
   ========================================================= */
@media (max-width: 900px) {
  body > .site-header .nav-links a {
  }
}