/* Feuille COMMUNE aux pages Solutions. Extraite de `audits-de-gouvernance.html` le
   2026-09-20, au moment ou une deuxieme page (`audits-techniques`) allait la dupliquer.
   Deux copies d'un systeme graphique divergent des la premiere retouche ; une seule ne
   le peut pas. La CSP du site autorise `style-src 'self'`, donc un fichier externe passe. */

  *{margin:0;padding:0;box-sizing:border-box}
  :root{
    --nuit:#060f1c; --nuit2:#0a1a2f; --nuit3:#0f243d;
    --or:#d4af37; --or-hi:#f0dfa8; --or-lo:#a8892a;
    --azur:#1a5ce0; --line:#e6ecf3;
    --sans:"Geist Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  body{font-family:var(--sans);background:var(--nuit);color:#eaf1f8;font-size:16px;
       line-height:1.55;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{letter-spacing:-.028em;text-wrap:balance;font-weight:700}
  a{color:inherit}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  :focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:6px}

  .nav{position:sticky;top:0;z-index:60;background:rgba(6,15,28,.8);
       backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.07)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
  .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
  .brand img{width:32px;height:32px}
  .brand span{font-family:var(--mono);font-size:1rem;letter-spacing:.26em}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 18px;
       border-radius:11px;font-weight:600;font-size:.94rem;text-decoration:none;border:1px solid transparent;
       transition:transform .2s var(--ease),filter .2s}
  .btn:hover{transform:translateY(-1px)}
  .btn-or{background:linear-gradient(96deg,var(--or-hi),var(--or) 52%,var(--or-lo));color:#2a1f05}
  .btn-ghost{border-color:rgba(255,255,255,.18);color:#eaf1f8}
  .btn-lg{padding:14px 24px;font-size:1rem}

  /* Bandeau de tete : meme grammaire que le hero de l'accueil (degrade nuit + halos froids),
     pour qu'on reste manifestement sur le meme site en changeant de page. */
  .tete{position:relative;overflow:hidden;padding:76px 0 64px;
        background:linear-gradient(180deg,var(--nuit) 0%,var(--nuit2) 55%,var(--nuit) 100%)}
  .tete::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(58% 44% at 16% 10%,rgba(30,107,255,.18),transparent 70%),
               radial-gradient(50% 40% at 88% 74%,rgba(212,175,55,.08),transparent 72%)}
  .tete .wrap{position:relative}
  .fil{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
       color:var(--or);margin-bottom:18px}
  .fil a{text-decoration:none;color:#8ea4bd}
  .fil a:hover{color:var(--or)}
  /* 16ch etait trop etroit : le titre cassait sur cinq lignes et le deux-points partait seul
     en debut de ligne. 22ch le tient sur trois, et l'espace insecable du ` :` interdit
     desormais ce rejet — la typographie francaise colle le deux-points a ce qui precede. */
  .tete h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;margin-bottom:20px;max-width:22ch;color:#fff}
  .tete p{font-size:1.06rem;color:#9db2ca;max-width:56ch;margin-bottom:28px}

  .grille{padding:8px 0 84px;background:var(--nuit)}
  /* CINQ COLONNES EXPLICITES, pas `auto-fit`. Avec `minmax(214px,1fr)` la grille en posait
     quatre puis laissait la cinquieme orpheline sur sa propre ligne, ce qui casse la lecture
     « cinq prestations » de la maquette. Un nombre fixe de colonnes se degrade proprement. */
  .cartes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  @media (max-width:1080px){ .cartes{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:760px){ .cartes{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:480px){ .cartes{grid-template-columns:1fr} }
  .vignette{position:relative;border-radius:16px;padding:22px 20px 24px;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
    border:1px solid rgba(255,255,255,.085);backdrop-filter:blur(10px);
    transition:transform .38s var(--ease),border-color .38s var(--ease)}
  .vignette:hover{transform:translateY(-5px);border-color:rgba(212,175,55,.34)}
  .vignette::after{content:"";position:absolute;top:0;left:16%;right:16%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}
  .vi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
      background:radial-gradient(circle at 50% 32%,#12325c,#0a1a2f 74%);
      border:1px solid rgba(30,107,255,.4)}
  .vi svg{width:22px;height:22px;fill:none;stroke:#7fb0ff;stroke-width:1.7;
          stroke-linecap:round;stroke-linejoin:round}
  .vignette h2{font-size:1rem;color:#fff;margin-bottom:5px;line-height:1.3}
  .vignette .sous{display:block;font-family:var(--mono);font-size:.7rem;color:var(--or);
                  letter-spacing:.06em;margin-bottom:12px}
  .vignette p{font-size:.88rem;color:#90a6c0;line-height:1.5}

  /* La vignette est un BOUTON depuis qu'elle ouvre un panneau : un `article` n'est ni
     focalisable ni actionnable au clavier. Il faut donc lui retirer l'apparence de bouton du
     navigateur et lui rendre la typographie heritee. */
  .vignette{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
            font-family:var(--sans)}
  .vignette[aria-expanded="true"]{border-color:rgba(212,175,55,.5);
            background:linear-gradient(180deg,rgba(212,175,55,.09),rgba(255,255,255,.022))}
  .vignette .chev{position:absolute;top:18px;right:16px;width:14px;height:14px;fill:none;
            stroke:#7d93ad;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
            transition:transform .3s var(--ease),stroke .3s}
  .vignette[aria-expanded="true"] .chev{transform:rotate(180deg);stroke:var(--or)}

  .detail{margin-top:20px;border-radius:18px;padding:26px 26px 22px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
    border:1px solid rgba(212,175,55,.22)}
  .detail[hidden]{display:none}
  .d-accroche{font-size:1.04rem;color:#cfdcec;max-width:72ch;margin-bottom:24px;line-height:1.55}
  .d-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:26px}
  .d-bloc h3{font-size:.96rem;color:var(--or);margin-bottom:14px}
  .d-etapes{list-style:none;counter-reset:none}
  .d-etapes li{display:flex;gap:12px;margin-bottom:13px}
  .d-etapes .n{flex:none;font-family:var(--mono);font-size:.76rem;color:#6e86a2}
  .d-etapes .t b{display:block;font-size:.9rem;color:#fff;margin-bottom:2px;font-weight:600}
  .d-etapes .t{font-size:.85rem;color:#90a6c0;line-height:1.45}
  .d-methodes{margin-top:16px;padding:11px 13px;border-radius:10px;font-size:.8rem;
    color:#90a6c0;line-height:1.45;background:rgba(30,107,255,.09);
    border:1px solid rgba(30,107,255,.2)}
  .d-methodes b{color:#9fc0f0}
  .d-check{list-style:none}
  .d-check li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.86rem;color:#a9bdd4}
  .d-check li::before{content:"";position:absolute;left:2px;top:.34em;width:9px;height:5px;
    border-left:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(-45deg)}
  .d-note{margin-top:14px;padding:11px 13px;border-radius:10px;font-size:.8rem;color:#90a6c0;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);line-height:1.45}
  .d-livrables{list-style:none}
  .d-livrables li{margin-bottom:12px}
  .d-livrables b{display:block;font-size:.88rem;color:#fff;font-weight:600;margin-bottom:2px}
  .d-livrables span{display:block;font-size:.82rem;color:#90a6c0;line-height:1.45}
  .d-fin{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:24px;
    padding-top:18px;border-top:1px solid rgba(255,255,255,.09);font-size:.86rem;color:#a9bdd4}
  .d-fin b{color:var(--or);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
           text-transform:uppercase}
  .d-fin span{position:relative;padding-left:20px}
  .d-fin span::before{content:"";position:absolute;left:0;top:.34em;width:9px;height:5px;
    border-left:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(-45deg)}
  @media (max-width:900px){ .d-cols{grid-template-columns:1fr;gap:22px} }

  .pied{padding:26px 0 40px;background:var(--nuit);border-top:1px solid rgba(255,255,255,.07)}
  .pied .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
  .pied p{font-size:.85rem;color:#7d93ad}
  .pied a{color:#9db2ca}

  @media (max-width:640px){ .tete{padding:52px 0 44px} .tete h1{max-width:none} }
  @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important} }

  /* Six vignettes (page audits techniques) : 3 x 2 plutot que six colonnes etroites. */
  .cartes.six{grid-template-columns:repeat(3,1fr)}
  @media (max-width:900px){ .cartes.six{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .cartes.six{grid-template-columns:1fr} }

  /* Trois vignettes (page pentests). `.vignette-fixe` est celle qui n'ouvre rien, faute de
     visuel de detail : pas de survol qui promet une interaction, pas de curseur pointeur. */
  .cartes.trois{grid-template-columns:repeat(3,1fr)}
  .vignette-fixe{cursor:default}
  .vignette-fixe:hover{transform:none;border-color:rgba(255,255,255,.085)}
  @media (max-width:760px){ .cartes.trois{grid-template-columns:1fr} }