/* ARBITRAGE D'ARNAUD DU 12/10/2026 — la protection de ce fichier est
   levee pour les SEULES corrections mesurees : cibles tactiles, ecarts,
   contrastes, traits d'icones, zones sures, debordements. Aucune couleur
   de decor, aucune disposition, aucun degrade, aucun fond n'est touche :
   le rendu ne change pas, les cibles grossissent.

   CE QUI A ETE MESURE, au banc de rendu (premiere execution des 99 tests
   de rendu du depot — ils n'avaient jamais tourne, faute de navigateur
   installable sur le poste d'Arnaud) :
     4 boutons d'en-tete a 34x34 px, separes de 4,0 px
     seuils : 44x44 px (Apple HIG) et 12 px entre cibles
   Trois cibles de 34 px a 4 px l'une de l'autre, c'est une erreur de tap
   sur deux — une part directe de « rien n'est utilisable ».

   POURQUOI C'ETAIT 34 : l'en-tete des icones est redefini SIX FOIS dans
   ce fichier, en !important, a 38, 36 puis 34 px, chaque correctif
   empile sur le precedent. C'est le dernier qui gagnait. Les six sont
   ramenes a une seule valeur ici (44 px, gap 12) — §5.8 : une source,
   pas six.
*/
/* ========================================================================== 
   MyCockpit — Agenda mobile
   Recalage sur le mockup premium validé — 08/10/2026
   DOM réel conservé. JS conservé. Swipe conservé.
   ========================================================================== */

