/* Accueil, version A14 (09/11/2026, Aziz). Fabriqué par maquettes-refonte/accueil-0811/fabriquer-a14.cjs --poser : retoucher la source. */
/* ===== Commun ===== */
.logos{display:none!important}
@media (min-width:1000px){
  .foot .wrap,.hero .wrap,#qui .wrap,#faq .wrap,#brancher.matin .wrap,#comment.matin .wrap,#offre.matin .wrap{max-width:1440px}
  #qui,#comment,#offre,#faq,.sep,#brancher{background-position:16px 0,calc(100% - 16px) 0}
  .hero .wrap{grid-template-columns:minmax(0,560px) minmax(0,1fr)!important;column-gap:56px!important}
  .hero .wrap > figure.vx-haut{grid-column:2!important;grid-row:1 / span 5!important;align-self:center;margin:0;position:relative;max-width:none}
  .hero-gauche{height:auto!important}
  .hero-offre-bloc{margin-top:34px}
  /* Étape 2 : le texte a sa largeur, le dessin commence juste après */
  #comment .mat-tete{grid-template-columns:minmax(0,560px) minmax(0,1fr)!important;column-gap:20px!important}
  #comment .mat-tete .mat-formule{max-width:520px;text-wrap:pretty}
}
/* petit ordinateur : la démo est trop serrée à côté du texte, elle passe dessous, en grand */
@media (min-width:1000px) and (max-width:1279px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)!important}
  .hero .wrap > figure.vx-haut{grid-column:1!important;grid-row:auto!important;margin:48px auto 0!important;width:100%;max-width:980px}
}
@media (min-width:1472px){
  #qui,#comment,#offre,#faq,.sep,#brancher{background-position:calc(50% - 719.5px) 0,calc(50% + 719.5px) 0}
  .sep::before{left:calc(50% - 723px)!important}.sep::after{left:calc(50% + 716px)!important;right:auto!important}
}
.vx-ancre.mock{position:absolute!important;inset:0!important;display:block!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;z-index:-1;opacity:0}
.matin figure.vx-fig{height:auto!important;aspect-ratio:auto!important}
.vx-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;margin-bottom:14px;border-radius:999px;background:#EEF3FF;color:#1D4ED8;font-weight:700;font-size:13px;letter-spacing:.02em;box-shadow:inset 0 0 0 1px #D6E2FD}
.vx-pill i{width:7px;height:7px;border-radius:50%;background:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.18)}
@media (max-width:860px){#offre .vx-pill{align-self:center;order:0}}
.vx-haut{margin:36px auto 0;max-width:880px}

/* ===== Le haut : la démo de la Boîte, proche du vrai produit ===== */
.db-masque{margin:-40px;padding:40px;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 94%);mask-image:linear-gradient(to bottom,#000 80%,transparent 94%)}
.db-fen{position:relative;border-radius:16px;overflow:hidden;background:#fff;font-size:13px;color:#1D1D1F;text-align:left;
  box-shadow:0 0 0 1px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04),0 44px 90px -40px rgba(15,23,42,.42),0 20px 40px -26px rgba(37,99,235,.24)}
.db-chrome{display:flex;align-items:flex-end;gap:14px;height:42px;padding:0 14px;background:#F3F4F6;border-bottom:1px solid #E5E7EB;white-space:nowrap}
.db-pts{display:flex;gap:7px;flex:0 0 auto;align-self:center}.db-pts i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.db-pts i:nth-child(2){background:#FEBC2E}.db-pts i:nth-child(3){background:#28C840}
.db-onglet{display:inline-flex;align-items:center;gap:7px;height:31px;margin:0 0 -1px 6px;padding:0 16px;border-radius:9px 9px 0 0;background:#fff;color:#1D1D1F;font-weight:600;font-size:12.5px;box-shadow:0 0 0 1px #E5E7EB;clip-path:inset(-2px -2px 0 -2px)}
.db-onglet svg{width:15px;height:15px}
.db-ex{margin-left:auto;align-self:center;font-style:normal;color:#9AA0A8;font-size:12px}
.db-entete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 18px;border-bottom:1px solid #EEF0F3}
.db-entete > div:first-child{min-width:0}.db-entete > div:first-child b{display:block;font-size:15px;line-height:20px}.db-entete > div:first-child > span{display:block;height:18px;font-size:12.5px;line-height:18px;color:#6E6E73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-gros{flex:0 0 auto;display:flex;align-items:center;gap:10px;white-space:nowrap}.db-gros b{font-size:32px;letter-spacing:-.03em;line-height:1;color:#1D1D1F;font-variant-numeric:tabular-nums}.db-gros span{color:#6E6E73;font-size:12px;line-height:1.25}
.db-corps{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);height:490px;min-width:0}
/* la file : le plus ancien en haut, les nouveaux en bas */
.db-col-liste{position:relative;border-right:1px solid #EEF0F3;padding-top:10px;min-width:0;overflow:hidden}
.db-filtres{display:flex;gap:6px;margin:0 10px 8px;padding:3px;border-radius:10px;background:#F1F2F4}
.db-filtres span{flex:1;text-align:center;padding:6px 0;border-radius:8px;font-weight:600;font-size:12.5px;color:#6E6E73}
.db-filtres .on{background:#fff;color:#1D1D1F;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.db-filtres b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:#2563EB;color:#fff;font-size:11px;font-variant-numeric:tabular-nums}
.db-filtres b[hidden]{display:none}
.db-filtres .db-b-env{background:#0F7B4F}
.db-l{position:relative;display:flex;align-items:flex-start;gap:9px;padding:10px 12px 10px 16px;border-top:1px solid #F1F2F4;overflow:hidden;transition:height .6s cubic-bezier(.22,.8,.24,1),opacity .45s,background-color .9s}
.db-l.survol{background:#F6F7F9}
.db-l.on{background:#EEF3FF;box-shadow:inset 3px 0 0 #2563EB}
.db-l.presse{background:#E8EBEF}
.db-point{position:absolute;left:5px;top:22px;width:7px;height:7px;border-radius:50%;background:#2563EB;transition:opacity .25s,scale .25s}
.db-l:not(.neuf) .db-point{opacity:0;scale:.3}
.db-av{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c);color:#fff;font-weight:700;font-size:13px}
.db-l-txt{min-width:0;flex:1}
.db-l1{display:flex;justify-content:space-between;gap:8px;margin:0}
.db-l1 b{font-weight:500;font-size:13px;color:#1D1D1F}.db-l1 time{font-size:11px;color:#9AA0A8;white-space:nowrap;font-variant-numeric:tabular-nums}
.db-l.neuf .db-l1 b{font-weight:700}.db-l.neuf .db-l1 time{color:#2563EB;font-weight:600}
.db-ap{margin:2px 0 6px;font-size:12px;line-height:1.35;color:#6E6E73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-l.neuf .db-ap{color:#3F444B}
.db-et{display:inline-flex;align-items:center;gap:6px;height:21px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:600}
.db-et::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.db-et.prep{background:#F1F2F4;color:#6E6E73}.db-et.prep::before{display:none}
.db-et.prete{background:#EEF3FF;color:#1D4ED8}.db-et.decider{background:#FEF3C7;color:#B45309}.db-et.envoyee{background:#E3F5EC;color:#0F7B4F}
/* « Bluo prépare » : trois points qui s'allument l'un après l'autre */
.db-tape{display:inline-flex;align-items:center;gap:3px;margin-left:1px}
.db-tape i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:dbTape 1.15s ease-in-out infinite}
.db-tape i:nth-child(2){animation-delay:.17s}.db-tape i:nth-child(3){animation-delay:.34s}
@keyframes dbTape{0%,70%,100%{opacity:.25;scale:.7}35%{opacity:1;scale:1}}
@keyframes dbTourne{to{transform:rotate(360deg)}}
.db-bluo{flex:0 0 auto;display:block}
.db-fil{position:relative;background:#FAFAFB;min-width:0}
/* au début : Bluo prépare ; chaque étape, un anneau qui tourne puis la coche */
.db-travail{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px 28px}
.db-travail.cache{display:none}
.db-tr-t{display:flex;align-items:center;gap:10px;margin:0;font-size:14px}
.db-travail ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.db-travail li{position:relative;padding-left:28px;font-size:13px;line-height:18px;color:#8A8F98}
.db-travail li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:1.5px solid #D5D9DF}
.db-travail li.encours{color:#1D1D1F}
.db-travail li.encours::before{border:2px solid #DCE6FA;border-top-color:#2563EB;animation:dbTourne .7s linear infinite}
.db-travail li.fait{color:#1D1D1F}
.db-travail li.fait::before{border:0;background:#0F7B4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px}
.db-tr-fin{margin:6px 0 0;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #E7E9ED;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.db-travail.fini .db-tr-fin{opacity:1;transform:none}
.db-tr-fin b{display:block;font-size:14px;color:#1D1D1F}.db-tr-fin span{font-size:12.5px;color:#6E6E73}
/* la main et son onde (placées en JS, à chaque image) */
.db-main{position:absolute;left:0;top:0;z-index:6;width:32px;height:32px;margin:-3px 0 0 -11.5px;pointer-events:none;opacity:0;transition:opacity .35s,scale .12s;transform-origin:11.5px 3px;filter:drop-shadow(0 3px 4px rgba(15,23,42,.28));will-change:translate}
.db-main.vue{opacity:1}
.db-main.appui{scale:.84}
.db-onde{position:absolute;left:0;top:0;z-index:5;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(37,99,235,.22);box-shadow:inset 0 0 0 2px rgba(37,99,235,.35);opacity:0;pointer-events:none}
.db-onde.part{animation:dbOnde .55s cubic-bezier(.2,.7,.3,1)}
@keyframes dbOnde{from{opacity:1;scale:.25}to{opacity:0;scale:1.5}}
/* ===== Étape 1 : les logos flottent autour de la lettre et de la boutique (comme l'A5) ===== */
.vx-br4{position:relative}
.vx-br4 > svg{display:block;width:100%;height:auto;aspect-ratio:640/400}
.vx-flots{position:absolute;inset:0;pointer-events:none}
.vx-flot{position:absolute;display:inline-flex;align-items:center;justify-content:center;height:46px;min-width:46px;padding:0 12px;border-radius:14px;background:#fff;
  box-shadow:0 0 0 1px #ECEEF2,0 1px 2px rgba(15,17,20,.05),0 14px 26px -14px rgba(15,23,42,.30);animation:vxFlotte 5.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.vx-flot img{display:block;width:auto}
@keyframes vxFlotte{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
#brancher .vx-liste{margin-top:14px;font-size:14px;line-height:1.5;color:#55595F}
@media (max-width:600px){.vx-flot{scale:.68}}

/* ===== Étape 2 : le dessin flotte, les fils coulent ===== */
#comment .mat-matin .sr-flotte{animation:srFlotte 5.8s ease-in-out infinite alternate}
#comment .mat-matin .sr-1{animation-delay:-1.4s}
#comment .mat-matin .sr-2{animation-duration:6.6s;animation-delay:-3.2s}
#comment .mat-matin .sr-3{animation-duration:5.2s;animation-delay:-.6s}
#comment .mat-matin .sr-4{animation-duration:6.2s;animation-delay:-2.4s}
#comment .mat-matin .sr-bluo{animation:srBluo 3.4s ease-in-out infinite alternate}
@keyframes srFlotte{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes srBluo{from{transform:translateY(0)}to{transform:translateY(-7px)}}
#comment .mat-matin .sr-fil{animation:srCoule 1.3s linear infinite}
@keyframes srCoule{to{stroke-dashoffset:-10.5}}
@media (prefers-reduced-motion: reduce){.vx-flot,#comment .mat-matin .sr-flotte,#comment .mat-matin .sr-fil{animation:none}}

/* ===== A9 ===== */
.db-l.voile{background:#E8F0FE}
.db-entete > div:first-child > span{height:18px}
/* la pastille des nouveaux mails, comme la vraie Boîte : blanche, bord gris, texte bleu, flèche vers le bas ; sous la liste, sur le fondu */
.db-pilule{position:absolute;left:20%;bottom:-16px;z-index:7;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #E3E5E9,0 10px 24px -10px rgba(15,23,42,.35);color:#2563EB;font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;translate:-50% 8px;transition:opacity .35s ease,translate .45s cubic-bezier(.22,.8,.24,1)}
.db-pilule.vue{opacity:1;translate:-50% 0}
/* la conversation : un fil collé en bas, comme une messagerie ; le bas de la colonne est sous le fondu, le fil s'arrête juste au-dessus */
.db-conv{position:absolute;inset:0;display:none;flex-direction:column}
.db-conv.on{display:flex}
.db-c-tete{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;border-bottom:1px solid #EEF0F3;min-width:0}
.db-retour{display:none}
.db-c-tete > div{min-width:0}.db-c-tete > div b{display:block;font-size:13.5px}.db-c-tete > div span{display:block;font-size:11.5px;color:#6E6E73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-attend{flex:0 0 auto;margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:#B45309;background:#FEF3C7;padding:3px 8px;border-radius:6px;white-space:nowrap}
.db-flux{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px 16px 96px;min-height:0}
.db-meta{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:11px;font-weight:600;color:#8A8F98}
.db-b-client{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.db-av-p{width:24px;height:24px;font-size:11px;margin-bottom:2px}
.db-bulle{padding:9px 13px;border-radius:16px 16px 16px 5px;background:#fff;box-shadow:0 0 0 1px #E7E9ED,0 1px 2px rgba(15,23,42,.04);font-size:12.5px;line-height:1.5;color:#2B2E33}
.db-cmd{align-self:center;display:inline-flex;align-items:center;gap:6px;margin:2px 0;padding:4px 10px 4px 5px;border-radius:999px;background:#F1F2F4;font-size:11.5px;color:#55595F;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.db-cmd b{color:#1D1D1F;font-weight:650}
.db-cmd-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#0F7B4F}
.db-b-moi{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;max-width:88%}
.db-b-moi .db-meta{flex-direction:row}
.db-rep{position:relative;padding:10px 14px;border-radius:16px;background:#fff;border:1.5px dashed rgba(37,99,235,.45);transition:background-color .5s ease,border-color .5s ease}
.db-rep-c{margin:0;font-size:12.5px;line-height:1.55;color:#2B2E33}.db-rep-c u{color:#2563EB;text-decoration:none;font-weight:600}
/* le trait bleu qui fait le tour de la bulle pendant l'envoi */
.db-tour{position:absolute;left:-1.5px;top:-1.5px;overflow:visible;pointer-events:none}
.db-tour rect{fill:none;stroke:#2563EB;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0}
.db-conv.envoi .db-tour rect{opacity:1;animation:dbTour 1.35s cubic-bezier(.45,.05,.35,1) forwards}
@keyframes dbTour{to{stroke-dashoffset:0}}
.db-conv.envoi .db-rep{border-color:transparent}
.db-conv.envoyee .db-rep{border-style:solid;border-color:rgba(37,99,235,.15);background:#EEF3FF}
.db-conv.envoyee .db-tour rect{opacity:0;transition:opacity .4s}
.db-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:7px;min-height:30px}
.db-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:9px;font-weight:600;font-size:12.5px;white-space:nowrap;transition:background-color .2s,scale .14s}
.db-changer{background:#fff;box-shadow:inset 0 0 0 1px #DADDE2}
.db-envoyer{background:#0F1114;color:#fff}
.db-envoyer.survol{background:#2A2D33}
.db-btn.presse{scale:.95}
.db-annuler,.db-partie{display:none;align-items:center;gap:5px;font-size:12px;font-weight:600}
.db-annuler{color:#6E6E73;padding:0 4px}
.db-partie{height:24px;padding:0 9px;border-radius:7px;background:#E3F5EC;color:#0F7B4F;animation:dbVient .45s cubic-bezier(.22,.8,.24,1)}
@keyframes dbVient{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
.db-conv.envoi .db-btn,.db-conv.envoyee .db-btn{display:none}
.db-conv.envoi .db-annuler{display:inline-flex}
.db-conv.envoyee .db-partie{display:inline-flex}
/* petit ordinateur : la pastille reste sous la liste */
@media (min-width:1000px) and (max-width:1279px){.db-pilule{left:20%}}
/* téléphone : la même fenêtre, courte ; la liste (4 mails, le 5e caché) OU la conversation, comme une appli */
@media (max-width:600px){
  .vx-haut{margin-top:30px;max-width:none}
  .db-masque{margin:-24px -20px;padding:24px 20px;-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 96%);mask-image:linear-gradient(to bottom,#000 86%,transparent 96%)}
  .db-chrome{height:40px}.db-onglet{height:30px}
  .db-entete{padding:10px 14px}.db-gros b{font-size:26px}.db-gros span{font-size:11.5px}
  .db-corps{display:block;height:456px}
  .db-col-liste,.db-fil{position:absolute;inset:0}
  .db-col-liste{border-right:0}
  .db-fil{display:none}
  .db-corps.detail .db-fil{display:block}
  .db-corps.detail .db-col-liste{visibility:hidden}
  .db-l{padding:9px 14px 9px 18px}
  .db-travail{padding:20px 22px}
  .db-retour{display:grid;place-items:center;width:18px;margin-left:-4px;color:#2563EB}
  .db-c-tete{padding:9px 12px;gap:8px}
  .db-c-tete > div span{display:none}
  .db-flux{padding:10px 12px 52px;gap:8px}
  .db-b-client,.db-b-moi{max-width:94%}
  .db-pilule{left:50%;bottom:-14px}
  .db-main{width:30px;height:30px}
}

/* ===== A10 ===== */
/* le début : « Bluo prépare » centré dans sa colonne, quatre lignes, une coche simple (pas de rond rempli) */
.db-travail{align-items:center;justify-content:center;padding:20px}
.db-tr-bloc{display:flex;flex-direction:column;gap:14px;max-width:100%}
.db-travail li::before{border:0;width:16px;height:16px;top:1px}
.db-travail li.encours::before{border:2px solid #DCE6FA;border-top-color:#2563EB}
.db-travail li.fait::before{border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.6' fill='none' stroke='%230F7B4F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* la file : le point bleu après l'heure, comme la vraie Boîte ; les lignes bougent par Web Animations (plus de transition de hauteur) */
.db-l{padding-left:14px;transition:background-color .9s}
.db-l1{justify-content:flex-start;align-items:center}
.db-l1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-l1 time{margin-left:auto;padding-left:6px}
.db-point{position:static;flex:0 0 7px;width:7px;height:7px;margin-left:6px;border-radius:50%;background:#2563EB}
.db-l:not(.neuf) .db-point{display:none}
.db-l.depart::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#2563EB;animation:dbDepart 1.12s linear forwards}
@keyframes dbDepart{to{width:100%}}
/* les compteurs : À faire en rouge, Envoyées en gris */
.db-filtres span:first-child b{background:#EF4444}
.db-filtres .db-b-env{background:#9AA0A8}
/* la pastille « Nouveau mail » : au bas de la liste, à moitié dans le brouillard */
.db-col-liste .db-pilule{left:50%;bottom:24px}
@media (min-width:1000px) and (max-width:1279px){.db-col-liste .db-pilule{left:50%}}
/* l'envoi, comme la vraie Boîte : « Part dans 2 s » et Annuler (rouge léger), puis la double coche bleue et « Envoyée » */
.db-part,.db-partie{display:none;align-items:center;gap:8px;font-size:12px;font-weight:600}
.db-part > span:first-child{color:#1D4ED8;font-variant-numeric:tabular-nums}
.db-annuler{display:inline-flex!important;align-items:center;gap:5px;height:26px;padding:0 11px 0 9px;border-radius:999px;background:#FEF2F2;color:#DC2626;box-shadow:inset 0 0 0 1px #FECACA;font-size:12px;font-weight:600}
.db-partie{gap:5px;color:#6E6E73;font-weight:500;animation:dbVient .45s cubic-bezier(.22,.8,.24,1)}
.db-conv.envoi .db-part{display:inline-flex}
.db-conv.envoyee .db-partie{display:inline-flex}
.db-conv.envoi .db-tour rect{animation-duration:1.12s}
@media (max-width:600px){.db-col-liste .db-pilule{left:50%;bottom:20px}.db-l{padding-left:14px}}

/* ===== A11 ===== */
/* la flèche */
.db-main,.db-main[width]{width:28px!important;height:28px!important;margin:-3px 0 0 -5.5px!important;transform-origin:5.5px 3px;filter:drop-shadow(0 2px 3px rgba(15,23,42,.3))}
/* « Réponse de Bluo » dans la bulle ; il se replie à l'envoi (demo-boite.js) */
.db-rep-t{margin:0 0 4px;font-size:11px;font-weight:600;color:#8A8F98;overflow:hidden;display:block}
/* la coche d'envoi dans la bulle, en bleu foncé, comme WhatsApp */
.db-coche{display:inline-flex;vertical-align:-3px;margin-left:6px;color:#1E40AF;opacity:0;transition:opacity .35s ease .15s}
.db-conv.envoyee .db-coche{opacity:1}
/* l'envoi : seulement Annuler, blanc et écrit en rouge ; plus de « Part dans », plus de « Envoyée » sous la bulle */
.db-actions .db-annuler{display:none!important;align-items:center;gap:5px;height:28px;padding:0 12px 0 10px;border-radius:999px;background:#fff!important;color:#DC2626;box-shadow:inset 0 0 0 1px #E3E5E9,0 1px 2px rgba(15,23,42,.06)!important;font-size:12px;font-weight:600}
.db-conv.envoi .db-actions .db-annuler{display:inline-flex!important;animation:dbVient .3s cubic-bezier(.22,.8,.24,1)}
.db-part,.db-partie{display:none!important}
/* dans la liste : « Envoyée » en gris, plus de trait bleu au pied de la ligne */
.db-et.envoyee{background:#F1F2F4;color:#6E6E73}
.db-l.depart::after{display:none}

/* ===== A12 : les boutons et l'envoi de la vraie Boîte ===== */
/* Modifier : la boule de Bluo dans un bouton bleu pâle ; Envoyer : bleu (Relief fin de l'espace) ; Annuler : la même forme, blanc écrit en rouge */
.db-actions .db-btn{height:30px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:600}
.db-modifier{gap:6px;padding-left:8px!important;background:#EEF4FF;color:#1D4ED8;box-shadow:inset 0 0 0 1px rgba(37,99,235,.28),inset 0 -1px 0 rgba(37,99,235,.38)}
.db-modifier .db-bluo{width:16px;height:16px}
.db-envoyer,.db-actions .db-envoyer{background:#2563EB;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1.5px 0 rgba(0,0,0,.34)}
.db-envoyer.survol{background:#1D4ED8}
.db-actions .db-annuler{height:30px!important;padding:0 12px 0 10px!important;border-radius:9px!important;background:#fff!important;color:#DC2626;box-shadow:inset 0 0 0 1px rgba(24,24,27,.13),inset 0 -1px 0 #CDCDD3!important;font-size:12.5px!important}
/* « ✓✓ Envoyée » : en bas à droite, dans la bulle, le bleu de « Réponse prête » ; il s'ouvre pendant que « Réponse de Bluo » se replie */
.db-coin{display:flex;justify-content:flex-end;align-items:center;gap:4px;height:0;margin:0;opacity:0;overflow:hidden;font-size:11.5px;font-weight:600;color:#1D4ED8;line-height:16px}
.db-coin svg{color:#2563EB;flex:0 0 auto}
.db-coche{display:none}
/* dans la liste aussi : la double coche et « Envoyée », sans pastille */
.db-et.envoyee{gap:4px;padding-left:0;background:none;color:#1D4ED8}
.db-et.envoyee::before{display:none}
.db-et.envoyee svg{color:#2563EB}

/* ===== A13 : à jour de la vraie Boîte (12e retour), dans un écran de Mac ===== */
.db-ecran{position:relative;padding:12px;border-radius:24px;background:linear-gradient(#2B2B2E,#161618);box-shadow:0 0 0 1px #3A3A3D,inset 0 0 0 1px rgba(255,255,255,.07),0 50px 100px -40px rgba(15,23,42,.55),0 24px 48px -28px rgba(37,99,235,.26)}
.db-camera{position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3B3F46;box-shadow:inset 0 0 0 1px #4B5059}
.db-ecran .db-fen{border-radius:12px;box-shadow:none}
.db-corps{height:540px}
/* la file */
.db-lbas{display:flex;margin-top:1px}
.db-ap{margin-bottom:6px}
.db-depart{display:inline-flex;align-items:center;gap:5px;color:#1D4ED8;font-weight:600;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.db-depart svg,.db-coches svg{color:#2563EB;flex:0 0 auto}
.db-coches{display:inline-flex;align-items:center;gap:4px;color:#1D4ED8;font-weight:600;font-size:11.5px;white-space:nowrap}
.db-l.vague{background-image:linear-gradient(100deg,transparent 30%,rgba(37,99,235,.10) 50%,transparent 70%);background-repeat:no-repeat;background-size:240% 100%;animation:dbVague 2.8s ease-in-out infinite}
@keyframes dbVague{from{background-position:130% 0}to{background-position:-30% 0}}
/* Annuler (comme la vraie Boîte « 1 · Blanc ») : blanc, texte rouge, bord gris fin ; le fond rosit pendant le décompte */
.db-annuler{display:inline-flex!important;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:7px;background:#fff linear-gradient(#FDE4E4,#FDE4E4) no-repeat left/0% 100%!important;color:#DC2626;font-size:11.5px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(24,24,27,.14),inset 0 -1px 0 #CDCDD3!important;white-space:nowrap}
.db-moi.part .db-annuler,.db-l .db-annuler{animation:dbRosit 1.7s linear forwards}
.db-moi.prevue .db-annuler{background-size:18% 100%!important}
@keyframes dbRosit{to{background-size:100% 100%}}
/* la conversation : le nom en haut, UN état à droite ; le fil sans photo ni nom, l'heure dans la bulle ; la case en bas */
.db-conv{position:absolute;inset:0;display:none;flex-direction:column;background:#FAFAFB}
.db-conv.on{display:flex}
.db-c-tete{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #EEF0F3;min-width:0}
.db-c-tete > div{min-width:0;flex:1}
.db-c-tete > div b{display:block;font-size:14px;line-height:1.3}
.db-c-tete > div span{display:block;font-size:11.5px;color:#8A8F98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-etat-tete{flex:0 0 auto;margin-left:auto}
.db-flux{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px 16px 12px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px);mask-image:linear-gradient(to bottom,transparent 0,#000 22px)}
.db-ticket{display:flex;align-items:center;gap:7px;margin:0;font-size:11px;font-weight:600;color:#2563EB;white-space:nowrap}
.db-ticket::before,.db-ticket::after{content:"";flex:1;height:1px;background:#E5E7EB}
.db-ticket svg{flex:0 0 auto}
.db-ticket.ok{color:#0F7B4F}
.db-bulle{align-self:flex-start;max-width:86%;padding:9px 12px 6px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #E7E9ED;font-size:12.5px;line-height:1.5;color:#2B2E33}
.db-pied{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:4px;font-size:10.5px;color:#9AA0A8;font-variant-numeric:tabular-nums}
.db-pt{color:#B0B5BD}
.db-moi{align-self:flex-end;max-width:86%}
.db-bmoi{padding:9px 12px 7px;border-radius:14px;background:#EEF3FF;box-shadow:inset 0 0 0 1px rgba(37,99,235,.2);font-size:12.5px;line-height:1.5;color:#2B2E33;transition:background-color .4s,box-shadow .4s}
.db-moi.prevue .db-bmoi{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.42);background-image:none}
.db-moi.prevue .db-bmoi{outline:1.5px dashed rgba(37,99,235,.45);outline-offset:-1.5px;box-shadow:none}
.db-case{flex:0 0 auto;padding:0 14px 92px}
.db-brouillon{padding:10px 12px;border-radius:12px;background:#fff;border:1.5px dashed rgba(37,99,235,.45)}
.db-brouillon .db-rep-t{display:flex;align-items:center;gap:6px;height:auto;margin:0 0 5px;font-size:11.5px;font-weight:500;color:#6E6E73;opacity:1;overflow:hidden;white-space:nowrap}
.db-brouillon .db-rep-t b{color:#1D1D1F;font-weight:650;flex:0 0 auto}
.db-brouillon .db-rep-t span{overflow:hidden;text-overflow:ellipsis}
.db-brouillon .db-rep-c{margin:0;font-size:12.5px;line-height:1.5;color:#2B2E33}
.db-case .db-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;min-height:0}
.db-ecrire{padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #E3E5E9}
.db-ecrire > span{display:block;font-size:12.5px;color:#9AA0A8}
.db-envoyer.gris{background:#E4E4E7!important;color:#A1A1AA!important;box-shadow:none!important}
.db-suivant{align-self:flex-end;display:inline-flex;align-items:center;gap:9px;padding:7px 12px 7px 8px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #DADDE2,0 2px 8px -3px rgba(0,0,0,.12);color:#2563EB;transition:background-color .2s,scale .14s}
.db-suivant .db-av{width:28px;height:28px;font-size:12px}
.db-suivant small{display:block;font-size:10.5px;color:#8A8F98;line-height:1.2}
.db-suivant b{display:block;font-size:12.5px;color:#1D1D1F}
.db-suivant.survol{background:#F6F7F9}
.db-suivant.presse{scale:.97}
/* la pastille « Nouveau mail » : plus haut dans le fondu, on la voit mieux */
.db-col-liste .db-pilule{bottom:48px}
/* téléphone */
@media (max-width:600px){
  .db-ecran{padding:7px;border-radius:18px}.db-camera{top:2px}
  .db-ecran .db-fen{border-radius:11px}
  .db-corps{height:470px}
  .db-case{padding:0 12px 60px}
  .db-flux{padding:10px 12px 10px;gap:8px}
  .db-bulle,.db-moi{max-width:92%}
  .db-brouillon .db-rep-t span{display:none}
  .db-col-liste .db-pilule{bottom:34px}
}

/* ===== A14 : plus simple ===== */
/* la file : la lettre, le nom, l'heure, puis l'état */
.db-l{align-items:center;padding-top:11px;padding-bottom:11px}
.db-lbas{margin-top:4px}
/* la croix (Annuler) : un petit rond blanc, la croix rouge, le cercle qui se vide pendant le décompte */
.db-x{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#fff;color:#DC2626;box-shadow:0 0 0 1px #E3E5E9,0 1px 2px rgba(15,23,42,.06)}
.db-x-anneau{position:absolute;inset:0;width:22px;height:22px;transform:rotate(-90deg)}
.db-x-anneau circle{fill:none;stroke:#F87171;stroke-width:2;stroke-dasharray:100 100;stroke-dashoffset:0;animation:dbVide linear forwards}
@keyframes dbVide{to{stroke-dashoffset:100}}
.db-pied{gap:8px}