/*
Theme Name: AUDI Native
Author: Yan Haltey Brands
Description: Theme WordPress genere depuis le prototype audit-terrain. Le nom commercial vit dans brands/audit-terrain/brand.config.json, jamais ici.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Text Domain: audi-native
*/

/* ---------------------------------------------------------------------------
 * Outfit, licence OFL, AUTO-HEBERGEE.
 * Le parc YHB n utilise aucun CDN : aucune requete ne doit sortir vers
 * fonts.googleapis.com ni fonts.gstatic.com.
 *
 * Fonte VARIABLE : un seul fichier par sous-ensemble couvre 100 a 900.
 * Regenerer avec tools/get-fonts.py. Licence complete dans OFL.txt.
 * ------------------------------------------------------------------------- */

/* latin-ext */
/* latin */
/* ---------------------------------------------------------------------------
 * audit-terrain — design tokens
 * Direction « Seuil · Outfit », retenue le 23.07.2026.
 * Voir ../identity/DIRECTION.md
 *
 * Aucun jeton ne porte le nom de la marque : ces valeurs passent telles quelles
 * dans le theme WordPress, quel que soit le nom commercial retenu.
 *
 * Outfit est sous licence OFL et doit etre AUTO-HEBERGEE en woff2.
 * Aucune dependance a un CDN : le parc n'en utilise aucun.
 * ------------------------------------------------------------------------- */

:root {
  /* Couleur ---------------------------------------------------------------- */
  --color-ink: #1B2A33;         /* texte */
  --color-ink-soft: #6C818E;    /* texte secondaire */
  --color-faint: #9DB0BC;       /* labels, mentions */
  --color-accent: #3E5F7A;      /* actions, et rien d'autre */
  --color-accent-2: #8FA8B8;    /* reperes */
  --color-line: #E7ECEF;        /* filets, rares */
  --color-bg: #FAFBFB;          /* fond dominant */
  --color-bg-raised: #FFFFFF;   /* surface haute */

  /* Typographie ------------------------------------------------------------ */
  --font-text: 'Outfit', system-ui, sans-serif;
  --weight-title: 200;
  --weight-body: 300;
  --weight-action: 500;
  --tracking-wordmark: -0.012em;
  --tracking-title: -0.025em;
  --tracking-label: 0.18em;

  /* Echelle : titres a partir de 32px, corps jamais sous 16px --------------- */
  --size-display: 58px;
  --size-title: 40px;
  --size-subtitle: 28px;
  --size-body: 17px;
  --size-small: 15px;
  --size-label: 11px;

  /* Espacement et forme ---------------------------------------------------- */
  --space-section: 88px;
  --space-block: 48px;
  --space-item: 24px;
  --radius-base: 4px;
}

/* Liens : definis meme en l'absence de liens dans la maquette, sinon le
   navigateur applique son bleu par defaut des qu'un lien est ajoute. */
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-ink); }


/* ---------------------------------------------------------------------------
 * audit-terrain — mise en page du prototype
 * Direction « Seuil · Outfit ». Les valeurs viennent toutes de tokens.css,
 * concatene en amont dans assets/style.css par tools/build.mjs.
 *
 * Outfit est AUTO-HEBERGEE : les @font-face viennent de assets/fonts/fonts.css,
 * concatene en tete de assets/style.css par tools/build.mjs. Aucune requete ne
 * sort vers un CDN, ni depuis le prototype ni depuis le theme WordPress.
 * ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-weight: var(--weight-body);
  font-size: var(--size-body);
  line-height: 1.8;
  color: var(--color-ink);
  background: var(--color-bg);
  text-wrap: pretty;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 44px; }

/* Bandeau prototype ------------------------------------------------------- */
.proto-flag {
  margin: 0; padding: 10px 16px; text-align: center;
  background: var(--color-ink); color: var(--color-bg);
  font-size: var(--size-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; font-weight: 400;
}

/* En-tete ----------------------------------------------------------------- */
.site-head { background: var(--color-bg-raised); border-bottom: 1px solid var(--color-line); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; flex-wrap: wrap; }

.wordmark {
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-wordmark);
  font-size: 21px; color: var(--color-ink); text-decoration: none;
}
.wordmark--foot { font-size: 19px; margin: 0 0 8px; }

.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav a { font-size: 15px; color: var(--color-ink-soft); text-decoration: none; }
.nav a:hover { color: var(--color-ink); }
.nav a[aria-current="page"] { color: var(--color-ink); }

/* Boutons : un seul plein par vue, le secondaire reste en retrait ---------- */
.btn {
  display: inline-block; text-decoration: none;
  font-weight: var(--weight-action); font-size: 15px;
  padding: 15px 30px; border-radius: var(--radius-base);
  border: 0; cursor: pointer; font-family: var(--font-text);
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-accent); padding-inline: 8px; }
.btn--ghost:hover { color: var(--color-ink); }
.nav .btn { padding: 10px 20px; font-size: 13px; }

.cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 34px; }

