/* ============================================================
   C2i info — Librairie PREMIUM partagée (méthode carrée)
   Classes réutilisables posées sur des blocs Divi NATIFS (via cssClass).
   Chargé GLOBALEMENT (functions.php, hors is_page) → toutes les pages V5.
   Couleurs : var(--c2i-*) (définis :root dans c2i-v3.css) — déployé FTP,
   donc PAS de validation DiviOps (la règle « hex only » ne vise que le
   contenu poussé via DiviOps, cf c2i-premium = stylesheet, pas module attr).
   Date : 2026-06-29
   ============================================================ */

/* ---------- 1. Luminous card (fake glass — catch-light gradient + bordure or) ----------
   Pattern mémoire feedback_backdrop_filter_uniform_bg : pas de blur sur fond uni,
   on simule la lumière par gradients superposés + inset gold edge. */
.c2i-lumi {
  position: relative;
  background:
    linear-gradient(150deg, rgba(90, 156, 255, .08), transparent 46%),
    radial-gradient(ellipse 75% 55% at 72% 16%, rgba(255, 90, 74, .10), transparent 62%),
    linear-gradient(180deg, var(--c2i-paper), var(--c2i-bg));
  border: 1px solid var(--c2i-line-2);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(232, 193, 120, .06),
    0 30px 70px -42px rgba(0, 0, 0, .72);
}

/* ---------- 2. Hover lift (translateY + bordure or + ombre) ----------
   cf .tcard:hover de la home. Posée avec .c2i-lumi sur cartes interactives. */
.c2i-lift {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1),
              border-color .35s ease,
              box-shadow .35s ease;
  will-change: transform;
}
.c2i-lift:hover {
  transform: translateY(-5px);
  border-color: var(--c2i-gold);
  box-shadow:
    inset 0 0 0 1px rgba(232, 193, 120, .10),
    0 26px 56px -28px rgba(0, 0, 0, .80);
}

/* ---------- 3. Glow doux (badges, portrait fondateur) ---------- */
.c2i-glow {
  box-shadow:
    0 0 0 1px rgba(232, 193, 120, .22),
    0 18px 50px -18px rgba(232, 193, 120, .26);
}

/* ---------- 4. Barre or top révélée au hover (cartes valeurs) ---------- */
.c2i-topbar {
  overflow: hidden;
}
.c2i-topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c2i-gold), var(--c2i-red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.c2i-topbar:hover::before {
  transform: scaleX(1);
}

/* ---------- 5. Carte stat (chiffres) — centrage + chiffre XL ---------- */
.c2i-stat {
  text-align: center;
}
.c2i-stat [data-c2i-count] {
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. Photo encadrée (portrait, badges) ---------- */
.c2i-photo {
  border-radius: 16px;
  overflow: hidden;
}
.c2i-photo img {
  border-radius: 16px;
  display: block;
}

/* ---------- 7. Soulignement or hero (.c2i-uline) — anime au chargement ----------
   Above-the-fold : pas besoin d'IntersectionObserver, animation CSS différée. */
.c2i-uline {
  position: relative;
  display: inline;
}
.c2i-uline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: .10em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c2i-gold), transparent 92%);
  transform: scaleX(0);
  transform-origin: left;
  opacity: .9;
  animation: c2iUlineIn 1.1s 1.5s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes c2iUlineIn {
  to { transform: scaleX(1); }
}

/* ---------- 7bis. Emphase éditoriale or/vert (em.gold / em.green) ----------
   Globalise les variantes jusque-là définies seulement dans le CSS page de la home,
   donc rendues en rouge ailleurs. Conserve Instrument Serif italic hérité de c2i-v3. */
em.gold { color: var(--c2i-gold); }
em.green { color: var(--c2i-green); }

/* ---------- 7ter. Lien interne contextuel (maillage SEO) ----------
   !important : la couleur de lien Divi/Customizer cible `a` avec une forte
   spécificité (sortait en indianred) — on impose la teinte or de la charte. */
