/* ==========================================================================
   Carrousel du haut de page (index.html seulement), piloté par carrousel.js.
   Cinq vues dessinées en HTML et CSS : l'éditeur de factures (styles .ed de
   site.css, inchangés) puis quatre écrans de l'appli au thème « Grand livre »
   (devis à envoyer, facture relancée, sommes à mettre de côté, factures
   reçues), données fictives. Vues empilées dans une seule cellule de grille :
   la hauteur est celle de l'éditeur, identique d'une vue à l'autre ; les
   quatre écrans ont une taille contenue (contain: size) et la remplissent.
   Sans JS : la première vue seule, sans commandes. Aucun style en ligne (CSP).
   ========================================================================== */

/* --- Carrousel --- */
.car{position:relative;min-width:0;container:car/inline-size}
.car-view{display:grid;touch-action:pan-y}
.car-slide{grid-area:1/1;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0;transition:opacity .45s ease,visibility 0s linear 0s}
.car-slide:not(.is-on){opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
html:not(.js) .car-slide:not(:first-child),html:not(.js) .car-ctl{display:none}
.car-art{flex:1;display:flex;flex-direction:column;min-height:0}
.car-cap{min-height:36px;display:flex;align-items:center;font-family:var(--serif);font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
/* Commandes, dans le même ordre partout (ordre du HTML) : pause, précédent, suivant, puis les points ; les points
   passent sur une seconde ligne quand la place manque (téléphone) : pause et flèches restent à gauche, hors de la bulle
   « Une question ? » du coin bas droit */
.car-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin-top:10px}
.car-b,.car-dot{position:relative;display:inline-grid;place-items:center;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.car-b{width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;background:var(--card)}
.car-b:hover{border-color:var(--ox);color:var(--ox)}
.car-b .ic{width:16px;height:16px;stroke-width:2.2}
.car-pp{margin-right:6px}
.car-pp .ic-play,.car-pp.is-off .ic-pause{display:none}
.car-pp.is-off .ic-play{display:block}
.car-dots{display:flex;align-items:center}
.car-dot{width:32px;height:36px}
/* Anneau en --muted : contraste de 3:1 au moins sur le papier comme sur le disque du décor */
.car-dot::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;transition:background-color .2s,border-color .2s}
.car-dot:hover::before{border-color:var(--ox)}
.car-dot[aria-current="true"]::before{background:var(--ox);border-color:var(--ox)}
/* Au doigt : zones tactiles de 44 px, 8 px d'écart entre deux zones (aspect des points inchangé) */
@media (pointer:coarse){
  .car-ctl{gap:8px}
  .car-b{width:44px;height:44px}
  .car-pp{margin-right:0}
  .car-dots{gap:8px}
  .car-dot{width:44px;height:44px}
}
/* Large, à la souris : légende et commandes sur une même ligne */
@container car (min-width:600px){
  @media (pointer:fine){
    .car-ctl{position:absolute;right:0;bottom:0;margin:0;height:36px;flex-wrap:nowrap}
    .car-cap{padding-right:300px}
  }
}
@media (prefers-reduced-motion:reduce){.car-slide,.car-slide:not(.is-on){transition:none}.car-dot::before{transition:none}}

/* --- Écrans de l'appli (vues 2 à 5) --- */
.cv{
  --s-ok:oklch(42% 0.09 160);--s-ok-bg:color-mix(in oklab,var(--s-ok) 9%,var(--card));
  --s-warn:oklch(46.5% 0.09 66);--s-warn-bg:oklch(95.6% 0.032 82);
  --s-late:oklch(51.5% 0.172 34);--s-late-bg:oklch(93.2% 0.034 34);
  --s-blue:oklch(42% 0.075 245);--s-blue-bg:color-mix(in oklab,oklch(60% 0.08 245) 13%,var(--card));
  --s-neu:oklch(43% 0.018 60);--s-neu-bg:oklch(94.3% 0.009 70);
  --s-brand-bg:color-mix(in oklab,var(--ox) 6%,var(--card));
  --s-kraft:oklch(92% 0.017 72);
  flex:1;contain:size;display:grid;grid-template-columns:150px minmax(0,1fr);overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--bg);box-shadow:var(--shadow);
  color:var(--ink);font-size:11.5px;line-height:1.35;cursor:default;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums
}
.cv *{min-width:0}
.cv .ic{width:13px;height:13px}
.cv b{font-weight:600}

/* Menu latéral, papier kraft */
.cv-side{display:flex;flex-direction:column;gap:1px;padding:12px 8px;background:var(--s-kraft);border-right:1px solid var(--line)}
.cv-co{display:flex;align-items:center;gap:7px;padding:0 4px 12px;margin-bottom:6px;border-bottom:1px solid color-mix(in oklab,var(--ink) 11%,transparent);white-space:nowrap}
.cv-co b{font-size:12px;overflow:hidden;text-overflow:ellipsis}
.cv-logo{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:oklch(38% 0.075 250);color:#fff;font:italic 400 13px/1 var(--serif)}
.cv-nav{display:flex;align-items:center;gap:7px;height:26px;padding:0 6px;border-radius:var(--r);color:oklch(44% 0.025 45);font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden}
.cv-nav .ic{color:oklch(44% 0.025 45)}
.cv-nav.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(60,20,15,.08)}
.cv-nav.on .ic{color:var(--ox)}
.cv-nav i{margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--ox);color:#fff;font:normal 600 9.5px/16px var(--sans);text-align:center}

/* Contenu */
.cv-main{position:relative;display:flex;flex-direction:column;min-height:0}
.cv-mtop{display:none;align-items:center;gap:8px;height:40px;padding:0 12px;flex:none;background:var(--card);border-bottom:1px solid var(--line)}
.cv-mtop b{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-mtop .ic{width:16px;height:16px;color:var(--muted)}
.cv-pg{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px 18px}
.cv-hd{display:flex;flex-direction:column;gap:4px}
.cv-crumb{font-size:10.5px;color:var(--muted)}
.cv-crumb i{font-style:normal;margin:0 4px;color:oklch(60% 0.022 55)}
.cv-tr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.cv-h1{flex:none;max-width:100%;font-family:var(--serif);font-weight:400 !important;font-size:20px;line-height:1.15;letter-spacing:-.012em}
.cv-sub{font-size:11px;color:var(--muted)}
.cv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11px;color:var(--muted)}
.cv-meta b{color:var(--ink)}
.cv-acts{display:flex;gap:6px;flex:none}
.cv-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:var(--r);font-size:10.5px;font-weight:600;white-space:nowrap}
.cv-btn .ic{width:12px;height:12px;stroke-width:2.3}
.cv-btn.pri{background:var(--ox);color:var(--card)}
.cv-btn.sec{background:var(--card);border:1px solid var(--line-2);color:var(--ink)}

/* Pastilles d'état (Badge de l'appli) */
.cv-bdg{flex:none;display:inline-flex;align-items:center;gap:4px;height:17px;padding:0 6px;border-radius:999px;border:1px solid color-mix(in oklab,currentColor 18%,transparent);font-size:9.5px;font-weight:600;white-space:nowrap}
.cv-bdg i{width:5px;height:5px;border-radius:50%;background:currentColor}
.cv-bdg.ok{color:var(--s-ok);background:var(--s-ok-bg)}
.cv-bdg.warn{color:var(--s-warn);background:var(--s-warn-bg)}
.cv-bdg.late{color:var(--s-late);background:var(--s-late-bg)}
.cv-bdg.blue{color:var(--s-blue);background:var(--s-blue-bg)}
.cv-bdg.neu{color:var(--s-neu);background:var(--s-neu-bg)}
.cv-bdg.brand{color:var(--ox);background:var(--s-brand-bg)}

