/* =========================================================
   ADMINISTRATION — styles
   Réutilise les variables/typographies de css/style.css
   ========================================================= */

.admin-body{ background:var(--sand); }

/* ---------- Écran de connexion ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem;
}
.login-screen[hidden]{ display:none; }
.login-card{
  background:var(--white); border-radius:14px; padding:2.6rem 2.2rem; max-width:380px; width:100%;
  box-shadow:0 24px 50px -24px rgba(33,28,23,.35); text-align:center;
}
.login-logo{ width:64px; height:64px; border-radius:50%; margin:0 auto 1.2rem; object-fit:contain; }
.login-card h1{ font-size:1.5rem; margin-bottom:.3em; }
.login-sub{ font-size:.92rem; margin-bottom:1.6rem; }
.login-card .form-row{ text-align:left; margin-bottom:1.1rem; }
.login-submit{ width:100%; margin-top:.4rem; }
.login-error{ color:#b3402a; font-size:.88rem; margin:0 0 .8rem; }
.back-to-site{ display:inline-block; margin-top:1.2rem; font-size:.85rem; color:var(--ink-soft); }
/* Même allure quand c'est un bouton et non un lien — « Se déconnecter »
   agit sur la session, ce n'est pas une navigation. */
button.back-to-site{ background:none; border:none; cursor:pointer; font-family:inherit; }

