/*
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
============================== */
/* LA BARRE DEFILE PLUTOT QUE D'ECRASER (26/08/2026).
   Ramon : « pourquoi le menu des icones disparait, il devrait garder sa proportion. La
   partie haute finit par ecraser les icones. » MESURE : logo 155 + selecteurs 327 +
   pied 103 = 585 px qui ne se compriment pas. Sous 849 px de fenetre, le seul enfant
   souple — la grille d'icones — absorbait TOUT le manque : a 660 px de haut il lui
   restait 75 px pour trois rangees, soit 25 px par tuile. Les icones ne disparaissaient
   pas : elles payaient pour les autres.
   Une colonne dont un seul enfant est elastique n'a pas de mise en page, elle a une
   variable d'ajustement. On rend donc la grille incompressible (min-height plus bas) et
   c'est la BARRE qui defile — le pied de page s'atteint en descendant, ce qui est son
   habitude, la ou une icone ecrasee n'a aucun usage. */
.sc-sidebar { width: 220px; background: #252525; color: white; border-right: 4px solid #444; height: 100vh; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; }

.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;
    /* 264 PX : LA HAUTEUR MESUREE, PAS UNE HAUTEUR CHOISIE. Trois rangees de 85 px, deux
       gouttieres de 2 et 4 px de marge interieure — exactement ce que la grille occupe
       sur un ecran assez haut. La proportion que Ramon voit en grand est donc celle
       qu'il garde en petit. « flex: 1 » reste : sur un ecran plus haut, elle grandit. */
    min-height: 264px;
}
.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; flex-direction: column; justify-content: center; gap: 3px;
}
/* ═══ L'AVIS DE CONSTRUCTION ═══                                 (02/09/2026)
   Ramon : « il serait bon de mentionner ICI que LE SITE EST EN CONSTRUCTION ».
   IL SE VOIT SANS CRIER. L'orange dit « attention » la ou le rouge dirait
   « panne » — et une panne, il n'y en a pas : le site marche, il se construit.
   LA COLONNE EST DEVENUE VERTICALE POUR LUI : deux phrases sur une rangee se
   liraient comme une seule, et l'invitation a s'inscrire perdrait son sens en
   se collant a l'avertissement. */
