/* Studio GLW Consulting / JMB Ingénierie : feuille de style unique, sans dépendance.
   Thème « Nuit » par défaut, thème « Jour » au choix (html[data-theme="jour"]). Tous les styles passent par des jetons. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

/* ============================== Jetons ============================== */
:root {
  color-scheme: dark;
  /* Surfaces (Nuit) */
  --bg: #0A0D12;
  --bg-lateral: #0C1016;
  --surface: #10151C;
  --surface-2: #151B24;
  --surface-3: #1B2230;
  --surface-champ: #0C1117;
  --surface-verre: rgba(16, 21, 28, .78);
  --bordure: rgba(255, 255, 255, .08);
  --bordure-2: rgba(255, 255, 255, .12);
  --bordure-3: rgba(255, 255, 255, .2);
  --texte: #F3F5F7;
  --texte-2: #A7B0BC;
  --texte-3: #8B95A3;
  --voile: rgba(3, 5, 8, .72);
  --ombre-1: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --ombre-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 30px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35);
  --ombre-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 80px -10px rgba(0, 0, 0, .75), 0 8px 24px rgba(0, 0, 0, .5);
  --touche: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 -1px 0 rgba(0, 0, 0, .35) inset, 0 1px 2px rgba(0, 0, 0, .5);

  /* Couleurs des marques (constantes, déclinées par thème) */
  --glw-vif: #34D47E; --glw-fond: rgba(52, 212, 126, .13); --glw-texte: #BFF3D6; --glw-ligne: rgba(52, 212, 126, .45);
  --jmb-vif: #4A97EA; --jmb-fond: rgba(74, 151, 234, .16); --jmb-texte: #CFE3FA; --jmb-ligne: rgba(74, 151, 234, .5);
  --orange: #F69C3C; --jaune: #F0C000; --vert-jmb: #90C042;
  --orange-texte: #F69C3C; --jaune-texte: #F0C000;

  /* États */
  --ok: #3DD68C; --ok-fond: rgba(61, 214, 140, .12);
  --attention: #F5B544; --attention-fond: rgba(245, 181, 68, .12);
  --erreur: #FF6B6B; --erreur-fond: rgba(255, 107, 107, .12);
  --info: #6CB2FF; --info-fond: rgba(108, 178, 255, .12);

  /* Accent : suit la marque sélectionnée (« Les deux » : blanc) */
  --accent: #F3F5F7;
  --accent-plein: #F3F5F7;
  --accent-encre: #0A0D12;
  --accent-doux: rgba(243, 245, 247, .08);
  --accent-ligne: rgba(243, 245, 247, .32);
  --lueur: rgba(243, 245, 247, .18);
  --atmo-1: rgba(52, 212, 126, .07);
  --atmo-2: rgba(74, 151, 234, .08);

  /* Forme et rythme */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --police: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --lateral: 244px;
  --haut: 60px;
  --onglets-bas: 0px;
  --rapide: 140ms cubic-bezier(.2, .7, .3, 1);
  --doux: 260ms cubic-bezier(.23, 1, .32, 1);
}
html[data-marque='glw'] {
  --accent: var(--glw-vif); --accent-plein: #34D47E; --accent-encre: #03140B;
  --accent-doux: rgba(52, 212, 126, .12); --accent-ligne: rgba(52, 212, 126, .5); --lueur: rgba(52, 212, 126, .35);
  --atmo-1: rgba(52, 212, 126, .10); --atmo-2: rgba(246, 156, 60, .05);
}
html[data-marque='jmb'] {
  --accent: var(--jmb-vif); --accent-plein: #4A97EA; --accent-encre: #04121F;
  --accent-doux: rgba(74, 151, 234, .14); --accent-ligne: rgba(74, 151, 234, .55); --lueur: rgba(59, 139, 224, .4);
  --atmo-1: rgba(59, 139, 224, .12); --atmo-2: rgba(240, 192, 0, .045);
}

/* ----- Thème Jour ----- */
html[data-theme='jour'] {
  color-scheme: light;
  --bg: #F5F6F8; --bg-lateral: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F5F8; --surface-3: #E9EDF2; --surface-champ: #FFFFFF;
  --surface-verre: rgba(255, 255, 255, .84);
  --bordure: rgba(11, 15, 20, .09); --bordure-2: rgba(11, 15, 20, .14); --bordure-3: rgba(11, 15, 20, .24);
  --texte: #0B0F14; --texte-2: #4A5563; --texte-3: #5F6B7A;
  --voile: rgba(11, 15, 20, .42);
  --ombre-1: 0 1px 2px rgba(11, 15, 20, .06);
  --ombre-2: 0 1px 2px rgba(11, 15, 20, .05), 0 10px 28px -10px rgba(11, 15, 20, .16);
  --ombre-3: 0 30px 80px -12px rgba(11, 15, 20, .3), 0 6px 20px rgba(11, 15, 20, .12);
  --touche: 0 1px 0 #FFFFFF inset, 0 -1px 0 rgba(11, 15, 20, .1) inset, 0 1px 1px rgba(11, 15, 20, .12);
  --glw-vif: #00A24E; --glw-fond: #E3F4EA; --glw-texte: #0A4F2E; --glw-ligne: rgba(0, 162, 78, .45);
  --jmb-vif: #1860A8; --jmb-fond: #E4EDF7; --jmb-texte: #0F3F73; --jmb-ligne: rgba(24, 96, 168, .45);
  --orange-texte: #9A5309; --jaune-texte: #806200;
  --ok: #157A45; --ok-fond: #E1F4E9; --attention: #8A5A00; --attention-fond: #FFF3D9; --erreur: #B42323; --erreur-fond: #FDE8E8; --info: #1D5FA8; --info-fond: #E6F0FB;
  --accent: #0B0F14; --accent-plein: #0B0F14; --accent-encre: #FFFFFF; --accent-doux: rgba(11, 15, 20, .06); --accent-ligne: rgba(11, 15, 20, .35); --lueur: rgba(11, 15, 20, .18);
  --atmo-1: rgba(0, 162, 78, .07); --atmo-2: rgba(24, 96, 168, .07);
}
html[data-theme='jour'][data-marque='glw'] { --accent: #0A7A3D; --accent-plein: #0A7A3D; --accent-encre: #FFFFFF; --accent-doux: rgba(0, 162, 78, .1); --accent-ligne: rgba(0, 162, 78, .5); --lueur: rgba(0, 162, 78, .28); --atmo-1: rgba(0, 162, 78, .09); --atmo-2: rgba(246, 156, 60, .06); }
html[data-theme='jour'][data-marque='jmb'] { --accent: #1860A8; --accent-plein: #1860A8; --accent-encre: #FFFFFF; --accent-doux: rgba(24, 96, 168, .1); --accent-ligne: rgba(24, 96, 168, .5); --lueur: rgba(24, 96, 168, .3); --atmo-1: rgba(24, 96, 168, .09); --atmo-2: rgba(240, 192, 0, .06); }

/* Classes de marque locales (cartes, pastilles, calendrier) */
.m-glw { --m-vif: var(--glw-vif); --m-fond: var(--glw-fond); --m-texte: var(--glw-texte); --m-ligne: var(--glw-ligne); --m-2: var(--orange); }
.m-jmb { --m-vif: var(--jmb-vif); --m-fond: var(--jmb-fond); --m-texte: var(--jmb-texte); --m-ligne: var(--jmb-ligne); --m-2: var(--jaune); }

/* ============================== Base ============================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; font-family: var(--police); font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--texte); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; color: var(--texte); text-wrap: balance; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 17px; font-weight: 750; letter-spacing: -0.012em; }
h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0 0 .6em; text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
button { font-family: inherit; }
::selection { background: var(--accent-doux); color: var(--texte); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--bordure); padding: 1px 6px; border-radius: 6px; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font: 600 11px/1 var(--mono); color: var(--texte-2); background: var(--surface-3); border-radius: 5px; box-shadow: var(--touche); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.petit { font-size: 12.5px; }
.texte-doux { color: var(--texte-2); }
.texte-faible { color: var(--texte-3); }
.aide { display: block; font-size: 12.5px; color: var(--texte-2); margin-top: 6px; line-height: 1.45; }
.surtitre { display: block; font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--texte-3); }
.cache-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--accent-plein); color: var(--accent-encre); padding: 8px 14px; border-radius: 8px; z-index: 300; font-weight: 700; }
.lien-evitement:focus { left: 8px; }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ico { flex: none; }

/* ============================== Boutons ============================== */
.btn { --h: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--bordure-2); background: var(--surface-2); color: var(--texte); font: 650 13.5px/1 var(--police); letter-spacing: -0.005em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--rapide), border-color var(--rapide), box-shadow var(--rapide), transform var(--rapide), color var(--rapide); user-select: none; }
.btn:hover { background: var(--surface-3); border-color: var(--bordure-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ico { width: 17px; height: 17px; }
.btn-primaire { background: var(--accent-plein); color: var(--accent-encre); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 22px -10px var(--lueur); font-weight: 750; }
.btn-primaire:hover { background: var(--accent-plein); border-color: transparent; filter: brightness(1.07); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 30px -8px var(--lueur); }
.btn-fantome { background: transparent; border-color: transparent; color: var(--texte-2); }
.btn-fantome:hover { background: var(--surface-2); color: var(--texte); border-color: transparent; }
.btn-lien { background: none; border: 0; padding: 0; height: auto; color: var(--accent); font-weight: 700; }
.btn-lien:hover { background: none; text-decoration: underline; }
.btn-danger { background: var(--erreur); color: #fff; border-color: transparent; }
html:not([data-theme='jour']) .btn-danger { color: #1A0505; }
.btn-danger:hover { background: var(--erreur); filter: brightness(1.08); }
.btn-danger-doux { color: var(--erreur); background: transparent; border-color: color-mix(in srgb, var(--erreur) 35%, transparent); }
.btn-danger-doux:hover { background: var(--erreur-fond); border-color: var(--erreur); }
.btn-petit { --h: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; gap: 6px; }
.btn-petit .ico { width: 15px; height: 15px; }
.btn-grand { --h: 50px; padding: 0 22px; font-size: 15.5px; border-radius: var(--r-md); gap: 10px; }
.btn-grand .ico { width: 20px; height: 20px; }
.btn-bloc { width: 100%; }
.btn-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--texte-2); cursor: pointer; transition: background var(--rapide), color var(--rapide), border-color var(--rapide); }
.btn-icone:hover { background: var(--surface-2); color: var(--texte); border-color: var(--bordure); }
.btn-icone .ico { width: 19px; height: 19px; }

/* ============================== Champs ============================== */
.champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.champ + .champ { margin-top: 16px; }
.champ > label, .etiquette-champ, .champ > legend { font-size: 13px; font-weight: 700; color: var(--texte); }
.champ-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.champ-ligne .mono { font-size: 11.5px; color: var(--texte-3); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.deux-colonnes > .champ + .champ { margin-top: 0; }
input[type='text'], input[type='email'], input[type='password'], input[type='search'], input[type='date'], input[type='time'], input[type='number'], input[type='tel'], select, textarea {
  width: 100%; font: 550 14.5px/1.45 var(--police); color: var(--texte); background: var(--surface-champ); border: 1px solid var(--bordure-2); border-radius: var(--r-sm); padding: 9px 12px; min-height: 40px; transition: border-color var(--rapide), box-shadow var(--rapide), background var(--rapide);
}
input::placeholder, textarea::placeholder { color: var(--texte-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--bordure-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-ligne); box-shadow: 0 0 0 3px var(--accent-doux); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; line-height: 1.6; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texte-2) 50%), linear-gradient(135deg, var(--texte-2) 50%, transparent 50%); background-position: calc(100% - 17px) 54%, calc(100% - 12px) 54%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; cursor: pointer; }
input[type='date'], input[type='time'] { font-family: var(--mono); font-size: 14px; }
input[type='date']::-webkit-calendar-picker-indicator, input[type='time']::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
html[data-theme='jour'] input[type='date']::-webkit-calendar-picker-indicator, html[data-theme='jour'] input[type='time']::-webkit-calendar-picker-indicator { filter: none; }
input[type='color'] { width: 42px; height: 34px; padding: 3px; border-radius: 8px; border: 1px solid var(--bordure-2); background: var(--surface-champ); cursor: pointer; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); }

/* Interrupteur (case à cocher role=switch) */
.interrupteur { position: relative; display: inline-flex; flex: none; width: 38px; height: 22px; }
.interrupteur input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.interrupteur-piste { width: 100%; height: 100%; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--bordure-2); transition: background var(--rapide), border-color var(--rapide); }
.interrupteur-piste::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--texte-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform var(--doux), background var(--rapide); }
.interrupteur input:checked + .interrupteur-piste { background: var(--accent-plein); border-color: transparent; }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(16px); background: var(--accent-encre); }
.interrupteur input:focus-visible + .interrupteur-piste { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Contrôle segmenté */
.segments { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bordure); }
.segment { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--texte-2); font: 650 13px/1 var(--police); cursor: pointer; white-space: nowrap; transition: background var(--rapide), color var(--rapide), box-shadow var(--rapide); }
.segment:hover { color: var(--texte); }
.segment[aria-checked='true'], .segment[aria-pressed='true'], .segment[aria-selected='true'] { background: var(--surface-3); color: var(--texte); box-shadow: var(--touche); }
html[data-theme='jour'] .segment[aria-checked='true'], html[data-theme='jour'] .segment[aria-pressed='true'], html[data-theme='jour'] .segment[aria-selected='true'] { background: #FFFFFF; }
.segment .ico { width: 16px; height: 16px; }
.segment img { width: 18px; height: 18px; border-radius: 5px; }

/* Puces (choix compacts) */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--bordure-2); background: var(--surface); color: var(--texte-2); font: 650 13px/1.25 var(--police); cursor: pointer; text-align: left; transition: background var(--rapide), border-color var(--rapide), color var(--rapide); }
.puce:hover { border-color: var(--bordure-3); color: var(--texte); }
.puce[aria-checked='true'], .puce[aria-pressed='true'], .puce.est-choisie { border-color: var(--accent-ligne); background: var(--accent-doux); color: var(--texte); }
.puce .ico { width: 15px; height: 15px; }
.puce .mono { font-size: 11.5px; color: var(--texte-3); }

/* ============================== Éléments ============================== */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--ombre-1); }
.carte-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.carte-entete h2 { font-size: 15.5px; }
.lien-discret { font-size: 13px; font-weight: 650; color: var(--texte-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.lien-discret:hover { color: var(--texte); }
.lien-discret .ico { width: 15px; height: 15px; }
.etiquette { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 11px/1 var(--mono); letter-spacing: .03em; color: var(--texte-2); background: var(--surface-2); border: 1px solid var(--bordure); white-space: nowrap; }
.pastille-marque { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--m-fond); color: var(--m-texte); font: 700 12px/1 var(--police); white-space: nowrap; }
.pastille-marque::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--m-vif); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-vif) 22%, transparent); }
.point-marque { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--m-vif); flex: none; }
.badge-exemple { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font: 650 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--texte-2); border: 1px dashed var(--bordure-3); white-space: nowrap; margin-left: 8px; vertical-align: middle; }
.statut { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 650 12px/1 var(--police); white-space: nowrap; background: var(--surface-2); color: var(--texte-2); border: 1px solid var(--bordure); }
.statut::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.statut-programme { color: var(--info); background: var(--info-fond); border-color: transparent; }
.statut-publie { color: var(--ok); background: var(--ok-fond); border-color: transparent; }
.statut-echec { color: var(--erreur); background: var(--erreur-fond); border-color: transparent; }
.statut-brouillon::before { background: transparent; border: 1.5px dashed currentColor; width: 7px; height: 7px; }
.alerte { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.5; margin: 0; border: 1px solid transparent; }
.alerte .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.alerte ul { margin: 6px 0 0; padding-left: 18px; }
.alerte strong { font-weight: 750; }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 25%, transparent); }
.alerte-info { background: var(--info-fond); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alerte-attention { background: var(--attention-fond); color: var(--attention); border-color: color-mix(in srgb, var(--attention) 25%, transparent); }
.alerte-ok { background: var(--ok-fond); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alerte > div, .alerte > span { color: var(--texte); }
.alerte > div strong, .alerte > span strong { color: inherit; }
.etat-vide { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--texte-2); }
.etat-vide h3 { color: var(--texte); font-size: 15.5px; }
.etat-vide p { max-width: 400px; margin: 0 0 8px; font-size: 13.5px; }
.etat-vide-icone { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--bordure-2); color: var(--texte-2); margin-bottom: 6px; box-shadow: var(--touche); }
.etat-vide-icone .ico { width: 24px; height: 24px; }
.chargement { display: flex; align-items: center; gap: 10px; color: var(--texte-2); padding: 28px; justify-content: center; font-size: 13.5px; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--bordure-3); border-top-color: var(--accent); border-radius: 50%; animation: tourne .75s linear infinite; flex: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
.squelette { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-md); }
.squelette::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent); animation: balaye 1.4s ease-in-out infinite; }
@keyframes balaye { to { transform: translateX(100%); } }
.toasts { position: fixed; right: 18px; bottom: calc(18px + var(--onglets-bas)); display: flex; flex-direction: column; gap: 8px; z-index: 400; max-width: min(420px, calc(100vw - 36px)); }
.toast { display: flex; align-items: center; gap: 10px; background: var(--surface-3); color: var(--texte); padding: 11px 16px 11px 13px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 650; box-shadow: var(--ombre-3); border: 1px solid var(--bordure-2); animation: entre var(--doux); }
html[data-theme='jour'] .toast { background: #0B0F14; color: #F3F5F7; border-color: transparent; }
.toast .ico { width: 18px; height: 18px; flex: none; }
.toast-succes .ico { color: var(--ok); }
html[data-theme='jour'] .toast-succes .ico { color: #3DD68C; }
.toast-erreur .ico { color: var(--erreur); }
html[data-theme='jour'] .toast-erreur .ico { color: #FF8A8A; }
@keyframes entre { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Infobulle (au survol et au focus) */
.avec-infobulle { position: relative; }
.infobulle { position: absolute; z-index: 120; top: calc(100% + 10px); right: 0; width: max-content; max-width: 300px; padding: 11px 13px; border-radius: var(--r-md); background: var(--surface-3); color: var(--texte); border: 1px solid var(--bordure-2); box-shadow: var(--ombre-3); font: 550 12.5px/1.5 var(--police); text-align: left; white-space: normal; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--rapide), transform var(--rapide); }
html[data-theme='jour'] .infobulle { background: #0B0F14; color: #F3F5F7; border-color: transparent; }
.avec-infobulle:hover .infobulle, .avec-infobulle:focus-within .infobulle { opacity: 1; transform: none; }

/* ============================== Fenêtres ============================== */
.modale-fond { position: fixed; inset: 0; background: var(--voile); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 250; padding: 16px; animation: fondu var(--doux); }
@keyframes fondu { from { opacity: 0; } }
.modale { background: var(--surface); border: 1px solid var(--bordure-2); border-radius: var(--r-xl); width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: var(--ombre-3); animation: monte var(--doux); overflow: hidden; }
@keyframes monte { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modale-large { width: min(760px, 100%); }
.modale-tres-large { width: min(1040px, 100%); }
.modale-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 14px 22px; border-bottom: 1px solid var(--bordure); gap: 12px; }
.modale-entete h2 { font-size: 16.5px; min-width: 0; }
.modale-corps { padding: 20px 22px; overflow: auto; flex: 1; overscroll-behavior: contain; }
.modale-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--bordure); background: var(--surface); flex-wrap: wrap; }
.modale-fond:has(.modale-panneau) { place-items: stretch end; padding: 10px; }
.modale-panneau { width: min(600px, 100%); height: 100%; max-height: none; border-radius: var(--r-xl); animation: glisse var(--doux); }
@keyframes glisse { from { opacity: .4; transform: translateX(40px); } }

/* ============================== Coque ============================== */
.coque { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.chargement-initial { grid-column: 1 / -1; display: grid; place-items: center; color: var(--texte-2); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; background: var(--bg-lateral); border-right: 1px solid var(--bordure); display: flex; flex-direction: column; padding: 14px 12px 12px; gap: 6px; z-index: 40; overflow-y: auto; }
.lateral-tete { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.duo-logos { position: relative; display: inline-flex; flex: none; width: 46px; height: 30px; }
.duo-logos img { position: absolute; top: 0; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 2px var(--bg-lateral); }
.duo-logos img:first-child { left: 0; }
.duo-logos img:last-child { left: 16px; }
.lateral-nom { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lateral-nom strong { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.lateral-nom span { font: 600 10.5px/1.3 var(--mono); color: var(--texte-3); letter-spacing: .06em; text-transform: uppercase; }
.lateral .btn-creer { margin: 0 0 12px; justify-content: flex-start; padding: 0 10px 0 12px; }
.lateral .btn-creer kbd { margin-left: auto; background: color-mix(in srgb, var(--accent-encre) 14%, transparent); color: var(--accent-encre); box-shadow: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-titre { font: 600 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--texte-3); padding: 14px 10px 8px; }
.nav-lien { position: relative; display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--texte-2); text-decoration: none; font-weight: 650; font-size: 13.75px; border: 0; background: none; cursor: pointer; text-align: left; width: 100%; transition: background var(--rapide), color var(--rapide); }
.nav-lien .ico { width: 18px; height: 18px; }
.nav-lien:hover { background: var(--surface-2); color: var(--texte); }
.nav-lien[aria-current='page'] { background: var(--surface-2); color: var(--texte); }
.nav-lien[aria-current='page']::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--lueur); }
.nav-lien[aria-current='page'] .ico { color: var(--accent); }
.nav-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-nav { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-plein); color: var(--accent-encre); font: 700 11px/20px var(--mono); text-align: center; }
.lateral-bas { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--bordure); }
.lateral-utilisateur { display: flex; align-items: center; gap: 10px; padding: 10px 8px 4px; min-width: 0; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--bordure-2); color: var(--texte); font: 750 11.5px/1 var(--police); letter-spacing: .02em; }
.lateral-utilisateur div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lateral-utilisateur strong { font-size: 13px; }
.lateral-utilisateur span { font-size: 11.5px; color: var(--texte-3); }
.principal { position: relative; min-width: 0; display: flex; flex-direction: column; isolation: isolate; }
.principal::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none; background: radial-gradient(55% 70% at 22% -12%, var(--atmo-1), transparent 70%), radial-gradient(45% 60% at 92% -18%, var(--atmo-2), transparent 70%); transition: background .5s ease; }
.haut { display: flex; align-items: center; gap: 12px; height: var(--haut); padding: 0 28px; position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--bordure); }
.haut-titre { display: none; }
.espaceur { flex: 1; }
.selecteur-marque { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface); border: 1px solid var(--bordure-2); box-shadow: var(--ombre-1); }
.selecteur-marque .segment { height: 32px; padding: 0 12px; font-size: 13px; }
.double-point { position: relative; display: inline-block; width: 18px; height: 10px; flex: none; }
.double-point::before, .double-point::after { content: ''; position: absolute; top: 1px; width: 8px; height: 8px; border-radius: 50%; }
.double-point::before { left: 0; background: var(--glw-vif); }
.double-point::after { left: 8px; background: var(--jmb-vif); box-shadow: 0 0 0 1.5px var(--surface); }
.pastille-demo { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--attention) 35%, transparent); background: color-mix(in srgb, var(--attention) 9%, transparent); color: var(--texte); font: 650 12px/1 var(--police); text-decoration: none; white-space: nowrap; }
.pastille-demo .mono { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--attention); font-weight: 700; }
.pastille-demo-point { width: 7px; height: 7px; border-radius: 50%; background: var(--attention); box-shadow: 0 0 0 3px color-mix(in srgb, var(--attention) 25%, transparent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--attention) 0%, transparent); } }
.pastille-demo:hover { background: color-mix(in srgb, var(--attention) 14%, transparent); }
.contenu { width: 100%; max-width: 1400px; padding: 28px 32px 72px; outline: none; margin: 0 auto; }
.vue { display: flex; flex-direction: column; gap: 22px; animation: vue-entre .32s cubic-bezier(.23, 1, .32, 1); }
@keyframes vue-entre { from { opacity: 0; transform: translateY(6px); } }
.menu-mobile, .barre-onglets, .haut-logo { display: none; }

/* Barre d'onglets (mobile) et feuille de menu */
.barre-onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-lateral) 88%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid var(--bordure-2); grid-template-columns: repeat(4, 1fr); gap: 4px; }
.onglet-bas { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border-radius: 12px; color: var(--texte-2); text-decoration: none; font: 700 11px/1 var(--police); letter-spacing: .01em; }
.onglet-bas .ico { width: 22px; height: 22px; }
.onglet-bas[aria-current='page'] { color: var(--texte); }
.onglet-bas[aria-current='page'] .ico { color: var(--accent); }
.onglet-bas[aria-current='page']::after { content: ''; position: absolute; top: 2px; width: 18px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--lueur); }
.onglet-creer .onglet-creer-rond { display: grid; place-items: center; width: 40px; height: 32px; border-radius: 11px; background: var(--accent-plein); color: var(--accent-encre); box-shadow: 0 8px 20px -8px var(--lueur); }
.onglet-creer .onglet-creer-rond .ico { width: 20px; height: 20px; color: var(--accent-encre) !important; }
.onglet-bas .badge-nav { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; padding: 0 5px; }
.feuille-liens { display: flex; flex-direction: column; gap: 2px; }
.feuille-liens .nav-lien { height: 48px; font-size: 15px; }
.feuille-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bordure); display: flex; flex-direction: column; gap: 10px; }

