


:root{
 --ui-bg:#F7F7F8;--ui-surface:#FFFFFF;--ui-surface-2:#F4F4F6;--ui-border:#E4E4E8;--ui-border-strong:#D3D3DA;
 --ui-ink:#171719;--ui-text:#2A2A2E;--ui-muted:#5C5C64;--ui-faint:#8A8A92;
 --ui-accent:#26486B;--ui-accent-hover:#0F3156;--ui-accent-tint:#EEF2F7;--ui-on-accent:#FFFFFF;--ui-focus:#4A6B8F;
 --ui-green:#0A7A45;--ui-green-tint:#E6F6EC;--ui-blue:#0F62D6;--ui-blue-tint:#E9F1FE;
 --ui-violet:#6D3FD1;--ui-violet-tint:#F1ECFD;--ui-red:#C81E1E;--ui-red-tint:#FDECEC;--ui-on-danger:#FFFFFF;--ui-amber:#A85A00;--ui-amber-tint:#FDF3E3;
 --ui-radius-s:12px;--ui-radius-m:16px;--ui-radius-l:22px;
 --ui-elev-0:none;--ui-elev-1:0 1px 2px rgb(22 22 28 / .04),0 2px 8px -4px rgb(22 22 28 / .08);
 --ui-elev-2:0 1px 2px rgb(22 22 28 / .05),0 14px 30px -18px rgb(31 42 74 / .32);
 --ui-head-gap:28px;--ui-section-gap:48px;--ui-gutter:40px;
 --ui-ease:cubic-bezier(.22,.8,.3,1);

 --ui-radius-full:999px;
 --ui-dur-press:90ms;--ui-dur-micro:160ms;--ui-dur-sheet:220ms;--ui-dur-scene:350ms;
 --ui-highlight:rgb(255 255 255 / .22);
 /* L'ombre mélangée à une teinte pour son survol (.ui-btn--tone : 14 %), la valeur que la règle écrivait en dur. */
 --ui-shade:#000;
 --ui-media-bg:#111114;--ui-on-media:#FFFFFF;--ui-on-media-track:rgb(255 255 255 / .5);--ui-on-media-line:rgb(255 255 255 / .28);--ui-glass:rgb(255 255 255 / .84);--ui-glass-strong:rgb(255 255 255 / .92);--ui-glass-border:rgb(22 22 28 / .08);
 --ui-elev-float:0 1px 2px rgb(22 22 28 / .06),0 12px 30px -12px rgb(31 42 74 / .3);

 --ui-scrim:rgb(22 22 28 / .32);
 --ui-elev-media:0 1px 2px rgb(16 30 48 / .12),0 4px 12px -4px rgb(16 30 48 / .3);
 --ui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
@media (max-width:560px){:root{--ui-head-gap:22px;--ui-section-gap:32px;--ui-gutter:20px}}


html#mobile-proposal.mob-cinema{
 color-scheme:dark;
 --ui-bg:#111114;--ui-surface:#1C1C21;--ui-surface-2:#26262D;--ui-border:rgb(255 255 255 / .1);--ui-border-strong:rgb(255 255 255 / .2);
 --ui-ink:#F5F5F7;--ui-text:#E4E4E9;--ui-muted:#A6A6AE;--ui-faint:#7E7E86;
 --ui-accent:#AFC6E0;--ui-accent-hover:#C8D8EA;--ui-accent-tint:rgb(175 198 224 / .16);--ui-on-accent:#111114;--ui-focus:#AFC6E0;
 --ui-green:#56C98E;--ui-green-tint:rgb(86 201 142 / .16);
 --ui-elev-0:none;--ui-elev-1:0 1px 2px rgb(0 0 0 / .3);--ui-elev-2:0 14px 30px -18px rgb(0 0 0 / .6);
 --ui-glass:rgb(30 30 36 / .96);--ui-glass-strong:rgb(30 30 36 / .98);--ui-glass-border:rgb(255 255 255 / .1);
 --ui-elev-float:0 1px 2px rgb(0 0 0 / .3),0 12px 30px -12px rgb(0 0 0 / .6);
 --ui-media-scrim:linear-gradient(180deg,rgb(17 17 20 / 0) 50%,rgb(17 17 20 / .6) 80%,#111114 100%);
 background:var(--ui-bg)}


html#mobile-proposal.mob-cinema :is(#campus-contact-guide,#campus-yann-guide){color-scheme:light}


html#mobile-proposal.mob-cinema #campus-navigation{
 color-scheme:light;
 --ui-surface:#FFFFFF;--ui-surface-2:#F4F4F6;--ui-border:#E4E4E8;--ui-border-strong:#D3D3DA;
 --ui-ink:#171719;--ui-text:#2A2A2E;--ui-muted:#5C5C64;--ui-faint:#8A8A92;
 --ui-accent:#26486B;--ui-accent-hover:#0F3156;--ui-accent-tint:#EEF2F7;--ui-on-accent:#FFFFFF;--ui-focus:#4A6B8F;
 --ui-elev-float:0 1px 2px rgb(22 22 28 / .06),0 12px 30px -12px rgb(31 42 74 / .3)}

/* ---- Titres : une seule hiérarchie ------------------------------------------------------------------------------------ */
html.campus-unified:is(.campus-unified,#mobile-proposal) body:is(body,#premium-home) :is(main h1,.page-heading h1,.page-head h1,.ui-title-1){
 font-family:var(--quiet-font)!important;font-size:32px!important;line-height:1.15!important;font-weight:700!important;
 letter-spacing:-.7px!important;color:var(--ui-ink)!important;margin:0!important;text-wrap:balance}
html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(.page-heading,.page-head,.intro,.page-intro)>p,
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-subtitle{
 font-size:16px!important;line-height:1.5!important;color:var(--ui-muted)!important;margin:8px 0 0!important;max-width:62ch}
html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(main h2.ui-title-2,.ui-title-2,.ui-section-head h2){
 font-family:var(--quiet-font)!important;font-size:22px!important;line-height:1.25!important;font-weight:650!important;
 letter-spacing:-.3px!important;color:var(--ui-ink)!important;margin:0!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-title-3{
 margin:0!important;font-size:17px!important;line-height:1.3!important;font-weight:600!important;letter-spacing:-.2px!important;color:var(--ui-ink)!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-meta{font-size:13px!important;line-height:1.45!important;color:var(--ui-muted)!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-kicker{font-size:14px!important;font-weight:600!important;color:var(--ui-tone,var(--ui-accent))!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:560px){
 html.campus-unified:is(.campus-unified,#mobile-proposal) body:is(body,#premium-home) :is(main h1,.page-heading h1,.page-head h1,.ui-title-1){font-size:28px!important}
 html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(main h2.ui-title-2,.ui-title-2,.ui-section-head h2){font-size:20px!important}
}

/* En-tête de page : titre + sous-titre (+ actions à droite), même place sur toutes les pages. */
.ui-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:0 0 var(--ui-head-gap)}
.ui-page-head>div:first-child{min-width:0}
.ui-section{margin-top:var(--ui-section-gap)}
.ui-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}

/* ---- Texte lisible : plus de gris pâle pour un texte à lire ---------------------------------------------------------- */
html.campus-unified :is(.t-voice,.voice){color:var(--ui-muted)!important}
html.campus-unified :is(.intro,.page-intro,.page-head) p{color:var(--ui-muted)}

/* ---- Cartes, tuiles d'icône, teintes (le niveau Réseau) --------------------------------------------------------------- */
.ui-card{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-l);box-shadow:var(--ui-elev-1);padding:28px}
.ui-card--tinted{background:linear-gradient(160deg,var(--ui-tone-tint,var(--ui-accent-tint)) 0%,var(--ui-surface) 72%)}
@media (max-width:560px){.ui-card{padding:20px}}
.ui-tile{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--ui-radius-m);background:var(--ui-tone,var(--ui-accent));color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 8px 18px -10px var(--ui-tone,var(--ui-accent))}
.ui-tile svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-tile--lg{width:56px;height:56px}.ui-tile--lg svg{width:28px;height:28px}
.ui-tone-accent{--ui-tone:var(--ui-accent);--ui-tone-tint:var(--ui-accent-tint)}
.ui-tone-green{--ui-tone:var(--ui-green);--ui-tone-tint:var(--ui-green-tint)}
.ui-tone-blue{--ui-tone:var(--ui-blue);--ui-tone-tint:var(--ui-blue-tint)}
.ui-tone-violet{--ui-tone:var(--ui-violet);--ui-tone-tint:var(--ui-violet-tint)}
.ui-tone-red{--ui-tone:var(--ui-red);--ui-tone-tint:var(--ui-red-tint)}
.ui-tone-amber{--ui-tone:var(--ui-amber);--ui-tone-tint:var(--ui-amber-tint)}
.ui-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:999px;background:var(--ui-tone-tint,var(--ui-accent-tint));color:var(--ui-tone,var(--ui-accent));font-size:13px;font-weight:600}

/* ---- Boutons : marine plein ou contour, jamais gris sur gris ---------------------------------------------------------- */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid transparent;
 background:var(--ui-accent);color:var(--ui-on-accent)!important;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
 box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 6px 16px -10px var(--ui-accent);transition:background-color .16s var(--ui-ease),transform 90ms var(--ui-ease)}
.ui-btn:hover{background:var(--ui-accent-hover)}
.ui-btn:active{transform:scale(.98)}
.ui-btn--secondary{background:var(--ui-surface);color:var(--ui-ink)!important;border-color:var(--ui-border-strong);box-shadow:none}
.ui-btn--secondary:hover{background:var(--ui-surface-2)}
.ui-btn--tone{background:var(--ui-tone)}
.ui-btn[disabled],.ui-btn[aria-disabled=true]{opacity:.5;cursor:default;transform:none}
/* Un bouton désactivé (pendant un enregistrement) ne réagit pas au survol : il garde son fond de repos ; son curseur reste
   « default » malgré la règle campus-unified qui met la main sur tous les boutons. */
.ui-btn[disabled]:hover,.ui-btn[aria-disabled=true]:hover{background:var(--ui-accent)}
.ui-btn--secondary[disabled]:hover,.ui-btn--secondary[aria-disabled=true]:hover{background:var(--ui-surface)}
html.campus-unified body .ui-btn:is([disabled],[aria-disabled=true]){cursor:default}
.ui-link{color:var(--ui-accent);font-weight:600;text-decoration:none}.ui-link:hover{text-decoration:underline;text-underline-offset:3px}
:is(.ui-btn,.ui-link,.ui-field input,.ui-field select,.ui-field textarea):focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}

/* ---- Champs de formulaire : libellé encre, bordure visible ------------------------------------------------------------ */
.ui-field{display:grid;gap:6px}
.ui-field>label,.ui-label{font-size:14px;font-weight:600;color:var(--ui-ink)}
.ui-field :is(input,select,textarea),.ui-input{min-height:46px;padding:11px 14px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-s);background:var(--ui-surface);color:var(--ui-ink);font-size:15px!important}
.ui-field :is(input,textarea)::placeholder{color:var(--ui-faint)}
/* Une liste déroulante : la flèche du navigateur, collée au bord, cède la place à un chevron à 14 px du bord. */
.ui-field select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-right:42px;
 background:var(--ui-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px}
.ui-field .ui-help{font-size:13px;color:var(--ui-muted)}

/* ---- Fenêtres : en-tête avec tuile, actions en bas -------------------------------------------------------------------- */
.ui-dialog-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ui-dialog-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:24px}
@media (max-width:560px){.ui-dialog-actions{flex-direction:column-reverse}.ui-dialog-actions>*{width:100%}}

/* ---- Listes longues : un bloc par mois, « Voir plus » au lieu d'un défilement sans fin -------------------------------- */
.ui-group-title{font-size:14px;font-weight:600;color:var(--ui-muted);margin:24px 0 10px}
.ui-more{display:flex;justify-content:center;margin-top:20px}

/* ---- État vide : une tuile, une phrase, une action --------------------------------------------------------------------- */
.ui-empty{display:flex;align-items:flex-start;gap:16px;padding:24px;border-radius:var(--ui-radius-l);background:var(--ui-surface);border:1px dashed var(--ui-border-strong)}

@media (prefers-reduced-motion:reduce){.ui-btn{transition:none}}

/* ---- lane events additions ---- */


