/* ---------------------------------------------------------------------------
   Pixel Stratégie : feuille de style des pages statiques (générées par
   tools/pages/build.mjs). Reprend le système visuel de /assistant-ia, sorti
   en fichier externe pour être mis en cache d'une page à l'autre.
   --------------------------------------------------------------------------- */

:root {
  --bg: #0B1628;
  --card: #0F1D32;
  --primary: #0062FF;
  --cyan: #00d2ff;
  --txt: #FFFFFF;
  --txt-2: #8BA3C7;
  --line: #1E3A5F;
  --line-soft: rgba(30, 58, 95, .55);
  --surface: #101E34;
  /* Bleu lisible en petit corps sur le navy (6,4:1). Le #0062FF ne passe qu'en
     grand corps, il reste donc réservé aux aplats de boutons. */
  --accent: #4D9BFF;
  --ink-2: #A8BDD8;
  --ink-3: #6E86A6;
  --radius: 14px;

  /* Rythme vertical, mêmes registres que les pages React. */
  --sec: clamp(4rem, 6vw, 6rem);
  --sec-xl: clamp(5.5rem, 8.5vw, 8rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Roboto', system-ui, sans-serif;
  color: var(--txt);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; line-height: 1.2; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* 1280 px, comme le max-w-7xl des pages React : les pages statiques doivent
   s'aligner sur la navigation et sur le reste du site, pas être plus étroites. */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Colonne de lecture. Une seule décision de largeur : celle du conteneur. Les
   enfants ne portent aucun max-width, sinon le texte se retrouve plus étroit que
   sa colonne et paraît décalé vers la gauche au lieu d'être centré. */
.narrow { max-width: 880px; }
.narrow h1, .narrow h2, .narrow h3, .narrow p, .narrow ul, .narrow ol,
.narrow .lead, .narrow .sub, .narrow blockquote { max-width: none; }

/* Colonne de texte à l'intérieur d'une section pleine largeur : même largeur de
   lecture, mais alignée sur le bord gauche de la grille de cartes plutôt que
   centrée, sinon le bloc semble décalé par rapport à la section précédente. */
.wrap > .colonne { max-width: 880px; }
.wrap > .colonne h1, .wrap > .colonne h2, .wrap > .colonne h3,
.wrap > .colonne p, .wrap > .colonne ul, .wrap > .colonne ol,
.wrap > .colonne .lead, .wrap > .colonne .sub { max-width: none; }

/* Refonte du 2026-07-27 : le texte en dégradé est le marqueur le plus
   reconnaissable des interfaces générées. La classe reste en place pour ne pas
   toucher au balisage des 21 pages, mais elle rend une couleur pleine.
   `-webkit-text-fill-color` DOIT repasser à currentColor, sinon le texte reste
   invisible. */
.grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}
.glow-t { text-shadow: none; }

/* ---------- Navigation ---------- */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #0B1628; border-bottom: 1px solid var(--line); }
.site-nav .inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 20px; }
/* Le fichier est un néon sur fond noir : la fusion screen efface ce fond sans
   retoucher l image, ce qui supprime la boîte sombre autour du logo. */
