/* =========================================================================
   VOC-C — charte unique : les écrans du site et les livrables PDF sortent
   d'ici. Les valeurs sont relevées au pixel sur les quatre PDF livrés au
   dossier pilote (Hoops Factory, 12/08/2026), pas inventées.

   Deux sous-ensembles :
     .voc-doc     — le document imprimé. Volontairement conservateur
                    (pas de grid, pas de flex) : il doit survivre à
                    n'importe quel moteur d'impression.
     .voc-app     — l'écran. CSS moderne assumé (grid, flex).
   Les JETONS sont communs : une seule charte, deux usages.
   ========================================================================= */

:root {
  /* --- Couleurs (relevées sur le rapport Hoops, page 1) --- */
  --petrole-900: #0C3B42;   /* bandeau, titres, chiffre neutre */
  --petrole-700: #145A64;   /* rail des actions, accents, bouton primaire */
  --petrole-050: #EEF4F5;   /* fond de carte neutre, fond d'application */
  --ardoise-700: #334155;   /* corps de texte */
  --ardoise-500: #64748B;   /* légendes, sous-titres, mentions */
  --vert-700:    #15803D;   /* le gain — et lui seul */
  --vert-050:    #EAF6EE;
  --ambre-600:   #D97706;   /* l'échéance, l'urgence — et elle seule */
  --ambre-050:   #FEF3E2;
  --filet:       #D6E2E4;   /* séparateurs */
  --blanc:       #FFFFFF;

  /* --- Typographie --- */
  --pile: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Rythme --- */
  --pas: 4px;
  --rayon: 3px;
}

/* =========================================================================
   1. LE DOCUMENT (livrables PDF)
   ========================================================================= */

@page { size: A4; margin: 0; }

.voc-doc {
  font-family: var(--pile);
  font-size: 9.5pt;
  line-height: 1.5;
  color: var(--ardoise-700);
  background: var(--blanc);
  margin: 0;
}

.voc-doc .page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background: var(--blanc);
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}
.voc-doc .page:last-child { page-break-after: auto; }

/* À l'impression, la feuille EST la page : on rend la largeur au moteur. */
@media print {
  /* La feuille garde sa hauteur : le pied se pose à 10 mm du bas de façon
     déterministe, quel que soit le moteur. Une page = un bloc maîtrisé. */
  .voc-doc .page { width: auto; margin: 0; box-shadow: none; }
}

/* --- Bandeau : la seule zone où VOCC se nomme --- */
.voc-doc .bandeau {
  background: var(--petrole-900);
  color: var(--blanc);
  padding: 5.5mm 18mm;
  font-size: 8pt;
}
.voc-doc .bandeau .marque {
  font-weight: 700;
  font-size: 11pt;
  letter-spacing: 0.04em;
  margin-right: 5mm;
}
.voc-doc .bandeau .objet { opacity: 0.88; }
.voc-doc .bandeau .destinataire { float: right; opacity: 0.94; }

/* Variante marque blanche : le document part au nom du client,
   AC-CEE n'y figure jamais (décision gravée n° 4). */
.voc-doc .bandeau.marque-blanche .marque { text-transform: uppercase; }

.voc-doc .corps { padding: 9mm 18mm 24mm; }

/* --- Titres --- */
.voc-doc h1 {
  font-size: 19pt;
  line-height: 1.2;
  color: var(--petrole-900);
  margin: 0 0 2mm;
  font-weight: 700;
}
.voc-doc .chapeau {
  color: var(--ardoise-500);
  font-size: 9.5pt;
  margin: 0 0 5mm;
  padding-bottom: 4mm;
  border-bottom: 0.6pt solid var(--filet);
}
.voc-doc h2 {
  font-size: 11.5pt;
  color: var(--petrole-900);
  margin: 7mm 0 2mm;
  font-weight: 700;
}
.voc-doc p { margin: 0 0 2.5mm; }
.voc-doc strong { color: var(--petrole-900); font-weight: 700; }

/* --- Les trois chiffres de tête --- */
/* display:table plutôt que grid : ce bloc doit tenir dans tout moteur. */
.voc-doc .chiffres { display: table; width: 100%; border-spacing: 3mm 0; margin: 0 -3mm 3mm; }
.voc-doc .chiffres .chiffre {
  display: table-cell;
  width: 33.33%;
  text-align: center;
  padding: 4mm 3mm;
  border-radius: var(--rayon);
  vertical-align: middle;
}
.voc-doc .chiffre .valeur { font-size: 19pt; font-weight: 700; line-height: 1.15; display: block; }
.voc-doc .chiffre .libelle { font-size: 8pt; color: var(--ardoise-500); line-height: 1.35; display: block; margin-top: 1.5mm; }

