/* Anthelixa · page Conseil et audit (v2) : l'audit IA. Une promesse, trois chiffres, quatre axes, trois formats
   gradués, ce que vous recevez, l'étape suivante, la FAQ. Chargée après site.css, sur cette page seulement. Registres Nuit et Matin : site.css. Mêmes angles à 8 px,
   surfaces plates ; l'iris pour l'action et pour le type de branche ; le mono n'y sert jamais d'étiquette. */

/* ------------------------------------------------------------------ 1. haut de page : la promesse, trois chiffres */
.audit-hero { padding-block: 40px 64px; }
@media (min-width: 900px) { .audit-hero { padding-block: 56px 96px; } }
.audit-hero__titre { font-size: var(--taille-xl); line-height: var(--interligne-xl); letter-spacing: var(--approche-xl); }
.audit-hero__titre > span { display: block; }
.audit-hero__chapeau { max-width: 62ch; margin-top: 24px; font-size: var(--taille-chapeau); line-height: 1.5; }
.audit-hero__suite { max-width: 62ch; margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--gris-3); }

.audit-chiffres { display: grid; margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--nuit); }
@media (min-width: 760px) { .audit-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.audit-chiffre { padding: 18px 0 20px; }
@media (max-width: 759.98px) { .audit-chiffre + .audit-chiffre { border-top: 1px solid var(--gris-1); } }
@media (min-width: 760px) {
  .audit-chiffre { padding-right: 24px; }
  .audit-chiffre + .audit-chiffre { padding-left: 24px; border-left: 1px solid var(--gris-1); }
}
.audit-chiffre__valeur {
  display: block; font-family: var(--display); font-weight: 600; font-size: var(--taille-l); white-space: nowrap; line-height: var(--interligne-l); letter-spacing: var(--approche-l);
}
.audit-chiffre__texte { display: block; max-width: 26ch; margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--gris-3); }
.audit-hero .source-ligne { max-width: 90ch; }
.audit-hero .actions { margin-top: 32px; }

/* ------------------------------------------------------------------ 2. les quatre axes */
.audit-axes { display: grid; gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .audit-axes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .audit-axes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.audit-axe { min-width: 0; padding: 24px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier-chaud); }
.audit-axe .tuile { margin-bottom: 18px; background: var(--papier); }
.audit-axe__nom { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.audit-axe__but { margin-top: 4px; font-weight: 500; font-size: 16px; }
.audit-axe__texte { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--gris-3); }

