/* fonctions/parametres/agencement.css — fenêtre Paramètres à onglets (ordinateur)
   Chargé juste après parametres.css, qu'il remplace pour la mise en page : barre d'onglets à gauche
   (Apparence, Cartes, Listes, Interface), une rubrique à la fois à droite, Réinitialiser / Fermer
   en bas. Les quatre rubriques occupent la même case de la grille : la fenêtre garde la hauteur de
   la plus grande et ne saute pas d'un onglet à l'autre ; les rubriques cachées le sont par
   visibility. La fenêtre défile si l'écran est trop bas (zoom du navigateur, petit écran).
   Tout est sous html:not(.mode-telephone) : au téléphone, telephone.css garde sa page Apparence. */

html:not(.mode-telephone) #settingsMenu.settings-menu{
 width:min(calc(735px * var(--ui-scale-factor)),calc(100vw - calc(18px * var(--ui-scale-factor))));
 max-height:calc(100dvh - 16px);
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-gutter:auto;
 padding:calc(6.75px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));
 grid-template-columns:calc(97.5px * var(--ui-scale-factor)) minmax(0,1fr);
 grid-template-rows:auto auto auto;
 grid-template-areas:
  "title title"
  "nav pane"
  "reset reset";
 column-gap:calc(9px * var(--ui-scale-factor));
 row-gap:calc(6.75px * var(--ui-scale-factor));
}
html:not(.mode-telephone) #settingsMenu .settings-window-head{position:sticky;top:calc(-6.75px * var(--ui-scale-factor));z-index:5;background:inherit;}
html:not(.mode-telephone) #settingsMenu.settings-menu .settings-window-head{background:color-mix(in srgb,var(--surface-2) 96%,#000);}

/* ---- Onglets ---- */
#settingsMenu .settings-nav{display:none;}
html:not(.mode-telephone) #settingsMenu .settings-nav{
 grid-area:nav;
 display:flex; flex-direction:column; gap:calc(2.25px * var(--ui-scale-factor));
 align-self:start;
 position:sticky; top:calc(30px * var(--ui-scale-factor));
}
html:not(.mode-telephone) #settingsMenu .settings-nav-btn{
 display:flex; align-items:center; gap:calc(6px * var(--ui-scale-factor));
 width:100%; min-height:calc(24px * var(--ui-scale-factor));
 padding:calc(3.75px * var(--ui-scale-factor)) calc(6.75px * var(--ui-scale-factor));
 border:0; border-radius:calc(5.25px * var(--ui-scale-factor));
 background:transparent; color:var(--text-dim);
 font:600 calc(9.5px * var(--ui-scale-factor))/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 text-align:left; cursor:pointer;
 transition:background-color .12s ease,color .12s ease;
}
html:not(.mode-telephone) #settingsMenu .settings-nav-btn:hover{background:rgba(255,255,255,.045);color:var(--text);}
html:not(.mode-telephone) #settingsMenu .settings-nav-btn[aria-selected="true"]{
 background:color-mix(in srgb,var(--accent) 18%,transparent);
 color:var(--text);
 box-shadow:inset calc(2.25px * var(--ui-scale-factor)) 0 0 var(--accent);
}
html:not(.mode-telephone) #settingsMenu .settings-nav-btn:focus-visible{outline:calc(1.5px * var(--ui-scale-factor)) solid var(--accent);outline-offset:calc(1px * var(--ui-scale-factor));}
html:not(.mode-telephone) #settingsMenu .settings-nav-icon{
 display:inline-grid; place-items:center; flex:0 0 auto;
 width:calc(12px * var(--ui-scale-factor)); height:calc(12px * var(--ui-scale-factor));
 font-size:calc(10px * var(--ui-scale-factor)); color:inherit; opacity:.9;
}
html:not(.mode-telephone) #settingsMenu .settings-nav-icon .ui-icon{width:100%;height:100%;}
@media (prefers-reduced-motion:reduce){html:not(.mode-telephone) #settingsMenu .settings-nav-btn{transition:none;}}

/* ---- Rubriques : une case commune, seule la rubrique choisie est visible ---- */
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group]{
 grid-area:pane;
 align-self:start;
 min-width:0;
 padding:calc(6px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor));
 visibility:hidden;
}
html:not(.mode-telephone) #settingsMenu[data-onglet="appearance"] .settings-group[data-settings-group="appearance"],
html:not(.mode-telephone) #settingsMenu[data-onglet="cards"] .settings-group[data-settings-group="cards"],
html:not(.mode-telephone) #settingsMenu[data-onglet="lists"] .settings-group[data-settings-group="lists"],
html:not(.mode-telephone) #settingsMenu[data-onglet="interface"] .settings-group[data-settings-group="interface"]{visibility:visible;}
/* Titre de la rubrique : à gauche, comme un titre de page. */
html:not(.mode-telephone) #settingsMenu .settings-group .settings-group-heading{
 justify-content:flex-start;
 padding:0 calc(1.5px * var(--ui-scale-factor)) calc(5.25px * var(--ui-scale-factor));
 margin-bottom:calc(3px * var(--ui-scale-factor));
 font-size:calc(10.5px * var(--ui-scale-factor));
}

/* Cartes, Listes, Interface : réglages sur deux colonnes, aide sur toute la largeur. */
html:not(.mode-telephone) #settingsMenu .settings-group:is([data-settings-group="cards"],[data-settings-group="lists"],[data-settings-group="interface"]) .settings-group-content{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 column-gap:calc(13.5px * var(--ui-scale-factor));
 row-gap:calc(3px * var(--ui-scale-factor));
 align-content:start;
}
html:not(.mode-telephone) #settingsMenu .settings-group:is([data-settings-group="cards"],[data-settings-group="lists"],[data-settings-group="interface"]) .settings-section{border-top:0;grid-column:auto;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="interface"] .settings-help{grid-column:1/-1;margin:0 0 calc(4.5px * var(--ui-scale-factor));}

/* Apparence : les trois couleurs côte à côte, puis le fond sur toute la largeur. */
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .settings-group-content{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:calc(6.75px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));
 align-items:start;
}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .settings-section{
 border:0; padding:calc(3px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor));
}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .appearance-accent-section{grid-column:1;grid-row:1;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .settings-section.appearance-arrow-section{grid-column:2;grid-row:1;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .settings-section.appearance-shortcuts-section{grid-column:3;grid-row:1;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .appearance-background-section{
 grid-column:1/-1; grid-row:2;
 display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:calc(9px * var(--ui-scale-factor));
 padding-top:calc(6px * var(--ui-scale-factor));
 border-top:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.055);
}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > .settings-label{grid-column:1/-1;grid-row:1;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > .settings-help{grid-column:1/-1;grid-row:2;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > #backgroundColorPalette{grid-column:1/-1;grid-row:3;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > .bg-direction-section{grid-column:1;grid-row:4;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > .bg-balance-section{grid-column:2;grid-row:4;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > .bg-softness-section{grid-column:3;grid-row:4;}
html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > .bg-brightness-section{grid-column:4;grid-row:4;}
html:not(.mode-telephone) #settingsMenu .appearance-background-section > .settings-section.bg-subsection{margin-top:calc(6px * var(--ui-scale-factor));}

/* ---- Bas de fenêtre ---- */
html:not(.mode-telephone) #settingsMenu .settings-reset{grid-area:reset;}

/* Fenêtre étroite (navigateur très zoomé ou petite fenêtre) : onglets en ligne au-dessus,
   réglages sur une colonne, couleurs l'une sous l'autre. */
@media (max-width:700px){
 html:not(.mode-telephone) #settingsMenu.settings-menu{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"title" "nav" "pane" "reset";
  grid-template-rows:auto auto auto auto;
 }
 html:not(.mode-telephone) #settingsMenu .settings-nav{flex-direction:row;flex-wrap:wrap;position:static;}
 html:not(.mode-telephone) #settingsMenu .settings-nav-btn{width:auto;}
 html:not(.mode-telephone) #settingsMenu .settings-group:is([data-settings-group="cards"],[data-settings-group="lists"],[data-settings-group="interface"]) .settings-group-content,
 html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .settings-group-content{grid-template-columns:minmax(0,1fr);}
 html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .settings-section:is(.appearance-accent-section,.appearance-arrow-section,.appearance-shortcuts-section){grid-column:1;grid-row:auto;}
 html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .appearance-background-section{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));}
 html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] .appearance-background-section > :is(.bg-direction-section,.bg-balance-section,.bg-softness-section,.bg-brightness-section){grid-column:auto;grid-row:auto;}
}

/* Colonnes larges : libellés sur une ligne, curseur juste dessous. */
html:not(.mode-telephone) #settingsMenu .settings-section:has(> .settings-range) .settings-label{min-height:0;margin-bottom:calc(5.25px * var(--ui-scale-factor));}
html:not(.mode-telephone) #settingsMenu .settings-group-icon .ui-icon{width:100%;height:100%;}
@media (max-width:700px){
 html:not(.mode-telephone) #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-content > .appearance-background-section{order:1;}
}