/* Cartes */
.cv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 12px}
.cv-ch{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.cv-ch>b{flex:1;font-size:12px;line-height:1.25}
.cv-tile{flex:none;width:22px;height:22px;border-radius:var(--r);display:grid;place-items:center}
.cv-tile .ic{width:12px;height:12px;stroke-width:2.2}
.cv-tile.neu{background:var(--s-neu-bg);color:var(--s-neu)}
.cv-tile.late{background:var(--s-late-bg);color:var(--s-late)}
.cv-tile.warn{background:var(--s-warn-bg);color:var(--s-warn)}
.cv-tile.blue{background:var(--s-blue-bg);color:var(--s-blue)}
.cv-tile.brand{background:var(--s-brand-bg);color:var(--ox)}
.cv-k{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}
.cv-amt{display:block;font-size:19px;font-weight:600 !important;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.cv-amt.late{color:var(--s-late)}
.cv-dl{margin:9px 0 0;padding-top:4px;border-top:1px solid var(--line)}
.cv-dl div{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:10.5px}
.cv-dl dt{color:var(--muted)}
.cv-dl dd{margin:0;font-weight:600;white-space:nowrap}
.cv-dl dd.late{color:var(--s-late)}
.cv-alert{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 8px;border-radius:var(--r);background:var(--s-late-bg);color:var(--s-late);font-size:10.5px;font-weight:600}
.cv-alert .ic{width:12px;height:12px}

/* Bas d'écran : ne montre que ce qui tient en entier. Colonne flex à retour : un élément trop haut passe dans une
   colonne suivante, hors du cadre (overflow) ; le repère vide .cv-sp occupe la première place, pour qu'aucun élément
   ne soit montré coupé. .cv-paper grandit jusqu'au bas (papier d'un aperçu, rogné comme une page qu'on fait défiler). */
.cv-fill{flex:1 1 0;min-height:0;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;column-gap:40px;overflow:hidden;margin-top:-10px}
.cv-fill>*{width:100%;flex:none;margin-top:10px}
.cv-fill>.cv-sp{height:0;margin:0}
.cv-fill>.cv-paper{flex:1 0 96px}
.cv-paper{overflow:hidden}
.cv-unp-r{display:flex;align-items:center;gap:10px;padding-top:8px;border-top:1px solid var(--line)}
.cv-unp-r>span:first-child{flex:1;display:flex;flex-direction:column;overflow:hidden}
.cv-unp-r>span:first-child span{font-size:10px;line-height:1.3;color:var(--muted)}
.cv-unp-r>b{white-space:nowrap}
.cv-late{color:var(--s-late)}

/* Vue 2 : devis à envoyer, fenêtre d'envoi ouverte */
.cv-sheet{flex:1;min-height:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:oklch(24% 0.02 255)}
.cv-sheet b.t{display:block;font-family:var(--serif);font-weight:400;font-size:17px;color:oklch(38% 0.075 250)}
.cv-sheet>span{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid oklch(89% 0.012 255);font-size:10px}
.cv-sheet>span:first-of-type{margin-top:10px}
.cv-dim{position:absolute;inset:0;background:rgba(40,22,16,.2)}
.cv-dlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(390px,calc(100% - 24px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:0 1px 0 rgba(60,20,15,.05),0 24px 44px -24px rgba(60,20,15,.5)}
.cv-dlg-h{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 14px}
.cv-dlg-h b{flex:1;font-family:var(--serif);font-weight:400;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-dlg-h>.ic{color:var(--muted)}
.cv-dlg-b{display:flex;flex-direction:column;gap:7px;padding:0 14px 12px}
.cv-lab{font-size:10px;font-weight:600}
.cv-in{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-chip{flex:none;padding:1px 7px;border-radius:999px;background:var(--s-neu-bg);font-size:10px;font-weight:500}
.cv-ta{padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;font-size:10.5px;line-height:1.45}
.cv-ta span{display:block}
.cv-ta .gap{height:6px}
.cv-att{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r);background:oklch(97.6% 0.008 78)}
.cv-att>span{display:flex;flex-direction:column;overflow:hidden}
.cv-att>span b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-att>span span{display:flex;align-items:center;gap:3px;font-size:9.5px;color:var(--muted)}
.cv-att>span span .ic{width:10px;height:10px}
.cv-file{flex:none;width:24px;height:24px;border-radius:var(--r);display:grid;place-items:center;background:var(--card);color:var(--muted);box-shadow:0 1px 2px rgba(60,20,15,.1)}
.cv-dlg-f{display:flex;justify-content:flex-end;gap:6px;padding:10px 14px;border-top:1px solid var(--line);background:oklch(97.6% 0.008 78);border-radius:0 0 var(--r-xl) var(--r-xl)}

/* Vue 3 : facture relancée */
.cv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;align-items:start}
.cv-mails{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.cv-mails li{display:flex;align-items:flex-start;gap:8px;padding:6px 0}
.cv-mails li+li{border-top:1px solid color-mix(in oklab,var(--line) 70%,transparent)}
.cv-mails li>span:last-child{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.cv-mails b{font-size:11px}
.cv-mails span span{font-size:10px;color:var(--muted)}

/* Vue 4 : tableau de bord, à mettre de côté */
.cv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cv-kpi{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:9px 11px}
.cv-kpi>span{font-size:10px;font-weight:600;color:var(--muted)}
.cv-kpi>b{font-size:15.5px;letter-spacing:-.02em;white-space:nowrap}
.cv-kpi small{font-size:9.5px;line-height:1.3;color:var(--muted)}
.cv-set{padding:0;overflow:hidden}
.cv-set .cv-ch{padding:11px 12px 0;margin-bottom:9px}
.cv-link{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ox);white-space:nowrap}
.cv-link .ic{width:11px;height:11px}
.cv-set-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.cv-set-cols>div{padding:11px 12px;display:flex;flex-direction:column;gap:3px}
.cv-set-cols>div+div{border-left:1px solid var(--line)}
.cv-set-cols .cv-dispo{background:oklch(97.6% 0.008 78)}
.cv-eye{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-set-cols .cv-amt{font-size:17px}
.cv-set-cols ul{margin:5px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.cv-set-cols li{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:10px;color:var(--muted)}
.cv-set-cols li b,.cv-set-cols p b{color:var(--ink)}
.cv-set-cols li>span:last-child{flex:none;font-weight:600;color:var(--ink)}
.cv-set-cols p{margin:5px 0 0;font-size:10px;line-height:1.45;color:var(--muted)}

/* Vue 5 : factures reçues */
.cv-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cv-band>div{display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--card)}
.cv-band>div>span:last-child{display:flex;flex-direction:column;overflow:hidden}
.cv-band span span{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.cv-band b{font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.cv-band small{font-size:9px;line-height:1.3;color:var(--muted)}
.cv-tbl{flex:1 1 0;min-height:0;padding:0;overflow:hidden;display:flex;flex-direction:column}
.cv-rows{margin:0;column-gap:0}
.cv-rows>*{margin:0}
.cv-rows>.cv-row+.cv-row{border-top:1px solid color-mix(in oklab,var(--line) 70%,transparent)}
.cv-row{display:grid;grid-template-columns:minmax(0,1fr) 66px 74px 70px 78px;align-items:center;gap:8px 12px;padding:8px 12px;font-size:10.5px}
.cv-row+.cv-row{border-top:1px solid color-mix(in oklab,var(--line) 70%,transparent)}
.cv-row.th{padding-top:7px;padding-bottom:7px;background:oklch(97.6% 0.008 78);border-bottom:1px solid var(--line);font-size:9.5px;font-weight:600;color:var(--muted)}
.cv-row>*{white-space:nowrap}
.cv-row .nm{font-weight:600;white-space:normal;line-height:1.3}
.cv-row .no{font-family:var(--mono);font-size:10px;letter-spacing:-.01em}
.cv-row .dt{color:var(--muted)}
.cv-row .mt{text-align:right;font-weight:600}
.cv-row .st{display:flex}

/* Écran étroit (téléphone) : pas de menu latéral, barre du haut ; colonnes empilées */
@container car (max-width:599px){
  .cv{grid-template-columns:minmax(0,1fr)}
  .cv-side{display:none}
  .cv-mtop{display:flex}
  .cv-pg{padding:12px;gap:10px}
  .cv-h1{font-size:17px}
  .cv-acts .sec{display:none}
  .cv-in{height:auto;min-height:26px;padding:4px 8px;white-space:normal;line-height:1.35}
  .cv-att>span b{white-space:normal}
  .cv-cols{grid-template-columns:minmax(0,1fr)}
  .cv-mails .cv-old,.cv-dl .cv-x{display:none}
  .cv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-kpis .cv-kpi:nth-child(2){display:none}
  .cv-set-cols{grid-template-columns:minmax(0,1fr)}
  .cv-set-cols>div+div{border-left:0;border-top:1px solid var(--line)}
  .cv-set-cols>div{padding:9px 12px}
  .cv-band{grid-template-columns:minmax(0,1fr)}
  .cv-band>div{padding:7px 10px}
  .cv-band .cv-tile,.cv-band small{display:none}
  .cv-band>div>span:last-child{flex-direction:row;justify-content:space-between;align-items:center;flex:1}
  .cv-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm mt" "no st";row-gap:3px}
  .cv-row.th,.cv-row .dt{display:none}
  .cv-row .nm{grid-area:nm}.cv-row .mt{grid-area:mt}.cv-row .no{grid-area:no}.cv-row .st{grid-area:st;justify-content:flex-end}
}
@container car (max-width:419px){
  .cv-acts,.cv-set .cv-link{display:none}
}
@container car (max-width:599px) and (min-width:420px){
  .cv-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cv-kpis .cv-kpi:nth-child(2){display:flex}
}