/* css/theme_horloger_marin.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Thème "Horloger marin" — Session D 2026-04-29 (v2)
 *
 * v2 — correction typo bandeau : font-family forcée explicitement sur
 * header h1 et header p pour que la cascade serif (Cormorant) s'applique
 * proprement, indépendamment des règles de spm.css.
 *
 * Positionnement : horloger de précision, épris du monde maritime.
 * Atmosphère : atelier d'horloger français contemplant l'océan.
 * Palette : ivoire chaud (papier marin), bleu marine profond (encre), laiton
 *           (accent horloger), bleu-gris pâle (atmosphère hero).
 * Typographie : Cormorant Garamond (titres, italiques élégants) + Inter (corps).
 *
 * Construit par-dessus spm.css (socle) en s'inspirant de la mécanique
 * d'inversion de theme_googlooking.css. N'altère pas la sémantique HTML.
 * ─────────────────────────────────────────────────────────────────────────────
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Inter:wght@400;500;600&display=swap');

:root{
  color-scheme: light;

  /* Typographie : serif horloger pour titres, sans-serif technique pour corps.
     Double serif en cascade : si Cormorant Garamond échoue à charger depuis
     Google Fonts (CSP, réseau, etc.), Playfair Display prend le relais. Tous
     deux sont serif élégants ; aucun risque de retomber en sans-serif. */
  --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Cormorant Garamond", "Playfair Display", "Cormorant", Georgia, "Times New Roman", serif;

  /* ── Palette horloger-marin ──────────────────────────────────────────────── */
  /* Ivoire chaud (papier marin, parchemin) */
  --hm-bg-0:      #faf7f0;   /* base claire */
  --hm-bg-1:      #f1ece0;   /* ivoire chaud légèrement plus dense */
  --hm-bg-hero-0: #f4f3ed;   /* ivoire neutre du hero */
  --hm-bg-hero-1: #e8edf2;   /* bleu-gris pâle (suggère la mer sans la dessiner) */

  --hm-surface:    rgba(255,255,255,0.88);
  --hm-surface-2:  rgba(255,255,255,0.74);

  /* Encre marine (titres, corps) */
  --hm-ink:    #0d2336;   /* bleu nuit profond — encre principale */
  --hm-ink-2:  #2d4761;   /* bleu ardoise — corps */
  --hm-ink-3:  #6b7e92;   /* gris-bleu — secondaire */

  /* Bleus marine (accent) */
  --hm-navy:    #0d2336;
  --hm-navy-2:  #1a4d7a;   /* bleu profond pour CTA */
  --hm-navy-3:  #2d6094;   /* bleu vif pour liens */

  /* Laiton (accent horloger) */
  --hm-brass:   #a87c3f;   /* laiton mat */
  --hm-brass-2: #c7a35d;   /* laiton clair pour highlights */
  --hm-brass-3: #d6bd82;   /* laiton très clair */

  /* Cadran : sous-couche ivoire pour le PNG transparent */
  --hm-dial-underlay-0: #f2efe8;
  --hm-dial-underlay-1: #d9d4ca;
  --hm-dial-underlay-2: #c8c2b7;

  /* Compatibilité descendante avec les variables --gl-* utilisées par
     index.php et d'autres pages déjà stylées pour googlooking. Tout sélecteur
     qui lit var(--gl-X, fallback) recevra la valeur horloger-marin. */
  --gl-bg-0:    var(--hm-bg-0);
  --gl-bg-1:    var(--hm-bg-1);
  --gl-surface: var(--hm-surface);
  --gl-surface-2: var(--hm-surface-2);
  --gl-ink:     var(--hm-ink);
  --gl-ink-2:   var(--hm-ink-2);
  --gl-ink-3:   var(--hm-ink-3);
  --gl-navy:    var(--hm-navy);
  --gl-navy-2:  var(--hm-navy-2);
  --gl-brass:   var(--hm-brass);
  --gl-brass-2: var(--hm-brass-2);
  --gl-dial-underlay-0: var(--hm-dial-underlay-0);
  --gl-dial-underlay-1: var(--hm-dial-underlay-1);
  --gl-dial-underlay-2: var(--hm-dial-underlay-2);

  /* Surcharge des variables panneaux de spm.css */
  --panel-bg:     var(--hm-surface-2);
  --panel-bd:     rgba(13, 35, 54, 0.12);
  --panel-shadow: 0 12px 28px rgba(13, 35, 54, 0.08);
}

