/* ==========================================================================
   L'habillage 2026 de l'ERP (la maquette de Sébastien, 5 novembre 2026) :
   menu sombre à icônes (l'onglet ouvert en orange), boutons du haut à
   icônes, accueil en cartes colorées. Chargé après app.css, seulement dans
   l'ERP (.shell) : les pages publiques ne changent pas. Pour revenir à
   l'ancien habillage, il suffit de ne plus charger ce fichier.
   ========================================================================== */

.shell {
  --orange: #f97316;
  --orange-fonce: #ea580c;
  --orange-doux: #fff1e6;
  --vert-vif: #1f9d55;
  --vert-vif-fonce: #17803f;
  --vert-rdv: #1d5e40;
  --side-tuile: #2a363b;
  --side-tuile-hover: #34434a;
  --ombre-carte: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
  background: linear-gradient(to right, var(--side) 232px, #f3f4f2 232px);
}

.shell .ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ---------- Le menu de gauche : tuiles sombres, icône, onglet ouvert orange ---------- */

.shell .nav { gap: 4px; }
.shell .nav a {
  justify-content: flex-start; gap: .65rem;
  padding: .5rem .6rem .5rem .7rem; border-radius: 9px;
  background: var(--side-tuile); color: #e9efed; font-weight: 500; font-size: .93rem;
  border: 1px solid rgba(255, 255, 255, .04); border-left: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}
.shell .nav a .ico { width: 19px; height: 19px; color: #c9d4d0; stroke-width: 1.9; }
.shell .nav-l { flex: 1; }
.shell .nav a.has-nb { background: var(--side-tuile); border-left-color: rgba(255, 255, 255, .04); }
.shell .nav a:hover, .shell .nav a:focus-visible { background: var(--side-tuile-hover); color: #fff; border-color: rgba(255, 255, 255, .08); }
.shell .nav a:hover .ico { color: #fff; }
.shell .nav a[aria-current="page"] {
  background: linear-gradient(135deg, #fb923c, var(--orange) 55%, var(--orange-fonce));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(249, 115, 22, .35);
}
.shell .nav a[aria-current="page"] .ico { color: #fff; }
.shell .nav-nb { background: #4a585e; color: #fff; }
.shell .nav a[aria-current="page"] .nav-nb { background: #fff; color: var(--orange-fonce); }
.shell .nav-admin a { background: #26312f; font-size: .86rem; padding-top: .36rem; padding-bottom: .36rem; }
.shell .nav-admin a .ico { width: 17px; height: 17px; }

/* ---------- La barre du haut : recherche à loupe, boutons à icônes ---------- */

.shell .topbar { gap: .7rem; padding: .7rem 2rem; box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
.shell .search { position: relative; }
.shell .search .ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7b878b; pointer-events: none; }
.shell .search input { padding-left: 2.6rem; border-radius: 10px; background: #fff; border-color: #d9dfdc; min-height: 42px; }
.shell .search input:focus { border-color: var(--orange); }
.shell .btn-quick { gap: .5rem; border-radius: 9px; font-weight: 600; min-height: 42px; padding: .45rem .95rem; box-shadow: 0 2px 6px rgba(16, 24, 40, .12); }
.shell .btn-quick .ico { width: 19px; height: 19px; }
.shell .btn-quick.btn-primary { background: var(--vert-vif); border-color: var(--vert-vif); }
.shell .btn-quick.btn-primary:hover { background: var(--vert-vif-fonce); border-color: var(--vert-vif-fonce); }
.shell .btn-quick[href="/prendre-rdv"] { background: var(--vert-rdv); border-color: var(--vert-rdv); }
.shell .btn-quick[href="/prendre-rdv"]:hover { background: #154a32; border-color: #154a32; }
.shell .btn-quick.btn-appel { background: var(--orange); border: 1px solid var(--orange); color: #fff; letter-spacing: .03em; }
.shell .btn-quick.btn-appel:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); color: #fff; }
@media (max-width: 1100px) {
  .shell .btn-quick-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .shell .btn-quick { padding: .45rem .7rem; }
}

/* ---------- Les blocs : cartes blanches arrondies ---------- */

.shell .block { border-radius: 14px; border-color: #e4e8e5; box-shadow: var(--ombre-carte); }

/* ---------- Accueil : bonjour et semaine ---------- */

.shell .home-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.shell .home-bonjour {
  flex: 1 1 22rem; max-width: 30rem; display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.4rem; border-radius: 16px; border: 1px solid #fbd5b5;
  background: linear-gradient(135deg, #fff7f0, #ffe8d5); box-shadow: var(--ombre-carte);
}
.shell .home-bonjour h1 { font-size: 1.75rem; font-weight: 700; }
.shell .home-bonjour p { margin: .2rem 0 0; color: #5b6468; }
.shell .home-bonjour-ico {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 14px; flex: none;
  color: var(--orange); background: #fff; box-shadow: inset 0 0 0 2px #fdba8c;
}
.shell .home-bonjour-ico .ico { width: 2rem; height: 2rem; stroke-width: 1.8; }
.shell .semaine {
  flex: 1 1 26rem; max-width: none; padding: 1rem 1.4rem; border-left: 0; border-radius: 16px;
  border: 1px solid #c9ead3; background: linear-gradient(135deg, #f2fbf4, #dff3e5); box-shadow: var(--ombre-carte);
}
.shell .semaine-num > :first-child, .shell .semaine-num > a.semaine-cal { color: #1e7d3c; font-size: 1.75rem; }
.shell .semaine-liste li { border-left: 3px solid #2e9d57; padding-left: .55rem; }

/* ---------- Accueil : les quatre grandes cartes en couleur ---------- */

.shell .chiffres { flex: 1 1 100%; position: relative; gap: .8rem; padding-right: 0; }
.shell .chiffres-haut, .shell .chiffres-bas { gap: .8rem; }
.shell .chiffre {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; align-content: center; align-items: center;
  border-radius: 14px; border: 1px solid #e4e8e5; box-shadow: var(--ombre-carte); padding: .7rem .95rem;
}
.shell .chiffre > .ico { grid-row: 1 / span 3; width: 1.7rem; height: 1.7rem; stroke-width: 1.9; }
.shell .chiffre > :not(.ico) { grid-column: 2; }
.shell .chiffre-lib { color: #3c474b; font-weight: 700; }
.shell .chiffres-haut .chiffre {
  padding: 1.05rem 1.2rem; min-height: 6.4rem; border: 0; color: #fff;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .14);
  transition: transform .12s, box-shadow .12s;
}
.shell .chiffres-haut .chiffre:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 24, 40, .18); }
.shell .chiffres-haut .chiffre > .ico { width: 2.5rem; height: 2.5rem; stroke-width: 1.7; color: #fff; }
.shell .chiffres-haut .chiffre strong { font-size: 1.85rem; font-weight: 700; color: #fff; }
.shell .chiffres-haut .chiffre .chiffre-lib { color: rgba(255, 255, 255, .92); font-size: .76rem; }
.shell .chiffres-haut .chiffre .chiffre-sous { justify-self: start; margin-top: .3rem; padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .25); color: #fff; font-size: .8rem; }
.shell .chiffres-haut .chiffre .chiffre-unite { color: #fff; font-size: 1.1rem; }
.shell .chiffres-haut .chiffre-ca { background: linear-gradient(135deg, #1d4ed8, #3b82f6 60%, #60a5fa); }
.shell .chiffres-haut .chiffre-mb { background: linear-gradient(135deg, #15803d, #22a04b 60%, #4ade80); }
.shell .chiffres-haut .chiffre-app { background: linear-gradient(135deg, #ea580c, #f97316 60%, #fdba74); }
.shell .chiffres-haut .chiffre-devis { background: linear-gradient(135deg, #6d28d9, #8b5cf6 60%, #c4b5fd); }
.shell .chiffres-haut .chiffre-devis .chiffre-sous { background: none; padding: 0; color: rgba(255, 255, 255, .92); }

/* « Afficher les chiffres » : la pastille verte cochée, en haut à droite. */
.shell .chiffres-coche { top: -.55rem; right: -.55rem; z-index: 2; }
.shell .chiffres-coche input {
  appearance: none; -webkit-appearance: none; width: 1.7rem; height: 1.7rem; border-radius: 999px; margin: 0;
  background: #fff; border: 2px solid #22a04b; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(16, 24, 40, .2);
}
.shell .chiffres-coche input:checked { background: #22a04b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 60% no-repeat; }
.shell .chiffres.is-cache .chiffres-coche input { border-color: #9aa5a9; }

/* Le mode démo : la pastille « Démo », à gauche de la coche verte. */
.shell .chiffres-demo { top: -.45rem; right: 1.6rem; z-index: 2; }
.shell .chiffres-demo span { padding: .2rem .6rem; box-shadow: 0 2px 6px rgba(16, 24, 40, .18); }

/* ---------- Accueil : les petites tuiles blanches à icône ---------- */

.shell .chiffres-bas .chiffre { flex: 1 1 9rem; background: #fff; min-height: 4.4rem; }
.shell .chiffres-bas .chiffre:hover { border-color: #cfd8d3; transform: translateY(-1px); }
.shell .chiffres-bas .chiffre strong { font-size: 1.3rem; font-weight: 700; color: #1f2a2e; white-space: normal; line-height: 1.25; }
.shell .chiffres-bas .chiffre-hva, .shell .chiffres-bas .chiffre-spontanes { display: inline-block; white-space: nowrap; }
.shell .chiffre-prospects > .ico { color: #2563eb; }
.shell .chiffre-clients > .ico { color: #16a34a; }
.shell .chiffre-apporteurs > .ico { color: #f97316; }
.shell .chiffre-coef > .ico { color: #d97706; }
.shell .chiffre-fid > .ico { color: #0d9488; }
.shell .chiffre-news > .ico { color: #f97316; }
.shell .chiffres-bas .chiffre-coef strong, .shell .chiffres-bas .chiffre-fid strong { color: #1f2a2e; }
.shell .chiffres-bas .chiffre-coef .chiffre-lib, .shell .chiffres-bas .chiffre-fid .chiffre-lib { color: #3c474b; }
.shell .chiffre-hva { color: #1f2a2e; font-weight: 700; font-size: .95rem; }
.shell .chiffre-news .chiffre-spontanes { color: #1f2a2e; font-weight: 700; font-size: .95rem; }

/* ---------- Accueil : la jauge ---------- */

.shell .jauge { padding: .9rem 1.2rem .8rem; border-radius: 14px; border: 1px solid #e4e8e5; box-shadow: var(--ombre-carte); gap: .35rem; }
.shell .jz-rouge { fill: #ef3b2d; } .shell .jz-orange { fill: #f97316; } .shell .jz-jaune { fill: #facc15; } .shell .jz-vert { fill: #22a04b; }
.shell .jauge-msg { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.shell .jauge-msg .ico { width: 1.25rem; height: 1.25rem; }
.shell .jauge-orange .jauge-msg { color: var(--orange-fonce); }
.shell .jauge-detail { font-weight: 600; color: #3c474b; }

/* ---------- Accueil : ce que disent les clients ---------- */

.shell .retours-duo { gap: .8rem; }
.shell .retours-acc { flex: 1 1 20rem; max-width: none; padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid #e4e8e5; box-shadow: var(--ombre-carte); }
.shell .retours-acc-titre { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1rem; }
.shell .retours-acc-titre > .ico { width: 1.35rem; height: 1.35rem; color: #2563eb; }
.shell .retours-acc-lib { display: flex; align-items: center; gap: .35rem; }
.shell .retours-acc-lib .ico { width: .95rem; height: .95rem; }
.shell .retours-acc-moins .retours-acc-lib { color: #dc2626; }
.shell .retours-acc-plus .retours-acc-lib { color: #16a34a; }
.shell .retours-acc-moins li { border-left-color: #f87171; }
.shell .retours-acc-plus li { border-left-color: #4ade80; }

/* ---------- Accueil : « À faire en priorité » ---------- */

.shell .priorites-tete h2 { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.3rem; }
.shell .priorites-tete h2 .ico { color: var(--orange); width: 1.4rem; height: 1.4rem; fill: #fdba74; }
.shell .prio-liste { gap: .8rem; }
.shell .prio-lien {
  border: 1.5px solid #bfe3cb; border-left-width: 1.5px; border-radius: 14px; background: #fff;
  box-shadow: var(--ombre-carte); padding: .9rem 1rem; gap: .9rem;
}
.shell .prio-lien:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, .12); }
.shell .prio-nb { background: #fff; border: 2px solid #22a04b; color: #17803f; min-width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }
.shell .prio-action {
  align-self: flex-end; padding: .35rem .8rem; border-radius: 999px; background: #22a04b; color: #fff; font-size: .82rem;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .15);
}
.shell .prio.is-urgent .prio-lien { border-color: #f5a3a3; background: linear-gradient(135deg, #fff, #fff4f4); }
.shell .prio.is-urgent .prio-nb { background: #fff; border-color: #ef4444; color: #dc2626; }
.shell .prio.is-urgent .prio-action { background: #e5322d; color: #fff; }
.shell .prio.is-important .prio-lien { border-color: #fdc89a; background: linear-gradient(135deg, #fff, #fff8f1); }
.shell .prio.is-important .prio-nb { background: #fff; border-color: var(--orange); color: var(--orange-fonce); }
.shell .prio.is-important .prio-action { background: var(--orange); color: #fff; }
.shell .prio-coche { width: 1.55rem; height: 1.55rem; border-radius: 6px; border: 1.5px solid #c9d1cd; }
.shell .prio-ok { border-radius: 14px; }

/* ---------- Téléphone ---------- */

@media (max-width: 900px) {
  .shell { background: #f3f4f2; }
  .shell .home-bonjour { max-width: none; }
  .shell .chiffres-haut .chiffre { flex: 1 1 calc(50% - .8rem); min-width: 0; }
  .shell .chiffres-haut .chiffre strong { font-size: 1.45rem; }
}
@media (max-width: 480px) {
  .shell .chiffres-haut .chiffre { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .shell .chiffres-haut .chiffre, .shell .chiffres-bas .chiffre { transition: none; }
  .shell .chiffres-haut .chiffre:hover, .shell .chiffres-bas .chiffre:hover { transform: none; }
}
@media print {
  .shell .chiffres-haut .chiffre { background: #fff !important; color: #000; box-shadow: none; }
}