/* ============================================================
   style.css — Feuille de styles commune du site SPA IARD
   Chargée par toutes les pages applicatives :
     <link rel="stylesheet" href="style.css?v=1">
   Chaque page peut ajuster (largeur du conteneur, variantes) via
   un court bloc <style> qui suit ce lien.
   Les questionnaires publics utilisent questionnaire.css.
   ============================================================ */

/* ─── Base ─── */
:root{
  --bleu:#1d3557; --bleu-clair:#457b9d; --accent:#e63946; --fond:#f4f6f9;
  --carte:#ffffff; --bordure:#d8dee8; --texte:#2b2d33; --texte-doux:#5c6470;
  --ok:#2a9d8f;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:"Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size:15px; line-height:1.5;
}
code, kbd{font-family:Consolas, "Courier New", monospace; font-size:.92em;}

/* ─── Bandeau d'en-tête ─── */
.bandeau{
  background:linear-gradient(135deg, var(--bleu) 0%, var(--bleu-clair) 100%);
  color:#fff; padding:26px 20px; text-align:center; position:relative;
}
.bandeau h1{margin:0; font-size:22px; letter-spacing:.5px;}
.bandeau p{margin:6px 0 0; opacity:.9; font-size:15px;}
.retour{
  position:absolute; top:14px; left:16px; color:#fff; opacity:.85; font-size:13px;
  text-decoration:none; border:1px solid rgba(255,255,255,.5); border-radius:16px; padding:5px 12px;
}
.retour:hover{opacity:1; background:rgba(255,255,255,.15);}

/* ─── Conteneur & cartes ─── */
.conteneur{max-width:900px; margin:0 auto; padding:24px 16px 60px;}
.carte{
  background:var(--carte); border:1px solid var(--bordure); border-radius:10px;
  padding:22px 24px; margin-bottom:22px; box-shadow:0 1px 3px rgba(20,40,80,.06);
}
.carte h2{margin:0 0 12px; font-size:18px; color:var(--bleu); border-bottom:2px solid var(--bleu); padding-bottom:8px;}
.carte h3{margin:20px 0 8px; font-size:15px; color:var(--bleu-clair);}