.site-nav .logo img { height: 72px; width: auto; object-fit: contain; mix-blend-mode: screen; margin-left: -12px; }
.site-nav .links { display: none; align-items: center; gap: 28px; }
.site-nav .links a { font-weight: 500; color: #A0A0A0; transition: color .3s; position: relative; text-decoration: none; }
.site-nav .links a:hover { color: #fff; }
.site-nav .links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width .3s; }
.site-nav .links a:hover::after { width: 100%; }
@media (min-width: 940px) { .site-nav .links { display: flex; } }

/* Sous 940 px, les liens passent sous la barre en bande défilante : sans ça, une
   page locale ouverte depuis un téléphone n'offre aucune navigation. */
@media (max-width: 939px) {
  .site-nav { padding-bottom: 0; }
  .site-nav .inner { height: 68px; }
  .site-nav .logo img { height: 58px; margin-left: -10px; }
  .site-nav .mobile-links {
    display: flex; gap: 20px; overflow-x: auto; padding: 0 24px 10px;
    max-width: 1280px; margin: 0 auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav .mobile-links::-webkit-scrollbar { display: none; }
  .site-nav .mobile-links a { color: #A0A0A0; font-size: .88rem; font-weight: 500; white-space: nowrap; text-decoration: none; }
  .site-nav .mobile-links a:hover { color: #fff; }
}
@media (min-width: 940px) { .site-nav .mobile-links { display: none; } }

.btn {
  display: inline-block; background: var(--primary);
  color: #fff; padding: 15px 28px; border-radius: 12px; font-weight: 700;
  font-family: 'Montserrat', sans-serif; letter-spacing: .01em;
  border: 1px solid var(--primary); cursor: pointer; text-decoration: none;
  transition: background .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 8px 24px -8px rgba(0, 98, 255, .7);
}
.btn:hover { background: #0050DD; transform: translateY(-2px); text-decoration: none; box-shadow: 0 12px 28px -10px rgba(0, 98, 255, .75); }
.btn.ghost { background: transparent; border-color: var(--line); box-shadow: none; color: var(--txt); }
.btn.ghost:hover { background: transparent; border-color: var(--accent); transform: translateY(-2px); box-shadow: none; }
.btn.small { padding: 10px 22px; font-size: .88rem; }

/* ---------- Fil d'Ariane ---------- */
/* Dégagement sous la navigation fixe : 80 px de barre sur grand écran,
   68 px plus la bande de liens sous 940 px. */
.crumbs { padding: 104px 0 0; font-size: .82rem; color: var(--txt-2); }
@media (max-width: 939px) { .crumbs { padding-top: 124px; } }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li::after { content: '›'; margin-left: 8px; color: var(--line); }
.crumbs li:last-child::after { content: ''; }
.crumbs a { color: var(--txt-2); }
.crumbs a:hover { color: var(--cyan); }

/* ---------- Sections ---------- */
.hero {
  padding: 34px 0 70px;
  background:
    radial-gradient(900px 460px at 80% -10%, rgba(0, 98, 255, .18), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(0, 210, 255, .08), transparent 60%);
}
.hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 800; max-width: 24ch; }
.hero p.lead { font-size: 1.11rem; color: var(--txt-2); max-width: 60ch; margin: 22px 0 30px; }
/* Même surtitre que le composant Kicker des pages React : un carré cyan et un
   libellé. La pastille arrondie à liseré bleu et lueur interne est retirée. */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 22px;
}
.kicker::before { content: ''; width: 7px; height: 7px; background: var(--cyan); flex: 0 0 7px; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .note { font-size: .85rem; color: var(--txt-2); margin-top: 16px; }

section { padding: var(--sec) 0; }
section.alt { background: var(--surface); }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.95rem); font-weight: 800; margin-bottom: 12px; max-width: 32ch; }
h3 { font-size: 1.08rem; margin-bottom: 8px; }
.sub { color: var(--txt-2); max-width: 66ch; margin-bottom: 38px; }

/* ---------- Texte courant ---------- */
.prose p { color: var(--txt-2); margin-bottom: 18px; font-size: 1.02rem; }
.prose h2 { margin-top: 46px; max-width: none; }
.prose h3 { margin-top: 30px; color: var(--txt); }
.prose ul, .prose ol { color: var(--txt-2); margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--txt); }
.prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9em; color: var(--cyan);
  background: rgba(0, 210, 255, .08); border: 1px solid rgba(0, 210, 255, .22);
  border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.prose ol { list-style: decimal; }
.prose ol li { padding-left: 4px; }
.prose blockquote {
  border: 1px solid var(--line); background: var(--surface);
  padding: 18px 22px; border-radius: 12px; margin: 0 0 22px; color: var(--ink-2);
}
.prose blockquote cite { display: block; margin-top: 8px; font-size: .85rem; color: var(--txt-2); font-style: normal; }
.todo { background: rgba(255, 188, 46, .12); border: 1px solid rgba(255, 188, 46, .45); color: #ffd479; padding: 2px 8px; border-radius: 6px; font-size: .9em; }

/* ---------- Cartes et grilles ---------- */
.grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .grid.c2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .grid.c3 { grid-template-columns: repeat(3, 1fr); } }
/* Même traitement que les cartes des pages React : dégradé sombre, filet bleu,
   soulèvement au survol. */
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .9);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card p { font-size: .94rem; color: var(--txt-2); }
.card ul { margin: 12px 0 0 18px; color: var(--txt-2); font-size: .93rem; }
.card li { margin-bottom: 6px; }

/* ---------- Étapes numérotées ---------- */
.steps { counter-reset: s; display: grid; gap: 24px; }
@media (min-width: 760px) { .steps.c3 { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px 24px; position: relative;
}
.step::before {
  counter-increment: s; content: counter(s); position: absolute; top: -17px; left: 22px;
  width: 36px; height: 36px; border-radius: 10px; background: var(--primary);
  color: #fff; font-weight: 800; font-family: 'Montserrat', sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin: 8px 0; }
.step p { font-size: .92rem; color: var(--txt-2); }

/* ---------- Tarifs ---------- */
.price-row { display: grid; gap: 20px; }
@media (min-width: 760px) { .price-row.c3 { grid-template-columns: repeat(3, 1fr); } }
.price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.price.main { border-color: var(--primary); }
.price .tag { font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: var(--cyan); text-transform: uppercase; font-family: 'Montserrat', sans-serif; }
.price .amount { font-family: 'Montserrat', sans-serif; font-size: 2.1rem; font-weight: 800; margin: 8px 0 2px; }
.price .amount small { font-size: .92rem; font-weight: 500; color: var(--txt-2); }
.price ul { list-style: none; margin: 16px 0 0; }
.price li { padding: 7px 0 7px 26px; position: relative; font-size: .93rem; color: var(--txt-2); }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); font-weight: 800; }
.price .btn { margin-top: 20px; }
.transparence {
  margin: 24px 0 0; font-size: .88rem; color: var(--txt-2);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px;
}
.transparence b { color: var(--txt); }

