/* theme.css — direction artistique FABRIQUÉE. NE PAS ÉDITER À LA MAIN.
 * Site : prise-iledefrance.fr — DA V4 « Institutionnel sobre », famille « vert profond »,
 * tirage f6ea1b667e26. Généré le 2026-10-31 par
 * common/infra/fabriquer_theme.py, depuis common/da/directions.json.
 * La STRUCTURE reste celle du Worker ; ce thème pose ses tokens et le
 * style des treize composants du contrat. */

:root{
  --fond: #ffffff;
  --encre: #1b2322;
  --gris: #596b68;
  --trait: #b1bdbc;
  --trait-epaisseur: 1px;
  --accent: #17413b;
  --accent-encre: #ffffff;
  --lien: #17413b;
  --alerte: #f4faf9;
  --famille-titres: Tahoma, 'Segoe UI', Geneva, 'DejaVu Sans', sans-serif;
  --famille-corps: Tahoma, 'Segoe UI', Geneva, 'DejaVu Sans', sans-serif;
  --interligne: 1.63;
  --rayon: 4px;
  --rayon-pilule: 4px;
  --ombre: 0 1px 2px rgba(0,0,0,.08);
  --espace-s: 0.5rem;
  --espace-m: 1.5rem;
  --espace-l: 3.25rem;
  --gouttiere: 1.125rem;
  --accent-fonce: #0c2320;
  --nuance: #466958;
}

/* page et texte */
body{background:var(--fond);color:var(--encre);font-family:var(--famille-corps);line-height:var(--interligne)}
h1,h2,h3{font-family:var(--famille-titres);font-weight:600;color:var(--encre);line-height:1.2}
a{color:var(--lien);text-decoration-thickness:var(--trait-epaisseur);text-underline-offset:.18em;transition:color 200ms,background-color 200ms,border-color 200ms}
a:hover{color:var(--accent-fonce)}
.chapo,.intro{color:var(--gris)}
.surtitre{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:700}
.marque{color:var(--encre);font-family:var(--famille-titres);font-weight:600}

/* le ton d'accent désaturé de la DA : repères secondaires */
.surtitre{color:var(--nuance)}

/* titres de section numérotés — brief de la DA */
main{counter-reset:section}
main section:not(.devis):not(.cta) > h2::before{counter-increment:section;content:counter(section) ". ";color:var(--nuance);font-variant-numeric:tabular-nums}

/* bouton */
.bouton{display:inline-block;padding:.7rem 1.25rem;line-height:1.3;background:var(--accent);color:var(--accent-encre);border:var(--trait-epaisseur) solid var(--accent);border-radius:var(--rayon);font-family:var(--famille-corps);font-weight:700;text-decoration:none;transition:color 200ms,background-color 200ms,border-color 200ms}
.bouton:hover,.bandeau nav a.nav-devis:hover{background:var(--accent-fonce);border-color:var(--accent-fonce);color:var(--accent-encre)}
.bouton:focus-visible,.bandeau nav a.nav-devis:focus-visible{outline:2px solid var(--encre);outline-offset:3px}

/* encadre_limites, encadre_titre */
.limites{background:var(--alerte);border:0;border-left:6px solid var(--accent);border-radius:0 var(--rayon) var(--rayon) 0;color:var(--encre);padding:var(--espace-m) var(--espace-m) var(--espace-m) calc(var(--espace-m) + 2px)}
.limites strong{display:block;font-family:var(--famille-titres);font-weight:700;margin-bottom:var(--espace-s)}

/* tableau_conteneur, tableau, tableau_entete, tableau_cellule, tableau_legende */
.tableau-defilant{overflow-x:auto;margin:var(--espace-m) 0;border-radius:var(--rayon)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{text-align:left;font-weight:700}
td{color:var(--encre)}
table{border:var(--trait-epaisseur) solid var(--trait)}
th,td{border-bottom:var(--trait-epaisseur) solid var(--trait)}
th{background:var(--accent);color:var(--accent-encre)}
table caption{caption-side:top;text-align:left;color:var(--gris);font-size:.875rem;padding:0 0 var(--espace-s)}

/* faq_question, faq_reponse */
.faq dt{font-family:var(--famille-titres);font-weight:700;color:var(--encre);margin-top:var(--espace-m);padding-top:var(--espace-s);border-top:var(--trait-epaisseur) solid var(--trait)}
.faq dd{color:var(--encre);margin:var(--espace-s) 0 0}

/* formulaire_champ */
input, select, textarea{font:inherit;color:var(--encre);background:var(--fond);border:var(--trait-epaisseur) solid var(--gris);border-radius:var(--rayon);padding:var(--espace-s) .6rem;transition:color 200ms,background-color 200ms,border-color 200ms}
input:hover, select:hover, textarea:hover{border-color:var(--encre)}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* fil_ariane */
.ariane{font-size:.8125rem}
.ariane a{color:var(--gris);text-decoration:underline}
.ariane a:hover{color:var(--encre)}

/* pied — les marges sont celles du réseau, jamais écrasées ici */
.pied{color:var(--gris);border-top:var(--trait-epaisseur) solid var(--trait)}
.pied a:hover{color:var(--encre);text-decoration:underline}

/* D2 — les badges ne sont pas des boutons : une ligne de texte discret, sans cadre */
.hero .badges{border-top:0;gap:.25rem 1.25rem;padding:0;margin:.75rem 0 0}
.hero .badges li{border:0;padding:0;border-radius:0;font-size:.8125rem}
.hero .badges li::before{content:"✓ "}

/* visuel 2 — l'encart d'action prend l'encadré de la direction */
.encart-action{background:var(--alerte);border:0;border-left:6px solid var(--accent);border-radius:0 var(--rayon) var(--rayon) 0;color:var(--encre);padding:var(--espace-m) var(--espace-m) var(--espace-m) calc(var(--espace-m) + 2px)}

/* D116 — identité : logo devant le nom (common/identite/identite.py) */
.marque{display:inline-flex;align-items:center;gap:.5rem}.marque-logo{flex:none;width:2.5rem;height:2.5rem}@media (max-width:40rem){.marque-logo{width:2rem;height:2rem}}