/* ============================================================
   C2i info — CSS additionnel global · Design v3 Premium
   À coller dans : WP Admin → Personnaliser → CSS additionnel
   Source : DESIGN.md v3 + Maquettes Design/project/Designs Landing Cybersecurite v4 Premium.html
   Date : 2026-05-28
   ============================================================ */

/* ---------- 1. Polices auto-hébergées (OFL) : Geist + Instrument Serif, woff2 latin + latin-ext ----------
 * Remplace l'@import Google Fonts (22/09/2026 : plus aucun appel à fonts.googleapis.com / fonts.gstatic.com,
 * cf politique de confidentialité page 454). Source : Google Fonts, licences assets/fonts/OFL-*.txt.
 * JetBrains Mono est déclarée dans c2i-v8-fonts.css (chargée sur toutes les pages). */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/geist-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/geist-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- 2. Root tokens (miroir des global colors + variables Divi) ---------- */
:root {
  --c2i-bg:        #0b1230;
  --c2i-bg-2:      #141c43;
  --c2i-bg-3:      #070b22;
  --c2i-paper:     #1b2454;
  --c2i-ink:       #f5efe2;
  --c2i-ink-2:     #bdb8ab;
  --c2i-muted:     #6e7398;
  --c2i-line:      #212a55;
  --c2i-line-2:    #323c6a;
  --c2i-red:       #ff5a4a;
  --c2i-red-dk:    #c2342a;
  --c2i-gold:      #e8c178;
  --c2i-gold-dk:   #a37422;
  --c2i-green:     #6ddca0;
  --c2i-blue:      #5a9cff;

  /* Rythme vertical sections : valeur de base (≈ -25% vs maquette 96px).
     Convention pour les prochains builds — les pages portées 30/05 ont
     leurs valeurs scalées en littéraux (cf Scripts/scale_section_padding.js). */
  --c2i-sec-py: 72px;

  --c2i-display: 'Geist', system-ui, -apple-system, sans-serif;
  --c2i-serif:   'Instrument Serif', Georgia, serif;
  --c2i-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- 3. Body — fond navy + cream + Geist + noise overlay ---------- */
html, body {
  background: var(--c2i-bg);
  color: var(--c2i-ink);
  font-family: var(--c2i-display);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","ss02","cv11";
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#page-container { position: relative; z-index: 2; }

::selection { background: var(--c2i-red); color: #fff; }

/* ---------- 4. Italics éditoriaux globaux → Instrument Serif ---------- */
em, .et_pb_text em, .et_pb_module em, h1 em, h2 em, h3 em, h4 em {
  font-family: var(--c2i-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c2i-red);
}
.case em, .case-section em { color: var(--c2i-gold); }
.result.ok em { color: var(--c2i-green); }

/* utilitaire .serif-i */
.serif-i { font-family: var(--c2i-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* ---------- 5. Eyebrow utilitaire (.c2i-eyebrow) ---------- */
.c2i-eyebrow {
  font-family: var(--c2i-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c2i-red);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.c2i-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--c2i-red);
}
.c2i-eyebrow.gold { color: var(--c2i-gold); }
.c2i-eyebrow.gold::before { background: var(--c2i-gold); }

/* ---------- 6. Bouton CTA hover translate + shadow ---------- */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button {
  transition: all .2s ease;
  box-shadow: 0 6px 24px -8px rgba(255, 90, 74, .5);
}
.et_pb_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px -8px rgba(255, 90, 74, .7);
}

/* Suffixe arrow Instrument Serif (ajouter classe .c2i-arr au bouton) */
.c2i-arr::after {
  content: " →";
  font-family: var(--c2i-serif);
  font-style: italic;
  font-size: 1.4em;
  line-height: 0;
  font-weight: 400;
  margin-left: 6px;
  transition: transform .2s;
  display: inline-block;
}
.c2i-arr:hover::after { transform: translateX(4px); }

/* ---------- 7. Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* ---------- 8. Keyframes premium ---------- */
@keyframes c2i-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}
@keyframes c2i-ring-pulse {
  0%   { opacity: 1; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2); }
}
@keyframes c2i-scan {
  0%   { top: 0%; }
  100% { top: 100%; }
}
@keyframes c2i-spin { to { transform: rotate(360deg); } }
@keyframes c2i-highlight {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.c2i-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c2i-green);
  box-shadow: 0 0 12px var(--c2i-green);
  display: inline-block;
  animation: c2i-pulse 2.2s ease-in-out infinite;
}
.c2i-pulse-dot.red { background: var(--c2i-red); box-shadow: 0 0 12px var(--c2i-red); }
.c2i-pulse-dot.gold { background: var(--c2i-gold); box-shadow: 0 0 12px var(--c2i-gold); }

/* Underline gold semi animé (titres hero) — wrapper .c2i-underline */
.c2i-underline {
  position: relative;
  display: inline-block;
}
.c2i-underline::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: 8px;
  height: 14px;
  background: rgba(232, 193, 120, .32);
  z-index: -1;
  transform-origin: left;
  animation: c2i-highlight 1.4s cubic-bezier(.2,.7,.2,1) .4s both;
}

/* ---------- 9. Liens nav underline animé coral ---------- */
.et_pb_menu .et-menu li a {
  font-family: var(--c2i-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--c2i-ink-2);
  position: relative;
  transition: color .15s;
}
.et_pb_menu .et-menu li a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 1px;
  background: var(--c2i-red);
  transition: right .25s ease;
}
.et_pb_menu .et-menu li a:hover,
.et_pb_menu .et-menu li.current-menu-item a {
  color: var(--c2i-ink);
}
.et_pb_menu .et-menu li a:hover::after,
.et_pb_menu .et-menu li.current-menu-item a::after {
  right: 0;
}

/* ---------- 10. Nav sticky blur ---------- */
header#main-header,
.et-l--header .et_pb_section_0 {
  background: rgba(11, 18, 48, .85) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--c2i-line);
}

/* ---------- 11. Surfaces ---------- */
.et_pb_section { background: var(--c2i-bg); }
.et_pb_section.c2i-bg-2 { background: var(--c2i-bg-2); }
.et_pb_section.c2i-bg-3 { background: var(--c2i-bg-3); }

/* Bordure section discrète */
.et_pb_section + .et_pb_section { border-top: 1px solid var(--c2i-line); }

/* ---------- 12. Containers — largeur 1240 / padding 48 ---------- */
.et_pb_row { max-width: 1240px; padding: 0 48px; }
@media (max-width: 980px) {
  .et_pb_row { padding: 0 24px; }
}

/* ---------- 12bis. Pages porter full-bleed (TOUTES les pages) ----------
   Toutes les pages portées (maquette Claude Design) ont un wrapper
   .c2i-* dont le .container interne gère largeur (1240) + padding (48).
   On neutralise le clamp .et_pb_row global ci-dessus pour que les fonds
   de section atteignent les bords écran. Sinon : rows bloquées à 1240px
   → body navy visible en gouttières (bandes sombres latérales).
   Généralisé depuis le fix accueil (30/05) → 13 wrappers de page.
   ⚠ NE PAS inclure .c2i-header-tb / .c2i-footer-tb : header & footer
   gardent leur propre layout TB. Tout nouveau wrapper de page = l'ajouter
   ici (ou tagger ses sections .c2i-port-section, toujours pris en charge).
   ⚠ Services (27) est NATIF depuis le 04/07 mais son hero garde un divi/code
   enveloppé dans .c2i-services (panneau .svc-nav) → :not(.c2i-native) sinon
   le hero perd conteneur 1240/48 + padding 76/66 (bug vu 16/09, v4.10.8).
   Test-cyber (197) garde volontairement le full-bleed sur sa section quiz. */