/* ---------- Tableau ---------- */
.table-scroll { overflow-x: auto; margin-bottom: 22px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 520px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--txt-2); }
th { color: var(--txt); font-family: 'Montserrat', sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:hover td { background: rgba(0, 98, 255, .05); }

/* ---------- FAQ ---------- */
details { border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; background: var(--card); }
details[open] { border-color: rgba(0, 98, 255, .45); }
summary { font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: .95rem; }
details p { margin-top: 10px; color: var(--txt-2); font-size: .94rem; }

/* ---------- Pastilles de liens ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chips a {
  display: inline-block; padding: 9px 16px; border-radius: 10px;
  border: 1px solid rgba(0, 98, 255, .3); background: rgba(0, 98, 255, .05);
  color: #C0C8D4; font-size: .9rem; text-decoration: none; transition: all .3s;
}
.chips a:hover { border-color: var(--primary); color: #fff; text-decoration: none; }

/* ---------- Bloc final ---------- */
.final { text-align: center; padding: var(--sec-xl) 0; background: radial-gradient(700px 360px at 50% 0%, rgba(0, 98, 255, .18), transparent 65%); }
.final h2 { margin: 0 auto 14px; max-width: 26ch; }
.final p { color: var(--txt-2); max-width: 56ch; margin: 0 auto 30px; }
.final .ctas { justify-content: center; }

/* ---------- Article de blog ---------- */
.meta { font-size: .85rem; color: var(--txt-2); margin-bottom: 8px; }

/* Illustration d'article : l'image seule, jamais de légende sous l'image.
   Le cadre 16:9 est posé en CSS pour que la place soit réservée avant l'arrivée
   du fichier, même si l'image livrée n'a pas tout à fait le bon rapport. */
.article-figure { margin: 0; }
.article-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--line); background: var(--card);
}
/* Couverture : elle ferme le bloc de titre, juste sous le chapeau. */
.article-cover { margin-top: 6px; }
/* Illustration posée au milieu du texte : elle respire comme un paragraphe. */
.prose .article-figure { margin: 34px 0; }

/* ---------- Index du blog ---------- */
.post-list { list-style: none; display: grid; gap: 22px; }
@media (min-width: 700px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .post-list { grid-template-columns: repeat(3, 1fr); } }

.post {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px 24px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #0e1422 0%, #0a0d16 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Filet lumineux en haut de carte, qui se déploie au survol */
.post::before {
  content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  transition: width .45s ease;
}
.post:hover { transform: translateY(-5px); border-color: rgba(0, 98, 255, .45); box-shadow: 0 24px 60px -32px rgba(0, 98, 255, .6); }
.post:hover::before { width: 100%; }

/* Miniature de carte : elle annule le rembourrage pour occuper tout le haut.
   La carte porte déjà overflow:hidden, les coins hauts sont donc découpés. */
.post .post-cover { margin: -28px -26px 0; overflow: hidden; background: var(--card); }
.post .post-cover img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.post:hover .post-cover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .post .post-cover img, .post:hover .post-cover img { transition: none; transform: none; }
}

.post .post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #5A6B85;
}
.post .post-meta .chip {
  color: var(--cyan); background: rgba(0, 210, 255, .08);
  border: 1px solid rgba(0, 210, 255, .3); border-radius: 999px; padding: 4px 11px;
  letter-spacing: .08em;
}
.post .post-meta .sep { color: rgba(30, 58, 95, .9); }

.post h2 { font-size: 1.22rem; line-height: 1.32; margin: 0; max-width: none; }
.post h2 a { color: var(--txt); text-decoration: none; }
.post:hover h2 a { color: var(--cyan); }
/* Toute la carte devient cliquable, sans imbriquer deux liens */
.post h2 a::after { content: ''; position: absolute; inset: 0; }

.post p { color: var(--txt-2); font-size: .94rem; margin: 0; flex: 1; }

.post .post-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: 'Montserrat', sans-serif; font-size: .84rem; font-weight: 700; color: #4d9bff;
}
.post .post-more svg { width: 15px; height: 15px; transition: transform .3s ease; }
.post:hover .post-more { color: #fff; }
.post:hover .post-more svg { transform: translateX(4px); }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line); background: #0B1628; padding: 56px 0 32px; }
.site-footer .fmesh { display: grid; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(30, 58, 95, .6); }
@media (min-width: 640px) { .site-footer .fmesh { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .site-footer .fmesh { grid-template-columns: repeat(3, 1fr); } }
.site-footer .fmesh h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--cyan); margin-bottom: 14px; max-width: none; }
.site-footer .fmesh ul { list-style: none; display: grid; gap: 8px; }
.site-footer .fmesh a { color: var(--txt-2); font-size: .9rem; text-decoration: none; }
.site-footer .fmesh a:hover { color: var(--primary); }
.site-footer .fbottom { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center; font-size: .82rem; color: #5A6B85; }
.site-footer .fbottom a { color: #5A6B85; }
.site-footer .fbottom a:hover { color: var(--primary); }
.site-footer .fbottom .legal { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }