/*
Theme Name: Cybomac
Theme URI: https://cybomac.com
Author: Cybomac / Claude Code
Description: Block theme Cybomac — design « terminal sombre » (maquette cybomac-accueil-v1). Design tokens dans theme.json, sections dans patterns/, éditabilité niveau 2.
Version: 1.2.2
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cybomac
*/

/*
CSS strictement décoratif — tout ce qui est exprimable en theme.json y est.
Couleurs UNIQUEMENT via les variables de presets (éditables en Global Styles).
*/

/* ---------- Header sticky ---------- */

/* Le sticky doit vivre sur le wrapper <header> généré par WordPress autour
   du template part : .cyb-header sticky à l'intérieur de ce parent (qui fait
   exactement sa hauteur) ne colle jamais — un sticky ne sort pas de son
   parent. Constaté le 2026-07-17. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
}

.cyb-header {
  position: relative; /* ancre des pseudo-éléments ::before / ::after */
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Fond translucide + blur sur un pseudo-élément : backdrop-filter posé sur
   .cyb-header lui-même créerait un containing block qui piègerait le
   position:fixed de l'overlay du menu mobile (bug constaté 2026-07-10). */
.cyb-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
  backdrop-filter: blur(10px);
}

.admin-bar header.wp-block-template-part { top: 32px; }

/* Symbole de marque devant le titre du site.
   Purement décoratif : le nom accessible est le texte du site-title lui-même.
   URL relative au fichier CSS, donc valide en frontend comme dans l'éditeur
   (add_editor_style sert style.css depuis le thème). */
.wp-block-site-title a::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.25em;
  vertical-align: -0.2em;
  background: url("assets/img/symbole-cybomac.svg") center / contain no-repeat;
}

/* Curseur clignotant du logo */
.wp-block-site-title a::after {
  content: "_";
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--mono);
  animation: cyb-blink 1.1s step-end infinite;
}

@keyframes cyb-blink { 50% { opacity: 0; } }

.wp-block-navigation a:hover { color: var(--wp--preset--color--contrast); }

/* ---------- Header : lien actif & effets de scroll (variante A « Terminal ») ---------- */

/* Prompt > devant chaque lien du menu : toujours présent (opacity) pour
   éviter tout décalage de layout au survol. Plein sur la page courante,
   fantôme au survol des autres. */
.wp-block-navigation a::before {
  content: ">";
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--primary);
  opacity: 0;
  margin-right: 6px;
  transition: opacity 0.15s;
}

.wp-block-navigation a:hover::before { opacity: 0.45; }

.wp-block-navigation a[aria-current="page"],
.wp-block-navigation .current-menu-item > a {
  color: var(--wp--preset--color--contrast);
}

.wp-block-navigation a[aria-current="page"]::before,
.wp-block-navigation .current-menu-item > a::before {
  opacity: 1;
}

/* Effets de scroll — amélioration progressive : sans support
   d'animation-timeline, le header reste exactement l'actuel. */
@supports (animation-timeline: scroll()) {

  /* Réduction ~72 → ~58px : les déclarations issues d'animations gagnent
     sur le padding inline (spacing-30) du groupe interne du header. */
  .cyb-header > .wp-block-group {
    animation: cyb-header-shrink linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }

  @keyframes cyb-header-shrink {
    to { padding-top: 9px; padding-bottom: 9px; }
  }

  /* Ombre portée : box-shadow sur .cyb-header est sans danger — c'est le
     backdrop-filter qu'il ne faut jamais poser ici (containing block qui
     piégerait l'overlay fixed du menu mobile, cf. ::before plus haut). */
  .cyb-header {
    animation: cyb-header-shadow linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }

  @keyframes cyb-header-shadow {
    to { box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent); }
  }

  /* Fond renforcé 86 % → 94 % une fois scrollé */
  .cyb-header::before {
    animation: cyb-header-solidify linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }

  @keyframes cyb-header-solidify {
    to { background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent); }
  }

  /* Barre de progression de lecture : 2px primary qui remplit la
     border-bottom du header. Aucun markup ajouté (::after libre). */
  .cyb-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--wp--preset--color--primary);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: cyb-progress linear both;
    animation-timeline: scroll(root);
  }

  @keyframes cyb-progress {
    to { transform: scaleX(1); }
  }
}

/* ---------- Eyebrow (style de paragraphe) ---------- */

.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.is-style-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--wp--preset--color--primary);
  border-radius: 50%;
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
  flex: none;
}

.cyb-center .is-style-eyebrow { justify-content: center; }

/* ---------- Badges de statut (héros) ---------- */

.is-style-badge {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  color: var(--wp--preset--color--contrast-2);
}

.is-style-badge::before {
  content: "● ";
  color: var(--wp--preset--color--secondary);
}

/* ---------- Halo du héros ---------- */

.cyb-hero {
  position: relative;
  overflow: hidden;
}

.cyb-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.cyb-hero h1 em {
  font-style: normal;
  color: var(--wp--preset--color--primary);
}

/* ---------- Carte pipeline (héros) ---------- */