.voc-doc .chiffre.gain      { background: var(--vert-050); }
.voc-doc .chiffre.gain      .valeur { color: var(--vert-700); }
.voc-doc .chiffre.echeance  { background: var(--ambre-050); }
.voc-doc .chiffre.echeance  .valeur { color: var(--ambre-600); }
.voc-doc .chiffre.neutre    { background: var(--petrole-050); }
.voc-doc .chiffre.neutre    .valeur { color: var(--petrole-900); }

/* --- Le rail numéroté : les actions recommandées --- */
.voc-doc .rail { display: table; width: 100%; border-collapse: collapse; margin: 1mm 0 4mm; }
.voc-doc .rail .action { display: table-row; }
.voc-doc .rail .n {
  display: table-cell;
  width: 11mm;
  background: var(--petrole-700);
  color: var(--blanc);
  font-weight: 700;
  font-size: 11pt;
  text-align: center;
  vertical-align: top;
  padding: 3mm 0 3mm;
}
.voc-doc .rail .texte {
  display: table-cell;
  padding: 3mm 0 3mm 4mm;
  vertical-align: top;
  border-bottom: 0.6pt solid var(--filet);
}
.voc-doc .rail .action:last-child .texte { border-bottom: 0; }

/* --- Mention des pièces analysées : la traçabilité, en petit --- */
.voc-doc .pieces {
  font-size: 8pt;
  color: var(--ardoise-500);
  line-height: 1.45;
  margin-top: 4mm;
}

/* --- Pied de page : absolu en prévisualisation, fixe à l'impression
       (le moteur le répète alors sur chaque feuille). --- */
.voc-doc .pied {
  position: absolute;
  bottom: 10mm; left: 18mm; right: 18mm;
  font-size: 7.5pt;
  color: var(--ardoise-500);
  border-top: 0.6pt solid var(--filet);
  padding-top: 2mm;
}
.voc-doc .pied .folio { float: right; }

/* --- Tableau de données (pages 2 et 3 du rapport, calendrier du kit) --- */
.voc-doc table.donnees { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 2mm 0 4mm; }
.voc-doc table.donnees th {
  text-align: left;
  color: var(--petrole-900);
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 0.8pt solid var(--petrole-700);
  padding: 1.5mm 2mm;
}
.voc-doc table.donnees td { padding: 1.5mm 2mm; border-bottom: 0.5pt solid var(--filet); vertical-align: top; }
.voc-doc table.donnees td.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* =========================================================================
   2. L'ÉCRAN (site public et espace client)
   ========================================================================= */

.voc-app {
  font-family: var(--pile);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ardoise-700);
  background: var(--petrole-050);
  margin: 0;
}

.voc-app .barre {
  background: var(--petrole-900);
  color: var(--blanc);
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.voc-app .barre .marque { font-weight: 700; font-size: 18px; letter-spacing: 0.04em; }
.voc-app .barre .objet { font-size: 14px; opacity: 0.85; }
.voc-app .barre .compte { margin-left: auto; font-size: 14px; opacity: 0.94; }

.voc-app .conteneur { max-width: 880px; margin: 0 auto; padding: 28px 24px 64px; }

.voc-app .carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 24px;
  margin-bottom: 20px;
}

.voc-app h1 { font-size: 27px; line-height: 1.25; color: var(--petrole-900); margin: 0 0 6px; font-weight: 700; }
.voc-app h2 { font-size: 18px; color: var(--petrole-900); margin: 0 0 12px; font-weight: 700; }
.voc-app .chapeau { color: var(--ardoise-500); font-size: 15px; margin: 0 0 20px; }
.voc-app p { margin: 0 0 12px; }
.voc-app strong { color: var(--petrole-900); font-weight: 600; }