.c2i-port-section,
.c2i-port-section .et_pb_row,
.c2i-port-section .et_pb_column,
.et_pb_section:has(.c2i-accueil),
.et_pb_section:has(.c2i-accueil) .et_pb_row,
.et_pb_section:has(.c2i-accueil) .et_pb_column,
.et_pb_section:not(.c2i-native):has(.c2i-services),
.et_pb_section:not(.c2i-native):has(.c2i-services) .et_pb_row,
.et_pb_section:not(.c2i-native):has(.c2i-services) .et_pb_column,
.et_pb_section:has(.c2i-ap),
.et_pb_section:has(.c2i-ap) .et_pb_row,
.et_pb_section:has(.c2i-ap) .et_pb_column,
.et_pb_section:has(.c2i-cybersecurite),
.et_pb_section:has(.c2i-cybersecurite) .et_pb_row,
.et_pb_section:has(.c2i-cybersecurite) .et_pb_column,
.et_pb_section:has(.c2i-cloud),
.et_pb_section:has(.c2i-cloud) .et_pb_row,
.et_pb_section:has(.c2i-cloud) .et_pb_column,
.et_pb_section:has(.c2i-infrastructure),
.et_pb_section:has(.c2i-infrastructure) .et_pb_row,
.et_pb_section:has(.c2i-infrastructure) .et_pb_column,
.et_pb_section:has(.c2i-telecom),
.et_pb_section:has(.c2i-telecom) .et_pb_row,
.et_pb_section:has(.c2i-telecom) .et_pb_column,
.et_pb_section:has(.c2i-sauvegarde),
.et_pb_section:has(.c2i-sauvegarde) .et_pb_row,
.et_pb_section:has(.c2i-sauvegarde) .et_pb_column,
.et_pb_section:has(.c2i-zone-intervention),
.et_pb_section:has(.c2i-zone-intervention) .et_pb_row,
.et_pb_section:has(.c2i-zone-intervention) .et_pb_column,
.et_pb_section:has(.c2i-mentions-legales),
.et_pb_section:has(.c2i-mentions-legales) .et_pb_row,
.et_pb_section:has(.c2i-mentions-legales) .et_pb_column,
.et_pb_section:has(.c2i-conditions-generales),
.et_pb_section:has(.c2i-conditions-generales) .et_pb_row,
.et_pb_section:has(.c2i-conditions-generales) .et_pb_column,
.et_pb_section:has(.c2i-contact),
.et_pb_section:has(.c2i-contact) .et_pb_row,
.et_pb_section:has(.c2i-contact) .et_pb_column,
.et_pb_section:has(.c2i-test-cyber),
.et_pb_section:has(.c2i-test-cyber) .et_pb_row,
.et_pb_section:has(.c2i-test-cyber) .et_pb_column {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- 12ter. Pages NATIVES (build V5 Divi natif — page 254 → home) ----------
   Contrairement aux pages portées (12bis), la row Divi EST le conteneur
   (pas de wrapper .container interne). On rétablit donc le conteneur maquette
   (1240 / 48-24-18, centré) avec une spécificité (0,2,0) qui bat Divi core
   `.et_pb_row:not([class*=et_flex_column])` (sinon var(--content-max-width)=1080).
   ⚠ NE PAS tagger ces sections .c2i-port-section (12bis les repasserait full-bleed).
   Le fond de section reste pleine largeur (section non contrainte) ; seule la row l'est. */
.c2i-native .et_pb_row {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 48px;
}
@media (max-width: 980px) { .c2i-native .et_pb_row { padding: 0 24px; } }
@media (max-width: 480px) { .c2i-native .et_pb_row { padding: 0 18px; } }

/* ---------- 13. Anti-patterns ---------- */
.et_pb_button:not(.c2i-keep-icon)::after { content: none !important; }   /* enlever icône Divi par défaut */
* { border-radius: 0; }                                                  /* angles vifs partout */
.et_pb_button { border-radius: 0 !important; }

/* exceptions chips ronds */
.c2i-pulse-dot,
.c2i-chip,
.c2i-ring { border-radius: 50% !important; }
.c2i-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--c2i-line-2);
  background: rgba(11, 18, 48, .6);
  border-radius: 999px !important;
  font-family: var(--c2i-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c2i-muted);
}

/* ---------- 14. Mobile ---------- */
@media (max-width: 980px) {
  body { font-size: 14px; }
}