/* =====================================================================
   AGENDA 3S® · mise en page inspirée de Google Agenda (étape 3, 16/10/2026)
   Couleurs, polices, arrondis : variables de la charte commune (charte.css). Classes préfixées ag-.
   Règles de Lynda : place optimisée, icônes au trait fin (1,5), boutons en pastille, textes neutres.
   ===================================================================== */
/* Valeurs de SECOURS si la charte commune (methode3s.com/assets/charte/charte.css) ne se charge pas (constaté le 16/10 dans
   l'application installée sur iPhone) : :where() a une spécificité nulle, la charte les remplace donc dès qu'elle est là. */
:where(:root){
  --fond:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F6F6; --ligne:#E7E7E7; --texte:#111111; --texte-doux:#626262;
  --c-principale:#000000; --c-sur-principale:#FFFFFF; --c-secondaire:#914655; --c-secondaire-texte:#914655; --c-secondaire-voile:#F3E9EB;
  --c-foncee:#2E161B; --danger:#B42318; --danger-fond:#FDECEA; --attention:#8A5A00; --attention-fond:#FFF6E0;
  --rayon-petit:10px; --ombre:0 24px 60px -24px rgba(0,0,0,.22); --ombre-legere:0 6px 20px -10px rgba(0,0,0,.16); --graisse-grand-titre:300;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --heading:"Bricolage Grotesque",var(--sans);
  --mono:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.ag-saut{position:absolute;left:-999px;top:8px;z-index:50;background:var(--surface);padding:8px 12px;border-radius:var(--rayon-petit)}
.ag-saut:focus{left:8px}
.ag-visuel-masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ag-pousse{flex:1 1 auto}
:focus-visible{outline:2px solid var(--c-secondaire);outline-offset:2px}

/* ---------- Icônes (SVG dessinés par app.js, trait 1,5) ---------- */
.ag-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ag-icone{display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--texte-doux)}
.ag-icone:hover{background:var(--surface-2);color:var(--texte)}
.ag-icone.ag-petite{width:28px;height:28px}
.ag-icone.ag-petite .ag-ico{width:16px;height:16px}