/* ─── Messages, états, encarts ─── */
.msg{border-radius:8px; padding:12px 16px; margin-bottom:20px; font-size:14px;}
.msg.ok{background:#e7f6f3; border:1px solid #9fd8cf; color:#17635a;}
.msg.ko{background:#fdecea; border:1px solid #f5b5b0; color:#a33027;}
.erreur{background:#fdecea; border:1px solid #f5b5b0; color:#a33027;
  border-radius:8px; padding:10px 14px; font-size:13.5px; margin-bottom:6px; text-align:center;}
.succes{background:#e7f6f3; border:1px solid #9fd8cf; color:#17635a;
  border-radius:8px; padding:12px 14px; font-size:14px; text-align:center;}
.info{background:#e7f6f3; border:1px solid #9fd8cf; color:#17635a;
  border-radius:8px; padding:10px 14px; font-size:13.5px; margin-bottom:6px; text-align:center;}
.etat{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px; margin-bottom:18px; font-size:14px;}
.etat.actif, .etat.on{background:#e7f6f3; border:1px solid #9fd8cf; color:#17635a;}
.etat.inactif{background:#fff8e6; border:1px solid #eeddc0; color:#8a6d3b;}
.etat.off{background:#f0f0f4; border:1px solid var(--bordure); color:#5c6470;}
.avert{background:#fff8e6; border:1px solid #eeddc0; color:#8a6d3b; border-radius:9px;
  padding:11px 14px; font-size:13.5px; margin-bottom:20px;}
.vide{background:#fff; border:1px dashed var(--bordure); border-radius:10px;
  padding:32px; text-align:center; color:var(--texte-doux);}
.aide{font-size:13px; color:var(--texte-doux); margin-top:8px;}
.identite{font-size:13.5px; color:var(--texte-doux); background:#f7f9fc; border:1px solid var(--bordure);
  border-radius:8px; padding:10px 14px; margin-bottom:18px;}
.compteur, .jauge, .stat{color:var(--texte-doux); font-size:13.5px;}
.compteur{margin-bottom:16px;}
.jauge{margin-bottom:18px;}
.barre{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.barre .filtres, .barre .recherche{margin-bottom:0;}

/* ─── Boutons ─── */
.bouton{
  display:inline-block; padding:11px 22px; background:var(--bleu); color:#fff;
  font-size:14.5px; font-weight:700; border:none; border-radius:8px; cursor:pointer;
  text-decoration:none; text-align:center; font-family:inherit;
}
.bouton:hover{background:var(--bleu-clair);}
.bouton:disabled{background:#9aa7b8; cursor:wait;}
.bouton.secondaire{background:#f7f9fc; color:var(--texte); border:1px solid var(--bordure); font-weight:600;}
.bouton.secondaire:hover{border-color:var(--bleu-clair); background:#eaf2fa;}
.bouton.vert{background:var(--ok);}
.bouton.vert:hover{background:#248277;}
.bouton.danger{background:#fff; color:#a33027; border:1px solid #f5b5b0; font-weight:600;}
.bouton.danger:hover{background:#fdecea;}
a.btn-mini, button.btn-mini{
  display:inline-block; border:1px solid var(--bordure); background:#f7f9fc; border-radius:6px;
  padding:5px 10px; font-size:12.5px; cursor:pointer; font-family:inherit;
  text-decoration:none; color:var(--texte); margin:1px 2px 1px 0;
}
a.btn-mini:hover, button.btn-mini:hover{border-color:var(--bleu-clair); background:#eaf2fa;}
button.btn-mini.danger:hover, a.btn-mini.danger:hover{border-color:var(--accent); background:#fdecea; color:#a33027;}

/* ─── Badges & statuts ─── */
.badge{display:inline-block; border-radius:12px; padding:2px 10px; font-size:12px; font-weight:600; white-space:nowrap;}
.badge.retard{background:#fdecea; color:#a33027;}
.badge.aujourdhui{background:#fff8e6; color:#8a6d3b;}
.badge.avenir{background:#eaf2fa; color:#1d3557;}
.badge.aucune{background:#f0f0f4; color:#8a93a3;}
.badge.type{background:#f0f0f4; color:#5c6470; font-weight:normal;}
.badge.succes{background:#e7f6f3; color:#17635a;}
/* Source du chatbot issue d'une question de la communauté (modifier-chatbot.php) */
.badge.question{background:#e7f6f3; color:#0f6e56;}
/* Gravités du contrôle de sécurité (parametres-debug.php) */
.badge.secu-critique{background:#fdecea; color:#a33027;}
.badge.secu-moyen{background:#fff8e6; color:#8a6d3b;}
.badge.secu-faible{background:#f0f0f4; color:#5c6470;}
.badge.secu-info{background:#eaf2fa; color:#1d3557;}
.badge.secu-ok{background:#e7f6f3; color:#17635a;}
.badge.echec{background:#fdecea; color:#a33027;}
.badge.en_cours{background:#eaf2fa; color:#1d3557;}
.badge.prop{background:#eaf2fa; color:#1d3557;}
.badge.commun{background:#fff8e6; color:#8a6d3b;}
.badge.prospect{background:#fff8e6; color:#8a6d3b; margin-left:6px;}
.badge.pdf{background:#fdecea; color:#a33027;}
.badge.url{background:#eaf2fa; color:#1d3557;}
.statut{display:inline-block; border-radius:12px; padding:2px 10px; font-size:12px; font-weight:600;}
.statut.actif{background:#e7f6f3; color:#17635a;}
.statut.attente{background:#fff8e6; color:#8a6d3b;}
.statut.expire{background:#fdecea; color:#a33027;}
.statut.desactive{background:#f0f0f4; color:#5c6470;}
.statut.admin{background:#eaf2fa; color:#1d3557;}
.statut.util{background:#f0f0f4; color:#5c6470;}

/* ─── Tableaux ─── */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{background:#eef2f8; color:var(--bleu); text-align:left; padding:8px 10px; border:1px solid var(--bordure); font-size:12.5px;}
td{border:1px solid var(--bordure); padding:8px 10px; vertical-align:middle;}
tr:hover td{background:#f7f9fc;}
th a{color:inherit; text-decoration:none; display:block;}
th a:hover{color:var(--bleu-clair);}
table.diag td:first-child{background:#f2f5fa; font-weight:600; width:45%;}
.nom-client{font-weight:600; color:var(--bleu); text-decoration:none;}
.nom-client:hover{text-decoration:underline;}

/* ─── Formulaires ─── */
label.champ, label[for]{display:block; font-weight:600; font-size:13.5px; margin:14px 0 4px; color:var(--texte);}
label.champ{margin-top:0;}
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=password], input[type=number], input[type=url], textarea{
  width:100%; padding:9px 11px; border:1px solid var(--bordure); border-radius:7px;
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--texte);
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--bleu-clair); border-color:var(--bleu-clair);}
textarea{resize:vertical; min-height:70px;}
select{padding:9px 11px; border:1px solid var(--bordure); border-radius:7px; font-size:13.5px;
  font-family:inherit; background:#fff; color:var(--texte);}
.grille{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
.grille .large{grid-column:1 / -1;}
@media (max-width:640px){ .grille{grid-template-columns:1fr;} }
fieldset{border:none; margin:0 0 14px; padding:0;}
fieldset legend{font-weight:600; font-size:13.5px; margin-bottom:6px; padding:0;}
.choix{display:flex; flex-wrap:wrap; gap:8px;}
.choix label{
  display:inline-flex; align-items:center; gap:7px; background:#f7f9fc;
  border:1px solid var(--bordure); border-radius:20px; padding:7px 14px;
  cursor:pointer; font-size:13.5px; font-weight:normal; margin:0; transition:all .15s;
}
.choix label:hover{border-color:var(--bleu-clair);}
.choix input{accent-color:var(--bleu); margin:0; flex-shrink:0;}
.choix label:has(input:checked){background:var(--bleu); color:#fff; border-color:var(--bleu);}
.choix-role{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.choix-role label{
  display:flex; align-items:flex-start; gap:9px; font-weight:normal; font-size:13.5px;
  background:#f7f9fc; border:1px solid var(--bordure); border-radius:8px;
  padding:10px 14px; cursor:pointer; margin:0;
}
.choix-role label:hover{border-color:var(--bleu-clair);}
.choix-role input{accent-color:var(--bleu); margin-top:2px; flex-shrink:0;}
.choix-role label:has(input:checked){background:#eaf2fa; border-color:var(--bleu);}
.choix-role strong{color:var(--bleu);}
.souvenir{display:flex; align-items:center; gap:8px; margin-top:16px;
  font-weight:normal; font-size:13.5px; color:var(--texte-doux); cursor:pointer;}
.souvenir input{accent-color:var(--bleu); width:16px; height:16px; margin:0;}
/* Champ mot de passe avec bouton « afficher en clair » (👁) */
.champ-mdp{position:relative;}
.champ-mdp input{padding-right:44px;}
.voir-mdp{position:absolute; right:4px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer; font-size:17px; line-height:1;
  padding:6px 8px; opacity:.6; font-family:inherit;}
.voir-mdp:hover{opacity:1;}

.criteres{list-style:none; padding:8px 0 0; margin:0; font-size:12.5px; color:var(--texte-doux);}
.criteres li{margin-bottom:2px;}
.criteres li::before{content:'✗ '; color:var(--accent); font-weight:700;}
.criteres li.ok{color:var(--ok);}
.criteres li.ok::before{content:'✓ '; color:var(--ok);}
.coche-rappel{display:inline-flex; align-items:center; gap:5px; background:#f7f9fc;
  border:1px solid var(--bordure); border-radius:16px; padding:6px 11px; font-size:12.5px; cursor:pointer;}
.coche-rappel input{accent-color:var(--bleu); margin:0;}
.coche-rappel:has(input:checked){background:var(--bleu); color:#fff; border-color:var(--bleu);}
.ligne-ajout{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.ligne-ajout .titre{flex:1; min-width:220px;}
.commentaire-item{font-size:12px; color:var(--texte-doux); margin-top:3px;}

/* SIRET / SIREN avec bouton registre */
.ligne-siret, .ligne-siren{display:flex; gap:8px;}
.ligne-siret input, .ligne-siren input{flex:1;}
.btn-siret, .btn-siren{
  border:1px solid var(--bleu-clair); background:#eaf2fa; color:var(--bleu);
  border-radius:7px; padding:0 14px; font-size:13px; font-weight:600; cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.btn-siret:hover, .btn-siren:hover{background:var(--bleu); color:#fff;}
.btn-siret:disabled, .btn-siren:disabled{opacity:.6; cursor:wait;}

/* Contrôles de format & autocomplétion d'adresse */
.badge-controle{font-size:12px; margin-top:4px; display:none;}
.badge-controle.ok{color:var(--ok); display:block;}
.badge-controle.doute{color:#b8860b; display:block;}
.badge-controle.err{color:var(--accent); display:block;}
.champ-adresse{position:relative;}
.liste-suggestions{
  position:absolute; top:100%; left:0; right:0; background:#fff;
  border:1px solid var(--bordure); border-radius:0 0 8px 8px;
  box-shadow:0 6px 16px rgba(20,40,80,.15); z-index:50; max-height:260px; overflow-y:auto; display:none;
}
.liste-suggestions div{padding:9px 12px; cursor:pointer; font-size:13.5px; border-top:1px solid #f0f3f8;}
.liste-suggestions div:first-child{border-top:none;}
.liste-suggestions div:hover, .liste-suggestions div.actif{background:#eaf2fa;}

/* ─── Recherche & filtres ─── */
.recherche{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:18px;}
.recherche input{flex:1; min-width:240px; padding:10px 14px; border:1px solid var(--bordure);
  border-radius:20px; font-size:14px; font-family:inherit;}
.recherche button{border:none; background:var(--bleu); color:#fff; border-radius:20px;
  padding:10px 20px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;}
.recherche button:hover{background:var(--bleu-clair);}
.filtres{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.filtres a{display:inline-block; border:1px solid var(--bordure); border-radius:18px; padding:7px 14px;
  font-size:13px; text-decoration:none; color:var(--texte);}
.filtres a.actif{background:var(--bleu); color:#fff; border-color:var(--bleu);}
.filtres a:not(.actif):hover{border-color:var(--bleu-clair); background:#eaf2fa;}

/* ─── Accueil : tuiles ─── */
.intro{color:var(--texte-doux); font-size:14.5px; text-align:center; margin-bottom:26px;}
a.tuile{
  display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--bordure);
  border-radius:12px; padding:22px 24px; margin-bottom:18px; text-decoration:none; color:var(--texte);
  box-shadow:0 1px 3px rgba(20,40,80,.06); transition:transform .15s, box-shadow .15s, border-color .15s;
}
a.tuile:hover{transform:translateY(-2px); border-color:var(--bleu-clair); box-shadow:0 6px 18px rgba(20,40,80,.14);}
.tuile .icone{flex-shrink:0; width:62px; height:62px; border-radius:12px; background:#eaf2fa;
  font-size:30px; display:flex; align-items:center; justify-content:center;}
.tuile h2{margin:0 0 4px; font-size:18px; color:var(--bleu);}
.tuile p{margin:0; font-size:13.5px; color:var(--texte-doux);}
.tuile .fleche{margin-left:auto; font-size:22px; color:var(--bleu-clair); flex-shrink:0;}
.separateur{display:flex; align-items:center; gap:12px; margin:30px 0 16px;
  color:var(--texte-doux); font-size:12.5px; text-transform:uppercase; letter-spacing:1px;}
.separateur::before, .separateur::after{content:""; flex:1; height:1px; background:var(--bordure);}
a.tuile.technique{border-style:dashed;}
a.tuile.technique .icone{background:#fff8e6;}
.pied{text-align:center; color:var(--texte-doux); font-size:12.5px; margin-top:34px;}

/* ─── Pages centrées (connexion, mots de passe, merci) ─── */
.centre{flex:1; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px;}
.centre .carte{width:100%; max-width:420px; padding:32px 30px; border-radius:12px;
  box-shadow:0 4px 16px rgba(20,40,80,.10);}
.centre .carte h2{text-align:center; border-bottom:none; padding-bottom:0; font-size:20px; margin-bottom:6px;}
.sous{color:var(--texte-doux); font-size:13.5px; text-align:center; margin:0 0 20px;}
.lien-retour{display:block; text-align:center; margin-top:16px; font-size:13.5px; color:var(--bleu-clair);}
.coche{width:74px; height:74px; border-radius:50%; background:var(--ok);
  color:#fff; font-size:40px; line-height:74px; margin:0 auto 20px;}

/* ─── Blocs dépliants ─── */
details.outil{border:1px solid var(--bordure); border-radius:9px; margin-bottom:16px; overflow:hidden;}
details.outil summary{cursor:pointer; padding:11px 15px; background:#f2f5fa; font-weight:600;
  font-size:14px; color:var(--bleu); list-style:none;}
details.outil summary::-webkit-details-marker{display:none;}
details.outil[open] summary{border-bottom:1px solid var(--bordure);}
details.outil > .corps{padding:14px 16px;}
details.mini{display:inline-block;}
details.mini summary{cursor:pointer; list-style:none; display:inline-block;}
details.mini summary::-webkit-details-marker{display:none;}
details.mini .popover{margin-top:6px; padding:8px; background:#f7f9fc; border:1px solid var(--bordure); border-radius:8px;}

/* Dossiers sauvegardés */
details.dossier{background:#fff; border:1px solid var(--bordure); border-radius:10px;
  margin-bottom:14px; box-shadow:0 1px 3px rgba(20,40,80,.06); overflow:hidden;}
details.dossier > summary{list-style:none; cursor:pointer; padding:16px 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
details.dossier > summary::-webkit-details-marker{display:none;}
details.dossier[open] > summary{border-bottom:1px solid var(--bordure); background:#f7f9fc;}
details.dossier .ico{font-size:22px; flex-shrink:0;}
details.dossier .infos{flex:1; min-width:200px; display:block;}
details.dossier .titre{font-weight:600; color:var(--bleu); font-size:15px;}
details.dossier .sous{font-size:12.5px; color:var(--texte-doux); text-align:left; margin:0;}
details.dossier .meta{font-size:12.5px; color:var(--texte-doux); white-space:nowrap;}
details.dossier > .corps{padding:8px 18px 16px;}
.fichier{display:flex; align-items:center; gap:10px; padding:8px 4px;
  border-bottom:1px solid #f0f3f8; font-size:13.5px;}
.fichier:last-of-type{border-bottom:none;}
.fichier .nom{flex:1; word-break:break-all;}
.fichier .taille{color:var(--texte-doux); white-space:nowrap; font-size:12.5px;}
.actions{padding-top:10px; border-top:1px dashed var(--bordure); margin-top:8px;}

/* ─── Fiche client ─── */
.carte > .infos{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px 24px; font-size:14px;}
.etiquette{font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--texte-doux);}
.apercu-tache{display:flex; gap:8px; align-items:center; margin-top:6px;}
.apercu-tache input[type=date]{width:150px;}
.apercu-tache input[type=checkbox]{accent-color:var(--bleu);}
#dictee-etat{font-size:13px; margin-left:8px;}

/* ─── Zones techniques ─── */
pre.apercu{background:#f7f9fc; border:1px solid var(--bordure); border-radius:8px; padding:14px;
  white-space:pre-wrap; word-break:break-word; font-size:12.5px; max-height:480px; overflow-y:auto;}
pre.journal{background:#1d2330; color:#d7e0ee; border-radius:8px; padding:14px;
  font-family:Consolas, "Courier New", monospace; font-size:12.5px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word; max-height:520px; overflow-y:auto;}
.journal-vide{color:var(--texte-doux); font-size:14px;}
.resultat{border-radius:9px; padding:14px 18px; margin-bottom:22px; font-size:14.5px;}
.resultat.ok{background:#e7f6f3; border:1px solid #9fd8cf; color:#17635a;}
.resultat.ko{background:#fdecea; border:1px solid #f5b5b0; color:#a33027;}
.resultat p{margin:5px 0;}
ol.etapes{font-size:14px; padding-left:22px; margin:8px 0;}
ol.etapes li{margin-bottom:6px;}

/* ─── Pièces jointes (page test email) ─── */
.btn-ajout-fichier{display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  background:#fff; border:1px solid var(--bleu-clair); color:var(--bleu);
  border-radius:7px; padding:8px 14px; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .15s;}
.btn-ajout-fichier:hover{background:var(--bleu); color:#fff;}
.btn-photo{margin-left:8px;}
@media (max-width:480px){ .btn-photo{margin-left:0; margin-top:8px;} }
.fichiers-choisis{margin-top:4px;}
.fichier-item{display:flex; align-items:center; gap:10px; background:#f7f9fc;
  border:1px solid var(--bordure); border-radius:6px; padding:6px 10px; margin-top:6px; font-size:13px;}
.fichier-item .nom-fichier{flex:1; word-break:break-all;}
.fichier-item .taille-fichier{color:var(--texte-doux); white-space:nowrap;}
.btn-suppr-fichier{border:none; background:none; cursor:pointer; font-size:16px; line-height:1;
  padding:3px 5px; border-radius:4px;}
.btn-suppr-fichier:hover{background:#fdecea;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — le site est consulté en clientèle, sur téléphone.
   Trois seuils seulement, pour rester lisible :
     ≤ 900px  tablette et grand téléphone (paysage)
     ≤ 640px  téléphone (portrait) — l'essentiel du travail
     ≤ 380px  petits écrans
   Principe : rien ne disparaît, tout s'empile. Un courtier doit
   pouvoir tout faire depuis son téléphone, pas seulement consulter.
   ═══════════════════════════════════════════════════════════════ */

/* Aucun débordement horizontal, jamais : c'est le défaut le plus visible
   sur mobile, et le plus facile à laisser passer.
   « clip » et NON « hidden » : hidden fait de la page un conteneur de
   defilement, ce qui desactive silencieusement position:sticky — la barre de
   navigation cesserait de coller. clip rogne sans cet effet de bord. */
html, body{max-width:100%; overflow-x:clip;}
img, video{max-width:100%; height:auto;}

/* Tableaux larges : ils defilent DANS leur carte au lieu d elargir la page.
   Applique a la carte entiere plutot qu au seul tableau, car certains popovers
   vivent dans les cellules et doivent defiler avec elles.
   Sans cela, body{overflow-x:hidden} les rognerait sans moyen de les atteindre. */
.carte{overflow-x:auto;}

@media (max-width:900px){
  .conteneur{padding:18px 14px 48px;}
  .bandeau{padding:22px 16px;}
  .bandeau h1{font-size:19px;}
}

@media (max-width:640px){
  body{font-size:15.5px;}                 /* un peu plus grand : on lit à bout de bras */

  /* En-tête : le bouton « retour » quitte le coin absolu, où il chevauchait le titre */
  .bandeau{padding:16px 14px 14px; text-align:left;}
  .bandeau h1{font-size:17.5px; line-height:1.3;}
  .bandeau p{font-size:13.5px;}
  .retour{position:static; display:inline-block; margin-bottom:10px; font-size:12.5px;}

  .conteneur{padding:14px 10px 44px;}
  .carte{padding:16px 14px; border-radius:10px; margin-bottom:14px;}
  .carte h2{font-size:16px;}

  /* Barres d'outils : chaque groupe prend toute la largeur au lieu de se tasser */
  .barre{gap:9px;}
  .barre > *{flex:1 1 100%;}
  .recherche{display:flex; gap:8px;}
  .recherche input{min-width:0;}          /* sans quoi le champ déborde de son parent */

  /* Boutons : au moins 44px de haut — la cible tactile recommandée */
  .bouton, a.bouton{display:block; width:100%; text-align:center; padding:13px 16px; font-size:15px;}
  .bouton + .bouton, .bouton + a.bouton{margin-top:8px;}
  a.btn-mini, button.btn-mini{padding:9px 12px; font-size:13px; min-height:38px;}

  /* Champs : 16px minimum, sinon iOS zoome à chaque focus et casse la mise en page */
  input[type=text], input[type=email], input[type=tel], input[type=date],
  input[type=password], input[type=number], input[type=url], textarea, select{
    font-size:16px; padding:11px 12px; width:100%;
  }

  /* Tableaux : police resserrée et défilement horizontal dans la carte */
  table{font-size:12.5px;}
  th, td{padding:7px 8px;}

  /* Tuiles de l'accueil : icône plus petite, flèche masquée (la tuile entière
     est cliquable, la flèche ne fait que voler de la place) */
  a.tuile{padding:15px 16px; gap:13px; margin-bottom:12px;}
  .tuile .icone{width:46px; height:46px; font-size:23px; border-radius:10px;}
  .tuile h2{font-size:16px;}
  .tuile p{font-size:12.5px;}
  .tuile .fleche{display:none;}

  .grille{grid-template-columns:1fr !important;}
  .filtres{gap:6px;}
  .filtres a{font-size:12.5px; padding:6px 11px;}
}

@media (max-width:380px){
  .conteneur{padding:12px 8px 40px;}
  .carte{padding:14px 11px;}
  .tuile .icone{width:40px; height:40px; font-size:20px;}
  .tuile h2{font-size:15px;}
  table{font-size:12px;}
  th, td{padding:6px 6px;}
}

/* Impression : ni menus, ni boutons, ni ombres — seulement le contenu.
   Utile pour une attestation de formation ou une convention signée. */
@media print{
  .bandeau, .barre, .filtres, .bouton, .btn-mini, .entete-utilisateur,
  form button, .pied{display:none !important;}
  body{background:#fff;}
  .carte{border:1px solid #999; box-shadow:none; break-inside:avoid; overflow:visible;}
  a{text-decoration:none; color:#000;}
}

/* Respect du réglage système « animations réduites » */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
  a.tuile:hover{transform:none;}
}

/* ═══ Blocs de l'accueil ═══
   Vingt-huit tuiles sur une page, c'est un mur : personne ne sait par où
   commencer. Trois blocs, le premier ouvert — un courtier voit six tuiles à
   l'arrivée, et déplie le reste quand il en a besoin. */
details.bloc-tuiles{margin-bottom:14px;}
details.bloc-tuiles > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  padding:13px 18px; background:#fff; border:1px solid var(--bordure);
  border-radius:11px; box-shadow:0 1px 3px rgba(20,40,80,.06); transition:border-color .15s;
}
/* Titre et sous-titre empiles dans leur propre conteneur : la hauteur de
   l en-tete ne depend plus de l alignement des lignes de base, qui donnait
   des resultats imprevisibles selon la police des emoji. */
details.bloc-tuiles > summary .txt{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
details.bloc-tuiles > summary .titre{font-size:17px; font-weight:700; color:var(--bleu); line-height:1.25;}
details.bloc-tuiles > summary::-webkit-details-marker{display:none;}
details.bloc-tuiles > summary:hover{border-color:var(--bleu-clair);}
details.bloc-tuiles > summary .ico{font-size:20px; line-height:1; flex:none;}
details.bloc-tuiles > summary .sous{font-weight:400; font-size:12.5px; color:var(--texte-doux); line-height:1.35;}
/* Chevron à droite, qui pivote à l'ouverture : le seul repère qui dit
   « ceci se déplie » sans texte. */
details.bloc-tuiles > summary::after{
  content:"⌄"; font-size:20px; line-height:1; color:var(--bleu-clair);
  transition:transform .18s; flex:none;
}
details.bloc-tuiles[open] > summary::after{transform:rotate(180deg);}
details.bloc-tuiles[open] > summary{
  border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent;
}
details.bloc-tuiles[open]{
  border:1px solid var(--bordure); border-radius:11px; background:var(--fond);
  box-shadow:0 1px 3px rgba(20,40,80,.06);
}
details.bloc-tuiles[open] > summary{border:none; box-shadow:none; background:transparent;}
details.bloc-tuiles[open] > a.tuile:last-of-type{margin-bottom:0;}
details.bloc-tuiles > a.tuile{margin:0 14px 12px;}
details.bloc-tuiles > a.tuile:first-of-type{margin-top:4px;}

@media (max-width:640px){
  details.bloc-tuiles > summary{padding:12px 14px; gap:10px;}
  details.bloc-tuiles > summary .titre{font-size:15.5px;}
  details.bloc-tuiles > summary .sous{font-size:11.5px;}
  details.bloc-tuiles > a.tuile{margin:0 9px 10px;}
}

/* ═══ Tableau de bord de l'accueil ═══
   « À faire aujourd'hui » : la ligne dit ce qu'il faut faire, la couleur dit
   avec quelle urgence, et tout est cliquable jusqu'à l'écran concerné. */
.carte.tdb{border-left:4px solid var(--bleu);}
.tdb-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.tdb-liste a{
  display:flex; align-items:center; gap:13px; padding:11px 14px; text-decoration:none;
  color:var(--texte); border:1px solid var(--bordure); border-radius:9px; background:#fff;
  transition:border-color .15s, background .15s;
}
.tdb-liste a:hover{border-color:var(--bleu-clair); background:#f7fbff;}
.tdb-ico{font-size:21px; flex:none; line-height:1;}
.tdb-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.tdb-titre{font-weight:600; font-size:14.5px;}
.tdb-detail{font-size:12.5px; color:var(--texte-doux); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tdb-fleche{color:var(--bleu-clair); font-size:18px; flex:none;}
/* La gravité se lit à la bordure gauche, pas seulement à l'icône : un daltonien
   voit l'épaisseur, un pressé voit la couleur. */
.tdb-retard a{border-left:4px solid var(--accent); background:#fffafa;}
.tdb-proche a{border-left:4px solid #d9932a; background:#fffdf7;}
.tdb-info a{border-left:4px solid var(--bleu-clair);}

@media (max-width:640px){
  .tdb-detail{white-space:normal;}   /* sur mobile on préfère deux lignes à des points de suspension */
  .tdb-fleche{display:none;}
  .tdb-liste a{padding:10px 12px; gap:10px;}
}

/* ═══ Fil d'Ariane ═══
   Sur les pages profondes (Clients › DUPONT › Espace sinistre) : montre où l'on
   est, et permet de sauter un niveau au lieu de remonter marche après marche. */
.fil-ariane{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12.5px; color:var(--texte-doux); margin:0 0 14px;
}
.fil-ariane a{color:var(--bleu-clair); text-decoration:none;}
.fil-ariane a:hover{text-decoration:underline;}
.fil-ariane .sep{opacity:.5;}
.fil-ariane .ici{color:var(--texte); font-weight:600;}
@media (max-width:640px){
  .fil-ariane{font-size:12px; margin-bottom:11px;}
}

/* ═══ Bandeau « vue courtier » ═══
   Un administrateur qui a bascule voit moins de choses : sans rappel permanent,
   il croirait a une perte de donnees plutot qu a un reglage de sa part. */
.spa-mode-bandeau{
  background:#0f766e; color:#fff; padding:9px 16px; text-align:center;
  font:600 13.5px/1.45 system-ui,sans-serif;
}
.spa-mode-bandeau a{color:#fff; text-decoration:underline; margin-left:4px;}
@media (max-width:640px){ .spa-mode-bandeau{font-size:12.5px; padding:8px 12px;} }

/* ─── Liste de grandes cartes cliquables ───
   « Que voulez-vous importer ? », « Que voulez-vous faire ? » : une liste de
   rubriques, chacune une carte pleine largeur. Le style etait recopie a
   l'identique dans le page_tete() de chaque page qui s'en sert ; il n'a rien de
   propre a une page, il vit donc ici. Rendu par liste_cartes(), page-commun.php. */
.liste-cartes{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
a.import-lien{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--bordure);
  border-radius:10px; background:#fff; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s;}
a.import-lien:hover{border-color:var(--bleu); box-shadow:0 4px 14px rgba(20,40,80,.08);}
a.import-lien .ico{font-size:26px; flex-shrink:0;}
a.import-lien h3{margin:0 0 3px; font-size:16px; color:var(--bleu);}
a.import-lien p{margin:0; font-size:13px; color:var(--texte-doux);}
a.import-lien .fl{margin-left:auto; color:var(--bleu); font-size:20px;}