/* ── Fond général : ivoire chaud avec un voile bleu-gris en bas ─────────── */
body{
  background:
    /* voile horizon (très subtil) */
    linear-gradient(180deg,
      transparent 0%,
      transparent 55%,
      rgba(232, 237, 242, 0.55) 100%),
    /* base ivoire */
    linear-gradient(180deg, var(--hm-bg-0), var(--hm-bg-1));
  color: var(--hm-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
}

/* ── Titres : Cormorant Garamond (force explicite pour garantir la cascade) ─ */
h1, h2, h3,
header h1, header h2, header h3 {
  font-family: var(--font-heading);
  color: var(--hm-ink);
  letter-spacing: 0.005em;
}
h1 { font-weight: 600; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }

/* ── Liens : bleu marine, soulignement subtil au survol ─────────────────── */
a{ color: var(--hm-navy-3); }
a:hover{ color: var(--hm-navy); text-decoration: underline; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(168, 124, 63, 0.22);
  border-radius: 10px;
}

/* ── Header (bandeau) : surface claire, séparation laiton subtile ───────── */
header,
header.site-header{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(13, 35, 54, 0.10);
  box-shadow: 0 12px 24px rgba(13, 35, 54, 0.06);
  border-radius: 18px;
  position: relative;
  overflow: visible;
}
/* Liseré laiton très fin en haut du bandeau — signature horlogère */
header::before,
header.site-header::before{
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(168, 124, 63, 0) 0%,
    rgba(168, 124, 63, 0.55) 50%,
    rgba(168, 124, 63, 0) 100%);
  pointer-events: none;
}

/* ── H1 du bandeau : Cormorant Garamond élégant (correction v3 force max) ── */
/* Sélecteurs ultra-spécifiques (body header h1, .page header h1) + font-family
   en valeur explicite (pas via variable CSS, pour s'affranchir d'une éventuelle
   redéfinition de --font-heading par un autre CSS chargé après). */
header h1,
header.site-header h1,
body header h1,
body header.site-header h1,
.page header h1,
.page header.site-header h1{
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif !important;
  color: var(--hm-ink) !important;
  font-weight: 500 !important;
  font-size: 2.1rem !important;
  letter-spacing: -0.005em !important;
  line-height: 1.15 !important;
  margin: 0 0 .35rem 0 !important;
}

/* ── Sous-titre (baseline) : Inter italique discret, contraste avec le H1 ── */
header p{
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--hm-ink-2);
  opacity: 1;
  letter-spacing: 0.005em;
  margin: 0;
}

/* Logo blanc → lisible sur fond clair */
header .brand-logo img{
  filter: invert(1) brightness(0.15) contrast(1.2);
  opacity: 0.85;
}

/* ── Navigation : icônes en pastilles ivoire avec contour laiton au survol ── */
.main-nav a{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(13, 35, 54, 0.14);
  color: var(--hm-ink);
}
.main-nav a.nav-ico{
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(13, 35, 54, 0.16);
  box-shadow: 0 8px 18px rgba(13, 35, 54, 0.06);
  color: var(--hm-navy-2);
}
.main-nav a.nav-ico:hover{
  border-color: rgba(168, 124, 63, 0.55);
  box-shadow: 0 12px 24px rgba(13, 35, 54, 0.08), 0 0 0 3px rgba(168, 124, 63, 0.10);
}
.main-nav a.nav-ico[aria-current="page"]{
  border-color: rgba(168, 124, 63, 0.75);
  box-shadow: 0 12px 24px rgba(13, 35, 54, 0.08), 0 0 0 4px rgba(168, 124, 63, 0.16);
  background: rgba(255, 251, 244, 0.95);
}
.main-nav a.nav-ico svg{ opacity: 1; }
.main-nav a:hover{
  background: rgba(255,255,255,0.90);
  border-color: rgba(13, 35, 54, 0.22);
}
.main-nav a[aria-current="page"]{
  border-color: rgba(168, 124, 63, 0.55);
  box-shadow: 0 0 0 3px rgba(168, 124, 63, 0.12);
}

