:root{--fuchsia:#C71F65;--fuchsia-fonce:#8E0F45;--fuchsia-clair:#FBEEF3;--violet:#6B2A8E;
--encre:#161219;--gris:#F4F5F7;--ligne:#E4E5EA;--texte:#585866;
--sans:"Jost","Segoe UI",system-ui,sans-serif;--serif:"Cormorant Garamond",Georgia,serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--gris);color:var(--encre);font-size:15px;line-height:1.55}
a{color:var(--fuchsia)}
.admin{display:flex;min-height:100vh}
.cote{width:250px;background:var(--encre);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.marque{font-family:var(--serif);font-size:1.5rem;padding:1.4rem 1.4rem .3rem;margin:0;line-height:1}
.marque span{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fuchsia);margin-top:.4rem}
.cote nav{display:flex;flex-direction:column;padding:1.2rem 0;flex:1}
.cote nav a{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.4rem;color:rgba(255,255,255,.72);text-decoration:none;font-size:.88rem;border-left:3px solid transparent}
.cote nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.cote nav a.actif{border-left-color:var(--fuchsia);background:rgba(199,31,101,.16);color:#fff}
.ico{width:1.1rem;text-align:center;opacity:.8}
.cote-bas{padding:1rem 1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.cote-bas a{color:rgba(255,255,255,.6);text-decoration:none}
.cote-bas a:hover{color:#fff}
.principal{flex:1;min-width:0}
.tete{background:#fff;border-bottom:1px solid var(--ligne);padding:1.1rem 2rem;position:sticky;top:0;z-index:5}
.tete h1{margin:0;font-family:var(--serif);font-weight:400;font-size:1.6rem}
.contenu{padding:2rem;max-width:1200px}
.carte{background:#fff;border:1px solid var(--ligne);padding:1.5rem;margin-bottom:1.5rem;border-radius:3px}
.carte h2{margin:0 0 1rem;font-family:var(--serif);font-weight:400;font-size:1.3rem}
.carte h3{margin:1.5rem 0 .6rem;font-size:1rem;font-weight:500}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.stat{background:#fff;border:1px solid var(--ligne);padding:1.2rem;border-radius:3px}
.stat .n{font-family:var(--serif);font-size:2.2rem;color:var(--fuchsia);line-height:1}
.stat .l{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte);margin-top:.4rem}
table{width:100%;border-collapse:collapse;background:#fff;font-size:.9rem}
th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:middle}
thead th{background:var(--encre);color:#fff;font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
tbody tr:hover{background:var(--fuchsia-clair)}
input,select,textarea,button{font-family:inherit;font-size:.92rem}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=url],select,textarea{width:100%;padding:.5rem .7rem;border:1px solid var(--ligne);border-radius:3px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fuchsia)}
label{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte);margin-bottom:.25rem}
.champ{margin-bottom:1rem}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:700px){.deux{grid-template-columns:1fr}}
.btn{display:inline-block;padding:.55rem 1.2rem;background:var(--fuchsia);color:#fff;border:1px solid var(--fuchsia);border-radius:3px;cursor:pointer;text-decoration:none;font-size:.88rem;transition:.2s}
.btn:hover{background:var(--fuchsia-fonce);border-color:var(--fuchsia-fonce);color:#fff}
.btn-ligne{background:#fff;color:var(--fuchsia)}
.btn-ligne:hover{background:var(--fuchsia);color:#fff}
.btn-danger{background:#B3261E;border-color:#B3261E}
.btn-danger:hover{background:#8C1D18;border-color:#8C1D18}
.btn-mini{padding:.3rem .7rem;font-size:.8rem}
.alerte{padding:.8rem 1.1rem;border-left:3px solid var(--fuchsia);background:var(--fuchsia-clair);margin-bottom:1.5rem;border-radius:0 3px 3px 0}
.alerte.erreur{border-color:#B3261E;background:#FCE8E6}
.alerte.ok{border-color:#1E7B4D;background:#E6F4EC}
.puce{display:inline-block;padding:.15rem .55rem;border-radius:100px;font-size:.72rem;letter-spacing:.06em}
.puce-on{background:#E6F4EC;color:#1E7B4D}
.puce-off{background:#F2F2F4;color:#77778A}
.puce-promo{background:var(--fuchsia);color:#fff}
.interrupteur{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.interrupteur input{position:absolute;opacity:0}
.piste{width:38px;height:20px;border-radius:100px;background:#CFCFD8;position:relative;transition:.2s}
.piste::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.interrupteur input:checked + .piste{background:var(--fuchsia)}
.interrupteur input:checked + .piste::after{transform:translateX(18px)}
.interrupteur input:focus-visible + .piste{outline:2px solid var(--violet);outline-offset:2px}
.aide{font-size:.82rem;color:var(--texte);margin-top:.3rem}
.vignette{width:60px;height:45px;object-fit:cover;border-radius:8px;border:1px solid rgba(199,31,101,.28);background:var(--gris)}
.connexion{max-width:380px;margin:12vh auto;background:#fff;padding:2.2rem;border:1px solid var(--ligne);border-radius:4px}
.connexion .marque{color:var(--encre);padding:0 0 1.5rem}
.barre-outils{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem}
.barre-outils .grandir{flex:1}
details.bloc{border:1px solid var(--ligne);background:#fff;margin-bottom:.6rem;border-radius:3px}
details.bloc summary{padding:.75rem 1rem;cursor:pointer;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:1rem}
details.bloc summary:hover{background:var(--fuchsia-clair)}
details.bloc .corps{padding:1rem;border-top:1px solid var(--ligne)}
.rangee-off{opacity:.5}
@media print{
  .cote,.barre-outils,.btn,form,.alerte{display:none!important}
  .tete{position:static;border:0}
  .contenu{padding:0}
  .carte{border:0;box-shadow:none;break-inside:avoid}
  table{font-size:11pt}
  thead th{background:#eee!important;color:#000!important}
}

/* Garde-fou : un élément marqué hidden reste masqué, quelle que soit la règle
   qui suit. Sans cela, un calque invisible peut intercepter tous les appuis. */
[hidden]{display:none!important}

/* ======================================================================
   iPhone — le back-office doit se comporter comme une application.
   Testé pour un iPhone 16 (îlot dynamique, barre d'accueil gestuelle).
   ====================================================================== */
:root{
  --haut-sur: env(safe-area-inset-top, 0px);
  --bas-sur: env(safe-area-inset-bottom, 0px);
  --barre-h: 58px;
}
.barre-mobile,.feuille,.feuille-fond,.tete-retour{display:none}

@media (max-width: 780px){
  /* La colonne latérale disparaît : la navigation passe en bas, sous le pouce. */
  .cote{display:none}
  .admin{display:block}
  .principal{margin:0;min-height:100dvh}

  /* En-tête collant, sous l'îlot dynamique */
  .tete{
    position:sticky;top:0;z-index:40;
    padding-top:calc(.7rem + var(--haut-sur));
    padding-left:max(1rem, env(safe-area-inset-left));
    padding-right:max(1rem, env(safe-area-inset-right));
    display:flex;align-items:center;gap:.5rem;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    backdrop-filter:saturate(180%) blur(18px);
    border-bottom:.5px solid rgba(0,0,0,.12);
  }
  .tete h1{font-size:1.32rem;margin:0;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tete-retour{
    display:block;background:none;border:0;color:var(--fuchsia);
    font-size:2rem;line-height:1;width:34px;height:34px;margin-left:-8px;
    padding:0;cursor:pointer;flex:none;
  }

  .contenu{
    padding:1rem max(1rem, env(safe-area-inset-left)) calc(var(--barre-h) + var(--bas-sur) + 1.4rem)
            max(1rem, env(safe-area-inset-right));
  }
  .carte{border-radius:16px;padding:1.1rem}

  /* Barre d'onglets translucide, façon iOS */
  .barre-mobile{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding-bottom:var(--bas-sur);
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-top:.5px solid rgba(0,0,0,.14);
  }
  .barre-mobile a,.barre-mobile button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    height:var(--barre-h);border:0;background:none;cursor:pointer;
    color:#8A8A8E;text-decoration:none;font-size:.62rem;letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
  }
  .barre-mobile svg{width:25px;height:25px}
  .barre-mobile .actif{color:var(--fuchsia)}
  .barre-mobile a:active,.barre-mobile button:active{opacity:.55}

  /* Feuille « Tout », qui monte depuis le bas */
  .feuille-fond{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);
    opacity:0;pointer-events:none;transition:opacity .25s}
  .feuille-fond.ouvert{opacity:1;pointer-events:auto}
  .feuille{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;
    max-height:82dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#fff;border-radius:20px 20px 0 0;
    padding:.6rem 1rem calc(1.2rem + var(--bas-sur));
    transform:translateY(102%);pointer-events:none;
    transition:transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.22);
  }
  .feuille.ouvert{transform:translateY(0);pointer-events:auto}
  .feuille-poignee{width:38px;height:5px;border-radius:3px;background:#D8D8DC;margin:.3rem auto 1rem}
  .feuille-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem}
  .feuille-grille a{
    display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;
    padding:.95rem .4rem;border-radius:14px;background:#F4F2F5;text-decoration:none;color:var(--encre);
    font-size:.74rem;line-height:1.2;-webkit-tap-highlight-color:transparent;
  }
  .feuille-grille a:active{background:#E8E4EA;transform:scale(.96)}
  .fg-ico{font-size:1.3rem;color:var(--fuchsia)}
  .fg-sortie{background:#FDECEF!important}
  .fg-sortie .fg-ico{color:#B3261E}

  /* Zones tactiles : 44 px minimum, la règle d'Apple */
  .btn,button,select,.barre-outils a{min-height:44px}
  .btn-mini{min-height:36px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 16 px sur les champs : en dessous, Safari zoome tout seul à la saisie */
  input,select,textarea{font-size:16px!important;border-radius:12px;padding:.75rem .85rem}
  input[type=checkbox],input[type=radio]{min-height:24px;width:24px;height:24px}

  /* Confort de manipulation */
  body{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
  .btn,.barre-mobile a,.feuille-grille a{-webkit-touch-callout:none;user-select:none}
}

/* En mode installé, on gagne la place de la barre d'adresse */
@media (display-mode: standalone){
  .tete{padding-top:calc(.9rem + var(--haut-sur))}
}

/* --- Écran « Aujourd'hui », téléphone uniquement --- */
.jour{display:none}
@media (max-width: 780px){
  .grille{display:none}          /* les compteurs génériques cèdent la place */
  .jour{display:block;margin-bottom:1.4rem}
  .jour-date{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#8A8A8E;margin:0 0 .7rem}

  .jour-suivant{
    display:grid;gap:.15rem;text-decoration:none;color:#fff;
    background:linear-gradient(140deg,#161219,#2E2440 60%,#8E0F45);
    border-radius:18px;padding:1.2rem 1.3rem 1.3rem;margin-bottom:.9rem;
    box-shadow:0 10px 26px -14px rgba(199,31,101,.7);
  }
  .jour-suivant:active{transform:scale(.985)}
  .js-etiquette{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fuchsia-clair,#F2A8C8)}
  .js-heure{font-family:var(--serif,Georgia,serif);font-size:2.6rem;line-height:1.05;font-variant-numeric:tabular-nums}
  .js-quoi{font-size:1rem;line-height:1.3}
  .js-qui{font-size:.85rem;color:rgba(255,255,255,.72);margin-top:.15rem}
  .jour-vide{background:#F4F2F5;border-radius:16px;padding:1.1rem 1.2rem;margin:0 0 .9rem;color:#5A5A5E;font-size:.95rem}

  .jour-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.9rem}
  .jour-chiffres a{
    display:flex;flex-direction:column;align-items:center;gap:.2rem;text-decoration:none;
    background:#fff;border:.5px solid rgba(0,0,0,.1);border-radius:14px;padding:.75rem .3rem;
    color:var(--encre);
  }
  .jour-chiffres strong{font-family:var(--serif,Georgia,serif);font-size:1.35rem;font-weight:400;line-height:1;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .jour-chiffres span{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#8A8A8E;text-align:center}
  .jour-chiffres a:active{background:#F4F2F5}

  .jour-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .ja{
    display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--encre);
    background:#fff;border:.5px solid rgba(0,0,0,.1);border-radius:14px;
    padding:.85rem .9rem;font-size:.86rem;line-height:1.2;min-height:52px;
  }
  .ja span{color:var(--fuchsia);font-size:1.15rem;width:22px;text-align:center;flex:none}
  .ja:active{background:#F4F2F5;transform:scale(.98)}
}

/* L'en-tête est collant : sans cette marge, une ancre place le titre visé dessous. */
[id]{scroll-margin-top:calc(4.6rem + env(safe-area-inset-top, 0px))}
.cible-arrivee{animation:surligne 1.6s ease-out 1}
@keyframes surligne{
  0%{box-shadow:0 0 0 3px rgba(199,31,101,.55)}
  100%{box-shadow:0 0 0 3px rgba(199,31,101,0)}
}


/* Mouvement réduit : on respecte le réglage d'accessibilité du téléphone. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}