/* ---------- Boutons ---------- */
.ag-pastille{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 18px;border:1px solid var(--c-principale);border-radius:999px;
  background:var(--c-principale);color:var(--c-sur-principale);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.ag-pastille:hover{filter:brightness(1.08)}
.ag-pastille.ag-contour{background:transparent;color:var(--texte);border-color:var(--ligne)}
.ag-pastille.ag-contour:hover{background:var(--surface-2)}
.ag-pastille.ag-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.ag-lien{border:0;background:none;padding:4px 0;color:var(--c-secondaire-texte);cursor:pointer;font-weight:500}
.ag-lien:hover{text-decoration:underline}

/* ---------- Porte (connexion, double authentification) ---------- */
.ag-porte{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.ag-porte-carte{width:min(420px,100%);background:var(--surface);border:1px solid var(--ligne);border-radius:24px;padding:32px 28px;box-shadow:var(--ombre-legere);text-align:center}
.ag-porte-carte img{width:48px;height:48px}
.ag-porte-carte h1{font:var(--graisse-grand-titre) 26px/1.2 var(--heading);margin:14px 0 6px}
.ag-porte-carte p{color:var(--texte-doux);margin:0 0 18px}
.ag-porte-carte form{display:flex;gap:8px;justify-content:center}
.ag-porte-carte input{width:150px;height:40px;border:1px solid var(--ligne);border-radius:999px;padding:0 16px;text-align:center;letter-spacing:.3em;background:var(--surface)}

/* ---------- Application ---------- */
.ag-app{height:100%;display:flex;flex-direction:column}
.ag-entete{display:flex;align-items:center;gap:6px;height:60px;padding:0 10px 0 6px;border-bottom:1px solid var(--ligne);background:var(--surface);flex:none}
.ag-marque{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;margin-right:18px}
.ag-marque b{font:600 19px/1 var(--heading)}
.ag-fleches{display:flex;margin-left:4px}
.ag-periode{font:400 21px/1.2 var(--heading);margin:0 0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ag-periode::first-letter{text-transform:uppercase}
.ag-vues{display:flex;gap:2px;border:1px solid var(--ligne);border-radius:999px;padding:2px}
.ag-vues button{border:0;background:none;height:30px;padding:0 12px;border-radius:999px;cursor:pointer;color:var(--texte-doux);font-weight:500}
.ag-vues button[aria-pressed="true"]{background:var(--c-secondaire-voile);color:var(--c-secondaire-texte)}
.ag-compte{margin-left:6px}
.ag-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c-secondaire);color:#fff;font-weight:600;font-size:13px;border:0;text-decoration:none}

.ag-corps{flex:1 1 auto;display:flex;min-height:0}
.ag-cote{width:256px;flex:none;overflow-y:auto;padding:12px 12px 16px 12px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}
.ag-app.ag-cote-ferme .ag-cote{display:none}
.ag-creer{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 14px;border:0;border-radius:18px;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.14),0 4px 10px -2px rgba(0,0,0,.12);cursor:pointer;font-weight:600;align-self:flex-start}
.ag-creer:hover{box-shadow:0 2px 6px rgba(0,0,0,.18),0 8px 18px -4px rgba(0,0,0,.16)}
.ag-creer-plus .ag-ico{width:26px;height:26px;color:var(--c-secondaire)}

/* Mini-calendrier */
.ag-mini{user-select:none}
.ag-mini-haut{display:flex;align-items:center;padding:0 0 4px 8px}
.ag-mini-haut b{flex:1;font-weight:600;font-size:13px}
.ag-mini-haut b::first-letter{text-transform:uppercase}
.ag-mini table{width:100%;border-collapse:collapse;table-layout:fixed}
.ag-mini th{font-size:10.5px;font-weight:500;color:var(--texte-doux);padding:2px 0}
.ag-mini td{padding:1px 0;text-align:center}
.ag-mini td button{width:28px;height:28px;border:0;border-radius:50%;background:none;cursor:pointer;font-size:11.5px}
.ag-mini td button:hover{background:var(--surface-2)}
.ag-mini td.ag-hors button{color:var(--texte-doux)}
.ag-mini td.ag-plage button{background:var(--c-secondaire-voile)}
.ag-mini td.ag-auj button{background:var(--c-secondaire);color:#fff;font-weight:600}

/* Listes d'agendas et de sources */
.ag-bloc-titre{display:flex;align-items:center;justify-content:space-between;font-weight:600;padding:4px 4px 4px 8px}
.ag-liste{list-style:none;margin:0;padding:0}
.ag-liste li{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 0 0 6px;border-radius:10px;position:relative}
.ag-liste li:hover{background:var(--surface-2)}
.ag-liste label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.ag-liste label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-liste input[type=checkbox]{appearance:none;width:18px;height:18px;border-radius:5px;border:2px solid var(--c, var(--texte-doux));margin:0;flex:none;cursor:pointer;display:grid;place-items:center}
.ag-liste input[type=checkbox]:checked{background:var(--c, var(--texte-doux))}
.ag-liste input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.ag-liste .ag-icone{opacity:0}
.ag-liste li:hover .ag-icone,.ag-liste li:focus-within .ag-icone{opacity:1}
.ag-liste .ag-rdv-marque{font-size:10.5px;color:var(--texte-doux);border:1px solid var(--ligne);border-radius:999px;padding:0 6px;white-space:nowrap}
.ag-liste input.ag-renommer{flex:1;min-width:0;height:28px;border:1px solid var(--c-secondaire);border-radius:8px;padding:0 8px;background:var(--surface)}

/* Menu d'un agenda */
.ag-menu{position:fixed;z-index:30;min-width:230px;background:var(--surface);border:1px solid var(--ligne);border-radius:14px;box-shadow:var(--ombre);padding:6px}
.ag-menu button.ag-menu-ligne{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left}
.ag-menu button.ag-menu-ligne:hover{background:var(--surface-2)}
.ag-couleurs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:8px 10px}
.ag-couleurs button{width:24px;height:24px;border-radius:50%;border:0;cursor:pointer}
.ag-couleurs button[aria-pressed="true"]{outline:2px solid var(--texte);outline-offset:2px}
.ag-cote-pied{margin-top:auto;display:flex;gap:14px;padding:0 8px}

/* ---------- Grille FullCalendar ---------- */
.ag-grille{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:0 8px 8px 0;background:var(--surface)}
#calendrier{flex:1 1 auto;min-height:0}
.ag-recherche{display:flex;align-items:center;gap:6px;padding:8px 0 6px 8px}
.ag-recherche input{flex:1;height:38px;border:1px solid var(--ligne);border-radius:999px;padding:0 16px;background:var(--surface)}
.fc{--fc-border-color:var(--ligne);--fc-page-bg-color:var(--surface);--fc-neutral-bg-color:var(--surface-2);--fc-today-bg-color:transparent;
  --fc-now-indicator-color:var(--danger);--fc-highlight-color:var(--c-secondaire-voile);--fc-event-border-color:transparent;font-size:12.5px}
.fc .fc-scrollgrid{border-left:0;border-top:0}
.fc .fc-col-header-cell{border-left-color:transparent;border-right-color:transparent}
.fc .fc-col-header-cell-cushion{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;color:var(--texte-doux);text-decoration:none;font-weight:500;font-size:11px;text-transform:uppercase}
.fc .ag-num{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font:400 24px/1 var(--heading);color:var(--texte);text-transform:none}
.fc .fc-day-today .ag-num{background:var(--c-secondaire);color:#fff}
.fc .fc-day-today .fc-col-header-cell-cushion{color:var(--c-secondaire-texte)}
.fc .fc-timegrid-slot{height:44px}
.fc .fc-timegrid-slot-minor{border-top-style:none}
.fc .fc-timegrid-slot-label-cushion{font-size:10.5px;color:var(--texte-doux);position:relative;top:-0.75em;background:var(--surface);padding-right:8px}
.fc .fc-timegrid-axis-cushion{font-size:10.5px;color:var(--texte-doux)}
.fc .fc-daygrid-day-number{font-size:12px;padding:6px 8px;color:var(--texte);text-decoration:none}
.fc .fc-day-today .fc-daygrid-day-number{background:var(--c-secondaire);color:#fff;border-radius:999px;min-width:24px;text-align:center;margin:4px;padding:3px 7px}
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number{color:var(--texte-doux)}
.fc-event{border-radius:6px;cursor:pointer;font-size:12px}
.fc .fc-event-main{padding:2px 6px}
.fc .fc-timegrid-event .fc-event-time{font-size:11px;opacity:.9}
.fc .ag-ev-provisoire{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px)}
.fc .ag-ev-annule .fc-event-title{text-decoration:line-through}
.fc .ag-ev-annule{opacity:.55}
.fc .ag-ev-externe{background:var(--surface)!important;color:var(--texte)!important;border:1px solid var(--ligne)!important;border-left:4px solid var(--ag-c)!important}
.fc .ag-ev-externe .fc-event-main{color:var(--texte)}
.fc .ag-ev-externe .fc-daygrid-event-dot{border-color:var(--ag-c)}
.fc .ag-ev-cache{display:none}
.fc .fc-list-event-dot{border-color:var(--ag-c, var(--c-secondaire))}
.fc .fc-list-day-cushion{background:var(--surface-2)}
.fc .fc-list-event:hover td{background:var(--surface-2)}
.fc .fc-highlight{border-radius:6px}
.fc .fc-timegrid-now-indicator-arrow{border-color:var(--danger)}

.ag-flottant{display:none}
.ag-voile{display:none}

/* ---------- Fenêtres ---------- */
.ag-fenetre{border:0;border-radius:24px;padding:14px 18px 18px;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;
  background:var(--surface);color:var(--texte);box-shadow:var(--ombre)}
.ag-fenetre-petite{width:min(400px,calc(100vw - 24px))}
.ag-fenetre::backdrop{background:rgba(0,0,0,.28)}
.ag-fenetre-haut{display:flex;align-items:center;gap:2px;margin:-4px -8px 4px 0}
.ag-fenetre-haut h2{font:600 17px/1.2 var(--heading);margin:0}
.ag-fenetre-bas{display:flex;align-items:center;gap:8px;margin-top:16px}
.ag-titre-champ{width:100%;border:0;border-bottom:1px solid var(--ligne);padding:8px 0 8px 36px;font:400 22px/1.3 var(--heading);background:transparent;margin-bottom:12px}
.ag-titre-champ:focus,.ag-titre-champ:focus-visible{outline:0;border-bottom:2px solid var(--c-secondaire)}
.ag-ligne{display:flex;align-items:center;gap:8px;padding:5px 0;flex-wrap:wrap}
.ag-ligne-icone{width:28px;display:grid;place-items:center;color:var(--texte-doux);flex:none;align-self:flex-start;padding-top:8px}
.ag-ligne input:not([type=checkbox]),.ag-ligne select,.ag-ligne textarea{height:36px;border:1px solid transparent;border-radius:10px;padding:0 10px;background:var(--surface-2)}
.ag-ligne input:focus,.ag-ligne select:focus,.ag-ligne textarea:focus{outline:0;border-color:var(--c-secondaire);background:var(--surface)}
.ag-ligne #fe-lieu,.ag-ligne #fe-visio,.ag-ligne textarea{flex:1;min-width:0}
.ag-ligne textarea{height:auto;padding:8px 10px;resize:vertical}
.ag-quand-champs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1}
.ag-case{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-left:4px;white-space:nowrap}
.ag-erreur{margin:10px 0 0 36px;color:var(--danger);background:var(--danger-fond);border-radius:10px;padding:8px 12px}
.ag-etiquette{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--c-secondaire-voile);color:var(--c-secondaire-texte);font-size:12px;font-weight:600}
.ag-detail-titre{font:400 22px/1.3 var(--heading);margin:6px 0 4px}
.ag-detail-quand{margin:0;color:var(--texte-doux)}
.ag-detail-note{margin:10px 0 0;color:var(--texte-doux);font-size:13px}
.ag-detail-note:empty{display:none}
.ag-historique{margin-top:14px;border-top:1px solid var(--ligne);padding-top:10px;font-size:12.5px;color:var(--texte-doux)}
.ag-historique p{margin:4px 0}
.ag-corbeille{list-style:none;margin:0;padding:0}
.ag-corbeille li{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--ligne)}
.ag-corbeille li div{flex:1;min-width:0}
.ag-corbeille li small{display:block;color:var(--texte-doux)}
.ag-corbeille-vide{color:var(--texte-doux);padding:12px 4px}
.ag-raccourcis{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:6px 0 0}
.ag-raccourcis dt{font:500 12px var(--mono);background:var(--surface-2);border-radius:6px;padding:2px 8px;justify-self:start}
.ag-raccourcis dd{margin:0}

