/**
* ============================================================
* Fichier : parametres.css
* Projet : OUTIL DE CALCUL DE TEMPS
* Auteur : Émile Snyers — Date : 2026-07-20 — Version : 1.2.0
* Description : Panneau de paramètres généraux (thème, horloge,
* son, curseur, traînées, police, taille du texte,
* en-tête compact) + réglages appliqués via classes
* et variables CSS sur . Autonome : ne dépend
* d'aucune autre feuille que les variables de thème.
* ============================================================
*/
/* ============================================================
BOUTON ⚙️ D'OUVERTURE (en-tête)
============================================================ */
#btn-parametres {
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
/* Case « thème dynamique » de l'en-tête (V1.1.0) */
#btn-dynamique-entete {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.55rem;
border: 1px solid var(--couleur-bordure);
border-radius: 8px;
background: var(--couleur-fond-controle);
color: var(--couleur-texte);
cursor: pointer;
font-size: 0.82rem;
user-select: none;
}
#btn-dynamique-entete input { cursor: pointer; margin: 0; }
/* En-tête allégé : les gros boutons « mode dynamique » sont pilotés
depuis le panneau, donc masqués dans la barre pour gagner de la place. */
.entete-droite #btn-mode-dynamique,
.entete-droite #btn-mode-dynamique-x2 { display: none; }
/* ============================================================
OPTION « EN-TÊTE COMPACT » (classe posée sur )
============================================================ */
body.entete-compacte .entete { padding: 0.4rem 0.8rem; gap: 0.35rem; }
body.entete-compacte .entete-centre h1 { font-size: 1.1rem; }
body.entete-compacte .accroche { display: none; }
body.entete-compacte .entete-gauche .logo { font-size: 1.6rem; }
body.entete-compacte .horloge-temps-reel { font-size: 0.9rem; padding: 0.2rem 0.5rem; }
/* ============================================================
PANNEAU COULISSANT + VOILE
============================================================ */
.param-voile {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease;
z-index: 9998;
}
.param-voile.ouvert { opacity: 1; visibility: visible; }
.param-panneau {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: 640px;
max-width: 94vw;
max-height: 88vh;
background: var(--couleur-fond, #fff);
color: var(--couleur-texte, #111);
border: 1px solid var(--couleur-bordure, #ddd);
border-radius: 16px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
z-index: 9999;
display: flex;
flex-direction: column;
overflow: hidden;
}
.param-panneau.ouvert { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.param-entete {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.2rem;
border-bottom: 1px solid var(--couleur-bordure, #ddd);
position: sticky;
top: 0;
background: var(--couleur-fond, #fff);
z-index: 1;
}
.param-entete h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.param-fermer {
background: none;
border: none;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
color: var(--couleur-texte, #111);
opacity: 0.6;
padding: 0.2rem 0.4rem;
border-radius: 6px;
}
.param-fermer:hover { opacity: 1; background: var(--couleur-fond-controle, #f0f0f0); }
.param-corps { padding: 0.6rem 1.2rem 2rem; overflow-y: auto; flex: 1; }
/* ── Ligne de réglage ── */
.param-ligne {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.7rem 0.7rem;
border-bottom: 1px solid var(--couleur-bordure, #e5e5e5);
border-radius: 6px;
}
.param-ligne:hover { background: var(--couleur-fond-controle, #f4f6fa); }
.param-desc {
font-size: 0.78rem;
opacity: 0.7;
padding: 0.2rem 0.7rem 0.5rem;
line-height: 1.4;
}
.param-ligne-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.param-ligne-sous {
padding: 0.5rem 0 0.5rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
font-size: 0.86rem;
opacity: 0.95;
}
.param-section-titre {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 800;
color: var(--couleur-accent, #2e86de);
margin: 1.4rem 0 0.5rem;
padding: 0.45rem 0.7rem;
background: var(--couleur-fond-controle, #eef2f7);
border-left: 4px solid var(--couleur-accent, #2e86de);
border-radius: 6px;
}
.param-section-titre:first-child { margin-top: 0; }
.param-panneau select,
.param-panneau input[type="text"] {
padding: 0.35rem 0.5rem;
border: 1px solid var(--couleur-bordure, #ccc);
border-radius: 8px;
background: var(--couleur-fond-controle, #f7f7f7);
color: var(--couleur-texte, #111);
font-size: 0.86rem;
max-width: 190px;
}
.param-panneau input[type="range"] { width: 130px; }
.param-panneau input[type="color"] {
width: 38px; height: 30px; padding: 0; border: 1px solid var(--couleur-bordure, #ccc);
border-radius: 6px; background: none; cursor: pointer;
}
.param-btn {
padding: 0.35rem 0.7rem;
border: 1px solid var(--couleur-bordure, #ccc);
border-radius: 8px;
background: var(--couleur-fond-controle, #f7f7f7);
color: var(--couleur-texte, #111);
cursor: pointer;
font-size: 0.82rem;
}
.param-btn:hover { background: var(--couleur-accent, #4a7); color: #fff; border-color: transparent; }
.param-btn-danger { border-color: rgba(220, 53, 69, 0.5); color: #c62828; }
.param-btn-danger:hover { background: #c62828; color: #fff; }
.param-apercu-police {
padding: 0.6rem 0.8rem;
border: 1px dashed var(--couleur-bordure, #ccc);
border-radius: 8px;
margin-top: 0.4rem;
font-size: 1rem;
text-align: center;
}
/* ── Interrupteur (toggle) ── */
.param-switch { position: relative; width: 46px; height: 26px; flex: none; }
.param-switch input { opacity: 0; width: 0; height: 0; }
.param-switch .curseur {
position: absolute; inset: 0; cursor: pointer;
background: var(--couleur-bordure, #ccc);
border-radius: 999px; transition: background 0.2s;
}
.param-switch .curseur::before {
content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.param-switch input:checked + .curseur { background: var(--couleur-accent, #4a7); }
.param-switch input:checked + .curseur::before { transform: translateX(20px); }
/* ============================================================
HORLOGE PERSONNALISABLE (variables posées par le JS)
============================================================ */
#horloge {
background: var(--horloge-fond, transparent);
color: var(--horloge-texte, inherit);
font-size: var(--horloge-taille, inherit);
border-radius: var(--horloge-rayon, 8px);
}
/* Emplacement « bandeau flottant » : horloge détachée en bas à droite */
body.horloge-flottante #horloge {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 9000;
padding: 0.4rem 0.8rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
background: var(--horloge-fond, var(--couleur-fond-controle, #222));
}
body.horloge-masquee #horloge { display: none; }
/* ============================================================
CURSEURS PERSONNALISÉS (classe sur )
============================================================ */
html.curseur-pointeur, html.curseur-pointeur * { cursor: pointer; }
html.curseur-precision, html.curseur-precision * { cursor: crosshair; }
html.curseur-main, html.curseur-main * { cursor: grab; }
html.curseur-texte, html.curseur-texte * { cursor: text; }
html.curseur-aide, html.curseur-aide * { cursor: help; }
html.curseur-zoom, html.curseur-zoom * { cursor: zoom-in; }
html.curseur-cellule, html.curseur-cellule * { cursor: cell; }
html.curseur-attente, html.curseur-attente * { cursor: progress; }
/* Curseurs image (SVG data-URI) */
html.curseur-etoile, html.curseur-etoile * {
cursor: url('data:image/svg+xml;utf8,') 14 14, auto;
}
html.curseur-cible, html.curseur-cible * {
cursor: url('data:image/svg+xml;utf8,') 14 14, auto;
}
html.curseur-baguette, html.curseur-baguette * {
cursor: url('data:image/svg+xml;utf8,') 18 18, auto;
}
/* ============================================================
TRAÎNÉE DE CURSEUR (canvas plein écran, non bloquant)
============================================================ */
#param-trainee-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9500;
}
/* ============================================================
OPTION SURPRISE — MODE CONCENTRATION
Atténue tout le décor pour mettre en avant le module actif.
============================================================ */
body.mode-concentration .entete,
body.mode-concentration .pied-page,
body.mode-concentration .onglets,
body.mode-concentration #menu-lateral,
body.mode-concentration .module:not(.actif) {
opacity: 0.28;
filter: saturate(0.6);
transition: opacity 0.3s, filter 0.3s;
}
body.mode-concentration .entete:hover,
body.mode-concentration .onglets:hover { opacity: 1; filter: none; }
/* ============================================================
SÉLECTEUR DE THÈMES EN BOUTONS (3 colonnes : nom · ⚡ · ⚡⚡)
============================================================ */
.param-theme-picker { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.3rem 0 0.2rem; }
.ptp-entete,
.ptp-ligne {
display: grid;
grid-template-columns: 1fr 46px 46px;
gap: 0.4rem;
align-items: center;
}
.ptp-entete {
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
opacity: 0.6; padding: 0 0.2rem 0.1rem;
}
.ptp-entete span:not(:first-child) { text-align: center; }
.ptp-nom, .ptp-x1, .ptp-x2 {
padding: 0.5rem 0.6rem;
border: 1px solid var(--couleur-bordure, #ccc);
border-radius: 9px;
background: var(--couleur-fond-controle, #f5f7fb);
color: var(--couleur-texte, #111);
cursor: pointer;
font-size: 0.88rem;
transition: transform 0.08s, background 0.15s, border-color 0.15s;
}
.ptp-nom { text-align: left; font-weight: 600; }
.ptp-x1, .ptp-x2 { text-align: center; }
.ptp-nom:hover, .ptp-x1:hover, .ptp-x2:hover:not(:disabled) {
border-color: var(--couleur-accent, #2e86de); transform: translateY(-1px);
}
.ptp-ligne.actif .ptp-nom { border-color: var(--couleur-accent, #2e86de); box-shadow: inset 0 0 0 1px var(--couleur-accent, #2e86de); }
.ptp-nom.actif,
.ptp-x1.actif,
.ptp-x2.actif {
background: var(--couleur-accent, #2e86de);
color: #fff;
border-color: var(--couleur-accent, #2e86de);
}
.ptp-x2:disabled { opacity: 0.35; cursor: not-allowed; }
/* ============================================================
DEUX VERSIONS DU PANNEAU
• Compacte : petits écrans (≤600px) — descriptions masquées,
espacement resserré, modale quasi plein écran.
• Étendue : grands écrans (≥900px) — modale plus large,
descriptions visibles, respirations plus généreuses.
============================================================ */
.param-desc { display: none; } /* masquée par défaut (compacte) */
@media (min-width: 900px) {
.param-panneau { width: 760px; }
.param-corps { padding: 1rem 1.6rem 2.2rem; }
.param-desc { display: block; } /* version étendue */
.param-ligne { padding: 0.85rem 0.8rem; }
.param-section-titre { font-size: 0.82rem; }
}
/* ============================================================
RESPONSIVE DU PANNEAU
============================================================ */
@media (max-width: 600px) {
.param-panneau { width: 96vw; max-height: 93vh; }
.param-corps { padding: 0.6rem 0.9rem 1.6rem; }
.param-ligne { flex-wrap: wrap; padding: 0.6rem 0.5rem; }
.param-section-titre { margin: 1rem 0 0.4rem; }
.param-desc { display: none; }
}