@media (max-width:767px), (width >= 768px) and (pointer:fine) {

  /* ===== 0. TOKENS ======================================================= */
  #mainView {
    --agm-bg:#050c17;
    --agm-front:#0b1726;
    --agm-front-opaque:#0a1625;
    --agm-text:#f4f1ea;
    --agm-soft:#9ba8b8;
    --agm-muted:#748298;
    --agm-gold:#e4b85d;
    --agm-gold-light:#f1ce82;
    --agm-hair:rgba(255,255,255,.075);
    --agm-hair-soft:rgba(255,255,255,.045);
    --agm-date-col:60px;
    --agm-card-h:55px;
    --agm-card-r:13px;

    color:var(--agm-text);
    background-color:var(--agm-bg);
    background-image:url("../img/agenda-premium-bg.webp");
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
  }

  /* #mainView est lui-même .mpage. La safe-area haute est déjà portée
     par mobile.css sur .mpage : ne jamais la compter une seconde fois. */
  #mainView.mpage { overflow:hidden; }

  #mainView .mcontent.mcontent-agenda-rows {
    min-height:0;
    overflow-y:hidden;
    overflow-x:hidden;
    background:transparent;
  }

  #mainView #calList {
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  #mainView #calList::-webkit-scrollbar { display:none; width:0; height:0; }

  /* ===== 1. HEADER ======================================================= */
  #mainView .mheader {
    flex-shrink:0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:8px 18px 6px;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  #mainView .agm-header-titles { min-width:0; padding-top:0; }
  #mainView .mheader-title {
    margin:0;
    color:var(--agm-text);
    font-family:"Quote EB Garamond",Georgia,"Times New Roman",serif;
    font-size:38px;
    font-weight:500;
    line-height:.90;
    letter-spacing:-.035em;
  }
  #mainView .agm-header-subtitle {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:5px;
    color:#a8b3c1;
    font-family:"Quote EB Garamond",Georgia,"Times New Roman",serif;
    font-size:15.5px;
    font-weight:500;
    line-height:1;
  }
  #mainView .agm-header-subtitle-chevron {
    width:7px; height:7px;
    border-right:1.5px solid var(--agm-gold);
    border-bottom:1.5px solid var(--agm-gold);
    transform:translateY(-2px) rotate(45deg);
  }
  #mainView .agm-header-icons {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex:0 0 auto;
    padding-top:1px;
  }
  #mainView .mheader-link,
  #mainView #kiosqueMount button,
  #mainView #settingsMount button,
  #mainView #highVisibilityMount button {
    width:40px; height:40px;
    min-width:40px; min-height:40px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    color:#edf2f7;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
  }
  #mainView .mheader-link svg,
  #mainView #kiosqueMount svg,
  #mainView #settingsMount svg,
  #mainView #highVisibilityMount svg { width:20px; height:20px; }

  /* ===== 2. NAVIGATION DU MOIS ========================================== */
  #mainView .agenda-month-nav {
    flex-shrink:0;
    display:grid;
    grid-template-columns:44px 44px minmax(0,1fr) 44px;
    align-items:center;
    min-height:48px;
    margin:7px 18px 0;
    padding:2px 3px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:25px;
    background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006));
    box-shadow:none;
  }
  #mainView .agenda-month-nav-today,
  #mainView .agenda-month-nav-arrow {
    width:44px; height:44px;
    min-width:44px; min-height:44px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    color:#edf2f7;
    background:rgba(255,255,255,.035);
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
  }
  #mainView .agenda-month-nav-today {
    grid-column:1;
    color:var(--agm-gold-light);
    box-shadow:inset 0 0 0 1px rgba(228,184,93,.26);
  }
  #mainView #btnPrevMonth { grid-column:2; }
  #mainView .agenda-month-nav-label {
    grid-column:3;
    width:100%; min-width:0; min-height:44px;
    padding:0 4px;
    border:0;
    background:transparent;
    color:var(--agm-gold-light);
    font-family:"Quote EB Garamond",Georgia,"Times New Roman",serif;
    font-size:21.5px;
    font-weight:500;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    -webkit-appearance:none;
    appearance:none;
  }
  #mainView #btnNextMonth { grid-column:4; }

  /* ===== 3. BASCULE LISTE / JOUR ======================================== */
  #mainView .agm-mode-switch {
    flex-shrink:0;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:26px;
    /* 12/10/2026, correction mesuree — etait min-height:32px avec
       margin:-6px 0 sur les boutons, qui ont une cible de 44px : les
       6px negatifs les faisaient REMONTER dans la zone du libelle du
       mois, et les deux cibles se RECOUVRAIENT (aire commune mesuree
       par test-fusion-reglages-header). Un tap dans la zone commune
       atterrissait chez l'une ou l'autre selon l'ordre du DOM.
       Le conteneur porte desormais la hauteur reelle de ses boutons.
       COUT ASSUME, et c'est le seul de ce lot : +12px de hauteur. Deux
       cibles de 44px empilees ne tiennent pas dans 32px, aucune astuce
       de marge ne le change — elle ne fait que cacher le recouvrement. */
    min-height:44px;
    /* +9px : apres suppression du recouvrement, l'ecart mesure entre le
       libelle du mois et ces boutons tombait a 3,0px, pour un seuil de
       12px entre deux cibles voisines. 9px exactement, mesures. */
    margin:9px auto 0;
    padding:0;
    border:0;
    background:transparent;
  }
  #mainView .agm-mode-btn {
    position:relative;
    min-width:52px;
    min-height:44px;
    margin:0;
    padding:0 4px;
    border:0;
    color:#78869a;
    background:transparent;
    font-size:10px;
    font-weight:600;
    line-height:44px;
    letter-spacing:.08em;
    text-transform:uppercase;
    -webkit-appearance:none;
    appearance:none;
  }
  #mainView .agm-mode-btn.active { color:var(--agm-gold-light); }
  #mainView .agm-mode-btn.active::after {
    content:"";
    position:absolute;
    left:18%; right:18%; bottom:5px;
    height:1px;
    background:var(--agm-gold);
    box-shadow:0 0 6px rgba(228,184,93,.30);
  }

  /* ===== 4. BANDEAU 7 JOURS — JOUR UNIQUEMENT ========================== */
  #mainView:not(.agm-mode-jour) .agm-day-strip { display:none !important; }
  #mainView.agm-mode-jour .agm-day-strip {
    flex-shrink:0;
    display:grid !important;
    grid-template-columns:repeat(7,minmax(0,1fr));
    align-items:end;
    gap:1px;
    margin:3px 18px 4px;
    padding:0;
    background:transparent;
  }
  #mainView .agm-day-selector {
    position:relative;
    min-width:44px;
    min-height:58px;
    padding:3px 0 4px;
    border:0;
    border-radius:14px;
    color:#b6c0cc;
    background:transparent;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
  }
  #mainView .agm-day-selector-weekday {
    display:block;
    color:#98a4b5;
    font-size:9px;
    font-weight:500;
    line-height:11px;
    letter-spacing:.03em;
  }
  #mainView .agm-day-selector-num {
    display:grid;
    place-items:center;
    width:31px; height:31px;
    margin:2px auto 1px;
    border-radius:10px;
    color:#edf1f5;
    font-family:"Quote EB Garamond",Georgia,"Times New Roman",serif;
    font-size:20px;
    font-weight:500;
    line-height:1;
  }
  #mainView .agm-day-selector-dot {
    display:block;
    width:4px; height:4px;
    margin:0 auto;
    border-radius:50%;
    background:var(--agm-jour-color,var(--agm-gold));
    box-shadow:0 0 6px color-mix(in srgb,var(--agm-jour-color,var(--agm-gold)) 48%,transparent);
  }
  #mainView .agm-day-selector.active {
    background:linear-gradient(180deg,rgba(228,184,93,.18),rgba(228,184,93,.04));
    box-shadow:inset 0 0 0 1px rgba(228,184,93,.52),0 0 16px rgba(228,184,93,.07);
  }
  #mainView .agm-day-selector.active .agm-day-selector-num {
    color:#10151b;
    background:linear-gradient(180deg,#f6db94,#e7b557);
    box-shadow:0 4px 14px rgba(228,184,93,.22);
  }

  /* ===== 5. RETOUR AUJOURD'HUI / TITRE JOUR ============================ */

  #mainView:not(.agm-mode-jour) .agm-day-heading { display:none !important; }
  #mainView.agm-mode-jour .agm-day-heading {
    flex-shrink:0;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:38px;
    margin:2px 18px 5px;
  }
  #mainView .agm-day-heading h2 {
    min-width:0;
    margin:0;
    color:var(--agm-text);
    font-family:"Quote EB Garamond",Georgia,"Times New Roman",serif;
    font-size:22px;
    font-weight:500;
    line-height:1;
    letter-spacing:-.01em;
  }
  #mainView .agm-today-chip {
    flex:0 0 auto;
    min-height:29px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(228,184,93,.47);
    border-radius:999px;
    color:var(--agm-gold-light);
    background:rgba(228,184,93,.045);
    font-size:10px;
  }

  /* ===== 6. LISTE — CONTENEUR =========================================== */
  #mainView .agenda-staleness,
  #mainView #actACalerBanner,
  #mainView #ecoleRappelBanner { display:none !important; }

  #mainView .agenda-rows {
    position:relative;
    flex:1;
    min-height:0;
    width:100%;
    margin-bottom:0;
    padding:0 18px 8px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    background:transparent;
  }
  #mainView.agm-hide-empty-days:not(.agm-mode-jour) #calList .agenda-row-empty { display:none !important; }

  /* le pied éditorial n'appartient pas à la composition Jour */
  #mainView.agm-mode-jour #agendaCockpitFooter { display:none !important; }

  /* ===== 7. COULEURS DES FAMILLES ====================================== */
  #mainView .agenda-row.agm-fam-or, #mainView .trow.agm-fam-or, #mainView .card.agm-fam-or {
    --agm-card-border:rgba(229,184,93,.65); --agm-card-a:rgba(125,83,23,.62); --agm-card-b:rgba(64,43,24,.44); --agm-icon:#ffd982;
  }
  #mainView .agenda-row.agm-fam-violet, #mainView .trow.agm-fam-violet, #mainView .card.agm-fam-violet {
    --agm-card-border:rgba(173,114,255,.42); --agm-card-a:rgba(73,45,119,.55); --agm-card-b:rgba(28,35,55,.52); --agm-icon:#c790ff;
  }
  #mainView .agenda-row.agm-fam-vert, #mainView .trow.agm-fam-vert, #mainView .card.agm-fam-vert {
    --agm-card-border:rgba(69,229,173,.42); --agm-card-a:rgba(10,94,72,.52); --agm-card-b:rgba(19,51,52,.47); --agm-icon:#56efba;
  }
  #mainView .agenda-row.agm-fam-bleu, #mainView .trow.agm-fam-bleu, #mainView .card.agm-fam-bleu {
    --agm-card-border:rgba(97,174,248,.43); --agm-card-a:rgba(29,79,130,.54); --agm-card-b:rgba(24,42,67,.49); --agm-icon:#83c2ff;
  }
  #mainView .agenda-row.agm-fam-rose, #mainView .trow.agm-fam-rose, #mainView .card.agm-fam-rose {
    --agm-card-border:rgba(239,99,159,.44); --agm-card-a:rgba(105,28,67,.55); --agm-card-b:rgba(53,25,45,.48); --agm-icon:#ff86ba;
  }
  #mainView .agenda-row.agm-fam-gris, #mainView .trow.agm-fam-gris, #mainView .card.agm-fam-gris {
    --agm-card-border:rgba(183,194,207,.19); --agm-card-a:rgba(51,62,78,.58); --agm-card-b:rgba(24,33,47,.49); --agm-icon:#c5d0dc;
  }

  /* ===== 8. SWIPE — STRUCTURE INTACTE ================================== */
  #mainView .agenda-evt-clickable {
    margin:0 !important;
    padding:0 !important;
    min-height:44px;
    border-radius:var(--agm-card-r);
  }
  #mainView .swipe-row { position:relative; min-width:0; width:100%; }
  #mainView .swipe-shell {
    position:relative;
    width:100%;
    min-width:0;
    overflow:hidden;                 /* impératif swipe */
    border-radius:var(--agm-card-r);
    touch-action:pan-y;
  }
  #mainView .swipe-actions {
    position:absolute;
    inset:0 0 0 auto;
    display:flex;
  }
  #mainView .swipe-front {
    position:relative;
    z-index:1;
    width:100%;
    min-width:0;
    min-height:0 !important;
    border-radius:var(--agm-card-r);
    background:var(--agm-front-opaque); /* impératif : opaque sous cartes translucides */
  }

  /* ===== 9. CARTES ======================================================= */
  #mainView .agenda-rowcontent .agenda-evt,
  #mainView .agenda-rowcontent .agenda-allday {
    position:relative;
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 25px;
    align-items:center;
    column-gap:9px;
    width:100%;
    min-height:var(--agm-card-h);
    padding:6px 6px 6px 9px;
    border:1px solid var(--agm-card-border,var(--agm-hair));
    border-radius:var(--agm-card-r);
    color:var(--agm-text);
    background:linear-gradient(105deg,var(--agm-card-a,rgba(36,48,65,.60)),var(--agm-card-b,rgba(18,28,43,.55)));
    box-shadow:0 5px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);
    overflow:hidden;
  }
  #mainView .agenda-rowcontent .agenda-evt::before,
  #mainView .agenda-rowcontent .agenda-allday::before {
    content:"";
    position:absolute;
    left:0; top:7px; bottom:7px;
    width:2px;
    border-radius:2px;
    background:var(--agm-evt-color,var(--agm-icon,var(--agm-gold)));
    opacity:.9;
  }
  #mainView .agm-evt-icon {
    width:36px; height:36px; min-width:36px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--agm-icon,var(--agm-evt-color)) 60%,transparent);
    border-radius:50%;
    color:var(--agm-icon,var(--agm-evt-color));
    background:color-mix(in srgb,var(--agm-icon,var(--agm-evt-color)) 12%,transparent);
  }
  #mainView .agm-evt-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; }
  #mainView .agm-evt-text { min-width:0; display:flex; flex-direction:column; justify-content:center; }
  #mainView .agenda-evt-title {
    min-width:0;
    margin:0;
    color:var(--agm-text);
    font-family:"Quote EB Garamond",Georgia,"Times New Roman",serif;
    font-size:15px;
    font-weight:500;
    line-height:1.06;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mainView .agenda-evt-time {
    display:block;
    min-width:0;
    margin-top:2px;
    color:var(--agm-soft);
    font-size:11px;
    font-weight:400;
    line-height:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mainView .agm-dot-redondant { display:none !important; }
  #mainView .agm-evt-chevron {
    width:25px; min-width:25px;
    height:44px; min-height:44px;
    display:grid;
    place-items:center;
    color:#edf2f6;
    opacity:.92;
  }
  #mainView .agm-evt-chevron svg { width:17px; height:17px; }
  #mainView .agm-evt-urgent { display:none !important; }

  /* ===== 10. MODE LISTE ================================================== */
  #mainView:not(.agm-mode-jour) .agenda-row {
    position:relative;
    display:grid !important;
    grid-template-columns:var(--agm-date-col) minmax(0,1fr);
    column-gap:8px;
    width:100%;
    min-height:59px;
    margin:0;
    padding:3px 0 4px;
    border:0;
    border-bottom:1px solid var(--agm-hair-soft);
    background:transparent;
  }
  #mainView:not(.agm-mode-jour) .agenda-row::after {
    content:"";
    position:absolute;
    left:calc(var(--agm-date-col) - 2px);
    top:0; bottom:0;
    width:1px;
    background:linear-gradient(180deg,transparent,rgba(228,184,93,.18) 14%,rgba(99,141,181,.15) 68%,transparent);
    pointer-events:none;
  }
  #mainView:not(.agm-mode-jour) .agenda-row.today {
    width:100%;
    margin:0;
    padding-inline:0;
    flex-wrap:nowrap !important;
    background:linear-gradient(90deg,rgba(228,184,93,.04),transparent 72%);
    box-shadow:none !important;
  }
  #mainView:not(.agm-mode-jour) .agenda-row.today::before {
    content:"";
    position:absolute;
    left:0; top:3px; bottom:4px;
    width:2px;
    border-radius:2px;
    background:var(--agm-gold);
    opacity:.82;
  }
  #mainView:not(.agm-mode-jour) .agenda-today-label {
    grid-column:1 / -1;
    display:block !important;
    min-height:18px;
    margin:0;
    padding:0 0 1px 5px;
    color:var(--agm-gold);
    font-size:9px;
    font-weight:600;
    line-height:16px;
    letter-spacing:.07em;
    text-transform:uppercase;
  }
  #mainView:not(.agm-mode-jour) .agenda-datecol {
    position:relative;
    z-index:2;
    width:100% !important;
    min-width:44px;
    min-height:54px;
    margin:0;
    padding:2px 8px 2px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    border:0;
    color:var(--agm-gold-light);
    background:transparent;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
  }
  #mainView:not(.agm-mode-jour) .agenda-datecol-day { color:var(--agm-gold-light); font-size:9px; font-weight:600; line-height:10px; letter-spacing:.07em; text-transform:uppercase; }
  #mainView:not(.agm-mode-jour) .agenda-datecol-num {
    margin:0;
    color:var(--agm-gold-light);
    font-family:"Quote EB Garamond",Georgia,"Times New Roman",serif;
    font-size:26px;
    font-weight:500;
    line-height:24px;
  }
  #mainView:not(.agm-mode-jour) .agenda-datecol-mon { color:var(--agm-gold-light); font-size:9px; font-weight:600; line-height:10px; letter-spacing:.06em; text-transform:uppercase; }
  /* LOT « balises de disponibilité » — la vignette reprend l'or de la
     colonne, en plus discret : c'est une indication, jamais une donnée
     au même rang que le quantième. Aucune bordure ni fond : la colonne
     porte déjà un point coloré (::after ci-dessous) et une pastille de
     plus la surchargerait — exactement ce qu'Arnaud demande d'éviter. */
  #mainView:not(.agm-mode-jour) .agenda-dispo-vignette {
    color:color-mix(in srgb,var(--agm-gold-light) 72%,transparent);
    font-size:9px; font-weight:600; line-height:10px; letter-spacing:-.01em;
  }
  #mainView:not(.agm-mode-jour) .agenda-datecol::after {
    content:"";
    position:absolute;
    right:-1px; top:21px;
    width:8px; height:8px;
    border:2px solid var(--agm-bg);
    border-radius:50%;
    background:var(--agm-row-color,var(--agm-gold));
    box-shadow:0 0 7px color-mix(in srgb,var(--agm-row-color,var(--agm-gold)) 48%,transparent);
  }
  #mainView:not(.agm-mode-jour) .agenda-rowcontent {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  #mainView:not(.agm-mode-jour) .agenda-row-empty { min-height:56px; }
  #mainView:not(.agm-mode-jour) .agenda-row-empty .agenda-datecol::after { background:var(--agm-muted); box-shadow:none; opacity:.55; }
  #mainView:not(.agm-mode-jour) .agenda-empty-btn {
    min-height:44px;
    align-self:center;
    width:100%;
    padding:0 12px;
    border:1px dashed rgba(255,255,255,.07);
    border-radius:12px;
    color:var(--agm-muted);
    background:rgba(255,255,255,.008);
    text-align:left;
    font-size:11px;
    -webkit-appearance:none;
    appearance:none;
  }

  /* ===== 11. MODE JOUR =================================================== */
  #mainView.agm-mode-jour .agenda-row:not(.agm-selected-day) { display:none !important; }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day {
    display:block !important;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none !important;
  }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day::before,
  #mainView.agm-mode-jour .agenda-row.agm-selected-day::after { display:none !important; }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day > .listdate,
  #mainView.agm-mode-jour .agenda-row.agm-selected-day > .agenda-today-label,
  #mainView.agm-mode-jour .agenda-row.agm-selected-day > .agenda-empty-btn { display:none !important; }
  #mainView.agm-mode-jour .agenda-rowcontent {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:0 0 4px;
  }
  #mainView.agm-mode-jour .trow {
    position:relative;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    column-gap:8px;
    align-items:start;
    min-height:var(--agm-card-h);
    margin:0 !important;
    padding:0 !important;
    border-radius:0;
    background:linear-gradient(to right,transparent 54px,rgba(255,255,255,.09) 54px,rgba(255,255,255,.09) 55px,transparent 55px);
  }
  #mainView.agm-mode-jour .trow::before {
    content:attr(data-agm-heure);
    grid-column:1;
    white-space:pre-line;
    padding:13px 5px 0 0;
    color:#b9c5d4;
    font-size:10px;
    font-weight:500;
    line-height:12px;
    text-align:left;
  }
  #mainView.agm-mode-jour .trow[data-agm-premier="1"]::before {
    padding-top:12px;
    color:var(--agm-gold-light);
    font-size:13px;
    line-height:13px;
  }
  #mainView.agm-mode-jour .trow::after {
    content:"";
    position:absolute;
    left:51px; top:20px;
    width:8px; height:8px;
    border:2px solid var(--agm-bg);
    border-radius:50%;
    background:var(--agm-evt-color,var(--agm-gold));
    box-shadow:0 0 7px color-mix(in srgb,var(--agm-evt-color,var(--agm-gold)) 48%,transparent);
    z-index:3;
  }
  #mainView.agm-mode-jour .trow > .swipe-shell { grid-column:2; min-width:0; }

  /* ===== 12. NAVIGATION BASSE / MICRO =================================== */
  /* La mécanique fixed + grille vient de mobile.css. On ne la remplace pas. */
  #mainView .mnav {
    min-height:61px;
    background:linear-gradient(180deg,rgba(6,15,26,.82),rgba(4,10,18,.96));
    border-top:1px solid rgba(255,255,255,.065);
    border-left:0; border-right:0; border-bottom:0;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 -8px 26px rgba(0,0,0,.16);
  }
  #mainView .mnav-item {
    min-height:48px;
    flex-direction:column;
    gap:3px;
    color:#8e9bad;
  }
  #mainView .mnav-item.is-on { color:var(--agm-gold-light); }
  #mainView .mnav-item svg { width:20px; height:20px; }
  #mainView .mnav-item-label { font-size:10px; line-height:1; }
  #mainView .mnav-voice-btn {
    width:70px; height:70px;
    min-width:70px; min-height:70px;
    border:1px solid rgba(255,238,193,.88);
    border-radius:50%;
    color:#11151b;
    background:radial-gradient(circle at 35% 28%,#fff0bd 0%,#e5b85d 56%,#956624 100%);
    box-shadow:0 0 0 6px rgba(228,184,93,.045),0 0 24px rgba(228,184,93,.28),0 8px 18px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.8);
    transform:translateY(-28px);
  }
  #mainView .mnav-voice-btn svg { width:27px; height:27px; }

  /* mobile.css réserve 40px pour la protrusion. Ici le bouton ne dépasse que
     de 28px : on reprend cette réserve pour éviter le trou bas en mode Jour. */
  #mainView.mpage:has(.mnav-voice-btn) .mcontent {
    margin-bottom:calc(49px + var(--mnav-gap-bas) + 29px);
  }

  /* ===== 13. HAUTE VISIBILITÉ ========================================== */
  :root[data-contrast="haute-visibilite"] #mainView {
    --agm-bg:#000;
    --agm-front:#000;
    --agm-front-opaque:#000;
    --agm-text:#fff;
    --agm-soft:#fff;
    --agm-muted:#fff;
    --agm-gold:#ffd54f;
    --agm-gold-light:#ffd54f;
    --agm-hair:#fff;
    --agm-hair-soft:#fff;
    background-image:none !important;
    background-color:#000 !important;
  }
  :root[data-contrast="haute-visibilite"] #mainView .agenda-row,
  :root[data-contrast="haute-visibilite"] #mainView .trow,
  :root[data-contrast="haute-visibilite"] #mainView .card {
    --agm-evt-color:#ffd54f !important;
    --agm-row-color:#ffd54f !important;
    --agm-jour-color:#ffd54f !important;
    --agm-card-border:#fff;
    --agm-card-a:#111;
    --agm-card-b:#111;
    --agm-icon:#ffd54f;
  }
  :root[data-contrast="haute-visibilite"] #mainView .agenda-rowcontent .agenda-evt,
  :root[data-contrast="haute-visibilite"] #mainView .agenda-rowcontent .agenda-allday {
    border-color:#fff !important;
    background:#111 !important;
  }
  :root[data-contrast="haute-visibilite"] #mainView .agm-evt-icon {
    color:#ffd54f !important;
    border-color:#ffd54f !important;
    background:#000 !important;
  }

  /* 12/10/2026, correction mesuree — le selecteur Liste/Jour INACTIF
     porte color:#78869a, un litteral que le mode haute visibilite ne
     redefinissait PAS : il traversait le mode intact et se retrouvait a
     5,68:1 contre le fond, pour un seuil AAA de 7:1 (mesure par
     test-contraste-haute-visibilite, premiere execution). C'est la fuite
     exacte que la doctrine A10 interdit — « le mode se definit
     entierement au socle, aucune couleur litterale ailleurs ».
     Releve au blanc pur comme les trois tiers de texte du socle. La
     distinction actif/inactif ne disparait pas : l'actif reste ambre et
     garde son trait souligne (.agm-mode-btn.active::after).
     Le rendu NORMAL n'est pas touche — #78869a reste ce qu'il etait. */
  :root[data-contrast="haute-visibilite"] #mainView .agm-mode-btn {
    color:#fff !important;
  }

  /* ===== 14. 390 px ====================================================== */
  @media (max-width:400px) {
    #mainView { --agm-date-col:57px; --agm-card-h:53px; }
    #mainView .mheader { padding-left:15px; padding-right:15px; }
    #mainView .mheader-title { font-size:36px; }
    #mainView .agm-header-icons { gap:12px; }
    #mainView .mheader-link,
    #mainView #kiosqueMount button,
    #mainView #settingsMount button,
    #mainView #highVisibilityMount button { width:44px; height:44px; min-width:44px; min-height:44px; }
    #mainView .agenda-month-nav,
    #mainView.agm-mode-jour .agm-day-strip,
    #mainView.agm-mode-jour .agm-day-heading { margin-left:15px; margin-right:15px; }
    #mainView .agenda-rows { padding-left:15px; padding-right:15px; }
    #mainView .agenda-rowcontent .agenda-evt,
    #mainView .agenda-rowcontent .agenda-allday {
      grid-template-columns:34px minmax(0,1fr) 23px;
      column-gap:8px;
      min-height:53px;
      padding:6px 5px 6px 8px;
    }
    #mainView .agm-evt-icon { width:34px; height:34px; min-width:34px; }
    #mainView .agenda-evt-title { font-size:14px; }
    #mainView .agenda-evt-time { font-size:10.5px; }
    #mainView.agm-mode-jour .trow {
      grid-template-columns:54px minmax(0,1fr);
      column-gap:7px;
      background-position:51px 0;
    }
    #mainView.agm-mode-jour .trow::after { left:47px; }
  }
}

