/* Cerveau de campagne — charte HumAIn, fond clair, accent or.
   Meme langage visuel que les dossiers PDF remis a l'equipe. */

:root {
  --encre: #14171c;
  --texte: #3d444d;
  --doux: #6b7280;
  --or: #b8963e;
  --or-fonce: #8a6d2f;
  --creme: #faf7f0;
  --bord: #e6e9ed;
  --bord-clair: #eef1f4;
  --fond: #ffffff;
  --rail: #14171c;
  --ok: #2f7d55;
  --alerte: #a8412f;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Un display: grid d'auteur bat l'attribut hidden de la feuille du navigateur.
   Sans cette regle, la porte reste affichee par-dessus l'application. */
[hidden] { display: none !important; }
body {
  font-family: var(--sans); color: var(--encre); background: var(--fond);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

/* ─── porte ─── */
.porte {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--encre); padding: 24px;
}
.porte-carte { width: min(430px, 100%); color: #fff; }
.porte-eyebrow {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or); font-weight: 600; margin-bottom: 26px;
}
.porte h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.5px; }
.porte-rule { height: 2px; width: 62px; background: var(--or); margin: 18px 0 16px; }
.porte-sub { color: #9aa0a6; font-size: 13px; margin: 0 0 30px; }
.porte label {
  display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or); font-weight: 700; margin-bottom: 8px;
}
.porte input {
  width: 100%; padding: 13px 15px; background: transparent; color: #fff;
  border: 1px solid #3a3f46; border-radius: 3px; letter-spacing: .3em;
}
.porte input:focus { outline: none; border-color: var(--or); }
.porte button[type=submit] {
  width: 100%; margin-top: 14px; padding: 13px; background: var(--or); color: var(--encre);
  border: 0; border-radius: 3px; font-weight: 600; letter-spacing: .04em;
}
.porte button[type=submit]:hover { background: #c9a75a; }
.porte-err { min-height: 20px; margin-top: 10px; color: #e3907f; font-size: 13px; }
.porte-foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid #2a2f36;
              font-size: 11px; color: #6b7280; }

/* ─── coque ─── */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.rail {
  background: var(--rail); color: #cfd3d8; padding: 26px 0 20px;
  display: flex; flex-direction: column; position: sticky; top: 0;
  /* Sur iOS, 100vh inclut la barre d'adresse et coupe le bas du menu.
     dvh suit la hauteur reellement visible ; la premiere ligne sert de repli. */
  height: 100vh; height: 100dvh;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.marque { padding: 0 22px 24px; }
.marque-t { font-family: var(--serif); font-size: 19px; color: #fff; line-height: 1.1; }
.marque-s { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
            color: var(--or); font-weight: 700; margin-top: 5px; }
#nav { display: flex; flex-direction: column; }
/* Le rail fait la hauteur de l'ecran, mais rien n'y defilait : passe 18 entrees,
   le bas du menu etait purement coupe et le bouton de sortie inatteignable. Le
   nav prend la place restante et defile ; min-height: 0 est indispensable, sans
   lui un enfant flex refuse de retrecir sous son contenu. Borne au bureau : en
   dessous de 861 px le rail devient une barre horizontale, ou ces regles
   n'auraient aucun sens. */
@media (min-width: 861px) {
  #nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
.nav-sep {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: #6b7280; font-weight: 700; padding: 16px 22px 5px;
}
#nav button { position: relative; display: flex; align-items: center; gap: 8px; }
.badge {
  margin-left: auto; margin-right: 4px; background: var(--or); color: var(--encre);
  font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
/* actions rapides dans les tableaux — eviter d'ouvrir une fenetre pour un changement d'etat */
.rapide { border: 1px solid var(--bord); background: #fff; border-radius: 3px;
          padding: 3px 7px; font-size: 11.5px; color: var(--texte); }
.rapide:hover { border-color: var(--or); background: var(--creme); }
td .rapide + .rapide { margin-left: 4px; }
/* joindre un contact depuis la liste — discret, mais assez large pour le pouce */
.joindre { display: inline-block; padding: 2px 0; font-size: 11.5px;
           color: var(--texte); text-decoration: none; border-bottom: 1px dotted var(--bord);
           white-space: nowrap; }
.joindre:hover { color: var(--or); border-bottom-color: var(--or); }
#nav button {
  background: none; border: 0; color: #aab0b7; text-align: left;
  padding: 10px 22px; border-left: 2px solid transparent; font-size: 13.5px;
}
#nav button:hover { color: #fff; background: rgba(255,255,255,.04); }
#nav button.actif { color: #fff; border-left-color: var(--or); background: rgba(184,150,62,.1); }
.rail-bas { margin-top: auto; padding: 18px 22px 0; border-top: 1px solid #262b31; }
.rail-bas label { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
                  color: var(--or); font-weight: 700; display: block; margin-bottom: 6px; }
.rail-bas input {
  width: 100%; padding: 7px 9px; background: #1c2127; color: #fff;
  border: 1px solid #333940; border-radius: 3px; font-size: 13px;
}
.lien { background: none; border: 0; color: var(--doux); font-size: 12px;
        padding: 12px 0 0; text-decoration: underline; }
.lien:hover { color: #fff; }

/* Quitter : un vrai bouton, pas un lien en petit. Il etait auparavant un texte
   souligne de 12 px, dans une zone qui debordait de l'ecran — invisible en
   pratique. Cible large aussi pour le pouce sur telephone. */
.rail-bas .quitter {
  display: block; width: 100%; margin-top: 14px; padding: 10px 12px;
  background: rgba(255,255,255,.05); border: 1px solid #333940; border-radius: 3px;
  color: #cfd3d8; font-size: 13px; text-align: center; letter-spacing: .02em;
}
.rail-bas .quitter:hover {
  background: rgba(168,65,47,.16); border-color: #7a3427; color: #fff;
}

.vue { padding: 34px 40px 60px; max-width: 1180px; }

/* ─── entetes ─── */
.chap { font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
        color: var(--or-fonce); font-weight: 700; margin-bottom: 5px; }
.vue h2 { font-size: 26px; letter-spacing: -.3px; }
.h2-rule { height: 2px; width: 42px; background: var(--or); margin: 12px 0 22px; }
.vue h3 { font-size: 16px; margin: 30px 0 10px; }
.intro { color: var(--texte); max-width: 74ch; margin: 0 0 20px; }

/* ─── cartes chiffres ─── */
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.carte {
  border-top: 2px solid var(--or); padding: 13px 0 4px;
}
.carte .v { font-family: var(--serif); font-size: 27px; line-height: 1.05; }
.carte .k { font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
            color: var(--or-fonce); font-weight: 700; margin-top: 6px; }
.carte .s { font-size: 12px; color: var(--doux); margin-top: 4px; }
.carte.alerte .v { color: var(--alerte); }

.bloc {
  background: var(--creme); border-left: 3px solid var(--or);
  padding: 16px 20px; margin: 22px 0;
}
.bloc .lab { font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
             color: var(--or-fonce); font-weight: 700; display: block; margin-bottom: 8px; }
.bloc p:last-child { margin-bottom: 0; }
.encadre { border: 1px solid var(--bord); padding: 15px 19px; margin: 20px 0; }
.encadre p:last-child { margin-bottom: 0; }

/* ─── tableaux ─── */
table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 4px; }
th {
  text-align: left; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--or-fonce); border-bottom: 1.5px solid var(--or);
  padding: 0 10px 7px 0; font-weight: 700; white-space: nowrap;
}
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--bord-clair);
     color: var(--texte); vertical-align: top; }
td.nom { color: var(--encre); font-weight: 600; }
td.n, th.n { text-align: right; }
tbody tr:hover td { background: #fcfaf5; }
tr.cliquable { cursor: pointer; }

/* ─── pastilles ─── */
.p { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
     font-weight: 600; white-space: nowrap; }
.p-a_contacter { background: #f0f2f4; color: #55606b; }
.p-contacte    { background: #e8eef6; color: #2f5c93; }
.p-rdv         { background: #efe7f6; color: #6b46a6; }
.p-acquis      { background: #e4f2ea; color: var(--ok); }
.p-refus       { background: #f6e8e5; color: var(--alerte); }
.p-a_faire     { background: #f0f2f4; color: #55606b; }
.p-en_cours    { background: #fdf3dd; color: #8a6d2f; }
.p-fait        { background: #e4f2ea; color: var(--ok); }
.p-a_travailler{ background: #f0f2f4; color: #55606b; }
.p-brouillon   { background: #f0f2f4; color: #55606b; }
.p-valide, .p-publie { background: #e4f2ea; color: var(--ok); }
.p-a_valider, .p-en_attente { background: #fdf3dd; color: #8a6d2f; }
.p-a_revoir { background: #f6e8e5; color: var(--alerte); }
.p-prevue { background: #e8eef6; color: #2f5c93; }
.p-terminee { background: #e4f2ea; color: var(--ok); }
.p-critique    { background: #f6e8e5; color: var(--alerte); }
.p-1 { background: var(--creme); color: var(--or-fonce); }
.p-2 { background: #f3f5f7; color: #55606b; }
.p-3 { background: #f7f8f9; color: #8b939b; }

/* ─── barre d'outils ─── */
.outils { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 4px 0 18px; }
.outils input[type=search], .outils select, .champ {
  padding: 8px 11px; border: 1px solid var(--bord); border-radius: 3px; background: #fff;
}
.outils input[type=search] { min-width: 210px; }
.btn {
  padding: 8px 15px; border: 1px solid var(--encre); background: var(--encre);
  color: #fff; border-radius: 3px; font-size: 13px; font-weight: 500;
}
.btn:hover { background: #000; }
.btn.sec { background: #fff; color: var(--encre); }
.btn.sec:hover { background: var(--creme); }
.btn.or { background: var(--or); border-color: var(--or); color: var(--encre); font-weight: 600; }
.btn.mini { padding: 4px 10px; font-size: 12px; }
.pousse { margin-left: auto; }

/* ─── communes ─── */
.communes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.commune {
  border: 1px solid var(--bord); padding: 15px 17px; border-radius: 4px; background: #fff;
}
.commune.p1 { border-left: 3px solid var(--or); background: var(--creme); }
.commune h4 { font-family: var(--serif); font-size: 16px; margin: 0 0 3px; font-weight: 600; }
.commune .meta { font-size: 12px; color: var(--doux); margin-bottom: 10px; }
.commune dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
              font-size: 12.5px; margin: 0 0 10px; }
.commune dt { color: var(--doux); }
.commune dd { margin: 0; text-align: right; color: var(--encre); font-weight: 600; }

/* ─── formulaires ─── */
.form { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }
.form .large { grid-column: 1 / -1; }
.form label { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
              color: var(--or-fonce); font-weight: 700; margin-bottom: 5px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bord); border-radius: 3px;
}
.form textarea { min-height: 86px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--or);
}

/* ─── modale ─── */
.modale { position: fixed; inset: 0; z-index: 90; background: rgba(20,23,28,.5);
          display: grid; place-items: center; padding: 22px; }
.modale-boite {
  background: #fff; width: min(720px, 100%); max-height: 88vh; overflow: auto;
  padding: 30px 34px; border-radius: 5px; position: relative;
}
.modale-x { position: absolute; top: 12px; right: 16px; background: none; border: 0;
            font-size: 26px; line-height: 1; color: var(--doux); }
.modale h3 { margin: 0 0 4px; font-size: 20px; }

/* ─── toast ─── */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 120;
  background: var(--encre); color: #fff; padding: 11px 20px; border-radius: 4px;
  font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
.vide { color: var(--doux); padding: 26px 0; font-style: italic; }

/* ─── barre de présentateur ───
   Reste visible pendant qu'on montre une vue, pour revenir à l'étape exacte. */
.barre-pres {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--encre); color: #fff;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 22px rgba(20,23,28,.22);
  animation: monte .18s cubic-bezier(.2,.7,.3,1);
}
.bp-gauche { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.bp-num {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--or); font-weight: 700; white-space: nowrap;
}
.bp-titre {
  font-family: var(--serif); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-actions { display: flex; gap: 7px; flex-wrap: wrap; }
body.avec-barre .vue { padding-bottom: 96px; }
.barre-pres .btn.sec { background: transparent; color: #e6e9ed; border-color: #3a3f46; }
.barre-pres .btn.sec:hover { background: #23282f; color: #fff; }
@media (max-width: 700px) {
  .bp-titre { display: none; }
  .barre-pres { padding-left: 12px; padding-right: 12px; }
  .bp-actions { flex: 1; justify-content: flex-end; }
}
.puces { padding-left: 18px; color: var(--texte); }
.puces li { margin-bottom: 6px; }
.puces li::marker { color: var(--or); }

/* ═══════════════ FINITION ═══════════════ */

/* Transitions courtes : on sent la reponse sans attendre l'animation. */
.btn, .rapide, #nav button, .commune, .p, input, select, textarea {
  transition: background-color .14s ease, border-color .14s ease,
              color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.btn:active, .rapide:active { transform: translateY(1px); }
.commune:hover { border-color: #d8dde2; box-shadow: 0 2px 10px rgba(20,23,28,.05); }
.commune.p1:hover { border-color: var(--or); }

/* Un anneau de focus visible partout : c'est aussi une exigence d'accessibilite. */
:focus-visible {
  outline: 2px solid var(--or); outline-offset: 2px; border-radius: 2px;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(184,150,62,.14);
}

/* Chiffres alignes en colonne dans les tableaux et les cartes. */
.carte .v, td.n, th.n, .facts .v, .big {
  font-variant-numeric: tabular-nums lining-nums;
}

/* La modale arrive au lieu d'apparaitre. */
.modale-boite {
  box-shadow: 0 24px 60px rgba(20,23,28,.24);
  animation: monte .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }
.toast { animation: monte .18s cubic-bezier(.2,.7,.3,1); }

/* Barre laterale : degrade tres discret, evite le noir plat. */
.rail { background: linear-gradient(180deg, #171b21 0%, #12151a 100%); }
#nav button.actif { box-shadow: inset 3px 0 0 -1px var(--or); }

/* Le tableau respire, et la premiere colonne tient sur les longs noms. */
td.nom { max-width: 22ch; }
.vue h2 { text-wrap: balance; }
.intro { text-wrap: pretty; }

/* Impression : l'equipe imprimera des listes de contacts. */
@media print {
  .rail, .outils, .modale, .toast { display: none !important; }
  .vue { padding: 0; max-width: none; }
  a[href]::after { content: ""; }
}

/* ═══════════════ APPAREILS TACTILES ═══════════════
   Sous 16 px, iOS zoome au focus et disloque la mise en page. Sous 44 px de haut,
   une cible tactile se rate. Ces deux regles sont des exigences, pas du confort. */
@media (hover: none), (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; }
  .btn, .rapide, #nav button, .modale-x, .lien { min-height: 44px; }
  .btn.mini { min-height: 38px; }
  th, td { padding-top: 11px; padding-bottom: 11px; }
  tr.cliquable td:first-child { text-decoration: underline; text-decoration-color: var(--bord); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
          align-items: center; padding: 14px 16px; gap: 8px; }
  .marque { padding: 0 14px 0 0; }
  #nav { flex-direction: row; flex-wrap: wrap; }
  #nav button { padding: 6px 11px; border-left: 0; border-bottom: 2px solid transparent; }
  #nav button.actif { border-left: 0; border-bottom-color: var(--or); }
  .rail-bas { margin: 0; padding: 0; border: 0; display: flex; gap: 8px; align-items: center; }
  .rail-bas label { display: none; }
  /* En barre horizontale, Quitter se range a cote du prenom au lieu de prendre
     toute la largeur comme sur le rail vertical. */
  .rail-bas .quitter { width: auto; margin-top: 0; padding: 8px 14px; white-space: nowrap; }
  .vue {
    padding: 22px 18px 50px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
  /* La barre laterale devient une barre superieure : elle ne doit ni prendre toute
     la hauteur, ni passer sous l'encoche. */
  .rail { height: auto; padding-top: max(14px, env(safe-area-inset-top)); }
  /* Les tableaux larges defilent dans leur cadre, jamais la page entiere. */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  td.nom { max-width: none; white-space: normal; }
  .form { grid-template-columns: 1fr; }
  .socs { columns: 1; }
  .modale-boite { padding: 24px 20px; max-height: 92vh; max-height: 92dvh; }
}

/* ─── decoupage des secteurs ───────────────────────────────────────────
   La carte a besoin de largeur : la vue se desserre pour cet onglet.
   Le contenu vit dans une iframe, ses styles ne peuvent donc pas fuir
   dans l'application ni l'inverse. */
.vue:has(.secteurs-cadre) { max-width: 1560px; }

.secteurs-actions { display: flex; gap: 22px; align-items: baseline; margin-bottom: 14px; }
.secteurs-actions .lien { padding: 0; cursor: pointer; }

.secteurs-cadre {
  width: 100%; height: 82vh; min-height: 620px;
  border: 1px solid var(--filet, #d3d9e0); background: #fff; display: block;
}
@media (max-width: 900px) {
  .secteurs-cadre { height: 76vh; min-height: 480px; }
}
@media print {
  .secteurs-actions { display: none; }
}

/* ─── impression ───────────────────────────────────────────────────────
   L'equipe travaille dehors. Le telephone sert a consulter, le papier sert a
   agir : une tournee de porte-a-porte se fait avec une feuille et un stylo, pas
   en faisant defiler un ecran sous la pluie. Ces regles ne sont donc pas de la
   cosmetique, c'est l'outil de terrain.

   Trois pieges corriges ici, aucun n'est visible a l'ecran :
   1. Sans display:table-header-group, l'en-tete d'un tableau qui passe la page
      disparait, et la deuxieme feuille devient illisible.
   2. Sans print-color-adjust:exact, le navigateur supprime les aplats : les
      lignes mises en avant redeviennent identiques aux autres.
   3. Une ligne coupee en deux par un saut de page fait perdre une porte.
   Le bandeau d'en-tete porte la DATE D'EDITION : une feuille de campagne sans
   date devient dangereuse des qu'elle traine une semaine dans une voiture. */

#impr-entete { display: none; }

@page { size: A4 portrait; margin: 14mm 12mm 15mm; }

@media print {
  html, body {
    background: #fff; color: #14181f;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .app { display: block; }
  .rail, .outils, .modale, .toast, .rail-bas, #nav, .secteurs-actions,
  .btn, button, input, select, textarea { display: none !important; }
  .vue { padding: 0; max-width: none; margin: 0; }

  #impr-entete {
    display: block; margin: 0 0 8mm; padding: 0 0 3mm;
    border-bottom: 1.2pt solid #14181f;
  }
  .impr-marque {
    font-size: 8pt; letter-spacing: .09em; text-transform: uppercase;
    color: #0f3d5c; margin-bottom: 2mm;
  }
  .impr-titre { font-size: 17pt; font-weight: 700; line-height: 1.15; }
  .impr-date { font-size: 8.5pt; color: #4b5563; margin-top: 2mm; }

  .chap, .h2-rule { display: none; }
  h2 { font-size: 13pt; margin: 0 0 3mm; page-break-after: avoid; }
  h3 { font-size: 11pt; page-break-after: avoid; }
  .intro { font-size: 9pt; color: #374151; margin-bottom: 5mm; }

  table {
    width: 100%; display: table; border-collapse: collapse;
    font-size: 9pt; white-space: normal; overflow: visible;
  }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, td, th, .carte, .bloc { page-break-inside: avoid; break-inside: avoid; }
  th {
    text-align: left; font-size: 7.5pt; letter-spacing: .06em;
    text-transform: uppercase; border-bottom: 1pt solid #14181f; padding: 2mm 2mm;
  }
  td { border-bottom: .5pt solid #c9d0d8; padding: 2.2mm 2mm; vertical-align: top; }
  td.nom { max-width: none; white-space: normal; }

  /* Colonne laissee vide pour ecrire a la main. Une tournee se note au stylo. */
  .impr-case { width: 9mm; }
  .impr-case::after {
    content: ""; display: block; width: 4.5mm; height: 4.5mm;
    border: .8pt solid #14181f;
  }
  .impr-ligne { border-bottom: .5pt solid #9aa4b0; height: 7mm; }

  a { color: inherit; text-decoration: none; }
  a[href]::after { content: ""; }
  .vide { font-size: 9pt; color: #6b7480; }
  .saut { page-break-before: always; }
  .cherche, .demande, .suggestions { display: none !important; }
  /* La reponse de terrain s'imprime : c'est la fiche qu'on emporte avant un debat. */
  .reponse { border: .8pt solid #14181f; padding: 4mm; margin-bottom: 5mm; }
}

/* ─── recherche unique ─────────────────────────────────────────────────
   Dans le rail, donc atteignable depuis n'importe quelle vue. */
.cherche { padding: 0 16px 14px; }
.cherche input {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 3px;
  background: rgba(255, 255, 255, .06); color: #fff;
  font: inherit; font-size: 13px;
}
.cherche input::placeholder { color: rgba(255, 255, 255, .45); }
.cherche input:focus {
  outline: none; border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
}

/* ─── reponse de terrain ───────────────────────────────────────────────
   Trois etats visuellement distincts, parce que la nuance entre « position
   validee », « position pas encore arretee » et « rien d'etabli » est
   exactement ce qu'un benevole presse doit voir sans lire. */
.reponse {
  border: 1px solid var(--filet, #d3d9e0); border-left: 3px solid #0f3d5c;
  background: #f7f9fb; padding: 20px 22px; margin: 4px 0 30px;
}
.reponse-alerte { border-left-color: #b45309; background: #fdf8f1; }
.reponse-vide { border-left-color: #6b7480; background: #f6f7f8; }
.reponse-lab {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #0f3d5c; margin: 0 0 8px;
}
.reponse-alerte .reponse-lab { color: #b45309; }
.reponse-vide .reponse-lab { color: #6b7480; }
.reponse-msg { margin: 0 0 4px; font-weight: 500; }
.reponse-pos { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e3e8ee; }
.reponse-pos h3 { margin: 0 0 6px; font-size: 15px; }
.reponse-pos p { margin: 0 0 6px; }
.reponse-fin { color: #4b5563; font-size: 14px; }

/* ─── assistant « Que dit-on sur… » ────────────────────────────────────
   Le champ est large et le bouton explicite : la question se pose souvent sur
   un telephone, debout, entre deux portes. */
.demande { display: flex; gap: 10px; margin: 6px 0 18px; flex-wrap: wrap; }
.demande input {
  flex: 1 1 320px; min-width: 0; padding: 12px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--filet, #d3d9e0); border-radius: 3px; background: #fff;
}
.demande input:focus { outline: none; border-color: #0f3d5c; }
.demande .btn { flex: 0 0 auto; }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; }
.suggestions-lab {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #6b7480; margin-right: 4px;
}
.puce {
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--filet, #d3d9e0); border-radius: 999px;
  background: #fff; color: #14181f;
}
.puce:hover { border-color: #0f3d5c; color: #0f3d5c; }

@media (hover: none), (max-width: 860px) {
  .demande .btn { width: 100%; }
  .puce { min-height: 38px; }
}

/* Porte d'entree : ces 3 regles remplacent des attributs style= poses dans
   index.html. Le CSP du vhost declare style-src 'self' sans 'unsafe-inline',
   donc tout style en dur est rejete par le navigateur et la porte s'affiche
   de travers (la note passait en capitales dorees, le champ en lettres
   ecartees). Ne pas les remettre en ligne. Corrige le 23.08.2026. */
.porte label.porte-label-espace { margin-top: 16px; }
.porte-note {
  text-transform: none; letter-spacing: normal; color: #6b7280; font-weight: 400;
}
.porte input.porte-input-texte { letter-spacing: normal; }