.cyb-pipeline {
  border: 1px solid var(--wp--preset--color--border);
}

.cyb-pipeline-head {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Feux tricolores décoratifs */
.cyb-pipeline-head::before {
  content: "";
  width: 43px;
  height: 9px;
  flex: none;
  background:
    radial-gradient(circle 4.5px at 4.5px 50%, var(--wp--preset--color--accent) 4.5px, transparent 5px),
    radial-gradient(circle 4.5px at 21.5px 50%, var(--wp--preset--color--primary) 4.5px, transparent 5px),
    radial-gradient(circle 4.5px at 38.5px 50%, var(--wp--preset--color--secondary) 4.5px, transparent 5px);
}

.cyb-step {
  position: relative;
  padding-bottom: 30px;
}

.cyb-step:last-child { padding-bottom: 0; }

/* Connecteur vertical entre étapes */
.cyb-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--wp--preset--color--border);
}

.cyb-node {
  width: 30px;
  height: 30px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
  z-index: 1;
}

.cyb-step-active .cyb-node {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary) !important;
}

.cyb-metric { margin-left: auto; padding-top: 4px; }

/* ---------- Bande stats ---------- */

.cyb-stats {
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.cyb-stats .wp-block-column {
  padding: 34px 24px;
}

@media (min-width: 782px) {
  .cyb-stats .wp-block-column + .wp-block-column {
    border-left: 1px solid var(--wp--preset--color--border);
  }
}

.cyb-stats .cyb-num mark {
  background: transparent;
  color: var(--wp--preset--color--primary);
}

/* ---------- Listes avant / après ---------- */

ul.is-style-cross,
ul.is-style-check {
  list-style: none;
  padding-left: 0;
}

ul.is-style-cross li,
ul.is-style-check li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

ul.is-style-cross li { color: var(--wp--preset--color--contrast-2); }
ul.is-style-check li { color: var(--wp--preset--color--contrast); }

ul.is-style-cross li::before {
  content: "×";
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--accent);
  flex: none;
}

ul.is-style-check li::before {
  content: "✓";
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--secondary);
  flex: none;
}

/* Titres « // Avant » / « // Après » */
.cyb-ap-title::before {
  content: "// ";
  color: var(--wp--preset--color--contrast-2);
}

/* ---------- Cartes (offres, témoignages, colonnes A/A) ---------- */

.cyb-card {
  border: 1px solid var(--wp--preset--color--border);
}

/* ---------- Tags des offres ---------- */

.is-style-tag {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--wp--preset--color--border);
  padding: 5px 9px;
  color: var(--wp--preset--color--contrast-2);
}

/* ---------- Méthode ---------- */

.cyb-method-item {
  border-top: 1px solid var(--wp--preset--color--border);
}

.cyb-method-item:last-child {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.cyb-method-num { width: 56px; flex: none; }

@media (min-width: 960px) {
  .cyb-method-num { width: 80px; }
}

.cyb-method-item p { max-width: 60ch; }

/* ---------- CTA final / bandes bordées ---------- */

.cyb-band {
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ---------- Footer ---------- */

.cyb-footer a { color: var(--wp--preset--color--contrast-2); }
.cyb-footer a:hover { color: var(--wp--preset--color--contrast); }

.cyb-footer-bottom {
  border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- FAQ ---------- */

.cyb-faq-list .wp-block-details {
  border: 1px solid var(--wp--preset--color--border);
  padding: 18px 22px;
}

.cyb-faq-list summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
}

.cyb-faq-list .wp-block-details[open] > summary {
  color: var(--wp--preset--color--primary);
  margin-bottom: 12px;
}

/* ---------- Formulaire CF7 (landing audit GEO) ---------- */

.cyb-form form > p { margin-bottom: 20px; }

.cyb-form label {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--contrast-2);
}

.cyb-form input[type="text"],
.cyb-form input[type="email"],
.cyb-form input[type="url"] {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 15px;
  background: var(--wp--preset--color--base-2);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.95rem;
}

.cyb-form input:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
}

.cyb-form ::placeholder {
  color: var(--wp--preset--color--contrast-2);
  opacity: 0.6;
}

.cyb-field-help {
  display: block;
  margin-top: 6px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--contrast-2);
}

/* Le submit CF7 est un <input>, pas un wp-element-button : on réplique
   le style bouton défini dans theme.json (elements.button). */
.cyb-form input[type="submit"] {
  padding: 14px 22px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  border: none;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.cyb-form input[type="submit"]:hover {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 85%, white);
}

.cyb-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--accent);
}

.cyb-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--wp--preset--color--border);
  font-size: 0.85rem;
}

.cyb-form .wpcf7 form.invalid .wpcf7-response-output,
.cyb-form .wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--wp--preset--color--accent);
}

.cyb-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--secondary);
}

.cyb-form-rgpd {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--wp--preset--color--contrast-2);
}

/* ---------- Portrait (landing audit GEO) ---------- */

.cyb-portrait img {
  border: 1px solid var(--wp--preset--color--border);
}