/* Série « Outils » : démonstrations sur données 100 % fictives. */
:root{
  --o-bleu:#1162ab; --o-bleu-clair:#e7f0f9; --o-orange:#f6a317; --o-orange-clair:#fef3e0;
  --o-vert:#1b8a5e; --o-vert-clair:#e3f4ec; --o-gris:#5b6475; --o-gris-clair:#f5f6f7;
  --o-trait:#dfe3ea; --o-encre:#1d2148; --o-interne:#7b8496;
}
#BlogArea .outil-demo{width:min(980px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%);
  margin:34px 0 38px;border:1px solid var(--o-trait);border-radius:14px;background:#fff;
  box-shadow:0 10px 30px rgba(29,33,72,.07);font-family:Inter,Arial,sans-serif;font-size:15px;line-height:1.45;color:var(--o-encre)}
#BlogArea .outil-demo *{box-sizing:border-box}
#BlogArea .demo-barre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px;border-bottom:1px solid var(--o-trait);
  background:var(--o-gris-clair);border-radius:14px 14px 0 0}
#BlogArea .demo-barre .demo-titre{font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:16px}
#BlogArea .demo-fictif{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#7a4b00;background:var(--o-orange-clair);border:1px solid #f3d29a;border-radius:20px;padding:3px 10px}
#BlogArea .demo-corps{padding:16px 18px 18px}
#BlogArea .demo-legende{font-size:13px;color:var(--o-gris);margin:10px 0 0}
#BlogArea .demo-note{font-size:.95rem;color:var(--o-gris);font-style:italic;text-align:center;max-width:720px;margin:-22px auto 30px}

/* pastilles de couleur des clients fictifs */
#BlogArea .c-A{--c:var(--o-bleu)} #BlogArea .c-B{--c:var(--o-orange)} #BlogArea .c-C{--c:var(--o-vert)} #BlogArea .c-I{--c:var(--o-interne)} #BlogArea .c-X{--c:#c9ced8}
#BlogArea .pastille{display:inline-block;width:11px;height:11px;border-radius:50% 50% 50% 0;background:var(--c);margin-right:6px;vertical-align:0}

/* 1. semaine reconstituée */
#BlogArea .sources{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
#BlogArea .sources label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--o-trait);border-radius:20px;padding:4px 11px;
  font-size:13.5px;cursor:pointer;user-select:none;background:#fff}
#BlogArea .sources input{accent-color:var(--o-bleu);margin:0}
#BlogArea .sources label.off{color:#9aa3b2;background:var(--o-gris-clair)}
#BlogArea .semaine{display:grid;grid-template-columns:52px repeat(5,1fr);gap:0 6px;position:relative}
#BlogArea .semaine .jour-tete{font-weight:700;font-size:13px;text-align:center;padding:0 0 6px}
#BlogArea .semaine .heures{position:relative;height:396px;font-size:11px;color:#8a93a6}
#BlogArea .semaine .heures span{position:absolute;right:6px;transform:translateY(-50%)}
#BlogArea .semaine .col{position:relative;height:396px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 35px,#eef0f4 35px,#eef0f4 36px);
  border:1px solid var(--o-trait);border-radius:8px;overflow:hidden}
#BlogArea .bloc{position:absolute;left:3px;right:3px;border-radius:6px;background:var(--c);color:#fff;font-size:11.5px;line-height:1.2;
  padding:3px 5px;overflow:hidden;transition:opacity .25s,filter .25s;border:1px solid rgba(0,0,0,.08)}
#BlogArea .bloc.c-B{color:#2b1a00}
#BlogArea .bloc.c-X{color:#2b2f3a;background:repeating-linear-gradient(45deg,#e4e7ee 0,#e4e7ee 6px,#d3d8e2 6px,#d3d8e2 12px)}
#BlogArea .bloc b{display:block;font-size:11.5px}
#BlogArea .bloc.eteint{opacity:.12;filter:grayscale(1)}
#BlogArea .totaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:16px 0 0}
#BlogArea .total{border:1px solid var(--o-trait);border-left:5px solid var(--c);border-radius:8px;padding:8px 12px}
#BlogArea .total .n{font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:22px}
#BlogArea .total .l{font-size:13px;color:var(--o-gris)}
#BlogArea .traces{width:100%;border-collapse:collapse;font-size:13.5px}
#BlogArea .traces th,#BlogArea .traces td{border-bottom:1px solid var(--o-trait);padding:6px 8px;text-align:left;vertical-align:top}
#BlogArea .traces th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--o-gris)}
#BlogArea .traces td.h{white-space:nowrap;font-variant-numeric:tabular-nums}
#BlogArea .regle{font-size:12px;color:var(--o-gris)}

