/* =========================================================================
   2c2e-commun.css — Charte graphique commune à tous les outils 2C2E
   -------------------------------------------------------------------------
   Ce fichier est IDENTIQUE dans chaque outil (Formulaires, Aides, ...) — une
   copie conforme dans chacun, pas un lien entre sites, pour que chaque outil
   continue de fonctionner hors-ligne même si un autre outil est indisponible.
   NE PAS modifier ce fichier dans un seul outil : le même changement doit
   être répercuté à l'identique dans tous les outils qui l'utilisent.
   Ce que chaque outil garde de son côté (dans son propre css/style.css) :
   son fond d'écran, sa mise en page propre, ses éléments spécifiques.
   ========================================================================= */

:root {
  --main-blue: #004a99;
  --accent-green: #28a745;
  --accent-orange: #fd7e14;
  --accent-red: #dc3545;
  --accent-cyan: #0aa2c0;
  --bord: #ccc;
  --overlay: rgba(255, 255, 255, 0.9);

  /* Teintes des 4 catégories de revenus ANAH — reprises du document officiel (bleu/jaune/violet/orange) */
  --tres-modeste: #bfe3f4;
  --tres-modeste-dark: #2f7ba3;
  --modeste: #fbe6a2;
  --modeste-dark: #a9820f;
  --intermediaire: #ddd0ea;
  --intermediaire-dark: #6c4a94;
  --superieur: #f6c9b3;
  --superieur-dark: #b5501f;
}

/* ---------------------- Accordéon / champs / boutons (charte commune 2C2E) ---------------------- */
.dt-accordion-header {
  background: white; border: 1px solid var(--bord); border-left: 5px solid var(--main-blue);
  padding: 14px 18px; width: 100%; text-align: left; cursor: pointer; border-radius: 8px;
  font-weight: 700; font-size: 1rem; color: var(--main-blue); margin-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
  scroll-margin-top: 76px; /* laisse la place pour la barre du haut, fixe à l'écran, quand on scrolle vers cet accordéon */
}
.dt-accordion-header.actif { background: var(--main-blue); color: white; border-radius: 8px 8px 0 0; }
.dt-accordion-header .dt-chevron { transition: transform 0.2s ease; }
.dt-accordion-header.actif .dt-chevron { transform: rotate(180deg); }
.dt-accordion-panel {
  display: none; background: white; border: 1px solid var(--bord); border-top: none;
  border-radius: 0 0 8px 8px; padding: 18px; margin-bottom: 4px;
}
.dt-accordion-panel.ouvert { display: block; }
/* Verrou "nue-propriétaire" (aucune aide possible) — voir verifierStatutPropriete() dans
   js/10-identification.js, demande du 2026-10-06. Grisé + interactions souris bloquées ; les
   champs trouvés à l'intérieur sont en plus explicitement désactivés par le JS. */
.panel-verrouille-propriete { opacity: 0.45; pointer-events: none; }
.dt-champ { margin-bottom: 12px; }
.dt-champ label { display: block; font-weight: 600; font-size: 0.85rem; color: #445; margin-bottom: 4px; }
.dt-champ input[type="text"], .dt-champ input[type="date"], .dt-champ input[type="time"], .dt-champ input[type="number"], .dt-champ select, .dt-champ textarea {
  width: 100%; padding: 12px; border: 1px solid var(--bord); border-radius: 6px; font-family: inherit; font-size: 1rem; box-sizing: border-box;
}
.dt-ligne-champs { display: flex; gap: 10px; flex-wrap: wrap; }
.dt-ligne-champs .dt-champ { flex: 1; min-width: 140px; }
.dt-souscartes { background: #f4f6f8; border-radius: 8px; padding: 12px; margin-top: 10px; }
.dt-bouton { background: var(--main-blue); color: white; border: none; padding: 9px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 0.88rem; }
.dt-bouton.rouge { background: var(--accent-red); }
.dt-bouton.vert { background: var(--accent-green); }

/* 🎨 Accordéons : même allure dans TOUS les outils (2026-10-16 : « les menus accordéons de la Fiche contact sont moins agressifs,
   blancs quand ils sont fermés et bleus ouverts ; fais-le pour tous les outils »). Modèle : .dt-accordion-header ci-dessus.
   Écran seulement (l'impression garde ses propres règles). */
@media screen {
  /* Formulaire : lots, situation actuelle, accompagnement, comparaison des devis. --accent garde la distinction des familles
     (brun = situation actuelle, vert d'eau = Adapt) ; sans accent : bleu 2C2E. Classe « ouvert » posée par le JS. */
  body .entete-accordion-poste { background: #fff; color: var(--accent, var(--main-blue)); border: 1px solid var(--bord); border-left: 5px solid var(--accent, var(--main-blue)); }
  body .entete-accordion-poste h4 { color: inherit; }
  body .entete-accordion-poste.ouvert { background: var(--accent, var(--main-blue)); color: #fff; border-color: var(--accent, var(--main-blue)); border-radius: 8px 8px 0 0; }
  /* Visite (sections repliables <details>). */
  body details:not([open]) > summary > .section-title { background: #fff; color: var(--main-blue); border: 1px solid var(--bord); border-left: 5px solid var(--main-blue); border-radius: 8px; box-shadow: none; }
  body details[open] > summary > .section-title { background: var(--main-blue); color: #fff; border: 1px solid var(--main-blue); border-left: 5px solid var(--main-blue); border-radius: 8px 8px 0 0; }
  /* Ventilation (et outils à sections .acc-section) : fermé blanc, ouvert bleu (déjà bleu). */
  body .acc-section.closed > .acc-header { background: #fff; color: var(--main-blue); border-left: 5px solid var(--main-blue); box-shadow: none; }
  /* Stratégie (<details class="st-acc">). */
  body details.st-acc > summary { list-style: none; background: #fff; color: var(--main-blue); border: 1px solid var(--bord); border-left: 5px solid var(--main-blue); border-radius: 8px; padding: 10px 14px; }
  body details.st-acc > summary::-webkit-details-marker { display: none; }
  body details.st-acc[open] > summary { background: var(--main-blue); color: #fff; border-color: var(--main-blue); border-radius: 8px 8px 0 0; }
  body details.st-acc[open] > summary span { color: inherit !important; opacity: .85; }
}
/* 📐 Contenu des accordéons OUVERTS décalé, avec un filet à gauche (2026-10-17 : « dans tous les menus accordéon, quand tu les ouvres,
   décaler un peu le contenu des parties pour mieux les identifier »). Accordéons des outils, parties de Travaux, lots, et tous les
   <details> (Stratégie, Paramétrage…). Rien ne change à l'impression. */
.dt-accordion-panel.ouvert { padding-left: 14px; margin-left: 6px; border-left: 3px solid #c9d8ee; }
[data-partie-contenu] { padding-left: 12px; margin-left: 6px; border-left: 3px solid #cfd8dc; }
.corps-accordion-poste { padding-left: 12px; margin-left: 6px; border-left: 3px solid #e1e8f2; }
details[open] > summary ~ * { margin-left: 14px; }
details[open] { border-left: 3px solid #dbe5f2; padding-left: 4px; }
@media print {
  .dt-accordion-panel.ouvert, [data-partie-contenu], .corps-accordion-poste { padding-left: 0; margin-left: 0; border-left: none; }
  details[open] > summary ~ * { margin-left: 0; }
  details[open] { border-left: none; padding-left: 0; }
}