/* --- L'état du dossier : ce que la machine dit, affiché tel quel --- */
.voc-app .etat {
  display: inline-block;
  background: var(--petrole-050);
  color: var(--petrole-900);
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Les mêmes trois chiffres qu'au rapport, en version écran --- */
.voc-app .chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 8px; }
.voc-app .chiffre { text-align: center; padding: 20px 14px; border-radius: var(--rayon); }
.voc-app .chiffre .valeur { display: block; font-size: 27px; font-weight: 700; line-height: 1.15; }
.voc-app .chiffre .libelle { display: block; font-size: 13px; color: var(--ardoise-500); line-height: 1.35; margin-top: 6px; }
.voc-app .chiffre.gain     { background: var(--vert-050); }
.voc-app .chiffre.gain     .valeur { color: var(--vert-700); }
.voc-app .chiffre.echeance { background: var(--ambre-050); }
.voc-app .chiffre.echeance .valeur { color: var(--ambre-600); }
.voc-app .chiffre.neutre   { background: var(--petrole-050); }
.voc-app .chiffre.neutre   .valeur { color: var(--petrole-900); }

/* --- Livrables téléchargeables --- */
.voc-app .livrable {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--filet);
}
.voc-app .livrable:last-child { border-bottom: 0; }
.voc-app .livrable .nom { font-weight: 600; color: var(--petrole-900); }
.voc-app .livrable .meta { font-size: 13px; color: var(--ardoise-500); }
.voc-app .livrable .action { margin-left: auto; }

/* --- Boutons : un seul primaire par écran --- */
.voc-app .bouton {
  display: inline-block;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--rayon);
  border: 1px solid var(--petrole-700);
  background: var(--petrole-700);
  color: var(--blanc);
  text-decoration: none;
  cursor: pointer;
}
.voc-app .bouton.secondaire { background: var(--blanc); color: var(--petrole-700); }
.voc-app .bouton:focus-visible { outline: 3px solid var(--ambre-600); outline-offset: 2px; }

/* --- Le choix d'engagement : une option par carte, prix exact, jamais « à partir de » --- */
.voc-app .options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 8px; }
.voc-app .option {
  border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 18px; background: var(--blanc);
}
.voc-app .option.recommandee { border-color: var(--petrole-700); border-width: 2px; padding: 17px; }
.voc-app .option .prix { font-size: 24px; font-weight: 700; color: var(--petrole-900); }
.voc-app .option .prix .unite { font-size: 14px; font-weight: 400; color: var(--ardoise-500); }
.voc-app .option .detail { font-size: 14px; color: var(--ardoise-500); margin: 8px 0 14px; }

/* --- Journal de facturation : visible par le client, toujours --- */
.voc-app table.journal { width: 100%; border-collapse: collapse; font-size: 14px; }
.voc-app table.journal th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--petrole-900); border-bottom: 2px solid var(--petrole-700); padding: 8px 10px 8px 0;
}
.voc-app table.journal td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--filet); }
.voc-app table.journal td.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Mention d'attente : ce que la machine ne fait pas encore, dit franchement --- */
.voc-app .attente {
  background: var(--ambre-050);
  border-left: 3px solid var(--ambre-600);
  padding: 14px 18px;
  font-size: 14px;
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

/* --- Petits écrans : les grilles se déplient en une colonne. --- */
@media (max-width: 680px) {
  .voc-app .chiffres,
  .voc-app .options { grid-template-columns: 1fr; }
  .voc-app .conteneur { padding: 20px 16px 48px; }
  .voc-app h1 { font-size: 23px; }
  .voc-app .livrable { flex-wrap: wrap; }
  .voc-app .livrable .action { margin-left: 0; }
  .voc-app table.journal { font-size: 13px; }
}

/* =========================================================================
   3. LE SITE PUBLIC — mêmes jetons, quelques blocs de plus
   ========================================================================= */

.voc-app .barre nav { margin-left: auto; display: flex; gap: 22px; align-items: baseline; }
.voc-app .barre nav a {
  color: var(--blanc); text-decoration: none; font-size: 15px; opacity: 0.9;
  margin-left: 22px; /* filet de sécurité : ne pas dépendre du gap seul */
}
.voc-app .barre nav a:first-child { margin-left: 0; }
.voc-app .barre nav a:hover,
.voc-app .barre nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.voc-app .barre .marque a { color: var(--blanc); text-decoration: none; }

/* La promesse, en tête de page publique */
.voc-app .promesse { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.voc-app .promesse .conteneur { padding: 44px 24px 36px; }
.voc-app .promesse h1 { font-size: 34px; max-width: 20em; }
.voc-app .promesse .chapeau { font-size: 18px; max-width: 42em; margin-bottom: 24px; }

.voc-app section.bloc { padding: 36px 0 8px; }
.voc-app section.bloc > h2 { font-size: 22px; margin-bottom: 4px; }
.voc-app .intro { color: var(--ardoise-500); max-width: 46em; margin-bottom: 20px; }

/* Les trois étapes du parcours, à l'écran */
.voc-app .etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.voc-app .etape {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 20px; position: relative;
}
.voc-app .etape .n {
  display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center;
  background: var(--petrole-700); color: var(--blanc); border-radius: 50%;
  font-weight: 700; font-size: 14px; margin-bottom: 10px;
}
.voc-app .etape h3 { font-size: 16px; color: var(--petrole-900); margin: 0 0 6px; }
.voc-app .etape p { font-size: 14px; margin: 0 0 10px; }
.voc-app .etape .livrable { display: block; font-size: 13px; color: var(--ardoise-500); padding: 0; border: 0; }
.voc-app .etape .tarif { font-weight: 700; color: var(--petrole-900); }

/* Le barème, en tableau. Colonnes fixées : la prestation prend la place, les
   rangs de prix restent alignés et lisibles d'un coup d'œil. */
.voc-app table.bareme {
  width: 100%; border-collapse: collapse; font-size: 15px;
  background: var(--blanc); table-layout: fixed;
}
.voc-app table.bareme th {
  text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--petrole-900); border-bottom: 2px solid var(--petrole-700); padding: 10px 12px;
}
.voc-app table.bareme th:first-child { width: 3.2em; }
.voc-app table.bareme th:nth-child(2) { width: auto; }
.voc-app table.bareme th:nth-child(n+3) { width: 7.5em; text-align: right; }
.voc-app table.bareme td { padding: 12px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.voc-app table.bareme td.code { font-weight: 700; color: var(--petrole-700); }
.voc-app table.bareme td.prix {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700;
}
.voc-app table.bareme td.forfait-lot { white-space: normal; }

@media (max-width: 680px) {
  .voc-app table.bareme { table-layout: auto; font-size: 14px; }
  .voc-app table.bareme th, .voc-app table.bareme td { padding: 8px 6px; }
  .voc-app table.bareme th:nth-child(n+3) { width: auto; }
}

/* Le configurateur */
.voc-app .champ { margin-bottom: 18px; }
.voc-app .champ > label { display: block; font-weight: 600; color: var(--petrole-900); margin-bottom: 6px; }
.voc-app .champ .aide { font-size: 13px; color: var(--ardoise-500); margin: 0 0 8px; }
.voc-app select, .voc-app input[type="number"] {
  font: inherit; font-size: 15px; padding: 9px 12px; width: 100%; max-width: 26em;
  border: 1px solid var(--ardoise-500); border-radius: var(--rayon);
  background: var(--blanc); color: var(--ardoise-700);
}
.voc-app select:focus-visible, .voc-app input:focus-visible {
  outline: 3px solid var(--ambre-600); outline-offset: 1px;
}
.voc-app .champ[hidden] { display: none; }

.voc-app .devis { border-top: 2px solid var(--petrole-700); margin-top: 8px; padding-top: 18px; }
.voc-app .devis .ligne { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.voc-app .devis .ligne .quoi { flex: 1; }
.voc-app .devis .ligne .note { display: block; font-size: 13px; color: var(--ardoise-500); margin-top: 4px; }
.voc-app .devis .ligne .montant { font-weight: 700; color: var(--petrole-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.voc-app .devis .total { display: flex; gap: 16px; padding: 16px 0 4px; font-size: 19px; }
.voc-app .devis .total .quoi { flex: 1; font-weight: 700; color: var(--petrole-900); }
.voc-app .devis .total .montant { font-weight: 700; color: var(--petrole-900); font-variant-numeric: tabular-nums; }
.voc-app .devis .ttc { font-size: 14px; color: var(--ardoise-500); }

.voc-app footer.pied {
  border-top: 1px solid var(--filet); margin-top: 40px; padding: 24px;
  font-size: 14px; color: var(--ardoise-500); text-align: center; background: var(--blanc);
}
.voc-app footer.pied a { color: var(--petrole-700); }

@media (max-width: 680px) {
  .voc-app .etapes { grid-template-columns: 1fr; }
  .voc-app .promesse h1 { font-size: 26px; }
  .voc-app .barre { flex-wrap: wrap; }
  .voc-app .barre nav { margin-left: 0; width: 100%; gap: 16px; }
}