/* Tablette / pointer coarse : comportement du produit inchangé. */
@media (min-width:768px) and (pointer:coarse) {
  #mainView .agm-mode-switch,
  #mainView .agm-day-strip,
  #mainView .agm-day-heading,
}

/* ========================================================================== 
   V4 — corrections de fidélité au mockup (08/10/2026)
   ========================================================================== */
@media (max-width:767px), (width >= 768px) and (pointer:fine) {
  /* Le fond est un asset du mockup, pas un motif décoratif générique. */
  #mainView {
    background-image:url("../img/agenda-premium-bg.webp") !important;
    background-size:100% 100% !important;
    background-position:50% 50% !important;
    background-repeat:no-repeat !important;
  }

  /* Les quatre actions produit restent visibles, y compris haute visibilité. */
  #mainView .agm-header-icons {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #mainView #kiosqueMount,
  #mainView #settingsMount,
  #mainView #highVisibilityMount {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 auto !important;
  }
  #mainView #kiosqueMount > button,
  #mainView #settingsMount > button,
  #mainView #highVisibilityMount > button {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Le navigateur de mois et la bascule ne disparaissent jamais en téléphone. */
  #mainView .agenda-month-nav {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #mainView .agm-mode-switch {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Aucune barre colorée incrustée dans les cartes : absente du mockup. */
  #mainView .agenda-rowcontent .agenda-evt::before,
  #mainView .agenda-rowcontent .agenda-allday::before {
    display:none !important;
    content:none !important;
  }

  /* Liste : la frise est un filet très fin, teinté par le JOUR, pas une barre. */
  #mainView:not(.agm-mode-jour) .agenda-row::after {
    left:calc(var(--agm-date-col) - 2px) !important;
    width:1px !important;
    background:color-mix(in srgb,var(--agm-row-color,var(--agm-gold)) 22%,transparent) !important;
    opacity:.72;
  }
  #mainView:not(.agm-mode-jour) .agenda-datecol::after {
    width:8px !important;
    height:8px !important;
    border-width:1.5px !important;
  }

  /* Jour : ligne d'axe par événement, extrêmement légère, sans barre devant la carte. */
  #mainView.agm-mode-jour .trow {
    background:linear-gradient(
      to right,
      transparent 54px,
      color-mix(in srgb,var(--agm-evt-color,var(--agm-gold)) 24%,transparent) 54px,
      color-mix(in srgb,var(--agm-evt-color,var(--agm-gold)) 24%,transparent) 55px,
      transparent 55px
    ) !important;
  }
  #mainView.agm-mode-jour .trow::after {
    width:8px !important;
    height:8px !important;
    border-width:1.5px !important;
  }

  /* Le mockup Jour donne plus de présence verticale aux quatre cartes. */
  #mainView.agm-mode-jour .agenda-rowcontent { gap:10px !important; }
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-evt,
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-allday {
    min-height:64px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  #mainView.agm-mode-jour .trow { min-height:64px !important; }

  /* Le pied éditorial n'existe pas dans la composition Jour. */
  #mainView.agm-mode-jour #agendaCockpitFooter {
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  /* La pilule reste un contrôle Liste. L'IntersectionObserver peut la masquer. */

  /* Barre basse : proportions du mockup. La mécanique de grille reste celle de mobile.css. */
  #mainView .mnav-item svg {
    width:21px !important;
    height:21px !important;
  }
  #mainView .mnav-voice-btn {
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;
    transform:translateY(-30px) !important;
  }
  #mainView .mnav-voice-btn svg {
    width:29px !important;
    height:29px !important;
  }

  /* Evite qu'un contenu court donne l'impression d'un second pied de page. */
  #mainView.agm-mode-jour .agenda-rows {
    flex:0 0 auto !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }
}

