/* Styles d'index.php, sortis de la page pour être mis en cache par le navigateur (un an,
   versionnés par filemtime). Aucune dépendance à la langue ni à l'utilisateur. */
html{font-family: "Universal Sans Text", sans-serif}
        body{margin:0px;font-size: 1em;color:grey}
        html, body {padding: 0;width: 100%;height: 100%;}
        :focus {outline: none !important;border:none;}
.red {color:#dc3545; font-weight: bold;}
.caution{color:red; width:100%}
button{background-color:dimgrey;font-size:1.02em;color:white;border-radius:10px;border:none;padding:5px 10px;cursor:pointer}
a, a:visited {color:grey}
.bigger {font-size: 1.2em}
.gzYraBJZq {padding:10px;}
/*TABS*/
#section1 {position: fixed;top: 0;left: 0;width: var(--app-vw, 100%);height: 50px;background: #333;color: white;display: flex;align-items: center;padding: 0 10px;z-index: 1000;}
#tabs-container {display:flex;align-items:center;}
.tab {padding: 6px 12px;margin-right:5px;background:#555;border-radius:4px;cursor:pointer;}
.tab.active {background: #222;}
.tab .closeIframe {margin-left: 8px;color: white;cursor: pointer;}
.tab-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;}
/* Onglet inactif dont l'iframe charge encore : il reste rendu (empilé sous l'onglet actif)
   au lieu de passer en display:none. En display:none Chromium déclare le cadre « non rendu »,
   cache son widget et bride ses timers : dans la voiture le site s'arrêtait de charger tant
   qu'on n'y revenait pas. Le fond opaque de .tab-content empêche de le voir par transparence. */
.tab-content.loading {display: flex;z-index: 0;pointer-events: none;}
.tab-content.active {display: flex;z-index: 1;pointer-events: auto;}
.altitudeStatus{color:black;background-color: white;border-radius: 5px;padding: 5px;position: fixed;top:10px;right:2px;}
/*MAIN*/
#section2{position: fixed;top:50px;height: calc(var(--app-vh, 100vh) - 50px);width: var(--app-vw, 100vw);left:0px;z-index:2000}
#twocolumns{display:flex;height: calc(var(--app-vh, 100vh) - 50px);max-width:100%;min-width:0;--nav-w:180px;--nav-h:0px}
nav {
    width: var(--nav-w, 180px);
    flex-shrink: 0;
    height: calc(var(--app-vh, 100vh) - 50px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
nav button {
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    flex-shrink: 0;
}
.menu{font-family: "Universal Sans Text", sans-serif;font-size: 1.49em;padding:13px 5px 13px 5px;user-select:none;margin: 5px 0 0 0}
footer {
    position: static;
    margin-top: auto;
    padding: 10px 0;
    line-height: 2em;
    flex-shrink: 0;
}
.menu.smaller{font-size:1.02em;border:none;padding:2px 5px 16px 5px;}
.menu.active {border-radius:10px}
.copyright-container {display: flex;align-items: center;font-size:0.8em;}
button#globe {display: flex;align-items: center;background:transparent;gap: 8px;padding: 8px 12px;border: none;cursor: pointer;/*display:inline-block;*/width:20px;height:20px;}
svg {fill:grey}
#globe svg {display: block;flex-shrink: 0;}
#globe .langue {color:grey;line-height: 1;}
#mirror {flex:1;min-width:0;height:calc(var(--app-vh, 100vh) - 50px)}
/*PAGE*/
/* La largeur doit être DÉFINIE : « calc(100%-180px) » (sans espaces) était invalide,
   donc ignoré, et un bloc absolument positionné en width:auto prend sa largeur
   « shrink-to-fit », qui ne descend jamais sous la largeur mini de son contenu. Le
   tableau des notes (1004 px) et le bandeau .info (800 px) imposaient ainsi la
   largeur de la page quelle que soit la fenêtre : la grille d'icônes se disposait
   sur 5 colonnes dont 2 hors écran. */
.page {display: none; position: absolute;margin:0 0 0 5px;padding:0;border:0;box-sizing:border-box;
       height:calc(100% - var(--nav-h, 0px));width:calc(100% - var(--nav-w, 180px) - 5px);
       overflow-y: auto;overflow-x: hidden;}
.icon {display:inline-block; width: 165px; max-width:100%; box-sizing:border-box; text-align: center; cursor: pointer;font-size: 1em;padding:5px;position:relative}
.appleicon{border-radius:20px;width:80px;height:80px;}
.info {width:auto;max-width:800px;padding:20px 0 10px 0;margin:auto;text-align:center; color:#007AFF}
/* Bouton « Plein écran » sur la ligne du titre Vidéos, et son infobulle ouverte par le
   « i » encerclé. La bulle est masquée par l'attribut hidden : ne pas lui donner de
   propriete display. */
.subcat-head {display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.subcat-head h2 {margin-bottom:0}
.fullscreen-link {position:relative;display:inline-flex;align-items:center;gap:8px}
.fullscreen-link[hidden] {display:none}
.fs-btn {background-color:dimgrey;color:white !important;font-size:1.02em;border-radius:10px;
         padding:5px 10px;text-decoration:none;cursor:pointer;white-space:nowrap}
/* Le « i » du bouton « Plein écran » : disque plein plutôt que cercle, gris un peu plus
   clair que le bouton voisin pour ne pas s'y fondre. */
.fs-info {display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;
          border:none;border-radius:50%;background:grey;color:white;
          font-size:0.85em;font-style:italic;font-weight:bold;line-height:1;cursor:pointer}
.fs-bubble {position:absolute;left:0;top:calc(100% + 8px);z-index:3000;width:435px;max-width:70vw;padding:10px 12px;
            border-radius:10px;background:#333;color:white;font-size:1.15em;line-height:1.35;text-align:left;
            box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.fs-bubble::before {content:'';position:absolute;top:-6px;left:14px;border:6px solid transparent;
                    border-top:0;border-bottom-color:#333}
/* Pastilles des titres de sous-catégorie et de catégorie : même bulle que le bouton
   « Plein écran », posée sous la pastille touchée. */
.allowed-tag {display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Repère de la bulle : c'est la pastille, pas le groupe. */
.at-item {position:relative;display:inline-flex;align-items:center}
.at-badge {background-color:#1DA34A;color:white;font-size:1.02em;border-radius:10px;
           padding:5px 10px;font-family:inherit;line-height:normal;border:none}
button.at-badge {cursor:pointer}
.at-orange {background-color:#D9730D}
/* Pastille bicolore : la diagonale sépare ce qui est libre de ce qui demande le niveau 3.
   Le dégradé à arrêt franc donne un bord net, sans lissage. L'espacement élargit la seule
   espace du libellé (« ✓ N3 ») pour que la coupure passe entre les deux signes : la coche
   reste sur le vert, l'abréviation sur l'orange. */
.at-split {background:linear-gradient(115deg,#1DA34A 0 50%,#D9730D 50% 100%);word-spacing:1.2em}
/* fill:none doit être repris ici : la règle « svg {fill:grey} » plus haut l'emporte sur
   l'attribut fill du dessin, et remplirait les disques du volant de gris. L'agrandissement
   passe par transform, qui ne compte pas dans la mise en page : agrandir width/height
   ferait grossir la pastille avec le dessin. */
.at-wheel {width:1.15em;height:1.15em;vertical-align:-0.22em;fill:none;transform:scale(1.2)}
.cat-tag {margin-bottom:12px}
.iconiframetitle {background:#555;color:white !important;padding: 1px 3px;border-radius:4px}
/* Liens ajoutés par l'utilisateur via une URL : pastille 🔗 au coin bas-droit de
   la vignette. Le coin haut-droit reste libre pour le × de suppression. */
.icon[data-custom-id]::after {
    content:'\1F517';
    position:absolute;
    top:68px;right:calc((100% - 80px) / 2 - 4px);
    width:20px;height:20px;border-radius:50%;
    background:#007AFF;color:white;
    font-size:11px;line-height:20px;text-align:center;
    pointer-events:none;
}
@media (prefers-color-scheme: light) { .icon[data-custom-id]::after { box-shadow:0 0 0 2px #EEEEEE; } }
@media (prefers-color-scheme: dark)  { .icon[data-custom-id]::after { box-shadow:0 0 0 2px #161616; } }
/*NOTE*/
textarea {writing-mode: horizontal-tb !important;column-count: initial !important;box-sizing: border-box;margin: 0em;border-width: 0px;padding: 2px 0px 0px 2px;font-family: Helvetica, Arial, sans-serif;font-size:1.02em;caret-color:auto}
.emailadd{min-width:0;width:160px;max-width:100%;box-sizing:border-box;height:40px;min-height:25px}
.green { color: #28a745; font-weight: bold; }
#statusMessage {display:none;margin: 10px 0;padding: 10px;border-radius: 4px;background-color: #f8f9fa;border: 1px solid #dee2e6;}
button:disabled {opacity: 0.6;cursor: not-allowed;}
#decreaseFontBtn, #increaseFontBtn, #resetFontBtn {padding: 5px 20px;}
#resetFontBtn {font-weight: bold;}
.note{margin: 0 5px 0 0;padding: 5px;min-width:0;min-height:200px;width:100%;max-width:450px;box-sizing:border-box;height:260px}
#infonote{width:100%;max-width:302px;display:inline-block;text-align: justify;height:100%}
#notesEmailAdd{vertical-align:top;}
/*#boutonEffacer{margin:0 0 0 40px}*/
#puboffice{min-width:0; width:auto; max-width:400px;text-align: center;}
#puboffice img{max-width:100%;height:auto}
.pubtitle{text-transform: uppercase; font-size:0.8em}
#captcha-container{display:none}
.pubiframe {cursor: pointer;}
/* Edit mode */
body.edit-mode .icon { cursor: grab; touch-action: none; user-select: none; }
.edit-remove {
    display:none;
    position:absolute;top:-7px;right:calc((100% - 80px) / 2 - 28px);
    width:22px;height:22px;background:#dc3545;color:white;border-radius:50%;
    align-items:center;justify-content:center;font-size:14px;line-height:1;
    cursor:pointer;z-index:10;border:none;padding:0;
}
.icon.longpress-active .edit-remove { display:flex !important; }
.edit-remove::after { content:'';position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px; }
.drag-ghost {
    position:fixed;
    pointer-events:none;
    z-index:9999;
    opacity:0.85;
    box-shadow:0 8px 28px rgba(0,0,0,0.35);
    border-radius:12px;
    transform:scale(1.08);
    transform-origin:center center;
    will-change:left,top;
}
.drag-placeholder {
    display:inline-block;
    vertical-align:top;
    border-radius:12px;
    background:rgba(0,122,255,0.12);
    border:2px dashed rgba(0,122,255,0.45);
    box-sizing:border-box;
}
.icon.move-mode { box-shadow:0 0 0 3px #007AFF;border-radius:12px;cursor:grab;touch-action:none;user-select:none; }
.add-link-btn {
    display:inline-block;width:165px;padding:5px;
    background:transparent;border:none;cursor:pointer;
    vertical-align:top;
}
.add-link-btn .add-link-icon {
    width:80px;height:80px;border-radius:20px;box-sizing:border-box;
    border:3px dashed #666;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto;
    font-size:48px;line-height:1;color:#666;
}
/* Add link panel — anchored to top so it stays visible when Tesla keyboard opens */
#addlink-panel {
    display:none;position:fixed;top:40px;left:50%;transform:translateX(-50%);
    width:100%;max-width:600px;z-index:5000;
    background:#1c1c1e;border:2px solid #444;border-radius:12px;padding:14px 16px 12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
#addlink-panel.open { display:block; }
#addlink-panel-header {
    display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
#addlink-panel-header h3 { color:white;margin:0;font-size:1em; }
#addlink-panel-close {
    background:none;border:none;color:#aaa;font-size:1.4em;cursor:pointer;
    padding:0 4px;line-height:1;
}
#addlink-panel .tab-btns { display:flex;gap:8px;margin-bottom:12px; }
#addlink-panel .tab-btn  { flex:1;padding:8px;background:#3a3a3c;color:white;border:none;border-radius:8px;font-size:1em;cursor:pointer; }
#addlink-panel .tab-btn.active { background:#007AFF; }
#addlink-panel input[type=url],#addlink-panel input[type=text] {
    width:100%;box-sizing:border-box;padding:10px;border-radius:8px;border:none;
    background:#3a3a3c;color:white;font-size:1em;caret-color:auto;margin-bottom:10px;
}
#addlink-tab-url-actions { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px; }
#addlink-tab-url-actions button { padding:8px 14px;border:none;border-radius:8px;cursor:pointer;font-size:1em; }
#addlink-paste-btn { display:inline-flex;align-items:center; }
#addlink-paste-btn svg { fill:white; }
#fetch-preview { padding:8px;background:#3a3a3c;border-radius:8px;display:none;margin-bottom:8px; }
#fetch-preview img { width:50px;height:50px;border-radius:10px;vertical-align:middle;margin-right:8px; }
#fetch-preview .fetch-preview-editor { display:inline-block; vertical-align:middle; width:calc(100% - 66px); }
#fetch-preview .fetch-preview-editor label { display:block;color:#ccc;font-size:0.85em;margin-bottom:4px; }
#fetch-preview .fetch-preview-editor input {
    color:white;background:#555;border:1px solid #666;border-radius:6px;
    padding:8px 10px;font-size:0.95em;caret-color:auto;
    width:100%;box-sizing:border-box;
}
#fetch-preview .fetch-preview-hint { display:block;color:#9ca3af;font-size:0.8em;margin-top:4px; }
/* Rename panel — same anchoring as addlink-panel (Tesla keyboard safe) */
#rename-panel {
    display:none;position:fixed;top:40px;left:50%;transform:translateX(-50%);
    width:100%;max-width:600px;z-index:5000;
    background:#1c1c1e;border:2px solid #444;border-radius:12px;padding:14px 16px 12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
#rename-panel.open { display:block; }
#rename-panel-header {
    display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
#rename-panel-header h3 { color:white;margin:0;font-size:1em; }
#rename-panel-close {
    background:none;border:none;color:#aaa;font-size:1.4em;cursor:pointer;padding:0 4px;line-height:1;
}
#rename-actions { display:flex;gap:8px;margin-top:4px; }
#rename-actions button { flex:1;padding:10px;border:none;border-radius:8px;font-size:1em;cursor:pointer; }
/* ── Mode selector (inline, dans le panel addlink) ── */
#fetch-mode { display:none;flex-direction:column;gap:6px;margin-bottom:6px; }
#fetch-mode small { color:#888;font-size:0.8em; }
#fetch-mode-btns { display:flex;gap:6px; }
#fetch-mode-btns .mode-btn {
    flex:1;padding:8px 4px;border:2px solid #555;border-radius:8px;
    background:#3a3a3c;color:#bbb;font-size:0.82em;cursor:pointer;line-height:1.3;
}
#fetch-mode-btns .mode-btn.active { border-color:#007AFF;background:#0a2a4a;color:white;font-weight:bold; }
#fetch-mode-btns .mode-btn:disabled { opacity:0.35;cursor:not-allowed; }
/* ── Mode panel (sous-panneau depuis le menu contextuel) ── */
#mode-panel {
    display:none;position:fixed;top:40px;left:50%;transform:translateX(-50%);
    width:100%;max-width:600px;z-index:5000;
    background:#1c1c1e;border:2px solid #444;border-radius:12px;padding:14px 16px 12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
#mode-panel.open { display:block; }
#mode-panel-header {
    display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
#mode-panel-header h3 { color:white;margin:0;font-size:1em; }
#mode-panel-close {
    background:none;border:none;color:#aaa;font-size:1.4em;cursor:pointer;padding:0 4px;line-height:1;
}
#mode-options { display:flex;flex-direction:column;gap:8px; }
.mode-opt-btn {
    width:100%;padding:12px 14px;border:2px solid #555;border-radius:8px;
    background:#3a3a3c;color:#ccc;font-size:1em;cursor:pointer;text-align:left;
}
.mode-opt-btn.active { border-color:#007AFF;background:#0a2a4a;color:white;font-weight:bold; }
.mode-opt-btn svg path { fill:white; }
#addlink-panel .hidden-icons-grid { display:flex;flex-wrap:wrap;gap:8px;max-height:calc(var(--app-vh, 100vh) * 0.35);overflow-y:auto; }
#addlink-panel .hidden-icon-item {
    width:100px;text-align:center;cursor:pointer;padding:6px;
    background:#3a3a3c;border-radius:8px;font-size:0.8em;color:white;border:none;
}
#addlink-panel .hidden-icon-item img { width:56px;height:56px;border-radius:10px;display:block;margin:0 auto 4px; }
#auth-modal-overlay {
    display:none;position:fixed;inset:0;z-index:6000;
    background:rgba(0,0,0,0.6);align-items:center;justify-content:center;
}
#auth-modal-overlay.open { display:flex; }
#auth-modal {
    background:#1c1c1e;border-radius:16px;padding:24px 20px 20px;
    max-width:320px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.6);color:white;
}
#auth-modal h3 { margin:0 0 8px;font-size:1.1em; }
#auth-modal p { margin:0 0 8px;color:#aaa;font-size:0.95em; }
#auth-modal ul { margin:0 0 20px 18px;padding:0;color:#ddd;font-size:0.95em;list-style:disc; }
#auth-modal ul li { margin-bottom:4px; }
#auth-modal-btns { display:flex;gap:10px; }
#auth-modal-btns button { flex:1;padding:10px;border:none;border-radius:10px;font-size:1em;cursor:pointer; }
#auth-modal-btn-login { background:#3a3a3c;color:white; }
#auth-modal-btn-register { background:#007AFF;color:white; }
#geo-modal-overlay {
    display:none;position:fixed;inset:0;z-index:6000;
    background:rgba(0,0,0,0.6);align-items:center;justify-content:center;
}
#geo-modal-overlay.open { display:flex; }
#geo-modal {
    background:#1c1c1e;border-radius:16px;padding:24px 20px 20px;
    max-width:380px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.6);color:white;
}
#geo-modal h3 { margin:0 0 8px;font-size:1.1em; }
#geo-modal p { margin:0 0 10px;color:#aaa;font-size:0.95em;line-height:1.35; }
#geo-modal-btns { display:flex;gap:10px;align-items:center;margin-top:10px; }
#geo-modal-btns a { flex:1;color:#aaa;font-size:0.9em;text-decoration:underline;cursor:pointer; }
#geo-modal-btn-ok { flex:1;padding:10px;border:none;border-radius:10px;font-size:1em;cursor:pointer;background:#007AFF;color:white; }
#limit-modal-overlay {
    display:none;position:fixed;inset:0;z-index:6000;
    background:rgba(0,0,0,0.6);align-items:center;justify-content:center;
}
#limit-modal-overlay.open { display:flex; }
#limit-modal {
    background:#1c1c1e;border-radius:16px;padding:24px 20px 20px;
    max-width:340px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.6);color:white;
}
#limit-modal h3 { margin:0 0 8px;font-size:1.1em; }
#limit-modal p { margin:0 0 20px;color:#aaa;font-size:0.95em;line-height:1.35; }
#limit-modal-btns { display:flex;gap:10px; }
#limit-modal-btns button { flex:1;padding:10px;border:none;border-radius:10px;font-size:1em;cursor:pointer; }
#limit-modal-btn-cancel { background:#3a3a3c;color:white; }
#limit-modal-btn-upgrade { background:#28a745;color:white; }
#account-plan { margin-top:16px;padding-top:14px;border-top:1px solid #3a3a3c;font-size:0.95em; }
#account-plan small { display:block;color:#aaa;font-size:0.85em;margin-top:4px; }
#account-modal .account-toggle { display:flex;align-items:center;gap:12px;margin-top:16px; }
#account-modal .account-toggle input[type=checkbox] {
    appearance:none;-webkit-appearance:none;flex:0 0 auto;
    width:54px;height:30px;margin:0;padding:0;border:none;border-radius:15px;
    background:#48484a;position:relative;cursor:pointer;transition:background 0.18s ease;
}
#account-modal .account-toggle input[type=checkbox]::after {
    content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.3);transition:transform 0.18s ease;
}
#account-modal .account-toggle input[type=checkbox]:checked { background:#1552F0; }
#account-modal .account-toggle input[type=checkbox]:checked::after { transform:translateX(24px); }
#account-modal .account-toggle label { margin:0;color:white;font-size:0.95em;cursor:pointer; }
#account-modal small.account-hint { display:block;color:#aaa;font-size:0.8em;margin:5px 0 0 66px;line-height:1.35; }
#account-modal-overlay {
    display:none;position:fixed;inset:0;z-index:6000;
    background:rgba(0,0,0,0.6);align-items:center;justify-content:center;
}
#account-modal-overlay.open { display:flex; }
#account-modal {
    background:#1c1c1e;border-radius:16px;padding:24px 20px 20px;
    max-width:360px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.6);color:white;
    max-height:92vh;overflow-y:auto;   /* écran bas (viewport rétréci) : la fenêtre défile plutôt que d'être coupée */
}
#account-modal-header {
    display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
