/*********************************************************STYLE GENERAL POUR TOUTES LES PAGES DE L'APPLICATION MYCOLLECTIFY*********************************************************/
/* =============================================
MODE SOMBRE — Variables CSS
============================================= */
/* Valeurs par défaut (mode clair) */
:root {
--bg-page: #f4f6f9; /* Couleur de fond de la page */
--bg-card: #ffffff; /* Couleur de fond des cartes et sections */
--bg-input: #ffffff; /* Couleur de fond des champs de saisie */
--bg-subtle: #f9fafb; /* Couleur de fond pour éléments secondaires (ex: barre de recherche) */
--text-main: #1f4f5f; /* Couleur du texte principal (titres, liens) */
--text-muted: #999999; /* Couleur du texte secondaire (placeholders, descriptions) */
--border: #e0e0e0; /* Couleur des bordures (ex: champs de saisie) */
--shadow: rgba(0,0,0,0.08);
}
/* Mode sombre : activé par la classe sur */
html.dark {
--bg-page: #111827;
--bg-card: #1e2a38;
--bg-input: #243044;
--bg-subtle: #1a2535;
--text-main: #e2e8f0;
--text-muted: #94a3b8;
--border: #2d3f55;
--shadow: rgba(0,0,0,0.35);
}
/* Transition douce sur tout le site */
body, .profil-card, .section-card, .tab-bar,
.param-group input, .visibility-toggle,
.profil-settings-btn, .recent-item {
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
/* =============================
RÉINITIALISATION GLOBALE
============================= */
/* Supprime marges/paddings par défaut et inclut bordures dans les dimensions */
* {
box-sizing: border-box; /* Largeur/hauteur incluent padding et border */
margin: 0; /* Supprime marges par défaut */
padding: 0; /* Supprime espacements internes par défaut */
}
/* =============================
STYLE GÉNÉRAL DE LA PAGE
============================= */
body {
font-family: 'Karla', Arial, sans-serif; /* Police lisible */
background: var(--bg-page);
color: var(--text-main); /* Couleur du texte principale */
min-height: 100vh; /* S’assure que le corps prend toute la hauteur */
}
/* Confort de lecture des paragraphes : le body n'a pas de line-height dédié
(hérité du défaut navigateur, ~1.15, trop serré pour du texte long) */
p {
line-height: 1.5;
}
/* =============================
HEADER PRINCIPAL ET LOGO RESPONSIVE
============================= */
/* Conteneur du header */
.header {
display: flex; /* Active Flexbox met tous les éléments du header sur une ligne*/
align-items: center; /* Centre verticalement les éléments du header */
justify-content: space-between; /* Espace entre les éléments du header (logo à gauche, slogan au centre, bouton à droite) */
padding: 10px 30px; /* Réduit l’espace pour remonter le logo */
background: var(--bg-card); /* Même fond que le body pour homogénéité */
border-radius: 18px; /* Coins arrondis effet carte moderne */
box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Ombre légère sous le bandeau pour créer de la profondeur */
margin: 20px auto; /* Espace autour du bandeau pour le détacher du bord de page */
max-width: 1200px; /* Limite la largeur du header pour les grands écrans */
gap: 20px; /* Espace entre les éléments du header */
position: relative; /* Permet positionner des éléments si besoin */
z-index: 50;
}
.page-index header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background: var(--bg-card);
border-radius: 18px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
margin: 20px auto; /* centrage horizontal */
max-width: 1200px; /* même contrainte que main */
width: calc(100% - 60px); /* 30px de marge de chaque côté, comme le padding du main */
gap: 20px;
box-sizing: border-box;
position: relative;
z-index: 50;
}
/* Logo en haut, responsive */
.logo {
display: block; /* Pour pouvoir centrer avec margin auto */
width: 260px; /* Prend toute la largeur possible */
max-width: 1000px; /* Largeur maximale pour éviter trop d’agrandissement */
height: auto; /* Hauteur automatique pour conserver proportions */
object-fit: contain; /* Contient le logo sans le couper */
margin: 0 auto 10px; /* Centre horizontalement et espace sous le logo */
border-radius: 12px; /* Coins légèrement arrondis pour un look plus doux */
}
/* Slogan sous le logo */
.header p {
font-size: 14px; /* Texte légèrement plus grand */
margin: 0; /* Espace sous le slogan */
color: var(--text-main); /* Couleur cohérente avec le reste du site */
}
.brand{
display:flex; /* Active flexbox */
flex-direction:column; /* Empile : logo puis slogan */
align-items:center; /* centre horizontalement le slogan sous le logo */
}
/* =============================
ICÔNE PLUS VERTE
============================= */
.icon-plus {
color: #3fbac2; /* couleur turquoise du site */
font-weight: bold; /* rend le symbole plus visible */
font-size: 18px; /* taille légèrement plus grande */
}
/* ======================================================
BOUTON TURQUOISE REUTILISABLE
Cette classe permet de créer des boutons avec le style
turquoise du site (comme le bouton recherche 🔍).
Exemple d'utilisation HTML :
Avantage :
- même style partout sur le site
- plus facile à modifier plus tard
====================================================== */
.btn-turquoise {
background: #3fbac2; /* Couleur de fond du bouton (turquoise) C'est la couleur principale du site */
color: white; /* Couleur du texte Blanc pour contraster avec le fond */
border: none; /* Supprime la bordure grise par défaut des boutons HTML */
padding: 8px 16px; /* Espace intérieur du bouton. Rend le bouton plus grand et lisible */
border-radius: 8px; /* Arrondit les coins du bouton, Donne un style moderne, Plus la valeur est grande plus les coins sont arrondis */
cursor: pointer; /* Change le curseur en main pour indiquer que le bouton est cliquable */
transition: 0.3s; /* Animation douce de 0.3 seconde quand une propriété change. Ici cela sert pour l'effet au survol */
font-weight: bold; /* Met en gras le texte du bouton pour le rendre plus visible */
display: inline-flex;
align-items: center;
gap: 6px; /* espace entre le + et le texte */
}
.btn-turquoise .icon-plus{
color:white;
font-size: inherit;
line-height: 1;
}
/* ── ICÔNE CLOCHE NOTIF + ENVELOPPE MESSAGES ── */
.msg-envelope-btn {
position: relative; /* plus d'absolute */
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; /* plus grand */
height: 46px;
border-radius: 50%;
background: #3fbac2; /* couleur turquoise du site */
border: none;
color: white; /* enveloppe blanche sur fond turquoise */
font-size: 22px; /* icône plus grande */
text-decoration: none;
transition: all 0.2s;
flex-shrink: 0; /* PAS de margin ou position absolue */
}
.msg-envelope-btn:hover {
background: #2fa1a8;
transform: scale(1.08);
}
html.dark .msg-envelope-btn:hover {
background: #1a3040;
}
.msg-badge {
position: absolute;
top: -4px;
right: -4px;
background: #e74c3c;
color: white;
font-size: 10px;
font-weight: 800;
border-radius: 10px;
padding: 1px 5px;
min-width: 17px;
text-align: center;
line-height: 16px;
pointer-events: none;
}
/* ======================================================
EFFET SURVOL DU BOUTON
Ce style s'active quand la souris passe dessus
====================================================== */
.btn-turquoise:hover {
background: #2fa1a8; /* Couleur légèrement plus foncée. Permet de montrer visuellement que le bouton est actif */
}
/***************************************************************************PAGE INDEX.HTML***************************************************************************/
/* ======================================================
BARRE DE NAVIGATION PRINCIPALE
Le header du site
====================================================== */
.navbar {
display: flex; /* Active le mode FLEXBOX Permet d'aligner horizontalement */
justify-content: space-between; /* Espace automatiquement gauche / centre / droite */
align-items: left; /* Centre verticalement */
padding: 10px 30px; /* Espace intérieur : 10px haut/bas 30px gauche/droite */
background: var(--bg-card); /* Fond blanc */
box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Ombre légère sous la barre */
}
/* ======================================================
ZONE GAUCHE NAVBAR
Contient :
- bouton inscription
- menu
====================================================== */
.navbar-left {
display: flex; /* Elements sur une ligne */
align-items: center; /* Centre vertical */
gap: 20px; /* Espace entre bouton et menu */
}
/* ======================================================
MENU HORIZONTAL
Liens du site
====================================================== */
.nav-links {
display: flex; /* Les liens sont côte à côte */
gap: 25px; /* Espace entre les liens */
}
/* ======================================================
STYLE DES LIENS MENU
====================================================== */
.nav-links a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border-radius: 8px;
background: transparent;
color: var(--text-main);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
/* ======================================================
SURVOL LIENS MENU
====================================================== */
.nav-links a:hover {
background: #e8fafb; /* fond turquoise très léger */
color: #3fbac2;
}
html.dark .nav-links a:hover {
background: rgba(63, 186, 194, 0.25);
color: #3fbac2;
}
.nav-links a.active {
background: #3fbac2; /* fond turquoise plein */
color: white;
}
/***********************************************************************ZONE DE LA RECHERCHE EN HAUT A DROITE**************************************************************************/
/* ======================================================
BARRE DE RECHERCHE
Conteneur global
====================================================== */
.search-container {
display: flex;
align-items: center;
background: var(--bg-subtle);
border-radius: 8px;
border: 0.5px solid var(--border);
padding: 0 12px;
height: 42px;
gap: 8px;
flex: 1;
max-width: 300px;
}
/* ======================================================
CHAMP RECHERCHE
====================================================== */
.search-container input {
border: none;
background: transparent;
outline: none;
font-size: 15px;
color: var(--text-main);
width: 100%;
}
.search-container input::placeholder {
color: var(--text-muted);
}
/* ======================================================
BOUTON RECHERCHE
====================================================== */
#searchBtn {
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
color: var(--text-muted);
font-size: 14px;
}
#searchBtn:hover {
color: #3fbac2;
}
/******************************************************************PARTIE DE LA VIGNETTE PROFIL EN HAUT A DROITE**************************************************************************/
/***************************************
BOUTON PROFIL BARRE DE MENU HAUT DROITE
***************************************/
/* Style du bouton "Connexion" */
.login-btn{
background:#4fbdbd; /* Couleur de fond bleu */
color:white; /* Texte en blanc */
border:none; /* Supprime la bordure par défaut */
padding:10px 18px; /* Espacement intérieur (haut/bas 10px, gauche/droite 18px) */
border-radius:30px; /* Bouton arrondi */
cursor:pointer; /* Curseur main au survol */
font-weight:700; /* Épaisseur du texte */
}
/* Titre dans la fenêtre modale */
.modal-content h2{
text-align:center;
margin-bottom:10px;
}
/* Zone contenant le profil utilisateur */
.profile{
position:relative; /* Permet de positionner des éléments enfants en absolu */
display:none; /* Caché par défaut (visible seulement quand connecté) */
}
/* Avatar utilisateur */
.avatar{
width:50px; /* Largeur */
height:50px; /* Hauteur */
border-radius:50%; /* Forme circulaire */
background:#333; /* Couleur de fond gris foncé */
color:white; /* Couleur du texte */
display:flex; /* Utilisation de flexbox */
align-items:center; /* Centre verticalement */
justify-content:center; /* Centre horizontalement */
font-weight:bold; /* Texte en gras (ex: initiales utilisateur) */
cursor:pointer; /* Curseur main au survol */
}
/* Menu déroulant du profil */
.dropdown{
position:absolute; /* Positionné par rapport au parent (.profile) */
right:0; /* Aligné à droite */
top:50px; /* Placé sous l’avatar */
background:var(--bg-card); /* Fond blanc */
border-radius:12px; /* Coins arrondis */
box-shadow:0 15px 30px rgba(0,0,0,0.15); /* Ombre pour effet flottant */
display:none; /* Caché par défaut */
flex-direction:column; /* Les éléments sont empilés verticalement */
min-width:200px; /* Largeur minimum */
overflow:hidden; /* Coupe les débordements */
z-index: 10000; /* valeur élevée pour être au-dessus des autres */
}
/* Liens dans le menu */
.dropdown a{
padding:12px 16px; /* Espacement interne */
text-decoration:none; /* Supprime le soulignement */
color:var(--text-main); /* Couleur du texte */
}
/* Effet au survol des liens */
.dropdown a:hover{
background:var(--bg-subtle); /* Fond gris clair au survol */
}
/* Bloc affichant les informations utilisateur */
.user-info{
padding:14px; /* Espacement interne */
font-size:13px; /* Taille de texte plus petite */
border-bottom:1px solid #eee; /* Ligne de séparation */
}
/* Classe utilisée en JavaScript pour afficher un élément */
.show{
display:flex; /* Rend l’élément visible avec flexbox */
}
/* =======================
FENÊTRE MODAL
======================= */
/* Fond sombre derrière la popup */
.modal{
display:none; /* Caché par défaut */
position:fixed; /* Fixé à l'écran */
inset:0; /* Occupe toute la fenêtre */
background:rgba(0,0,0,0.4); /* Fond noir semi-transparent */
justify-content:center; /* Centre horizontalement */
align-items:center; /* Centre verticalement */
z-index: 10000; /* valeur élevée pour être au-dessus des autres */
}
/* Contenu de la popup */
.modal-content{
background:var(--bg-card); /* Fond blanc */
padding:25px; /* Espacement interne */
border-radius:12px; /* Coins arrondis */
width:380px; /* Largeur de la fenêtre */
display:flex; /* Flexbox */
flex-direction:column; /* Éléments empilés verticalement */
gap:14px; /* Espacement entre les éléments */
animation:popup .25s ease; /* Animation d'apparition */
position:relative; /* Pour position croix */
box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* ombre douce comme les cartes */
font-family: 'Karla', Arial, sans-serif;
}
/* Animation d'ouverture de la popup */
@keyframes popup{
from{
transform:scale(.9); /* Légèrement plus petite au départ */
opacity:0 /* Invisible */
}
to{
transform:scale(1); /* Taille normale */
opacity:1 /* Visible */
}
}
/* Champs de saisie dans la modal */
.modal input{
padding:11px; /* Espacement interne */
border-radius:8px; /* Coins arrondis */
border:1px solid #ddd; /* Bordure gris clair */
}
/* Bouton dans la modal */
.modal button{
background:#4fbdbd; /* Fond bleu */
color:white; /* Texte blanc */
border:none; /* Pas de bordure */
padding:11px; /* Espacement interne */
border-radius:8px; /* Coins arrondis */
cursor:pointer; /* Curseur main */
font-weight:700; /* Épaisseur du texte */
}
/* Texte de bascule connexion / inscription */
.switch{
text-align:center; /* Centré */
font-size:14px; /* Taille du texte */
}
/* Lien cliquable pour changer de formulaire */
.switch span{
color:#4fbdbd; /* Couleur bleue */
cursor:pointer; /* Curseur main */
}
/* =============================
STYLE DU CONTENU PRINCIPAL (MAIN)
============================= */
main {
padding: 20px 30px; /* Marges internes */
background: var(--bg-page); /* Fond légèrement gris */
}
/* PAGE INDEX — Aligne main exactement comme le header */
.page-index main.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0 3px 20px;
}
/* Retire le fond gris de sur Index : laisse voir le fond sombre derrière le sidebar et la carte */
html body.page-index main {
background: transparent;
}
/* Retire le fond gris de sur Explorer : même souci que sur Index */
html body.page-explorer main {
background: transparent;
}
/* =============================
RESPONSIVE HEADER
============================= */
/* ── Tablette (601px–900px) — Navbar sur une ligne ───── */
@media (min-width: 601px) and (max-width: 900px) {
.header {
flex-wrap: nowrap !important;
padding: 8px 16px;
gap: 8px;
margin: 10px auto;
}
/* Exception page-favoris : 2 lignes */
.page-favoris .header {
flex-wrap: wrap !important;
padding: 10px 12px;
gap: 8px;
align-items: center;
}
/* Ligne 1 : brand + nav-links + search — flex-shrink 0 pour ne pas écraser */
.page-favoris .brand {
order: 1;
flex-shrink: 0;
}
.page-favoris .nav-links {
order: 1;
flex-shrink: 0;
flex-wrap: nowrap;
gap: 4px;
}
.page-favoris .search-container {
order: 1;
flex: 1;
min-width: 100px;
max-width: 180px;
margin: 0;
}
/* Ligne 2 : notif + msg + avatar — tous centrés ensemble */
.page-favoris .header > div:not(.brand):not(.navbar-right):not(.search-container) {
order: 2;
display: flex;
justify-content: flex-end;
gap: 8px;
flex: 1;
}
.page-favoris .navbar-right {
order: 2;
display: flex;
justify-content: flex-start;
gap: 8px;
flex: 1;
}
/* Pseudo-élément pour forcer un retour à la ligne avant la ligne 2 */
.page-favoris .header::after {
content: '';
order: 2;
width: 100%;
height: 0;
display: block;
flex-basis: 100%;
}
.header > * {
flex-shrink: 0;
}
/* ── Brand : logo + slogan empilés, taille tablette ── */
.brand {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 160px !important; /* largeur fixe tablette */
height: auto !important; /* hauteur proportionnelle */
border-radius: 12px !important; /* coins arrondis bien visibles */
margin: 0 0 4px 0 !important; /* espace sous le logo vers le slogan */
display: block;
object-fit: contain;
}
.brand p, .header p, .slogan {
display: block !important;
font-size: 11px;
text-align: center;
margin: 0;
}
.navbar-left {
gap: 8px;
flex-shrink: 0;
flex: 1;
}
.nav-links {
gap: 2px;
}
.nav-links a {
font-size: 12px;
padding: 6px 8px;
gap: 4px;
display: inline-flex;
align-items: center; /* icône + texte bien alignés sur une ligne */
white-space: nowrap;
}
.navbar-right {
gap: 6px;
flex-shrink: 0;
}
/* ── Avatar = même taille que notif/messagerie (46px) ── */
.avatar {
width: 46px !important;
height: 46px !important;
}
.avatar-container {
width: 46px !important;
height: 46px !important;
}
}
@media (max-width: 600px) {
.logo {
max-width: 300px; /* Logo moins large sur petit écran */
}
.header p {
font-size: 1rem; /* Slogan plus petit sur mobile */
}
.header button {
padding: 10px 20px; /* Ajustement du bouton sur mobile */
}
}
/* =============================
CONTENEUR PRINCIPAL
============================= */
.container {
padding: 20px 0;
max-width: 100%;
margin: 0;
}
/* =============================
GRILLE FEATURE (SIDEBAR + CARTE)
============================= */
.features {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
/* =============================
CARTE PRINCIPALE
============================= */
.card {
background: var(--bg-card);
padding: 20px;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
max-width: 1200px;
margin: 0;
/* IMPORTANT :
Supprime le centrage automatique
→ alignement avec "Collections" */
text-align: center;
}
/*****************************************************************SIDEBAR (MENU LATÉRAL) DE LA PAGE INDEX.TML***************************************************************************/
/* =============================
SIDEBAR / MENU LATÉRAL
============================= */
/* Bouton hamburger — caché sur desktop */
#sidebarToggle {
display: none;
}
.sidebar {
width: 260px;
flex-shrink: 0;
background: var(--bg-card);
padding: 5px;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
overflow: visible;
align-self: flex-start;
}
.sidebar h2 {
font-size: 16px;
text-align: center;
}
/* LISTES DE MENU */
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* ÉLÉMENTS DE MENU / SOUS-MENU */
.menu li, .submenu li {
cursor: pointer;
padding: 10px 12px;
border-radius: 8px;
transition: background 0.3s ease;
}
.menu li:hover, .submenu li:hover {
background: #e0f0f4;
}
/* BOUTONS POUR SOUS-MENU */
.submenu-toggle {
width: 100%;
background: none;
border: none;
color: var(--text-main);
text-align: left;
font-size: 14px;
cursor: pointer;
padding: 10px 12px;
border-radius: 8px;
transition: background 0.3s ease;
}
.submenu-toggle:hover {
background: #e0f0f4;
}
/* HIÉRARCHIE DES TAILLES PAR NIVEAU */
/* Niveau 1 — catégories principales (ex: "🎮 Jeu & Divertissement") */
.submenu-toggle[data-toplevel="true"] {
font-size: 13px;
font-weight: 600;
color: var(--text-main);
}
/* Niveau 2 — sous-catégories (ex: "🕹️ Jeux vidéo & Consoles") */
.submenu-toggle[data-level2="true"] {
font-size: 13px;
font-weight: 500;
color: #2d6a7a;
}
/* Niveau 3 — boutons sans attribut data (ex: "🃏 Cartes stratégiques") */
.submenu .submenu .submenu-toggle:not([data-toplevel]):not([data-level2]) {
font-size: 13px;
font-weight: 400;
color: #3a7d8e;
}
/* Feuilles (li sans sous-menu) — éléments finaux */
.submenu li:not(.has-submenu) {
font-size: 13px;
color: #4a8fa0;
}
/* SOUS-MENUS IMBRIQUÉS */
.submenu {
padding-left: 12px;
max-height: 0;
overflow: hidden;
/* cubic-bezier(0.25,1,0.5,1) : même courbe ease-out-quart que le reste du site */
transition: max-height 0.4s cubic-bezier(0.25,1,0.5,1);
}
.submenu .submenu { padding-left: 10px; } /* niveau 2 */
.submenu .submenu .submenu { padding-left: 10px; } /* niveau 3 */
.submenu .submenu .submenu .submenu { padding-left: 10px; } /* niveau 4 */
/* Quand un menu est actif */
.has-submenu.active .submenu {
/* Plafond réduit (1200px au lieu de 2000px) : rapproché de la hauteur réelle
du plus grand sous-menu pour que l'animation ne "saute" plus sur les
menus courts (la courbe visait auparavant une distance 5x trop grande). */
max-height: 1200px;
}
/* =============================
RESPONSIVE
============================= */
@media(max-width:900px){
.features { grid-template-columns:1fr; }
.sidebar, .card { width:100%; }
}
/***********************************************************************SECTION COLLECTIONS DE LA PAGE INDEX.HTML***************************************************************************/
/* =============================
ENTETE SECTION COLLECTIONS
Permet :
- titre centré
- bouton à droite
============================= */
.collections-header {
position: relative; /* Permet de positionner le bouton par rapport à ce conteneur */
text-align: center; /* Centre le titre horizontalement */
margin-bottom: 0; /* L'espace est géré par la barre de tri et margin-top de la grille */
}
/* Titre centré */
.collections-header h2 {
margin: 0; /* Supprime les marges par défaut qui peuvent casser l'alignement */
}
/* Bouton placé dans le coin droit */
.collections-header .btn-turquoise {
position: absolute; /* Permet de le sortir du flux normal */
right: 0; /* Colle le bouton à droite */
top: 50%; /* Centre verticalement */
transform: translateY(-50%); /* Ajuste le centrage vertical */
}
/* ==========================================
POPUP FORMULAIRE CREER NOUVELLE COLLECTION
========================================== */
/* .modal / .modal-content : voir définition unique plus haut dans le fichier */
.modal-content h2{ /* titre de la popup Nouvelle Collection*/
text-align: center;
margin-bottom: 20px;
}
/* bouton fermer */
#closeModal {
position: absolute;
right: 15px;
top: 10px;
font-size: 22px; /* définit la taille du symbole X pour qu'il soit bien visible */
cursor: pointer;
color: #777; /* définit la couleur du X en gris foncé */
}
#closeModal:hover{
color: #000; /* lorsque la souris passe sur le bouton, la couleur devient noire pour créer un effet interactif */
}
/* =========================
STYLE DES LABELS DU FORMULAIRE
========================= */
.modal-content label{
display:block; /* force le label à occuper toute la largeur cela place chaque label sur sa propre ligne */
margin-top:15px; /* ajoute un espace au-dessus du label pour séparer les champs du formulaire */
font-weight:600; /* rend le texte légèrement plus épais (semi-gras)pour améliorer la lisibilité */
color:var(--text-main); /* couleur gris foncé pour un texte plus doux que le noir pur */
}
/* =========================
STYLE DES CHAMPS INPUT ET TEXTAREA
========================= */
.modal-content input,
.modal-content textarea{
width:100%; /* les champs prennent toute la largeur de la popup */
padding:8px; /* ajoute de l'espace à l'intérieur du champ pour que le texte ne colle pas aux bords */
margin-top:5px; /* espace entre le label et le champ */
border-radius:6px; /* arrondit légèrement les coins du champ */
border:1px solid var(--border); /* ajoute une bordure gris clair autour du champ */
}
/* =========================
COMPORTEMENT DE LA TEXTAREA
========================= */
.modal-content textarea{
resize:none; /* empêche l'utilisateur d'agrandir ou réduire la zone de texte manuellement */
}
/* =========================
BOUTON CREER UNE COLLECTION
========================= */
.modal-content button{
margin-top:20px; /* espace au-dessus du bouton */
width:100%; /* le bouton prend toute la largeur de la popup */
padding:10px; /* augmente la hauteur du bouton pour un meilleur confort de clic */
border:none; /* supprime la bordure par défaut du navigateur */
border-radius:8px; /* arrondit les coins du bouton pour un style moderne */
background:#2fb6b2; /* couleur principale turquoise (cohérente avec ton site) */
color:white; /* texte blanc pour contraster avec le fond */
font-weight:600; /* rend le texte légèrement plus épais */
cursor:pointer; /* change le curseur en main pour indiquer que le bouton est cliquable */
}
/* =========================
EFFET SURVOL DU BOUTON
========================= */
.modal-content button:hover{
background:#239b97; /* change la couleur lorsque la souris passe dessus pour créer un effet interactif et dynamique */
}
/* =========================
ZONE QUI CONTIENT LES COLLECTIONS
========================= */
#collections{
display:flex; /* active le système Flexbox. Cela permet d’aligner les éléments enfants (les cartes de collection) de manière flexible et plus facile à organiser */
flex-wrap:wrap; /* permet aux éléments de passer à la ligne suivante lorsqu'il n'y a plus assez de place sur la largeur de l'écran. Sans cette propriété,
toutes les cartes resteraient sur une seule ligne et pourraient dépasser de la page */
gap:20px; /* ajoute un espace de 20px entre chaque carte de collection.Cela évite que les cartes soient collées les unes aux autres */
margin-top:25px; /* ajoute un espace de 25px au-dessus de la zone des collections pour créer une séparation avec les éléments situés au-dessus
(par exemple un titre ou un bouton) */
}
/* =========================
CARTE D'UNE COLLECTION
========================= */
.collection-card{
width:180px; /* définit la largeur de la carte de collection à 180 pixels.Toutes les cartes auront la même taille pour garder une grille propre */
background:var(--bg-card); /* définit la couleur de fond de la carte en blanc pour qu'elle se détache du fond de la page */
border-radius:12px; /* arrondit les coins de la carte pour un design plus moderne */
overflow:hidden; /* cache tout ce qui dépasse de la carte. utile pour que l'image respecte les coins arrondis */
box-shadow:0 4px 12px rgba(0,0,0,0.1);
/* ajoute une ombre légère sous la carte
0 = décalage horizontal
4px = décalage vertical
12px = flou
rgba(0,0,0,0.1) = noir très transparent */
transition:0.2s; /* crée une animation douce lorsque certaines propriétés changent (comme l'ombre ou la position lors du hover) */
}
/* =========================
EFFET LORSQUE LA SOURIS PASSE SUR LA CARTE
========================= */
.collection-card:hover{
transform:translateY(-4px); /* déplace la carte vers le haut de 4 pixels pour donner un effet de carte qui "se soulève" */
box-shadow:0 8px 20px rgba(0,0,0,0.15); /* augmente l'ombre lors du survol pour renforcer l'effet de profondeur */
}
/* =========================
IMAGE DE LA COLLECTION
========================= */
.collection-card img{
width:100%; /* l'image prend toute la largeur de la carte */
height:140px; /* fixe la hauteur de l'image pour garder toutes les cartes visuellement uniformes */
object-fit:cover; /* ajuste l'image pour qu'elle remplisse l'espace sans être déformée (elle peut être légèrement recadrée) */
border-radius: 6px; /* Arrondit légèrement les coins de l'image */
}
/* =========================
TITRE DE LA COLLECTION
========================= */
.collection-card h3{
text-align:center; /* centre le texte du titre horizontalement */
padding:10px; /* ajoute un espace autour du texte pour qu'il ne colle pas aux bords */
font-size:15px; /* définit la taille du texte du titre */
}
/* .collection-card img : fusionné avec la définition ci-dessus */
/************************************************GRILLE POUR AFFICHER LES COLLECTIONS DANS LA PAGE INDEX.HTML***************************************************************************/
/* =============================
GRILLE DE COLLECTIONS
============================= */
/* La classe .collection-grid transforme le conteneur en grille CSS
- 5 colonnes de largeur égale (1fr chacune)
- Espace de 15px entre les items
- Marge en haut de 20px */
.collection-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 20px;
}
/* Grille sous-collections (collection.html) — même taille que index */
#subCollectionsGrid.collection-grid {
margin-top: 0;
}
/* Chaque élément de collection est stylisé ainsi :
- Fond blanc, coins arrondis
- Débordement caché pour que les images ne dépassent pas
- Ombre portée pour effet "carte"
- Curseur pointer pour indiquer que c'est cliquable
- Transition douce pour les effets de transformation et d'ombre
- Utilisation de flexbox pour organiser verticalement le contenu
- outline:none car le focus clavier est géré manuellement */
.collection-item {
background: var(--bg-card);
border-radius: 12px;
overflow: visible; /* Les boutons absolus (✕, 📷) doivent pouvoir dépasser */
position: relative; /* Permet le positionnement absolu des boutons enfants */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
outline: none; /* focus clavier géré */
}
/* L'image de chaque collection :
- Remplit toute la largeur de son conteneur
- Aspect ratio carré (1/1)
- Objet centré et recadré si besoin
- Transition douce pour zoom au hover/focus */
.collection-item img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
border-radius: 12px 12px 0 0; /* Coins arrondis en haut uniquement */
}
/* Le titre de l'élément :
- Padding autour du texte
- Centré horizontalement
- Gras
- Couleur personnalisée
- Taille de police légèrement réduite */
.collection-item .title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
min-height: 42px;
gap: 6px;
font-weight: bold;
color: var(--text-main);
font-size: 0.95rem;
}
.collection-item .title .item-favori {
flex-shrink: 0;
align-self: center;
}
/* Effet au survol ou au focus clavier :
- Zoom léger de l'ensemble de la carte
- Ombre plus prononcée
- Zoom aussi sur l'image pour effet visuel "pop" */
.collection-item:hover,
.collection-item:focus {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.collection-item:hover .collection-item-img-wrap img,
.collection-item:focus .collection-item-img-wrap img,
.collection-item:hover img,
.collection-item:focus img {
transform: scale(1.05);
}
/* =============================
RESPONSIVE GRID
============================= */
/* Pour écrans <= 1024px : 4 colonnes */
@media(max-width:1024px){ .collection-grid{grid-template-columns:repeat(4,1fr);} }
/* Pour écrans <= 800px : 3 colonnes */
@media(max-width:800px){ .collection-grid{grid-template-columns:repeat(3,1fr);} }
/* ── Tablette (600px–800px) ───────────────────────────── */
@media (min-width: 601px) and (max-width: 800px) {
.collection-grid { grid-template-columns: repeat(3, 1fr); }
.items-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
/* Pour écrans <= 600px : 2 colonnes - Les images ont une hauteur automatique pour mieux s'adapter */
@media(max-width:600px){
.collection-grid { grid-template-columns: repeat(2,1fr); }
/* Vignettes moins hautes sur mobile */
.collection-item-img-wrap {
aspect-ratio: 4/3 !important;
}
.collection-item img {
height: 100% !important;
aspect-ratio: unset !important;
}
/* Croix supprimer : cible tactile 40px (recommandation WCAG ~44px) */
.collection-delete-btn {
top: 4px;
right: 4px;
width: 40px;
height: 40px;
font-size: 16px;
opacity: 0; /* caché par défaut, visible au touch/hover */
}
/* Icone modifier photo toujours visible sur mobile */
.collection-edit-photo {
opacity: 1;
font-size: 14px;
padding: 8px 10px;
}
}
/*************************************************************************PAGE COLLECTION.HTML***************************************************************************/
/* =============================
PAGE COLLECTION
============================= */
.collection-page {
padding: 30px;
max-width: 1200px;
width: calc(100% - 60px);
margin: 20px auto;
box-sizing: border-box;
background: var(--bg-card);
border-radius: 18px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
/* Titre principal (h1 maintenant) */
.collection-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 28px;
margin-bottom: 0;
line-height: 1.2;
}
.collection-description {
color: #666;
margin-bottom: 20px;
font-size: 16px;
}
/* =============================
BOUTONS
============================= */
.btn-primary {
display: inline-block;
background-color: #4fbdbd;
color: white;
padding: 10px 18px;
border-radius: 8px;
text-decoration: none;
margin-bottom: 30px;
font-weight: 600;
transition: background-color 0.2s ease, transform 0.15s ease;
}
/* =============================
SURVOL BOUTON PRINCIPAL
============================= */
.btn-primary:hover {
background-color: #3aa5a5;
}
.btn-secondary {
display: inline-block;
margin-top: 10px;
color: #4fbdbd;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.btn-secondary:hover {
color: #3aa5a5;
}
/* =============================
GRILLE DES OBJETS
============================= */
.items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 20px;
}
/* =============================
CARTE D’OBJET
============================= */
.item-card {
background: var(--bg-card);
border-radius: 12px;
overflow: visible;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
outline: none;
text-align: left;
padding: 0;
}
.item-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.item-card:hover .collection-item-img-wrap img {
transform: scale(1.05);
}
/* Titre dans item-card */
.item-card .title {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
min-height: 42px;
gap: 6px;
font-weight: bold;
color: var(--text-main);
font-size: 0.95rem;
text-align: center;
}
.item-card .title .item-title-text {
flex: unset;
}
/* Infos secondaires (marque / année) */
.item-card .item-subtitle {
font-size: 12px;
color: #999;
margin: 0 8px 4px;
}
/* Bouton "Voir la fiche" stylé comme move-btn */
.item-link-btn {
text-decoration: none;
white-space: nowrap; /* ← empêche le retour à la ligne */
font-size: 12px; /* ← réduit légèrement la taille */
}
/* Lien legacy (gardé pour compatibilité) */
.item-link {
display: inline-block;
margin-top: 5px;
color: #4fbdbd;
text-decoration: none;
font-weight: bold;
transition: color 0.2s ease;
}
.item-link:hover {
color: #3aa5a5;
}
/* Affichage des boutons collection-edit-photo et collection-delete-btn au hover sur item-card */
.item-card:hover .collection-edit-photo {
opacity: 1;
}
.item-card:hover .collection-delete-btn {
opacity: 1;
}
/* ******************************************************************************FIN DE LA SECTION**************************************************************************************/
/* =============================
RESPONSIVE MOBILE
============================= */
@media (max-width: 600px) {
.collection-page {
padding: 12px 10px;
}
.collection-title {
font-size: 22px;
}
.items-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.item-card {
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
/* Boutons compacts mobile — sur une seule ligne */
.collection-move-btn {
font-size: 9px !important;
padding: 4px 4px !important;
gap: 2px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
flex: 1 1 0 !important;
}
.collection-actions {
padding: 0 4px 6px;
gap: 4px;
flex-wrap: nowrap;
}
}
/* **********************************************************PAGE AJOUTER.HTML POUR AJOUTER UN OBJET*************************************************************** */
/* =============================
FORMULAIRE AJOUT OBJET
Conteneur principal du formulaire
============================= */
.page-ajouter .form-wrapper{
max-width:1000px; /* Largeur maximale du formulaire. Empêche le formulaire de devenir trop large sur les grands écrans */
margin:40px auto; /* 40px en haut et en bas auto à gauche et à droite → permet de centrer le formulaire horizontalement dans la page */
background:var(--bg-card); /* Fond blanc. Permet de créer un effet "carte" comme les autres éléments du site */
padding:30px; /* Espace intérieur. Sépare le contenu du bord du bloc */
border-radius:16px; /* Coins arrondis. Cohérent avec les cartes et modales du site */
box-shadow:0 6px 20px rgba(0,0,0,0.1); /* Ombre légère autour du formulaire. Donne un effet moderne type "card UI" */
}
/* =============================
TITRE DU FORMULAIRE
============================= */
.page-ajouter .form-title{
text-align:center; /* Centre le texte horizontalement */
margin-bottom:50px; /* Espace entre le titre et le formulaire */
color:var(--text-main); /* Couleur principale du texte du site pour rester cohérent avec le design global */
}
/* =============================
ZONE IMAGE
============================= */
.page-ajouter .image-zone{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
text-align:center;
margin-bottom: 5px; /* pousse les infos sous l'image vers le bas */
}
.page-ajouter .image-zone img{
width: 100%; /* L'image prend toute la largeur disponible */
max-width: 300px; /* Limite la largeur maximale */
max-height: 300px; /* Limite la hauteur maximale */
object-fit:cover; /* Empêche l'image de se déformer → elle garde ses proportions */
margin-top: 5px; /* Espace au dessus de l'image */
margin-bottom:5px; /* Espace sous l'image */
border-radius:8px; /* Coins arrondis pour l'image */
}
.page-ajouter .image-infos{
grid-column:1;
grid-row: 2; /* place les infos sous l'image */
width:100%;
text-align: left;
}
/* =============================
INFOS PRINCIPALES
du formulaire
============================= */
.page-ajouter .infos,
.page-ajouter .side-infos{
grid-template-columns:1fr 1fr; /* Deux colonnes de même largeur */
gap: 20px 20px; /* Espace entre les champs */
}
.page-ajouter .infos input,
.page-ajouter .infos select,
.page-ajouter .side-infos input,
.page-ajouter .side-infos select{
width:100%;
}
/* =============================
GRILLE PRINCIPALE FORMULAIRE
============================= */
.page-ajouter .form-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr; /* image | colonne centre | colonne droite */
gap:20px;
align-items:start;
}
/* =============================
POSITION DES BLOCS
============================= */
/* .image-zone et .image-infos : fusionnées avec les définitions ci-dessus */
/* infos principales */
.page-ajouter .infos{
grid-column:2;
}
/* infos secondaires */
.page-ajouter .side-infos{
grid-column:3;
}
/* =============================
BOUTONS DU FORMULAIRE
============================= */
.page-ajouter .btn-turquoise{
display:block; /* transforme le bouton en bloc */
margin:10px auto; /* centre le bouton horizontalement */
}
.page-ajouter .form-actions{
margin-top:20px; /* Espace entre le formulaire et les boutons */
display:flex; /* Active Flexbox */
justify-content:flex-end; /* Aligne les boutons à droite */
gap:10px; /* Espace entre les boutons */
align-self:start;
grid-column:3; /* colonne de droite */
align-self:end; /* tout en bas */
justify-self:end; /* collé à droite */
}
.page-ajouter .form-actions button{
padding:10px 20px;
font-weight:600;
font-size:13px;
width:auto; /* empêche le bouton de prendre toute la largeur */
}
/* =============================
STYLE DES CHAMPS DU FORMULAIRE
============================= */
.page-ajouter .form-grid input,
.page-ajouter .form-grid select,
.page-ajouter .form-grid textarea{
padding:12px; /* Espace intérieur du champ rend les champs plus lisibles */
border-radius:8px; /* Coins arrondis */
border:1px solid var(--border); /* Bordure grise légère */
font-size:14px; /* Taille de texte standard */
width:100%; /* Le champ prend toute la largeur disponible */
transition:0.2s; /* Animation douce pour les changements de style (ex: focus) */
}
/* =============================
ÉTAT FOCUS DES CHAMPS
(quand on clique dans un champ)
============================= */
.page-ajouter .form-grid input:focus,
.page-ajouter .form-grid select:focus,
.page-ajouter .form-grid textarea:focus{
border-color:#3fbac2; /* Couleur turquoise du site indique que le champ est actif */
box-shadow:0 0 0 3px rgba(63,186,194,0.15); /* Ombre turquoise légère autour du champ pour renforcer l'effet focus */
outline:none; /* Supprime le contour bleu par défaut du navigateur */
}
/* =============================
ZONES DE TEXTE LONGUES
Descriptions et Notes
============================= */
.page-ajouter .description textarea,
.page-ajouter .notes textarea{
width:100%; /* Prend toute la largeur */
height:120px; /* Hauteur de la zone de texte */
}
.page-ajouter .description{
grid-column:1 / span 3;
}
.page-ajouter .notes{
grid-column:1 / span 3;
}
/* *********************************************************************FIN DE LA SECTION********************************************************************************************** */
/* ********************************************************************* BOUTONS MODIFIER TOF ET SUPPRIMER VIGNETTE******************************************************************** */
/* ======================================================
VIGNETTES COLLECTION — BOUTONS SUPPRIMER & MODIFIER PHOTO
====================================================== */
/* Wrapper autour de l'image pour positionner le bouton 📷 */
.collection-item-img-wrap {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 12px 12px 0 0;
aspect-ratio: 1/1;
}
.collection-item-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.25s, transform 0.3s ease;
}
/* Bouton 📷 modifier photo — affiché au survol de l'image */
.collection-edit-photo {
position: absolute;
bottom: 6px;
left: 6px;
background: rgba(0,0,0,0.55);
color: white;
border-radius: 8px;
padding: 4px 8px;
font-size: 14px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
user-select: none;
z-index: 2;
}
.collection-item:hover .collection-edit-photo {
opacity: 1;
}
/* Bouton ✕ supprimer la collection — coin supérieur droit */
.collection-delete-btn {
position: absolute;
top: 8px;
right: 8px;
background: rgba(231, 76, 60, 0.85);
color: white;
border: none;
border-radius: 50%;
width: 26px;
height: 26px;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s, background 0.2s;
z-index: 3;
line-height: 1;
}
.collection-item:hover .collection-delete-btn {
opacity: 1;
}
/* Mobile : boutons toujours visibles (navigation directe au tap) */
@media (max-width: 600px) {
.collection-item .collection-delete-btn,
.collection-item .collection-edit-photo {
opacity: 1 !important;
}
}
.collection-delete-btn:hover {
background: #c0392b;
}
/* ======================================================
FICHES OBJETS — BOUTON SUPPRIMER
====================================================== */
/* item-delete-btn est désormais géré par .collection-delete-btn */
/* ***************************************************************** FIN DE LA SECTION ***************************************************************** */
/* ============================================================
AUTH MODAL — styles isolés, non écrasés par .modal-content
Toutes les règles ciblent #authModalContent pour éviter
les conflits avec les autres modales du site.
============================================================ */
#authModalContent {
width: 400px !important;
max-width: 92vw !important;
max-height: 92vh !important;
overflow-y: auto !important;
padding: 20px 28px !important;
border-radius: 20px !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
font-family: 'Karla', Arial, sans-serif !important;
box-sizing: border-box !important;
scrollbar-width: none !important; /* Firefox */
}
#authModalContent::-webkit-scrollbar {
display: none; /* Chrome/Safari — scrollbar invisible mais fonctionnelle */
}
/* Reset : annule le gap:14px hérité de .modal-content */
#authModalContent > * {
margin: 0;
}
#authModalContent .auth-header {
text-align: center;
margin-bottom: 10px !important;
}
/* Boutons OAuth */
#oauthButtons {
display: flex;
flex-direction: column !important;
gap: 5px !important;
margin-bottom: 10px !important;
}
#oauthButtons button {
width: 100% !important;
margin-top: 0 !important;
padding: 8px 14px !important;
border: 1.5px solid #e0e0e0 !important;
border-radius: 10px !important;
background: var(--bg-card) !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
box-sizing: border-box;
}
#authModalContent .auth-header img {
width: 100% !important;
height: auto !important;
max-height: 90px !important;
object-fit: cover !important;
margin-bottom: 4px !important;
border-radius: 16px !important;
display: block;
margin-left: auto;
margin-right: auto;
}
#authModalContent .auth-header h2 {
margin: 0 0 2px !important;
font-size: 18px !important;
color: var(--text-main);
font-weight: 800;
}
#authModalContent .auth-header p {
margin: 0 !important;
font-size: 11px !important;
color: #aaa;
}
#oauthButtons button:hover {
background: var(--bg-subtle) !important;
}
#oauthGoogle { color: var(--text-main) !important; }
#oauthFacebook{ color: #1877F2 !important; }
#oauthApple { color: #000 !important; }
/* Séparateur "ou par email" */
#authModalContent .auth-separator {
display: flex;
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
#authModalContent .auth-separator div {
flex: 1;
height: 1px;
background: #eee;
}
#authModalContent .auth-separator span {
font-size: 11px !important;
color: #ccc !important;
white-space: nowrap;
text-align: center;
flex-shrink: 0;
}
/* Bloc champs du formulaire */
#authModalContent .auth-fields {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
align-items: stretch !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Ligne CGU */
#cguWrap label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 13px !important;
color: #555 !important;
cursor: pointer !important;
width: 100% !important;
box-sizing: border-box !important;
flex-wrap: nowrap !important;
}
#cguWrap label span {
flex: 1 !important;
line-height: 1.4 !important;
}
/* Inputs */
#authModalContent .auth-fields input {
width: 100% !important;
padding: 10px 14px !important;
border: 1.5px solid #e0e0e0 !important;
border-radius: 10px !important;
font-size: 14px !important;
font-family: 'Karla', Arial, sans-serif !important;
outline: none !important;
box-sizing: border-box !important;
margin-top: 0 !important;
}
#authModalContent .auth-fields input:focus {
border-color: #3fbac2 !important;
}
/* Bouton submit */
#submitLogin {
width: 100% !important;
margin-top: 4px !important;
padding: 11px !important;
background: #3fbac2 !important;
color: white !important;
border: none !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
font-family: 'Karla', Arial, sans-serif !important;
transition: background 0.2s;
}
#submitLogin:hover {
background: #2da8b0 !important;
}
#submitLogin:disabled {
opacity: 0.7;
cursor: not-allowed !important;
}
/* Lien toggle connexion/inscription */
#authModalContent .auth-toggle {
text-align: center !important;
margin-top: 12px !important;
font-size: 13px !important;
color: #999 !important;
}
#toggleForm {
color: #3fbac2 !important;
cursor: pointer !important;
font-weight: 600 !important;
}
/* Messages erreur / succès */
#authError, #authSuccess {
border-radius: 8px !important;
padding: 9px 12px !important;
font-size: 13px !important;
margin-top: 0 !important;
}
#authError { background: #fef2f2 !important; border: 1px solid #fca5a5 !important; color: #dc2626 !important; }
#authSuccess { background: #f0fdf4 !important; border: 1px solid #86efac !important; color: #16a34a !important; }
/* Jauge force mot de passe */
#strengthWrap {
margin-top: 0 !important;
}
#strengthWrap ul {
margin: 4px 0 0 !important;
padding-left: 16px !important;
font-size: 12px !important;
color: #888 !important;
line-height: 1.7 !important;
}
/* Boutons œil afficher/masquer mot de passe */
#togglePassword,
#toggleConfirm {
margin: 0 !important;
width: auto !important;
padding: 0 !important;
background: none !important;
border: none !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* ============================================================
EMPTY STATE — grille collections vide
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.empty-state-icon {
margin-bottom: 20px;
}
.empty-state-icon svg {
width: 110px;
height: 110px;
filter: drop-shadow(0 4px 12px rgba(63,186,194,0.15));
}
.empty-state-title {
font-size: 20px;
font-weight: 800;
color: var(--text-main);
margin: 0 0 10px;
}
.empty-state-desc {
font-size: 14px;
color: #aaa;
line-height: 1.6;
margin: 0 0 24px;
max-width: 320px;
}
.empty-state-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 28px;
background: #3fbac2;
color: white;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
font-family: 'Karla', Arial, sans-serif;
width: auto !important;
margin-top: 0 !important;
}
.empty-state-btn:hover {
background: #2da8b0;
transform: translateY(-2px);
}
.empty-state-btn--secondary {
background: var(--bg-card);
color: #999;
border: 1.5px solid #ddd;
}
.empty-state-btn--secondary:hover {
background: var(--bg-subtle);
color: #666;
transform: translateY(-2px);
}
/* Empty state centré dans la grille d'objets (page collection) */
.items-grid .empty-state {
grid-column: 1 / -1;
min-height: 340px;
justify-content: center;
}
/* ============================================================
DÉPLACER / ACTIONS COLLECTION
============================================================ */
.collection-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding: 0 4px 6px;
margin-top: auto; /* pousse le bouton tout en bas de la vignette */
}
.collection-move-btn {
flex: 1;
padding: 5px 8px !important;
font-size: 11px !important;
font-weight: 600 !important;
background: #3fbac2 !important;
color: white !important;
border: 1.5px solid #3fbac2 !important;
border-radius: 7px !important;
cursor: pointer !important;
margin-top: 0 !important;
transition: background 0.2s, color 0.2s !important;
width: auto !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
white-space: nowrap !important;
text-decoration: none !important;
}
.collection-move-btn:hover {
background: #2fa1a8 !important;
border-color: #2fa1a8 !important;
color: white !important;
}
/* ============================================================
MODE SOMBRE — Correctifs complémentaires
Éléments qui utilisaient des couleurs hardcodées
============================================================ */
/* Inputs et selects globaux */
html.dark input,
html.dark select,
html.dark textarea {
background: var(--bg-input);
color: var(--text-main);
border-color: var(--border);
}
/* Champs dans la modale d'auth */
html.dark #authModalContent {
background: var(--bg-card) !important;
color: var(--text-main) !important;
}
html.dark #authModalContent .auth-header h2 {
color: var(--text-main) !important;
}
html.dark #authModalContent .auth-fields input {
background: var(--bg-input) !important;
color: var(--text-main) !important;
border-color: var(--border) !important;
}
html.dark #authModalContent .auth-separator div {
background: var(--border) !important;
}
html.dark #authModalContent .auth-separator span {
color: var(--text-muted) !important;
}
html.dark #authModalContent .auth-toggle {
color: var(--text-muted) !important;
}
/* User-info dans le dropdown */
html.dark .user-info {
border-bottom-color: var(--border);
color: var(--text-muted);
}
/* Liens nav */
html.dark .nav-links a {
color: var(--text-main);
}
/* Slogan header */
html.dark .header p,
html.dark .brand p {
color: var(--text-muted);
}
/* Vignettes collections — ressortent du fond en mode sombre */
html.dark .collection-item,
html.dark .item-card,
html.dark .collection-card {
background: #273548 !important;
border: none !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
/* Titres des items collection */
html.dark .collection-item .title,
html.dark .item-card .title {
color: var(--text-main);
}
/* Description et textes secondaires */
html.dark .collection-description,
html.dark .item-card .item-subtitle {
color: var(--text-muted);
}
/* Bouton déplacer collection */
html.dark .collection-move-btn {
background: var(--bg-subtle) !important;
color: #3fbac2 !important;
border-color: var(--border) !important;
}
/* Sidebar menu items */
html.dark .submenu-toggle {
color: var(--text-main);
}
html.dark .menu li:hover,
html.dark .submenu li:hover,
html.dark .submenu-toggle:hover {
background: var(--bg-input);
}
html.dark .submenu-toggle[data-toplevel="true"] { color: #ffffff; }
html.dark .submenu-toggle[data-level2="true"] { color: #e2e8f0; }
html.dark .submenu li:not(.has-submenu) { color: #e2e8f0; }
/* Footer */
html.dark .footer {
border-top-color: var(--border);
}
html.dark .footer-brand h2,
html.dark .footer-links h4,
html.dark .footer-newsletter p {
color: var(--text-main);
}
html.dark .footer-brand p,
html.dark .footer-links a,
html.dark .footer-bottom {
color: var(--text-muted);
}
html.dark .footer-newsletter input {
background: var(--bg-input);
color: var(--text-main);
}
html.dark .footer-newsletter form {
border-color: var(--border);
}
html.dark .socials a {
border-color: var(--border);
}
/* Séparateur user-info */
html.dark .dropdown {
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
/* Boutons OAuth texte */
html.dark #oauthFacebook { color: #6fa8f5 !important; }
html.dark #oauthApple { color: var(--text-main) !important; }
/* Breadcrumb */
html.dark .breadcrumb span { color: var(--text-muted); }
/* Empty state */
html.dark .empty-state-title { color: var(--text-main); }
html.dark .empty-state-btn--secondary {
border-color: var(--border);
color: var(--text-muted);
}
/* Formulaire ajouter objet */
html.dark .page-ajouter .form-title { color: var(--text-main); }
html.dark .page-ajouter .form-grid input,
html.dark .page-ajouter .form-grid select,
html.dark .page-ajouter .form-grid textarea {
background: var(--bg-input);
color: var(--text-main);
border-color: var(--border);
}
/* Bouton edit-avatar crayon */
html.dark .edit-avatar {
background: #3fbac2;
border-color: white;
}
/* Boutons Export Excel et PDF — couleurs adoucies en mode sombre */
html.dark .btn-export.excel {
background: #2d6a3f !important;
color: #b7dfbf !important;
}
html.dark .btn-export.excel:hover {
background: #245533 !important;
}
html.dark .btn-export.pdf {
background: #7f2d24 !important;
color: #f0b8b3 !important;
}
html.dark .btn-export.pdf:hover {
background: #66231c !important;
}
/* Titres des cartes export (Collections, Fiches objets, Favoris, Export complet) */
html.dark .export-card-title {
color: #3fbac2 !important;
}
/* Labels des champs de paramètres (Nom d'utilisateur, Email, Mot de passe...) */
html.dark .param-group label {
color: white !important;
}
/* Titres des toggles (Profil public, Collections publiques, Mode sombre) */
html.dark .visibility-toggle-left span:first-child {
color: #3fbac2 !important;
}
/* Titres des objets récents sur la page profil */
html.dark .recent-item-name {
color: #3fbac2 !important;
}
/* Bouton "Paramètres du compte" dans la carte profil */
html.dark .profil-settings-btn {
background: #3fbac2 !important;
color: white !important;
border-color: #3fbac2 !important;
}
/* Dropdowns de tri et filtre des collections (page index) — générés par JS */
html.dark #sortSelect,
html.dark #catSelect,
html.dark #favSortSelect,
html.dark #itemSortSelect,
html.dark #collPageSortSelect {
background: #3fbac2 !important;
color: white !important;
border-color: #3fbac2 !important;
font-weight: 600 !important;
}
/* Options dans le menu déroulant ouvert */
html.dark #sortSelect option,
html.dark #catSelect option,
html.dark #favSortSelect option,
html.dark #itemSortSelect option,
html.dark #collPageSortSelect option {
background: #3fbac2 !important;
color: white !important;
font-weight: 600 !important;
}
html.dark #sortSelect option:hover,
html.dark #catSelect option:hover,
html.dark #favSortSelect option:hover,
html.dark #itemSortSelect option:hover,
html.dark #collPageSortSelect option:hover,
html.dark #sortSelect option:checked,
html.dark #catSelect option:checked,
html.dark #favSortSelect option:checked,
html.dark #itemSortSelect option:checked,
html.dark #collPageSortSelect option:checked {
background: #2a9ba3 !important;
color: white !important;
}
/* Barre de recherche */
html.dark .search-container input {
background: var(--bg-input);
color: var(--text-main);
border-color: var(--border);
}
/* Centrage de "Messages" et "3 conversations" dans la sidebar */
.msg-sidebar-header {
justify-content: center;
flex-direction: column;
text-align: center;
}
/* Forcer le survol turquoise sur le bouton bloquer (id spécifique) */
#blockBtn:hover {
background: #3fbac2 !important;
color: white !important;
border-color: #3fbac2 !important;
}
/* Boutons d'action conversations (archiver, bloquer, supprimer) — survol turquoise */
.msg-conv-action-btn.del:hover,
.msg-conv-action-btn.arch:hover,
.msg-conv-action-btn.unarch:hover,
.msg-conv-action-btn.block:hover,
.btn-header-action.arch:hover,
.btn-header-action.del:hover,
.btn-header-action.block:hover,
.btn-header-action.blocked:hover {
background: #3fbac2 !important;
color: white !important;
border-color: #3fbac2 !important;
}
html.dark .msg-conv-action-btn.del:hover,
html.dark .msg-conv-action-btn.arch:hover,
html.dark .msg-conv-action-btn.unarch:hover,
html.dark .msg-conv-action-btn.block:hover,
html.dark .btn-header-action.arch:hover,
html.dark .btn-header-action.del:hover,
html.dark .btn-header-action.block:hover,
html.dark .btn-header-action.blocked:hover {
background: #3fbac2 !important;
color: white !important;
border-color: #3fbac2 !important;
}
/* ── Grande tablette (901px–1200px) — page-favoris : recherche après favoris, notif/avatar en dessous ── */
@media (min-width: 901px) and (max-width: 1200px) {
.page-favoris .header {
flex-wrap: wrap !important;
padding: 10px 16px;
gap: 8px;
align-items: center;
}
.page-favoris .brand { order: 1; flex-shrink: 0; }
.page-favoris .nav-links { order: 1; flex-shrink: 0; flex-wrap: nowrap; gap: 6px; }
.page-favoris .search-container { order: 1; flex: 1; min-width: 100px; max-width: 180px; margin: 0; }
.page-favoris .header > div:not(.brand):not(.navbar-right):not(.search-container) {
order: 2; flex: 1; display: flex; justify-content: flex-end; gap: 8px;
}
.page-favoris .navbar-right { order: 2; flex: 1; display: flex; justify-content: flex-start; gap: 8px; }
.page-favoris .header::after { content: ''; order: 2; width: 100%; height: 0; display: block; flex-basis: 100%; }
}
/* ── Page Favoris : barre de recherche non tronquée ── */
.page-favoris .search-container {
max-width: 160px;
min-width: 120px;
}
/* ── Page Favoris : header plus compact pour éviter le débordement ── */
.page-favoris .header,
.page-profil .header,
.page-messages .header {
gap: 10px;
padding: 10px 15px;
}
.page-favoris .search-container,
.page-profil .search-container,
.page-messages .search-container {
max-width: 140px;
}
.page-favoris .nav-links,
.page-profil .nav-links,
.page-messages .nav-links {
gap: 10px;
}
.page-favoris .nav-links a,
.page-profil .nav-links a,
.page-messages .nav-links a {
padding: 9px 10px;
font-size: 14px;
}
/* ── Page Profil / Paramètres — titres et nom d'utilisateur ── */
/* Nom d'utilisateur dans la carte profil */
html.dark .profil-name,
html.dark .profil-username,
html.dark .profil-card .username,
html.dark .profil-card h2,
html.dark .profil-card h3 {
color: #3fbac2 !important;
}
/* Titres de groupes de paramètres (ex: "Informations personnelles", "Sécurité") */
html.dark .param-group-title,
html.dark .param-group > h2,
html.dark .param-group > h3,
html.dark .param-group > legend,
html.dark .section-card h2,
html.dark .section-card h3,
html.dark .section-title {
color: #3fbac2 !important;
}
/* ***************************************************************** MISE EN PAGE DE LA PAGE FAVORIS ***************************************************************** */
/* .collection-page : voir définition unique plus haut dans le fichier */
/* ********************************************************************* FIN DE LA SECTION **************************************************************************** */
/* Titre "Explorer la communauté" en mode sombre */
html.dark .explorer-header h1,
html.dark .explorer-page h1,
html.dark .explorer-title {
color: #3fbac2 !important;
}
/* Vignettes de la page Explorer en mode sombre */
html.dark .explorer-card {
background: #273548 !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
html.dark .explorer-card-info h3 {
color: white !important;
}
/* ********************************************************************* FIN DE LA SECTION **************************************************************************** */
/* ================================================================
RESPONSIVE GLOBAL — TOUTES LES PAGES
Améliore l'affichage sur mobile et tablette
================================================================ */
/* ── TABLETTE (< 900px) ── */
@media (max-width: 900px) {
/* Header */
.header, .page-index header {
flex-wrap: wrap;
padding: 12px 16px;
gap: 10px;
margin: 10px;
}
.logo {
width: 200px;
}
.nav-links {
gap: 8px;
font-size: 13px;
}
.search-container {
width: 100%;
order: 5;
}
/* Grille collections */
.collection-grid {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
/* Formulaire ajout */
.page-ajouter .form-wrapper {
margin: 20px;
padding: 20px;
}
}
/* ── MOBILE (< 600px) ── */
@media (max-width: 600px) {
/* ─────────────────────────────────────────
HEADER
Ordre d'affichage :
1. Logo + slogan (pleine largeur)
2. Nav + 🔔 + ✉️ + 🦎 (même ligne)
3. Recherche (pleine largeur)
───────────────────────────────────────── */
.header, .page-index header {
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 12px;
margin: 8px;
gap: 8px;
width: calc(100% - 16px);
}
/* Ligne 1 : logo + slogan */
.brand {
order: 1;
width: 100%;
text-align: center;
flex-shrink: 0;
}
.logo { width: 300px; }
.slogan { font-size: 5px; }
/* Ligne 2a : nav liens */
.navbar-left {
order: 2;
flex-shrink: 1;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.nav-links a {
padding: 6px 10px;
font-size: 13px;
}
/* Ligne 2b : div anonyme (🔔 + ✉️) → même ligne que la nav */
.page-index header > div:not(.brand):not(.navbar-left):not(.navbar-right):not(.search-container),
.header > div:not(.brand):not(.navbar-left):not(.navbar-right):not(.search-container) {
order: 2;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Ligne 2c : navbar-right (avatar) → même ligne */
.navbar-right {
order: 2;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.msg-envelope-btn {
width: 36px;
height: 36px;
font-size: 18px;
}
.avatar-container { width: 36px; height: 36px; }
.avatar { width: 36px; height: 36px; }
.login-btn {
padding: 6px 12px;
font-size: 13px;
}
/* Ligne 3 : recherche pleine largeur */
.search-container {
order: 3;
width: 100%;
max-width: 100%;
margin: 0;
}
/* ─────────────────────────────────────────
CONTENU INDEX
───────────────────────────────────────── */
.page-index main.container {
padding: 0 8px 20px;
}
/* Sidebar accessible via bouton hamburger */
.sidebar {
display: block !important;
position: fixed;
top: 0;
left: -65vw;
width: 65vw;
height: 100%;
height: -webkit-fill-available;
min-height: 100vh;
z-index: 999;
border-radius: 0 16px 16px 0;
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
transition: left 0.3s ease;
padding-top: 20px;
background: var(--bg-card, #fff);
}
.sidebar.sidebar-open { left: 0; }
/* Bouton hamburger visible sur mobile */
#sidebarToggle {
display: inline-flex !important;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.features { grid-template-columns: 1fr; }
.card { padding: 14px; }
/* Titre + bouton "Créer" empilés */
.collections-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.collections-header .btn-turquoise {
position: static !important;
transform: none !important;
width: 100% !important;
justify-content: center;
}
/* Filtres côte à côte */
#sortSelect, #catSelect {
width: calc(50% - 5px) !important;
min-width: 0 !important;
font-size: 13px !important;
padding: 6px 8px !important;
box-sizing: border-box !important;
}
/* Grille collections : 2 colonnes */
.collection-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 0;
}
.collection-item img { height: 100px; }
/* ─────────────────────────────────────────
AUTRES PAGES
───────────────────────────────────────── */
.collection-page { padding: 12px; margin: 8px; }
.collection-title { font-size: 20px; }
.items-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
.item-card { padding: 10px; }
.page-ajouter .form-wrapper { margin: 8px; padding: 16px; }
.page-ajouter .form-row { grid-template-columns: 1fr !important; }
.modal-content { width: 90vw; padding: 20px; }
.footer { padding: 20px 12px 0; margin-top: 30px; }
.footer-newsletter form { flex-direction: column; }
.footer-newsletter input { width: 100%; }
.profil-card { padding: 16px; margin: 8px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.objet-card { margin: 8px; padding: 16px; }
.objet-fields-grid { grid-template-columns: 1fr !important; }
/* Actions vignette mobile */
.collection-actions { flex-direction: row; gap: 6px; }
.collection-move-btn { width: auto !important; }
/* Croix supprimer : cible tactile 40px, jamais pleine largeur */
.collection-delete-btn {
width: 40px !important;
height: 40px !important;
position: absolute !important;
top: 4px !important;
right: 4px !important;
opacity: 0 !important;
}
}
/* ── TRÈS PETIT MOBILE (< 380px) ── */
@media (max-width: 380px) {
.logo { width: 130px; }
.collection-grid { grid-template-columns: 1fr; }
.items-grid { grid-template-columns: 1fr !important; }
.stats-grid { grid-template-columns: 1fr; }
}
/* ── Page Favoris — responsive mobile ── */
@media (max-width: 600px) {
.page-favoris .header {
flex-wrap: wrap;
justify-content: center;
padding: 12px;
margin: 8px;
gap: 10px;
width: calc(100% - 16px);
}
/* 1. Logo + slogan */
.page-favoris .brand {
order: 1;
width: 100%;
text-align: center;
}
/* 2. Nav liens (Accueil / Explorer / Favoris) + Recherche sur la même ligne */
.page-favoris .nav-links {
order: 2;
flex-wrap: nowrap;
justify-content: center;
gap: 6px;
flex-shrink: 0;
}
.page-favoris .nav-links a {
padding: 6px 10px;
font-size: 13px;
}
.page-favoris .search-container {
order: 2;
flex: 1;
max-width: 200px;
min-width: unset;
margin: 0;
}
/* 3. Icônes notif + messages + avatar — ligne en dessous */
.page-favoris .header > div:not(.brand):not(.navbar-right):not(.search-container) {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-favoris .navbar-right {
order: 3;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
}
}
/* ── Page Collection — mobile encore plus compact ── */
@media (max-width: 600px) {
.page-collection .collection-title {
font-size: 14px !important;
}
.page-collection #btnFavori {
font-size: 16px !important;
}
.page-collection #btnRename {
font-size: 13px !important;
padding: 2px 4px !important;
}
.page-collection .btn-primary {
padding: 5px 10px !important;
font-size: 12px !important;
margin-bottom: 8px !important;
}
/* Tri (select) plus compact */
.page-collection #collPageSortSelect,
.page-collection #itemSortSelect,
.page-collection select {
font-size: 12px !important;
padding: 4px 6px !important;
height: auto !important;
}
}
/* ── Page Collection — boutons centrés sur mobile ── */
@media (max-width: 600px) {
.page-collection .collection-page > a.btn-primary,
.page-collection #btnCreateSub {
display: inline-flex !important;
justify-content: center !important;
}
/* Wrapper les boutons au centre */
.page-collection .collection-page {
text-align: center;
}
/* Remettre le texte normal pour le reste */
.page-collection .collection-page .items-grid,
.page-collection .collection-page .breadcrumb,
.page-collection .collection-page h1,
.page-collection .collection-page section {
text-align: left;
}
}
/* ── Page Ajouter — responsive mobile ── */
@media (max-width: 600px) {
.page-ajouter .header {
flex-wrap: wrap;
justify-content: center;
padding: 12px;
margin: 8px;
gap: 10px;
width: calc(100% - 16px);
}
/* 1. Logo + slogan */
.page-ajouter .brand {
order: 1;
width: 100%;
text-align: center;
}
/* 2. Nav liens */
.page-ajouter .nav-links {
order: 2;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.page-ajouter .nav-links a {
padding: 6px 10px;
font-size: 13px;
}
/* 3. Icônes notif + messages + avatar */
.page-ajouter .header > div:not(.brand):not(.navbar-right):not(.search-container) {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-ajouter .navbar-right {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* 4. Recherche pleine largeur */
.page-ajouter .search-container {
order: 4;
width: 100%;
max-width: 100%;
min-width: unset;
margin: 0;
}
}
/* ── Page Messages — responsive mobile ── */
@media (max-width: 600px) {
.page-messages .header {
flex-wrap: wrap;
justify-content: center;
padding: 12px;
margin: 8px;
gap: 10px;
width: calc(100% - 16px);
}
.page-messages .brand {
order: 1;
width: 100%;
text-align: center;
}
.page-messages .nav-links {
order: 2;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.page-messages .nav-links a {
padding: 6px 10px;
font-size: 13px;
}
.page-messages .header > div:not(.brand):not(.navbar-right):not(.search-container) {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-messages .navbar-right {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-messages .search-container {
order: 4;
width: 100%;
max-width: 100%;
min-width: unset;
margin: 0;
}
}
/* ── Mobile : dropdown profil centré ── */
@media (max-width: 600px) {
.dropdown {
position: fixed !important;
top: 160px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
min-width: 200px;
z-index: 10000;
}
}
/* ── Mobile : dropdown profil plus compact ── */
@media (max-width: 600px) {
.dropdown {
min-width: 160px !important;
border-radius: 10px !important;
}
.user-info {
padding: 8px 12px !important;
font-size: 12px !important;
}
.dropdown a {
padding: 8px 12px !important;
font-size: 13px !important;
}
}
/* ── Page Profil — responsive mobile ── */
@media (max-width: 600px) {
.page-profil .header {
flex-wrap: wrap;
justify-content: center;
padding: 12px;
margin: 8px;
gap: 10px;
width: calc(100% - 16px);
}
.page-profil .brand {
order: 1;
width: 100%;
text-align: center;
}
.page-profil .nav-links {
order: 2;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.page-profil .nav-links a {
padding: 6px 10px;
font-size: 13px;
}
.page-profil .header > div:not(.brand):not(.navbar-right):not(.search-container) {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-profil .navbar-right {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-profil .search-container {
order: 4;
width: 100%;
max-width: 100%;
min-width: unset;
margin: 0;
}
/* Derniers objets ajoutés : titre + bouton sur la même ligne */
.page-profil .section-card > div[style*="space-between"] {
flex-wrap: nowrap !important;
gap: 6px !important;
}
.page-profil .section-card h2 {
font-size: 13px !important;
white-space: nowrap;
}
.page-profil #btnVoirTousObjets {
font-size: 10px !important;
padding: 5px 10px !important;
white-space: nowrap;
flex-shrink: 0;
}
}
/* ── Page Collection — responsive mobile header ── */
@media (max-width: 600px) {
.page-collection .header {
flex-wrap: wrap;
justify-content: center;
padding: 12px;
margin: 8px;
gap: 10px;
width: calc(100% - 16px);
}
.page-collection .brand {
order: 1;
width: 100%;
text-align: center;
}
.page-collection .nav-links {
order: 2;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.page-collection .nav-links a {
padding: 6px 10px;
font-size: 13px;
}
.page-collection .header > div:not(.brand):not(.navbar-right):not(.search-container) {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-collection .navbar-right {
order: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.page-collection .search-container {
order: 4;
width: 100%;
max-width: 100%;
min-width: unset;
margin: 0;
}
}
/* ============================================================
LOADER GLOBAL — Supabase chargement
============================================================ */
/* Section collections — prend tout l'espace restant dans features */
.user-collections {
flex: 1;
min-width: 0;
}
/************************STYLE FOND DE PAGE POUR INDEX EXPLORER FAVORIS MESSAGE COLLECTION OBJET PROFIL AJOUTER MES-OBJETS**********************************************************************/
html body.page-index,
html body.page-explorer,
html body.page-favoris,
html body.page-profil,
html body.page-messages,
html body.page-collection,
html body.page-ajouter,
html body.page-objet,
html body.page-mes-objets {
background: #1a2e35;
position: relative;
overflow-x: hidden;
}
.page-index::before, .page-explorer::before, .page-favoris::before,
.page-profil::before, .page-messages::before, .page-collection::before,
.page-ajouter::before, .page-objet::before, .page-mes-objets::before {
content: '';
position: fixed;
top: -120px;
left: -120px;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(63, 186, 194, 0.06);
pointer-events: none;
z-index: 0;
}
.page-index::after, .page-explorer::after, .page-favoris::after,
.page-profil::after, .page-messages::after, .page-collection::after,
.page-ajouter::after, .page-objet::after, .page-mes-objets::after {
content: '';
position: fixed;
bottom: -100px;
right: -80px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(63, 186, 194, 0.04);
pointer-events: none;
z-index: 0;
}
/*CORRECTIF TITRE PAGE MES OBJETS EN MODE SOMBRE*/
.page-mes-objets .mes-objets-header h1 {
color: #e2e8f0;
}
/*CORRECTIF FOOTER PAGE FAVORIS*/
/* ── Fix footer collé en bas — Favoris (à étendre aux autres pages validées) ── */
html body.page-favoris {
display: flex;
flex-direction: column;
}
html body.page-favoris > main {
flex: 1 0 auto;
}
/* =============================================
PRÉFÉRENCE MOUVEMENT RÉDUIT
Coupe les déplacements (transform/translate/scale),
qui peuvent gêner les utilisateurs sensibles au mouvement,
tout en gardant les retours d'état (couleur, opacité, ombre)
pour ne pas rendre l'interface muette au clavier/hover.
============================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
*:hover, *:focus, *:active {
transition-duration: 120ms !important;
transition-property: color, background-color, border-color, box-shadow, opacity !important;
}
}