/* 2. espace de suivi client */
#BlogArea .onglets{display:flex;gap:6px;flex-wrap:wrap}
#BlogArea .onglets button{border:1px solid var(--o-trait);background:#fff;border-radius:8px;padding:5px 12px;font:inherit;font-size:14px;cursor:pointer}
#BlogArea .onglets button[aria-selected="true"]{background:var(--o-encre);color:#fff;border-color:var(--o-encre)}
#BlogArea .portail{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
#BlogArea .portail h3{font-family:Manrope,Arial,sans-serif;font-size:15px;font-weight:700;margin:0 0 8px;text-transform:uppercase;letter-spacing:.05em;color:var(--o-gris)}
#BlogArea .maj{font-size:12.5px;color:var(--o-gris);margin:0 0 12px}
#BlogArea .projet{border:1px solid var(--o-trait);border-radius:10px;padding:10px 12px;margin:0 0 10px}
#BlogArea .projet .ligne1{display:flex;justify-content:space-between;gap:10px;font-weight:700}
#BlogArea .statut{font-size:12px;font-weight:700;border-radius:12px;padding:2px 9px;white-space:nowrap}
#BlogArea .statut.cours{background:var(--o-bleu-clair);color:#0b4a82}
#BlogArea .statut.attente{background:var(--o-orange-clair);color:#7a4b00}
#BlogArea .statut.fini{background:var(--o-vert-clair);color:#14583c}
#BlogArea .jauge{height:9px;border-radius:5px;background:#e9ecf1;margin:8px 0 6px;overflow:hidden}
#BlogArea .jauge i{display:block;height:100%;background:var(--c);border-radius:5px}
#BlogArea .projet .meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--o-gris)}
#BlogArea .attend{border:1px solid #f3d29a;background:var(--o-orange-clair);border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:14px}
#BlogArea .journal-c{list-style:none;margin:0;padding:0;font-size:13.5px}
#BlogArea .journal-c li{padding:5px 0;border-bottom:1px dashed var(--o-trait)}
#BlogArea .journal-c li span{color:var(--o-gris);font-variant-numeric:tabular-nums;margin-right:6px}
#BlogArea .chat{border:1px solid var(--o-trait);border-radius:12px;display:flex;flex-direction:column;height:100%;min-height:360px}
#BlogArea .chat .fil{flex:1;padding:10px;overflow:auto;max-height:330px;display:flex;flex-direction:column;gap:8px}
#BlogArea .bulle{max-width:88%;padding:8px 11px;border-radius:12px;font-size:14px}
#BlogArea .bulle.q{align-self:flex-end;background:var(--o-encre);color:#fff;border-bottom-right-radius:3px}
#BlogArea .bulle.r{align-self:flex-start;background:var(--o-gris-clair);border-bottom-left-radius:3px}
#BlogArea .bulle.r.refus{background:#fdeeee;color:#7a1f1f}
#BlogArea .chat .suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-top:1px solid var(--o-trait)}
#BlogArea .chat .suggestions button{border:1px solid var(--o-bleu);color:var(--o-bleu);background:#fff;border-radius:16px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer}
#BlogArea .chat .suggestions button:hover,#BlogArea .onglets button:hover{filter:brightness(.95)}

/* 3. vidéo */
#BlogArea .video-demo video{width:100%;height:auto;display:block;border-radius:10px;background:#000}
#BlogArea .chaine{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:14px 0 0}
#BlogArea .chaine .etape{flex:1 1 150px;border:1px solid var(--o-trait);border-radius:10px;padding:9px 11px;font-size:13.5px;background:#fff}
#BlogArea .chaine .etape b{display:block;font-family:Manrope,Arial,sans-serif;font-size:14.5px;margin-bottom:2px}
#BlogArea .chaine .fl{align-self:center;color:var(--o-gris);font-weight:700}