/* Sections ----------------------------------------------------------------- */
.hero { background: var(--color-bg-raised); border-bottom: 1px solid var(--color-line); padding-block: 96px 80px; text-align: center; }
.hero .wrap > * { margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section + .section { border-top: 1px solid var(--color-line); }

h1 {
  font-weight: var(--weight-title); font-size: var(--size-display);
  letter-spacing: var(--tracking-title); line-height: 1.14;
  margin: 24px 0 0; max-width: 740px;
}
h2 {
  font-weight: var(--weight-title); font-size: var(--size-title);
  letter-spacing: var(--tracking-title); line-height: 1.18;
  margin: 0 0 var(--space-item); max-width: 720px;
}

.kicker {
  margin: 0; font-size: var(--size-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-accent-2);
}
.signature { font-size: var(--size-subtitle); font-weight: var(--weight-body); margin: 20px 0 0; max-width: 640px; }
.lead { color: var(--color-ink-soft); margin: 22px 0 0; max-width: 540px; }
.hero .lead { margin-inline: auto; }

p { margin: 0 0 18px; max-width: 640px; }

/* Intitule de liste : segmente « Inclus » et « Hors périmètre », qui
   fusionnaient auparavant en une seule liste indifferenciee. */
.list-label {
  margin: var(--space-item) 0 0;
  font-size: var(--size-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-accent-2);
}
.list-label + .list { margin-top: 10px; }

/* Ligne d'information courte : nom de l'expert, zone, note. */
.meta { margin: 14px 0 0; color: var(--color-ink-soft); font-size: var(--size-small); }
.meta strong { color: var(--color-ink); font-weight: 500; }

/* Listes -------------------------------------------------------------------- */
.list { list-style: none; padding: 0; margin: var(--space-item) 0 0; max-width: 720px; }
.list li { padding: 18px 0; border-top: 1px solid var(--color-line); }
.list li:last-child { border-bottom: 1px solid var(--color-line); }

.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--space-item) 0 0; max-width: 760px; }
.steps li { counter-increment: s; padding: 22px 0 22px 56px; border-top: 1px solid var(--color-line); position: relative; }
.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 22px;
  font-size: var(--size-label); letter-spacing: var(--tracking-label); color: var(--color-accent-2);
}
.steps li:last-child { border-bottom: 1px solid var(--color-line); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: var(--space-item) 0 0; }
.chips li { font-size: var(--size-small); color: var(--color-ink-soft); background: var(--color-bg-raised); border: 1px solid var(--color-line); border-radius: var(--radius-base); padding: 8px 16px; }

/* FAQ ----------------------------------------------------------------------- */
.qa { margin: 0; max-width: 760px; }
.qa dt { font-weight: 500; font-size: 19px; padding-top: 28px; border-top: 1px solid var(--color-line); }
.qa dd { margin: 12px 0 28px; color: var(--color-ink-soft); }

/* Placeholder photo : jamais remplace par du stock ni de l'IA --------------- */
.ph {
  margin: 34px 0 0; min-height: 260px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-base);
  background: repeating-linear-gradient(135deg, #EDF1F3 0 12px, #E6EBEE 12px 24px);
}
.ph span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #7E909B; text-align: center; padding: 0 20px; }

/* Formulaire ---------------------------------------------------------------- */
.form { max-width: 560px; margin-top: var(--space-item); }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; max-width: none; }
.field label { font-size: var(--size-small); color: var(--color-ink-soft); }
.req { font-size: var(--size-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2); }
.field input, .field textarea {
  font-family: var(--font-text); font-size: var(--size-body); font-weight: var(--weight-body);
  color: var(--color-ink); background: var(--color-bg-raised);
  border: 1px solid var(--color-line); border-radius: var(--radius-base); padding: 13px 14px;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.note { font-size: var(--size-small); color: var(--color-ink-soft); margin-top: 20px; }
.more { margin-top: var(--space-item); }

/* Pied ---------------------------------------------------------------------- */
.site-foot { background: var(--color-bg-raised); border-top: 1px solid var(--color-line); padding-block: 56px; margin-top: var(--space-section); }
.foot-note { font-size: var(--size-small); color: var(--color-ink-soft); margin: 0 0 6px; }

/* Petits ecrans ------------------------------------------------------------- */
@media (max-width: 720px) {
  .wrap { padding: 0 24px; }
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  .hero { padding-block: 60px 52px; }
  .head-in { gap: 16px; }
  .nav { gap: 16px; }
}


/* --- Habillage fluentform, aligne sur les tokens de la marque --- */
.form-shell .fluentform { color: var(--color-ink); }
.form-shell .ff-el-group { margin-bottom: 20px; }
.form-shell label { font-size: var(--size-small); color: var(--color-ink-soft); }
.form-shell input, .form-shell textarea, .form-shell select {
  width: 100%; font: inherit; color: var(--color-ink);
  background: var(--color-bg-raised); border: 1px solid var(--color-line);
  border-radius: var(--radius-base); padding: 13px 14px;
}
.form-shell textarea { min-height: 140px; }
.form-shell input:focus, .form-shell textarea:focus, .form-shell select:focus {
  outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent);
}
.form-shell .ff-btn-submit {
  border: 0 !important; border-radius: var(--radius-base) !important;
  background: var(--color-accent) !important; color: #fff !important;
  font-family: var(--font-text) !important; font-weight: var(--weight-action) !important;
  padding: 15px 30px !important;
}
.form-shell--todo { border: 1px dashed var(--color-line); border-radius: var(--radius-base); padding: 24px; }