/* ═══ L'outil : saisie à gauche, feuille vivante à droite (mobile : feuille en tiroir) ═══ */
.page-outil .pied { padding-bottom: 96px; }
.outil-barre { position: sticky; top: 66px; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--filet); }
.outil-barre-in { display: flex; align-items: center; gap: 14px 22px; min-height: 58px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.outil-titre { display: grid; min-width: 0; flex: 1; }
.outil-titre strong { font: 500 1.15rem/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jauge { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--encre-2); }
.jauge-anneau svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.jauge-anneau circle { fill: none; stroke-width: 4; }
.jauge-anneau .fond { stroke: var(--filet); }
.jauge-anneau .plein { stroke: var(--petrole); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transition: stroke-dashoffset .5s var(--ease); }
.jauge.complet .plein { stroke: var(--vert); }
.enreg { font-size: .84rem; color: var(--encre-3); display: inline-flex; align-items: center; gap: 6px; }
.enreg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--filet-2); }
.enreg.ok::before { background: var(--vert); }
.enreg.encours::before { background: var(--jaune-fonce); animation: pulse 1s infinite; }
.enreg.ko::before { background: var(--rouge); }
@keyframes pulse { 50% { opacity: .3; } }
@media (max-width: 640px) { .outil-barre { top: 66px; } .outil-titre .surtitre { display: none; } .enreg { font-size: .78rem; } }

.outil-grille { display: grid; gap: 28px; padding-top: 24px; padding-bottom: 40px; align-items: start; }
@media (min-width: 1080px) { .outil-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.saisie-col { display: grid; gap: 18px; min-width: 0; }
.bloc-saisie { background: var(--surface); border: 1px solid var(--filet); border-radius: 16px; padding: 20px 18px; min-width: 0; }
@media (min-width: 720px) { .bloc-saisie { padding: 24px; } }
.bloc-titre { font-size: 1.35rem; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.compteur { font: 600 .8rem/1 var(--mono); background: var(--papier-2); color: var(--encre-2); border-radius: 999px; padding: 4px 9px; }
.grille-champs { display: grid; gap: 14px; }
@media (min-width: 560px) { .grille-champs { grid-template-columns: 1fr 1fr; } .grille-champs .large { grid-column: 1 / -1; } }
.puce-radio { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--filet-2); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: .92rem; background: var(--surface); }
.puce-radio:has(input:checked) { border-color: var(--encre); background: var(--papier-2); }
.puce-radio input { accent-color: var(--petrole); margin: 0; }

/* Contenant en cours : la carte phare */
.limite-carte { display: grid; gap: 16px; }
@media (min-width: 560px) { .limite-carte { grid-template-columns: 1fr 1fr; align-items: end; } }
.limite-sortie { position: relative; border: 1.5px solid var(--encre); border-radius: 12px 12px 16px 16px; padding: 22px 14px 12px; background: var(--doc-fond); color: var(--doc-encre); display: grid; gap: 2px; overflow: hidden; }
.limite-sortie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--jaune); border-bottom: 1.5px solid var(--encre); }
.limite-sortie .petit { font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--doc-encre-2); }
.limite-date { font: 500 1.75rem/1.1 var(--display); }
.limite-reste { font-weight: 600; font-size: .92rem; }
.limite-reste.ok { color: #1F6B47; } .limite-reste.bientot { color: #8A5A00; } .limite-reste.depasse { color: #B42318; }
.rappel-offre { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--jaune-pale); border: 1px dashed var(--jaune-fonce); }
.rappel-offre p { margin: 0 0 10px; font-size: .95rem; }
.rappel-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.lien-bouton { background: none; border: 0; padding: 0; color: var(--petrole); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mini-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mini-form .saisie { flex: 1 1 220px; min-height: 40px; }
.delai-direct { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--petrole-pale); color: var(--encre); font-size: .95rem; }
.delai-direct:empty { display: none; }