.c2i-ilink,
.c2i-native .c2i-ilink {
  color: var(--c2i-gold) !important;
  text-decoration: underline;
  text-decoration-color: rgba(232, 193, 120, .45);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .25s ease, color .25s ease;
}
.c2i-ilink:hover,
.c2i-native .c2i-ilink:hover {
  color: var(--c2i-ink) !important;
  text-decoration-color: var(--c2i-gold);
}

/* ---------- 8bis. Kit de page portée V5 (socle générique) ----------
   Regroupe les composants identiques répétés sur les pages portées V5
   (reset, container, eyebrow, uline, btn, crumb, hero/final shell,
   section/sec-head, faq, coords, foot-bot). Scope : .c2i-page, à ajouter
   sur le wrapper externe de chaque page EN PLUS de sa classe existante
   (.c2i-ap, .c2i-cybersecurite, etc.). Alias tokens courts (--bg, --ink…)
   pour que le CSS spécifique restant dans chaque fichier de page (qui les
   référence sans préfixe) continue de fonctionner sans être réécrit.
   Restent volontairement PAGE-SPÉCIFIQUE (varient par page) : h1, teinte
   des gradients hero::before/final::before, couleur final h2 em.
   Vérifié identique sur 218/219/220/221/222 (cybersecurite/cloud/
   infrastructure/telecom/sauvegarde) — 2026-07-01. */
.c2i-page {
  --bg: var(--c2i-bg); --bg-2: var(--c2i-bg-2); --bg-3: var(--c2i-bg-3); --paper: var(--c2i-paper);
  --ink: var(--c2i-ink); --ink-2: var(--c2i-ink-2); --muted: var(--c2i-muted);
  --line: var(--c2i-line); --line-2: var(--c2i-line-2);
  --red: var(--c2i-red); --red-dk: var(--c2i-red-dk); --gold: var(--c2i-gold); --gold-dk: var(--c2i-gold-dk);
  --green: var(--c2i-green); --blue: var(--c2i-blue);
  --serif: var(--c2i-serif); --mono: var(--c2i-mono); --display: var(--c2i-display);

  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02", "cv11";
  scroll-behavior: smooth;
}
.c2i-page * { box-sizing: border-box; }
.c2i-page img { display: block; max-width: 100%; }
.c2i-page a { color: inherit; text-decoration: none; }
.c2i-page button { font-family: inherit; }
.c2i-page ::selection { background: #e65c4f; color: #fff; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }

.c2i-page .container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

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

.c2i-page .uline { position: relative; white-space: nowrap; }
.c2i-page .uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .10em; background: var(--gold); opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .5s; }
.c2i-page .in .uline::after { transform: scaleX(1); }

.c2i-page .btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; font-family: var(--display); font-size: 13px; font-weight: 600; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; letter-spacing: -.005em; transition: all .2s; text-decoration: none; }
.c2i-page .btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.c2i-page .btn.cta { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 6px 24px -8px rgba(255, 90, 74, .5); }
.c2i-page .btn.cta:hover { background: #ff7062; border-color: #ff7062; color: #fff; box-shadow: 0 10px 32px -8px rgba(255, 90, 74, .7); transform: translateY(-1px); }
.c2i-page .btn .arr { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 0; font-weight: 400; transition: transform .2s; }
.c2i-page .btn:hover .arr { transform: translateX(4px); }
.c2i-page .btn.lg { padding: 15px 26px; font-size: 15px; }

.c2i-page .crumb { padding: 18px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.c2i-page .crumb a { color: var(--ink-2); transition: color .15s; }
.c2i-page .crumb a:hover { color: var(--gold); }
.c2i-page .crumb .sep { margin: 0 10px; color: var(--line-2); }
.c2i-page .crumb .cur { color: var(--gold); }

.c2i-page .hero { padding: 60px 0 69px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.c2i-page .hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(245, 239, 226, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 239, 226, .022) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 80% at 60% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 40%, #000 30%, transparent 90%);
}
.c2i-page .hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: .62fr .38fr; gap: 64px; align-items: center; }
.c2i-page .hero .eyebrow { margin-bottom: 24px; }
.c2i-page .lede { font-family: var(--display); font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 32px; font-weight: 400; max-width: 560px; }
.c2i-page .lede b { color: var(--ink); font-weight: 600; }
.c2i-page .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.c2i-page .section { padding: 72px 0; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.c2i-page .section.alt { background: var(--bg-2); }
.c2i-page .section.deep { background: var(--bg-3); }
.c2i-page .sec-head { display: grid; grid-template-columns: .5fr .5fr; gap: 48px; align-items: end; margin-bottom: 52px; }
.c2i-page .sec-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 760px; margin: 0 auto 52px; }
.c2i-page .sec-head .ix { margin-bottom: 16px; }
.c2i-page .sec-head h2 { font-family: var(--display); font-size: 46px; line-height: 1.04; letter-spacing: -.035em; font-weight: 600; margin: 0; color: var(--ink); text-wrap: pretty; }
.c2i-page .sec-head h2 em { font-family: var(--serif); font-style: italic; color: var(--red); font-weight: 400; }
.c2i-page .sec-head h2 em.gold { color: var(--gold); }
.c2i-page .sec-head h2 em.green { color: var(--green); }
.c2i-page .sec-head p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 500px; }
.c2i-page .sec-head.center p { margin-left: auto; margin-right: auto; }

.c2i-page .faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.c2i-page .faq details { border-bottom: 1px solid var(--line-2); }
.c2i-page .faq summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); position: relative; transition: color .2s; }
.c2i-page .faq summary::-webkit-details-marker { display: none; }
.c2i-page .faq summary:hover { color: var(--gold); }
.c2i-page .faq summary .pm { position: absolute; right: 0; top: 26px; width: 22px; height: 22px; }
.c2i-page .faq summary .pm::before, .c2i-page .faq summary .pm::after { content: ""; position: absolute; background: var(--gold); transition: transform .3s, opacity .3s; }
.c2i-page .faq summary .pm::before { top: 10px; left: 0; width: 22px; height: 2px; }
.c2i-page .faq summary .pm::after { top: 0; left: 10px; width: 2px; height: 22px; }
.c2i-page .faq details[open] summary .pm::after { transform: rotate(90deg); opacity: 0; }
.c2i-page .faq details[open] summary { color: var(--gold); }
.c2i-page .faq .ans { padding: 0 48px 28px 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 760px; }
.c2i-page .faq .ans b { color: var(--ink); font-weight: 600; }
.c2i-page .faq .ans em { font-family: var(--serif); font-style: italic; color: var(--gold); font-weight: 400; font-size: 1.05em; }

.c2i-page .final { padding: 78px 0; text-align: center; background: var(--bg); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.c2i-page .final::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(245, 239, 226, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 239, 226, .025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
}
.c2i-page .final .container { position: relative; z-index: 2; }
.c2i-page .final .ix { margin-bottom: 22px; justify-content: center; }
.c2i-page .final > .container > p { font-family: var(--display); font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 600px; margin: 0 auto 36px; }
.c2i-page .final .ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.c2i-page .coords { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }
.c2i-page .coords b { color: var(--ink); font-weight: 600; }
.c2i-page .coords .sep { color: var(--line-2); }
.c2i-page .foot-bot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); }

@media (max-width: 980px) {
  .c2i-page .container { padding: 0 24px; }
  .c2i-page .hero { padding: 45px 0 51px; }
  .c2i-page .hero .container { grid-template-columns: 1fr; gap: 32px; }
  .c2i-page .sec-head { grid-template-columns: 1fr; gap: 32px; }
  .c2i-page .sec-head h2 { font-size: 34px; }
}
@media (max-width: 720px) {
  .c2i-page .sec-head h2 { font-size: 28px; }
  .c2i-page .faq summary { font-size: 17px; }
}
@media (max-width: 480px) {
  .c2i-page .container { padding: 0 18px; }
  .c2i-page .lede { font-size: 16px; }
}

/* ---------- 8. Accessibilité — réduction de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .c2i-lift,
  .c2i-topbar::before {
    transition: none;
  }
  .c2i-uline::after {
    animation: none;
    transform: scaleX(1);
  }
}