/* ── Cards : ivoire à 88%, bordure fine bleu marine très transparente ───── */
.card{
  background: var(--hm-surface);
  border: 1px solid var(--panel-bd);
  box-shadow: var(--panel-shadow);
  backdrop-filter: none;
  border-radius: 18px;
}

.card p{
  color: var(--hm-ink-2);
  font-family: var(--font-body);
}

.card h2{
  color: var(--hm-ink) !important;
  font-family: var(--font-heading);
}
.card h2::after{
  opacity: 0.6;
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, rgba(168, 124, 63, 0.75), rgba(168, 124, 63, 0));
}

/* Force complémentaire pour les h2 imbriqués dans les sections principales,
   au cas où une cascade hostile (CSS hardcodé d'une page) viendrait colorer
   en orange/rouge/cyan. v2 — ajout 2026-04-29 pour about/contact/oem. */
section.card h2,
main .card h2,
main section h2{
  color: var(--hm-ink) !important;
}

/* ── Cartes secondaires (proof-item, usage-card, mini-card) ──────────────── */
.value-card,
.use-card,
.mini-card,
.proof-item,
.usage-card,
.theme-swatch,
.dial-swatch{
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(13, 35, 54, 0.10);
  box-shadow: 0 8px 18px rgba(13, 35, 54, 0.05);
  backdrop-filter: none;
}

/* marketing_ui.css force les titres .proof-item h3 en blanc — on rétablit
   en encre marine + icônes lisibles */
.proof-item h3{
  color: var(--hm-ink) !important;
  font-family: var(--font-heading);
  font-weight: 600;
}
.proof-item h3 svg,
.proof-item h3 svg *{
  stroke: var(--hm-navy-2) !important;
  fill: none !important;
}
.proof-item p{
  color: var(--hm-ink-2);
}

/* ── Usage cards : titres serif, icônes laiton ─────────────────────────── */
.usage-title{
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--hm-ink);
}
.usage-ico{
  border: 1px solid rgba(168, 124, 63, 0.40) !important;
  background: rgba(255, 251, 244, 0.85) !important;
}
.usage-ico svg{
  stroke: var(--hm-navy-2) !important;
}
.usage-card p{
  color: var(--hm-ink-2);
  opacity: 1;
}

/* ── Badge port : ivoire avec point laiton ────────────────────────────── */
.header-homeport{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(13, 35, 54, 0.18);
  color: var(--hm-ink-2);
}
.header-homeport-dot{
  background: var(--hm-brass);
  box-shadow: 0 0 0 3px rgba(255, 251, 244, 0.85);
}

/* ── Boutons standards ─────────────────────────────────────────────────── */
.btn,
button.btn{
  border: 1px solid rgba(13, 35, 54, 0.22);
  background: rgba(255,255,255,0.88);
  color: var(--hm-ink);
  box-shadow: 0 8px 18px rgba(13, 35, 54, 0.06);
  font-family: var(--font-body);
}
.btn:hover,
button.btn:hover{
  filter: none;
  border-color: rgba(168, 124, 63, 0.55);
  box-shadow: 0 12px 24px rgba(13, 35, 54, 0.08), 0 0 0 3px rgba(168, 124, 63, 0.12);
}

/* marketing_ui.css force la couleur en blanc !important — on rétablit ── */
.btn.btn-premium,
.btn.btn-premium:visited,
.btn.btn-premium:hover,
.btn.btn-premium:active,
.btn.btn-premium:focus,
.btn.btn-premium:focus-visible,
.btn.btn-ghost,
.btn.btn-ghost:visited,
.btn.btn-ghost:hover,
.btn.btn-ghost:active,
.btn.btn-ghost:focus,
.btn.btn-ghost:focus-visible{
  color: var(--hm-ink) !important;
}

.btn.btn-premium,
.btn.btn-premium:visited{
  border-color: rgba(168, 124, 63, 0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,251,244,0.82));
  color: var(--hm-ink) !important;
}
.btn.btn-premium:hover{
  border-color: rgba(168, 124, 63, 0.75);
  box-shadow: 0 12px 26px rgba(13, 35, 54, 0.10), 0 0 0 3px rgba(168, 124, 63, 0.14);
}
.btn.btn-ghost,
.btn.btn-ghost:visited{
  background: rgba(255,255,255,0.55);
  color: var(--hm-ink) !important;
}
.btn.btn-ghost:hover{
  border-color: rgba(168, 124, 63, 0.65);
  box-shadow: 0 0 0 3px rgba(168, 124, 63, 0.12);
}

/* ── Tables : traits marine fins ──────────────────────────────────────── */
th{
  border-bottom-color: rgba(13, 35, 54, 0.14);
  color: var(--hm-ink-3);
  font-family: var(--font-body);
  font-weight: 600;
}
tr:nth-child(even) td{ background: rgba(13, 35, 54, 0.02); }

/* ── Cockpit (démo) : select et messages adaptés au clair ───────────── */
.sim-form select{
  background: rgba(255,255,255,0.92);
  color: var(--hm-ink);
  border: 1px solid rgba(13, 35, 54, 0.22);
}
.sim-result,
.sim-error{
  box-shadow: 0 10px 22px rgba(13, 35, 54, 0.08);
}
.sim-result{
  background: rgba(26, 77, 122, 0.08);
  border: 1px solid rgba(26, 77, 122, 0.32);
  color: var(--hm-ink);
}
.sim-result::before{ background: var(--hm-brass); }
.sim-error{
  background: rgba(150, 0, 0, 0.08);
  border: 1px solid rgba(150, 0, 0, 0.22);
}
.sim-error::before{ background: rgba(150, 0, 0, 0.70); }

/* ── Horloge : halo et sous-couche élégants ──────────────────────────── */
.card-clock .dial-wrapper::before{
  width: 108%;
  height: 108%;
  background: radial-gradient(circle at 50% 45%,
      rgba(13, 35, 54, 0.08) 0%,
      rgba(13, 35, 54, 0.04) 34%,
      rgba(13, 35, 54, 0.0) 58%,
      rgba(0, 0, 0, 0) 100%);
  opacity: 0.65;
}
.card-clock .dial-wrapper::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%,
      var(--hm-dial-underlay-0) 0%,
      var(--hm-dial-underlay-1) 58%,
      var(--hm-dial-underlay-2) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(13, 35, 54, 0.12),
    inset 0 18px 30px rgba(0, 0, 0, 0.06);
  z-index: 0;
}
.card-clock .dial-hand,
.card-clock .dial-center{
  background: rgba(13, 35, 54, 0.92);
}

/* Fenêtre coefficient : ivoire avec liseré laiton */
.card-clock .dial-coef,
.demo-clock-block .dial-coef,
.hero .dial-coef{
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(243,239,230,0.88));
  border: 1px solid rgba(168, 124, 63, 0.55);
  color: var(--hm-ink);
  box-shadow: 0 10px 22px rgba(13, 35, 54, 0.10);
  font-family: var(--font-body);
  font-feature-settings: "tnum" 1;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer{
  color: var(--hm-ink-3);
  font-family: var(--font-body);
}
footer strong{ color: var(--hm-ink-2); }

/* ── Theme swatch (settings.php) — preview du thème ─────────────────── */
.theme-swatch-horloger_marin .theme-swatch-preview::before{
  background: linear-gradient(180deg, #faf7f0 0%, #f1ece0 60%, #e8edf2 100%);
}
.theme-swatch-horloger_marin .theme-swatch-preview::after{
  background:
    radial-gradient(circle at 75% 30%, rgba(168, 124, 63, 0.30), transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(26, 77, 122, 0.20), transparent 60%);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px){
  header,
  header.site-header{ padding: 1rem 1rem; }
  .card{ padding: 1rem 1.05rem 1.05rem; }
  header h1,
  header.site-header h1{ font-size: 1.65rem; }
  header p{ font-size: 0.88rem; }
}