.ui-btn.ui-btn--tone:hover{background:color-mix(in srgb,var(--ui-tone),var(--ui-shade) 14%)}
.ui-btn.ui-btn--tone[disabled]:hover,.ui-btn.ui-btn--tone[aria-disabled=true]:hover{background:var(--ui-tone)}
.ui-btn svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(.ui-field>label,.ui-field>legend,.ui-label){font-size:14px!important;font-weight:600!important;line-height:1.4!important;color:var(--ui-ink)!important;padding:0}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field .ui-help{font-size:13px!important;line-height:1.45!important;color:var(--ui-muted)!important;margin:0!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){width:100%;min-width:0;min-height:46px;font-size:15px!important;line-height:1.4!important;border:1px solid var(--ui-border-strong)!important;border-radius:var(--ui-radius-s)!important;background:var(--ui-surface)!important;color:var(--ui-ink)!important;box-shadow:none!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field textarea{min-height:120px;resize:vertical}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field.ui-field select:not([multiple]):not([size]){appearance:none!important;-webkit-appearance:none!important;padding-right:42px!important;
 background:var(--ui-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px!important}
/* Une date ou une heure a la hauteur d'un champ texte voisin (1 ligne + 11 px de marge haut et bas + 1 px de bord) : l'éditeur
   interne de Chrome ajoutait 1 px de marge, 47 px au lieu de 46 (48,4 au lieu de 46,4 sur téléphone), dans les deux formulaires. */
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field input:is([type=date],[type=time]){height:calc(1lh + 24px)!important}
.ui-field input:is([type=date],[type=time])::-webkit-datetime-edit-fields-wrapper{padding:0}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field :is(input,select,textarea):focus-visible{outline:2px solid var(--ui-focus)!important;outline-offset:1px!important;border-color:var(--ui-focus)!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field [aria-invalid=true]{border-color:var(--ui-red)!important}
.ui-field{align-content:start}  /* two fields side by side: the label stays on the input when one has a help line */
.ui-field fieldset,fieldset.ui-field{border:0;margin:0;padding:0;min-width:0}
.ui-error{font-size:13px;color:var(--ui-red);margin:0}.ui-error:empty{display:none}
.ui-check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-check{font-size:15px!important;font-weight:500!important;color:var(--ui-ink)!important}
.ui-check input{width:20px;height:20px;margin:0;accent-color:var(--ui-accent)}


.ui-avatar{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--ui-accent-tint);color:var(--ui-accent);font-size:12px;font-weight:600;line-height:1;letter-spacing:0}
.ui-avatar img{width:100%;height:100%;object-fit:cover}
.ui-avatar[data-initiales]::before{content:attr(data-initiales)}


.ui-multi{min-width:0}
.ui-multi>summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:11px 14px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-s);background:var(--ui-surface);color:var(--ui-ink);list-style:none;cursor:pointer;transition:border-color var(--ui-dur-micro) var(--ui-ease),background-color var(--ui-dur-micro) var(--ui-ease)}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-multi>summary{font-size:15px!important;font-weight:400!important;line-height:1.4!important;color:var(--ui-ink)!important}
@media (max-width:560px){html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-multi>summary{font-size:16px!important}}
.ui-multi>summary::-webkit-details-marker{display:none}
.ui-multi>summary::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;background:currentColor;-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transform:rotate(90deg);transition:transform var(--ui-dur-micro) var(--ui-ease)}
.ui-multi[open]>summary::after{transform:rotate(-90deg)}
.ui-multi>summary:hover{border-color:var(--ui-focus);background:var(--ui-accent-tint)}
.ui-multi>summary:active{border-color:var(--ui-focus);background:oklch(from var(--ui-accent-tint) calc(l - 0.03) c h)}
.ui-multi>summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px;border-color:var(--ui-focus)}
.ui-multi[open]>summary{border-color:var(--ui-focus)}
.ui-multi-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-multi-value.ui-multi-vide{color:var(--ui-muted)!important}
.ui-multi-list{margin-top:4px;padding:4px 0;max-height:272px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-s);background:var(--ui-surface)}
.ui-multi-list .ui-check{display:flex;transition:background-color var(--ui-dur-micro) var(--ui-ease);
 padding:0 14px} /* design-gate: allow the 14 px text inset of the .ui-field box above it (11px 14px): each checkbox lines up with the closed field's text */
.ui-multi-list .ui-check:hover{background:var(--ui-accent-tint)}
.ui-multi-list .ui-check:active{background:oklch(from var(--ui-accent-tint) calc(l - 0.03) c h)}
.ui-multi-list .ui-check input{flex:none;min-height:0;padding:0}  /* not the .ui-field input box: a 20 px checkbox in a 44 px row */
.ui-multi-list .ui-check input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ui-multi>summary,.ui-multi>summary::after,.ui-multi-list .ui-check{transition:none}}


.ui-multi-search{margin-top:4px;padding:8px;border:1px solid var(--ui-border-strong);border-bottom-color:var(--ui-border);border-radius:var(--ui-radius-s) var(--ui-radius-s) 0 0;background:var(--ui-surface)}
.ui-multi-search input{width:100%}
.ui-multi-search+.ui-multi-list{margin-top:0;border-top:0;border-radius:0 0 var(--ui-radius-s) var(--ui-radius-s)}
.ui-multi-list .ui-check[hidden]{display:none}
.ui-multi-list[data-vide]::after{content:attr(data-vide);display:block;padding:12px 14px;color:var(--ui-muted)}
@media (max-width:560px){html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important}}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-group-title{font-size:14px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:0!important;color:var(--ui-muted)!important}
/* A text action (« Ajouter à mon agenda », « Tous les projets ») : the link look, a 44 px tap height. */
:is(button,a).ui-link--action{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;cursor:pointer}
html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(button,a).ui-link--action{font-size:15px!important;font-weight:600!important;color:var(--ui-accent)!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(button,a).ui-link--action.ui-link--danger{color:var(--ui-red)!important}
.ui-link svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Date tile: weekday (tone colour, red today), day, month. Takes the tone of its event (.ui-tone-*), neutral without one. */
.ui-date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:none;width:56px;height:64px;border-radius:var(--ui-radius-s);background:var(--ui-tone-tint,var(--ui-surface-2));line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.ui-date>span{font-size:12px;font-weight:600;color:var(--ui-tone,var(--ui-muted))}
.ui-date>strong{font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--ui-ink)}
.ui-date>span+strong+span{font-weight:500;color:var(--ui-muted)}
.ui-date.is-today>span:first-child{color:var(--ui-red)}
.ui-date--s{width:46px;height:52px;gap:2px}.ui-date--s>span{font-size:11px}.ui-date--s>strong{font-size:19px}

/* Dialog shell: <dialog class="ui-dialog">, close button top right, .ui-dialog-head (tile + title), .ui-dialog-actions.
   On a phone it is a bottom sheet (full width, anchored to the bottom, above the bottom bar since a modal dialog is on top). */
.ui-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:28px;border:0;border-radius:var(--ui-radius-l);background:var(--ui-surface);color:var(--ui-text);box-shadow:0 1px 2px rgb(22 22 28 / .06),0 30px 70px -30px rgb(31 42 74 / .45);overflow:auto;overscroll-behavior:contain}
.ui-dialog--wide{width:min(680px,calc(100vw - 32px))}
.ui-dialog::backdrop{background:rgb(22 22 28 / .42)}
.ui-dialog[open]{animation:ui-dialog-in .22s var(--ui-ease)}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
html.campus-unified:is(.campus-unified,#mobile-proposal) body dialog.ui-dialog:focus-visible{outline:none!important}
.ui-dialog-close{position:absolute;top:18px;right:18px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--ui-surface-2);color:var(--ui-ink);cursor:pointer;transition:background-color .16s var(--ui-ease)}
.ui-dialog-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ui-dialog-close:hover{background:var(--ui-border)}
.ui-dialog-close:active{background:var(--ui-border-strong)}
.ui-dialog .ui-dialog-head{padding-right:52px}
.ui-dialog-head>div{min-width:0}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-dialog-head .ui-meta{margin:4px 0 0!important}
/* Une fenêtre ouverte : la carte de la visite guidée (onboarding.js) se retire le temps de la fenêtre. Sous le voile, elle débordait
   sous le bord de la fenêtre (6 px à 1826 px de large) sans pouvoir être touchée ; elle revient à la fermeture. */
body:has(dialog:modal) #campus-yann-guide{visibility:hidden!important}
/* Téléphone : la feuille monte jusqu'à 8 px du haut (sous l'encoche en application installée). Elle couvre toute la barre du logo
   (56 px) au lieu de la couper en deux à 24 px : logo, ☰ et compte ne dépassent plus au-dessus du titre (iOS, grande feuille). */
@media (max-width:560px){
 html.campus-unified:is(.campus-unified,#mobile-proposal) body dialog.ui-dialog[open]{inset:auto 0 0 0!important;width:100%!important;max-width:100%!important;max-height:calc(100dvh - 8px - env(safe-area-inset-top))!important;margin:0!important;padding:28px 20px calc(20px + env(safe-area-inset-bottom))!important;border-radius:var(--ui-radius-l) var(--ui-radius-l) 0 0!important;animation-name:ui-sheet-in}
 .ui-dialog::before{content:"";position:absolute;top:8px;left:calc(50% - 20px);width:40px;height:5px;border-radius:var(--ui-radius-full);background:var(--ui-border-strong)}
 .ui-dialog-close{top:16px;right:12px}
 @keyframes ui-sheet-in{from{transform:translateY(32px);opacity:.5}}
}
@media (prefers-reduced-motion:reduce){.ui-dialog[open]{animation:none}}



.ui-seg{display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:var(--ui-radius-full);background:var(--ui-surface-2);border:1px solid var(--ui-border)}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-seg>:is(button,a){display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto!important;min-height:38px!important;padding:0 16px!important;border:0!important;border-radius:var(--ui-radius-full)!important;background:transparent!important;color:var(--ui-muted)!important;font-size:14px!important;font-weight:500!important;text-decoration:none!important;white-space:nowrap;box-shadow:none!important;transition:background-color var(--ui-dur-micro) var(--ui-ease),color var(--ui-dur-micro) var(--ui-ease)}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-seg>:is(button,a):hover{color:var(--ui-ink)!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-seg>:is(button,a):is([aria-pressed=true],[aria-selected=true],[aria-current=page]){background:var(--ui-surface)!important;color:var(--ui-ink)!important;font-weight:600!important;box-shadow:var(--ui-elev-1)!important}
@media (max-width:560px){.ui-seg{display:flex;width:100%}html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-seg>:is(button,a){flex:1 1 0;min-width:0;min-height:44px!important;padding:0 8px!important}}


/* Key figures: <dl class="ui-figures"><div class="ui-figure"><dt>label</dt><dd>value</dd></div>…</dl>. */
.ui-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0}
.ui-figure{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0;padding:12px 14px;border-radius:var(--ui-radius-s);background:var(--ui-surface-2)}
.ui-figure>dt{font-size:13px;line-height:1.35;color:var(--ui-muted)}
.ui-figure>dd{margin:0;font-size:17px;font-weight:650;line-height:1.3;color:var(--ui-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---- lane shell additions ---- */



/* Titres par défaut, partout où une page n'a pas encore ses classes ui-title-* : h1 = T1, h2 = T2, h3 = T3, en encre
   (--ui-ink : une carte sombre la redéfinit en blanc). Remplace ce que premium.css imposait (h2 18 px / 400, h3 15 px / 400) :
   les anciennes tailles de page restent sans effet ; une classe ui-title-* ou une règle de page plus précise et !important l'emporte. */
html.campus-unified h1{font-size:32px!important;line-height:1.15;font-weight:700!important;letter-spacing:-.7px!important;color:var(--ui-ink)!important}
html.campus-unified h2{font-size:22px!important;line-height:1.25;font-weight:650!important;letter-spacing:-.3px!important;color:var(--ui-ink)!important}
html.campus-unified h3{font-size:17px!important;line-height:1.3;font-weight:600!important;letter-spacing:-.2px!important;color:var(--ui-ink)!important}
@media (max-width:560px){html.campus-unified h1{font-size:28px!important}html.campus-unified h2{font-size:20px!important}}

/* Sous-titre de page (.ui-subtitle), aussi pour les en-têtes déjà en place : le paragraphe qui suit le h1 de la page. */
html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(main h1+p,.page-heading>div>p,.association-heading>p,.intro>div>p:not(.eyebrow),.challenge-heading>div>p,.account-intro p,.ict-section-heading p){
 font-family:var(--quiet-font)!important;font-size:16px!important;font-weight:400!important;font-style:normal!important;line-height:1.5!important;letter-spacing:0!important;
 color:var(--ui-muted)!important;margin:8px 0 0!important;max-width:62ch}

/* Surtitre hérité (challenge) : comme .ui-kicker, sans capitales espacées. */
html.campus-unified:is(.campus-unified,#mobile-proposal) body .challenge-heading .challenge-kicker{
 display:block;font-size:14px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:0!important;text-transform:none!important;color:var(--ui-tone,var(--ui-accent))!important;margin:0 0 6px!important}

/* Conteneur de page : même bord gauche que le fil d'Ariane (gouttière 40 px, 20 px sur téléphone), largeur de lecture bornée.
   Le haut de page vient du shell (bandeau 75 px + 24 px) : le h1 tombe à la même hauteur sur toutes les pages. */
.ui-page{box-sizing:border-box;width:100%;max-width:1240px;margin:0!important;padding-left:var(--ui-gutter)!important;padding-right:var(--ui-gutter)!important;padding-bottom:56px}
.ui-page-head+.ui-section{margin-top:0}

/* Puce d'action (exemples de recherche, filtres) : contour lisible, texte encre, 44 px au doigt. */
.ui-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--ui-border-strong);border-radius:999px;background:var(--ui-surface);color:var(--ui-ink)!important;font-size:14px!important;font-weight:500!important;line-height:1.3;text-align:left;text-decoration:none;cursor:pointer;
 transition:background-color .16s var(--ui-ease),border-color .16s var(--ui-ease),transform 90ms var(--ui-ease)}
.ui-chip:hover{background:var(--ui-accent-tint);border-color:var(--ui-focus)}
.ui-chip:active{transform:scale(.98)}
.ui-chip:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
.ui-chip[aria-pressed=true],.ui-chip[aria-current]{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent)!important}
@media (max-width:1024px){.ui-chip{min-height:44px}}