/* ========================================================================== 
   V5 — recalage strict sur le mockup de référence
   - fond retracé sur la composition du mockup
   - pas de trait coloré incrusté dans les cartes
   - frise Jour continue, fine et en retrait
   - bouton haute visibilité réellement réinstallé
   - densité / vide du mode Jour corrigés sans casser le swipe
   ========================================================================== */
@media (max-width:767px), (width >= 768px) and (pointer:fine) {
  /* Fond commun aux deux modes : exactement le même asset, plein écran. */
  #mainView {
    background-color:#050c17 !important;
    background-image:url("../img/agenda-premium-bg.webp") !important;
    background-size:100% 100% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
  #mainView .mcontent,
  #mainView .mheader,
  #mainView .mnav { background-color:transparent; }

  /* Header : quatre actions réellement visibles et assez compactes pour tenir à 390. */
  #mainView .mheader {
    flex-wrap:nowrap !important;
    padding-left:16px !important;
    padding-right:16px !important;
    gap:8px !important;
  }
  #mainView .agm-header-titles {
    flex:1 1 auto !important;
    min-width:128px !important;
  }
  #mainView .agm-header-icons {
    display:flex !important;
    flex:0 0 auto !important;
    width:auto !important;
    gap:12px !important;
    overflow:visible !important;
  }
  #mainView .mheader-link,
  #mainView #kiosqueMount > button,
  #mainView #settingsMount > button,
  #mainView #highVisibilityMount > button {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
    min-height:35px !important;
    padding:0 !important;
    flex:0 0 35px !important;
  }
  #mainView #kiosqueMount,
  #mainView #settingsMount,
  #mainView #highVisibilityMount {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:35px !important;
    min-width:35px !important;
    flex:0 0 35px !important;
  }
  #mainView .mheader-link svg,
  #mainView #kiosqueMount svg,
  #mainView #settingsMount svg,
  #mainView #highVisibilityMount svg {
    width:20px !important;
    height:20px !important;
  }

  /* Carte : seulement son contour fin, jamais de barre verticale décorative. */
  #mainView .agenda-rowcontent .agenda-evt::before,
  #mainView .agenda-rowcontent .agenda-allday::before {
    display:none !important;
    content:none !important;
  }
  #mainView .agenda-rowcontent .agenda-evt,
  #mainView .agenda-rowcontent .agenda-allday {
    border-left-width:1px !important;
    box-shadow:0 5px 14px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  /* LISTE : filet de calendrier plus loin de la carte et beaucoup plus discret. */
  #mainView:not(.agm-mode-jour) {
    --agm-date-col:66px;
  }
  #mainView:not(.agm-mode-jour) .agenda-row {
    column-gap:12px !important;
  }
  #mainView:not(.agm-mode-jour) .agenda-row::after {
    left:calc(var(--agm-date-col) - 5px) !important;
    width:1px !important;
    background:linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb,var(--agm-row-color,var(--agm-gold)) 22%,transparent) 16%,
      color-mix(in srgb,var(--agm-row-color,var(--agm-gold)) 18%,transparent) 84%,
      transparent 100%
    ) !important;
    opacity:.58 !important;
  }
  #mainView:not(.agm-mode-jour) .agenda-datecol::after {
    right:-2px !important;
    width:7px !important;
    height:7px !important;
    border-width:1px !important;
    box-shadow:0 0 6px color-mix(in srgb,var(--agm-row-color,var(--agm-gold)) 42%,transparent) !important;
  }

  /* JOUR : UNE frise continue derrière tous les événements, pas une barre par carte. */
  #mainView.agm-mode-jour .agenda-rowcontent {
    position:relative !important;
    gap:13px !important;
    padding:0 0 8px !important;
  }
  #mainView.agm-mode-jour .agenda-rowcontent::before {
    content:"";
    position:absolute;
    left:57px;
    top:20px;
    bottom:20px;
    width:1px;
    background:linear-gradient(
      180deg,
      rgba(228,184,93,.34) 0%,
      rgba(157,115,238,.22) 30%,
      rgba(87,223,174,.22) 62%,
      rgba(170,180,195,.14) 100%
    );
    pointer-events:none;
    z-index:0;
  }
  #mainView.agm-mode-jour .trow {
    position:relative !important;
    display:grid !important;
    grid-template-columns:66px minmax(0,1fr) !important;
    column-gap:10px !important;
    min-height:66px !important;
    background:none !important;
    z-index:1;
  }
  #mainView.agm-mode-jour .trow::before {
    padding:14px 6px 0 0 !important;
    font-size:10.5px !important;
    line-height:12px !important;
  }
  #mainView.agm-mode-jour .trow[data-agm-premier="1"]::before {
    padding-top:13px !important;
    font-size:13px !important;
    line-height:13px !important;
  }
  #mainView.agm-mode-jour .trow::after {
    left:53px !important;
    top:26px !important;
    width:7px !important;
    height:7px !important;
    border:1px solid var(--agm-bg) !important;
    box-shadow:0 0 7px color-mix(in srgb,var(--agm-evt-color,var(--agm-gold)) 46%,transparent) !important;
    z-index:3 !important;
  }
  #mainView.agm-mode-jour .trow > .swipe-shell {
    grid-column:2 !important;
  }
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-evt,
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-allday {
    min-height:66px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  /* Mode Jour : le contenu reprend l'espace utile au lieu de laisser un puits vide. */
  #mainView.agm-mode-jour .mcontent.mcontent-agenda-rows {
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }
  #mainView.agm-mode-jour .agenda-rows {
    flex:1 1 auto !important;
    display:flex !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding-bottom:8px !important;
  }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day {
    flex:1 1 auto !important;
    display:flex !important;
    min-height:0 !important;
  }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day > .agenda-rowcontent {
    flex:1 1 auto !important;
    width:100% !important;
    justify-content:flex-start !important;
    align-content:flex-start !important;
  }

  /* Le trou bas vient en partie de la réserve de protrusion : garder seulement ce qui est réellement nécessaire. */
  /* !important RETIRÉ le 09/10/2026, sur autorisation explicite d'Arnaud :
     « c'était un garde-fou pendant la refonte de la page parce que
     j'avais peur que tu fasses une erreur ». Il a coûté un défaut réel :
     il écrasait la rétraction de réserve de mobile.css (S123 T1), et la
     liste gardait ses 69px de vide quand la barre du bas se masquait.
     La spécificité (1,3,0) de ce sélecteur suffit largement à tenir
     face aux règles de mobile.css ; le drapeau n'ajoutait rien d'autre
     que l'impossibilité de le contredire. */
  #mainView.mpage:has(.mnav-voice-btn) .mcontent {
    margin-bottom:calc(49px + var(--mnav-gap-bas) + 8px);
  }

  /* RÉTRACTION DE LA RÉSERVE quand la barre du bas se masque — la pièce
     qui MANQUAIT ici (vérifié : ce fichier ne contenait aucune règle
     mnav-hidden). Constat d'Arnaud du 09/10 : « les événements sont
     derrière l'espace laissé visible par les commandes masquées ».
     mobile.css porte bien la règle générique (:root.mnav-hidden
     .mcontent) mais sa spécificité (0,3,0) ne peut pas atteindre un
     sélecteur d'id : même sans !important, il faut la reprendre ICI,
     c'est-à-dire à côté de la réserve qu'elle annule.
     Posée pour les DEUX réserves de ce fichier (celle ci-dessus et
     celle du mode Jour, l.681) : (1,4,0) les bat toutes les deux.
     MESURE (390x844, barre et bouton vocal montés) :
       barre visible -> 69px sous la liste, inchangé
       barre masquée -> 0px, contre 69px avant ce correctif */
  :root.mnav-hidden #mainView.mpage:has(.mnav-voice-btn) .mcontent,
  :root.mnav-hidden #mainView .mcontent {
    margin-bottom:env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
  }

  /* Barre basse / micro : proportions plus proches du mockup. */
  #mainView .mnav {
    min-height:58px !important;
    background:linear-gradient(180deg,rgba(6,15,26,.72),rgba(4,10,18,.93)) !important;
  }
  #mainView .mnav-item svg {
    /* 12/10/2026, correction mesuree — 19px donnaient un trait de
       1,583px (getScreenCTM reel) pour un seuil de 1,75px. viewBox 24 et
       stroke-width 2 : le trait rendu vaut 2 x taille / 24, donc il faut
       21px au minimum. Mesure, pas estimation : 2 x 21 / 24 = 1,75.
       Sans effet sur la hauteur de la barre — la piste fait 48px. */
    width:21px !important;
    height:21px !important;
  }
  #mainView .mnav-item-label {
    font-size:9.5px !important;
  }
  #mainView .mnav-voice-btn {
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    min-height:68px !important;
    transform:translateY(-26px) !important;
  }
  #mainView .mnav-voice-btn svg {
    width:27px !important;
    height:27px !important;
  }

  /* La pilule Retour à aujourd'hui reste du mode Liste, pilotée par l'Observer produit. */

  /* Haute visibilité : neutralisation stricte de l'asset de fond. */
  :root[data-contrast="haute-visibilite"] #mainView {
    background-image:none !important;
    background-color:#000 !important;
  }
}