/* Ajout d'enlèvement */
.ajout { border: 1.5px dashed var(--filet-2); border-radius: 14px; padding: 14px; background: var(--surface-2); display: grid; gap: 12px; }
.ajout-grille { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (min-width: 720px) { .ajout-grille { grid-template-columns: repeat(3, 1fr); } }
.ajout-grille .champ { min-width: 0; }
.qte { display: flex; gap: 6px; }
.qte input { min-width: 0; flex: 1; }
.qte select { width: 64px; flex: none; }
.ajout .msg-erreur:empty { display: none; }
.liste-enl { display: grid; gap: 10px; margin-top: 14px; }
.enl { border: 1px solid var(--filet); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: grid; gap: 10px; }
.enl.depasse { border-color: var(--rouge); box-shadow: inset 4px 0 0 var(--rouge); }
.enl.ok { box-shadow: inset 4px 0 0 var(--vert); }
.enl-tete { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.enl-tete b { font-family: var(--mono); font-weight: 500; }
.enl-champs { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .enl-champs { grid-template-columns: repeat(4, 1fr); } }
.enl-champs .champ label { font-size: .78rem; font-weight: 600; color: var(--encre-3); }
.enl-champs input, .enl-champs select { min-height: 40px !important; padding: 7px 9px !important; font-size: .94rem !important; }
.enl-pied { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; font-size: .88rem; }
.enl-suppr { background: none; border: 0; color: var(--encre-3); cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; }
.enl-suppr:hover { color: var(--rouge); }
.enl-plus { display: block; width: 100%; background: none; border: 1px dashed var(--filet-2); border-radius: 10px; padding: 10px; color: var(--encre-2); cursor: pointer; font: inherit; }
.recaps { margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--filet); }
.recaps p { margin: 0 0 8px; font-size: .92rem; }

/* Feuille */
.feuille-col { position: sticky; top: 140px; display: grid; gap: 16px; min-width: 0; max-height: calc(100vh - 150px); overflow-y: auto; padding: 2px 4px 20px; overscroll-behavior: contain; }
.feuille-entete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.annees { display: flex; flex-wrap: wrap; gap: 6px; }
.annees button { border: 1.5px solid var(--filet-2); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 12px; font: 500 .88rem/1.2 var(--mono); cursor: pointer; }
.annees button[aria-selected="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.annees button .cle { margin-left: 4px; font-size: .72rem; opacity: .75; }
.fermer-feuille { display: none; }
.achat h3 { margin: 0 0 10px; }
.achat { display: grid; gap: 12px; }
#achatForm { display: grid; gap: 12px; }
.plans { display: grid; gap: 8px; }
.plan { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--filet-2); border-radius: 12px; padding: 12px; cursor: pointer; background: var(--surface); }
.plan:has(input:checked) { border-color: var(--encre); box-shadow: 0 3px 0 var(--encre); }
.plan--phare { background: var(--jaune-pale); }
.plan input { margin-top: 4px; accent-color: var(--petrole); }
.plan > span { display: grid; gap: 1px; flex: 1; }
.plan b { font-weight: 600; }
.plan em { font: 500 1.25rem/1.2 var(--display); font-style: normal; }
.plan small { color: var(--encre-3); font-size: .82rem; }
.mini-badge { font-style: normal; font: 600 .7rem/1 var(--sans); background: var(--jaune); color: #10201E; border: 1px solid #10201E; border-radius: 999px; padding: 2px 7px; margin-left: 4px; vertical-align: 2px; }
.consentement { font-size: .84rem; color: var(--encre-2); }
.code-promo summary { cursor: pointer; font-size: .88rem; color: var(--encre-3); }
.code-promo input { margin-top: 8px; max-width: 220px; }
.achat .msg-erreur:empty { display: none; }
.achat-garanties { margin: 0; text-align: center; }
.telechargements { display: flex; flex-wrap: wrap; gap: 10px; }

/* Mobile : feuille en tiroir, barre collante */
.barre-mobile { display: none; }
@media (max-width: 1079px) {
  .feuille-col { position: fixed; inset: 0; z-index: 60; background: var(--papier); max-height: none; padding: 14px 12px 90px; transform: translateY(100%); transition: transform .35s var(--ease); visibility: hidden; }
  .feuille-col.ouverte { transform: none; visibility: visible; }
  .fermer-feuille { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filet-2); background: var(--surface); color: var(--encre); font-size: 1.5rem; cursor: pointer; flex: none; }
  .barre-mobile { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--filet); }
  .barre-mobile .bouton { flex: 1; min-height: 46px; padding: .5em .8em; }
  body.sans-defilement { overflow: hidden; }
}
.a-change-bloc { animation: flash 1.2s var(--ease); }
.feuille-col { grid-template-columns: minmax(0, 1fr); }
.feuille-col > * { min-width: 0; }
.feuille .f-tete h3 { overflow-wrap: anywhere; }
@media (max-width: 560px) { .feuille { padding: 18px 14px 22px; } .feuille .f-tete { flex-direction: column; } .feuille .f-ref { text-align: left; } }

/* ── 26/09 minimalisme : l'essentiel d'abord, le reste replié ── */
.limite-champs { display: grid; gap: 12px; align-content: start; }
@media (min-width: 560px) { .limite-carte { align-items: stretch; } }
.limite-sortie { align-content: center; padding: 26px 16px 16px; }
.limite-date { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); }
.detail-delai { margin-top: 12px; }
.detail-delai summary, .ajout-plus summary { cursor: pointer; font-size: .9rem; color: var(--encre-2); }
.detail-delai .delai-direct { margin-top: 10px; }
.detail-delai .note { margin: 8px 0 0; }
.rappel-offre { margin-top: 14px; padding: 12px 14px; }
.rappel-offre p { margin-bottom: 8px; }
.ajout-plus .ajout-grille { margin-top: 12px; }
.repli { padding-top: 0; padding-bottom: 0; }
.repli > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 18px 0; }
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after { content: "+"; margin-left: auto; font: 500 1.4rem/1 var(--mono); color: var(--encre-3); }
.repli[open] > summary::after { content: "−"; }
.repli > summary .bloc-titre { margin: 0; }
.repli-note { font-size: .86rem; color: var(--encre-3); }
.repli[open] { padding-bottom: 22px; }