/* Carte sombre (Système IA) : mêmes titres, surtitre, tuile et lien qu'une carte claire, en encre claire. Tuile neutre (verre clair) :
   la couleur reste réservée aux types de contenu. */
.ui-card--dark{--ui-dark:#232325;--ui-ink:#FFFFFF;--ui-text:#F2F2F4;--ui-muted:#BDBDC6;--ui-accent:#C9D8EA;--ui-border:rgb(255 255 255 / .12);--ui-tone:rgb(255 255 255 / .14);
 background:var(--ui-dark);border-color:var(--ui-dark);color:var(--ui-text)}
.ui-card--dark .ui-kicker{--ui-tone:var(--ui-accent)}
.ui-card--dark .ui-link{color:var(--ui-accent)}

@media (prefers-reduced-motion:reduce){.ui-chip{transition:none}}

/* ---- lane cours additions ---- */
/* Barre de progression : la part vue, dans la couleur du sens (vert = vu, marine = en cours). Sur la piste --ui-surface-2. */
.ui-progress{display:block;height:8px;border-radius:999px;background:var(--ui-surface-2);box-shadow:inset 0 0 0 1px var(--ui-border);overflow:hidden}
.ui-progress>i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ui-tone,var(--ui-accent));transition:width .3s var(--ui-ease)}
/* Bouton rond d'icône (flèches d'une rangée qui défile) : 44 px, contour visible, jamais gris sur gris. */
.ui-icon-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--ui-border-strong);background:var(--ui-surface);color:var(--ui-ink);cursor:pointer;transition:background-color .16s var(--ui-ease),transform 90ms var(--ui-ease)}
.ui-icon-btn:hover{background:var(--ui-surface-2)}
.ui-icon-btn:active{transform:scale(.96)}
.ui-icon-btn:disabled{opacity:.4;cursor:default;transform:none}
.ui-icon-btn:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
.ui-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Petite tuile (ligne de liste : thème, fichier) et tuile douce (teinte + couleur du sens, pour un élément secondaire). */
.ui-tile--soft{background:var(--ui-tone-tint,var(--ui-accent-tint));color:var(--ui-tone,var(--ui-accent));box-shadow:none}
@media (prefers-reduced-motion:reduce){.ui-progress>i,.ui-icon-btn{transition:none}}

/* ---- lane reseau additions ---- */


html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-btn{box-sizing:border-box;font-size:15px!important;font-weight:600!important;line-height:1.25!important;border-radius:999px!important;padding:10px 20px!important;min-height:44px!important;text-decoration:none!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body :is(.ui-field>label,.ui-label) .ui-optional{font-size:13px!important;font-weight:400!important;color:var(--ui-muted)!important;margin-left:4px}
/* Une phrase d'explication sous un titre de section ou de carte (15 px, gris lisible). */
.ui-desc{margin:4px 0 0;max-width:70ch}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-desc{font-size:15px!important;line-height:1.5!important;font-weight:400!important;color:var(--ui-muted)!important}
button.ui-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:inherit}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-link{font-size:15px!important;font-weight:600!important;color:var(--ui-accent)!important}
.ui-tone-neutral{--ui-tone:var(--ui-muted);--ui-tone-tint:var(--ui-surface-2)}
.ui-tile--sm{width:40px;height:40px;border-radius:var(--ui-radius-s)}.ui-tile--sm svg{width:20px;height:20px}


/* C. En-tête de carte : tuile + titre + une phrase (+ action à droite). */
.ui-card-head{display:flex;align-items:flex-start;gap:16px;margin:0 0 24px}
.ui-card-head>div{flex:1;min-width:0}
.ui-card-head>:is(.ui-btn,.ui-badge){flex:none}
@media (max-width:560px){.ui-card-head{flex-wrap:wrap}.ui-card-head>.ui-btn{width:100%}}

/* D. Onglets : une rangée, l'onglet ouvert en marine. Liens (aria-current) ou boutons (aria-selected / aria-pressed, aussi pour un
      choix Oui / Non). */
