:root {
    /* La couleur qui distingue ce site de celui de la pharmacie : logo, écran
       de connexion, en-tête du menu. Rien d'autre — le bleu et le vert des
       créneaux gardent leur sens, ils sont les mêmes dans les deux plannings. */
    --rose: #d6336c;
    --rose-fonce: #a61e4d;
    --rose-clair: #f06595;

    --blue: #3b5bdb;
    --blue-light: #eef2ff;
    --blue-mid: #748ffc;
    --green: #2f9e44;
    --green-light: #ebfbee;
    --orange: #e8590c;
    --orange-light: #fff4e6;
    --red: #c92a2a;
    --red-light: #fff5f5;
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --sidebar-w: 220px;
    --header-h: 60px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: var(--gray-800);
    background: var(--gray-50);
    display: flex;
    height: 100vh;
    overflow: hidden;
  }

  /* ══════════════════════════════════════
     ÉCRAN DE CONNEXION
  ══════════════════════════════════════ */
  #login-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--rose-fonce) 0%, var(--rose) 50%, var(--rose-clair) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .login-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 44px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 32px 80px rgba(0,0,0,.3);
  }

  .login-logo {
    text-align: center;
    margin-bottom: 28px;
  }

  .login-logo .pill {
    display: inline-block;
    font-size: 32px;
    margin-bottom: 10px;
  }

  .login-logo h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-900);
  }

  .login-logo p {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
  }

  .login-form-group {
    margin-bottom: 16px;
  }

  .login-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
  }

  /* Champ mot de passe avec son œil */
  .champ-mdp { position: relative; }
  .champ-mdp input { padding-right: 46px !important; }
  .oeil-mdp {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; color: var(--gray-500);
    display: flex; padding: 8px; border-radius: 8px;
    transition: color .12s, background .12s;
  }
  .oeil-mdp svg {
    width: 19px; height: 19px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  .oeil-mdp:hover { color: var(--gray-700); background: var(--gray-100); }
  .oeil-mdp:focus-visible { color: var(--gray-700); outline: 2px solid var(--blue); outline-offset: 1px; }

  .login-form-group select,
  .login-form-group input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    font-size: 14px;
    color: var(--gray-800);
    background: #fff;
    outline: none;
    font-family: inherit;
    transition: border .15s, box-shadow .15s;
  }

  .login-form-group select:focus,
  .login-form-group input:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(214,51,108,.14);
  }

  .login-btn {
    width: 100%;
    background: var(--rose);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s, transform .1s;
    font-family: inherit;
  }

  .login-btn:hover { background: var(--rose-fonce); transform: translateY(-1px); }
  .login-btn:active { transform: translateY(0); }

  .login-error {
    background: var(--red-light);
    color: var(--red);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
    display: none;
    text-align: center;
  }

  .login-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 11px;
    color: var(--gray-400);
  }

  /* ══════════════════════════════════════
     BANDEAU LECTURE SEULE
  ══════════════════════════════════════ */
  #readonly-banner {
    display: none;
    background: linear-gradient(90deg, #fff3cd, #ffe8a1);
    border-bottom: 1px solid #ffc107;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #856404;
    text-align: center;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════
     SIDEBAR
  ══════════════════════════════════════ */
  #sidebar {
    width: var(--sidebar-w);
    background: #fff;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
  }

  .sidebar-logo {
    padding: 18px 20px;
    border-bottom: 1px solid var(--gray-200);
  }

  .sidebar-logo .logo-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rose);
    line-height: 1.2;
  }

  .sidebar-logo .logo-sub {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
  }

  .sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
  }

  .nav-section-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 10px 20px 4px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    cursor: pointer;
    color: var(--gray-700);
    border-left: 3px solid transparent;
    transition: background .1s;
    font-size: 13px;
    user-select: none;
  }

  .nav-item:hover { background: var(--gray-50); }

  .nav-item.active {
    background: var(--blue-light);
    color: var(--blue);
    border-left-color: var(--blue);
    font-weight: 600;
  }

  /* Caché pour les employés */
  .nav-item.admin-only { display: none; }

  .nav-item .nav-icon { font-size: 16px; flex-shrink: 0; }

  .sidebar-user {
    padding: 14px 20px;
    border-top: 1px solid var(--gray-200);
  }

  .sidebar-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
  }

  .user-info .user-name { font-size: 12px; font-weight: 600; }
  .user-info .user-role-badge {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 100px;
    display: inline-block;
    margin-top: 2px;
    font-weight: 600;
  }

  .role-admin { background: #dbe4ff; color: var(--blue); }
  .role-responsable { background: #f3f0ff; color: #7048e8; }
  .role-employee { background: var(--gray-100); color: var(--gray-600); }

  .logout-btn {
    width: 100%;
    background: var(--gray-100);
    border: none;
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
  }

  .logout-btn:hover { background: var(--gray-200); color: var(--red); }

  /* ══════════════════════════════════════
     MAIN
  ══════════════════════════════════════ */
  #main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #topbar {
    height: var(--header-h);
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    flex-shrink: 0;
  }

  .topbar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    flex: 1;
  }

  .week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 4px 8px;
  }

  .week-nav button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--gray-700);
    font-size: 14px;
    transition: background .15s;
  }

  .week-nav button:hover { background: var(--gray-200); }

  .week-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    min-width: 180px;
    text-align: center;
  }

  /* Retour à la semaine en cours, à côté des flèches. */
  .btn-aujourdhui {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--blue);
    cursor: pointer; flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .btn-aujourdhui:hover:not(:disabled) { background: var(--blue-light); }
  .btn-aujourdhui:disabled { color: var(--gray-400); cursor: default; }

  .view-tabs {
    display: flex;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }

  .view-tab {
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    transition: all .15s;
    border: none;
    background: none;
  }

  .view-tab.active {
    background: #fff;
    color: var(--blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
  }

  .btn-primary {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit;
  }

  .btn-primary:hover { background: #2f4ec4; }

  /* ══════════════════════════════════════
     CONTENT
  ══════════════════════════════════════ */
  #content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
  }

  .planning-wrapper {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
  }

  .planning-header {
    display: grid;
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .ph-employee { padding: 10px 16px; font-weight: 600; font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; }

  .ph-day {
    padding: 8px 4px;
    text-align: center;
    border-left: 1px solid var(--gray-200);
  }

  .ph-day .day-name { font-size: 10px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; }
  .ph-day .day-num { font-size: 18px; font-weight: 700; color: var(--gray-800); margin-top: 2px; }
  .ph-day.today .day-num {
    background: var(--blue);
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 14px;
  }

  .emp-row {
    display: grid;
    border-bottom: 1px solid var(--gray-200);
    min-height: 68px;
    transition: background .1s;
  }

  .emp-row:last-child { border-bottom: none; }
  .emp-row:hover { background: var(--gray-50); }

  /* Surlignage de l'employé connecté */
  .emp-row.current-user-row {
    background: #f0f4ff;
  }
  .emp-row.current-user-row:hover { background: #e6ecff; }

  .emp-info {
    padding: 10px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-right: 1px solid var(--gray-200);
  }

  .emp-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: #fff;
    flex-shrink: 0;
  }

  .emp-details { flex: 1; }
  .emp-name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
  .emp-role-text { font-size: 10px; color: var(--gray-500); margin-top: 1px; }
  .emp-hours { font-size: 10px; color: var(--blue); font-weight: 600; margin-top: 4px; }

  .day-cell {
    padding: 6px 4px;
    border-left: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: stretch;
    min-height: 68px;
    transition: background .1s;
  }

  /* Cellule cliquable uniquement pour admin/responsable */
  .day-cell.editable { cursor: pointer; }
  .day-cell.editable:hover { background: rgba(59,91,219,.04); }

  .shift-block {
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: transform .1s, box-shadow .1s;
    user-select: none;
    position: relative;
  }

  .shift-block.editable-shift { cursor: pointer; }
  .shift-block.editable-shift:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.12); }

  /* Créneau ajouté manuellement (hors planning initial) */
  .shift-manual { border: 1.5px dashed currentColor !important; }
  .shift-manual::after { content: '✚'; font-size: 8px; position: absolute; top: 2px; right: 3px; opacity: .55; }

  /* Créneau annulé (barré, conservé pour mémoire visuelle) */
  .shift-cancelled { background: #e9ecef !important; color: #868e96 !important; opacity: .75; }
  .shift-cancelled .shift-time,
  .shift-cancelled .shift-label { text-decoration: line-through; }

  .shift-block .shift-time { font-size: 10px; opacity: .85; }
  .shift-block .shift-label { font-size: 10px; font-weight: 700; }

  /* Journée en deux demi-journées : matin | après-midi */
  .demi-jour { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-items: stretch; }
  .demi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .demi-vide {
    border-radius: 5px; min-height: 26px;
    background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--gray-200) 5px, var(--gray-200) 6px);
    opacity: .8;
  }
  .journee-entiere { grid-column: 1 / -1; }
  /* Créneau en supplément du planning de base — des heures en plus. */
  .shift-supp { background: #ffdeeb; color: #a61e4d; }
  /* Journée obtenue par échange : ni en plus, ni en moins. */
  .shift-echange { background: #e5dbff; color: #5f3dc4; }
  /* Avec qui : la couleur dit qu'il y a eu échange, cette ligne dit avec qui. */
  .mention-echange {
    margin-top: 3px; text-align: center;
    font-size: 9px; font-weight: 700; line-height: 1.25;
    color: #5f3dc4; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .shift-matin { background: #dbe4ff; color: #3b5bdb; }
  .shift-apm { background: #d3f9d8; color: #2f9e44; }
  .shift-repos { background: var(--gray-100); color: var(--gray-500); font-style: italic; }
  .shift-conge { background: #ffd8d8; color: var(--red); }
  .shift-arret { background: #ffe0cc; color: var(--orange); }
  .shift-abs { background: #ffe0cc; color: var(--orange); }

  /* Fond de cellule selon statut de la journée */
  .day-cell.cell-conge   { background: #fff5f5; }
  .day-cell.cell-arret   { background: #fff8f0; }
  .day-cell.cell-ferie   { background: #fff0f6; }

  /* En-tête jour férié */
  .ph-day.ferie { background: #ffd8d8; }
  .ph-day.ferie .day-name { color: var(--red); }
  .ph-day.ferie .day-num  { color: var(--red); }
  .ferie-label { font-size: 8px; color: var(--red); font-weight: 700; text-align:center; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

  /* Bouton rapide modal */
  .btn-quick {
    padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: opacity .15s;
  }
  .btn-quick:hover { opacity: .8; }

  /* Badge créneau dans modal */
  .modal-shift-badge {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-radius: 6px; margin-bottom: 5px; font-size: 12px; font-weight: 600;
  }
  .modal-shift-badge .del-btn,
  .modal-shift-badge .modif-btn {
    background: none; border: none; cursor: pointer; font-size: 14px; color: #aaa; padding: 0 2px;
    line-height: 1;
  }
  .modal-shift-badge .del-btn:hover { color: var(--red); }
  .modal-shift-badge .modif-btn:hover { color: var(--blue); }
  .modal-shift-badge .badge-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  /* Le créneau qu'on est en train de modifier. */
  .modal-shift-badge.en-edition { outline: 2px solid var(--blue); outline-offset: 1px; }

  /* Résumé de la semaine, en tête du planning : combien de personnes sont là.
     Le « / » sépare le matin de l'après-midi — l'écrire sous chaque case
     n'apprenait rien. */
  .resume-row {
    display: grid;
    background: var(--blue-light);
    border-bottom: 2px solid var(--blue-mid);
  }

  .resume-label {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-right: 1px solid var(--blue-mid);
    display: flex;
    align-items: center;
  }

  .resume-day {
    padding: 5px 4px;
    border-left: 1px solid var(--blue-mid);
    text-align: center;
    line-height: 1.4;
  }

  .resume-day .sep { color: var(--blue-mid); font-weight: 500; margin: 0 2px; }
  .resume-effectif  { font-size: 11px; font-weight: 700; color: var(--blue); }
  .cmd-skip { font-size: 11px; color: var(--gray-400); }

  /* ─── Le planning de base : trois semaines, une ligne par personne ─── */
  .base-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .base-table th, .base-table td {
    border: 1px solid var(--gray-200); padding: 5px 6px; text-align: left;
    font-size: 12px; vertical-align: middle;
  }
  .base-table thead th {
    background: var(--gray-50); font-size: 11px; font-weight: 700;
    color: var(--gray-600); text-transform: uppercase; letter-spacing: .3px;
  }
  /* Un prénom se lit en toutes lettres : la mise en majuscules des en-têtes de
     tableau ne vaut pas pour la colonne des personnes. */
  .base-table tbody th {
    font-weight: 700; white-space: nowrap;
    text-transform: none; letter-spacing: 0;
    font-size: 12px; color: var(--gray-800);
  }
  .base-pastille {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; color: #fff;
    font-size: 9px; font-weight: 700; margin-right: 4px; vertical-align: middle;
  }
  .base-choix {
    width: 100%; font-family: inherit; font-size: 12px; padding: 3px 4px;
    border: 1px solid var(--gray-300); border-radius: 5px; background: #fff;
  }
  .base-choix:disabled { background: var(--gray-100); color: var(--gray-700); opacity: 1; }
  .equipe-champ {
    width: 100%; font-family: inherit; font-size: 12px; padding: 3px 5px;
    border: 1px solid var(--gray-300); border-radius: 5px; background: #fff;
  }
  .equipe-champ:disabled { background: var(--gray-100); color: var(--gray-700); opacity: 1; }
  /* Une personne qui n'est pas (ou plus) dans l'équipe aujourd'hui : la ligne
     reste lisible, mais dit qu'elle ne figure pas au planning en ce moment. */
  /* Le « h » du contrat reste collé à son champ. */
  .equipe-contrat { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
  .equipe-contrat .equipe-champ { width: auto; flex: 1; min-width: 0; }

  .equipe-hors { opacity: .55; }
  .equipe-hors th { font-style: italic; }

  .base-total { text-align: right; font-weight: 700; white-space: nowrap; }
  /* Une ligne qui ne tombe pas sur son contrat : on le signale sans l'interdire. */
  .base-total-ecart { color: var(--orange); }

  .legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--gray-700);
  }

  /* La pastille de la légende doit se lire comme un créneau du planning : un
     fond pâle ET une encre colorée. Sans le liséré, elle ne montrait que le
     fond, et paraissait délavée à côté de la case qu'elle désigne. */
  .legend-dot {
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1.5px solid currentColor;
    flex-shrink: 0;
    position: relative;
  }
  /* Les heures en plus portent un liséré pointillé dans le planning : la
     légende le porte aussi, sans quoi elle en donnerait une idée fausse. */
  .legend-dot.shift-manual { border-style: dashed; }
  .legend-dot.shift-manual::after { content: none; }
  /* Un créneau annulé est barré : la pastille l'est aussi. */
  .legend-dot.shift-cancelled::after {
    content: ''; position: absolute; left: -1px; right: -1px; top: 50%;
    border-top: 1.5px solid currentColor;
  }

  .stats-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }

  .stat-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 14px 18px;
    flex: 1;
    min-width: 0;
  }

  .stat-label { font-size: 11px; color: var(--gray-500); font-weight: 500; }
  .stat-value { font-size: 22px; font-weight: 800; color: var(--gray-900); margin-top: 4px; }
  .stat-value span { font-size: 12px; font-weight: 500; color: var(--gray-500); margin-left: 3px; }
  .stat-sub { font-size: 10px; color: var(--green); margin-top: 2px; }

  .section-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
  }

  .badge-blue { background: var(--blue-light); color: var(--blue); }
  .badge-green { background: var(--green-light); color: var(--green); }
  .badge-orange { background: var(--orange-light); color: var(--orange); }
  .badge-red { background: var(--red-light); color: var(--red); }

  table { width: 100%; border-collapse: collapse; }

  th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-200);
  }

  td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 12px;
    color: var(--gray-800);
    vertical-align: middle;
  }

  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--gray-50); }

  .action-btns { display: flex; gap: 6px; }

  .btn-sm {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s;
    font-family: inherit;
  }

  .btn-accept { background: var(--green-light); color: var(--green); }
  .btn-accept:hover { background: #b2f2bb; }
  .btn-refuse { background: var(--red-light); color: var(--red); }
  .btn-refuse:hover { background: #ffc9c9; }
  /* Les champs du décompte des congés : même allure ouverts ou fermés, pour
     qu'on lise les chiffres aussi bien dans les deux cas. */
  .cp-champ {
    width: 80px; text-align: center; font-size: 13px; padding: 5px;
    border: 1px solid var(--gray-300); border-radius: 6px;
    font-family: inherit;
  }
  .cp-champ:disabled {
    background: var(--gray-100); color: var(--gray-700);
    cursor: default; opacity: 1;   /* Safari grise sinon le texte */
  }

  .btn-modifier { background: var(--gray-100); color: var(--gray-700); }
  .btn-modifier:hover { background: var(--gray-200); }

  /* Semaine hors de la période fabriquée : on explique le vide plutôt que
     de laisser croire à une panne. */
  .bandeau-horizon {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff9db; border: 1px solid #ffe066; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 14px;
    font-size: 13px; line-height: 1.5; color: #7a5b00;
  }
  .bandeau-horizon .bh-icone { font-size: 17px; line-height: 1.2; }

  /* Sous la légende : jusqu'où le planning est fabriqué, et de quoi le
     repousser. Les administrateurs seuls la voient — eux seuls peuvent
     l'écrire en base. */
  .ligne-horizon {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 10px; padding: 9px 16px;
    background: #fff; border: 1px solid var(--gray-200); border-radius: 8px;
    font-size: 13px; color: var(--gray-600);
  }
  .ligne-horizon:empty { display: none; }   /* tant que rien n'y est écrit */
  .ligne-horizon strong { color: var(--gray-800); }
  .ligne-horizon button {
    background: var(--gray-100); color: var(--gray-700);
    border: none; border-radius: 6px; padding: 6px 13px;
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  .ligne-horizon button:hover { background: var(--gray-200); }

  /* ─── IMPRESSION ─────────────────────────────────────────────────
     À l'écran, la zone d'impression n'existe pas. Sur le papier, elle
     est au contraire la seule chose qui reste : tous les autres enfants
     directs de <body> — menu, barre du haut, fenêtres — disparaissent.
     Passer par « body > * » évite d'avoir à les énumérer, et de casser
     l'impression le jour où l'un d'eux change de nom. */
  #zone-impression { display: none; }

  @media print {
    @page { size: A4 landscape; margin: 10mm; }

    body > * { display: none !important; }
    body > #zone-impression { display: block !important; }

    body { background: #fff; color: #000; }

    /* Les semaines s'enchaînent : autant qu'il en tient par page. Aucune
       n'est jamais coupée en deux, c'est la seule contrainte. */
    .feuille { page-break-inside: avoid; break-inside: avoid; margin-bottom: 5mm; }
    .feuille:last-child { margin-bottom: 0; }

    /* Le nom de la pharmacie et la date ne figurent qu'une fois, en tête du
       document : répétés à chaque semaine, ils mangeraient la place gagnée. */
    .impr-tete-document {
      display: flex; justify-content: space-between; align-items: baseline;
      border-bottom: 1.5px solid #000; padding-bottom: 3px; margin-bottom: 6px;
    }
    .impr-tete-document .impr-titre { font-size: 11pt; font-weight: 800; }
    .impr-tete-document .impr-date  { font-size: 8pt; color: #555; }

    .impr-entete {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 3px;
    }
    .impr-periode { font-size: 10.5pt; font-weight: 800; }
    .impr-note    { font-size: 8pt; color: #444; }

    .impr-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .impr-table th, .impr-table td {
      border: 1px solid #999; padding: 1px 4px;
      font-size: 8pt; line-height: 1.2; vertical-align: top; text-align: left;
      color: #000; text-transform: none; letter-spacing: 0;
    }
    .impr-table thead th { background: #eee !important; text-align: center; font-size: 8pt; }
    .impr-table thead th .impr-ferie { display: block; font-weight: 400; font-size: 7pt; }
    .impr-table tbody th { width: 13%; font-weight: 700; }
    .impr-table tr { page-break-inside: avoid; }

    .impr-creneau { display: block; }
    .impr-heure { font-weight: 700; }
    .impr-libelle { color: #333; }
    .impr-vide { color: #aaa; }
    .impr-mention { font-style: italic; color: #555; font-size: 7pt; }

    /* Les aplats de couleur ne s'impriment pas par défaut ; ces fonds très
       clairs restent lisibles même en noir et blanc. */
    .impr-absence { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }

  .bilan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .emp-bilan-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
  }

  .emp-bilan-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
  }

  .emp-bilan-header .emp-name { font-size: 14px; font-weight: 700; }
  .emp-bilan-header .emp-contract { font-size: 11px; color: var(--gray-500); }

  .bilan-body { padding: 14px 16px; }

  .bilan-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 12px;
  }

  .bilan-row:last-child { border-bottom: none; }
  .bilan-label { color: var(--gray-600); }
  .bilan-val { font-weight: 700; color: var(--gray-900); }
  .bilan-val.positive { color: var(--orange); }
  .bilan-val.green { color: var(--green); }

  /* ── MODAL ── */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }

  .modal-overlay.open { display: flex; }

  .modal {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    width: 440px;
    max-width: 95vw;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
  }

  .modal h2 { font-size: 18px; font-weight: 800; margin-bottom: 20px; color: var(--gray-900); }

  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--gray-600); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 7px;
    font-size: 13px;
    color: var(--gray-800);
    background: #fff;
    outline: none;
    transition: border .15s;
    font-family: inherit;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,91,219,.1); }

  .modal-footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }

  .btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }

  .btn-secondary:hover { background: var(--gray-200); }

  .inner-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
  }

  .inner-tab {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .15s;
  }

  .inner-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
  .inner-tab:hover { color: var(--gray-700); }

  .inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
  .inline-form .form-group { margin-bottom: 0; }

  .progress-bar-bg { background: var(--gray-200); border-radius: 100px; height: 6px; overflow: hidden; }
  .progress-bar-fill { height: 100%; border-radius: 100px; background: var(--blue); }

  .emp-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .emp-mini-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 14px 16px;
  }

  .emp-mini-card .em-label { font-size: 10px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
  .emp-mini-card .em-val { font-size: 20px; font-weight: 800; margin-top: 4px; color: var(--gray-900); }
  .emp-mini-card .em-sub { font-size: 10px; color: var(--gray-500); margin-top: 2px; }

  .planning-header,
  .emp-row,
  .resume-row {
    grid-template-columns: var(--grid-cols, 180px repeat(6, 1fr));
  }

  .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--gray-900);
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    z-index: 200;
    transform: translateY(100px);
    opacity: 0;
    transition: all .3s;
  }

  .toast.show { transform: translateY(0); opacity: 1; }

  /* En-tête de vue : un titre et sa navigation. */
  .entete-vue { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .entete-titre { font-size: 16px; font-weight: 800; flex: 1; }

  /* Deux champs côte à côte — une seule colonne sur téléphone. */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Bouton d'ouverture du menu : téléphone uniquement. */
  .btn-menu {
    display: none;
    background: none; border: 0; cursor: pointer;
    font-size: 21px; line-height: 1; color: var(--gray-700);
    padding: 7px 9px; border-radius: 8px; flex-shrink: 0;
  }
  .btn-menu:hover { background: var(--gray-100); }

  /* Voile sombre derrière le menu ouvert. */
  #voile-menu { display: none; }


  /* ══════════════════════════════════════
     ÉCRANS ÉTROITS — TABLETTES, PETITS PORTABLES

     Le planning de la semaine réclame environ 840 pixels. En dessous, les
     cases se chevauchaient et la colonne des noms était rognée, sans que
     rien ne le signale. La semaine défile désormais au lieu d'être coupée.
  ══════════════════════════════════════ */
  @media (max-width: 1100px) {

    /* Les boutons passent à la ligne au lieu de sortir de l'écran. */
    #topbar {
      height: auto; min-height: var(--header-h);
      flex-wrap: wrap; padding: 8px 16px;
    }

    .stats-bar { flex-wrap: wrap; }
    .stat-card { flex: 1 1 180px; }

    .planning-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .planning-header,
    .emp-row,
    .resume-row { min-width: 840px; }
    /* La colonne des noms reste visible pendant qu'on fait défiler. */
    .ph-employee,
    .emp-info,
    .resume-label { position: sticky; left: 0; z-index: 4; }
    .ph-employee  { background: var(--gray-50); }
    .emp-info     { background: #fff; }
    .resume-label { background: var(--blue-light); }
    .emp-row.current-user-row .emp-info,
    /* L'en-tête ne peut plus rester collé en haut dès que le cadre défile. */
    .planning-header { position: static; }

    #month-calendar table { min-width: 780px; }

    .emp-cards-grid  { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
    #emp-cards-list  { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
    .bilan-grid      { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  }

  /* ══════════════════════════════════════
     TÉLÉPHONES ET PETITES TABLETTES

     L'application est conçue pour un écran de poste. Sur un téléphone, la
     largeur manque : le menu se range sur le côté, les tableaux se lisent
     en fiches, et la semaine défile horizontalement.
  ══════════════════════════════════════ */
  /* Le menu se range dès que l'écran est étroit — ou bas, comme un
     téléphone couché, où il ne tiendrait de toute façon pas en hauteur. */
  @media (max-width: 760px), (orientation: landscape) and (max-height: 560px) {

    /* Sur iOS la barre d'adresse mange une partie de 100vh. */
    body { height: 100dvh; }

    #sidebar {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: 265px; max-width: 84vw;
      transform: translateX(-100%);
      transition: transform .22s ease;
      box-shadow: 0 0 40px rgba(0,0,0,.18);
      z-index: 150;
      padding-bottom: env(safe-area-inset-bottom);
    }
    #sidebar.ouvert { transform: none; }

    #voile-menu {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 140;
    }
    #voile-menu.visible { display: block; }

    .btn-menu { display: flex; }
    /* Il ne reste que l'icône : les mots ne tiennent pas. */
    .mot { display: none; }

    /* Cibles de doigt : on ne vise pas au pixel près sur un téléphone. */
    .nav-item { padding-top: 11px; padding-bottom: 11px; font-size: 14px; }
    .logout-btn { padding-top: 11px; padding-bottom: 11px; }
  }

  @media (max-width: 760px) {

    /* ── Barre du haut : deux rangées ── */
    #topbar {
      min-height: 52px;
      padding: 8px 12px;
      gap: 8px;
      padding-top: calc(8px + env(safe-area-inset-top));
    }
    /* Coupe la ligne : le titre et les boutons en haut, la navigation en dessous. */
    #topbar::after { content: ''; flex-basis: 100%; order: 4; height: 0; }
    .topbar-title {
      font-size: 15px; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .week-nav { order: 5; flex: 1 1 auto; justify-content: space-between; }
    .week-label { min-width: 0; flex: 1; font-size: 12px; }
    /* Il n'apparaît que lorsqu'il sert — c'est-à-dire quand on s'est éloigné
       de la semaine en cours. La barre du haut garde ainsi deux rangées. */
    .btn-aujourdhui { order: 5; padding: 7px 10px; }
    .btn-aujourdhui:disabled { display: none; }
    .view-tabs { order: 6; }
    .view-tab { padding: 6px 12px; }
    #btn-absence, #btn-add-shift { padding: 9px 12px; font-size: 15px; line-height: 1; }

    #readonly-banner { font-size: 11px; padding: 7px 12px; text-align: left; }
    #content { padding: 12px; }

    /* ── Chiffres de la semaine : deux par ligne ── */
    .stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card { padding: 11px 13px; }
    .stat-value { font-size: 19px; }

    /* ── Planning : deux journées à l'écran, la sienne et le lendemain ──
       La largeur d'une colonne se déduit de celle de l'écran : deux journées
       entières, plus quelques pixels de la troisième pour qu'on devine
       qu'il y a une suite. */
    .planning-header,
    .emp-row,
    .resume-row {
      --col-nom: 104px;
      --col-jour: max(96px, calc((100vw - var(--col-nom) - 38px) / 2));
      grid-template-columns: var(--col-nom) repeat(6, var(--col-jour));
      width: max-content;
      min-width: 100%;
    }
    .emp-info     { padding: 9px 8px; gap: 6px; }
    .resume-label { padding: 8px 8px; font-size: 10px; }
    .emp-avatar { width: 22px; height: 22px; font-size: 9px; }
    .emp-name { font-size: 12px; }
    .emp-role-text { display: none; }
    .emp-hours { font-size: 9px; }

    .legend { gap: 10px 14px; padding: 9px 12px; }

    /* Les onglets défilent plutôt que de s'empiler sur trois lignes. */
    .inner-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .inner-tab { white-space: nowrap; flex-shrink: 0; padding: 10px 14px; }
    .entete-vue { flex-wrap: wrap; }
    .entete-titre { flex: 1 1 100%; font-size: 15px; }

    /* ── Tableaux → fiches empilées ──
       Cinq colonnes sur 390 pixels donnent des mots coupés. Chaque ligne
       devient une petite fiche où chaque valeur porte son intitulé. */
    .section-card { padding: 14px; }
    .section-card table,
    .section-card tbody,
    .section-card tr,
    .section-card td { display: block; width: 100%; }
    .section-card thead { display: none; }
    .section-card tr {
      border: 1px solid var(--gray-200);
      border-radius: 10px;
      padding: 4px 12px;
      margin-bottom: 10px;
    }
    .section-card tr:last-child { margin-bottom: 0; }
    .section-card tr:hover td { background: none; }
    .section-card td {
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px; text-align: right;
      padding: 8px 0;
      border-bottom: 1px solid var(--gray-100);
      font-size: 13px;
    }
    .section-card td:last-child { border-bottom: none; }
    .section-card td::before {
      content: attr(data-libelle);
      font-size: 10px; font-weight: 700; letter-spacing: .4px;
      text-transform: uppercase; color: var(--gray-500);
      text-align: left; flex-shrink: 0;
    }
    /* Ligne « aucune demande » : pas de fiche, pas d'intitulé. */
    .section-card tr:has(td[colspan]) { border: none; padding: 0; }
    .section-card td[colspan] { display: block; text-align: center; }
    .section-card td[colspan]::before { content: none; }
    /* La même explication sous chaque salarié : une fois suffit, elle est
       déjà donnée en tête de section. */
    .section-card td[data-libelle="Aide"] { display: none; }
    .section-card td[colspan] ~ td { display: none; }
    .action-btns { flex-wrap: wrap; justify-content: flex-end; }
    .btn-sm { padding: 7px 14px; font-size: 12px; }
    .section-card td input { max-width: 120px; }
    .modal-shift-badge .del-btn,
    .modal-shift-badge .modif-btn { padding: 6px 8px; font-size: 16px; }

    /* ── Fiches et bilans : une colonne ── */
    .emp-cards-grid,
    .bilan-grid { grid-template-columns: 1fr; }
    #emp-cards-list { grid-template-columns: 1fr !important; }
    .duo { grid-template-columns: 1fr; }

    /* ── Fenêtres : elles montent du bas, comme sur téléphone ── */
    .modal-overlay { align-items: flex-end; }
    .modal {
      width: 100% !important; max-width: 100% !important;
      border-radius: 16px 16px 0 0;
      padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
      max-height: 92dvh; overflow-y: auto;
    }
    .modal-footer { gap: 8px; flex-wrap: wrap; justify-content: stretch; }
    .modal-footer button {
      flex: 1 1 auto; min-width: 44%;
      padding-top: 11px; padding-bottom: 11px;
    }
    .heures-prevues { display: none; }
    .inline-form { gap: 8px; }
    .inline-form .form-group { flex: 1 1 100%; }

    /* 16 pixels : en dessous, iOS zoome tout seul à la saisie. */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .login-form-group input,
    .login-form-group select { font-size: 16px; }

    .toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); text-align: center; }
  }


  /* ══════════════════════════════════════
     TÉLÉPHONE COUCHÉ

     La largeur ne manque plus, la hauteur si : 390 pixels en tout. Une barre
     du haut sur deux rangées et quatre cartes de chiffres mangeaient les deux
     tiers de l'écran, et il ne restait presque rien du planning. Tout se
     resserre, et la semaine entière tient enfin dans la largeur.
  ══════════════════════════════════════ */
  @media (orientation: landscape) and (max-height: 560px) {

    /* Tout sur une seule ligne : plus de coupure forcée. */
    #topbar::after { content: none; }
    #topbar {
      min-height: 46px;
      padding: 6px calc(12px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left));
      padding-top: calc(6px + env(safe-area-inset-top));
      gap: 8px;
    }
    .topbar-title { font-size: 14px; }
    .week-nav { order: 0; flex: 0 1 auto; }
    .view-tabs { order: 0; }
    .week-label { min-width: 0; flex: 0 1 auto; font-size: 12px; }
    .view-tab { padding: 5px 10px; font-size: 11px; }
    #btn-absence, #btn-add-shift { padding: 8px 10px; font-size: 14px; }

    #readonly-banner { padding: 5px 12px; font-size: 10px; }
    #content {
      padding: 10px calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));
    }

    /* Les chiffres de la semaine sur une seule ligne basse. */
    .stats-bar { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
    .stat-card { flex: 1 1 0; min-width: 0; padding: 7px 10px; }
    .stat-label { font-size: 10px; }
    .stat-value { font-size: 16px; }
    .stat-sub { display: none; }

    /* La semaine entière tient dans la largeur d'un téléphone couché. */
    .planning-header,
    .emp-row,
    .resume-row {
      grid-template-columns: 118px repeat(6, minmax(110px, 1fr));
      width: auto;
      min-width: 778px;
    }

    /* Lignes plus basses : on en voit quatre au lieu de deux. Le métier et
       les heures prévues s'effacent — ils débordaient de la colonne et
       ajoutaient deux lignes à chaque personne. */
    .emp-row { min-height: 54px; }
    .day-cell { min-height: 54px; padding: 4px 3px; }
    .emp-info { padding: 7px 9px; gap: 7px; }
    .emp-avatar { width: 26px; height: 26px; font-size: 10px; }
    .emp-name { font-size: 12px; }
    .emp-role-text { display: none; }
    .emp-hours { font-size: 9px; }
    .heures-prevues { display: none; }

    /* La légende reprendra sa place une fois le téléphone redressé. */
    .legend { display: none; }
    .ligne-horizon { display: none; }

    /* Le menu doit tenir dans 390 pixels de haut, sans avoir à le faire
       défiler pour atteindre la déconnexion. Les intertitres s'effacent :
       six rubriques se lisent très bien sans être groupées. */
    .sidebar-logo { padding: 9px 16px; }
    .sidebar-logo .logo-sub { display: none; }
    .nav-section-title { display: none; }
    .nav-item { padding-top: 7px; padding-bottom: 7px; }
    .sidebar-user { padding: 9px 16px; }
    .sidebar-user-row { margin-bottom: 7px; }
    .logout-btn { padding-top: 8px; padding-bottom: 8px; }

    /* Pas la place pour une fenêtre qui monte du bas. */
    .modal-overlay { align-items: center; }
    .modal {
      width: 92% !important; max-width: 560px !important;
      border-radius: 14px;
      padding: 16px 18px;
      max-height: 88dvh;
    }
    .duo { grid-template-columns: 1fr 1fr; }
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Rotation du voile de chargement. */
@keyframes spin { to { transform: rotate(360deg); } }