/* ---------- Rappels et réglages (étape 4) ---------- */
.ag-rappels{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.ag-rappel{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ag-rappel select{height:34px;border:1px solid transparent;border-radius:10px;padding:0 8px;background:var(--surface-2)}
.ag-rappel select:focus{outline:0;border-color:var(--c-secondaire);background:var(--surface)}
.ag-rappels .ag-lien{align-self:flex-start}
.ag-reglage{border-top:1px solid var(--ligne);padding:14px 0 6px}
.ag-reglage:first-of-type{border-top:0;padding-top:4px}
.ag-reglage h3{font:600 14.5px/1.3 var(--heading);margin:0 0 6px}
.ag-aide{margin:0 0 10px;color:var(--texte-doux);font-size:13px}
.ag-aide:empty{display:none}
.ag-boutons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ag-appareils{list-style:none;margin:10px 0 0;padding:0;font-size:13px;color:var(--texte-doux)}
.ag-appareils li{padding:3px 0}
.ag-ics{display:flex;gap:8px;margin:0 0 10px}
.ag-ics input{flex:1;min-width:0;height:36px;border:1px solid var(--ligne);border-radius:10px;padding:0 10px;font:12px var(--mono);background:var(--surface-2)}

/* ---------- Annonces (bas de l'écran) ---------- */
.ag-annonces{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:40;width:min(560px,calc(100vw - 24px));pointer-events:none}
.ag-annonce{display:flex;align-items:center;gap:12px;background:var(--c-foncee);color:#fff;border-radius:14px;padding:10px 12px 10px 16px;box-shadow:var(--ombre);pointer-events:auto}
.ag-annonce.ag-attention{background:var(--attention-fond);color:var(--attention);border:1px solid color-mix(in srgb,var(--attention) 30%,transparent)}
.ag-annonce span{flex:1}
.ag-annonce button{border:0;background:none;color:inherit;font-weight:600;cursor:pointer;padding:4px 6px}

/* ---------- Petits écrans ---------- */
@media (max-width:900px){
  .ag-vues button{padding:0 9px}
  .ag-marque b{display:none}
  .ag-marque{margin-right:4px}
}
@media (max-width:700px){
  .ag-entete{height:56px;gap:2px}
  .ag-marque,#b-aujourdhui{display:none}
  .ag-fleches .ag-icone{width:32px}
  .ag-periode{font-size:18px}
  .ag-vues{position:fixed;left:0;right:0;bottom:0;z-index:20;border-radius:0;border:0;border-top:1px solid var(--ligne);background:var(--surface);
    justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .ag-grille{padding:0 0 52px}
  /* Colonne coulissante : s'arrête au-dessus de la barre des vues ; un voile sombre derrière, qui la ferme d'un toucher */
  .ag-cote{position:fixed;top:56px;left:0;bottom:calc(52px + env(safe-area-inset-bottom));z-index:25;box-shadow:var(--ombre);width:min(290px,86vw);gap:10px;padding-top:10px}
  .ag-app.ag-cote-ouvert .ag-voile{display:block;position:fixed;top:56px;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));z-index:24;background:rgba(0,0,0,.28)}
  .ag-app.ag-cote-ouvert .ag-flottant{display:none}
  .ag-app:not(.ag-cote-ouvert) .ag-cote{display:none}
  .ag-app.ag-cote-ferme.ag-cote-ouvert .ag-cote{display:flex}
  .ag-flottant{display:grid;place-items:center;position:fixed;right:16px;bottom:72px;z-index:21;width:56px;height:56px;border:0;border-radius:18px;
    background:var(--surface);color:var(--c-secondaire);box-shadow:0 2px 6px rgba(0,0,0,.2),0 8px 18px -4px rgba(0,0,0,.2);cursor:pointer}
  .ag-flottant .ag-ico{width:28px;height:28px}
  .ag-fenetre{border-radius:20px;padding:12px 14px 16px}
  .ag-titre-champ{padding-left:0}
  .ag-erreur{margin-left:0}
}