.sc-construction {
    color: #a2620a;
    background: #fff5e2;
    border-left: 3px solid #f0a63c;
    padding: 4px 10px;
    border-radius: 2px;
    line-height: 1.35;
    font-size: 14px;
}
.sc-construction { display: flex; align-items: center; gap: 8px; }
.sc-construction b { color: #7d4a05; }
/* L'ICONE ENCADRE LA PHRASE, ET ELLE DOIT SE VOIR.               (02/09/2026)
   Ramon : « riquiqui ton icone en construction ». Elle faisait 26 px — la
   hauteur de deux lignes de texte — parce que je craignais d'en faire une
   banniere. Mauvais calcul : a cette taille elle passait pour une puce de
   liste, et un avertissement qu'on ne remarque pas n'avertit personne. 46 px,
   soit toute la hauteur du bandeau. */
.sc-constr-ico { height: 46px; width: auto; flex: 0 0 auto; }
.sc-constr-mot { flex: 1 1 auto; }
.sc-hm-inscrire { color: #555; }

/* 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;
}
/* Vignette Météo-France : elle occupe toute la zone, sans marge ni cadre. À cette largeur,
   le widget bascule de lui-même en disposition horizontale (température à gauche, trois
   jours à droite). Le padding de .sc-weather la décadrerait, d'où cette classe posée
   par le serveur ET par le JS (plutôt que :has(), inégalement supporté). */
.sc-weather.sc-weather-plein { padding: 0; border-left: 0; }
/* Débordement de 1 % à gauche (≈ 3 px sur 330) pour couvrir le liseré : en pourcentage,
   le calage reste juste si la largeur de la colonne change. */
.sc-weather-widget {
    display: block; width: 101%; margin-left: -1%;
    height: 170px; border: 0;
}

.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; }

/* ═══ LE RAPPORT EST LA CONSTANTE, PAS LA LARGEUR EN PIXELS (18/08/2026) ═══
   Ramon : « la zone ET la pub devraient etre proportionnelles a la largeur de l'ecran.
   C'est un format de reference pour une taille ecran donnee. »

   AVANT : la colonne de publicite etait figee a 330 px et le centre elastique. Mesure
   sur la page : le rapport centre/pub passait de 3,48 a 1480 px de rangee, a 2,45 a
   1140, a 1,12 a 700, et a 0,70 a 560 — la publicite finissait plus large que
   l'information. Ce n'etait pas la pub qui grossissait : c'est le centre qui retrecissait
   seul pendant qu'elle refusait de bouger.

   MAINTENANT : les deux colonnes se partagent la largeur DANS LE RAPPORT DE L'ECRAN DE
   REFERENCE. Et l'ecran de reference n'est pas un chiffre rond choisi par moi : c'est
   CELUI DE RAMON, celui sur lequel les logos Speedclic sont bien formes — fenetre de
   1360 px, donc une rangee de 1140 apres la barre laterale de 220.

   Sur cette rangee, le decoupage est 795 pour l'information et 345 pour la publicite —
   RELEVE PAR RAMON SUR SON ECRAN, pas deduit par moi. Ce sont donc ces deux nombres qui
   servent de parts. A 1140 px la publicite fait exactement 345 px — le format du
   catalogue —, et partout ailleurs elle garde la meme part de la page.
   (J'avais d'abord transpose 810/330 depuis sa description ; c'est sa mesure qui
   tranche : 345. La somme reste 1140, la largeur exacte de son ecran moins la barre.)

   MON PREMIER JET DISAIT 3:1 ET C'ETAIT FAUX. « Grosso modo trois fois » etait une
   estimation a l'oeil ; le rapport reel de sa maquette est 810/330 = 2,45. A 3:1 la
   publicite tombait a 278 px sur son propre ecran, donc sous le format vendu. Une
   proportion se releve, elle ne s'arrondit pas.

   ET LE SECOND JET ETAIT FAUX AUSSI, DE 8 PIXELS. Avec une base a zero, le navigateur
   ne partage pas la rangee : il partage ce qui RESTE apres les marges internes et la
   bordure de la colonne centrale — 28 px ici. La publicite tombait a 322 px au lieu de
   330 sur l'ecran de reference. Mesure, pas relecture.
   LA BASE PORTE DONC LES DIMENSIONS DE LA MAQUETTE (810px et 330px, dont la somme fait
   exactement la rangee de reference) et les poids assurent le partage proportionnel
   partout ailleurs. A 1140 px, l'addition tombe juste sans que rien ne soit a repartir. */
.sc-news-area { position: relative; flex: 795 1 795px; display: flex; flex-direction: column; padding: 6px 12px 0; border-right: 4px solid #444; overflow: hidden; min-width: 0; }
/* TV active : la zone entière est recouverte (titre, commandes et ascenseur compris).
   On coupe le défilement et les marges pour que le direct touche les bords. */
.sc-news-area.sc-tv-on { overflow: hidden; padding: 0; }

/* Barre de titre Infos : le canal à gauche, les 3 commandes (RSS/Radio/TV) à droite. */
.sc-news-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 5px 0; flex-shrink: 0; }
.sc-news-title { font-size: 16px; font-weight: bold; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-news-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sc-news-tool { position: relative; border: 1px solid #cbd6e2; background: #f4f8fc; border-radius: 5px; padding: 2px;
    width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .12s, border-color .12s; }
.sc-news-tool:hover { background: #e2eefb; border-color: #00a6d6; }
.sc-news-tool img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Radio en cours : l'icône devient MUTE (posée par le JS) et un anneau vert signale
   le son actif. Un nouveau clic coupe. */
.sc-news-tool.sc-playing { border-color: #1e8e3e; box-shadow: 0 0 0 2px rgba(30,142,62,.35) inset; }

/* Menu déroulant de sélection d'un canal, ancré sous la commande cliquée. */
.sc-media-menu { position: absolute; z-index: 60; min-width: 220px; max-height: 340px; overflow-y: auto;
    background: #fff; border: 1px solid #9db4cc; border-radius: 6px; box-shadow: 0 8px 26px rgba(0,0,0,.28); padding: 4px; }
.sc-media-grp { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #8091a3; padding: 6px 8px 2px; }
.sc-media-item { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
    font-size: 13px; padding: 6px 8px; border-radius: 4px; color: #1a2535; }
.sc-media-item:hover { background: #e8f3fd; }
.sc-media-item.active { background: #00a6d6; color: #fff; }
.sc-media-empty { font-size: 12px; color: #999; padding: 8px; }

/* Lecteur TV INTÉGRÉ à la zone Infos (il la remplace, ne la survole pas). La radio, elle,
   reste invisible ; la vidéo, non, d'où cette scène occupant toute la zone centrale. */
/* La scène recouvre toute la zone Infos (par-dessus le titre et l'ascenseur). */
.sc-tv-stage { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
    height: 100%; background: #000; }
.sc-tv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 10px; background: #10151c; color: #eef3f8; border-radius: 4px 4px 0 0; }
.sc-tv-name { font-size: 14px; font-weight: 700; }
.sc-tv-cmds { display: flex; align-items: center; gap: 6px; }
.sc-tv-cmd { width: 30px; height: 30px; border: 1px solid #33465a; background: #1b2431; color: #eef3f8;
    border-radius: 5px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 3px; }
.sc-tv-cmd:hover { background: #26374a; border-color: #00a6d6; }
.sc-tv-cmd img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sc-tv-cmd.sc-muted { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,.35) inset; }
.sc-tv-video { flex: 1; width: 100%; background: #000; min-height: 0; }
/* Direct ENCADRÉ (09/08/2026) : le cadre occupe la place de la vidéo, aux mêmes règles. */
.sc-tv-frame { flex: 1; width: 100%; background: #000; min-height: 0; border: 0; display: block; }
/* En plein écran, la scène occupe tout l'écran : la vidéo suit. */
.sc-tv-stage:fullscreen { background: #000; }
.sc-tv-stage:fullscreen .sc-tv-video { height: 100%; }
.sc-tv-stage:fullscreen .sc-tv-frame { height: 100%; }
/* Message quand une chaîne refuse la diffusion (CORS/géo) — plutôt qu'un écran noir. */
.sc-tv-msg { position: absolute; left: 0; right: 0; bottom: 40%; text-align: center;
    color: #cdd8e4; font-size: 14px; padding: 12px; }

.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 { flex: 1; min-height: 0; 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:last-child { border-bottom: none; }
.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: 124px; min-width: 124px; height: 78px;
    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: 12.5px; line-height: 1.38; flex: 1; min-width: 0; overflow: hidden; }
/* Description bornée à 3 lignes nettes (clamp par lignes, pas par pixels → jamais de demi-ligne). */
.sc-news-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-top: 2px; }
.sc-news-text a { color: #1a2535; text-decoration: none; }
.sc-news-text a:hover { color: #00a6d6; text-decoration: underline; }

/* ==============================
   Colonne droite (pub photo)
============================== */
/* 345 PARTS CONTRE 795 (voir le bloc au-dessus de .sc-news-area) : le decoupage de
   l'ecran de reference, transpose en proportions.
   min-width : en dessous de 220 px une publicite n'est plus lisible ; la page etroite
   demandera une autre disposition, pas une pub reduite a un timbre.
   max-width : le visuel est ecrit a DEUX FOIS le format de reference (690 px pour un
   emplacement de 345) ; au-dela il serait etire au-dela de sa propre finesse, donc flou.
   Le plafond est celui de l'image, pas un choix esthetique. */
.sc-right-ads { flex: 345 1 345px; min-width: 220px; max-width: 690px; background: #ffffff; display: flex; flex-direction: column; overflow: hidden; }

.sc-big-ad { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: stretch; }
.sc-pub-photo { flex: 1; width: 100%; height: 100%; min-height: 0; 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; }
/* LE BOUTON ORANGE EST CLIQUABLE POUR TOUT LE MONDE (26/08/2026). Il l'etait pour le
   seul administrateur ; il mene desormais chacun chez lui — AdminX, espace pro ou espace
   perso. Les deux classes disent la meme chose et se dessinent donc pareil : une seule
   declaration, sinon le survol de l'un finirait par differer de celui de l'autre. */
.sc-pseudo-admin,
.sc-pseudo-actif { cursor:pointer; pointer-events:auto; }
.sc-pseudo-admin:hover,
.sc-pseudo-actif: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 === */