/* Bouton « Écrivez-lui sur WhatsApp » (16/08/2026) — le vrai canal, depuis le
   téléphone du visiteur, message pré-rempli avec le métier de la page. */
.essai-ou{text-align:center;color:#55605A;font-size:.92rem;margin:18px 0 10px;}
.essai-wa{display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:420px;margin:0 auto;min-height:48px;padding:0 26px;
  background:#25D366;color:#fff;
  font-size:1.02rem;font-weight:700;text-decoration:none;border-radius:999px;
  box-shadow:0 6px 18px rgba(37,211,102,.35);
  transition:transform .15s ease,box-shadow .15s ease;}
.essai-wa:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,211,102,.45);}

/* Widget de démonstration écrite — rapatrié des anciennes pages (14/08/2026).
   Sans ces règles, la démo s'affiche en HTML brut : bulles sans fond, champ
   de saisie nu, boutons système. */
.demo-box{padding:6px;background:#fff;border:1px solid var(--line,#E7E1D2);
  border-radius:16px;box-shadow:0 2px 8px rgba(29,35,33,.06);max-width:760px;margin:0 auto;}
.demo-log{min-height:150px;max-height:340px;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;}
.demo-bulle{max-width:80%;border-radius:13px;padding:10px 13px;font-size:14px;line-height:1.45;}
.demo-who{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#6B7A73;margin-bottom:3px;}
.demo-agent{align-self:flex-start;background:#E8F1ED;color:#11504A;}
.demo-client{align-self:flex-end;background:#FBFAF6;border:1px solid #E7E1D2;color:#1D2321;}
.demo-badge{align-self:flex-start;font-family:ui-monospace,Menlo,monospace;
  font-size:12px;padding:4px 9px;border-radius:999px;background:#F3EEE1;color:#7A4E00;}
.demo-indispo{font-size:13.5px;color:#55605A;padding:14px;text-align:center;}
.demo-suggestions{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;}
.demo-chip{font-size:12.5px;font-weight:600;border:1px solid #E7E1D2;background:#fff;
  color:#55605A;border-radius:999px;padding:8px 14px;cursor:pointer;}
.demo-chip:hover{border-color:#11504A;color:#11504A;}
.demo-form-chat{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #E7E1D2;}
.demo-input{flex:1;border:1px solid #E7E1D2;border-radius:999px;padding:11px 16px;font-size:14px;}
.demo-input:focus{outline:none;border-color:#11504A;}
.demo-send{background:#11504A;color:#fff;border:none;border-radius:999px;
  padding:11px 20px;font-weight:700;cursor:pointer;}
.demo-send:hover{background:#0B3733;}

/* Essayer l'agent : deux onglets (14/08/2026) --------------------------- */
.section-essayer{padding:64px 0;}
.essai-onglets{display:flex;gap:10px;justify-content:center;margin:0 0 22px;flex-wrap:wrap;}
.essai-onglet{display:inline-flex;align-items:center;gap:8px;min-height:46px;
  padding:0 20px;border-radius:999px;border:1.5px solid var(--line,#E7E1D2);
  background:#fff;color:#55605A;font-size:.95rem;font-weight:600;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;}
.essai-onglet:hover{border-color:#11504A;color:#11504A;}
.essai-onglet.est-actif{background:#11504A;border-color:#11504A;color:#fff;}
/* Règle Jeremy 16/08 : tout ce qui touche WhatsApp porte ses couleurs —
   l'onglet écrit actif est WhatsApp, l'onglet téléphone reste Rispondu. */
.essai-onglet.est-actif[data-canal="ecrit"]{background:#25D366;border-color:#25D366;}
.essai-intro{text-align:center;color:#55605A;font-size:.95rem;margin:0 0 16px;}
.essai-tel-carte{max-width:560px;margin:0 auto;text-align:center;background:#fff;
  border:1px solid var(--line,#E7E1D2);border-radius:18px;padding:26px 24px;
  box-shadow:0 2px 8px rgba(29,35,33,.06);}
.essai-num{display:inline-flex;align-items:center;gap:10px;font-size:1.55rem;
  font-weight:700;color:#0B3733;text-decoration:none;background:#EAF6EE;
  border:1.5px solid #34C759;border-radius:999px;padding:12px 26px;
  transition:transform .15s ease,box-shadow .15s ease;}
.essai-num:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(52,199,89,.25);}
.essai-note{margin:14px 0 0;font-size:.86rem;color:#6B7A73;}
/* Pages métiers v2 (15/07/2026) — complément d'assets/styles.css */
.metier-hero{background:linear-gradient(180deg,#0D3F3A,#11504A);color:#fff;padding:56px 0 48px;}
.mh-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;}
@media(max-width:840px){.mh-grid{grid-template-columns:1fr;gap:18px;}.mh-grid > div:last-child{order:-1;}.mh-photo{aspect-ratio:16/10;object-fit:cover;}.mh-btns .btn-secondary{display:none;}}
.metier-hero h1{color:#fff;font-size:clamp(1.9rem,4.2vw,2.7rem);margin:10px 0 14px;}
.metier-hero .lead{color:rgba(255,255,255,.85);font-size:1.08rem;}
.metier-hero .eyebrow{color:#D89A3D;}
.mh-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.mh-micro{color:rgba(255,255,255,.65);font-size:.85rem;margin-top:14px;}
.mh-photo{width:100%;height:auto;border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.35);}
.dlg-panel{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line,#E7E1D2);border-radius:16px;padding:22px 26px;}
.dlg{margin:10px 0;padding:10px 14px;border-radius:12px;font-size:.95rem;line-height:1.5;}
.dlg strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;opacity:.7;}
.dlg-client{background:#F1EEE4;margin-right:12%;}
.dlg-rispondu{background:#E4EFEC;margin-left:12%;border:1px solid rgba(17,80,74,.15);}
.roi-ligne{max-width:760px;margin:0 auto;font-size:1.05rem;text-align:center;}
.cta-metier{text-align:center;font-family:var(--serif,Georgia,serif);font-size:1.15rem;color:#11504A;margin:30px 0 14px;}
.metier-hero .btn-secondary{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent;}
.metier-hero .btn-secondary:hover{background:rgba(255,255,255,.12);}

/* ===== Scenes du quotidien (design v2.1) ===== */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
@media(max-width:840px){.scenes{grid-template-columns:1fr;}}
.scene{position:relative;background:#fff;border:1px solid var(--line,#E7E1D2);border-left:4px solid #B97711;border-radius:14px;padding:26px 22px 22px;box-shadow:0 8px 22px rgba(17,80,74,.07);}
.scene-heure{position:absolute;top:-14px;left:16px;background:#11504A;color:#F7F4EC;font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(17,80,74,.25);}
.scene h3{font-family:var(--serif,Georgia,serif);font-size:1.12rem;color:#11504A;font-style:italic;margin:6px 0 10px;line-height:1.35;}
.scene h3::before{content:"« ";color:#B97711;}
.scene h3::after{content:" »";color:#B97711;}
.scene p{color:#55605A;font-size:.92rem;margin:0;}

/* ===== Maquette tableau de bord (design v2.1) ===== */
.dash{max-width:860px;margin:0 auto;background:#0D3F3A;border-radius:18px;padding:18px 20px 14px;box-shadow:0 24px 60px rgba(13,63,58,.35);}
.dash-barre{display:flex;align-items:center;gap:7px;margin-bottom:14px;}
.dash-barre span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22);}
.dash-barre em{margin-left:10px;color:rgba(255,255,255,.75);font-style:normal;font-size:.85rem;font-weight:600;}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;}
.dash-kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;text-align:center;}
.dash-kpi strong{display:block;font-family:var(--serif,Georgia,serif);font-size:1.7rem;color:#D89A3D;}
.dash-kpi span{color:rgba(255,255,255,.75);font-size:.78rem;}
.dash-liste{display:flex;flex-direction:column;gap:8px;}
.dash-ligne{display:grid;grid-template-columns:64px 128px 1fr auto;gap:12px;align-items:center;background:#FBFAF6;border-radius:10px;padding:10px 14px;font-size:.86rem;}
@media(max-width:720px){.dash-ligne{grid-template-columns:56px 1fr;row-gap:6px;}.dash-qui{grid-column:2;}.dash-resume{grid-column:1/3;}.dash-badge{grid-column:1/3;justify-self:start;white-space:normal;}}
.dash-heure{color:#55605A;font-variant-numeric:tabular-nums;font-weight:600;}
.dash-qui{font-weight:700;color:#11504A;}
.dash-resume{color:#3d4643;}
.dash-badge{justify-self:end;font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.dash-ok{background:#E4EFEC;color:#2E7D5B;}
.dash-rappel{background:#F4EBDD;color:#B97711;}
.dash-urgence{background:#F7E3DC;color:#B4531E;}
.dash-info{background:#ECEDF2;color:#4A5568;}
.dash-note{color:rgba(255,255,255,.55);font-size:.75rem;text-align:center;margin:12px 0 2px;}

/* ===== Fil d'appel (capacites, design v2.1) ===== */
.fil-appel{list-style:none;margin:0 auto;padding:0;max-width:680px;position:relative;}
.fil-appel::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;border-left:2px dashed rgba(185,119,17,.45);}
.fil-etape{position:relative;display:flex;gap:18px;padding:0 0 26px;}
.fil-etape:last-child{padding-bottom:0;}
.fil-puce{flex:0 0 44px;height:44px;border-radius:50%;background:#11504A;color:#F7F4EC;font-family:var(--serif,Georgia,serif);font-weight:700;font-size:1.1rem;display:grid;place-items:center;border:3px solid #B97711;box-shadow:0 6px 14px rgba(17,80,74,.22);z-index:1;}
.fil-corps{background:#fff;border:1px solid var(--line,#E7E1D2);border-radius:14px;padding:16px 20px;flex:1;transition:transform .16s ease, box-shadow .16s ease;}
.fil-etape:hover .fil-corps{transform:translateX(4px);box-shadow:0 10px 24px rgba(17,80,74,.12);}
.fil-corps h3{font-family:var(--serif,Georgia,serif);font-size:1.05rem;color:#11504A;margin:0 0 6px;}
.fil-corps p{margin:0;color:#55605A;font-size:.92rem;}

/* ===== 24/08/2026 — « Ce que vous obtenez » : l'écosystème en 3 colonnes ===== */
.eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 980px) { .eco-grid { grid-template-columns: 1fr; } }
.eco-carte {
  background: #fff; border: 1px solid rgba(17, 80, 74, .12); border-radius: 18px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 10px 28px rgba(17, 80, 74, .07);
}
.eco-carte.eco-metier { border: 2px solid var(--gold); position: relative; }
.eco-carte.eco-metier::before {
  content: "L'écran de votre métier"; position: absolute; top: -13px; left: 20px;
  background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.eco-ico { font-size: 1.7rem; line-height: 1; }
.eco-carte h3 { font-size: 1.15rem; margin: 0; color: var(--pin-dark); }
.eco-carte ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.eco-carte li { padding-left: 22px; position: relative; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.eco-carte li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pin-light); font-weight: 700; }
.eco-inclus { text-align: center; margin: 26px 0 0; font-weight: 600; color: var(--pin-dark); }
.eco-inclus b { color: var(--gold); }

/* 24/08 (après-midi) — « Vos écrans, en vrai » : captures réelles par métier */
.ecog { display: grid; grid-template-columns: 1.55fr .62fr; gap: 24px; align-items: start; margin-top: 36px; }
@media (max-width: 980px) { .ecog { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.ecog.ecog-solo { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }