/* =====================================================================================================================
   Pinch · version 62 · styles des 5 chantiers d'ergonomie. Chargé par public/index.html juste avant css/theme.css.
   Mêmes variables que le reste du site (--carbon, --paper, --sky, --edge, --mint, --sun, --r-pill…) : modes clair et
   sombre suivent tout seuls.
     1. champ lien : croix ✕ dans le champ, bordure verte après « Coller », formulaire de l'onglet Recette
     2. aides de démarrage masquées après 3 et 7 jours
     3. stepper de l'analyse
     4. liste en magasin : « Tout décocher », toast
     5. dossiers des favoris : pastilles, menu « Dossier », fenêtre de création
   ===================================================================================================================== */
:root{
  --fd-ok:var(--mint,#55db9c);          /* vert « terminé » / « collé » */
  --fd-ok-ink:#000;                     /* coche posée sur le vert */
  --fd-muted:color-mix(in srgb,var(--carbon) 45%,transparent);
  --fd-soft:color-mix(in srgb,var(--carbon) 8%,transparent);
}

/* ---------- 1. champ lien : la croix ✕ dans le champ ---------- */
.fd-champ{position:relative;display:flex;flex:1 1 240px;min-width:0;border-radius:var(--r-pill);transition:scale .3s var(--spring),box-shadow .25s}
.linkform .fd-champ input{flex:1 1 auto;width:100%;padding-right:52px}
.linkform .fd-champ input:focus{scale:none}                 /* le cadre entier grossit, la croix avec */
.fd-champ:focus-within{scale:1.02}
.fd-clear{position:absolute;top:50%;right:8px;translate:0 -50%;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--fd-soft);color:var(--carbon);cursor:pointer;transition:background-color .2s,scale .2s var(--spring)}
.fd-clear svg{width:14px;height:14px}
.fd-clear:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
@media (hover:hover){.fd-clear:hover{background:color-mix(in srgb,var(--carbon) 16%,transparent)}}
.fd-clear:active{scale:.9}
.fd-clear[hidden]{display:none}
/* « Coller » réussi : la bordure passe au vert un instant */
.fd-champ.fd-ok input{border-color:var(--fd-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--fd-ok) 45%,transparent);transition:box-shadow .2s,border-color .2s}

/* le formulaire de l'onglet Recette, sans recette */
.xempty:has(.linkform){max-width:min(100%,780px)}
.xempty .linkform{width:min(100%,740px)}
.xempty .linkmsg:empty{display:none}
.xempty-alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.xempty-alt .note{margin:0}

@media (max-width:760px){
  .linkform .fd-champ{flex:1 1 100%}
  .linkform .fd-champ input{min-height:56px;font-size:16px}
}

/* ---------- 2. aides de démarrage : simulateur caché après 3 jours, tutoriel après 7 jours ---------- */
:root:is([data-anciennete="3"],[data-anciennete="7"]) [data-premiers-pas="3"],
:root[data-anciennete="7"] [data-premiers-pas="7"]{display:none!important}

/* ---------- 3. le stepper de l'analyse ---------- */
.fd-steps{list-style:none;display:grid;gap:8px;width:100%;margin:0;padding:0}
.fd-steps li{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid transparent;border-radius:var(--r-card);font-weight:700;font-size:15px;line-height:1.3;color:var(--fd-muted);transition:color .3s,background-color .3s,border-color .3s}
.fd-step-ic{position:relative;flex:none;display:grid;place-items:center;width:26px;height:26px;border:2px solid currentColor;border-radius:50%;opacity:.55}
.fd-step-ic::after{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:0}
/* en cours : texte plein, cadre, anneau qui tourne */
.fd-steps li[data-etat="encours"]{color:var(--carbon);background:var(--sky);border-color:var(--edge,var(--carbon))}
.fd-steps li[data-etat="encours"] .fd-step-ic{opacity:1;border-color:color-mix(in srgb,var(--carbon) 22%,transparent);border-top-color:var(--carbon);animation:fd-tourne .8s linear infinite}
/* terminé : coche verte */
.fd-steps li[data-etat="fait"]{color:var(--carbon)}
.fd-steps li[data-etat="fait"] .fd-step-ic{opacity:1;border-color:var(--fd-ok);background:var(--fd-ok);animation:fd-coche .35s var(--spring)}
.fd-steps li[data-etat="fait"] .fd-step-ic::after{content:"✓";width:auto;height:auto;border-radius:0;background:none;opacity:1;color:var(--fd-ok-ink);font-size:15px;font-weight:900;line-height:1}
@keyframes fd-tourne{to{rotate:360deg}}
@keyframes fd-coche{from{scale:.4}to{scale:1}}
.fd-live{margin:0;font-weight:700;font-size:14px;color:var(--carbon)}
@media (prefers-reduced-motion:reduce){
  .fd-steps li[data-etat="encours"] .fd-step-ic{animation:none;border-color:var(--carbon)}
  .fd-steps li[data-etat="encours"] .fd-step-ic::after{opacity:1}
  .fd-steps li[data-etat="fait"] .fd-step-ic{animation:none}
}

/* ---------- 4. liste en magasin : « Tout décocher » et toast ---------- */
.fd-list-tools{display:flex;justify-content:flex-end;min-height:0;margin:6px 0 2px}
.fd-uncheck{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid transparent;border-radius:var(--r-pill);background:none;color:var(--carbon);font:inherit;font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.75;transition:opacity .2s,background-color .2s,border-color .2s}
.fd-uncheck svg{width:14px;height:14px}
@media (hover:hover){.fd-uncheck:not(:disabled):hover{opacity:1;background:var(--fd-soft)}}
.fd-uncheck:focus-visible{opacity:1;outline:2px solid var(--carbon);outline-offset:2px}
.fd-uncheck:disabled{opacity:.3;cursor:default;text-decoration:none}

.fd-toast{position:fixed;left:50%;width:max-content;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:200;max-width:calc(100vw - 32px);padding:12px 20px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--carbon);color:var(--paper);font-weight:700;font-size:15px;line-height:1.3;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25);pointer-events:none;opacity:0;translate:-50% 16px;transition:opacity .25s,translate .35s var(--spring)}
.fd-toast.on{opacity:1;translate:-50% 0}
html:has(.thumb:not([hidden])) .fd-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}   /* au-dessus de la barre au pouce */
@media (prefers-reduced-motion:reduce){.fd-toast{transition:opacity .2s}}