/* ---------- Form rows (partagé avec le reste de l'admin) ---------- */
.form-row{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.form-row label{ font-size:.8rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.form-row input, .form-row textarea, .form-row select{
  font-family:var(--font-body); font-size:.95rem; padding:.7em .9em;
  border:1.5px solid var(--sand); border-radius:8px; background:var(--white); color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  border-color:var(--gold); outline:none;
  box-shadow:0 0 0 3px rgba(200,133,58,.12);
}
/* minmax(0,1fr) et non 1fr : une colonne de grille ne descend pas sous la
   largeur naturelle de son contenu, et un <input> en réclame une vingtaine
   de caractères. Sans ça, deux champs côte à côte débordent de leur carte. */
.form-row-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.2rem; }
.form-row input, .form-row textarea, .form-row select{ min-width:0; }
.field-hint{ font-size:.8rem; color:var(--ink-soft); margin:.3rem 0 0; }

/* ---------- Topbar & tabs ---------- */
.admin-topbar{
  background:var(--ink); color:var(--cream);
  position:sticky; top:0; z-index:80;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.admin-topbar-inner{
  max-width:1100px; margin:0 auto; padding:.7rem 1.5rem;
  display:flex; align-items:center; gap:1rem;
}
.admin-logo{
  width:42px; height:42px; border-radius:50%; background:var(--white);
  object-fit:contain; padding:2px; flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
}

.admin-topbar-titre{ display:flex; flex-direction:column; line-height:1.15; }
.admin-topbar h1{ font-size:1rem; font-weight:700; color:var(--cream); margin:0; }
.admin-topbar-sous{ font-size:.78rem; color:var(--gold-pale); margin:0; }

.admin-topbar-compte{
  flex:1; display:flex; flex-direction:column; align-items:flex-end; line-height:1.3;
  padding-right:.4rem;
}
.admin-topbar-nom{ font-size:.9rem; font-weight:600; color:var(--cream); }
.admin-topbar-role{
  font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); background:var(--gold-pale); border-radius:999px; padding:.15em .7em;
}

.admin-topbar-actions{ display:flex; align-items:center; gap:.8rem; flex:none; }
.admin-view-site{ font-size:.85rem; color:var(--gold-pale); white-space:nowrap; }
.admin-logout{ border-color:var(--sand); color:var(--sand); padding:.5em 1.1em; font-size:.85rem; }
.admin-logout:hover{ background:var(--sand); color:var(--ink); }

@media (max-width: 720px){
  .admin-topbar-inner{ flex-wrap:wrap; padding:.7rem 1rem; }
  .admin-topbar-sous{ display:none; }
  .admin-topbar-compte{ order:3; flex:1 1 100%; align-items:flex-start; padding-right:0; }
  .admin-topbar-actions{ order:2; margin-left:auto; }
  .admin-view-site{ display:none; }
}

.admin-tabs{
  max-width:1100px; margin:0 auto; padding:0 1.5rem; display:flex; gap:.5rem; border-bottom:1px solid rgba(33,28,23,.1);
}
.admin-tab{
  background:none; border:none; padding:1rem 1.1rem; font-family:var(--font-body); font-weight:600;
  font-size:.95rem; color:var(--ink-soft); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px;
}
.admin-tab.is-active{ color:var(--gold-deep); border-color:var(--gold); }

.admin-main{ max-width:1100px; margin:0 auto; padding:2rem 1.5rem 4rem; }
.admin-panel{ display:none; }
.admin-panel.is-active{ display:block; }

.admin-status{
  background:#e3f1e4; color:#2c6b35; padding:.8em 1.2em; border-radius:var(--radius); margin-bottom:1.4rem; font-size:.92rem;
}
.admin-status.is-error{ background:#fbe4e0; color:#a13a25; }

/* ---------- Cards ---------- */
.admin-card{
  background:var(--white); border-radius:14px; padding:2rem; margin-bottom:1.6rem;
  box-shadow:0 2px 16px -6px rgba(33,28,23,.1);
  border:1px solid rgba(33,28,23,.05);
}
.admin-card h2{
  font-size:1.1rem; margin-bottom:.8em;
  padding-bottom:.6em; border-bottom:2px solid var(--sand);
  color:var(--ink); display:flex; align-items:center; gap:.6rem;
}
.admin-card h2::before{
  content:""; display:inline-block; width:3px; height:1.1em;
  background:var(--gold); border-radius:2px; flex-shrink:0;
}
.admin-card-hint{ font-size:.86rem; color:var(--ink-soft); margin-bottom:1.4rem; margin-top:-.4rem; }

/* ---------- Solidité du mot de passe ---------- */
.mdp-jauge{ margin:.6rem 0 .2rem; }
.mdp-jauge[hidden]{ display:none; }

.mdp-barre{
  height:5px; border-radius:999px; background:var(--sand);
  overflow:hidden;
}
/* La largeur ET la couleur portent la même information : sur un écran mal
   calibré, ou pour qui distingue mal le rouge du vert, la longueur du
   remplissage suffit à se situer. */
.mdp-barre span{
  display:block; height:100%; width:0; border-radius:999px;
  background:#a13a25; transition:width .25s ease, background-color .25s ease;
}
.mdp-barre span[data-score="1"]{ width:25%;  background:#a13a25; }
.mdp-barre span[data-score="2"]{ width:50%;  background:#c8853a; }
.mdp-barre span[data-score="3"]{ width:75%;  background:#7a8f3f; }
.mdp-barre span[data-score="4"]{ width:100%; background:#3f9142; }

.mdp-verdict{ font-size:.8rem; margin:.35rem 0 0; color:var(--ink-soft); }
.mdp-verdict strong{ color:var(--ink); }
.mdp-verdict.is-refuse strong{ color:#a13a25; }

.field-hint--alerte{
  border-left:2px solid #c8853a; padding-left:.7rem; color:var(--ink);
}

.mdp-confirme{ font-size:.8rem; margin:.4rem 0 0; font-weight:600; }
.mdp-confirme[hidden]{ display:none; }
.mdp-confirme.is-ok{ color:#2c6b2f; }
.mdp-confirme.is-different{ color:#a13a25; }
.admin-card[hidden]{ display:none; }

/* Carte d'action irrattrapable : le liseré rouge la distingue des réglages
   ordinaires, qu'on peut toujours corriger en les ressaisissant. */
.admin-card--danger{ border-left:3px solid #a13a25; }
.admin-card--danger h2{ color:#a13a25; }
.compteur-etat{
  background:var(--cream); border-radius:8px; padding:.8rem 1rem;
  font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:1.2rem;
}

.spec-edit{
  background:var(--cream); border-radius:10px;
  padding:1rem 1.2rem; margin-top:.8rem;
}
.spec-edit:first-child{ margin-top:0; }
.spec-edit-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9em; }
.spec-edit-header h3{ font-size:.9rem; margin:0; color:var(--gold-deep); font-weight:700; letter-spacing:.02em; }

.btn-small{ padding:.6em 1.3em; font-size:.88rem; }

/* ---------- Connexion Google ---------- */
/* Séparateur « ou » : un filet de chaque côté du mot, obtenu en laissant
   le fond de la carte recouvrir le milieu de la ligne. */
.login-ou{
  position:relative; margin:1.3rem 0; text-align:center;
  font-size:.8rem; color:var(--ink-soft);
}
.login-ou::before{
  content:""; position:absolute; top:50%; left:0; right:0;
  height:1px; background:var(--sand);
}
.login-ou span{ position:relative; background:var(--white); padding:0 .8rem; }

.btn-google{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  width:100%; padding:.75em 1em; cursor:pointer;
  border:1.5px solid var(--sand); border-radius:var(--radius);
  background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-size:.95rem; font-weight:600;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.btn-google:hover{ border-color:var(--gold-pale); background:var(--cream); }
.btn-google svg{ width:19px; height:19px; flex-shrink:0; }

/* ---------- Code de vérification ---------- */
/* Chiffres espacés et centrés : on relit un code à six chiffres bien plus
   sûrement ainsi qu'en texte courant, surtout recopié depuis un téléphone. */
.a2f-code{
  text-align:center; font-size:1.7rem; font-weight:600;
  letter-spacing:.45em; text-indent:.45em;
  font-family:var(--font-body);
}
.a2f-renvoyer{
  display:block; margin:.9rem auto 0; padding:.3em .6em;
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:.86rem; color:var(--gold-deep);
  text-decoration:underline; text-underline-offset:3px;
}
.a2f-renvoyer:hover{ color:var(--ink); }

/* ---------- Équipe & invitations ---------- */
.team-list{ display:flex; flex-direction:column; gap:.6rem; }
.team-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; background:var(--cream);
  border:1.5px solid var(--sand); border-radius:var(--radius);
}
.team-info{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.team-info strong{ font-size:.95rem; color:var(--ink); overflow-wrap:anywhere; }
.team-info span{ font-size:.8rem; color:var(--ink-soft); }
.team-you{ font-size:.78rem; color:var(--gold-deep); font-weight:600; white-space:nowrap; }
.team-actions{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.team-role{
  font-family:var(--font-body); font-size:.85rem; padding:.45em .6em;
  border:1.5px solid var(--sand); border-radius:var(--radius);
  background:var(--white); color:var(--ink);
}
.team-role-fixed{ font-size:.82rem; color:var(--ink-soft); white-space:nowrap; }

/* Abonnement aux alertes de commande, un par personne */
.team-notif{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.4rem; cursor:pointer; user-select:none;
}
.team-notif input{ width:15px; height:15px; accent-color:var(--gold-deep); cursor:pointer; flex-shrink:0; }
.team-notif span{ font-size:.82rem; color:var(--ink-soft); }

/* Invitation dont le délai est passé : elle ne sert plus qu'à être annulée */
.team-row.is-expiree{ opacity:.55; }
.admin-card[hidden]{ display:none; }
.team-revoke:hover, .invite-cancel:hover{ background:#fbe4e0; color:#a13a25; border-color:#fbe4e0; }

.invite-result{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--sand); }
.invite-result[hidden]{ display:none; }
.invite-result > label{
  display:block; margin-bottom:.4rem;
  font-size:.8rem; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em;
}
.invite-link-row{ display:grid; grid-template-columns:1fr auto; gap:.6rem; }
.invite-link-row input{
  font-family:var(--font-body); font-size:.85rem; padding:.6em .8em;
  border:1.5px solid var(--sand); border-radius:var(--radius);
  background:var(--white); color:var(--ink-soft);
}

/* ---------- Barre d'enregistrement ---------- */
/* sticky : reste visible en bas de l'ecran quel que soit le defilement,
   pour qu'une modification en attente ne passe jamais inapercue. */
.save-bar{
  position:sticky; bottom:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  margin-top:1.6rem; padding:1rem 1.4rem;
  background:var(--white); border:1.5px solid var(--sand); border-radius:12px;
  box-shadow:0 -6px 24px -12px rgba(33,28,23,.35);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.save-bar-status{ font-size:.9rem; color:var(--ink-soft); }
.save-bar .btn{ min-width:200px; }
.save-bar .btn[disabled]{ opacity:.6; cursor:progress; }

/* Etat "modifications non enregistrees" */
.save-bar.is-dirty{ border-color:var(--gold); background:#fdf4e8; }
.save-bar.is-dirty .save-bar-status{ color:var(--gold-deep); font-weight:600; }
.save-bar.is-dirty .save-bar-status::before{ content:'⚠ '; }

/* ---------- Import de photos ---------- */
.image-upload{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.image-upload-preview{
  width:84px; height:84px; object-fit:cover; border-radius:8px; background:var(--sand);
  display:block; flex-shrink:0;
}
.image-upload-preview:not([src]), .image-upload-preview[src=""]{ visibility:hidden; }
.image-upload .btn{ white-space:nowrap; }
.image-upload .btn[disabled]{ opacity:.55; cursor:progress; }

/* Variante compacte : à l'intérieur d'une ligne "produit vedette" */
.image-upload--compact{ gap:.5rem; min-width:0; }
.image-upload--compact .image-upload-preview{ width:46px; height:46px; border-radius:6px; }
.image-upload--compact .btn{ padding:.45em .8em; font-size:.8rem; }
.image-upload--compact .row-remove{ width:26px; height:26px; }

/* ---------- Produits vedettes ---------- */
.produits-list{ margin-bottom:.7rem; }
/* La description est un textarea : on aligne en haut pour que les autres
   champs restent en tete de ligne quand il s'agrandit. */
.produit-row{ display:grid; grid-template-columns:1fr 1.8fr 1.5fr .9fr auto; gap:.6rem; margin-bottom:.9rem; align-items:start; }
.produit-row input, .produit-row select, .produit-row textarea{
  font-family:var(--font-body); font-size:.88rem; padding:.55em .7em;
  border:1.5px solid var(--sand); border-radius:var(--radius); background:var(--cream); color:var(--ink);
}
.produit-row textarea{ resize:vertical; min-height:5.2em; line-height:1.45; }
/* Champs sur une ligne ramenes a la hauteur du textarea */
.produit-row > input, .produit-row > select, .produit-row > .row-remove{ margin-top:.15rem; }

/* ---------- Liste des horaires ---------- */
.hour-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:.8rem; margin-bottom:.7rem; align-items:center; }
.hour-row input{
  font-family:var(--font-body); font-size:.92rem; padding:.6em .8em;
  border:1.5px solid var(--sand); border-radius:var(--radius); background:var(--cream); color:var(--ink);
}
.row-remove{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--sand); background:var(--white);
  color:var(--ink-soft); cursor:pointer; font-size:1rem; line-height:1;
}
.row-remove:hover{ background:#fbe4e0; color:#a13a25; border-color:#fbe4e0; }

/* ---------- Liste des sections ---------- */
.blocks-list{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.4rem; }
.block-row{
  display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; border:1.5px solid var(--sand); border-radius:8px;
}
.block-row.is-hidden{ opacity:.5; }
.block-row .block-type-tag{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--gold-deep);
  background:var(--sand); padding:.3em .6em; border-radius:4px; flex-shrink:0;
}
.block-row .block-row-title{ flex:1; font-weight:600; font-size:.94rem; }
.block-row-actions{ display:flex; gap:.4rem; flex-shrink:0; }
.icon-btn{
  width:32px; height:32px; border-radius:6px; border:1.5px solid var(--sand); background:var(--white);
  cursor:pointer; color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s, border-color .18s;
}
.icon-btn:hover{ background:var(--sand); color:var(--ink); }
.icon-btn[data-action="delete"]:hover{ background:#fbe4e0; color:#a13a25; border-color:#fbe4e0; }
.icon-btn:disabled{ opacity:.3; cursor:default; }
.empty-hint{ color:var(--ink-soft); font-size:.92rem; }

/* ---------- Modales ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(33,28,23,.55); display:flex; align-items:center; justify-content:center;
  padding:1.5rem; z-index:200;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  background:var(--white); border-radius:12px; padding:2rem; max-width:520px; width:100%;
  max-height:88vh; overflow-y:auto;
}
.modal-wide{ max-width:640px; }
.modal h2{ font-size:1.2rem; margin-bottom:1.2rem; }
.modal-actions{ display:flex; justify-content:flex-end; gap:.8rem; margin-top:1.4rem; }

.template-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.6rem; }
.template-card{
  text-align:left; background:var(--cream); border:1.5px solid var(--sand); border-radius:8px; padding:1.1rem;
  cursor:pointer; display:flex; flex-direction:column; gap:.3rem;
}
.template-card:hover{ border-color:var(--gold); background:var(--white); }
.template-card strong{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); }
.template-card span{ font-size:.85rem; color:var(--ink-soft); }

.card-item-edit{
  border:1.5px solid var(--sand); border-radius:8px; padding:1rem; margin-bottom:1rem; position:relative;
}
.card-item-edit .row-remove{ position:absolute; top:.7rem; right:.7rem; }
.gallery-row{ display:grid; grid-template-columns:1fr auto; gap:.8rem; margin-bottom:.7rem; align-items:center; }
.gallery-thumbs{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.6rem; }
.gallery-thumb{ position:relative; width:72px; height:72px; }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.gallery-thumb .row-remove{ position:absolute; top:-8px; right:-8px; width:24px; height:24px; font-size:.75rem; }

/* ---------- Modal confirmation ---------- */
.confirm-overlay{
  position:fixed; inset:0; background:rgba(33,28,23,.55); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  backdrop-filter:blur(3px);
  animation:fadeIn .15s ease;
}
.confirm-overlay[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.confirm-modal{
  background:var(--white); border-radius:14px; padding:2rem 2.2rem;
  max-width:400px; width:100%; box-shadow:0 24px 60px -20px rgba(33,28,23,.4);
  animation:slideUp .2s ease;
}
@keyframes slideUp{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }
.confirm-title{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.confirm-sub{ font-size:.88rem; color:var(--ink-soft); margin-bottom:1.6rem; }
.confirm-actions{ display:flex; gap:.8rem; justify-content:flex-end; }
.confirm-actions[hidden]{ display:none; }

/* ---------- Popup d'import de photo ---------- */
.upload-overlay{
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:rgba(33,28,23,.55); backdrop-filter:blur(3px);
  animation:uploadFade .18s ease;
}
.upload-overlay[hidden]{ display:none; }
@keyframes uploadFade{ from{ opacity:0; } to{ opacity:1; } }

.upload-modal{
  background:var(--white); border-radius:16px; padding:2.2rem 2.4rem 1.9rem;
  max-width:340px; width:100%; text-align:center;
  box-shadow:0 24px 60px -20px rgba(33,28,23,.45);
  animation:uploadPop .22s var(--ease);
}
@keyframes uploadPop{ from{ transform:translateY(14px) scale(.96); opacity:0; } to{ transform:none; opacity:1; } }

/* Vignette + anneau de progression */
.upload-visual{ position:relative; width:120px; height:120px; margin:0 auto 1.4rem; }
.upload-thumb{
  position:absolute; inset:12px; width:96px; height:96px;
  object-fit:cover; border-radius:50%; background:var(--sand);
  /* Assombrie en permanence : le pourcentage puis la coche s'affichent par
     dessus, et doivent rester lisibles quelle que soit la photo. */
  filter:brightness(.5) saturate(.85);
}
.upload-thumb:not([src]), .upload-thumb[src=""]{ visibility:hidden; }

.upload-ring{ position:absolute; inset:0; width:120px; height:120px; transform:rotate(-90deg); }
.upload-ring circle{ fill:none; stroke-width:6; stroke-linecap:round; }
.upload-ring-track{ stroke:var(--sand); }
.upload-ring-fill{
  stroke:var(--gold);
  stroke-dasharray:339.292;            /* 2πr, r=54 */
  stroke-dashoffset:339.292;
  transition:stroke-dashoffset .3s var(--ease), stroke .25s var(--ease);
}

.upload-percent{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.6rem; font-weight:600;
  color:var(--white); text-shadow:0 1px 10px rgba(33,28,23,.8);
  letter-spacing:.01em;
}
.upload-percent small{ font-size:.8rem; margin-left:.1em; opacity:.75; }
.upload-percent[hidden]{ display:none; }

/* Coche de succès / croix d'échec */
.upload-check, .upload-cross{
  position:absolute; inset:0; margin:auto; width:56px; height:56px;
  fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:80; stroke-dashoffset:80;
  animation:uploadDraw .4s var(--ease) forwards;
}
.upload-check{ stroke:var(--white); filter:drop-shadow(0 1px 5px rgba(33,28,23,.55)); }
.upload-cross{ stroke:#ff8b74; filter:drop-shadow(0 1px 5px rgba(33,28,23,.55)); }
.upload-check[hidden], .upload-cross[hidden]{ display:none; }
@keyframes uploadDraw{ to{ stroke-dashoffset:0; } }

.upload-title{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.upload-sub{
  font-size:.88rem; color:var(--ink-soft); margin-bottom:0;
  overflow-wrap:anywhere;   /* les noms de fichiers longs ne debordent pas */
}
.upload-actions{ display:flex; justify-content:center; margin-top:1.5rem; }
.upload-actions[hidden]{ display:none; }

/* État erreur */
.upload-modal.is-error .upload-ring-fill{ stroke:#a13a25; }
.upload-modal.is-error .upload-title{ color:#a13a25; }

@media (prefers-reduced-motion: reduce){
  .upload-overlay, .upload-modal, .upload-check, .upload-cross{ animation:none; }
  .upload-ring-fill{ transition:none; }
}

/* ---------- Sous-titre dans une carte ---------- */
.admin-subtitle{
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); margin:1.8rem 0 .9rem;
}
.admin-subtitle:first-of-type{ margin-top:.4rem; }
/* Le sous-titre suit un bouton « + Ajouter » : sans ce recul les deux blocs
   se touchent et l'on ne sait plus à quelle liste appartient le bouton. */
.admin-card-hint + #presseAvisList{ margin-top:-.6rem; }

/* ---------- Actions en bas de carte ---------- */
.card-actions{ display:flex; justify-content:flex-end; gap:.8rem; }

/* ---------- Interrupteur (ouvrir/fermer les commandes) ---------- */
.switch-row{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:1.4rem; cursor:pointer; user-select:none;
}
.switch-row input{ width:18px; height:18px; accent-color:var(--gold-deep); cursor:pointer; }
.switch-row span{ font-size:.94rem; color:var(--ink); }

/* ---------- Catalogue de Noël ---------- */
.noel-list{ display:flex; flex-direction:column; gap:1.1rem; margin-bottom:1.4rem; }

.noel-item{
  border:1px solid var(--sand); border-radius:10px;
  padding:1.2rem 1.3rem 1rem; background:var(--white);
}
/* En rupture : la fiche s'efface sans disparaître — elle reste modifiable. */
.noel-item.is-rupture{ background:var(--sand); opacity:.82; }

.noel-item-header{
  display:flex; align-items:center; gap:.8rem;
  margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:1px solid var(--sand);
}
.noel-item-header h3{
  flex:1; min-width:0; margin:0;
  font-size:.95rem; font-weight:700; color:var(--gold-deep); letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.noel-item-actions{ display:flex; gap:.4rem; flex-shrink:0; }

.noel-dispo{
  flex-shrink:0; border:1px solid var(--gold-deep); background:transparent;
  color:var(--gold-deep); border-radius:999px;
  padding:.32em 1em; font-size:.78rem; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap;
}
.noel-item.is-rupture .noel-dispo{ border-color:#a13a25; color:#a13a25; }

.noel-item-save{ display:flex; justify-content:flex-end; }

.capacite-list{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:.7rem; }
.capacite-row{ display:grid; grid-template-columns:1fr 100px auto; gap:.7rem; align-items:center; }
.capacite-row input{
  border:1px solid var(--sand); border-radius:6px; padding:.45em .6em; font-family:inherit; font-size:.9rem;
}

/* ---------- Commandes ---------- */
.prepa-bloc{
  border:1px solid var(--sand); border-radius:10px;
  background:var(--cream, #fdf9f3); padding:1rem 1.2rem 1.1rem;
  margin-bottom:1.4rem;
}
.prepa-entete{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.prepa-entete h3{ margin:0; font-size:1rem; }
.prepa-entete input[type="date"]{
  border:1px solid var(--sand); border-radius:6px; padding:.4em .6em; font-family:inherit; font-size:.88rem;
}
.prepa-resultats{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.prepa-groupe h4{ margin:0 0 .5rem; font-size:.85rem; color:var(--ink-soft); font-weight:600; }
.prepa-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.prepa-liste li{ font-size:.92rem; }
.prepa-qte{ font-weight:700; color:var(--gold-deep); margin-right:.4em; }
.prepa-attente .prepa-qte{ color:var(--ink-soft); }

.admin-card-entete{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.admin-card-entete h2{ margin:0; }

.orders-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;
  margin-bottom:1.4rem;
}
.stat-carte{
  display:flex; flex-direction:column; gap:.3rem;
  border:1px solid var(--sand); border-radius:10px;
  background:var(--white); padding:.9rem 1.1rem;
}
.stat-valeur{
  font-size:1.3rem; font-weight:700; color:var(--gold-deep);
  overflow-wrap:anywhere; line-height:1.2;
}
.stat-label{ font-size:.78rem; color:var(--ink-soft); }

.orders-barre{
  display:grid; grid-template-columns:1fr 1fr auto; gap:1.2rem; align-items:end;
  margin-bottom:.6rem;
}
.orders-barre .form-row{ margin-bottom:0; }
.orders-compte{ font-size:.82rem; color:var(--ink-soft); margin:0 0 1.2rem; }

.orders-list{ display:flex; flex-direction:column; gap:1rem; }

.cmd-carte{
  border:1px solid var(--sand); border-left-width:4px; border-radius:10px;
  padding:1.1rem 1.3rem 1rem; background:var(--white);
}
.cmd-carte.statut-en_attente{ border-left-color:var(--gold); }
.cmd-carte.statut-confirmee{ border-left-color:#3f9142; }
.cmd-carte.statut-prete{ border-left-color:var(--sea); }
.cmd-carte.statut-recuperee{ border-left-color:var(--sand); opacity:.7; }
.cmd-carte.statut-annulee{ border-left-color:#a13a25; opacity:.6; }
/* Une commande oubliée doit sauter aux yeux dans une liste longue. */
.cmd-carte.is-alerte{ background:#fdf6e9; border-left-color:#c0563f; }

.cmd-supprimer:hover{ background:#a13a25; border-color:#a13a25; color:var(--white); }

.cmd-statut-select{
  border:1px solid var(--sand); border-radius:999px; background:var(--white);
  padding:.5em 1.4em .5em 1em; font-family:inherit; font-size:.85rem; font-weight:600;
  color:var(--ink); cursor:pointer;
}

/* Une commande annulée par le client ne se repilote plus : le menu reste
   affiché pour qu'on lise son état, mais il ne s'ouvre pas. */
.cmd-statut-select:disabled{
  opacity:.55; cursor:not-allowed; background:var(--cream, #f7f3ec);
}

.cmd-statut-champ{ display:flex; align-items:center; gap:.5rem; margin-right:auto; }
.cmd-statut-libelle{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); white-space:nowrap;
}

/* Le statut se lit d'abord à la couleur : sur une liste longue, l'œil trie
   avant de lire. Les teintes reprennent celles du liseré des cartes, pour
   qu'un même état ait partout la même couleur. */
.cmd-statut-select.statut-en_attente{ color:#8a6a12; border-color:var(--gold); background:rgba(198,160,74,.1); }
.cmd-statut-select.statut-confirmee { color:#2c6b2f; border-color:#3f9142; background:rgba(63,145,66,.1); }
.cmd-statut-select.statut-prete     { color:#1f5f6b; border-color:var(--sea); background:rgba(58,124,138,.1); }
.cmd-statut-select.statut-recuperee { color:var(--ink-soft); border-color:var(--sand); background:var(--white); }
.cmd-statut-select.statut-annulee   { color:#a13a25; border-color:#a13a25; background:rgba(161,58,37,.08); }

.cmd-statut.statut-en_attente{ color:#8a6a12; border-color:var(--gold); }
.cmd-statut.statut-confirmee { color:#2c6b2f; border-color:#3f9142; }
.cmd-statut.statut-prete     { color:#1f5f6b; border-color:var(--sea); }
.cmd-statut.statut-annulee   { color:#a13a25; border-color:#a13a25; }

/* ---------- Choix des tickets à imprimer ---------- */
.print-choix{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.6rem; }

.print-option{
  display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
  border:1px solid var(--sand); border-radius:10px; padding:.7rem .85rem;
  transition:border-color .15s ease, background .15s ease;
}
.print-option:hover{ border-color:var(--gold-deep); }
.print-option:has(input:checked){ border-color:var(--gold-deep); background:rgba(198,160,74,.08); }
.print-option input{ margin-top:.15rem; accent-color:var(--gold-deep); flex-shrink:0; }
.print-option strong{ display:block; font-size:.9rem; color:var(--ink); }
.print-option em{ display:block; font-style:normal; font-size:.78rem; color:var(--ink-soft); margin-top:.15rem; }

.cmd-header{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  margin-bottom:.8rem;
}
.cmd-code{
  font-family:var(--font-display); font-size:1.35rem; font-weight:700;
  letter-spacing:.14em; color:var(--gold-deep);
}
.cmd-statut{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); border:1px solid var(--sand); border-radius:999px; padding:.22em .8em;
}
.cmd-retrait{ margin-left:auto; font-size:.88rem; font-weight:600; color:var(--ink); }

.cmd-alerte{
  margin:0 0 .8rem; font-size:.84rem; font-weight:600; color:#a13a25;
}
/* Annulation venue du client : signalée en vert plutôt qu'en rouge. Rien
   n'a échoué, et il n'y a rien à corriger — juste à ne pas préparer. */
.cmd-annulee-client{
  margin:0 0 .8rem; font-size:.84rem; font-weight:600; color:#2f6b45;
}

/* Champ chiffré suivi de son unité, sur une seule ligne */
.form-row-suffixe{ display:flex; align-items:center; gap:.6rem; }
.form-row-suffixe input{ width:6.5rem; flex-shrink:0; }
.form-row-suffixe span{ font-size:.9rem; color:var(--ink-soft); }
.form-row-hint{
  margin:.5rem 0 0; font-size:.83rem; line-height:1.5;
  color:var(--ink-soft);
}

.cmd-client{ display:flex; gap:1.2rem; flex-wrap:wrap; align-items:baseline; margin-bottom:.8rem; }
.cmd-client strong{ font-size:.98rem; }
.cmd-client a{ font-size:.9rem; color:var(--gold-deep); }

.cmd-lignes{ margin:0 0 .6rem; font-size:.92rem; }
.cmd-lignes li{
  display:flex; gap:.5rem; align-items:baseline;
  padding:.28rem 0; border-bottom:1px solid var(--sand);
}
.cmd-qte{ font-weight:700; color:var(--gold-deep); }
.cmd-ligne-prix{ margin-left:auto; color:var(--ink-soft); white-space:nowrap; }

.cmd-total{ margin:0 0 .6rem; font-size:.88rem; color:var(--ink-soft); }
.cmd-total strong{ font-size:1.05rem; color:var(--ink); margin-left:.4rem; }

.cmd-commentaire{
  margin:0 0 .9rem; padding:.6rem .9rem; background:var(--sand);
  border-radius:6px; font-size:.88rem; font-style:italic;
}

.cmd-actions{ display:flex; gap:.7rem; justify-content:flex-end; flex-wrap:wrap; }

@media (max-width: 720px){
  .form-row-grid, .template-grid{ grid-template-columns:1fr; }

  .card-actions .btn{ width:100%; }

  /* Catalogue Noël : le nom prend sa ligne, les boutons la suivante */
  .noel-item{ padding:1rem 1rem .9rem; }
  .noel-item-header{ flex-wrap:wrap; gap:.6rem; }
  .noel-item-header h3{ flex-basis:100%; }
  .noel-dispo{ flex:1; text-align:center; }
  .noel-item-save .btn{ width:100%; }
  .capacite-row{ grid-template-columns:1fr 80px auto; }

  /* Commandes : la barre de filtres s'empile, les cartes passent en pleine
     largeur — le panel se consulte au comptoir, sur téléphone. */
  .orders-barre{ grid-template-columns:1fr; gap:.9rem; }
  .orders-barre .btn{ width:100%; }
  .orders-stats{ grid-template-columns:1fr 1fr; }
  .prepa-resultats{ grid-template-columns:1fr; gap:.9rem; }
  .prepa-entete{ flex-wrap:wrap; }
  .cmd-carte{ padding:1rem 1rem .9rem; }
  .cmd-header{ gap:.6rem; }
  .cmd-retrait{ margin-left:0; flex-basis:100%; }
  .cmd-client{ flex-direction:column; gap:.25rem; }
  .cmd-actions .btn{ flex:1; }

  /* Le libellé passe au-dessus du menu : côte à côte, il ne resterait pas
     assez de place pour lire le statut lui-même. */
  .cmd-statut-champ{ flex-direction:column; align-items:stretch; gap:.3rem; width:100%; margin-right:0; }
  .cmd-statut-select{ width:100%; }

  /* Sur mobile la modale d'impression prend la largeur : les libellés des
     trois tickets ne tiennent pas sur une ligne autrement. */
  .print-option{ padding:.6rem .7rem; }
  .print-option em{ font-size:.74rem; }
  .print-choix{ margin-bottom:1.2rem; }
  #printOverlay .confirm-actions{ flex-direction:column-reverse; }
  #printOverlay .confirm-actions .btn{ width:100%; }

  .hour-row{ grid-template-columns:1fr 1fr; }
  .hour-row > .row-remove{ grid-column:span 2; width:100%; border-radius:6px; }

  /* Produits vedettes : une colonne, l'uploader passe en pleine largeur */
  .produit-row{ grid-template-columns:1fr; gap:.5rem; padding-bottom:.9rem; border-bottom:1px solid var(--sand); }
  .produit-row > .row-remove{ width:100%; border-radius:6px; }
  .image-upload--compact{ gap:.7rem; }
  .image-upload--compact .image-upload-preview{ width:56px; height:56px; }
  .image-upload--compact .btn{ flex:1; }

  .gallery-row{ grid-template-columns:1fr; }
  .gallery-row > .row-remove{ width:100%; border-radius:6px; }

  .upload-modal{ padding:1.8rem 1.6rem 1.5rem; max-width:300px; }
  .upload-visual{ width:100px; height:100px; }
  .upload-ring{ width:100px; height:100px; }
  .upload-thumb{ inset:10px; width:80px; height:80px; }
  .upload-percent{ font-size:1.35rem; }
  .upload-actions .btn{ width:100%; }

  .save-bar{ flex-direction:column; align-items:stretch; gap:.8rem; text-align:center; padding:1rem; }
  .save-bar .btn{ width:100%; min-width:0; }

  .team-row{ flex-direction:column; align-items:stretch; gap:.7rem; }
  .team-row .btn{ width:100%; }
  .team-actions{ flex-direction:column; align-items:stretch; gap:.5rem; }
  .team-role{ width:100%; }
  .invite-link-row{ grid-template-columns:1fr; }
}

/* ---------- Mode jour J ---------- */
/* Plein écran, au-dessus de tout : au comptoir le jour du retrait, rien
   d'autre ne doit être visible ni accessible par erreur. Contraste fort et
   cibles larges — c'est pensé pour un doigt sur une tablette, pas une
   souris, et pour être lu vite dans le rush.
   Tout se joue sur le repérage : au comptoir on cherche une carte des yeux
   pendant qu'on parle au client, donc chaque statut porte sa couleur et son
   liseré, et le code de commande est ce qui se lit de plus loin. */
.jourj-overlay[hidden]{ display:none; }
.jourj-overlay{
  position:fixed; inset:0; z-index:1000;
  /* Dégradé très léger : donne un haut et un bas à un écran qui n'a ni
     en-tête ni bordure, sans ajouter de trait à lire. */
  background:
    radial-gradient(120% 70% at 50% 0%, #fffdf9 0%, var(--cream, #fbf6ee) 55%, #f5ece0 100%);
  display:flex; flex-direction:column;
  padding:1.1rem 1.1rem .8rem;
  /* iPad en plein écran : l'encoche et la barre d'accueil mangent les bords. */
  padding-top:max(1.1rem, env(safe-area-inset-top));
  padding-bottom:max(.8rem, env(safe-area-inset-bottom));
  color:var(--ink);
}

/* Couleurs par statut, posées ici et reprises par les cartes plus bas.
   « Prête » est la plus saturée à dessein : c'est la seule qui appelle un
   geste immédiat au comptoir, elle doit sauter aux yeux avant les autres. */
.jourj-overlay{
  --jj-attente:      #b4762f;  --jj-attente-bg:   #fbf0e0;
  --jj-confirmee:    #5c7a78;  --jj-confirmee-bg: #e7eeec;
  --jj-prete:        #2f7d4f;  --jj-prete-bg:     #e4f2e8;
  --jj-recuperee:    #8a7f72;  --jj-recuperee-bg: #f1ece5;
  --jj-annulee:      #a13a25;  --jj-annulee-bg:   #f8e9e5;
  --jj-neutre:       #8a7f72;  --jj-neutre-bg:    var(--sand);
}

/* ---- Barre de recherche et filtres ---- */
.jourj-entete{ display:flex; align-items:center; gap:.8rem; flex:none; }

.jourj-recherche{
  flex:1; min-width:0;
  font-size:1.45rem; font-weight:600; padding:.85rem 1.1rem;
  border:2px solid var(--sand); border-radius:14px;
  font-family:inherit; color:var(--ink); background:var(--white);
  box-shadow:0 10px 24px -18px rgba(33,28,23,.5);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.jourj-recherche::placeholder{ color:#a99c8c; font-weight:400; }
.jourj-recherche:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(200,133,58,.16), 0 10px 24px -18px rgba(33,28,23,.5);
}
/* La croix native de <input type="search"> est minuscule au doigt. */
.jourj-recherche::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; cursor:pointer; border-radius:50%;
  background:var(--sand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat;
}

.jourj-filtre-date{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.65rem; flex:none;
}
.jourj-filtre-date input[type="date"]{
  border:2px solid var(--sand); border-radius:999px; padding:.5em 1em;
  min-height:44px;
  font-family:inherit; font-size:.95rem; font-weight:600; color:var(--ink);
  background:var(--white); cursor:pointer;
  transition:border-color .18s var(--ease);
}
.jourj-filtre-date input[type="date"]:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,133,58,.14);
}
.jourj-filtre-date input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.65;
}

/* Les raccourcis de date étaient des liens soulignés de 18px de haut : au
   doigt on les manquait une fois sur deux. Pastilles de 44px minimum. */
.jourj-lien{
  border:2px solid transparent; background:var(--white);
  color:var(--ink-soft); font-family:inherit; font-size:.9rem; font-weight:600;
  padding:.5em 1.1em; min-height:44px; border-radius:999px; cursor:pointer;
  transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.jourj-lien:hover{ color:var(--ink); border-color:var(--gold-pale); }
.jourj-lien:active{ background:var(--sand); }
.jourj-lien:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,133,58,.14);
}

.jourj-sous-titre{
  margin:.8rem 0 0; flex:none;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#8a7f72; text-align:center;
}

/* ---- Liste des commandes ---- */
/* En grille dès qu'il y a la place : sur une tablette posée en paysage, une
   colonne unique n'affiche que trois commandes et oblige à faire défiler
   pendant que le client attend. */
.jourj-resultats{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  margin-top:.9rem; padding:.2rem .2rem 1rem;
  display:grid; align-content:start; gap:.85rem;
  grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
  scrollbar-width:thin; scrollbar-color:var(--gold-pale) transparent;
}
.jourj-resultats::-webkit-scrollbar{ width:10px; }
.jourj-resultats::-webkit-scrollbar-thumb{
  background:var(--gold-pale); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}

.jourj-carte{
  position:relative; overflow:hidden;
  border:1.5px solid var(--sand); border-radius:16px; background:var(--white);
  padding:1rem 1.2rem 1.1rem 1.45rem;
  box-shadow:0 12px 26px -22px rgba(33,28,23,.55);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  /* Repli si un statut inconnu arrive de la base : la carte reste lisible. */
  --jj-accent:var(--jj-neutre); --jj-accent-bg:var(--jj-neutre-bg);
}
/* Le liseré fait tout le repérage : on lit une couleur avant de lire un mot. */
.jourj-carte::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px;
  background:var(--jj-accent);
}
.jourj-carte:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 32px -22px rgba(33,28,23,.6);
}

.jourj-carte--en_attente{ --jj-accent:var(--jj-attente);   --jj-accent-bg:var(--jj-attente-bg); }
.jourj-carte--confirmee { --jj-accent:var(--jj-confirmee); --jj-accent-bg:var(--jj-confirmee-bg); }
.jourj-carte--prete     { --jj-accent:var(--jj-prete);     --jj-accent-bg:var(--jj-prete-bg); }
.jourj-carte--recuperee { --jj-accent:var(--jj-recuperee); --jj-accent-bg:var(--jj-recuperee-bg); }
.jourj-carte--annulee   { --jj-accent:var(--jj-annulee);   --jj-accent-bg:var(--jj-annulee-bg); }

/* « Prête » est la seule à porter un fond teinté : c'est la commande qu'on
   cherche des yeux quand quelqu'un se présente au comptoir. */
.jourj-carte--prete{
  background:linear-gradient(180deg, var(--jj-prete-bg) 0%, var(--white) 42%);
  border-color:#cbe3d3;
}

/* Récupérée ou annulée : plus rien à faire dessus, mais elles restent
   consultables. On les efface sans les cacher. */
.jourj-carte.is-figee{ opacity:.62; box-shadow:none; }
.jourj-carte.is-figee:hover{ opacity:.9; }

.jourj-carte-entete{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem 1rem; flex-wrap:wrap;
}
.jourj-code{
  font-size:1.45rem; font-weight:800; letter-spacing:.05em; color:var(--gold-deep);
  /* Chiffres de largeur fixe : les codes s'alignent d'une carte à l'autre,
     ce qui rend la comparaison visuelle immédiate. */
  font-variant-numeric:tabular-nums;
}
.jourj-nom{ font-size:1.12rem; font-weight:600; flex:1; min-width:0; }
.jourj-statut-badge{
  font-size:.75rem; font-weight:700; letter-spacing:.03em;
  padding:.35em .9em; border-radius:999px; white-space:nowrap;
  color:var(--jj-accent); background:var(--jj-accent-bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jj-accent) 22%, transparent);
}

.jourj-detail{
  margin:.55rem 0 0; font-size:.95rem; line-height:1.45; color:var(--ink-soft);
  overflow-wrap:anywhere;
}
.jourj-detail strong{
  color:#8a7f72; font-size:.74rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  display:inline-block; margin-right:.35em;
}
/* Le téléphone se lit et se recopie : même traitement que le code. */
.jourj-detail--tel{ font-size:1.05rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
/* Les produits sont la raison d'être de la carte, ils passent devant. */
.jourj-detail--items{
  margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--sand);
  color:var(--ink); font-weight:600;
}
/* Un commentaire est rare : quand il y en a un, il ne doit pas se noyer. */
.jourj-detail--note{
  margin-top:.7rem; padding:.55rem .8rem; border-radius:10px;
  background:var(--jj-accent-bg); color:var(--ink); font-style:italic;
}

.jourj-vide{
  grid-column:1 / -1; align-self:start;
  text-align:center; color:#8a7f72; font-size:1.05rem;
  margin-top:2.5rem; padding:2.5rem 1.5rem;
  border:2px dashed var(--sand); border-radius:16px;
}

/* ---- Pied ---- */
.jourj-pied{ flex:none; display:flex; justify-content:center; gap:.6rem; padding-top:.9rem; }

.jourj-sortie{
  border:none; background:none; color:#8a7f72; font-family:inherit;
  font-size:.85rem; padding:.7em 1.2em; min-height:44px; border-radius:999px;
  cursor:pointer; text-decoration:underline; text-underline-offset:4px;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.jourj-sortie:hover{ color:var(--ink); background:rgba(33,28,23,.05); }
.jourj-sortie:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width: 720px){
  .jourj-overlay{ padding-left:.7rem; padding-right:.7rem; }
  .jourj-recherche{ font-size:1.2rem; padding:.8rem 1rem; }
  /* Une seule colonne : en dessous de 720px, deux cartes couperaient les
     noms et les listes de produits. */
  .jourj-resultats{ grid-template-columns:1fr; gap:.7rem; margin-top:.8rem; }
  .jourj-carte{ padding:.9rem 1rem 1rem 1.25rem; border-radius:14px; }
  .jourj-code{ font-size:1.3rem; }
  .jourj-nom{ font-size:1.05rem; }
  /* Le badge passe sous le nom plutôt que de le comprimer. */
  .jourj-carte-entete{ gap:.45rem .7rem; }
  .jourj-sous-titre{ margin-top:.7rem; font-size:.72rem; }
  .jourj-vide{ margin-top:1.5rem; padding:2rem 1rem; }
}

@media (max-width: 420px){
  /* Le filtre de date et ses deux raccourcis ne tiennent plus sur une ligne :
     la date prend la sienne, les raccourcis se partagent la suivante. */
  .jourj-filtre-date input[type="date"]{ flex:1 1 100%; }
  .jourj-lien{ flex:1; padding-inline:.6em; }
}

/* Écrans hauts et larges : on profite de la place plutôt que d'étirer des
   cartes à 900px de large, illisibles en diagonale. */
@media (min-width: 1400px){
  .jourj-resultats{ grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
  .jourj-carte, .jourj-recherche, .jourj-lien, .jourj-sortie{ transition:none; }
  .jourj-carte:hover{ transform:none; }
}

/* Popup de code, au-dessus du mode jour J lui-même (z-index supérieur) :
   « Quitter » ouvre ceci, ça ne ferme jamais rien tout seul. */
.jourj-pin-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(33,28,23,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.jourj-pin-overlay[hidden]{ display:none; }

.jourj-pin-carte{
  background:var(--white); border-radius:20px; padding:2.1rem 1.9rem;
  max-width:340px; width:100%; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  box-shadow:0 30px 60px -30px rgba(33,28,23,.7);
}
.jourj-pin-titre{ font-size:1.1rem; font-weight:700; margin:0; }
.jourj-pin-sous-texte{ font-size:.8rem; line-height:1.45; color:#8a7f72; margin:-.6rem 0 0; }
.jourj-pin-input{
  width:190px; font-size:2rem; letter-spacing:.6em; text-align:center;
  padding:.6em .4em .6em .8em; border:2px solid var(--sand); border-radius:14px;
  font-family:inherit; background:var(--cream); color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.jourj-pin-input:focus{
  outline:none; border-color:var(--gold); background:var(--white);
  box-shadow:0 0 0 4px rgba(200,133,58,.16);
}
.jourj-pin-erreur{ color:#a13a25; font-weight:700; font-size:.9rem; margin:0; }
.jourj-pin-actions{ display:flex; gap:.8rem; margin-top:.2rem; }
.jourj-pin-actions .btn{ min-width:120px; min-height:44px; }