#account-modal-header h3 { margin:0 0 8px;font-size:1.1em; }
#account-modal-close {
    background:none;border:none;color:#aaa;font-size:1.4em;cursor:pointer;padding:0 4px;line-height:1;
}
#account-username { color:white;font-size:1.05em;font-weight:600;margin:-4px 0 6px;word-break:break-word; }
#account-modal label { display:block;color:#ccc;font-size:0.9em;margin:10px 0 4px; }
#account-modal input, #account-modal select {
    width:100%;box-sizing:border-box;padding:10px;border-radius:8px;border:1px solid #555;
    background:#2b2b2d;color:white;font-size:1em;
}
#account-modal button.save-preferences {
    margin-top:14px;width:100%;padding:10px;border:none;border-radius:10px;
    background:#007AFF;color:white;font-size:1em;cursor:pointer;
}
/* Suppression du compte : lien discret sous la déconnexion, bloc de confirmation replié. */
#account-delete { margin-top:16px;padding-top:12px;border-top:1px solid #3a3a3c;text-align:center; }
#account-delete-btn { background:none;border:none;color:#ff453a;font-size:0.9em;cursor:pointer;text-decoration:underline;padding:4px; }
#account-delete-confirm p { margin:10px 0;color:#aaa;font-size:0.9em;line-height:1.35;text-align:left; }
#account-delete-confirm .btns { display:flex;gap:10px;margin-top:12px; }
#account-delete-confirm .btns button { flex:1;padding:10px;border:none;border-radius:10px;font-size:0.95em;cursor:pointer;color:white; }
#account-delete-cancel { background:#3a3a3c; }
#account-delete-yes { background:#dc3545; }
#account-delete-yes:disabled { opacity:0.6;cursor:wait; }
#account-delete-confirm p#account-delete-error { color:#ff453a; }
@media (prefers-color-scheme: light) {
	html{background-color:#EEEEEE;}
	.tab-content{background-color:#EEEEEE;}
	.menu{color:grey;background-color:transparent;}
	.menu.active {background-color: #ffffff;color:black}
    textarea {background-color: white; color: black;}
    #iconinfo {background-color:#EEEEEE;}
}
@media (prefers-color-scheme: dark) {
	html{background-color:#161616;}
	.tab-content{background-color:#161616;}
	.menu{color:grey;background-color:#161616;}
	.menu.active {background-color: #333333;color:white}
    textarea {background-color: #333333; color: lightgrey;}
    #iconinfo{background-color:#161616;}
}

/* =====================================================================
 * Écrans étroits : de 5 colonnes d'icônes jusqu'à une seule
 * ---------------------------------------------------------------------
 * Les ruptures sont pilotées par des CONTAINER queries, pas des media
 * queries : sous le zoom de racine posé par tesla-viewport.js, une media
 * query voit la fenêtre AVANT zoom (773 px sur Chromium 148) alors que la
 * mise en page dispose réellement de 1180 px — elle se déclencherait donc
 * à contretemps. Une container query mesure l'espace local, le bon.
 * Vérifié sur Chromium 148.
 *
 * Un navigateur trop ancien pour les container queries ignore ces règles
 * et garde la disposition large : c'est le bon repli, ces voitures-là
 * annoncent déjà 1180 px.
 * ------------------------------------------------------------------- */
#section2 { container-type: inline-size; container-name: app; }

/* Étape 1 — le menu rétrécit, la page gagne la largeur rendue. */
@container app (max-width: 999px) {
    #twocolumns { --nav-w: 150px; }
    .menu { font-size: 1.25em; padding: 10px 5px; }
    .menu.smaller { font-size: 0.95em; }
    /* Le tableau des notes ne tient plus sur une ligne : ses trois cellules
       (note, e-mail, publicité) passent les unes sous les autres. */
    .notes-layout, .notes-layout tbody, .notes-layout tr, .notes-layout td { display: block; width: auto; }
    .notes-layout td { padding: 0 0 14px 0; }
}

/* Étape 2 — le menu se replie en barre horizontale, toute la largeur va
   aux icônes. En dessous d'environ 340 px il ne reste qu'une colonne. */
@container app (max-width: 759px) {
    #twocolumns { --nav-w: 0px; --nav-h: 56px; flex-direction: column; }
    /* min-width:0 et max-width:100% sont indispensables : sans eux la barre prend
       la largeur cumulée de ses boutons (~1200 px) et les derniers onglets
       deviennent inatteignables au lieu de défiler. */
    nav {
        width: 100%; max-width: 100%; min-width: 0; height: var(--nav-h);
        flex-direction: row; align-items: center;
        overflow-x: auto; overflow-y: hidden;
    }
    nav button { width: auto; white-space: nowrap; }
    .menu { font-size: 1.05em; padding: 8px 10px; margin: 0 4px 0 0; }
    /* Le pied du menu (guide, e-mail, mentions, compte, langue) était poussé
       en bas par margin-top:auto ; en barre il se range à la suite. */
    nav footer {
        margin-top: 0; margin-left: auto; padding: 0;
        display: flex; align-items: center; line-height: normal;
    }
    nav footer br { display: none; }
    .menu.smaller { padding: 8px 6px; }
    #mirror { height: calc(100% - var(--nav-h)); }
    /* incarstyle.css est chargé APRÈS ce bloc : sans le préfixe #section2 ces deux
       règles perdraient la cascade face à « .section {margin:20px} ». */
    #section2 .section { margin: 10px; }
    #section2 .section h2 { font-size: 1.2em; }
}