/*
Fichier : speedclic_layout.css
Chemin  : D:\SpeedclicV2\www\assets\css\speedclic_layout.css
Rôle    : Mise en page Speedclic V2 — page publique prototype
*/

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #222;
}

.sc-page { display: flex; width: 100%; height: 100vh; overflow: hidden; }

/* ==============================
   Sidebar gauche
============================== */
.sc-sidebar { width: 220px; background: #252525; color: white; border-right: 4px solid #444; height: 100vh; flex-shrink: 0; display: flex; flex-direction: column; }

.sc-logo-zone {
    height: 155px;
    flex-shrink: 0;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 4px solid #222;
    cursor: pointer;
}
.sc-logo-text { font-size: 34px; font-weight: bold; color: #111; }
.sc-logo-blue { color: #13a8d8; }
.sc-logo-img { display: block; max-width: 200px; width: auto; height: auto; max-height: 143px; margin: 0 auto; }

.sc-select-zone { padding: 10px; flex-shrink: 0; }
.sc-select { width: 100%; height: 36px; margin-bottom: 8px; background: #f7f7f7; border: 1px solid #888; padding-left: 8px; }

.sc-language { background: #303030; border: 1px solid #777; padding: 8px; margin: 8px 0; font-size: 13px; }
.sc-lang-picker { position: relative; margin: 6px 0; }
.sc-lang-trigger { display: flex; align-items: center; gap: 6px; background: #f7f7f7; border: 1px solid #888; padding: 4px 8px; cursor: pointer; font-size: 13px; color: #222; }
.sc-lang-trigger:hover { background: #e8e8e8; }
.sc-lang-arrow { margin-left: auto; font-size: 11px; color: #555; }
.sc-lang-list { display: none; position: absolute; left: 0; right: 0; background: #fff; border: 1px solid #888; border-top: none; z-index: 500; max-height: 200px; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.sc-lang-list.open { display: block; }
.sc-lang-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; font-size: 13px; color: #222; }
.sc-lang-item:hover { background: #d0e8f8; }
.sc-lang-item.sc-lang-default { font-weight: bold; background: #f0f8ff; }
.sc-lang-flag-box { width: 22px; height: 16px; min-width: 22px; background: #fff; border: 1px solid #bbb; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sc-lang-flag-box img { width: 22px; height: 16px; object-fit: cover; display: block; }

.sc-button {
    width: 100%; height: 38px; margin-bottom: 7px;
    background: #222; color: white; border: 1px solid #444; cursor: pointer;
}
.sc-button.active { background: #00a6d6; }

.sc-module-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
    flex: 1;
    min-height: 0;
}
.sc-module-icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #333;
    cursor: pointer;
    min-width: 0;
    min-height: 0;
}
.sc-module-icon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}
.sc-module-icon:hover img { transform: scale(1.06); }
/* Titre permanent en bas */
.sc-img-title {
    position: absolute; top: 25%; left: 0; right: 0; z-index: 2;
    height: 15%;
    background: transparent; color: #111;
    font-size: 9px; font-weight: 700; line-height: 1.2;
    padding: 3px 4px; text-align: center;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    pointer-events: none;
}
/* Tooltip au survol */
.sc-module-icon:hover { outline: 2px solid #00a6d6; outline-offset: -2px; }
/* Slot vide */
.sc-module-icon-empty { color: #666; font-size: 10px; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; }

.sc-sidebar-footer { padding: 10px; font-size: 13px; color: #aaa; flex-shrink: 0; }

/* ==============================
   Main
============================== */
.sc-main { flex: 1; min-width: 0; background: #ffffff; display: flex; flex-direction: column; overflow: hidden; }

/* ==============================
   Header (icônes + météo côte à côte)
============================== */
.sc-header {
    height: 155px; flex-shrink: 0;
    display: flex; align-items: stretch;
    border-bottom: 4px solid #333;
}

.sc-header-left {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}

.sc-top-links {
    height: 52px; border-bottom: 1px solid #777;
    display: flex; align-items: stretch; padding: 4px 6px; gap: 1px; overflow: hidden;
}
.sc-top-link {
    flex: 1;
    display: flex; align-items: stretch;
    overflow: hidden;
}
.sc-tl-icon { text-decoration: none; color: #222; cursor: pointer; border-radius: 3px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sc-tl-icon img { width: 98%; height: 90%; object-fit: fill; }
.sc-tl-icon:hover { background: transparent; }

.sc-tl-vide { cursor: default; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sc-tl-vide img { width: 100%; height: 100%; object-fit: fill; opacity: 0.35; }
.sc-tl-vide:hover { background: transparent; }

.sc-header-message {
    flex: 1; padding: 8px 20px; font-size: 13px; color: #555;
    display: flex; align-items: center;
}

/* Météo dans le header — même largeur que colonne pub */
.sc-weather {
    width: 330px; min-width: 330px; flex-shrink: 0; background: #d8ecff;
    border-left: 1px solid #bbd6ee;
    padding: 10px 14px; font-size: 14px; overflow: hidden;
}
.sc-rss-meteo-titre { font-weight: bold; font-size: 14px; margin-bottom: 6px; }
.sc-rss-meteo-titre a { text-decoration: none; color: #1a2535; }
.sc-rss-meteo-titre a:hover { color: #00a6d6; }
.sc-rss-meteo-vide { font-size: 18px; font-weight: bold; padding: 8px 0; color: #666; }
.sc-rss-meteo-items { font-size: 13px; }
.sc-meteo-item { padding: 3px 0; border-bottom: 1px solid #c8dff0; line-height: 1.4; }
.sc-meteo-item a { text-decoration: none; color: #1a2535; }
.sc-meteo-item a:hover { color: #00a6d6; }
.sc-rss-loading-sm { color: #888; font-style: italic; font-size: 12px; }

/* ==============================
   Contenu principal
============================== */
.sc-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.sc-news-area { flex: 1; padding: 6px 12px; border-right: 4px solid #444; overflow-y: auto; min-width: 0; }

.sc-news-title { font-size: 16px; font-weight: bold; margin: 4px 0 5px 0; }
.sc-rss-canal-link { text-decoration: none; color: #00a6d6; }
.sc-rss-canal-link:hover { text-decoration: underline; color: #00a6d6; }
.sc-rss-hint { font-size: 11px; font-weight: normal; color: #888; }

.sc-rss-items-zone { overflow: hidden; }
.sc-rss-loading { padding: 12px; color: #888; font-style: italic; font-size: 13px; }
.sc-rss-empty   { padding: 12px; color: #aaa; font-size: 13px; }

.sc-news-item { display: flex; border-bottom: 1px solid #ddd; padding: 4px 0; transition: opacity 0.35s ease, transform 0.35s ease; }
.sc-news-item.sc-news-exit { opacity: 0; transform: translateY(-100%); }
.sc-news-item.sc-news-enter { opacity: 0; transform: translateY(30px); }
.sc-news-thumb {
    display: block;
    width: 109px; min-width: 109px; height: 74px;
    background: #d8d8d8; border: 1px solid #aaa; margin-right: 10px; overflow: hidden;
}
.sc-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc-news-thumb-empty { background: #eeeeee; }
.sc-news-text { font-size: 12px; line-height: 1.35; }
.sc-news-text a { color: #1a2535; text-decoration: none; }
.sc-news-text a:hover { color: #00a6d6; text-decoration: underline; }

/* ==============================
   Colonne droite (pub photo)
============================== */
.sc-right-ads { width: 330px; flex-shrink: 0; background: #ffffff; display: flex; flex-direction: column; overflow: hidden; }

.sc-big-ad { flex: 1; overflow: hidden; display: flex; align-items: stretch; }
.sc-pub-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-decor-msg { margin: auto; padding: 18px; text-align: center; color: #777; font-size: 14px; line-height: 1.4; }

/* ==============================
   Section bas (3 × 3 × 14) — toujours visible, jamais écrasée
============================== */
.sc-bottom-links { height: 131px; flex-shrink: 0; border-top: 4px solid #333; display: flex; flex-direction: column; overflow: hidden; gap: 1px; padding: 1px 0; }

.sc-bottom-row { flex: 1; display: flex; align-items: stretch; }
.sc-bottom-tab { width: 95px; flex-shrink: 0; padding: 0 8px; border: 1px solid #ccc; box-sizing: border-box; font-size: 13px; cursor: pointer; display: flex; align-items: center; }
.sc-bottom-tab.active { background: #f6a322; color: white; font-weight: bold; border-color: #f6a322; }
.sc-bottom-tab:hover:not(.active) { background: #fde8c0; }

.sc-bas-row {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 3px;
    align-items: center;
    padding: 0 6px;
}
.sc-service-link {
    height: 100%;
    display: flex; align-items: stretch; overflow: hidden;
}
.sc-sl-icon {
    text-decoration: none; color: #222; cursor: pointer; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.sc-sl-icon img { width: 100%; height: 100%; object-fit: fill; }
.sc-sl-icon:hover { background: #d0e8f8; }

.sc-sl-vide {
    cursor: default;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.sc-sl-vide img { width: 100%; height: 100%; object-fit: contain; opacity: 0.35; }
.sc-sl-vide:hover { background: transparent; }

/* ==============================
   Divers
============================== */
.sc-error { margin: 10px; padding: 10px; border: 2px solid red; background: #ffecec; color: #900; font-family: monospace; }

.sc-pseudo-btn { background:#f0a050; border-color:#d88030; cursor:default; pointer-events:none; }
.sc-link-btn { display:block; line-height:38px; text-align:center; text-decoration:none; box-sizing:border-box; }
.sc-pseudo-admin { cursor:pointer; pointer-events:auto; }
.sc-pseudo-admin:hover { background:#d88030; }
.sc-copyright-row { display:flex; flex-direction:column; gap:4px; }

/* ==============================
   Modale connexion
============================== */
.sc-modal-mask { display:none; position:fixed; z-index:9000; inset:0; background:rgba(0,0,0,.6); align-items:center; justify-content:center; }
.sc-modal-box { width:380px; max-width:95vw; background:#fff; border:3px solid #222; box-shadow:0 0 28px rgba(0,0,0,.45); }
.sc-modal-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#252525; color:#fff; }
.sc-modal-title { font-size:17px; font-weight:bold; }
.sc-modal-close { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; line-height:1; padding:0 2px; }
.sc-modal-close:hover { color:#00a6d6; }
.sc-modal-body { padding:20px; }
.sc-login-modal-form label { display:block; font-size:13px; font-weight:bold; margin-top:12px; margin-bottom:4px; }
.sc-modal-input { width:100%; height:34px; padding:4px 8px; font-size:14px; border:1px solid #aaa; box-sizing:border-box; }
.sc-modal-input:focus { outline:2px solid #00a6d6; border-color:#00a6d6; }
.sc-login-error-modal { padding:8px 10px; background:#ffecec; border:1px solid #d00; color:#900; font-size:13px; margin-bottom:4px; }
.sc-modal-actions { display:flex; gap:10px; margin-top:16px; }
.sc-modal-btn-submit { padding:8px 22px; background:#00a6d6; color:#fff; border:none; font-weight:bold; cursor:pointer; font-size:14px; }
.sc-modal-btn-submit:hover { background:#007aaa; }
.sc-modal-btn-cancel { padding:8px 16px; background:#eee; color:#333; border:1px solid #ccc; cursor:pointer; font-size:14px; }
.sc-modal-btn-cancel:hover { background:#ddd; }

/* === FIN DU FICHIER : D:\SpeedclicV2\www\assets\css\speedclic_layout.css === */