/* ------------------------------------------------------------------ 3. pourquoi quatre axes, sur nuit */
.audit-raisons { display: grid; margin: 56px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .audit-raisons { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.audit-raison { padding: 22px 0 26px; border-top: 1px solid var(--filet-nuit); }
.audit-raison__titre { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.audit-raison__texte { max-width: 46ch; margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--blanc-doux); }

/* ------------------------------------------------------------------ 4. trois formats gradués */
.audit-formats { display: grid; gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .audit-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.audit-format {
  display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 24px;
  border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier);
}
.audit-format--complet { border: 2px solid var(--nuit); }
.audit-format__badge {
  align-self: flex-start; margin-bottom: 14px; padding: 3px 10px; border-radius: var(--rayon);
  background: var(--nuit); font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--blanc);
}
.audit-format__nom { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.audit-format__duree { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.audit-format__pour { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--gris-3); }
.audit-format__regle { margin-top: 10px; font-weight: 500; font-size: 16px; line-height: 1.5; }
.audit-format__contenu { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.audit-format__contenu li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: var(--rayon);
  background: var(--papier-chaud); font-size: 14px; line-height: 1.35;
}
.audit-format__contenu .picto { width: 15px; height: 15px; }
.audit-format__livrables { margin-top: auto; padding-top: 22px; font-size: 16px; }
.audit-format__livrables strong { margin-right: 6px; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.audit-format .text-link { align-self: flex-start; margin-top: 12px; }
.audit-formats__note { max-width: 62ch; margin-top: 20px; font-size: 16px; color: var(--gris-3); }

/* ------------------------------------------------------------------ 5. ce que vous recevez, sur nuit
   Un onglet par format. Sans JavaScript, les trois listes restent affichées l'une sous l'autre, avec leur titre. */
.onglets { margin-top: 44px; }
.onglets__liste { display: none; }
.js .onglets__liste { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.onglets__onglet {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--filet-nuit); border-radius: var(--rayon); background: transparent;
  font-family: var(--texte); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--blanc-doux); cursor: pointer;
}
.onglets__onglet span { font-weight: 400; font-size: 14px; color: var(--gris-2); }
.onglets__onglet:hover { border-color: var(--blanc-doux); color: var(--blanc); }
.onglets__onglet[aria-selected="true"] { border-color: var(--blanc); background: var(--blanc); color: var(--nuit); }
.onglets__onglet[aria-selected="true"] span { color: var(--gris-3); }
.onglets__panneau + .onglets__panneau { margin-top: 48px; }
.js .onglets__panneau + .onglets__panneau { margin-top: 0; }
.onglets__titre { margin-bottom: 16px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.js .onglets__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.recus { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet-nuit); }
.recus li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px;
  padding: 18px 0; border-bottom: 1px solid var(--filet-nuit);
}
/* la colonne du format a une largeur fixe : les descriptions s'alignent d'une ligne à l'autre */
@media (min-width: 760px) { .recus li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 96px; align-items: baseline; } }
.recus__nom { font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--blanc); }
.recus__propre { display: block; margin-top: 2px; font-weight: 400; font-size: 14px; color: var(--gris-2); }
.recus__texte { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; color: var(--blanc-doux); }
@media (min-width: 760px) { .recus__texte { grid-column: auto; } }
.recus__format {
  grid-row: 1; grid-column: 2; justify-self: end; align-self: start; padding: 2px 10px;
  border: 1px solid var(--filet-nuit); border-radius: var(--rayon); font-size: 13px; line-height: 1.6; white-space: nowrap; color: var(--blanc-doux);
}
@media (min-width: 760px) { .recus__format { grid-column: 3; align-self: baseline; } }
.recus__regle { max-width: 64ch; margin-top: 18px; font-weight: 500; font-size: 16px; line-height: 1.55; }
.recus__note { max-width: 64ch; margin-top: 26px; font-size: 16px; line-height: 1.55; color: var(--blanc-doux); }

/* ------------------------------------------------------------------ 6. et s'il faut agir : trois étapes */
.audit-suite { display: grid; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: suite; }
@media (min-width: 900px) { .audit-suite { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; } }
.audit-suite li { position: relative; padding: 20px 0 26px 28px; border-left: 1px solid var(--gris-1); counter-increment: suite; }
.audit-suite li::before { content: ""; position: absolute; left: -5px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--nuit); }
.audit-suite li:last-child::before { background: var(--iris); }
@media (min-width: 900px) {
  .audit-suite li { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--gris-1); }
  .audit-suite li::before { left: 0; top: -5px; }
}
.audit-suite__etape { font-size: 15px; color: var(--gris-3); }
.audit-suite__etape::before { content: "Étape " counter(suite); }
.audit-suite__nom { margin-top: 4px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.audit-suite__texte { max-width: 36ch; margin-top: 8px; font-size: 16.5px; line-height: 1.55; }
.audit-suite + .actions { margin-top: 40px; }

/* ------------------------------------------------------------------ 7. la preuve : un extrait d'audit, l'indépendance */
.audit-preuve { display: grid; gap: 40px; }
@media (min-width: 960px) { .audit-preuve { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; } }
.audit-preuve__phrase { max-width: 18ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.audit-preuve__texte { max-width: 44ch; margin-top: 16px; font-size: 17px; line-height: 1.55; }
.audit-pas { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gris-1); }
.audit-pas li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--gris-1); font-size: 16px; line-height: 1.5; }
.audit-pas .picto { width: 18px; height: 18px; margin-top: 3px; color: var(--gris-3); }
.audit-pas strong { display: block; font-weight: 500; }

/* ------------------------------------------------------------------ 8. FAQ (composant .faq de site.css), 9. dernier appel */
.audit-faq .faq { margin-top: 40px; }
.audit-appel { display: grid; gap: 24px; }
@media (min-width: 900px) { .audit-appel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; } }
.audit-appel .actions { margin-top: 0; }