/* ============================================================
   VeriVoyage — Theme CSS Central
   Modifier CE FICHIER UNIQUEMENT pour changer palette / typos
   Tous les HTML importent ce fichier via <link>
   Version : 1.0 — 07/04/2026
   ============================================================ */

/* POLICES */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap");

/* VARIABLES GLOBALES */
:root {
  /* Marine — header, CTA, sections sombres */
  --marine  : #0A111F;
  --marine2 : #162235;
  --marine3 : #050a14;

  /* Or/Gold — accent RS, badges, eyebrow */
  --or      : #C5A059;
  --or2     : #D4B67C;
  --or3     : #F9F7F2;
  --or-b    : rgba(197,160,89,.25);
  --gold    : #C5A059;
  --gold2   : #D4B67C;

  /* Turquoise — CTA secondaires, succès */
  --turq    : #2A9D8F;
  --turq2   : #3bbcad;
  --turq3   : #E0F5F3;

  /* Alertes */
  --alert   : #E76F51;
  --alert3  : #FEF0EB;

  /* Fonds — Sand palette */
  --fond    : #F9F7F2;
  --fond2   : #F1EDE4;
  --blanc   : #fff;
  --bg      : #F9F7F2;
  --bg2     : #F1EDE4;
  --bg3     : #fff;
  --panel   : #fff;
  --panel2  : #F9F7F2;

  /* Texte */
  --ink     : #0A111F;
  --ink2    : #334155;
  --ink3    : #64748B;
  --ink4    : #94A3B8;

  /* Bordures */
  --bord    : #E2E8F0;
  --bord2   : #CBD5E0;

  /* Statuts */
  --ok-bg   : #D1FAE5;
  --ok-txt  : #065F46;
  --warn-bg : #FEF3C7;
  --warn-txt: #92400E;
  --bad-bg  : #FEE2E2;
  --bad-txt : #991B1B;
  --blue-bg : #DBEAFE;
  --blue-txt: #1e40af;

  /* Typographies */
  --fs : "Plus Jakarta Sans", -apple-system, sans-serif;
  --f  : "Cormorant Garamond", Georgia, serif;
  --fm : "Fira Code", "Courier New", monospace;

  /* Misc */
  --r  : 14px;
}

/* BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--fs);
  background: var(--fond);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   CLASSES UTILITAIRES PARTAGEES
   ============================================================ */

/* Titres de sections */
.sec-title {
  font-family: var(--f);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--marine);
  margin-bottom: 10px;
}
.sec-ey {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 10px;
}
.sec-sub {
  font-size: .95rem;
  color: var(--ink3);
  line-height: 1.75;
  max-width: 580px;
}

/* Badge Reality Score */
.rs-chip {
  background: var(--or3);
  color: var(--gold);
  border: 1px solid rgba(197,160,89,.2);
  border-radius: 20px;
  padding: 3px 9px;
  font-family: var(--fm);
  font-size: .72rem;
  font-weight: 700;
}

/* Logo */
.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-name {
  font-family: var(--f);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.logo-name em { color: var(--gold); font-style: normal; }
.logo-tag {
  font-size: 9px;
  color: rgba(255,255,255,.4);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Dot live animé */
.dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  animation: vv-blink 2s infinite;
  flex-shrink: 0;
}
@keyframes vv-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes vv-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes vv-spin  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Toast notification */
.vv-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--marine);
  color: #fff;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(10,17,31,.3);
}
.vv-toast.show { transform: translateX(-50%) translateY(0); }

/* Eyebrow badge */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(197,160,89,.15);
  border: 1px solid rgba(197,160,89,.35);
  color: var(--gold2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 30px;
  padding: 5px 14px;
}

/* Bouton primaire */
.btn-primary {
  background: var(--marine);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fs);
  transition: all .2s;
}
.btn-primary:hover { background: var(--marine2); transform: translateY(-1px); }

/* Bouton gold */
.btn-gold {
  background: var(--gold);
  color: var(--marine);
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fs);
  transition: all .2s;
}
.btn-gold:hover { background: var(--gold2); transform: translateY(-1px); }

/* Card standard */
.vv-card {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 24px;
  transition: box-shadow .2s;
}
.vv-card:hover { box-shadow: 0 4px 20px rgba(10,17,31,.08); }

/* Valeur mono (chiffres, RS) */
.vv-val {
  font-family: var(--fm);
  font-weight: 700;
  color: var(--marine);
}

/* Section sombre (fond marine) */
.section-dark {
  background: var(--marine);
  color: #fff;
}
.section-dark .sec-title { color: #fff; }
.section-dark .sec-sub   { color: rgba(255,255,255,.7); }

/* =========================================================
   PATCH SÉCURITÉ ANTI-OVERFLOW MOBILE (CTO VETO)
   Ajouté le 11/04/2026 — Gemini CTO
   ========================================================= */

/* 1. Verrouillage global — empêche le site de flotter de gauche à droite */
html, body {
  overflow-x: hidden;
  width: 100vw;
  max-width: 100%;
}

@media (max-width: 768px) {

  /* 2. Fix Header — forcer les éléments à rétrécir proprement */
  nav {
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-logo, .nav-name, .logo-name, .logo-tag {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3. Fix Search Card & Formulaires — contraindre la largeur */
  .form-row, .form-cta, .search-card {
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  .form-row input,
  .form-row select,
  .form-cta input,
  input, select, textarea {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* 4. Fix Modal Circuit — forcer le retour à la ligne des textes longs */
  .modal-box, .modal-body, .modal-card {
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .etape-notes,
  .circuit-annotation,
  .m-annot,
  .m-note,
  .modal-body p,
  .modal-body span,
  .modal-body div {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* 5. Fix général — tous les flex enfants acceptent de rétrécir */
  .hdr, .hero, .main-layout,
  .circuits-grid, .cc, .cc-body,
  .search-row, .dest-tabs {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}