/* 4. assistant de messagerie */
#BlogArea .archi{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
#BlogArea .archi svg{width:100%;height:auto;display:block}
#BlogArea .tel{border:10px solid #1d2148;border-radius:30px;background:#efe9df;overflow:hidden}
#BlogArea .tel .ent{background:#1d2148;color:#fff;font-size:13px;font-weight:700;padding:6px 12px 10px}
#BlogArea .tel .msgs{padding:10px 8px;display:flex;flex-direction:column;gap:7px;font-size:13px;min-height:420px}
#BlogArea .tel .m{max-width:86%;padding:6px 9px;border-radius:9px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08)}
#BlogArea .tel .m.moi{align-self:flex-end;background:#dcf3d6}
#BlogArea .tel .m small{display:block;color:#6b7280;font-size:11px;margin-bottom:2px;font-weight:700}
#BlogArea .tel .m .reac{display:inline-block;margin-left:6px}
#BlogArea .tel .m.alerte{background:#fff6e5;border-left:3px solid var(--o-orange)}

/* 5. boucle de contrôle */
#BlogArea .boucle{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:etape}
#BlogArea .boucle .e{border:1px solid var(--o-trait);border-radius:10px;padding:10px 12px;position:relative;background:#fff}
#BlogArea .boucle .e::before{counter-increment:etape;content:counter(etape);position:absolute;top:-10px;left:10px;width:22px;height:22px;
  border-radius:50% 50% 50% 0;background:var(--o-orange);color:#2b1a00;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
#BlogArea .boucle .e b{display:block;margin:6px 0 3px;font-family:Manrope,Arial,sans-serif}
#BlogArea .boucle .e p{margin:0;font-size:13.5px;color:var(--o-gris)}
#BlogArea .retour{margin:10px 0 0;font-size:13.5px;color:var(--o-gris);text-align:center}

/* encadrés de l'article */
#BlogArea .encart-serie{border:1px solid var(--o-trait);border-left:4px solid var(--o-bleu);background:#f7f9fc;padding:14px 18px;margin:0 0 28px;font-size:1.05rem}
#BlogArea .encart-serie ol{margin:6px 0 0;padding-left:22px}
#BlogArea .encart-serie li{margin:2px 0}
#BlogArea .encart-serie .ici{font-weight:700}
#BlogArea .contact-discret{border-top:1px solid var(--o-trait);margin:34px 0 0;padding:16px 0 0;font-size:1.1rem}
#BlogArea .mention-ia{font-size:.95rem;color:var(--o-gris);font-style:italic;margin-top:18px}
#BlogArea .limites li{margin-bottom:8px}

/* page index */
#BlogArea .cartes-outils{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,320px));justify-content:center;gap:22px;width:min(980px,calc(100vw - 32px));
  position:relative;left:50%;transform:translateX(-50%);margin:10px 0 30px}
#BlogArea .carte-outil{border:1px solid var(--o-trait);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;
  box-shadow:0 8px 24px rgba(29,33,72,.06);color:inherit;text-decoration:none}
#BlogArea .carte-outil:hover{box-shadow:0 10px 30px rgba(29,33,72,.13)}
#BlogArea .carte-outil img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;display:block;border-bottom:1px solid var(--o-trait)}
#BlogArea .carte-outil .t{padding:12px 16px 16px}
#BlogArea .carte-outil .num{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--o-gris)}
#BlogArea .carte-outil h2{font-size:1.2rem;margin:4px 0 6px;line-height:1.3}
#BlogArea .carte-outil p{font-size:.98rem;margin:0;color:#3a4152}

@media (max-width:820px){
  #BlogArea .portail,#BlogArea .archi{grid-template-columns:1fr}
  #BlogArea .boucle{grid-template-columns:1fr 1fr}
  #BlogArea .semaine{grid-template-columns:34px repeat(5,1fr);gap:0 3px}
  #BlogArea .bloc{font-size:9.5px;padding:2px 3px}
  #BlogArea .bloc b{font-size:9.5px}
  #BlogArea .bloc .det{display:none}
  #BlogArea .tel{max-width:320px;margin:0 auto}
}
@media (max-width:480px){
  #BlogArea .boucle{grid-template-columns:1fr}
  #BlogArea .demo-corps{padding:12px}
  #BlogArea .semaine .jour-tete{font-size:11px}
}