/* ---------- 5. dossiers des favoris (version 63 : voir la section en fin de fichier) ---------- */
.fd-lock{display:inline-block;margin-left:6px;padding:3px 8px;border-radius:var(--r-pill);background:var(--sun);color:#000;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}

/* la fenêtre « Nouveau dossier » / « Gérer le dossier » */
.modal-in.dosm{display:grid;grid-template-rows:none;gap:14px;align-content:start;overflow:auto}
.dosm .fl input{text-transform:none;letter-spacing:0;font-size:16px}
.dosm-acts{display:flex;flex-wrap:wrap;gap:10px}
.dosm-del{justify-self:start;margin-top:4px}
.dosm .linkmsg:empty{display:none}
@media (max-width:560px){.dosm-acts .btn{flex:1 1 100%}}
.drawer-in>.fd-list-tools{margin:0;padding:6px 22px 0}
@media (max-width:640px){.drawer-in>.fd-list-tools{padding-inline:var(--gut)}}

/* =====================================================================================================================
   version 63 · « Coller et analyser le lien copié » (js/partage.js) : au-dessus du champ, ou en pastille flottante
   ===================================================================================================================== */
.pp-rapide{display:flex;align-items:stretch;gap:6px;width:min(100%,740px);margin:0 0 12px}
.pp-rapide[hidden]{display:none}
.pp-go{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px;border:2px solid var(--carbon);border-radius:var(--r-pill);background:var(--fd-ok);color:#000;font:inherit;text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--carbon);transition:translate .15s,box-shadow .15s;animation:pp-in .35s var(--spring)}
.pp-go svg{flex:none;width:24px;height:24px}
.pp-t{display:grid;min-width:0}
.pp-t b{font-weight:800;font-size:15px;line-height:1.2}
.pp-t small{overflow:hidden;font-size:12px;line-height:1.3;white-space:nowrap;text-overflow:ellipsis;opacity:.75}
.pp-go:active{translate:2px 2px;box-shadow:1px 1px 0 var(--carbon)}
.pp-go:focus-visible,.pp-x:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.pp-x{flex:none;display:grid;place-items:center;width:44px;border:2px solid var(--carbon);border-radius:var(--r-pill);background:var(--paper);color:var(--carbon);cursor:pointer}
.pp-x svg{width:14px;height:14px}
@keyframes pp-in{from{opacity:0;translate:0 8px}}
.pp-flottant{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:150;width:min(calc(100vw - 24px),520px);margin:0;translate:-50% 0}
html:has(.thumb:not([hidden])) .pp-flottant{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.pp-go{animation:none}}

/* =====================================================================================================================
   version 63 · Mes Favoris : « Mes dossiers », un dossier ouvert, « Ajouter à un dossier », « + Ajouter des recettes »
   ===================================================================================================================== */
.dz{display:grid;gap:14px;margin:0 0 26px}
.dz:empty{display:none}
.dz-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dz-t{margin:0;font-weight:800;font-size:18px}
.dz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.dz-card{display:grid;justify-items:start;gap:4px;min-height:112px;padding:16px;border:2px solid var(--carbon);border-radius:var(--r-card);background:var(--paper);color:var(--carbon);font:inherit;text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--carbon);transition:translate .15s,box-shadow .15s}
.dz-card svg{width:30px;height:30px;margin-bottom:6px;color:var(--carbon)}
.dz-card b{max-width:100%;overflow:hidden;font-size:16px;font-weight:800;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.dz-card small{font-size:13px;opacity:.7}
@media (hover:hover){.dz-card:not(:disabled):hover{translate:-1px -1px;box-shadow:4px 4px 0 var(--carbon)}}
.dz-card:active{translate:2px 2px;box-shadow:1px 1px 0 var(--carbon)}
.dz-card:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.dz-card:disabled{opacity:.6;cursor:progress}
.dz-vide{border-style:dashed;box-shadow:none;background:transparent}
.dz-premium{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:2px dashed var(--carbon);border-radius:var(--r-card)}
.dz-premium p{margin:0;max-width:52ch;line-height:1.4}
.dz-folder{display:grid;gap:12px}
.dz-back{justify-self:start;padding:6px 2px;border:0;background:none;color:var(--carbon);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dz-back:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
.dz-title{display:flex;align-items:center;gap:12px}
.dz-title svg{flex:none;width:36px;height:36px}
.dz-name{margin:0;font-weight:900;font-size:clamp(22px,4vw,30px);line-height:1.1;overflow-wrap:anywhere}
.dz-name:focus{outline:none}
.dz-count{margin:2px 0 0;opacity:.7}
.dz-acts{display:flex;flex-wrap:wrap;gap:10px}
.dz-all{margin:6px 0 14px}
.dz-all[hidden]{display:none}
/* le bouton de chaque carte */
.dosbtn{position:relative;z-index:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:38px;padding:6px 12px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--paper);color:var(--carbon);font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.dosbtn svg{width:16px;height:16px}
.dosbtn:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
@media (hover:hover){.dosbtn:hover{background:var(--fd-soft)}}
.dosin{position:relative;z-index:2;display:block;margin-top:6px;font-size:12px;opacity:.7}
#xDos svg,#rDos svg{width:20px;height:20px}
/* les fenêtres à cocher */
.dosm-sub{margin:0;font-weight:700;opacity:.8}
.dosm-sub:empty{display:none}
.dp-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;max-height:min(52vh,420px);overflow:auto}
.dp-vide{padding:12px 4px;opacity:.75}
.dp-row{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-card);cursor:pointer}
.dp-row input{position:absolute;opacity:0;pointer-events:none}
.dp-box{flex:none;width:24px;height:24px;border:2px solid var(--carbon);border-radius:7px;background:var(--paper)}
.dp-row input:checked+.dp-box{border-color:var(--carbon);background:var(--fd-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.dp-row:has(input:checked){border-color:var(--carbon);background:color-mix(in srgb,var(--fd-ok) 18%,transparent)}
.dp-row:has(input:focus-visible){outline:3px solid var(--carbon);outline-offset:2px}
.dp-row:has(input:disabled){opacity:.6;cursor:progress}
.dp-row svg{flex:none;width:22px;height:22px}
.dp-nom{flex:1 1 auto;min-width:0;overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.dp-row small{flex:none;font-size:12px;opacity:.7}
.da-row img,.da-img{flex:none;width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--sky)}
.da-img{display:grid;place-items:center;font-weight:900}
.dp-newbtn{justify-self:start}
.dp-newbtn[hidden],.dp-new[hidden]{display:none}
.dp-new{display:flex;gap:8px}
.dp-new .field{flex:1 1 auto;min-width:0;text-transform:none;letter-spacing:0;font-size:16px}
/* dans le héros de l'accueil (grille espacée) : le bouton colle au champ */
.hero-in>.pp-rapide{margin-bottom:calc(10px - clamp(18px,2.4vw,30px))}