/* ========================================================================== 
   V6 — corrections demandées sur comparaison directe avec le mockup
   ========================================================================== */
@media (max-width:767px), (width >= 768px) and (pointer:fine) {
  /* BACKGROUND : asset raster 430×932 tracé sur la composition du mockup. */
  #mainView {
    background-color:#040c17 !important;
    background-image:url("../img/agenda-premium-bg.webp") !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  /* Le bouton haute visibilité est un contrôle produit obligatoire. */
  #mainView .agm-header-icons {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    overflow:visible !important;
  }
  #mainView #highVisibilityMount,
  #mainView #kiosqueMount,
  #mainView #settingsMount {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
  }
  #mainView #highVisibilityMount > button,
  #mainView #kiosqueMount > button,
  #mainView #settingsMount > button,
  #mainView .agm-header-icons > .mheader-link {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
    background:
      radial-gradient(circle at 34% 24%,rgba(255,255,255,.085),transparent 42%),
      linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.015)) !important;
    border-color:rgba(255,255,255,.12) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 18px rgba(0,0,0,.14) !important;
  }

  /* CARTES : pas de barre interne. Reflet supérieur + lumière de bordure. */
  #mainView .agenda-rowcontent .agenda-evt::before,
  #mainView .agenda-rowcontent .agenda-allday::before {
    display:none !important;
    content:none !important;
  }
  #mainView .agenda-rowcontent .agenda-evt,
  #mainView .agenda-rowcontent .agenda-allday {
    box-shadow:
      0 7px 18px rgba(0,0,0,.22),
      0 0 14px color-mix(in srgb,var(--agm-evt-color,var(--agm-gold)) 8%,transparent),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.18) !important;
  }
  #mainView .agenda-rowcontent .agenda-evt::after,
  #mainView .agenda-rowcontent .agenda-allday::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
      radial-gradient(120% 82% at 16% -18%,rgba(255,255,255,.11),transparent 44%),
      linear-gradient(180deg,rgba(255,255,255,.028),transparent 36%);
    mix-blend-mode:screen;
    opacity:.82;
  }
  #mainView .agm-evt-icon {
    box-shadow:
      0 0 12px color-mix(in srgb,var(--agm-icon,var(--agm-evt-color)) 18%,transparent),
      inset 0 1px 0 rgba(255,255,255,.11),
      inset 0 0 14px color-mix(in srgb,var(--agm-icon,var(--agm-evt-color)) 9%,transparent) !important;
  }

  /* LISTE : un SEUL séparateur continu pour toute la liste, comme le mockup. */
  #mainView:not(.agm-mode-jour) .agenda-rows {
    --agm-list-pad:18px;
  }
  #mainView:not(.agm-mode-jour) .agenda-rows::before {
    content:"";
    position:absolute;
    z-index:0;
    left:calc(var(--agm-list-pad) + var(--agm-date-col) - 5px);
    top:3px;
    bottom:8px;
    width:1px;
    background:linear-gradient(180deg,
      rgba(228,184,93,.40) 0%,
      rgba(122,112,193,.30) 22%,
      rgba(71,191,160,.28) 45%,
      rgba(88,156,213,.22) 70%,
      rgba(228,184,93,.20) 100%);
    box-shadow:0 0 5px rgba(228,184,93,.05);
    pointer-events:none;
  }
  #mainView:not(.agm-mode-jour) .agenda-row::after { display:none !important; content:none !important; }
  #mainView:not(.agm-mode-jour) .agenda-datecol::after {
    right:-2px !important;
    top:21px !important;
    width:8px !important;
    height:8px !important;
    border:1.5px solid #06111f !important;
    box-shadow:0 0 8px color-mix(in srgb,var(--agm-row-color,var(--agm-gold)) 54%,transparent) !important;
    z-index:4 !important;
  }

  /* JOUR : un SEUL axe continu, les trow ne dessinent plus chacun leur morceau. */
  #mainView.agm-mode-jour .agenda-rowcontent {
    position:relative;
    gap:11px !important;
    min-height:100% !important;
    padding:0 0 8px !important;
  }
  #mainView.agm-mode-jour .agenda-rowcontent::before {
    content:"";
    position:absolute;
    z-index:0;
    left:54px;
    top:20px;
    bottom:22px;
    width:1px;
    background:linear-gradient(180deg,rgba(228,184,93,.44),rgba(120,119,196,.32) 34%,rgba(73,191,160,.28) 68%,rgba(162,177,199,.22));
    box-shadow:0 0 5px rgba(104,154,188,.05);
    pointer-events:none;
  }
  #mainView.agm-mode-jour .trow {
    background:none !important;
    min-height:70px !important;
  }
  #mainView.agm-mode-jour .trow::after {
    left:50px !important;
    top:28px !important;
    width:8px !important;
    height:8px !important;
    border:1.5px solid #06111f !important;
    box-shadow:0 0 8px color-mix(in srgb,var(--agm-evt-color,var(--agm-gold)) 58%,transparent) !important;
  }
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-evt,
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-allday {
    min-height:70px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }

  /* Le contenu Jour occupe réellement la hauteur disponible : pas de grand trou avant la nav. */
  #mainView.agm-mode-jour .agenda-rows {
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding-bottom:10px !important;
  }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day {
    min-height:100% !important;
  }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day > .agenda-rowcontent {
    min-height:100% !important;
    justify-content:space-evenly !important;
  }

  /* Brillance du mois, sélection et micro, présente dans le mockup. */
  #mainView .agenda-month-nav {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.08) !important;
  }
  #mainView .agm-day-selector.active {
    box-shadow:inset 0 0 0 1px rgba(228,184,93,.62),0 0 18px rgba(228,184,93,.17) !important;
  }
  #mainView .agm-day-selector.active .agm-day-selector-num {
    box-shadow:0 0 18px rgba(228,184,93,.26),inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
  #mainView .mnav-voice-btn {
    box-shadow:
      0 0 0 7px rgba(228,184,93,.055),
      0 0 34px rgba(228,184,93,.40),
      0 10px 22px rgba(0,0,0,.42),
      inset 0 2px 2px rgba(255,255,255,.78),
      inset 0 -3px 8px rgba(106,67,15,.20) !important;
  }

  @media (max-width:400px) {
    #mainView:not(.agm-mode-jour) .agenda-rows { --agm-list-pad:15px; }
    #mainView.agm-mode-jour .agenda-rowcontent::before { left:50px; }
    #mainView.agm-mode-jour .trow::after { left:46px !important; }
  }
}

/* ========================================================================== 
   V7 — corrections finales demandées : background, haute visibilité, densité Jour
   ========================================================================== */
@media (max-width:767px), (width >= 768px) and (pointer:fine) {
  /* BACKGROUND : nouveau raster 430x932 tracé spécifiquement sur le mockup. */
  #mainView {
    background-color:#040c17 !important;
    background-image:url("../img/agenda-premium-bg.webp") !important;
    background-size:100% 100% !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
  }

  /* HEADER : réserver la place des boutons ronds — AUTANT QU'IL Y EN A.
     12/10/2026 : cette règle réservait la place de QUATRE boutons, en
     toutes lettres (`repeat(4,44px)` et `width:212px`, soit 4×44 + 3×12).
     Le cinquième, « retour à l'écran », tombait donc à la ligne, et
     l'en-tête d'Arnaud s'affichait sur deux rangs.
     Le nombre magique est remplacé par une grille qui se compte seule :
     `grid-auto-flow:column` crée une colonne par enfant VISIBLE, et la
     largeur suit. Un sixième bouton un jour ne rouvrira pas ce défaut, et
     un bouton masqué (le retour à l'écran sur téléphone) ne réserve
     aucune place. */
  #mainView .mheader {
    overflow:visible !important;
    gap:8px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  #mainView .agm-header-titles {
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:150px !important;
  }
  #mainView .agm-header-icons {
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:44px !important;
    gap:12px !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  #mainView .agm-header-icons > .mheader-link,
  #mainView #kiosqueMount,
  #mainView #settingsMount,
  #mainView #highVisibilityMount,
  #mainView #kiosqueMount > button,
  #mainView #settingsMount > button,
  #mainView #highVisibilityMount > button {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    overflow:visible !important;
  }
  #mainView #kiosqueMount,
  #mainView #settingsMount,
  #mainView #highVisibilityMount {
    place-items:center !important;
  }
  #mainView .agm-header-icons svg,
  #mainView #kiosqueMount svg,
  #mainView #settingsMount svg,
  #mainView #highVisibilityMount svg {
    width:20px !important;
    height:20px !important;
  }

  /* JOUR : mêmes rythmes que le mockup, pas d'étirement vertical. */
  #mainView.agm-mode-jour .agenda-rows {
    flex:0 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding-bottom:8px !important;
  }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day {
    min-height:0 !important;
    height:auto !important;
  }
  #mainView.agm-mode-jour .agenda-row.agm-selected-day > .agenda-rowcontent {
    min-height:0 !important;
    height:auto !important;
    justify-content:flex-start !important;
    gap:7px !important;
    padding-bottom:4px !important;
  }
  #mainView.agm-mode-jour .trow {
    min-height:58px !important;
    height:auto !important;
    margin:0 !important;
  }
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-evt,
  #mainView.agm-mode-jour .agenda-rowcontent .agenda-allday {
    min-height:58px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }
  #mainView.agm-mode-jour .trow::after {
    top:24px !important;
  }
  #mainView.agm-mode-jour .agenda-rowcontent::before {
    top:18px !important;
    bottom:18px !important;
  }

  /* Plus de brillant, sans épaissir la carte. */
  #mainView .agenda-rowcontent .agenda-evt,
  #mainView .agenda-rowcontent .agenda-allday {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 6px 16px rgba(0,0,0,.22),
      0 0 12px color-mix(in srgb,var(--agm-evt-color) 12%,transparent) !important;
  }
  #mainView .agm-evt-icon {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 0 10px color-mix(in srgb,var(--agm-evt-color) 24%,transparent) !important;
  }
  #mainView .agenda-month-nav,

  /* Haute visibilité : le contrôle reste visible même si un style antérieur le masque. */
  #mainView #highVisibilityMount { display:grid !important; }
  #mainView #highVisibilityMount > button { display:grid !important; }
}