.ui-tabs{box-sizing:border-box;display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;padding:4px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);box-shadow:var(--ui-elev-1);overflow-x:auto;scrollbar-width:none}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tab{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-tab{padding:10px 18px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--ui-ink)!important;font-size:15px!important;font-weight:600!important;line-height:1.2!important;text-decoration:none!important;white-space:nowrap;cursor:pointer;box-shadow:none!important;transition:background-color .16s var(--ui-ease),color .16s var(--ui-ease)}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-tab:hover{background:var(--ui-surface-2)!important}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-tab:is([aria-current=page],[aria-current=true],[aria-selected=true],[aria-pressed=true],:has(>input:checked)){background:var(--ui-accent)!important;color:var(--ui-on-accent)!important}
/* Onglet-radio (un choix dans un formulaire) : la case reste focalisable, invisible ; le focus encadre l'onglet. */
.ui-tab>input[type=radio]{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.ui-tab:has(>input:focus-visible){outline:2px solid var(--ui-focus);outline-offset:-2px}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-tab:focus-visible{outline:2px solid var(--ui-focus)!important;outline-offset:-2px!important}
.ui-tab svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-tab-count{box-sizing:border-box;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--ui-surface-2);color:var(--ui-ink);font-size:13px;font-weight:600}
.ui-tab:is([aria-current=page],[aria-current=true],[aria-selected=true],[aria-pressed=true],:has(>input:checked)) .ui-tab-count{background:rgb(255 255 255 / .2);color:inherit}
.ui-tabs-sep{flex:none;width:1px;align-self:stretch;margin:8px 4px;background:var(--ui-border-strong)}

/* E. Listes dans une carte (réglages, factures, programmes) et rangées cliquables (contacts). */
.ui-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.ui-row{display:flex;align-items:center;gap:16px;min-width:0;padding:18px 0;border-top:1px solid var(--ui-border)}
.ui-list>.ui-row:first-child{border-top:0;padding-top:0}
.ui-list>.ui-row:last-child{padding-bottom:0}
.ui-row-main{flex:1;min-width:0}
.ui-row-main>:is(.ui-meta,.ui-desc){display:block}.ui-row-main>.ui-desc{margin-top:2px}
.ui-row-end>.ui-link{display:inline-flex;align-items:center;min-height:44px}
.ui-row-title{display:block;margin:0}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-row-title{font-size:16px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:-.1px!important;color:var(--ui-ink)!important;overflow-wrap:anywhere}
.ui-row-end{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 12px;flex:none}
@media (max-width:640px){.ui-row{flex-wrap:wrap}.ui-row-end{width:100%;justify-content:flex-start}.ui-row:has(>.ui-tile--sm)>.ui-row-end{padding-left:56px}}
.ui-action{box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;min-height:72px;margin:0}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-action{padding:16px 18px!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-m)!important;background:var(--ui-surface)!important;color:var(--ui-ink)!important;font:inherit;text-align:left;text-decoration:none!important;box-shadow:var(--ui-elev-1)!important;cursor:pointer;transition:border-color .16s var(--ui-ease),background-color .16s var(--ui-ease)}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-action:hover{border-color:var(--ui-tone,var(--ui-border-strong))!important;background:var(--ui-tone-tint,var(--ui-surface-2))!important}
.ui-action>div{flex:1;min-width:0}
.ui-action-end{flex:none;width:20px;height:20px;color:var(--ui-tone,var(--ui-muted));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* F. Champs en grille (deux colonnes, une sur téléphone) et case à cocher en carte. */
.ui-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ui-fields>.ui-field--wide{grid-column:1/-1}
.ui-fieldset{min-width:0;margin:0;padding:0;border:0}
@media (max-width:640px){.ui-fields{grid-template-columns:minmax(0,1fr)}}

/* G. Fenêtres : surface blanche, en-tête .ui-dialog-head (tuile, titre, fermer), actions .ui-dialog-actions. */
.ui-close{display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-close{padding:0!important;border:0!important;border-radius:50%!important;background:var(--ui-surface-2)!important;color:var(--ui-ink)!important;cursor:pointer;transition:background-color .16s var(--ui-ease)}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-close:hover{background:var(--ui-border)!important}
.ui-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* H. Message d'état sous un formulaire, et encadré teinté (une information, pas une alerte). */
.ui-status{margin:12px 0 0}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-status{font-size:14px!important;font-weight:600!important;line-height:1.45!important;color:var(--ui-tone,var(--ui-green))!important}
.ui-status:empty{display:none}
.ui-notice{box-sizing:border-box;display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;border-radius:var(--ui-radius-m);background:var(--ui-tone-tint,var(--ui-accent-tint))}
html.campus-unified:is(.campus-unified,#mobile-proposal) body .ui-notice{color:var(--ui-ink)!important;font-size:15px!important;line-height:1.5!important}
.ui-notice svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--ui-tone,var(--ui-accent));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){:is(.ui-tab,.ui-action,.ui-close){transition:none}}



:root{--ui-max:1320px}
html.campus-unified body :is(.ui-page,main#ev,.content.sia,.library-surface>header.top,.library-surface>main.wrap,.challenge-page,.courses-page){
 box-sizing:border-box;width:100%;max-width:var(--ui-max)!important;margin-left:auto!important;margin-right:auto!important}
html.campus-unified body :is(.challenge-page,.courses-page){padding-left:var(--ui-gutter)!important;padding-right:var(--ui-gutter)!important}
html.campus-unified body .campus-pagebar{box-sizing:border-box;max-width:var(--ui-max)!important;margin-left:auto!important;margin-right:auto!important}



/* Champs à 16 px : Safari n'agrandit plus la page quand on touche un champ. */
html#mobile-proposal.campus-unified body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){font-size:16px!important}


html#mobile-proposal.campus-unified body .ui-tab:is([aria-current=page],[aria-current=true],[aria-selected=true],[aria-pressed=true],:has(>input:checked)){background:var(--ui-accent-tint)!important;color:var(--ui-accent)!important}
html#mobile-proposal .ui-tab:is([aria-current=page],[aria-current=true],[aria-selected=true],[aria-pressed=true],:has(>input:checked)) .ui-tab-count{background:var(--ui-surface);color:var(--ui-accent)}
/* Toucher : pas de flash gris, un appui visible sur tout ce qui se touche, pas d'attente du double-tap. */
html#mobile-proposal{-webkit-tap-highlight-color:transparent}
html#mobile-proposal body :is(a[href],button,summary,[role=button],label[for]){touch-action:manipulation}
html#mobile-proposal body :is(a[href],button,summary,[role=button]):not(:disabled):not(.mob-appbar a,.mob-appbar button):active{opacity:.6}
/* L'aide flottante n'existe pas sur téléphone : l'aide est dans Mon espace › Aide et support, et la page Support s'ouvre sur
   WhatsApp et le téléphone. */
html#mobile-proposal body #campus-support-bubble{display:none!important}
html#mobile-proposal body.quiet-support #contacts{order:-1}


html#mobile-proposal.campus-unified body .ui-empty{padding:20px}
/* Sous-titres alignés à gauche, sous le titre, comme sur toutes les pages. */
html#mobile-proposal.campus-unified body :is(main h1+p,.ui-page-head p,.ui-subtitle){text-align:left!important;margin-left:0!important;margin-right:0!important}
html#mobile-proposal.campus-unified body :is(main h1,.ui-page-head){text-align:left!important}
/* Fenêtres qui n'ont pas encore la classe .ui-dialog (fiche partenaire, atelier d'un challenge, création mentor, administration) :
   sur téléphone, la même feuille que .ui-dialog, ancrée en bas avec sa poignée. La galerie photo d'un projet reste plein écran. */
@media (max-width:560px){
 html#mobile-proposal.campus-unified body :is(dialog.rs-detail,dialog#workshop-dialog,dialog#create-dialog,body.quiet-admin dialog)[open]{inset:auto 0 0 0!important;width:100%!important;max-width:100%!important;max-height:calc(100dvh - 8px - env(safe-area-inset-top))!important;margin:0!important;padding:28px 20px calc(20px + env(safe-area-inset-bottom))!important;border:0!important;border-radius:var(--ui-radius-l) var(--ui-radius-l) 0 0!important;overflow:auto;overscroll-behavior:contain;animation:ui-sheet-in var(--ui-dur-sheet) var(--ui-ease)}
 html#mobile-proposal.campus-unified body :is(dialog.rs-detail,dialog#workshop-dialog,dialog#create-dialog,body.quiet-admin dialog)::before{content:"";position:absolute;top:8px;left:calc(50% - 20px);width:40px;height:5px;border-radius:var(--ui-radius-full);background:var(--ui-border-strong)}
}
@media (prefers-reduced-motion:reduce){html#mobile-proposal.campus-unified body dialog[open]{animation:none!important}}



#mobile-proposal .mob-appbar{position:fixed;z-index:210;top:0;left:0;right:0;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;height:calc(var(--mob-appbar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0 8px;border-bottom:1px solid var(--ui-glass-border);background:var(--ui-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){#mobile-proposal .mob-appbar{background:var(--ui-surface)}}
@media(max-width:375px){#mobile-proposal .mob-appbar{padding-left:4px;padding-right:12px}}
#mobile-proposal .mob-menu-button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--ui-radius-full);background:transparent;color:var(--ui-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--ui-dur-micro) var(--ui-ease),transform var(--ui-dur-press) var(--ui-ease)}
#mobile-proposal :is(.mob-menu-button,.mob-close-icon) svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#mobile-proposal .mob-menu-button:hover{background:var(--ui-accent-tint)}
#mobile-proposal .mob-menu-button:focus-visible{outline:2px solid var(--ui-focus)!important;outline-offset:0!important}
/* Administration : les demandes en attente, en pastille sur ☰ (le compteur du bouton Administration de l'ordinateur). */
#mobile-proposal .mob-menu-badge{position:absolute;top:4px;right:0;min-width:20px;height:20px;padding:0 4px;border-radius:var(--ui-radius-full);outline:2px solid var(--ui-surface);background:var(--ui-red);color:var(--ui-on-danger);font-size:12px;font-weight:700;line-height:20px;text-align:center}
/* Le logo de l'ordinateur, noir sur la barre claire ; blanc sur les pages cinéma (comme sur le menu sombre de l'ordinateur). */
/* Au centre de l'écran, pas de la colonne du milieu (☰ et le compte n'ont pas la même marge intérieure). */
#mobile-proposal .mob-brand{position:absolute;top:calc(env(safe-area-inset-top) + 6px);left:0;right:0;width:max-content;margin:0 auto;display:grid;place-items:center;height:44px;padding:0 8px;border-radius:var(--ui-radius-s);-webkit-tap-highlight-color:transparent;transition:transform var(--ui-dur-press) var(--ui-ease)}
#mobile-proposal .mob-brand img{display:block;width:auto;height:32px;mix-blend-mode:multiply;transition:opacity var(--ui-dur-micro) var(--ui-ease)}
html#mobile-proposal.mob-cinema .mob-brand img{filter:invert(1);mix-blend-mode:screen}
#mobile-proposal .mob-brand:hover img{opacity:.72}
#mobile-proposal .mob-brand:focus-visible{outline:2px solid var(--ui-focus)!important;outline-offset:0!important}
html#mobile-proposal.campus-unified body .mob-appbar .mob-avatar{grid-column:3;justify-self:end;margin:0}
html#mobile-proposal.campus-unified body .mob-avatar{transition:transform var(--ui-dur-press) var(--ui-ease)}
html#mobile-proposal.campus-unified body .mob-avatar[aria-current]>span{background:var(--ui-accent);color:var(--ui-on-accent)!important}
#mobile-proposal .mob-appbar :is(.mob-menu-button,.mob-brand,.mob-avatar):active{transform:scale(.92)}
/* Le menu : le panneau déplié de l'ordinateur, posé à 8 px des bords comme sur l'ordinateur, sorti par la gauche. */
html#mobile-proposal #campus-navigation{position:fixed;z-index:1000;inset:calc(8px + env(safe-area-inset-top)) auto calc(8px + env(safe-area-inset-bottom)) 8px;width:min(296px,calc(100vw - 64px));display:flex;box-shadow:var(--ui-elev-float);transform:translateX(calc(-100% - 16px));visibility:hidden;transition:transform var(--ui-dur-sheet) var(--ui-ease),visibility 0s var(--ui-ease) var(--ui-dur-sheet)}
html#mobile-proposal.campus-drawer-open #campus-navigation{transform:none;visibility:visible;transition:transform var(--ui-dur-sheet) var(--ui-ease),visibility 0s}
/* Lignes de 44 px, 4 px entre elles : les 14 lignes de l'administration tiennent sur un écran de 844 px ; plus court, la liste du haut
   défile seule et Support reste visible en bas (nav.css empêchait la liste de rétrécir). */
html#mobile-proposal #campus-navigation :is(.campus-shortcuts,.campus-group,.campus-subnav){gap:4px}
html#mobile-proposal #campus-navigation .campus-shortcuts-main{flex:1 1 auto;min-height:0;overscroll-behavior:contain}
html#mobile-proposal #campus-navigation .campus-shortcuts a,html#mobile-proposal #campus-navigation .campus-group-toggle{height:44px;min-height:44px}
/* Libellés lisibles au doigt et en plein jour : le gris du système (5,7:1 sur la pastille) au lieu du gris du menu de l'ordinateur
   (3,5:1), l'encre au survol ; la ligne ouverte garde sa pastille noire. Couleur et fond changent en douceur. */
html#mobile-proposal #campus-navigation :is(.campus-shortcuts a,.campus-group-toggle){transition:background-color var(--ui-dur-micro) var(--ui-ease),color var(--ui-dur-micro) var(--ui-ease)}
html#mobile-proposal #campus-navigation :is(.campus-shortcuts a,.campus-group-toggle):not([aria-current]){color:var(--ui-muted)}
html#mobile-proposal #campus-navigation :is(.campus-shortcuts a,.campus-group-toggle):not([aria-current]):hover,
html#mobile-proposal #campus-navigation .campus-group.has-current>.campus-group-toggle{color:var(--ui-ink)}
/* L'en-tête du panneau : le logo à gauche, sur l'axe des icônes des lignes (12 px dans la ligne) ; la croix (le bouton « Replier le
   menu » de l'ordinateur) à droite, au bord droit des lignes. Leurs centres sont à la même hauteur : 12 + 68 / 2 = 24 + 44 / 2 = 46 px
   sous le haut du panneau. */
html#mobile-proposal #campus-navigation .campus-rail{padding-top:12px}
html#mobile-proposal #campus-navigation .campus-logo{margin:0 0 0 12px}
html#mobile-proposal #campus-navigation #campus-toggle{position:absolute;top:24px;right:6px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;transition:background-color var(--ui-dur-micro) var(--ui-ease),transform var(--ui-dur-press) var(--ui-ease)}
html#mobile-proposal #campus-navigation #campus-toggle>svg{display:none}
html#mobile-proposal #campus-navigation #campus-toggle:hover{background:var(--ui-border)}
html#mobile-proposal #campus-navigation #campus-toggle:active{transform:scale(.92)}
html#mobile-proposal #campus-navigation #campus-toggle:focus-visible{outline:2px solid var(--ui-focus)!important;outline-offset:0!important}
.mob-close-icon{display:grid;place-items:center}
/* Les boutons du haut de l'ordinateur, en lignes du menu ; Administration garde son compteur rouge, au bout de la ligne. */
html#mobile-proposal #campus-navigation .mob-role-count{min-width:20px;height:20px;margin-left:auto;padding:0 4px;border-radius:var(--ui-radius-full);background:var(--ui-red);color:var(--ui-on-danger);font-size:12px;font-weight:700;line-height:20px;text-align:center}
html#mobile-proposal #campus-backdrop{display:block!important;position:fixed;inset:0;z-index:999;padding:0;border:0;background:var(--ui-scrim);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--ui-dur-sheet) var(--ui-ease),visibility 0s var(--ui-ease) var(--ui-dur-sheet)}
html#mobile-proposal.campus-drawer-open #campus-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--ui-dur-sheet) var(--ui-ease),visibility 0s}
html#mobile-proposal.campus-drawer-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){html#mobile-proposal :is(#campus-navigation,#campus-navigation *,#campus-backdrop,.mob-appbar *){transition:none!important}}



html#mobile-proposal.campus-unified body .campus-pagebar .campus-breadcrumb{display:none!important}
html#mobile-proposal.campus-unified body .campus-pagebar>.mob-top{display:flex!important;align-items:center;width:100%;min-width:0}
html#mobile-proposal.campus-unified body .mob-avatar{display:grid;place-items:center;width:44px;height:44px;margin:0 -4px 0 auto;border-radius:var(--ui-radius-full);text-decoration:none!important;-webkit-tap-highlight-color:transparent}
html#mobile-proposal.campus-unified body .mob-avatar>span{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--ui-radius-full);background:var(--ui-accent-tint);color:var(--ui-accent)!important;font-size:13px;font-weight:700;line-height:1;transition:background-color var(--ui-dur-micro) var(--ui-ease)}
html#mobile-proposal.campus-unified body .mob-avatar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html#mobile-proposal.campus-unified body .mob-avatar:hover>span{background:var(--ui-border)}
html#mobile-proposal.campus-unified body .mob-avatar:focus-visible{outline:2px solid var(--ui-focus)!important;outline-offset:0!important}
html#mobile-proposal.campus-unified body .mob-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-10px;padding:0 16px 0 4px;border-radius:var(--ui-radius-s);color:var(--ui-accent)!important;font:500 17px/1.2 var(--quiet-font)!important;letter-spacing:-.2px;text-decoration:none!important;-webkit-tap-highlight-color:transparent}
html#mobile-proposal.campus-unified body .mob-back svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html#mobile-proposal.campus-unified body .mob-back:active{opacity:.55}
html#mobile-proposal.campus-unified body .mob-back>span{color:inherit!important}
html#mobile-proposal.campus-unified body .campus-pagebar.campus-pagebar{box-sizing:border-box!important;height:52px!important;min-height:52px!important;padding-top:4px!important;padding-bottom:4px!important;margin:0!important;align-items:center!important}
html#mobile-proposal.campus-unified body .campus-pagebar.campus-pagebar:not(:has(>.mob-top)){height:12px!important;min-height:12px!important;padding-top:0!important;padding-bottom:0!important}
/* Fil d'Ariane posé dans le contenu (Administration, Supervision, Studio) : les 12 px que les autres pages tiennent de leur contenu. */
html#mobile-proposal.campus-unified body .campus-pagebar.campus-pagebar-inline{margin-bottom:12px!important}
html#mobile-proposal.campus-unified body .campus-pagebar>.mob-top[hidden]{display:none!important}