/* ============================== En-têtes de page ============================== */
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.entete-page > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.entete-page p { margin: 0; color: var(--texte-2); font-size: 14px; max-width: 640px; }
.entete-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ============================== Tableau de bord ============================== */
.accueil-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.accueil-tete h1 { font-size: 32px; letter-spacing: -0.03em; }
.accueil-date { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); display: flex; align-items: center; gap: 8px; }
.accueil-date::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--lueur); }
.accueil-sous { margin: 6px 0 0; color: var(--texte-2); font-size: 14.5px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1); text-decoration: none; color: var(--texte); overflow: hidden; transition: border-color var(--rapide), transform var(--rapide), box-shadow var(--rapide); }
.kpi::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--kpi-lueur, transparent), transparent 70%); opacity: .9; pointer-events: none; }
.kpi:hover { border-color: var(--bordure-3); transform: translateY(-1px); box-shadow: var(--ombre-2); }
.kpi-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-libelle { font-size: 13px; font-weight: 650; color: var(--texte-2); }
.kpi-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--bordure); color: var(--kpi-couleur, var(--texte-2)); }
.kpi-icone .ico { width: 16px; height: 16px; }
.kpi-valeur { font-size: 38px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-pied { font: 600 11.5px/1.3 var(--mono); color: var(--texte-3); letter-spacing: .02em; display: flex; gap: 10px; flex-wrap: wrap; }
.kpi-pied .point-marque { margin-right: 4px; }
.kpi-programme { --kpi-couleur: var(--info); --kpi-lueur: color-mix(in srgb, var(--info) 16%, transparent); }
.kpi-brouillon { --kpi-couleur: var(--texte-2); }
.kpi-publie { --kpi-couleur: var(--ok); --kpi-lueur: color-mix(in srgb, var(--ok) 14%, transparent); }
.kpi-demandes { --kpi-couleur: var(--accent); --kpi-lueur: var(--accent-doux); }
.kpi-demandes .kpi-valeur { color: var(--accent); }
html[data-marque='both'] .kpi-demandes .kpi-valeur, html:not([data-marque]) .kpi-demandes .kpi-valeur { color: var(--texte); }
.grille-accueil { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.colonne { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.frise { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.frise-jour { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 10px 8px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); min-width: 0; }
.frise-jour.passe { opacity: .55; }
.frise-jour.aujourdhui { border-color: var(--accent-ligne); background: linear-gradient(180deg, var(--accent-doux), transparent 60%), var(--surface-2); box-shadow: 0 0 0 1px var(--accent-ligne) inset, 0 10px 30px -14px var(--lueur); }
.frise-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 0 2px 4px; }
.frise-tete span { font: 650 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-3); }
.frise-tete strong { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.frise-jour.aujourdhui .frise-tete span { color: var(--accent); }
.frise-pub { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; border-radius: 8px; background: var(--m-fond); border-left: 2px solid var(--m-vif); text-decoration: none; color: var(--texte); min-width: 0; transition: transform var(--rapide), filter var(--rapide); }
.frise-pub:hover { transform: translateY(-1px); filter: brightness(1.12); }
.frise-pub .mono { font-size: 10.5px; color: var(--m-texte); }
.frise-pub strong { font-size: 12px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.frise-reseaux { display: flex; gap: 3px; color: var(--m-texte); opacity: .85; }
.frise-reseaux .ico { width: 12px; height: 12px; }
.frise-vide { margin-top: auto; text-align: center; font: 600 10.5px/1.3 var(--mono); color: var(--texte-3); opacity: .7; }
.prochaine { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); text-decoration: none; color: var(--texte); box-shadow: var(--ombre-1); overflow: hidden; transition: border-color var(--rapide), box-shadow var(--rapide); }
.prochaine:hover { border-color: var(--bordure-3); box-shadow: var(--ombre-2); }
.prochaine-visuel { width: 132px; aspect-ratio: 1; border-radius: var(--r-md); object-fit: cover; background: var(--surface-2); border: 1px solid var(--bordure); }
.prochaine-corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prochaine-titre { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.prochaine-quand { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.3 var(--mono); color: var(--texte-2); }
.prochaine-quand .ico { width: 15px; height: 15px; color: var(--accent); }
.prochaine-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.liste-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ligne-demande, .ligne-pub { display: flex; align-items: center; gap: 12px; padding: 11px 8px; margin: 0 -8px; border-radius: var(--r-sm); text-decoration: none; color: var(--texte); min-width: 0; transition: background var(--rapide); }
.ligne-demande:hover, .ligne-pub:hover { background: var(--surface-2); }
.liste-simple li + li .ligne-demande, .liste-simple li + li .ligne-pub { border-top: 1px solid var(--bordure); border-radius: 0; }
.liste-simple li + li .ligne-demande:hover, .liste-simple li + li .ligne-pub:hover { border-radius: var(--r-sm); border-top-color: transparent; }
.ligne-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ligne-titre { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; min-width: 0; }
.ligne-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texte-2); min-width: 0; flex-wrap: wrap; }
.ligne-quand { font: 600 11.5px/1.2 var(--mono); color: var(--texte-3); white-space: nowrap; }
.reseaux-pastilles { display: inline-flex; gap: 4px; }
.pastille-reseau { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--bordure); color: var(--texte-2); }
.pastille-reseau .ico { width: 14px; height: 14px; }
.badge-source { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 11.5px/1 var(--police); white-space: nowrap; border: 1px solid transparent; }
.badge-source .ico { width: 13px; height: 13px; }
.src-simulateur { color: #7DD3FC; background: rgba(125, 211, 252, .1); border-color: rgba(125, 211, 252, .22); }
.src-diagnostic { color: #FDBA74; background: rgba(253, 186, 116, .1); border-color: rgba(253, 186, 116, .24); }
.src-devis { color: #C4B5FD; background: rgba(196, 181, 253, .1); border-color: rgba(196, 181, 253, .24); }
.src-contact { color: var(--texte-2); background: var(--surface-2); border-color: var(--bordure-2); }
html[data-theme='jour'] .src-simulateur { color: #075985; background: #E0F2FE; border-color: #BAE6FD; }
html[data-theme='jour'] .src-diagnostic { color: #9A3412; background: #FFEDD5; border-color: #FED7AA; }
html[data-theme='jour'] .src-devis { color: #5B21B6; background: #EDE9FE; border-color: #DDD6FE; }
.raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.raccourci { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--bordure); background: var(--surface-2); text-decoration: none; color: var(--texte); font-weight: 700; font-size: 13.5px; transition: border-color var(--rapide), background var(--rapide), transform var(--rapide); }
.raccourci:hover { border-color: var(--accent-ligne); transform: translateY(-1px); }
.raccourci-haut { display: flex; align-items: center; justify-content: space-between; }
.raccourci-haut .ico { width: 20px; height: 20px; color: var(--accent); }
.raccourci span { font-size: 12px; font-weight: 550; color: var(--texte-2); }

/* ============================== Création (parcours en 3 étapes) ============================== */
.compo { display: flex; flex-direction: column; gap: 0; }
.compo-tete { position: sticky; top: var(--haut); z-index: 25; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin: -28px -32px 24px; padding: 12px 32px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bordure); }
.compo-titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.compo-titre h1 { font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; min-width: 0; }
.compo-titre .surtitre { font-size: 10.5px; }
.etapes-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bordure-2); box-shadow: var(--ombre-1); }
.etape-btn { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; border: 0; background: transparent; color: var(--texte-2); font: 700 13px/1 var(--police); cursor: pointer; white-space: nowrap; transition: background var(--rapide), color var(--rapide); }
.etape-btn:disabled { cursor: not-allowed; opacity: .55; }
.etape-btn:not(:disabled):hover { color: var(--texte); background: var(--surface-2); }
.etape-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 11.5px/1 var(--mono); background: var(--surface-3); color: var(--texte-2); border: 1px solid var(--bordure-2); }
.etape-num .ico { width: 13px; height: 13px; }
.etape-btn[aria-current='step'] { background: var(--surface-3); color: var(--texte); box-shadow: var(--touche); }
html[data-theme='jour'] .etape-btn[aria-current='step'] { background: #fff; }
.etape-btn[aria-current='step'] .etape-num { background: var(--accent-plein); color: var(--accent-encre); border-color: transparent; box-shadow: 0 0 14px var(--lueur); }
.etape-btn.est-faite .etape-num { background: var(--accent-doux); color: var(--accent); border-color: var(--accent-ligne); }
.etape-sep { width: 14px; height: 1px; background: var(--bordure-3); flex: none; }
.compo-etat { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.indicateur-sauve { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--mono); color: var(--texte-3); white-space: nowrap; }
.indicateur-sauve::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.indicateur-sauve.modifie { color: var(--attention); }
.indicateur-sauve.modifie::before { background: var(--attention); box-shadow: 0 0 0 3px color-mix(in srgb, var(--attention) 22%, transparent); }
.indicateur-sauve.neuf::before { background: var(--texte-3); }
.etape-panneau { animation: vue-entre .34s cubic-bezier(.23, 1, .32, 1); }
.etape-panneau:focus { outline: none; }
.bandeau-statut { margin-bottom: 18px; }

/* Étape 1 : brief */
.brief-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.brief-principal { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.brief-cote { position: sticky; top: calc(var(--haut) + 82px); display: flex; flex-direction: column; gap: 14px; }
.bloc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bloc-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bloc-titre h2 { font-size: 15px; display: flex; align-items: center; gap: 10px; }
.bloc-titre h2 .mono { font-size: 11px; color: var(--texte-3); font-weight: 600; letter-spacing: .04em; }
.bloc-titre p { margin: 0; font-size: 12.5px; color: var(--texte-2); }
.cartes-marque { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carte-marque { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--bordure-2); background: var(--surface); cursor: pointer; overflow: hidden; transition: border-color var(--rapide), box-shadow var(--rapide), transform var(--rapide); }
.carte-marque::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 140% at 0% 0%, var(--m-fond), transparent 60%); opacity: 0; transition: opacity var(--doux); pointer-events: none; }
.carte-marque:hover { border-color: var(--bordure-3); transform: translateY(-1px); }
.carte-marque input { position: absolute; opacity: 0; pointer-events: none; }
.carte-marque:has(input:checked) { border-color: var(--m-ligne); box-shadow: 0 0 0 1px var(--m-ligne) inset, 0 14px 40px -18px var(--m-vif); }
.carte-marque:has(input:checked)::before { opacity: 1; }
.carte-marque:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.carte-marque:has(input:disabled) { cursor: default; }
.carte-marque:has(input:disabled):not(:has(input:checked)) { opacity: .45; }
.carte-marque-logo { position: relative; display: grid; place-items: center; width: 92px; height: 56px; border-radius: 12px; padding: 8px 10px; }
.m-glw .carte-marque-logo { background: linear-gradient(140deg, #0A4F2E, #062F1C); }
.m-jmb .carte-marque-logo { background: linear-gradient(140deg, #0B3A6E, #002448); }
.carte-marque-logo img { max-height: 40px; width: auto; }
.carte-marque-texte { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.carte-marque-texte strong { font-size: 15px; font-weight: 800; letter-spacing: -0.015em; }
.carte-marque-texte span { font-size: 12.5px; color: var(--texte-2); line-height: 1.35; }
.coche-ronde { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--bordure-3); color: transparent; transition: background var(--rapide), border-color var(--rapide); }
.coche-ronde .ico { width: 13px; height: 13px; }
:checked ~ .coche-ronde, .est-choisie .coche-ronde { background: var(--m-vif, var(--accent)); border-color: transparent; color: #04120A; }
.m-jmb :checked ~ .coche-ronde { color: #031020; }
.cartes-objectif { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.carte-objectif { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--bordure-2); background: var(--surface); cursor: pointer; transition: border-color var(--rapide), background var(--rapide); min-width: 0; }
.carte-objectif:hover { border-color: var(--bordure-3); }
.carte-objectif input { position: absolute; opacity: 0; pointer-events: none; }
.carte-objectif-icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bordure); color: var(--texte-2); transition: color var(--rapide), background var(--rapide); }
.carte-objectif-icone .ico { width: 18px; height: 18px; }
.carte-objectif strong { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.carte-objectif:has(input:checked) { border-color: var(--accent-ligne); background: linear-gradient(180deg, var(--accent-doux), transparent), var(--surface); }
.carte-objectif:has(input:checked) .carte-objectif-icone { color: var(--accent-encre); background: var(--accent-plein); border-color: transparent; box-shadow: 0 6px 16px -6px var(--lueur); }
.carte-objectif:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sujet-zone { position: relative; }
.sujet-zone textarea { min-height: 128px; padding: 16px 18px 34px; font-size: 19px; line-height: 1.45; font-weight: 650; letter-spacing: -0.01em; border-radius: var(--r-lg); background: var(--surface); border-color: var(--bordure-2); resize: vertical; }
.sujet-compteur { position: absolute; right: 14px; bottom: 10px; font: 600 11px/1 var(--mono); color: var(--texte-3); pointer-events: none; }
.idees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.idee { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px; min-height: 92px; text-align: left; border-radius: var(--r-md); border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); cursor: pointer; font: inherit; transition: border-color var(--rapide), background var(--rapide), transform var(--rapide); }
.idee:hover { border-color: var(--bordure-3); transform: translateY(-1px); background: var(--surface-2); }
.idee.est-choisie { border-color: var(--accent-ligne); background: linear-gradient(180deg, var(--accent-doux), transparent), var(--surface); }
.idee-titre { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.idee-angle { font-size: 12.5px; color: var(--texte-2); line-height: 1.4; }
.idee-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.idee-pied .etiquette { height: 20px; font-size: 10.5px; }
.idee-pied .ico { width: 15px; height: 15px; color: var(--texte-3); }
.idees-plus { justify-self: start; }
.idee-titre { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idee-angle { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sujet-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--texte-2); }
.sujet-note .ico { width: 15px; height: 15px; color: var(--accent); flex: none; }
.retourne { transform: rotate(180deg); }
label.btn:has(input:focus-visible), .depot:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.avertissements-reseau { display: flex; flex-direction: column; gap: 8px; }
.alerte > .btn-icone { margin: -6px -6px -6px auto; width: 30px; height: 30px; color: inherit; flex: none; }
.alerte > .btn-icone .ico { margin: 0; }
.cote-carte { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1); display: flex; flex-direction: column; gap: 12px; }
.cote-carte h2 { font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.depot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 14px; border-radius: var(--r-md); border: 1.5px dashed var(--bordure-3); background: var(--surface-2); text-align: center; color: var(--texte-2); font-size: 12.5px; cursor: pointer; transition: border-color var(--rapide), background var(--rapide); }
.depot:hover, .depot.survol { border-color: var(--accent-ligne); background: var(--accent-doux); color: var(--texte); }
.depot .ico { width: 22px; height: 22px; color: var(--texte-2); }
.depot strong { color: var(--texte); font-size: 13px; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-choisie { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); }
.photo-choisie img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; }
.photo-choisie-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; }
.photo-choisie-texte strong { font-size: 13px; }
.photo-choisie-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.etiquette-illustration { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; height: 20px; padding: 0 7px; border-radius: 5px; background: color-mix(in srgb, var(--attention) 12%, transparent); color: var(--attention); font: 700 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.reseaux-liste { display: flex; flex-direction: column; gap: 2px; }
.reseau-ligne { display: flex; align-items: center; gap: 11px; padding: 8px 6px; border-radius: var(--r-sm); cursor: pointer; }
.reseau-ligne:hover { background: var(--surface-2); }
.reseau-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--bordure); color: var(--texte-2); flex: none; }
.reseau-icone .ico { width: 17px; height: 17px; }
.reseau-ligne:has(input:checked) .reseau-icone { color: var(--texte); border-color: var(--bordure-3); }
.reseau-ligne-nom { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.reseau-ligne-nom strong { font-size: 13.5px; }
.reseau-ligne-nom span { font: 600 10.5px/1.3 var(--mono); color: var(--texte-3); letter-spacing: .02em; }
.tons .puce { min-height: 32px; font-size: 12.5px; padding: 5px 11px; }
.rediger-zone { display: flex; flex-direction: column; gap: 10px; }
.rediger-zone .aide { text-align: center; margin: 0; }
.btn-rediger { position: relative; overflow: hidden; }
.btn-rediger::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); animation: reflet 3.6s ease-in-out infinite 1s; }
@keyframes reflet { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Génération en cours */
.generation { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 34px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--bordure-2); box-shadow: var(--ombre-2); overflow: hidden; min-height: 420px; }
.generation::before { content: ''; position: absolute; inset: -30%; background: conic-gradient(from 0deg at 30% 50%, transparent 0deg, var(--accent-doux) 60deg, transparent 120deg, transparent 360deg); animation: tourne 6s linear infinite; pointer-events: none; opacity: .9; }
.generation::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: var(--surface); z-index: 0; }
.generation > * { position: relative; z-index: 1; }
.generation-tete { display: flex; flex-direction: column; gap: 12px; }
.generation-tete h2 { font-size: 24px; letter-spacing: -0.025em; }
.generation-tete p { margin: 0; color: var(--texte-2); }
.generation-sujet { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); font-weight: 650; font-size: 14px; }
.barre-progres { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.barre-progres span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-ligne), var(--accent)); box-shadow: 0 0 12px var(--lueur); transition: width .6s cubic-bezier(.23, 1, .32, 1); }
.generation-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gen-etape { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); color: var(--texte-3); font-weight: 650; font-size: 14px; transition: background var(--doux), color var(--doux); }
.gen-etape-icone { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--bordure-3); flex: none; }
.gen-etape-icone .ico { width: 14px; height: 14px; }
.gen-etape .ico-reseau { width: 16px; height: 16px; margin-left: auto; opacity: .7; }
.gen-etape.encours { color: var(--texte); background: var(--surface-2); }
.gen-etape.encours .gen-etape-icone { border-color: transparent; }
.gen-etape.encours .gen-etape-icone::before { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; border-bottom-color: transparent; animation: tourne .8s linear infinite; }
.gen-etape.fait { color: var(--texte-2); }
.gen-etape.fait .gen-etape-icone { background: var(--accent-plein); border-color: transparent; color: var(--accent-encre); animation: pop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop { from { transform: scale(.6); } }
.generation-note { font: 600 11.5px/1.4 var(--mono); color: var(--texte-3); letter-spacing: .02em; }

/* Étape 2 : résultat */
.resultat-grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.resultat-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.resultat-cote { position: sticky; top: calc(var(--haut) + 80px); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.onglets-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.onglets-reseaux { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bordure-2); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.onglets-reseaux::-webkit-scrollbar { display: none; }
.onglet-reseau { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 9px; border: 0; background: transparent; color: var(--texte-2); font: 700 13.5px/1 var(--police); cursor: pointer; white-space: nowrap; transition: background var(--rapide), color var(--rapide); }
.onglet-reseau .ico { width: 17px; height: 17px; }
.onglet-reseau:hover { color: var(--texte); }
.onglet-reseau[aria-selected='true'] { background: var(--surface-3); color: var(--texte); box-shadow: var(--touche); }
html[data-theme='jour'] .onglet-reseau[aria-selected='true'] { background: var(--surface-2); }
.onglet-point { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.onglet-point.attention { background: var(--attention); }
.onglet-point.erreur { background: var(--erreur); }
.onglet-point.vide { background: var(--texte-3); }
.editeur { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1); }
.editeur-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.editeur-tete h2 { font-size: 15px; display: flex; align-items: center; gap: 9px; }
.editeur-tete h2 .ico { width: 18px; height: 18px; }
.editeur textarea { min-height: 300px; font-size: 15px; line-height: 1.65; padding: 14px 16px; background: var(--surface-champ); }
.accroches { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); }
.accroches-titre { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--texte-2); }
.accroches-titre .ico { width: 15px; height: 15px; color: var(--accent); }
.accroches .puces { flex-direction: column; align-items: stretch; }
.accroche { justify-content: flex-start; border-radius: 10px; font-weight: 600; color: var(--texte); line-height: 1.4; padding: 8px 12px; }
.accroche .mono { margin-left: auto; padding-left: 10px; flex: none; }
.jauge-zone { display: flex; flex-direction: column; gap: 8px; }
.jauge-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--texte-2); }
.jauge-ligne strong { font: 700 13px/1 var(--mono); color: var(--texte); }
.jauge-ligne strong.attention { color: var(--attention); }
.jauge-ligne strong.erreur { color: var(--erreur); }
.jauge { position: relative; height: 8px; border-radius: 8px; background: var(--surface-3); }
.jauge-ideal { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: color-mix(in srgb, var(--ok) 28%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); }
.jauge-remplie { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--texte-3); transition: width var(--doux), background var(--rapide); }
.jauge-remplie.ok { background: var(--ok); }
.jauge-remplie.attention { background: var(--attention); }
.jauge-remplie.erreur { background: var(--erreur); }
.jauge-reperes { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--mono); color: var(--texte-3); }
.controles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.controle { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); min-width: 0; }
.controle-tete { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 750; }
.controle-tete .ico { width: 15px; height: 15px; flex: none; }
.controle.ok .controle-tete .ico { color: var(--ok); }
.controle.attention .controle-tete .ico { color: var(--attention); }
.controle span { font-size: 11.5px; color: var(--texte-2); line-height: 1.35; }
.editeur-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.etape-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }

/* Visuel */
.visuel-bloc { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1); }
.visuel-bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.visuel-bloc-tete h2 { font-size: 15px; display: flex; align-items: center; gap: 9px; }
.galerie-modeles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.modele { display: flex; flex-direction: column; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--texte-2); font: 650 12px/1.25 var(--police); text-align: left; min-width: 0; }
.modele-cadre { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--ratio, 1); border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--bordure-2); transition: border-color var(--rapide), box-shadow var(--rapide), transform var(--rapide); }
.modele-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modele:hover .modele-cadre { border-color: var(--bordure-3); transform: translateY(-1px); }
.modele[aria-checked='true'] { color: var(--texte); }
.modele[aria-checked='true'] .modele-cadre { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ligne), 0 10px 24px -12px var(--lueur); }
.modele:focus-visible { outline: none; }
.modele:focus-visible .modele-cadre { outline: 2px solid var(--accent); outline-offset: 2px; }
.modele-coche { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-plein); color: var(--accent-encre); opacity: 0; transform: scale(.7); transition: opacity var(--rapide), transform var(--rapide); }
.modele-coche .ico { width: 12px; height: 12px; }
.modele[aria-checked='true'] .modele-coche { opacity: 1; transform: none; }
.champs-visuel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.champs-visuel .champ + .champ { margin-top: 0; }
.champs-visuel .pleine { grid-column: 1 / -1; }
details.plie { border-top: 1px solid var(--bordure); padding-top: 12px; }
details.plie > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texte-2); }
details.plie > summary::-webkit-details-marker { display: none; }
details.plie > summary .ico { width: 16px; height: 16px; transition: transform var(--rapide); }
details.plie[open] > summary .ico { transform: rotate(180deg); }
details.plie > summary:hover { color: var(--texte); }
details.plie[open] > summary { margin-bottom: 14px; }
.note-modele { font-size: 12.5px; }

/* Aperçus réalistes : cadre de téléphone et carte de bureau */
.apercu-entete { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.apercu-entete .surtitre { display: flex; align-items: center; gap: 6px; }
.cadre-telephone { position: relative; width: 340px; max-width: 100%; padding: 12px; border-radius: 48px; background: linear-gradient(160deg, #2A3140, #11151C 40%, #1D232E); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 0 2px #05070A, 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 60px -20px var(--lueur); }
html[data-theme='jour'] .cadre-telephone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 0 0 2px #05070A, 0 30px 60px -24px rgba(11, 15, 20, .45); }
.telephone-ecran { position: relative; border-radius: 37px; overflow: hidden; background: #FFFFFF; height: 640px; display: flex; flex-direction: column; color: #050505; }
.telephone-barre { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 14px 26px 0; font: 700 13px/1 -apple-system, 'Segoe UI', var(--police); color: #050505; flex: none; }
.telephone-ilot { position: absolute; top: 10px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #050505; }
.telephone-icones { display: inline-flex; gap: 5px; align-items: center; }
.telephone-icones i { display: block; width: 16px; height: 9px; border-radius: 2px; background: #050505; }
.telephone-icones i:first-child { width: 14px; height: 8px; clip-path: polygon(0 100%, 25% 100%, 25% 60%, 50% 60%, 50% 30%, 75% 30%, 75% 0, 100% 0, 100% 100%); border-radius: 0; }
.telephone-appli { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 8px; border-bottom: 1px solid #EDEDED; font: 800 19px/1 var(--police); letter-spacing: -0.02em; flex: none; }
.telephone-appli .ico { width: 22px; height: 22px; }
.telephone-defile { flex: 1; overflow-y: auto; scrollbar-width: none; }
.telephone-defile::-webkit-scrollbar { display: none; }
.cadre-bureau { width: 100%; max-width: 520px; border-radius: 14px; overflow: hidden; background: #F3F2EF; border: 1px solid var(--bordure-2); box-shadow: var(--ombre-2); }
.bureau-barre { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: #E4E6EA; border-bottom: 1px solid #D5D8DD; }
.bureau-barre i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.bureau-barre i:nth-child(2) { background: #FEBC2E; }
.bureau-barre i:nth-child(3) { background: #28C840; }
.bureau-adresse { flex: 1; margin-left: 10px; height: 20px; border-radius: 6px; background: #FFFFFF; font: 600 10.5px/20px var(--mono); color: #5F6368; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bureau-page { padding: 14px; max-height: 640px; overflow-y: auto; }
.cadre-bureau.google .bureau-page { background: #FFFFFF; }

/* Contenu des aperçus (couleurs des réseaux, volontairement claires comme les applications) */
.ap { font-family: -apple-system, 'Segoe UI', Roboto, var(--police); font-size: 14px; color: #050505; background: #FFFFFF; line-height: 1.38; }
.ap-carte { background: #FFFFFF; border-radius: 10px; border: 1px solid #E3E3E3; overflow: hidden; }
.ap-entete { display: flex; align-items: center; gap: 9px; padding: 11px 12px 8px; }
.ap-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; background: #EEE; }
.ap-avatar-carre { border-radius: 6px; }
.ap-qui { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ap-qui strong { font-size: 13.5px; font-weight: 700; color: #050505; }
.ap-qui span { font-size: 11.5px; color: #65676B; }
.ap-plus { margin-left: auto; color: #65676B; }
.ap-plus .ico { width: 18px; height: 18px; }
.ap-texte { padding: 0 12px 10px; word-break: break-word; }
.ap-texte p { margin: 0 0 .55em; }
.ap-texte p.ap-espace { margin: 0; height: .35em; }
.ap-suite { color: #65676B; font-weight: 600; }
.ap-image { display: block; width: 100%; object-fit: cover; background: #E9EBEE; }
.ap-image-vide { display: grid; place-items: center; aspect-ratio: 1; color: #8A8D91; font-size: 12px; font-weight: 600; background: repeating-linear-gradient(135deg, #F0F2F5, #F0F2F5 10px, #E9EBEE 10px, #E9EBEE 20px); }
.ap-compteurs { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 12px; color: #65676B; }
.ap-actions { display: flex; justify-content: space-around; padding: 4px 6px; border-top: 1px solid #E4E6EB; color: #65676B; font-size: 12.5px; font-weight: 650; }
.ap-actions span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; }
.ap-actions .ico { width: 17px; height: 17px; }
.ap-ig-actions { display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; color: #050505; }
.ap-ig-actions .ico { width: 23px; height: 23px; }
.ap-ig-actions .ap-droite { margin-left: auto; }
.ap-legende { padding: 0 12px 12px; word-break: break-word; font-size: 13.5px; }
.ap-legende strong { font-weight: 700; margin-right: 5px; }
.ap-li { background: #F4F2EE; }
.ap-li .ap-carte { border-radius: 8px; border-color: #E0DFDC; }
.ap-li .ap-qui span { color: #666666; }
.ap-li .ap-actions { color: #5E5E5E; }
.ap-suivre { margin-left: auto; color: #0A66C2; font-weight: 700; font-size: 13.5px; }
.ap-gg { font-family: Roboto, Arial, var(--police); }
.ap-gg-fiche { border: 1px solid #DADCE0; border-radius: 12px; overflow: hidden; }
.ap-gg-tete { padding: 14px 16px 10px; border-bottom: 1px solid #ECEDEF; }
.ap-gg-tete strong { display: block; font-size: 18px; font-weight: 500; color: #202124; }
.ap-gg-tete span { font-size: 12.5px; color: #70757A; }
.ap-gg-onglets { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid #ECEDEF; font-size: 13px; color: #5F6368; font-weight: 500; }
.ap-gg-onglets span { padding: 10px 0; }
.ap-gg-onglets span.actif { color: #1A73E8; border-bottom: 3px solid #1A73E8; }
.ap-gg-post { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ap-gg-post .ap-image { border-radius: 10px; aspect-ratio: 4 / 3; }
.ap-gg-texte { font-size: 13.5px; color: #3C4043; line-height: 1.5; word-break: break-word; }
.ap-gg-texte p { margin: 0 0 .5em; }
.ap-gg-bouton { align-self: flex-start; padding: 8px 18px; border-radius: 20px; border: 1px solid #DADCE0; color: #1A73E8; font-weight: 500; font-size: 13.5px; }
.ap-gg-date { font-size: 12px; color: #70757A; }
.ap-lien { color: #216FDB; font-weight: 600; }
.ap-li .ap-lien { color: #0A66C2; }
.ap-legende .ap-lien { color: #00376B; font-weight: 500; }
.ap-gg .ap-lien { color: #1A73E8; font-weight: 500; }
button.ap-suite:hover { text-decoration: underline; }
.ap-qui span .ico { width: 11px; height: 11px; vertical-align: -1px; }
.apercu-note { font: 600 11px/1.4 var(--mono); color: var(--texte-3); text-align: center; max-width: 340px; }

/* Étape 3 : programmer */
.programmer-grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.quand { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1); }
.quand h2 { font-size: 17px; }
.quand-champs { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.quand-champs input { height: 48px; font-size: 16px; }
.creneaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.creneau { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-md); border: 1px solid var(--bordure-2); background: var(--surface-2); color: var(--texte); cursor: pointer; text-align: left; font: inherit; transition: border-color var(--rapide), background var(--rapide); }
.creneau:hover { border-color: var(--bordure-3); }
.creneau[aria-pressed='true'] { border-color: var(--accent-ligne); background: var(--accent-doux); }
.creneau .reseau-icone { width: 32px; height: 32px; }
.creneau-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.creneau-texte strong { font-size: 13px; }
.creneau-texte span { font: 600 11.5px/1.3 var(--mono); color: var(--texte-2); }
.quand-resume { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); }
.quand-resume .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.quand-resume strong { font-size: 16px; font-weight: 800; letter-spacing: -0.015em; text-transform: none; }
.quand-resume span { display: block; font: 600 11.5px/1.3 var(--mono); color: var(--texte-3); }
.recap { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1); position: sticky; top: calc(var(--haut) + 80px); }
.recap-visuel { width: 100%; border-radius: var(--r-md); border: 1px solid var(--bordure); background: var(--surface-2); display: block; max-height: 360px; object-fit: contain; }
.recap-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recap-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--bordure); font-size: 13px; }
.recap-liste li:first-child { border-top: 0; }
.recap-liste li > span:first-child { color: var(--texte-2); }
.recap-liste li > strong, .recap-liste li > span:last-child { text-align: right; min-width: 0; }
.recap-reseau { display: inline-flex; align-items: center; gap: 7px; }
.recap-reseau .ico { width: 15px; height: 15px; }
.succes { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 56px 24px; border-radius: var(--r-xl); background: radial-gradient(60% 80% at 50% 0%, var(--accent-doux), transparent 70%), var(--surface); border: 1px solid var(--bordure-2); box-shadow: var(--ombre-2); }
.succes-icone { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--accent-plein); color: var(--accent-encre); box-shadow: 0 0 0 10px var(--accent-doux), 0 20px 50px -10px var(--lueur); animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.succes-icone .ico { width: 36px; height: 36px; stroke-width: 2.2; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trace .5s .25s ease forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.succes h2 { font-size: 26px; letter-spacing: -0.025em; }
.succes p { margin: 0; color: var(--texte-2); max-width: 520px; }
.succes-quand { font: 700 14px/1.4 var(--mono); color: var(--texte); padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--bordure-2); }
.succes-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* Bibliothèque de photos */
.bibliotheque { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo-bib { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bordure-2); background: var(--surface-2); cursor: pointer; text-align: left; color: var(--texte); font: inherit; transition: border-color var(--rapide), transform var(--rapide), box-shadow var(--rapide); }
.photo-bib:hover { border-color: var(--bordure-3); transform: translateY(-1px); }
.photo-bib img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo-bib-texte { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 10px; font-size: 12.5px; font-weight: 700; }
.photo-bib[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ligne); }
.photo-bib .etiquette-illustration { position: absolute; top: 8px; left: 8px; background: rgba(5, 7, 10, .72); color: #FFD27A; backdrop-filter: blur(6px); }
.bib-filtres { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* ============================== Calendrier ============================== */
.cal-barre { display: flex; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; align-items: center; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-titre { margin-left: 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }
.cal-titre span { color: var(--texte-3); font-weight: 700; }
.cal-filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cal-filtres select { width: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.cal-zone { display: flex; flex-direction: column; gap: 16px; }
.cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--bordure); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--ombre-1); }
.cal-entete-jour { padding: 10px 12px; font: 650 11px/1 var(--mono); color: var(--texte-3); text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid var(--bordure); background: var(--surface); }
.cal-jour { position: relative; min-height: 128px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; border-right: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); background: var(--surface); transition: background var(--rapide); }
.cal-jour:nth-child(7n + 7) { border-right: 0; }
.cal-jour.weekend { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.cal-jour.hors-mois { background: var(--bg); }
.cal-jour.hors-mois .cal-numero { color: var(--texte-3); opacity: .6; }
.cal-jour.passe:not(.hors-mois) .cal-numero { color: var(--texte-3); }
.cal-jour.depot { background: var(--accent-doux); box-shadow: 0 0 0 2px var(--accent) inset; }
.cal-jour-tete { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-numero { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; font: 700 12.5px/1 var(--mono); color: var(--texte-2); }
.cal-jour.aujourdhui { background: linear-gradient(180deg, var(--accent-doux), transparent 70%), var(--surface); }
.cal-jour.aujourdhui .cal-numero { background: var(--accent-plein); color: var(--accent-encre); box-shadow: 0 0 16px var(--lueur); }
.cal-aujourdhui-mot { font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cal-plus { border: 0; background: none; color: var(--texte-2); font: 700 11.5px/1 var(--police); cursor: pointer; text-align: left; padding: 4px 6px; border-radius: 6px; }
.cal-plus:hover { background: var(--surface-2); color: var(--texte); }
.cal-vide { text-align: center; color: var(--texte-2); font-size: 13px; margin: 0; }
.evt { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 5px 7px 6px 9px; border: 0; border-radius: 7px; background: var(--m-fond); color: var(--texte); font: 650 12px/1.3 var(--police); text-align: left; cursor: pointer; min-width: 0; transition: filter var(--rapide), transform var(--rapide), box-shadow var(--rapide); }
.evt::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--m-vif); }
.evt:hover { filter: brightness(1.15); }
html[data-theme='jour'] .evt:hover { filter: brightness(.97); }
.evt[draggable='true'] { cursor: grab; }
.evt.glisse { opacity: .35; }
.evt-ligne { display: flex; align-items: center; gap: 6px; min-width: 0; }
.evt-heure { font: 650 10.5px/1 var(--mono); color: var(--m-texte); flex: none; }
.evt-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.evt-reseaux { display: inline-flex; gap: 3px; color: var(--m-texte); opacity: .9; flex: none; }
.evt-reseaux .ico { width: 12px; height: 12px; }
.evt-ex { font: 700 9px/1 var(--mono); color: var(--texte-3); border: 1px dashed var(--bordure-3); border-radius: 4px; padding: 2px 3px; flex: none; }
.evt.statut-brouillon { background: repeating-linear-gradient(135deg, var(--m-fond), var(--m-fond) 6px, transparent 6px, transparent 9px); box-shadow: 0 0 0 1px var(--m-ligne) inset; }
.evt.statut-brouillon::before { background: transparent; border-left: 2px dashed var(--m-vif); }
.evt.statut-publie { opacity: .62; }
.evt.statut-echec { box-shadow: 0 0 0 1.5px var(--erreur) inset; }
.evt.surbrillance { animation: halo 1.6s ease-in-out 3; }
@keyframes halo { 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 24px var(--lueur); } }
.evt-liste { padding: 10px 12px 10px 14px; font-size: 13.5px; }
.evt-liste .evt-titre { white-space: normal; }
.cal-semaine { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); border: 1px solid var(--bordure); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--ombre-1); }
.sem-coin { border-bottom: 1px solid var(--bordure); border-right: 1px solid var(--bordure); }
.sem-entete { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border-bottom: 1px solid var(--bordure); border-right: 1px solid var(--bordure); font: 650 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-3); min-width: 0; }
.sem-entete:last-of-type { border-right: 0; }
.sem-entete strong { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; font: 750 14px/1 var(--police); letter-spacing: -0.01em; color: var(--texte); text-transform: none; }
.sem-entete.aujourdhui { color: var(--accent); }
.sem-entete.aujourdhui strong { background: var(--accent-plein); color: var(--accent-encre); box-shadow: 0 0 14px var(--lueur); }
.sem-gouttiere { position: relative; border-right: 1px solid var(--bordure); }
.sem-heure { position: absolute; right: 8px; transform: translateY(-50%); font: 600 10.5px/1 var(--mono); color: var(--texte-3); }
.sem-col { position: relative; border-right: 1px solid var(--bordure); background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--h-heure) - 1px), var(--bordure) calc(var(--h-heure) - 1px), var(--bordure) var(--h-heure)); min-width: 0; }
.sem-col:last-child { border-right: 0; }
.sem-col.weekend { background-color: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.sem-col.aujourdhui { background-color: color-mix(in srgb, var(--accent-doux) 60%, transparent); }
.sem-col.depot { background-color: var(--accent-doux); box-shadow: 0 0 0 2px var(--accent) inset; }
.sem-col .evt { position: absolute; left: 4px; right: 4px; overflow: hidden; }
.sem-maintenant { position: absolute; left: 0; right: 0; height: 2px; background: var(--erreur); z-index: 3; pointer-events: none; }
.sem-maintenant::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--erreur); }
.cal-bas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.tiroir-brouillons { display: flex; flex-direction: column; gap: 12px; }
.tiroir-brouillons .evt { max-width: 100%; }
.brouillons-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.creneaux-cal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.creneaux-cal li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.creneaux-cal li .reseau-icone { width: 28px; height: 28px; }
.creneaux-cal li span { color: var(--texte-2); }
.agenda { display: flex; flex-direction: column; gap: 18px; }
.agenda-jour { display: flex; flex-direction: column; gap: 8px; }
.agenda-jour h3 { display: flex; align-items: center; gap: 10px; font-size: 14px; text-transform: capitalize; }
.agenda-jour h3 .mono { font-size: 11px; color: var(--texte-3); text-transform: uppercase; letter-spacing: .06em; }
.agenda-jour.aujourdhui h3 { color: var(--accent); }
.detail-pub { display: flex; flex-direction: column; gap: 14px; }
.detail-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail-quand { display: flex; align-items: center; gap: 8px; font: 650 13px/1.3 var(--mono); color: var(--texte-2); margin: 0; }
.detail-quand .ico { width: 16px; height: 16px; color: var(--accent); }
.extrait { margin: 0; padding: 12px 14px; border-left: 2px solid var(--bordure-3); background: var(--surface-2); color: var(--texte-2); border-radius: 0 10px 10px 0; white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; }

/* ============================== Demandes ============================== */
.dm-barre { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.champ-recherche { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.champ-recherche .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texte-3); pointer-events: none; }
.champ-recherche input { padding-left: 36px; min-height: 38px; }
.dm-barre select { width: auto; min-height: 38px; font-size: 13px; }
.kanban { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.kb-col { display: flex; flex-direction: column; gap: 10px; min-height: 320px; padding: 8px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--bordure); scroll-snap-align: start; transition: background var(--rapide), border-color var(--rapide); }
.kb-col.depot { border-color: var(--accent); background: var(--accent-doux); }
.kb-col-tete { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.kb-col-tete h3 { font-size: 13px; font-weight: 750; }
.kb-col-point { width: 8px; height: 8px; border-radius: 50%; background: var(--kb-couleur, var(--texte-3)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-couleur, var(--texte-3)) 20%, transparent); flex: none; }
.kb-compte { margin-left: auto; font: 700 11px/1 var(--mono); color: var(--texte-3); background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 999px; padding: 4px 8px; }
.kb-nouvelle { --kb-couleur: var(--info); }
.kb-a_rappeler { --kb-couleur: var(--attention); }
.kb-rendez_vous { --kb-couleur: #C4B5FD; }
.kb-devis_envoye { --kb-couleur: #7DD3FC; }
.kb-signe { --kb-couleur: var(--ok); }
.kb-perdu { --kb-couleur: var(--erreur); }
html[data-theme='jour'] .kb-rendez_vous { --kb-couleur: #6D28D9; }
html[data-theme='jour'] .kb-devis_envoye { --kb-couleur: #0369A1; }
.kb-liste { display: flex; flex-direction: column; gap: 8px; }
.kb-vide { padding: 18px 8px; text-align: center; font: 600 11.5px/1.4 var(--mono); color: var(--texte-3); border: 1px dashed var(--bordure-2); border-radius: var(--r-md); }
.kb-carte { position: relative; display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 11px 11px 9px; text-align: left; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--bordure-2); box-shadow: var(--ombre-1); color: var(--texte); font: inherit; cursor: pointer; transition: border-color var(--rapide), transform var(--rapide), box-shadow var(--rapide); }
.kb-carte:hover { border-color: var(--bordure-3); transform: translateY(-1px); box-shadow: var(--ombre-2); }
.kb-carte.glisse { opacity: .35; }
.kb-carte.est-nouvelle::after { content: ''; position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 25%, transparent); }
.kb-carte-nom { display: block; font-size: 13.5px; font-weight: 750; line-height: 1.3; padding-right: 14px; overflow-wrap: anywhere; }
.kb-carte-nom .badge-exemple { margin: 4px 0 0; display: inline-flex; }
.kb-carte-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-2); min-width: 0; }
.kb-carte-meta .ico { width: 13px; height: 13px; flex: none; color: var(--texte-3); }
.kb-carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid var(--bordure); }
.kb-carte-pied .mono { font-size: 10.5px; color: var(--texte-3); }
.kb-carte-marque { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--texte-2); }
.table-carte { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; padding: 11px 16px; font: 650 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-3); border-bottom: 1px solid var(--bordure); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--rapide); }
.table tbody tr:hover { background: var(--surface-2); }
.lien-ligne { font-weight: 750; color: var(--texte); text-decoration: none; }
.lien-ligne:hover { color: var(--accent); text-decoration: underline; }
.bouton-lien { border: 0; background: none; padding: 0; font: 750 13.5px var(--police); cursor: pointer; text-align: left; color: var(--texte); }
.statut-demande { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 650 12px/1 var(--police); white-space: nowrap; background: var(--surface-2); color: var(--texte-2); }
.statut-demande::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--kb-couleur, currentColor); }
.pied-indicateur { display: flex; justify-content: flex-end; font: 600 11px/1.4 var(--mono); color: var(--texte-3); }

/* Tiroir de détail */
.fiche { display: flex; flex-direction: column; gap: 18px; }
.fiche-tete { display: flex; flex-direction: column; gap: 10px; }
.fiche-tete-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fiche-recu { font: 600 11.5px/1.3 var(--mono); color: var(--texte-3); }
.fiche-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fiche-actions .btn { --h: 42px; }
.fiche-statuts { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-statuts .puce { min-height: 30px; padding: 4px 11px; font-size: 12.5px; }
.fiche-statuts .puce::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--kb-couleur); }
.fiche-statuts .puce[aria-checked='true'] { border-color: var(--kb-couleur); background: color-mix(in srgb, var(--kb-couleur) 14%, transparent); }
.fiche-section { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.fiche-section > h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte); }
.fiche-section > h3 .ico { width: 16px; height: 16px; color: var(--texte-2); }
.fiche-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0; }
.fiche-champ dt { font: 650 10.5px/1.2 var(--mono); color: var(--texte-3); text-transform: uppercase; letter-spacing: .07em; }
.fiche-champ dd { margin: 4px 0 0; word-break: break-word; font-size: 13.5px; font-weight: 600; }
.fiche-champ dd a { color: var(--texte); }
.message-lead { white-space: pre-wrap; background: var(--surface-2); padding: 12px 14px; border-radius: var(--r-md); margin: 0; font-size: 13.5px; border: 1px solid var(--bordure); }
.outil-carte { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); }
.outil-resultat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anah { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; font: 750 13px/1 var(--police); }
.anah::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.anah-bleu { color: #7AB8FF; background: rgba(53, 132, 228, .16); }
.anah-jaune { color: #FFD43B; background: rgba(250, 204, 21, .14); }
.anah-violet { color: #C4A7FF; background: rgba(147, 97, 255, .16); }
.anah-rose { color: #FF8FC7; background: rgba(236, 72, 153, .15); }
html[data-theme='jour'] .anah-bleu { color: #1D4ED8; background: #DBEAFE; }
html[data-theme='jour'] .anah-jaune { color: #854D0E; background: #FEF3C7; }
html[data-theme='jour'] .anah-violet { color: #6D28D9; background: #EDE9FE; }
html[data-theme='jour'] .anah-rose { color: #BE185D; background: #FCE7F3; }
.urgence { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; font: 750 13px/1 var(--police); }
.urgence .ico { width: 15px; height: 15px; }
.urg-faible { color: var(--ok); background: var(--ok-fond); }
.urg-moyen { color: var(--attention); background: var(--attention-fond); }
.urg-eleve { color: #FF9F5A; background: rgba(255, 159, 90, .15); }
.urg-urgent { color: var(--erreur); background: var(--erreur-fond); box-shadow: 0 0 0 1px color-mix(in srgb, var(--erreur) 40%, transparent) inset; }
html[data-theme='jour'] .urg-eleve { color: #B4500B; background: #FFEDD5; }
.jauge-urgence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; }
.jauge-urgence i { height: 6px; border-radius: 3px; background: var(--surface-3); }
.jauge-urgence i.on { background: currentColor; }
.liste-outil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-outil li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; }
.liste-outil li .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--texte-3); }
.dispositif { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--bordure); }
.dispositif-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dispositif-tete strong { font-size: 13px; }
.dispositif span { font-size: 12px; color: var(--texte-2); }
.disp-statut { font: 700 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 4px 7px; border-radius: 5px; background: var(--surface-2); color: var(--texte-2); }
.disp-piste { color: var(--ok); background: var(--ok-fond); }
.disp-conditions { color: var(--attention); background: var(--attention-fond); }
.donnees-cles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.donnees-cles div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.donnees-cles dt { font: 650 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); }
.donnees-cles dd { margin: 0; font-size: 13px; font-weight: 650; word-break: break-word; }
details.brut summary { cursor: pointer; font: 650 11.5px/1.4 var(--mono); color: var(--texte-3); }
.json { background: var(--bg); color: var(--texte-2); padding: 12px 14px; border-radius: var(--r-md); overflow: auto; font: 500 12px/1.6 var(--mono); max-height: 240px; margin: 8px 0 0; border: 1px solid var(--bordure); }
.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.historique li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px 20px; font-size: 13px; }
.historique li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--texte-3); }
.historique li::after { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--bordure-2); }
.historique li:last-child::after { display: none; }
.historique li:first-child::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.historique .mono { font-size: 11px; color: var(--texte-3); }
.notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.notes li { background: var(--surface-2); border: 1px solid var(--bordure); border-radius: var(--r-md); padding: 10px 12px; }
.notes p { margin: 4px 0 0; white-space: pre-wrap; font-size: 13.5px; }
.notes .mono { font-size: 11px; color: var(--texte-3); }
.note-saisie { display: flex; flex-direction: column; gap: 8px; }
.note-saisie .btn { align-self: flex-end; }

/* ============================== Comptes et réglages ============================== */
.bloc-marque { display: flex; flex-direction: column; gap: 12px; }
.bloc-marque + .bloc-marque { margin-top: 10px; }
.bloc-marque-titre { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.bloc-marque-titre img { width: 30px; height: 30px; border-radius: 8px; }
.grille-comptes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.compte { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1); }
.compte-entete { display: flex; align-items: center; gap: 12px; }
.compte-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--m-fond); color: var(--m-texte); }
.compte-icone .ico { width: 21px; height: 21px; }
.compte-entete div { display: flex; flex-direction: column; gap: 2px; }
.compte-entete span { font: 600 11px/1.2 var(--mono); color: var(--texte-3); }
.statut-connexion { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 650; font-size: 13px; color: var(--texte-2); }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); flex: none; }
.point-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fond); }
.etapes-liste { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 12px; }
.etapes-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; }
.etapes-liste .etape-num { flex: none; }
.reglages-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.champ-couleur { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); }
.champ-couleur label { display: flex; flex-direction: column; gap: 2px; font-weight: 650; font-size: 12.5px; }
.champ-couleur .mono { font-size: 11px; color: var(--texte-3); }
.infos { display: flex; flex-direction: column; gap: 0; margin: 0; }
.infos > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-top: 1px solid var(--bordure); }
.infos > div:first-child { border-top: 0; padding-top: 0; }
.infos dt { font: 650 10.5px/1.2 var(--mono); color: var(--texte-3); text-transform: uppercase; letter-spacing: .07em; }
.infos dd { margin: 0; font-weight: 650; font-size: 13.5px; }
.formulaire-pied { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--bordure); }
.colonne-etroite { max-width: 560px; }
.theme-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-carte { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--bordure-2); background: var(--surface-2); cursor: pointer; color: var(--texte); font: 700 13px/1.2 var(--police); text-align: left; }
.theme-carte[aria-checked='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ligne); }
.theme-apercu { height: 54px; border-radius: 8px; border: 1px solid var(--bordure); }
.theme-apercu.nuit { background: linear-gradient(90deg, #0C1016 0 28%, #10151C 28%), #10151C; }
.theme-apercu.jour { background: linear-gradient(90deg, #FFFFFF 0 28%, #F5F6F8 28%); }

/* ============================== Connexion ============================== */
.page-connexion { background: var(--bg); min-height: 100vh; min-height: 100dvh; }
.connexion { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.connexion-photo { position: relative; overflow: hidden; background: #071019; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; isolation: isolate; }
.connexion-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); animation: zoom 24s ease-out forwards; }
@keyframes zoom { to { transform: scale(1); } }
.connexion-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 9, 14, .55) 0%, rgba(5, 9, 14, .05) 32%, rgba(5, 9, 14, .3) 55%, rgba(5, 9, 14, .92) 100%), linear-gradient(90deg, rgba(5, 9, 14, .35), transparent 60%); }
.connexion-logos { display: flex; align-items: center; gap: 22px; }
.connexion-logos img { height: 46px; width: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
.connexion-logos img.jmb { height: 58px; }
.connexion-trait { width: 1px; height: 44px; background: rgba(255, 255, 255, .35); }
.connexion-texte { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.connexion-texte .surtitre { color: rgba(255, 255, 255, .78); }
.connexion-texte h2 { color: #fff; font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; }
.connexion-texte p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 15.5px; line-height: 1.6; }
.connexion-credit { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.connexion-panneau { position: relative; display: grid; place-items: center; padding: 40px 32px; background: radial-gradient(70% 50% at 50% 0%, var(--atmo-1), transparent 70%), var(--bg); }
.carte-connexion { width: min(400px, 100%); display: flex; flex-direction: column; gap: 18px; }
.carte-connexion-tete { display: flex; flex-direction: column; gap: 8px; }
.carte-connexion-tete h1 { font-size: 30px; letter-spacing: -0.03em; }
.carte-connexion-tete p { margin: 0; color: var(--texte-2); }
.carte-connexion .champ + .champ { margin-top: 0; }
.carte-connexion input { height: 46px; font-size: 15px; }
.carte-connexion .btn { --h: 48px; font-size: 15px; }
.connexion-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 11px/1.4 var(--mono); color: var(--texte-3); letter-spacing: .04em; }
.connexion-theme { position: absolute; top: 18px; right: 18px; }

/* ============================== Adaptations ============================== */
@media (max-width: 1320px) {
  .galerie-modeles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .controles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes-objectif { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-accueil, .brief-grille, .resultat-grille, .programmer-grille, .reglages-grille, .cal-bas { grid-template-columns: minmax(0, 1fr); }
  .brief-cote, .resultat-cote, .recap { position: static; }
  .grille-comptes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compo-tete { grid-template-columns: minmax(0, 1fr) auto; }
  .compo-tete .etapes-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 900px) {
  :root { --lateral: 0px; }
  .coque { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .haut { padding: 0 14px; gap: 8px; }
  .haut-logo { display: inline-flex; }
  .menu-mobile { display: inline-grid; }
  .contenu { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .barre-onglets { display: grid; }
  body:not(.mode-creation) { --onglets-bas: 72px; }
  body.mode-creation .barre-onglets { display: none; }
  .compo-tete { margin: -20px -16px 18px; padding: 10px 16px; }
  .connexion { grid-template-columns: 1fr; }
  .connexion-photo { min-height: 300px; padding: 28px 24px; }
  .connexion-texte h2 { font-size: 28px; }
}
@media (max-width: 760px) {
  h1 { font-size: 24px; }
  .accueil-tete h1 { font-size: 26px; }
  .deux-colonnes, .fiche-grille, .raccourcis, .champs-visuel, .quand-champs, .creneaux, .donnees-cles { grid-template-columns: 1fr; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px; gap: 10px; }
  .kpi-valeur { font-size: 30px; }
  .frise { grid-template-columns: 1fr; }
  .frise-jour { min-height: 0; }
  .frise-jour.vide-mobile { display: none; }
  .grille-comptes { grid-template-columns: 1fr; }
  .cartes-marque, .cartes-objectif { grid-template-columns: 1fr; }
  .carte-marque { grid-template-columns: auto 1fr auto; padding: 12px; }
  .carte-marque-logo { width: 76px; height: 48px; }
  .idees { grid-template-columns: 1fr; }
  .galerie-modeles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .controles { grid-template-columns: 1fr 1fr; }
  .selecteur-marque .segment { padding: 0 9px; }
  .selecteur-marque .segment .nom-long { display: none; }
  .pastille-demo .pastille-demo-texte { display: none; }
  .pastille-demo { padding: 0 10px; }
  .cadre-telephone { width: 300px; }
  .telephone-ecran { height: 560px; }
  .prochaine { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .prochaine-visuel { width: 88px; }
  .generation { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
  .compo-titre .surtitre { display: none; }
  .compo-titre h1 { font-size: 16px; }
  .etape-btn { padding: 0 10px 0 5px; gap: 7px; }
  .etape-btn .etape-lib { display: none; }
  .etape-btn[aria-current='step'] .etape-lib { display: inline; }
  .barre-compo { display: flex; }
  .compo { padding-bottom: 76px; }
  .modale-fond { padding: 0; place-items: end stretch; }
  .modale { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; animation: feuille var(--doux); }
  .modale-fond:has(.modale-panneau) { padding: 0; place-items: end stretch; }
  .modale-panneau { width: 100%; height: 94vh; height: 94dvh; border-radius: 22px 22px 0 0; animation: feuille var(--doux); }
  .modale-corps { padding: 16px; }
  .modale-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modale-actions .btn { flex: 1; }
  .cal-titre { font-size: 18px; }
  .entete-page { align-items: flex-start; }
  .bibliotheque { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .connexion-panneau { padding: 28px 20px 40px; }
  .connexion-logos img { height: 34px; }
  .connexion-logos img.jmb { height: 44px; }
}
@keyframes feuille { from { transform: translateY(40px); opacity: .6; } }
/* Barre d'actions du parcours de création (mobile, au pouce) */
.barre-compo { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-lateral) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--bordure-2); }
.barre-compo .btn { --h: 48px; flex: 1; font-size: 15px; }
.barre-compo .btn-fantome { flex: 0 0 auto; }
@media (max-width: 420px) {
  .selecteur-marque .segment { padding: 0 8px; gap: 5px; }
  .haut .btn-icone { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================== Thème Jour contrasté + barre latérale aux couleurs des marques (21/10/2026) ============================== */
html[data-theme='jour'] {
  --bg: #EDF0EB; --surface: #FFFFFF; --surface-2: #F3F5F1; --surface-3: #E5EAE2; --surface-champ: #FFFFFF;
  --bordure: rgba(14, 26, 19, .11); --bordure-2: rgba(14, 26, 19, .18); --bordure-3: rgba(14, 26, 19, .3);
  --texte: #0E1A13; --texte-2: #3D4A42; --texte-3: #55625A;
  --ombre-1: 0 1px 2px rgba(14, 26, 19, .07), 0 0 0 1px rgba(14, 26, 19, .02);
  --ombre-2: 0 2px 4px rgba(14, 26, 19, .06), 0 16px 34px -14px rgba(14, 26, 19, .24);
  --accent: #0A5C33; --accent-plein: #0A5C33; --accent-encre: #FFFFFF; --accent-doux: rgba(10, 92, 51, .09); --accent-ligne: rgba(10, 92, 51, .45); --lueur: rgba(10, 92, 51, .25);
}
html[data-theme='jour'][data-marque='glw'] { --accent: #0A6B39; --accent-plein: #0A6B39; }
html[data-theme='jour'] .lateral {
  background: linear-gradient(180deg, #0D6239 0%, #0A4F2E 46%, #073C23 100%);
  border-right: 0; color: #FFFFFF;
  --texte: #FFFFFF; --texte-2: rgba(255, 255, 255, .84); --texte-3: rgba(255, 255, 255, .64);
  --surface-2: rgba(255, 255, 255, .11); --surface-3: rgba(255, 255, 255, .18);
  --bordure: rgba(255, 255, 255, .14); --bordure-2: rgba(255, 255, 255, .22); --bordure-3: rgba(255, 255, 255, .32);
  --accent: #FFB15C; --accent-plein: #F69C3C; --accent-encre: #14201A; --accent-doux: rgba(246, 156, 60, .18); --accent-ligne: rgba(246, 156, 60, .6); --lueur: rgba(246, 156, 60, .5);
}
html[data-theme='jour'][data-marque='jmb'] .lateral {
  background: linear-gradient(180deg, #0E4A85 0%, #002448 52%, #001A35 100%);
  --accent: #F0C000; --accent-plein: #F0C000; --accent-encre: #0B1A2B; --accent-doux: rgba(240, 192, 0, .16); --accent-ligne: rgba(240, 192, 0, .6); --lueur: rgba(240, 192, 0, .45);
}
html[data-theme='jour'] .lateral .avatar { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
html[data-theme='jour'] .lateral .btn-creer { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 24px -10px rgba(0, 0, 0, .45); }
html[data-theme='jour'] .barre-haut, html[data-theme='jour'] .haut { background: color-mix(in srgb, #FFFFFF 86%, transparent); }

/* Logos de la barre latérale : côte à côte, sans chevauchement */
.lateral-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 8px 18px; text-decoration: none; color: inherit; }
.lateral-logos { display: flex; align-items: center; gap: 12px; }
.lateral-logos .logo-glw { height: 30px; width: auto; }
.lateral-logos .logo-jmb { height: 36px; width: auto; }
.lateral-logos i { width: 1px; height: 28px; background: currentColor; opacity: .3; }
.lateral-studio { font: 600 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--texte-3); }
.duo-logos { position: static; display: inline-flex; gap: 6px; width: auto; height: auto; }
.duo-logos img { position: static; width: 28px; height: 28px; box-shadow: none; }

/* Frise : pastille « Aujourd'hui » qui tient dans sa case */
.frise-tete span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frise-auj { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent-encre); background: var(--accent-plein); padding: 4px 6px; border-radius: 999px; }

/* Idées du moment */
.ligne-idee { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 6px; border-radius: var(--r-sm); text-decoration: none; color: var(--texte); transition: background var(--rapide); }
.ligne-idee:hover { background: var(--surface-2); }
.ligne-idee .point-marque { background: var(--m-vif); }
.ligne-idee .ico { color: var(--texte-3); }
.idee-angle-court { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }