/**
* ======================================================
* BASE.CSS - Styles globaux et composants réutilisables
* ======================================================
*
* Rôle : Ce fichier contient tous les styles partagés entre les pages :
* - Variables CSS globales (couleurs, typographies, espacements)
* - Reset et typographie de base
* - Header et navigation (menu, burger)
* - Boutons (styles génériques et variantes)
* - Formulaires et inputs (avec labels flottants)
* - Footer (structure et styles)
* - Modal d'authentification (popup connexion/inscription)
* - Règles responsive (adaptation mobile/tablette)
*
* Pages concernées : TOUTES les pages du site
* (chargé via head-resources.ejs sur chaque page)
*
* Ordre de chargement CSS :
* 1. reset.css (normalisation)
* 2. base.css (styles globaux) ← Ce fichier
* 3. burger-menu.css (compléments menu burger)
* 4. help.css (aide contextuelle)
* 5. CSS spécifiques à chaque page (home.css, movies.css, etc.)
*
* Note : Les fichiers CSS spécifiques sont chargés APRÈS base.css
* pour pouvoir surcharger les styles globaux si nécessaire.
*/
/* ====================================================== */
/* 1. VARIABLES CSS GLOBALES (Custom Properties)
====================================================== */
/**
* Les variables CSS (Custom Properties) permettent de stocker des valeurs
* réutilisables dans toute l'application. Déclarées dans :root, elles sont
* accessibles partout et peuvent être modifiées dynamiquement.
*
* Avantages :
* - Cohérence des couleurs/tailles dans tout le site
* - Modification facile d'un thème (changer une couleur = changer partout)
* - Référence avec var(--nom-variable)
*
* Utilisation : color: var(--dore-popcorn);
*/
:root {
/* ====================================================== */
/* COULEURS PRINCIPALES - Palette Bleue
====================================================== */
--bleu-nuit: #142234; /* +3% L vs #0d1b2a — fond plus lisible sur écrans non calibrés */
--bleu-intermediaire: #1b263b;
--bleu-inter: #1b263b; /* alias moodboard V3 */
--bleu-clair: #415a77;
--bleu-secondaire: #5a7391;
--bleu-fond: #162845; /* +2% L vs #0D1C2E — cards distinguables du fond */
--bleu-titre-section: #0d1b2a;
/* Surfaces cards */
--surface-card: #0f1e30; /* moodboard V3 (était #0D1C2E) */
--surface-card-warm: #112236;
/* ====================================================== */
/* COULEURS ACCENT / SECONDAIRES - Palette Dorée
====================================================== */
/* Nouvelles variables hiérarchisées pour le thème doré — Or Ticket Cinéma */
--or-100: #d4a843; /* or ticket cinéma, vibrant */
--or-200: #b8882a; /* base dorée profonde */
--or-300: #7a5a14; /* foncé, profond */
--or-titre: #c4a052; /* or titres — ambré, moins saturé, luxe cinéma */
/* Variables de compatibilité (mappées vers les nouvelles) */
--dore-popcorn: var(--or-titre); /* or cinéma — ambré, luxe */
--dore-fonce: var(--or-200); /* base dorée profonde */
--dore-clair: #f2c84b; /* lumineux */
--jaune-blond: #ffe085; /* éclat maximal */
/* ====================================================== */
/* COULEURS ACCENT / SECONDAIRES - Autres
====================================================== */
--rouge-projecteur: #c23018;
--rouge-cta: #c23018; /* alias moodboard V3 */
--argent-ecran: #e8e8e8;
--argent: #e8e8e8; /* alias moodboard V3 */
--beige-icecream: #f5ead1;
/* ====================================================== */
/* PALETTE PREMIUM CINÉMA - Design System Ultra Premium
====================================================== */
/* Or Ticket Cinéma — Dégradé métallique signature */
--gold: #d4a843;
--gold-light: #f2c84b;
--gold-dark: #b8882a;
--gold-glow: rgba(212, 168, 67, 0.6);
--gold-gradient: linear-gradient(
135deg,
#b8882a 0%,
#d4a843 30%,
#f2c84b 55%,
#ffe085 80%,
#d4a843 100%
);
--gold-gradient-h: linear-gradient(
90deg,
#b8882a 0%,
#d4a843 30%,
#f2c84b 55%,
#ffe085 80%,
#d4a843 100%
); /* moodboard V3 — horizontal */
--gold-gradient-hover: linear-gradient(
135deg,
#c99430 0%,
#e8ba50 35%,
#ffd85a 60%,
#ffe896 85%,
#e8ba50 100%
);
--gold-text-gradient: linear-gradient(
135deg,
#b8882a,
#f2c84b,
#ffe085,
#d4a843
);
--rouge-gradient: linear-gradient(
135deg,
#8b1c13 0%,
#c23018 55%,
#d43a20 100%
); /* moodboard V3 — 3 stops */
--rouge-gradient-full: linear-gradient(
135deg,
#8c1c13 0%,
#c23018 45%,
#e84020 75%,
#c23018 100%
); /* moodboard V3 — 4 stops */
/* Rouge Velours — Cinéma profond */
--red: #c23018;
--red-light: #e84020;
--red-dark: #8c1c13;
--red-glow: rgba(194, 48, 24, 0.6);
--red-gradient: linear-gradient(
135deg,
#8c1c13 0%,
#c23018 40%,
#e84020 70%,
#c23018 100%
);
--red-gradient-hover: linear-gradient(
135deg,
#a02010 0%,
#d83820 40%,
#f04828 70%,
#d83820 100%
);
/* Vert Velours - Succès & Élégance Cinéma */
--velvet: #065f46;
--velvet-light: #059669;
--velvet-dark: #064e3b;
--velvet-glow: rgba(6, 95, 70, 0.6);
/* Bleu Saphir - Premium & Profondeur */
--sapphire: #0369a1;
--sapphire-light: #0ea5e9;
--sapphire-dark: #075985;
--sapphire-glow: rgba(3, 105, 161, 0.6);
/* Cuivre Vintage - Chaleur & Nostalgie */
--copper: #d97706;
--copper-light: #f59e0b;
--copper-dark: #966026;
--copper-glow: rgba(217, 119, 6, 0.6);
/* Bordeaux/Burgundy - Velours des rideaux, sièges premium
* Plus élégant et cohérent avec l'ambiance salle de cinéma
* Alternative au cuivre pour certaines variantes */
--burgundy: #7c2d3a;
--burgundy-light: #9f3d4d;
--burgundy-dark: #5c1f2a;
--burgundy-glow: rgba(124, 45, 58, 0.5);
/* Argent Écran - Élégance & Sobriété */
--silver: #64748b;
--silver-light: #94a3b8;
--silver-dark: #455566;
--silver-glow: rgba(100, 116, 139, 0.5);
/* Orange Pellicule - Alerte & En attente */
--orange-pellicule: #f97316;
--orange: #f97316;
--orange-light: #fb923c;
--orange-dark: #c2610a;
--orange-glow: rgba(249, 115, 22, 0.6);
/* Texte */
--text-light: #f1f5f9;
--text-dark: #0f172a;
/* ====================================================== */
/* OMBRES ET EFFETS
====================================================== */
--ombre-bleue: rgba(28, 37, 65, 0.4);
--ombre-bleue-foncee: rgba(13, 27, 42, 0.8);
--ombre-intermediaire: rgba(27, 38, 59, 0.35);
--ombre-intermediaire-strong: rgba(27, 38, 59, 0.45);
/* ====================================================== */
/* EFFETS GLOBY / GLASSMORPHISM
====================================================== */
--gold-popcorn: #f7c948; /* utilisé dans footer separator gradient */
/* Refactoring : Variables supprimées (non utilisées) :
--blond, --silver-screen, --input-bg, --glass-bg, --glass-border, --glass-shadow
*/
/* ====================================================== */
/* COULEURS AVEC OPACITÉ — Argent écran (contact-about)
====================================================== */
--bleu-clair-30: rgba(65, 90, 119, 0.3);
--argent-ecran-08: rgba(236, 239, 241, 0.08);
--argent-ecran-12: rgba(236, 239, 241, 0.12);
--argent-ecran-15: rgba(236, 239, 241, 0.15);
--argent-ecran-20: rgba(236, 239, 241, 0.2);
--argent-ecran-25: rgba(236, 239, 241, 0.25);
--argent-ecran-80: rgba(236, 239, 241, 0.8);
/* ====================================================== */
/* DÉGRADÉS BLEUS STANDARDISÉS (contact-about)
====================================================== */
--degrade-bleu-nuit-intermediaire-95: linear-gradient(
135deg,
rgba(13, 27, 42, 0.95) 0%,
rgba(30, 52, 76, 0.95) 100%
);
--degrade-bleu-nuit-intermediaire-92-95: linear-gradient(
135deg,
rgba(13, 27, 42, 0.92) 0%,
rgba(27, 38, 59, 0.95) 100%
);
--degrade-bleu-nuit-intermediaire-70-80: linear-gradient(
135deg,
rgba(13, 27, 42, 0.7) 0%,
rgba(27, 38, 59, 0.8) 100%
);
--degrade-bleu-nuit-intermediaire-80: linear-gradient(
135deg,
rgba(13, 27, 42, 0.8) 0%,
rgba(27, 38, 59, 0.8) 100%
);
/* ====================================================== */
/* DÉGRADÉS DORÉS STANDARDISÉS (contact-about)
====================================================== */
--degrade-dore-20-10: linear-gradient(
135deg,
rgba(198, 166, 100, 0.2) 0%,
rgba(198, 166, 100, 0.1) 100%
);
--degrade-dore-10-05: linear-gradient(
135deg,
rgba(198, 166, 100, 0.1) 0%,
rgba(198, 166, 100, 0.05) 100%
);
/* ====================================================== */
/* TAGS / BADGES - Style Cards Films & Recettes
====================================================== */
/* Backgrounds translucides (style glassmorphism harmonisé avec icônes) */
--tag-bg-neutral: rgba(236, 239, 241, 0.15);
--tag-bg-neutral-hover: rgba(236, 239, 241, 0.25);
--tag-bg-accent: rgba(27, 38, 59, 0.7);
--tag-bg-accent-hover: rgba(27, 38, 59, 0.85);
--tag-bg-highlight: rgba(212, 168, 67, 0.9);
--tag-bg-highlight-hover: rgba(212, 168, 67, 1);
/* Bordures translucides */
--tag-border-light: rgba(255, 255, 255, 0.2);
--tag-border-light-hover: rgba(255, 255, 255, 0.35);
--tag-border-accent: rgba(212, 168, 67, 0.4);
--tag-border-accent-hover: rgba(212, 168, 67, 0.6);
/* Ombres pour tags */
--tag-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
--tag-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
--tag-shadow-highlight: 0 2px 8px rgba(212, 168, 67, 0.3);
--tag-shadow-highlight-hover: 0 4px 12px rgba(212, 168, 67, 0.5);
/* ====================================================== */
/* BOUTONS - Variables pour animations et hover
====================================================== */
/* Transitions */
--btn-transition-premium: all 0.3s ease;
/* Effets hover */
--btn-lift-hover: -2px;
--btn-scale-hover: 1.05;
--btn-border-radius: 10px;
/* Bouton Primary (doré) */
--btn-primary-bg: var(--dore-popcorn);
--btn-primary-text: var(--bleu-nuit);
--btn-primary-border: var(--dore-popcorn);
--btn-primary-shadow-hover: 0 4px 15px rgba(212, 168, 67, 0.45);
/* Bouton Hero (rouge → doré au hover) */
--btn-hero-bg: var(--rouge-projecteur);
--btn-hero-bg-hover: var(--dore-popcorn);
--btn-hero-text: var(--argent-ecran);
--btn-hero-text-hover: var(--bleu-nuit);
--btn-hero-border: var(--rouge-projecteur);
--btn-hero-border-hover: var(--dore-popcorn);
--btn-hero-glow: 0 0 10px rgba(194, 48, 24, 0.4);
--btn-hero-glow-hover: 0 0 15px rgba(212, 168, 67, 0.5);
/* ====================================================== */
/* COULEURS UTILITAIRES
====================================================== */
--gris-fonce-section: #f8f9fa;
--blanc-ecran: #ffffff;
/* ====================================================== */
/* VARIANTES D'OPACITÉ — SOURCE UNIQUE (ex contact-about.css)
====================================================== */
/* Bleu nuit */
--bleu-nuit-10: rgba(13, 27, 42, 0.1);
--bleu-nuit-20: rgba(13, 27, 42, 0.2);
--bleu-nuit-30: rgba(13, 27, 42, 0.3);
--bleu-nuit-40: rgba(13, 27, 42, 0.4);
--bleu-nuit-60: rgba(13, 27, 42, 0.6);
--bleu-nuit-70: rgba(13, 27, 42, 0.7);
--bleu-nuit-80: rgba(13, 27, 42, 0.8);
--bleu-nuit-92: rgba(13, 27, 42, 0.92);
--bleu-nuit-95: rgba(13, 27, 42, 0.95);
/* Bleu intermédiaire */
--bleu-intermediaire-20: rgba(27, 38, 59, 0.2);
--bleu-intermediaire-30: rgba(27, 38, 59, 0.3);
--bleu-intermediaire-40: rgba(27, 38, 59, 0.4);
--bleu-intermediaire-50: rgba(27, 38, 59, 0.5);
--bleu-intermediaire-80: rgba(27, 38, 59, 0.8);
--bleu-intermediaire-95: rgba(27, 38, 59, 0.95);
/* Doré popcorn */
--dore-popcorn-05: rgba(212, 168, 67, 0.05);
--dore-popcorn-10: rgba(212, 168, 67, 0.1);
--dore-popcorn-15: rgba(212, 168, 67, 0.15);
--dore-popcorn-20: rgba(212, 168, 67, 0.2);
--dore-popcorn-30: rgba(212, 168, 67, 0.3);
--dore-popcorn-35: rgba(212, 168, 67, 0.35);
--dore-popcorn-40: rgba(212, 168, 67, 0.4);
--dore-popcorn-50: rgba(212, 168, 67, 0.5);
--dore-popcorn-55: rgba(212, 168, 67, 0.55);
--dore-popcorn-60: rgba(212, 168, 67, 0.6);
--dore-popcorn-65: rgba(212, 168, 67, 0.65);
--dore-popcorn-75: rgba(212, 168, 67, 0.75);
--dore-popcorn-80: rgba(212, 168, 67, 0.8);
/* Rouge projecteur */
--rouge-projecteur-05: rgba(194, 48, 24, 0.05);
--rouge-projecteur-30: rgba(194, 48, 24, 0.3);
--rouge-projecteur-40: rgba(194, 48, 24, 0.4);
--rouge-projecteur-50: rgba(194, 48, 24, 0.5);
/* Ombres noires */
--ombre-noire-30: rgba(0, 0, 0, 0.3);
--ombre-noire-35: rgba(0, 0, 0, 0.35);
--ombre-noire-40: rgba(0, 0, 0, 0.4);
--ombre-noire-45: rgba(0, 0, 0, 0.45);
--ombre-noire-50: rgba(0, 0, 0, 0.5);
--ombre-noire-55: rgba(0, 0, 0, 0.55);
--ombre-noire-60: rgba(0, 0, 0, 0.6);
/* ====================================================== */
/* TYPOGRAPHIES
====================================================== */
--font-h1: "Playfair Display", serif;
--font-h2-h6: "Playfair Display", serif;
--font-body: "Lato", sans-serif;
/* Polices cinéma premium — disponibles sur toutes les pages */
--f-display:
"Bebas Neue", cursive; /* moodboard V3 — section-titles, compteurs, stats */
--f-title: "Cinzel", serif; /* moodboard V3 — cards, boutons pill/voir, nav */
--f-editorial:
"Playfair Display", serif; /* titres recettes, éditorial culinaire */
--f-body:
"Lato", sans-serif; /* moodboard V3 — corps de texte, descriptions */
/* ====================================================== */
/* TAILLES ET ESPACEMENTS
====================================================== */
--gap: 2rem;
--max-width: 1440px; /* legacy — gardé pour compatibilité */
--max-w: 1440px; /* largeur max conteneur (choix projet — moodboard: 1408px) */
--page-px: 64px; /* moodboard V3 — padding horizontal pages */
--cd-max: 1440px; /* container max-width — système global (source unique de vérité) */
--cd-px: 2rem; /* container gutter — padding horizontal responsive */
--nav-h: 70px; /* 68px + 2px border-top accent doré */
--card-r: 16px; /* moodboard V3 — border-radius cards */
/* ====================================================== */
/* PALETTE ENRICHIE V4 — Culinaire & Cinéma
====================================================== */
--caramel: #c97b3a; /* tags recettes · warm accent */
--cuivre: #b5622c; /* hover caramel · deep warm */
--terracotta: #a84e3a; /* difficulté · recettes piquantes */
--gris-ardoise: #8294a8; /* éléments neutres · métadata */
--violet-cinema: #6b4fa0; /* nouveautés · tags genre cinéma */
--violet-clair: #9b7ed0; /* badges NEW · glow cinéma */
--vert-valide: #2a7a50; /* statuts validés · success */
--vert-clair: #3daa72; /* vert léger */
--orange-ambre: #d4820a; /* statuts pending · tendance */
--orange-clair: #f0a030; /* trending badge */
/* Gradients V4 */
--violet-gradient: linear-gradient(
135deg,
#3d2870 0%,
#6b4fa0 55%,
#8b6dc0 100%
);
--caramel-gradient: linear-gradient(
135deg,
#8a4a18 0%,
#c97b3a 55%,
#e8a060 100%
);
/* ====================================================== */
/* TRANSITIONS ET ANIMATIONS
====================================================== */
--transition: 0.3s ease;
}
/* ====================================================== */
/* 2. UTILITAIRES MUTUALISÉS
====================================================== */
/* Refactoring : Classe .u-line-clamp-2 supprimée (non utilisée dans les vues) */
/* ====================================================== */
/* 3. RESET & TYPOGRAPHIE DE BASE
====================================================== */
/**
* Reset CSS de base
* -----------------
* Ce reset s'applique à TOUS les éléments (*) pour supprimer les styles
* par défaut du navigateur et avoir un contrôle total sur le rendu.
*
* *::before et *::after : Applique aussi aux pseudo-éléments
* (éléments générés par CSS, comme ::before et ::after)
*
* box-sizing: border-box : Inclut padding et border dans la largeur/hauteur
* (plus pratique pour les calculs de mise en page)
*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/**
* Configuration HTML
* ------------------
* scroll-behavior: smooth : Défilement fluide lors des ancres (#section)
* scroll-padding-top: 2rem : Espace en haut lors du scroll vers une ancre
* (évite que le titre soit masqué par un header fixe)
*/
html {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
overflow-x: hidden;
/* Couleur de fond réelle : le canvas dessine dessus,
html sert de filet de sécurité si JS désactivé */
background: #0d1b2a;
}
/**
* Style de base du body (conteneur principal)
*/
body {
font-family: var(--font-body);
overflow-x: hidden;
/* Fond transparent : le canvas fixe est le fond réel */
background-color: transparent;
/* isolation: isolate permet au canvas z-index:-1 de passer derrière */
isolation: isolate;
color: var(--argent-ecran);
line-height: 1.6;
max-width: var(--max-width);
margin: 0 auto;
padding: 2rem 1rem 0;
min-height: 100vh;
}
/* Canvas fond scintillant — fixe, plein écran, derrière tout */
#cinedelices-bg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
/* Grain pellicule — texture subtile par-dessus le canvas */
.grain {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.032;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
background-size: 256px;
}
/**
* Styles des titres (hiérarchie typographique)
* ---------------------------------------------
* Les titres utilisent des polices différentes selon leur niveau :
* - h1 : Police "Playfair Display" (style cinéma éditorial)
* - h2 à h6 : Police "Playfair Display" (hiérarchie par font-weight)
*
* margin-bottom: 0 ou négatif : Réduit l'espacement pour un rendu plus serré
* line-height: 1.1 : Interligne réduit pour les titres (évite trop d'espace)
*/
h1 {
font-family: var(--font-h1);
color: var(--or-titre);
font-size: 2.5rem;
font-weight: 900;
}
h2 {
font-family: var(--font-h2-h6);
color: var(--or-titre);
font-size: 2rem;
font-weight: 800;
margin-bottom: 0;
}
h3 {
font-family: var(--font-h2-h6);
color: var(--or-titre);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0;
line-height: 1.1;
}
h4,
h5,
h6 {
font-family: var(--font-h2-h6);
color: var(--or-titre);
font-weight: 600;
margin-bottom: -0.2rem;
line-height: 1.1;
}
/**
* Paragraphes
* -----------
* margin-bottom : Espacement minimal entre les paragraphes
*/
p {
margin-bottom: 0.5rem;
}
/**
* Liens (éléments )
* --------------------
* text-decoration: none : Supprime le soulignement par défaut
* transition : Animation fluide lors du changement de couleur
* (transition sur la propriété "color", durée définie dans --transition)
*
* :hover : État au survol de la souris (pseudo-classe)
*/
a {
color: var(--argent-ecran);
text-decoration: none;
transition: color var(--transition);
}
a:not([class]):hover {
color: var(--rouge-projecteur);
}
/* ====================================================== */
/* 4. HEADER & NAVIGATION
====================================================== */
/**
* Conteneur principal du header
* ------------------------------
* FLEXBOX : display: flex transforme le header en conteneur flexible
* - justify-content: space-between : Espace les éléments (logo à gauche, nav à droite)
* - align-items: center : Aligne verticalement au centre
* - flex-wrap: wrap : Permet le retour à la ligne si manque de place
* - gap: 1rem : Espacement entre les éléments flexibles
*
* max-width + margin: 0 auto : Centre le header et limite sa largeur
*/
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
max-width: 1360px;
margin: 0 auto;
}
.title {
font-size: 2.5rem;
font-weight: bold;
font-family: var(--font-h1);
display: flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
}
.title:hover .title-cine,
.title:hover .title-delices {
text-shadow: 0 0 10px currentColor;
}
.logo-header {
height: 3.5rem;
width: auto;
object-fit: contain;
display: block;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.logo-header:hover {
transform: scale(1.05) translateY(-2px);
}
.title-cine {
color: var(--rouge-projecteur);
}
.title-delices {
color: var(--dore-popcorn);
}
/**
* Navigation principale
* ---------------------
* FLEXBOX : Conteneur flexible pour aligner les liens de navigation horizontalement
*/
.navigationheader {
display: flex;
align-items: center;
gap: var(--gap);
}
/**
* Lien de navigation
* ------------------
* position: relative : Nécessaire pour positionner le ::after (soulignement animé)
* Le ::after sera positionné par rapport à cet élément (position: absolute)
*
* PSEUDO-ÉLÉMENT ::after :
* Crée un élément virtuel après le contenu du lien
* Utilisé ici pour créer une ligne de soulignement animée
* - content: "" : Obligatoire pour que ::after existe (même vide)
* - position: absolute : Positionné par rapport au parent (position: relative)
* - width: 0 initialement, passe à 100% au hover (animation)
*/
.navigationheader-link {
color: var(--argent-ecran);
font-weight: bold;
position: relative;
transition: color var(--transition);
}
.navigationheader-link::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(
90deg,
var(--dore-popcorn),
var(--rouge-projecteur)
);
transition: width var(--transition);
}
.navigationheader-link:hover {
color: var(--dore-popcorn);
}
.navigationheader-link:hover::after {
width: 100%;
}
/* Boutons Auth visibles dans le menu mobile uniquement */
.navigationheader-auth {
display: none;
}
@media (max-width: 800px) {
.navigationheader-auth {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
align-items: center;
margin-top: 0.5rem;
}
.navigationheader-auth .btn {
width: 80%;
text-align: center;
}
}
/* État actif de la navigation */
.navigationheader-link.is-active {
color: var(--dore-fonce);
text-shadow: 0 0 6px rgba(165, 131, 61, 0.25);
}
.buttons__header {
display: flex;
align-items: center;
gap: 1rem;
}
/* ====================================================== */
/* ICÔNES LUCIDE (SVG inline)
====================================================== */
/**
* Styles globaux pour les icônes Lucide SVG
* - Utilisées pour toutes les icônes fonctionnelles du site
* - Héritent de la couleur du texte via currentColor
*/
.lucide-icon {
width: 1.1rem;
height: 1.1rem;
display: inline-block;
vertical-align: middle;
stroke: currentColor;
flex-shrink: 0;
}
/* ====================================================== */
/* ICÔNES HEADER (Favoris ❤️ et Mon compte 👤)
====================================================== */
/**
* Icônes interactives du header
* - Favoris (cœur) : Accès rapide aux favoris
* - Mon compte (utilisateur) : Accès au profil
*/
.header-icon {
/* Reset complet pour les boutons */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
margin: 0;
font-family: inherit;
outline: none;
box-sizing: border-box;
/* Styles visuels */
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(
135deg,
rgba(198, 166, 100, 0.15),
rgba(198, 166, 100, 0.05)
);
border: 2px solid var(--dore-popcorn);
color: var(--dore-popcorn);
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
position: relative;
}
.header-icon:hover {
background: var(--dore-popcorn);
color: var(--bleu-nuit);
transform: scale(1.1);
box-shadow: 0 0 15px rgba(198, 166, 100, 0.5);
}
/* Icône Favoris (cœur) - État actif/hover rouge */
.header-icon:not(.header-icon--disabled):not(.header-icon--account):hover {
background: var(--rouge-projecteur);
border-color: var(--rouge-projecteur);
color: white;
box-shadow: 0 0 15px rgba(215, 38, 56, 0.5);
}
/* Icône Mon compte (utilisateur) - Style spécifique */
.header-icon--account {
background: linear-gradient(
135deg,
rgba(215, 38, 56, 0.15),
rgba(215, 38, 56, 0.05)
);
border-color: var(--rouge-projecteur);
color: var(--rouge-projecteur);
}
.header-icon--account:hover {
background: var(--rouge-projecteur);
border-color: var(--rouge-projecteur);
color: white;
box-shadow: 0 0 15px rgba(215, 38, 56, 0.5);
}
/* ── Nav badge-static (cadre gamification 64px) ── */
.nav-badge-trigger.header-icon--account:has(.nav-badge-static) {
background: transparent;
border: none;
padding: 0;
width: 64px;
height: 64px;
flex-shrink: 0;
overflow: visible;
}
.nav-badge-trigger.header-icon--account:has(.nav-badge-static):hover {
background: transparent;
border: none;
transform: none;
box-shadow: none;
}
.nav-badge-static {
position: relative;
width: 64px;
height: 64px;
display: block;
transition: transform 0.2s ease;
}
.nav-badge-trigger:hover .nav-badge-static {
transform: scale(1.1);
}
.nav-badge-trigger:active .nav-badge-static {
transform: scale(0.96);
}
.nav-badge-static__photo {
position: absolute;
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
object-position: center top;
top: 14px;
left: 14px;
z-index: 1;
/* Double anneau fin — or antique raffiné */
box-shadow:
0 0 0 1.5px #8b7030,
0 0 0 3px rgba(6, 8, 16, 0.75),
0 0 0 4.5px #72613b,
0 0 8px rgba(114, 97, 59, 0.25);
}
.nav-badge-static__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
/* Masquer l'anneau doré par défaut quand un cadre PNG est actif */
.nav-badge-static:has(.nav-badge-static__frame) .nav-badge-static__photo {
box-shadow: none;
}
/* Icône Connexion (mobile uniquement) - Style doré */
.header-icon--login {
background: linear-gradient(
135deg,
rgba(198, 166, 100, 0.15),
rgba(198, 166, 100, 0.05)
);
border-color: var(--dore-popcorn);
color: var(--dore-popcorn);
}
.header-icon--login:hover {
background: var(--dore-popcorn);
border-color: var(--dore-popcorn);
color: var(--bleu-nuit);
box-shadow: 0 0 15px rgba(198, 166, 100, 0.5);
}
/* Icône Inscription - Style rouge */
.header-icon--register {
background: linear-gradient(
135deg,
rgba(215, 38, 56, 0.15),
rgba(215, 38, 56, 0.05)
);
border-color: var(--rouge-projecteur);
color: var(--rouge-projecteur);
}
.header-icon--register:hover {
background: var(--rouge-projecteur);
border-color: var(--rouge-projecteur);
color: white;
box-shadow: 0 0 15px rgba(215, 38, 56, 0.5);
}
/* Icône désactivée (non connecté) */
.header-icon--disabled {
opacity: 0.5;
cursor: not-allowed;
border-style: dashed;
}
.header-icon--disabled:hover {
transform: none;
background: linear-gradient(
135deg,
rgba(198, 166, 100, 0.15),
rgba(198, 166, 100, 0.05)
);
color: var(--dore-popcorn);
box-shadow: none;
}
/* Label pour mobile (dans le menu burger) */
.header-icon__label {
display: none;
}
/* Style des icônes dans le menu mobile (icône-only, sans texte) */
@media (max-width: 800px) {
.navigationheader-auth .header-icon {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50%;
gap: 0;
}
.navigationheader-auth .header-icon__label {
display: none; /* Masqué : icônes uniquement dans le menu burger */
}
.navigationheader-auth .header-icon .lucide-icon {
width: 1.1rem;
height: 1.1rem;
}
}
/* ====================================================== */
/* DROPDOWN MON COMPTE (MOBILE - Menu Burger)
====================================================== */
.mobile-account-dropdown {
width: 100%;
display: none; /* Caché sur desktop */
}
@media (max-width: 800px) {
.mobile-account-dropdown {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.mobile-account-dropdown__trigger {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;
}
.mobile-account-dropdown__trigger .header-icon__label {
display: none; /* Masqué : icône uniquement */
}
.mobile-account-dropdown__arrow {
display: none; /* Masqué : pas de flèche en mode icône-only */
}
.mobile-account-dropdown.is-open .mobile-account-dropdown__arrow {
display: none;
}
/* Menu dropdown (style similaire au desktop) */
.mobile-account-dropdown__menu {
display: none;
flex-direction: column;
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
min-width: 180px;
background: linear-gradient(
135deg,
var(--bleu-intermediaire),
var(--bleu-nuit)
);
border: 1px solid rgba(198, 166, 100, 0.3);
border-radius: 12px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.4),
0 0 15px rgba(198, 166, 100, 0.1);
overflow: hidden;
z-index: 1000;
padding: 0;
}
.mobile-account-dropdown.is-open .mobile-account-dropdown__menu {
display: flex;
}
.mobile-account-dropdown__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.25rem;
color: var(--argent-ecran);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: transparent;
transition: all 0.2s ease;
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
}
.mobile-account-dropdown__item:last-child {
border-bottom: none;
}
.mobile-account-dropdown__item span {
display: inline; /* Afficher le texte */
}
.mobile-account-dropdown__item .lucide-icon {
width: 1rem;
height: 1rem;
color: var(--dore-popcorn);
}
.mobile-account-dropdown__item:hover,
.mobile-account-dropdown__item:active {
background: rgba(198, 166, 100, 0.1);
color: var(--dore-popcorn);
}
.mobile-account-dropdown__item--logout:hover,
.mobile-account-dropdown__item--logout:active {
background: rgba(215, 38, 56, 0.15);
color: var(--rouge-projecteur);
}
.mobile-account-dropdown__item--logout:hover .lucide-icon,
.mobile-account-dropdown__item--logout:active .lucide-icon {
color: var(--rouge-projecteur);
}
}
/* ====================================================== */
/* DROPDOWN UTILISATEUR (DESKTOP)
====================================================== */
/**
* Dropdown pour le menu utilisateur connecté
* Contient : Mon compte, Se déconnecter
*/
/* ══════════════════════════════════════════════════════
SYSTÈME DROPDOWN v4 — Moodboard Ciné Délices
Utilisé : header nav, filtres, tri
══════════════════════════════════════════════════════ */
/* ── Panel dropdown ── */
.dropdown {
background: rgba(10, 18, 30, 0.96);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(196, 160, 82, 0.18);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
padding: 8px;
min-width: 220px;
}
/* Liseré doré en haut du panel */
.dropdown__header {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(196, 160, 82, 0.35), transparent);
margin: 0 8px 6px;
}
/* Item de navigation */
.dropdown__item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 7px;
font-size: 0.72rem;
color: rgba(232, 232, 232, 0.62);
text-decoration: none;
transition: all 0.18s;
cursor: pointer;
/* reset bouton */
background: transparent;
border: none;
width: 100%;
font-family: inherit;
text-align: left;
}
.dropdown__item:hover { background: rgba(196, 160, 82, 0.08); color: var(--or-titre); }
.dropdown__item--active { background: rgba(196, 160, 82, 0.06); color: var(--or-titre); font-weight: 700; }
.dropdown__item--danger { color: rgba(232, 100, 80, 0.62); }
.dropdown__item--danger:hover { background: rgba(194, 48, 24, 0.12); color: #e84020; }
/* Pastille icône */
.dropdown__icon {
width: 22px; height: 22px;
border-radius: 6px;
background: rgba(196, 160, 82, 0.08);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.dropdown__icon svg { width: 0.78rem; height: 0.78rem; }
/* Séparateur */
.dropdown__sep {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 5px 8px;
}
/* ── Variante profil (utilisateur connecté) ── */
.dropdown--profil { min-width: 260px; }
.dropdown__user {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px 12px;
}
.dropdown__av {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(196, 160, 82, 0.12);
border: 1.5px solid rgba(196, 160, 82, 0.35);
display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.dropdown__av img { width: 100%; height: 100%; object-fit: cover; }
.dropdown__uname {
font-family: var(--f-title); font-size: 0.64rem; font-weight: 600;
color: var(--argent-ecran);
}
.dropdown__ulvl {
font-size: 0.62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px;
color: rgba(196, 160, 82, 0.55); margin-top: 2px;
}
/* ── Variante filtres films (thème violet) ── */
.dropdown--films { border-color: rgba(107, 79, 160, 0.35); }
.dropdown--films .dropdown__header { background: linear-gradient(90deg, transparent, rgba(107, 79, 160, 0.45), transparent); }
.dropdown--films .dropdown__cat { padding: 6px 12px; font-family: var(--f-title); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(155, 126, 208, 0.55); }
.dropdown--films .dropdown__check:hover { background: rgba(107, 79, 160, 0.08); color: rgba(185, 160, 232, 0.95); }
.dropdown--films .dropdown__check.checked .dropdown__check-box { background: rgba(107, 79, 160, 0.88); border-color: rgba(107, 79, 160, 0.88); color: #fff; }
.dropdown--films .dropdown__check.checked { color: rgba(185, 160, 232, 0.95); }
/* ── Variante filtres recettes (thème caramel) ── */
.dropdown--recettes { border-color: rgba(201, 123, 58, 0.35); }
.dropdown--recettes .dropdown__header { background: linear-gradient(90deg, transparent, rgba(201, 123, 58, 0.45), transparent); }
.dropdown--recettes .dropdown__cat { padding: 6px 12px; font-family: var(--f-title); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201, 123, 58, 0.58); }
.dropdown--recettes .dropdown__check:hover { background: rgba(201, 123, 58, 0.08); color: rgba(235, 165, 90, 0.95); }
.dropdown--recettes .dropdown__check.checked .dropdown__check-box { background: var(--caramel); border-color: var(--caramel); color: #fff; }
.dropdown--recettes .dropdown__check.checked { color: rgba(235, 165, 90, 0.95); }
/* ── Checkbox items (filtres) ── */
.dropdown--filtres { min-width: 200px; }
.dropdown__check {
display: flex; align-items: center; gap: 9px;
padding: 8px 12px; border-radius: 7px;
font-size: 0.68rem; color: rgba(232, 232, 232, 0.55);
cursor: pointer; transition: all 0.18s;
/* reset bouton */
background: transparent; border: none;
width: 100%; font-family: inherit; text-align: left;
}
.dropdown__check:hover { background: rgba(196, 160, 82, 0.06); color: rgba(232, 232, 232, 0.85); }
.dropdown__check-box {
width: 14px; height: 14px;
border-radius: 3px; border: 1.5px solid rgba(196, 160, 82, 0.30);
background: transparent; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 0.68rem;
}
.dropdown__check.checked .dropdown__check-box { background: var(--or-titre); border-color: var(--or-titre); color: var(--bleu-nuit); }
.dropdown__cat { padding: 6px 12px; font-family: var(--f-title); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(196, 160, 82, 0.45); }
/* ── Trigger bouton déclencheur ── */
.dropdown-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 0 14px; height: 38px; border-radius: 10px;
font-family: var(--f-title); font-size: 0.58rem; font-weight: 600;
letter-spacing: 0.10em; text-transform: uppercase;
border: 1.5px solid rgba(196, 160, 82, 0.32);
background: rgba(10, 18, 30, 0.72);
color: rgba(196, 160, 82, 0.75);
cursor: pointer; transition: all 0.22s;
backdrop-filter: blur(10px);
}
.dropdown-trigger:hover { border-color: rgba(196, 160, 82, 0.65); color: var(--or-titre); background: rgba(196, 160, 82, 0.06); }
.dropdown-trigger svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.dropdown-trigger .dt-arrow { font-size: 0.68rem; opacity: 0.55; transition: transform 0.22s; line-height: 1; }
.dropdown-trigger.is-open .dt-arrow { transform: rotate(180deg); }
.dropdown-trigger .dt-badge { background: var(--or-titre); color: var(--bleu-nuit); font-size: 0.62rem; padding: 1px 5px; border-radius: 3px; font-weight: 800; }
/* ── Wrapper positionnel (contexte de positionnement du panel) ── */
.user-dropdown {
position: relative;
display: inline-block;
}
.user-dropdown__trigger { font: inherit; }
/* Panel positionné dans le contexte nav */
.user-dropdown .dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
z-index: 1000;
}
.user-dropdown.is-open .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Trigger ouvert — badge gamification : pas d'effet */
.user-dropdown.is-open .user-dropdown__trigger:has(.nav-badge-static) {
background: transparent;
border: none;
box-shadow: none;
}
/* Séparateur nav legacy */
.nav-dd-sep {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 5px 8px;
}
/* ── Wrapper positionnel pour dropdowns inline (filtres, tri) ── */
.dd-filter-wrap {
position: relative;
display: inline-block;
}
.dd-filter-wrap .dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 200;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}
.dd-filter-wrap.is-open .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/**
* Menu burger (icône hamburger pour mobile)
* ------------------------------------------
* Note : Styles de base pour le burger menu. Les styles avancés (z-index, body.menu-open, etc.)
* sont définis dans burger-menu.css qui est chargé après base.css
*
* display: none par défaut : Caché sur desktop
* flex-direction: column : Les 3 lignes empilées verticalement
* gap: 5px : Espacement entre les lignes
*
* SÉLECTEUR .burger-menu.active .burger-line:nth-child(n) :
* Quand .burger-menu a la classe "active", on transforme chaque ligne :
* - 1ère ligne : Rotation 45° + translation vers le bas (devient /)
* - 2ème ligne : Opacité 0 (disparaît)
* - 3ème ligne : Rotation -45° + translation vers le haut (devient \)
* Résultat : Transformation en "X" (fermeture)
*/
.burger-menu {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.burger-line {
width: 28px;
height: 3px;
background-color: var(--dore-popcorn);
border-radius: 12px;
transition: all 0.3s ease;
}
.burger-menu.active .burger-line:nth-child(1) {
transform: rotate(45deg) translateY(8px);
}
.burger-menu.active .burger-line:nth-child(2) {
opacity: 0;
}
.burger-menu.active .burger-line:nth-child(3) {
transform: rotate(-45deg) translateY(-8px);
}
/**
* Menu mobile responsive
* ----------------------
* MEDIA QUERY : @media (max-width: 800px)
* Les styles à l'intérieur s'appliquent UNIQUEMENT si la largeur de l'écran ≤ 800px
* (tablettes et smartphones)
*
* POSITION: FIXED :
* Le menu navigation est fixé par rapport à la fenêtre (pas au document)
* - top: 0 : En haut de l'écran
* - right: -100% : Complètement à droite (hors de l'écran, donc caché)
* - height: 100vh : Hauteur = 100% de la hauteur de l'écran
* - z-index: 1000 : Au-dessus des autres éléments (ordre d'empilement)
*
* ANIMATION :
* transition: right 0.4s : Animation fluide du déplacement
* cubic-bezier : Courbe d'animation personnalisée (effet rebond)
*
* ÉTAT ACTIF :
* .navigationheader.active { right: 0; } : Fait apparaître le menu (glisse depuis la droite)
*/
@media (max-width: 800px) {
/* Masquer les boutons Connexion/Inscription car ils sont dans le menu burger */
.buttons__header {
display: none;
}
/* Agrandir le logo en mode mobile */
.logo-header {
height: 4rem;
}
/* Agrandir le texte du logo */
.title {
font-size: 2.2rem;
}
.title-cine,
.title-delices {
font-size: 2.2rem;
}
.burger-menu {
display: flex;
}
.navigationheader {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 70%;
max-width: 300px;
background: linear-gradient(
135deg,
var(--bleu-nuit),
var(--bleu-intermediaire)
);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
z-index: 1000;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}
.navigationheader.active {
right: 0;
}
}
/* ====================================================== */
/* 5. BOUTONS - Design System Ultra Premium
====================================================== */
/**
* Boutons Premium Ciné Délices
* ----------------------------
* Design system avec effets WOW : shimmer, glow, liseré pointillé
* Palette : Gold, Red, Velvet, Sapphire, Copper, Silver
*/
/* ========== BASE BUTTON — Moodboard V2.1 ========== */
.btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1.25rem;
border-radius: 8px;
border: none;
cursor: pointer;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.3px;
text-decoration: none;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
isolation: isolate;
user-select: none;
white-space: nowrap;
}
.btn__text {
position: relative;
z-index: 1;
}
.btn svg,
.btn .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
position: relative;
z-index: 1;
transition:
transform 0.25s ease,
filter 0.25s ease;
}
/* Shimmer effect */
.btn__shimmer {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
z-index: 2;
transition: left 0.6s ease;
}
/* ========== HOVER EFFECTS COMMUNS ========== */
.btn:hover:not(:disabled) {
transform: translateY(-1px);
}
.btn:hover:not(:disabled) .btn__shimmer {
left: 100%;
}
.btn:hover:not(:disabled) svg,
.btn:hover:not(:disabled) .icon {
transform: scale(1.1);
}
.btn:active:not(:disabled) {
transform: translateY(0);
transition-duration: 0.1s;
}
.btn:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* ========== BOUTON COMPACT ========== */
.btn--sm {
font-size: 0.7rem; /* moodboard V3 (était 0.78rem) */
padding: 0.38rem 0.85rem; /* moodboard V3 (était 0.4rem) */
gap: 0.35rem;
}
.btn--sm svg,
.btn--sm .icon {
width: 14px;
height: 14px;
}
/* ========== BOUTON FULL WIDTH ========== */
.btn--full {
width: 100%;
justify-content: center;
}
/* ========== BOUTON LARGE — Cinzel uppercase ========== */
/* Usage : CTAs hero, sections communauté, formulaires importants */
.btn--lg {
font-size: 0.72rem;
padding: 0 32px;
height: 52px;
border-radius: 10px;
font-family: var(--f-title);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ========== BOUTON PRIMARY — Or Moodboard V2.1 ========== */
.btn--primary {
background: var(--gold-gradient);
color: #1c1404;
box-shadow:
0 2px 10px rgba(184, 136, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover:not(:disabled) {
background: var(--gold-gradient-hover);
color: #1c1404;
box-shadow: 0 6px 24px rgba(212, 168, 67, 0.38);
}
.btn--primary:hover:not(:disabled) svg,
.btn--primary:hover:not(:disabled) .icon {
filter: drop-shadow(0 0 6px rgba(28, 20, 4, 0.5));
}
/* ========== BOUTON RED — Rouge Moodboard V2.1 ========== */
.btn--red {
background: linear-gradient(
135deg,
#8c1c13 0%,
#c23018 45%,
#e84020 75%,
#c23018 100%
);
color: #fff;
box-shadow: 0 3px 12px rgba(194, 48, 24, 0.28);
}
.btn--red:hover:not(:disabled) {
box-shadow: 0 6px 20px rgba(194, 48, 24, 0.52);
}
.btn--google {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.55rem;
background: #fff;
color: #3c4043;
border: 1.5px solid #dadce0;
font-weight: 500;
letter-spacing: 0;
}
.btn--google:hover:not(:disabled) {
background: #f8f9fa;
border-color: #c6c6c6;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.btn--google svg {
flex-shrink: 0;
display: block;
}
/* ── Shimmer bordure or — utilisé sur film-card et recipe/recette-card ── */
/* Technique background-clip: le 2e background (border-box = bordure) glisse en boucle */
@keyframes shimmer-gold-border {
0%,
100% {
background-position:
0 0,
0% 50%;
}
50% {
background-position:
0 0,
100% 50%;
}
}
/* ========== BOUTON GHOST - Contour blanc sobre (moodboard V3) ========== */
/* Usage : "En savoir plus", section communauté, CTA secondaire hero */
.btn--ghost {
background: transparent;
border: 1.5px solid rgba(232, 232, 232, 0.18);
color: rgba(232, 232, 232, 0.55);
font-family: var(--f-title);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.btn--ghost:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(232, 232, 232, 0.42);
color: rgba(232, 232, 232, 0.88);
transform: translateY(-1px);
}
/* ========== BOUTON PILL — Cinzel capsule dorée ========== */
/* Usage : "Tous les films", "Voir tous", liens de section, pagination */
.btn--pill {
background: transparent;
border: 1.5px solid rgba(196, 160, 82, 0.45);
color: var(--or-titre);
font-family: var(--f-title);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 0.44rem 1.15rem;
border-radius: 100px;
}
.btn--pill:hover:not(:disabled) {
background: var(--or-titre);
border-color: var(--or-titre);
color: var(--bleu-nuit);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(196, 160, 82, 0.32);
}
/* ========== BOUTON VOIR — Outline minimal Cinzel ========== */
/* Usage : Top 3 cards, listes films/recettes, CTA discrets */
.btn--voir {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 16px;
height: 32px;
border-radius: 7px;
background: transparent;
border: 1.5px solid rgba(196, 160, 82, 0.3);
font-family: var(--f-title);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--or-titre);
text-decoration: none;
transition: all 0.25s ease;
cursor: pointer;
}
.btn--voir:hover:not(:disabled) {
background: rgba(196, 160, 82, 0.09);
border-color: rgba(196, 160, 82, 0.72);
color: var(--dore-clair);
transform: translateY(-1px);
}
/* ====================================================== */
/* 6. TAGS / BADGES - Design System Ultra Premium
====================================================== */
/**
* Tags et Badges Premium Ciné Délices
* ------------------------------------
* Style ticket premium avec liseré pointillé intérieur
* Palette complète : Gold, Red, Velvet, Sapphire, Copper, Silver
*/
/* ========== BASE BADGE (Outline Style - CodePen v2) ========== */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.22rem 0.55rem;
font-family: var(--f-title);
font-size: 0.58rem;
font-weight: 700;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
transition: transform 0.3s ease;
white-space: nowrap;
color: currentColor;
border: 1px solid transparent;
}
.badge svg {
flex-shrink: 0;
width: 10px;
height: 10px;
}
/* Badge Gold - Outline */
.badge--gold {
color: var(--gold);
background-color: rgba(212, 168, 67, 0.14);
}
/* Badge Red - Outline */
.badge--red {
color: var(--red);
background-color: rgba(194, 48, 24, 0.14);
}
/* Badge Velvet (Vert) - Outline */
.badge--velvet,
.badge--green {
color: var(--velvet-light);
background-color: rgba(6, 95, 70, 0.15);
}
/* Badge Sapphire (Bleu) - Outline */
.badge--sapphire,
.badge--blue {
color: var(--sapphire-light);
background-color: rgba(3, 105, 161, 0.15);
}
/* Badge Copper - Outline */
.badge--copper {
color: var(--copper);
background-color: rgba(217, 119, 6, 0.15);
}
/* Badge Silver - Outline */
.badge--silver {
color: var(--silver);
background-color: rgba(100, 116, 139, 0.15);
}
/* Badge Burgundy - Style Velours Premium */
.badge--burgundy {
background: linear-gradient(135deg, var(--burgundy-dark), var(--burgundy));
color: var(--text-light);
box-shadow: 0 2px 8px var(--burgundy-glow);
}
/* Badge Outline - Style Doré Transparent */
.badge--outline {
background: transparent;
border: 1px solid var(--dore-popcorn);
color: var(--dore-popcorn);
}
/* Badge Count - Style Compteur Circulaire */
.badge--count {
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.4rem;
border-radius: 50%;
font-size: 0.65rem;
}
/* Badge Small */
.badge--sm {
padding: 0.2rem 0.5rem;
font-size: 0.68rem;
border-radius: 4px;
}
.badge--sm svg {
width: 8px;
height: 8px;
}
/* ========== BADGES FILLED (Variantes spéciales) ========== */
/* Badge Nouveau - Style Saphir Premium (Filled) */
.badge--new {
background: linear-gradient(
135deg,
var(--sapphire-dark),
var(--sapphire),
var(--sapphire-light)
);
color: var(--text-light);
border: none;
}
/* Badge Populaire - Style Rouge Projecteur Premium (Filled) */
.badge--popular {
background: linear-gradient(
135deg,
var(--red-dark),
var(--red),
var(--red-light)
);
color: var(--text-light);
border: none;
}
/* Liseré intérieur pour badges filled */
.badge--new::after,
.badge--popular::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 4px;
border: 1px dashed currentColor;
opacity: 0.25;
pointer-events: none;
}
/* ========== BASE TAG ========== */
.tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.65rem;
font-family: var(--f-title);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
border-radius: 5px;
border: 1px solid transparent;
position: relative;
transition: transform 0.25s ease;
white-space: nowrap;
}
.tag svg {
flex-shrink: 0;
width: 11px;
height: 11px;
}
/* Liseré intérieur pointillé */
.tag::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 4px;
border: 1px dashed currentColor;
opacity: 0.2;
pointer-events: none;
}
/* Tag Gold */
.tag--gold {
background: linear-gradient(135deg, var(--gold-dark), var(--gold));
color: var(--text-dark);
}
/* Tag Red */
.tag--red {
background: linear-gradient(135deg, var(--red-dark), var(--red));
color: var(--text-light);
}
/* Tag Velvet (Vert) */
.tag--velvet,
.tag--green {
background: linear-gradient(135deg, var(--velvet-dark), var(--velvet));
color: var(--gold-light);
}
.tag--velvet::after,
.tag--green::after {
border-color: var(--gold-light);
}
/* Tag Sapphire (Bleu) */
.tag--sapphire,
.tag--blue {
background: linear-gradient(135deg, var(--sapphire-dark), var(--sapphire));
color: var(--text-light);
}
/* Tag Copper */
.tag--copper {
background: linear-gradient(135deg, var(--copper-dark), var(--copper));
color: var(--text-dark);
}
/* Tag Silver */
.tag--silver {
background: linear-gradient(135deg, var(--silver-dark), var(--silver));
color: var(--text-light);
}
/* ========== TAGS OUTLINE ========== */
.tag--gold-outline {
background: rgba(198, 166, 100, 0.1);
color: var(--gold);
box-shadow: inset 0 0 0 1.5px var(--gold);
}
.tag--gold-outline::after {
display: none;
}
.tag--red-outline {
background: rgba(215, 38, 56, 0.1);
color: var(--red);
box-shadow: inset 0 0 0 1.5px var(--red);
}
.tag--red-outline::after {
display: none;
}
.tag--velvet-outline,
.tag--green-outline {
background: rgba(6, 95, 70, 0.15);
color: var(--velvet-light);
box-shadow: inset 0 0 0 1.5px var(--velvet);
}
.tag--velvet-outline::after,
.tag--green-outline::after {
display: none;
}
.tag--sapphire-outline,
.tag--blue-outline {
background: rgba(3, 105, 161, 0.1);
color: var(--sapphire-light);
box-shadow: inset 0 0 0 1.5px var(--sapphire);
}
.tag--sapphire-outline::after,
.tag--blue-outline::after {
display: none;
}
/* ====================================================== */
/* ====== CINEMA PALETTE TAGS — CodePen style ========== */
/* ====================================================== */
/**
* Palette semi-transparente pour les tags cinéma premium.
* Fond foncé + bordure colorée + texte coloré — esprit ticket de cinéma.
* Remplacent les gradients solides sur les pages films & recettes.
*
* Usage HTML : Drame
*/
/* Base override — proportions CodePen (plus petits et plus fins que .tag base) */
.tag--or,
.tag--bleu,
.tag--rouge,
.tag--vert,
.tag--gris {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 3px;
border: 1px solid;
line-height: 1;
transition:
background 0.2s,
border-color 0.2s;
}
/* Supprime le liseré pointillé interne hérité du .tag base */
.tag--or::after,
.tag--bleu::after,
.tag--rouge::after,
.tag--vert::after,
.tag--gris::after {
display: none;
}
/* Or — Doré cinéma (cuisine dorée, difficulté moyenne, recettes signatures) */
.tag--or {
background: rgba(58, 42, 12, 0.55);
border-color: rgba(200, 168, 78, 0.28);
color: #cca84e;
}
.tag--or:hover {
background: rgba(58, 42, 12, 0.9);
border-color: rgba(200, 168, 78, 0.55);
}
/* Bleu — Saphir nuit (genres, catégories, infos) */
.tag--bleu {
background: rgba(14, 22, 48, 0.55);
border-color: rgba(80, 120, 200, 0.28);
color: rgba(140, 175, 235, 0.95);
}
.tag--bleu:hover {
background: rgba(14, 22, 48, 0.9);
border-color: rgba(80, 120, 200, 0.5);
}
/* Rouge — Velours projecteur (difficile, attention, nouveau) */
.tag--rouge {
background: rgba(50, 12, 20, 0.55);
border-color: rgba(160, 32, 60, 0.32);
color: rgba(215, 80, 105, 0.95);
}
.tag--rouge:hover {
background: rgba(50, 12, 20, 0.9);
border-color: rgba(160, 32, 60, 0.55);
}
/* Vert — Pellicule (facile, validé, succès) */
.tag--vert {
background: rgba(10, 32, 18, 0.55);
border-color: rgba(40, 110, 65, 0.3);
color: rgba(100, 185, 130, 0.95);
}
.tag--vert:hover {
background: rgba(10, 32, 18, 0.9);
border-color: rgba(40, 110, 65, 0.55);
}
/* Gris — Argent (neutre, tags secondaires) */
.tag--gris {
background: rgba(28, 34, 52, 0.55);
border-color: rgba(80, 95, 130, 0.25);
color: rgba(130, 148, 185, 0.88);
}
.tag--gris:hover {
background: rgba(28, 34, 52, 0.9);
border-color: rgba(80, 95, 130, 0.5);
}
/* ====================================================== */
/* ====== SECTION-HEADER — Composant global ============= */
/* ====================================================== */
/**
* En-tête de section : [Titre]──────[Meta]
* Utilise Bebas Neue pour l'impact cinématographique.
*
* Usage HTML :
*
*/
.section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 1.5rem;
}
.section-title {
font-family: var(--f-display, "Bebas Neue", cursive);
font-size: 1.6rem;
font-weight: 400; /* Bebas Neue est déjà ultra-condensé */
letter-spacing: 3px;
color: var(--argent-ecran);
white-space: nowrap;
margin-bottom: 0;
line-height: 1;
}
.section-title .highlight {
color: var(--dore-popcorn);
}
.section-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(196, 160, 82, 0.35), transparent);
}
.section-meta {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(196, 160, 82, 0.65);
white-space: nowrap;
}
/* ====================================================== */
/* 7. FORMULAIRES & INPUTS
====================================================== */
.input-container {
position: relative;
width: 100%;
margin-bottom: 1.5rem;
}
.input-container input,
.input-container textarea {
width: 100%;
padding: 1.5rem 0.75rem 1rem 0.75rem;
border-radius: 12px;
border: 2px solid var(--jaune-blond);
background-color: #fff;
font-family: var(--font-body);
font-size: 14px;
color: var(--bleu-nuit);
outline: none;
transition: all var(--transition);
}
.input-container textarea {
resize: vertical;
min-height: 120px;
}
.input-container input::placeholder,
.input-container textarea::placeholder {
color: var(--bleu-secondaire);
opacity: 1;
}
.input-container label {
position: absolute;
top: 1.3rem;
left: 0.75rem;
font-size: 0.95rem;
color: var(--bleu-secondaire);
background-color: transparent;
padding: 0 0.25rem;
pointer-events: none;
transition: all 0.3s ease;
z-index: 1;
}
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label,
.input-container textarea:focus + label,
.input-container textarea:not(:placeholder-shown) + label {
top: -0.5rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--argent-ecran);
background-color: var(--dore-popcorn);
padding: 0 0.5rem;
border-radius: 12px;
}
.input-container input:focus,
.input-container textarea:focus {
border-color: var(--dore-fonce);
box-shadow: 0 4px 12px rgba(198, 166, 100, 0.4);
}
.form-standard {
display: flex;
flex-direction: column;
gap: 1rem;
}
.error {
color: var(--rouge-projecteur);
font-size: 0.9em;
display: none; /* caché par défaut */
}
/* ── Système formulaires Moodboard V3 (coexiste avec .input-container legacy) ── */
.form-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 480px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-family: var(--f-title);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(196, 160, 82, 0.55);
}
.form-input {
width: 100%;
background: rgba(15, 26, 42, 0.88);
border: 1.5px solid rgba(196, 160, 82, 0.22);
border-radius: 10px;
padding: 12px 16px;
font-family: var(--f-body);
font-size: 0.88rem;
font-weight: 300;
color: var(--argent);
outline: none;
transition:
border-color 0.22s,
box-shadow 0.22s;
}
.form-input:focus {
border-color: rgba(196, 160, 82, 0.58);
box-shadow: 0 0 0 3px rgba(196, 160, 82, 0.08);
}
.form-input::placeholder {
color: rgba(232, 232, 232, 0.22);
}
.form-input--error {
border-color: rgba(194, 48, 24, 0.55);
}
.form-input--error:focus {
box-shadow: 0 0 0 3px rgba(194, 48, 24, 0.08);
}
.form-hint {
font-size: 0.68rem;
color: rgba(232, 232, 232, 0.32);
}
.form-hint--error {
color: rgba(232, 100, 80, 0.75);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(196,160,82,0.5)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
/* ====================================================== */
/* 8. FOOTER - Style Cinématographique
====================================================== */
/**
* Conteneur principal du footer
* ------------------------------
* position: relative : Permet de positionner le ::before en absolute
* box-shadow avec inset : Ombre interne (effet de profondeur)
* - Ombre externe : 0 -4px 20px (ombre vers le haut)
* - Ombre interne : inset 0 1px 0 (lueur légère en haut)
*/
.footer {
display: flex;
flex-direction: column;
padding: 3.5rem 2rem 0;
color: var(--dore-popcorn);
gap: 1rem;
font-size: 0.9rem;
font-family: var(--font-body);
margin-top: 4rem;
position: relative;
}
/**
* Effet de dégradé en haut du footer (pseudo-élément)
* ----------------------------------------------------
* ::before : Crée un élément virtuel avant le contenu du footer
* linear-gradient : Dégradé linéaire (transparent → doré → transparent)
* - 90deg : Direction horizontale (de gauche à droite)
* - Pourcentages : Points de transition dans le dégradé
*/
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(198, 166, 100, 0.5) 30%,
rgba(198, 166, 100, 0.5) 70%,
transparent 100%
);
}
.footer-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 3rem;
position: relative;
z-index: 1;
}
/* Logo et slogan */
.footer-left {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-logo-container {
display: flex;
align-items: center;
gap: 0.75rem;
}
.footer-logo {
height: 3rem;
width: auto;
object-fit: contain;
}
.footer-logo-text {
font-family: var(--font-h1);
font-size: 2rem;
display: flex;
gap: 0.3rem;
}
.footer-logo-text .cine {
color: var(--rouge-projecteur);
}
.footer-logo-text .delices {
color: var(--dore-popcorn);
}
.footer-slogan {
font-size: 0.9rem;
font-weight: 600;
color: var(--argent-ecran);
opacity: 0.9;
line-height: 1.5;
max-width: 300px;
}
/* Navigation et réseaux sociaux */
.footer-right {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-end;
}
.footer-menu {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2rem;
}
.footer-menu-link {
color: var(--argent-ecran);
font-weight: 600;
text-decoration: none;
position: relative;
transition: all var(--transition);
padding: 0.3rem 0;
}
.footer-menu-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(
90deg,
var(--dore-popcorn),
var(--rouge-projecteur)
);
transition: width var(--transition);
box-shadow: 0 0 8px var(--dore-popcorn);
}
.footer-menu-link:hover {
color: var(--dore-popcorn);
text-shadow: 0 0 8px rgba(198, 166, 100, 0.5);
}
.footer-menu-link:hover::after {
width: 100%;
}
.footer-socials {
display: flex;
gap: 1.5rem;
font-weight: bold;
}
.footer-social-link {
color: var(--dore-popcorn);
text-decoration: none;
padding: 0.5rem 0.9rem;
border: 1px solid var(--dore-popcorn);
border-radius: 999px;
transition: all var(--transition);
position: relative;
overflow: hidden;
background: rgba(198, 166, 100, 0.1);
}
.footer-social-link i {
font-size: 0.95rem;
}
.footer-social-link::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(198, 166, 100, 0.2),
transparent
);
transition: left 0.5s ease;
}
.footer-social-link:hover {
color: var(--rouge-projecteur);
border-color: var(--rouge-projecteur);
background: rgba(215, 38, 56, 0.15);
box-shadow:
0 0 15px rgba(215, 38, 56, 0.4),
inset 0 0 10px rgba(215, 38, 56, 0.1);
transform: translateY(-2px);
}
.footer-social-link:hover::before {
left: 100%;
}
/* Ligne de séparation cinématographique */
.footer-divider {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--dore-popcorn) 20%,
var(--gold-popcorn) 50%,
var(--dore-popcorn) 80%,
transparent 100%
);
box-shadow: 0 0 8px rgba(198, 166, 100, 0.3);
margin: 0.5rem 0 0.25rem 0;
opacity: 0.6;
}
/* Bas de footer: copyright + retour haut */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.back-to-top {
color: var(--argent-ecran);
text-decoration: none;
border: 1px solid var(--dore-popcorn);
border-radius: 999px;
padding: 0.25rem 0.6rem;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.back-to-top:hover {
background-color: var(--dore-popcorn);
color: var(--bleu-nuit);
box-shadow: 0 0 10px rgba(198, 166, 100, 0.5);
}
.footer-copyright {
text-align: right;
color: var(--dore-popcorn);
font-size: 0.85rem;
margin: 0;
padding: 0;
}
/* ====================================================== */
/* 9. MODAL AUTH (Popup de connexion/inscription)
====================================================== */
/**
* Conteneur de la modal (fenêtre popup)
* --------------------------------------
* position: fixed : Fixé par rapport à la fenêtre (reste visible au scroll)
* - top: 0, left: 0 : En haut à gauche de l'écran
* - width: 100%, height: 100% : Couvre tout l'écran
* z-index: 2000 : Très élevé pour être au-dessus de tout (header, footer, etc.)
* display: none par défaut : Modal cachée
* display: flex quand .active : Modal visible, centrée avec flexbox
*/
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
}
.modal.active {
display: flex;
}
/**
* Overlay (fond sombre derrière la modal)
* ----------------------------------------
* position: absolute : Positionné par rapport au .modal (parent avec position: fixed)
* backdrop-filter: blur(3px) : Floute le contenu derrière (effet glassmorphism)
*/
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(13, 27, 42, 0.8);
backdrop-filter: blur(3px);
}
/**
* Contenu de la modal (la fenêtre elle-même)
* -------------------------------------------
* position: relative : Permet de positionner d'autres éléments (bouton fermer) en absolute
* animation: modalShowPop : Animation d'apparition (définie avec @keyframes)
*/
.modal-content {
position: relative;
background: var(--bleu-intermediaire);
padding: 1.5rem 1.75rem 1.75rem;
border-radius: 12px;
width: 90%;
max-width: 400px;
max-height: 88vh;
overflow-y: auto;
overflow-x: hidden;
color: var(--argent-ecran);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
animation: modalShowPop 0.3s ease-out;
scrollbar-width: thin;
scrollbar-color: rgba(196, 160, 82, 0.3) transparent;
}
.modal-content::-webkit-scrollbar {
width: 4px;
}
.modal-content::-webkit-scrollbar-track {
background: transparent;
}
.modal-content::-webkit-scrollbar-thumb {
background: rgba(196, 160, 82, 0.35);
border-radius: 4px;
}
/**
* Animation d'apparition de la modal
* -----------------------------------
* @keyframes : Définit une animation nommée "modalShowPop"
* - from (0%) : État initial (plus petit, décalé vers le haut, invisible)
* - to (100%) : État final (taille normale, position normale, visible)
*
* transform: scale(0.95) : Réduit la taille à 95%
* translateY(-10px) : Décale vers le haut de 10px
* transition fluide vers scale(1) translateY(0) : Retour à la taille et position normales
*/
@keyframes modalShowPop {
from {
transform: scale(0.95) translateY(-10px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
@keyframes modalHidePop {
from {
transform: scale(1) translateY(0);
opacity: 1;
}
to {
transform: scale(0.95) translateY(-10px);
opacity: 0;
}
}
.modal.fade-out .modal-content {
animation: modalHidePop 0.3s forwards;
}
.modal-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(--argent-ecran);
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
z-index: 10;
}
.modal-close:hover {
background: rgba(196, 160, 82, 0.15);
border-color: rgba(196, 160, 82, 0.4);
color: var(--dore-popcorn);
transform: scale(1.08);
}
.auth-form {
display: none;
}
.auth-form.active {
display: block;
animation: fadeIn 0.3s ease;
}
.auth-form__hint {
margin: 0 0 1rem;
padding: 0.5rem 0.75rem;
border-left: 3px solid var(--or-cinema, #c9a84c);
background: rgba(201, 168, 76, 0.08);
color: var(--or-cinema, #c9a84c);
font-size: 0.82rem;
border-radius: 0 6px 6px 0;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-content input {
width: 100%;
padding: 0.55rem 0.8rem;
margin-bottom: 0.45rem;
border-radius: 12px;
border: 1px solid var(--argent-ecran);
background: var(--bleu-nuit);
color: var(--argent-ecran);
font-family: var(--font-body);
transition:
border-color 0.3s,
background 0.3s;
}
/* Prénom + Nom côte à côte — économise un champ complet de hauteur */
.modal-content .form-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0;
}
/* Help text repositionné AU-DESSUS de l'input via order (sans modifier le HTML) */
.modal-content .form-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.modal-content .help {
order: -1;
display: block;
font-size: 0.68rem;
color: rgba(196, 160, 82, 0.55);
letter-spacing: 0.02em;
margin: 0;
}
/* Le div d'erreur caché ne doit pas générer de marge */
.modal-content .error {
margin: 0;
padding: 0;
min-height: 0;
}
.modal-content input:focus {
border-color: var(--dore-popcorn);
background: var(--bleu-clair);
outline: none;
}
/* ── Consentement RGPD inscription ── */
.rgpd-consent {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
margin: 4px 0 8px;
}
.rgpd-consent input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 2px;
accent-color: var(--gold, #c4a052);
cursor: pointer;
}
.rgpd-consent span {
font-size: 0.75rem;
color: rgba(212, 220, 232, 0.75);
line-height: 1.5;
}
.rgpd-consent a {
color: var(--or-titre, #c4a052);
text-decoration: underline;
text-underline-offset: 2px;
}
.required-star { color: #e84020; font-weight: 700; }
/* Message d'erreur si non coché */
.rgpd-consent input:invalid:not(:placeholder-shown) {
outline: 2px solid #e84020;
outline-offset: 2px;
}
.modal-content h2 {
text-align: center;
font-family: var(--font-h2-h6);
margin-bottom: 1rem;
color: var(--dore-popcorn);
}
.modal-content button:not(.modal-close) {
display: block;
width: 100%;
}
/* ── Divider "ou" dans le modal auth ── */
.auth-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.6rem 0;
color: rgba(255, 255, 255, 0.35);
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.12);
}
/* ── Bouton Google dans le burger menu mobile ── */
.mobile-drawer__btn-google {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
padding: 0.7rem 1rem;
background: #fff;
color: #3c4043;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.88rem;
font-weight: 500;
margin-top: 0.5rem;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.mobile-drawer__btn-google:hover {
background: #f1f3f4;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.mobile-drawer__btn-google svg {
flex-shrink: 0;
}
/* ====================================================== */
/* =================== CONFIRM MODAL ==================== */
/* ====================================================== */
.confirm-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(6, 13, 26, 0.7);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 9999;
}
.confirm-modal.is-visible {
opacity: 1;
pointer-events: auto;
}
.confirm-modal__backdrop {
position: absolute;
inset: 0;
}
.confirm-modal__dialog {
position: relative;
background: var(--bleu-intermediaire);
border: 1px solid rgba(198, 166, 100, 0.35);
border-radius: 14px;
padding: 1.2rem 1.4rem;
max-width: min(420px, 90vw);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
color: var(--argent-ecran);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.confirm-modal__title {
margin: 0;
font-family: var(--font-h2-h6);
color: var(--dore-popcorn);
display: flex;
align-items: center;
gap: 0.5rem;
}
.confirm-modal__icon {
display: none;
color: var(--rouge-projecteur);
font-size: 1.1rem;
}
.confirm-modal--danger .confirm-modal__icon {
display: inline-flex;
}
.confirm-modal--warning .confirm-modal__icon {
display: inline-flex;
color: #f0b429;
}
.confirm-modal__message {
margin: 0;
color: rgba(236, 239, 241, 0.8);
line-height: 1.5;
}
.confirm-modal__actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
}
.confirm-modal__actions .btn {
font-size: 0.78rem;
padding: 0.3rem 0.75rem;
}
.confirm-modal--danger .confirm-modal__dialog {
animation: confirmShake 0.35s ease;
border-color: rgba(215, 38, 56, 0.6);
box-shadow: 0 20px 60px rgba(215, 38, 56, 0.2);
}
.confirm-modal--warning .confirm-modal__dialog {
animation: confirmShake 0.35s ease;
border-color: rgba(240, 180, 41, 0.6);
box-shadow: 0 20px 60px rgba(240, 180, 41, 0.2);
}
.btn--warning {
background-color: #f0b429;
color: #1b263b;
border-color: #f0b429;
}
.btn--warning:hover:not(:disabled) {
background-color: #d99a21;
border-color: #d99a21;
}
.btn--warning {
background-color: #f0b429;
color: var(--bleu-nuit);
border-color: #f0b429;
}
.btn--warning:hover:not(:disabled) {
background-color: #dca117;
border-color: #dca117;
}
@keyframes confirmShake {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-4px);
}
50% {
transform: translateY(2px);
}
75% {
transform: translateY(-2px);
}
100% {
transform: translateY(0);
}
}
.switch-form {
margin-top: 0.65rem;
text-align: center;
font-size: 0.85rem;
}
.btn-link {
background: none;
border: none;
color: var(--dore-popcorn);
font-weight: 600;
cursor: pointer;
transition:
color 0.3s,
transform 0.2s;
}
.btn-link:hover {
color: var(--dore-fonce);
transform: scale(1.05);
}
/* ====================================================== */
/* 10. ICÔNES LUCIDE - Styles de base (Planche V2.0)
====================================================== */
/**
* Styles globaux pour les icônes Lucide SVG inline
* Héritent de la couleur du texte via currentColor
*/
.icon {
width: 1em;
height: 1em;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
vertical-align: middle;
}
.icon--sm {
width: 0.85em;
height: 0.85em;
}
.icon--md {
width: 1.25em;
height: 1.25em;
}
.icon--lg {
width: 1.5em;
height: 1.5em;
}
.icon--xl {
width: 2em;
height: 2em;
}
/* ====================================================== */
/* 11. BOUTONS PLANCHE V2.0 (Secondary, Hero)
====================================================== */
/**
* Boutons conformes à la planche V2.0
* NOTE : btn--primary = btn--gold | btn--danger = btn--red
* Seuls les boutons sans équivalent dans la section 5 sont définis ici.
*/
/* ========== BOUTON SECONDARY (Outline Doré) ========== */
.btn--secondary {
background: transparent;
color: var(--dore-popcorn);
border: 2px solid var(--dore-popcorn);
box-shadow: 0 2px 8px rgba(198, 166, 100, 0.1);
}
.btn--secondary:hover:not(:disabled) {
background: rgba(198, 166, 100, 0.15);
border-color: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(198, 166, 100, 0.25);
}
.btn--secondary:disabled {
border-color: #555;
color: #666;
cursor: not-allowed;
}
/* ========== BOUTON HERO (Rouge → Doré au hover) ========== */
.btn--hero {
background: linear-gradient(
135deg,
var(--red-dark) 0%,
var(--red) 50%,
var(--red-light) 100%
);
color: var(--text-light);
box-shadow:
0 4px 20px var(--red-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
font-size: 1rem;
padding: 0.85rem 1.75rem;
}
.btn--hero:hover:not(:disabled) {
background: linear-gradient(
135deg,
var(--gold-dark) 0%,
var(--gold) 50%,
var(--gold-light) 100%
);
color: var(--text-dark);
transform: translateY(-3px) scale(1.03);
box-shadow:
0 8px 30px var(--gold-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* ====================================================== */
/* 12. BOUTONS DE NAVIGATION (Planche V2.0)
====================================================== */
/**
* Boutons d'authentification et navigation utilisateur
* Style : Connexion, Créer un compte, Mon compte, Déconnexion
*/
.btn-nav {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.btn-nav svg,
.btn-nav .icon {
width: 1.1em;
height: 1.1em;
}
/* Connexion - Style outline doré */
.btn-nav--login {
background: transparent;
color: var(--dore-popcorn);
border: 2px solid var(--dore-popcorn);
}
.btn-nav--login:hover {
background: var(--dore-popcorn);
color: var(--bleu-nuit);
}
/* Créer un compte - Style primary */
.btn-nav--register {
background: var(--dore-popcorn);
color: var(--bleu-nuit);
border: 2px solid var(--dore-popcorn);
}
.btn-nav--register:hover {
background: var(--gold-light);
border-color: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(198, 166, 100, 0.4);
}
/* Mon compte - Style ghost */
.btn-nav--account {
background: rgba(198, 166, 100, 0.1);
color: var(--dore-popcorn);
border: 1px solid rgba(198, 166, 100, 0.3);
}
.btn-nav--account:hover {
background: rgba(198, 166, 100, 0.2);
border-color: var(--dore-popcorn);
}
/* Déconnexion - Style danger subtil */
.btn-nav--logout {
background: transparent;
color: var(--argent-ecran);
border: 1px solid rgba(232, 232, 232, 0.3);
}
.btn-nav--logout:hover {
background: rgba(215, 38, 56, 0.15);
color: var(--red-light);
border-color: var(--red);
}
/* ====================================================== */
/* 14. SYSTÈME DE NOTATION (Planche V2.0)
====================================================== */
/**
* Étoiles de notation sur 5
* Affichage et mode interactif
*/
.rating {
display: inline-flex;
align-items: center;
gap: 0.15rem;
}
.rating__star {
color: var(--silver);
opacity: 0.4;
transition: all 0.2s ease;
}
.rating__star svg,
.rating__star .icon {
width: 1.2rem;
height: 1.2rem;
}
.rating__star--filled {
color: var(--dore-popcorn);
opacity: 1;
}
.rating__star--filled svg,
.rating__star--filled .icon {
fill: var(--dore-popcorn);
}
.rating__value {
margin-left: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
color: var(--dore-popcorn);
}
/* Tailles de notation */
.rating--sm .rating__star svg,
.rating--sm .rating__star .icon {
width: 0.9rem;
height: 0.9rem;
}
.rating--sm .rating__value {
font-size: 0.75rem;
}
.rating--lg .rating__star svg,
.rating--lg .rating__star .icon {
width: 1.5rem;
height: 1.5rem;
}
.rating--lg .rating__value {
font-size: 1.1rem;
}
/* Système étoiles émoji — Design System V3 (coexiste avec .rating SVG) */
.stars {
display: flex;
align-items: center;
gap: 2px;
font-size: 0.82rem;
}
.stars span {
color: var(--dore-clair);
}
.stars .star-e {
color: rgba(196, 160, 82, 0.22);
}
.rating-val {
font-family: var(--f-title);
font-size: 0.72rem;
font-weight: 700;
color: var(--argent);
margin-left: 4px;
opacity: 0.75;
}
/* ====================================================== */
/* 05. CARDS — Canonique Moodboard V3
Film Card : portrait 2:3 — largeur fixe 240px
Recipe Card: paysage 3:2 — largeur fixe 380px
Note : les CSS page-spécifiques (home/movies/recipes-movie) cascadent par-dessus.
====================================================== */
/* ── Film Card ── */
.film-card {
position: relative;
width: 240px;
background:
linear-gradient(160deg, #0f1e30 0%, #142234 100%) padding-box,
rgba(255, 255, 255, 0.06) border-box;
border: 1.5px solid transparent;
border-radius: var(--card-r);
padding: 1rem;
display: flex;
flex-direction: column;
box-shadow:
0 8px 32px rgba(0, 2, 12, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
background 0.35s ease;
overflow: hidden;
}
.film-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
z-index: 1;
background: linear-gradient(
180deg,
transparent 0%,
rgba(196, 160, 82, 0.1) 12%,
rgba(196, 160, 82, 0.55) 35%,
rgba(196, 160, 82, 0.7) 50%,
rgba(196, 160, 82, 0.55) 65%,
rgba(196, 160, 82, 0.1) 88%,
transparent 100%
);
border-radius: var(--card-r) 0 0 var(--card-r);
}
.film-card:hover {
background:
linear-gradient(160deg, #0f1e30 0%, #142234 100%) padding-box,
linear-gradient(
135deg,
#7a5a14 0%,
#b8882a 18%,
#f2c84b 38%,
#ffe085 50%,
#f2c84b 62%,
#b8882a 82%,
#7a5a14 100%
)
border-box;
background-size:
100% 100%,
300% 300%;
box-shadow:
0 18px 48px rgba(212, 168, 67, 0.22),
0 4px 14px rgba(0, 0, 0, 0.65);
transform: translateY(-8px);
animation: shimmer-gold 2.5s ease infinite;
}
.film-card__img {
position: relative;
width: 100%;
aspect-ratio: 2/3;
max-height: 280px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #415a77, #1b263b);
}
.film-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 0.55s ease;
}
.film-card:hover .film-card__img img {
transform: scale(1.04);
}
.film-card__img::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 62%;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(5, 10, 20, 0.88) 65%,
rgba(5, 10, 20, 0.97) 100%
);
pointer-events: none;
z-index: 1;
}
.film-card__ot {
position: absolute;
top: 0.55rem;
left: 0.55rem;
right: 0.55rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 3;
}
.film-card__tz {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.6rem 0.75rem 0.65rem;
z-index: 2;
}
.film-ttl {
display: block;
font-family: var(--f-title);
font-size: 0.96rem;
font-weight: 600;
letter-spacing: 0.5px;
color: #fff;
line-height: 1.2;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
margin-bottom: 0.2rem;
}
.film-byl {
font-family: var(--f-body);
font-size: 0.68rem;
font-style: italic;
letter-spacing: 1px;
color: rgba(196, 160, 82, 0.68);
}
.film-card__body {
padding: 0.7rem 0 0;
display: flex;
flex-direction: column;
gap: 0.42rem;
flex: 1;
}
.film-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.26rem;
}
.film-card__desc {
font-size: 0.73rem;
color: var(--argent);
opacity: 0.58;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.film-card__foot {
display: flex;
flex-direction: column;
gap: 0.52rem;
padding-top: 0.52rem;
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.film-count {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--f-display);
font-size: 0.8rem;
letter-spacing: 1.5px;
color: rgba(196, 160, 82, 0.52);
}
/* ══════════════════════════════════════════════════════════
RECIPE CARD — Composant centralisé (source unique)
Utilisé sur : /recipes-movie/:slug et /auteur/:id
Variantes contextuelles en bas de ce bloc.
══════════════════════════════════════════════════════════ */
/* ── Carte de base ── */
.recipe-card {
position: relative;
background: linear-gradient(150deg, var(--surface-card) 0%, var(--bleu-nuit) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 0;
display: flex;
flex-direction: column;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 2, 12, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: all 0.35s ease;
overflow: hidden;
cursor: pointer;
}
/* Halo doré coin supérieur droit */
.recipe-card::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 80px; height: 80px;
background: radial-gradient(circle at top right, rgba(196, 160, 82, 0.12) 0%, transparent 70%);
pointer-events: none;
transition: background 0.35s ease;
z-index: 0;
}
/* Liseré doré bas — apparaît au hover */
.recipe-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(196, 160, 82, 0.55) 30%, rgba(242, 200, 75, 0.7) 55%, rgba(196, 160, 82, 0.55) 75%, transparent);
opacity: 0;
transition: opacity 0.35s;
border-radius: 0 0 12px 12px;
pointer-events: none;
z-index: 2;
}
.recipe-card:hover {
border-color: rgba(196, 160, 82, 0.38);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 20px 52px rgba(196, 160, 82, 0.16), 0 8px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateY(-10px);
}
.recipe-card:hover::after { opacity: 1; }
.recipe-card:hover::before { background: radial-gradient(circle at top right, rgba(196, 160, 82, 0.28) 0%, transparent 70%); }
/* ── Stretched link — couvre toute la card ── */
.recipe-card__link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
cursor: pointer;
}
/* ── Image 3:2 ── */
.recipe-card__img {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
border-radius: 10px 10px 0 0;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, var(--bleu-clair) 0%, var(--bleu-intermediaire) 100%);
}
.recipe-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.recipe-card:hover .recipe-card__img img { transform: scale(2); }
/* Fondu bas image */
.recipe-card__img::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 45%;
background: linear-gradient(to bottom, transparent, rgba(10, 17, 28, 0.78));
pointer-events: none;
z-index: 1;
}
/* ── Overlays badges (décoratifs, transparents aux clics) ── */
.recipe-card__ot {
position: absolute;
top: 0.6rem; left: 0.6rem; right: 0.6rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 5;
pointer-events: none;
}
.recipe-card__ot-badges {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.recipe-card__ob {
position: absolute;
bottom: 0.55rem; left: 0.6rem; right: 0.6rem;
display: flex;
gap: 0.3rem;
z-index: 3;
pointer-events: none;
align-items: flex-start;
}
/* Overlays décoratifs : transparents aux clics */
.recipe-card__ot,
.recipe-card__ob,
.cd-hover-overlay { pointer-events: none; }
/* Animations overlay hover */
.recipe-card:hover .cd-hover-overlay { opacity: 1; }
.recipe-card:hover .cd-icon-btn { transform: translateY(0) scale(1); opacity: 1; }
.recipe-card:hover .cd-icon-btn__ring { border-color: rgba(242,200,75,.9); transform: rotate(60deg); }
.recipe-card:hover .cd-icon-btn__bg { box-shadow: 0 6px 28px rgba(184,136,42,.65); filter: brightness(1.08); }
.recipe-card:hover .cd-icon-btn__bg svg { transform: scale(1.15) translateY(-1px); }
.recipe-card:hover .cd-icon-btn__wrap { animation: cdIconFloat 2.2s ease-in-out infinite; }
.recipe-card:hover .cd-icon-btn__bg::after { animation: cdPulse 1.9s ease-out infinite; }
/* ── Séparateur doré — entre body et footer (bas de card) ── */
.recipe-card__glow-sep {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(196, 160, 82, 0.28) 30%, rgba(196, 160, 82, 0.48) 50%, rgba(196, 160, 82, 0.28) 70%, transparent 100%);
margin-top: auto;
}
/* ── Corps de la card ── */
.recipe-card__body {
padding: 1rem 1rem 0.9rem;
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
/* Titre */
.recipe-ttl {
font-family: var(--font-h2-h6);
font-size: 1.02rem;
font-style: italic;
font-weight: 700;
color: var(--or-titre);
margin: 0 0 0.75rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.25s ease;
}
.recipe-card:hover .recipe-ttl { color: var(--dore-clair); }
/* Ligne titre + temps */
.recipe-card__title-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
/* Métadonnées */
.recipe-card__meta-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
margin-bottom: 0.65rem;
}
.meta-time {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: rgba(196, 160, 82, 0.55);
font-family: var(--f-body);
white-space: nowrap;
margin-left: auto;
}
.meta-time svg,
.meta-time .meta-time__icon {
width: 13px;
height: 13px;
flex-shrink: 0;
}
/* Étoiles de notation dans la card */
.recipe-card .rating { margin-bottom: 0; }
.recipe-card .rating--sm {
display: flex;
align-items: center;
gap: 0.15rem;
margin-bottom: 0.65rem;
}
.recipe-card .rating__star { color: var(--bleu-secondaire); opacity: 0.4; }
.recipe-card .rating__star .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: currentColor; }
.recipe-card .rating__star--filled { color: var(--dore-popcorn); opacity: 1; }
.recipe-card .rating__star--filled .icon { fill: var(--dore-popcorn); }
.recipe-card .rating__value { font-size: 0.85rem; font-weight: 700; color: var(--argent-ecran); margin-left: 0.35rem; }
/* Description */
.recipe-card__desc {
font-size: 0.78rem;
color: rgba(232, 232, 232, 0.52);
margin: 0 0 0.7rem;
line-height: 1.65;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
/* Badge NEW */
.recipe-badge-new {
font-size: 0.68rem;
letter-spacing: 0.08em;
padding: 0.18rem 0.42rem;
border-radius: 4px;
line-height: 1.2;
}
/* Séparateur interne corps */
.recipe-card__sep {
height: 1px;
background: linear-gradient(90deg, rgba(196, 160, 82, 0.18), rgba(196, 160, 82, 0.08) 60%, transparent);
margin-bottom: 0.75rem;
}
/* ── Footer : auteur + favori ── */
.recipe-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.55rem 1rem 0.7rem;
}
.recipe-card__foot .btn-fav { flex-shrink: 0; }
/* Bouton favori : cliquable au-dessus du stretched link */
.recipe-card .btn-fav {
position: relative;
z-index: 2;
pointer-events: auto;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
}
.recipe-card .btn-fav .icon { width: 1.1rem; height: 1.1rem; }
/* ── Variante : page auteur ── */
.author-page .recipe-card {
width: auto;
max-width: 100%;
border-color: rgba(196, 160, 82, 0.18);
}
/* ── Contrib dans recipe-card : z-index et gestion des clics uniquement ── */
/* Le style épuré est défini globalement dans .contrib--sm (section 18) */
.recipe-card .contrib {
position: relative;
z-index: 2;
pointer-events: none;
}
/* Contrib cliquable (tag ) dans recipe-card */
a.contrib.recipe-card-contrib-link {
pointer-events: auto;
}
/* ====================================================== */
/* 15. (supprimé — remplacé par .contrib dans base.css)
====================================================== */
/* ====================================================== */
/* 16. ICÔNES RÉSEAUX SOCIAUX (Planche V2.0)
====================================================== */
/**
* Icônes pour footer et page contact
*/
.social-links {
display: flex;
gap: 0.75rem;
align-items: center;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 8px;
background: rgba(27, 38, 59, 0.7);
border: 1px solid rgba(198, 166, 100, 0.2);
color: var(--argent-ecran);
text-decoration: none;
transition: all 0.3s ease;
}
.social-link svg,
.social-link .icon {
width: 1.1rem;
height: 1.1rem;
}
.social-link:hover {
background: var(--dore-popcorn);
border-color: var(--dore-popcorn);
color: var(--bleu-nuit);
transform: translateY(-2px);
}
.social-link--github:hover {
background: #333;
border-color: #333;
color: #fff;
}
.social-link--linkedin:hover {
background: #0077b5;
border-color: #0077b5;
color: #fff;
}
.social-link--facebook:hover {
background: #1877f2;
border-color: #1877f2;
color: #fff;
}
.social-link--instagram:hover {
background: linear-gradient(
45deg,
#f09433,
#e6683c,
#dc2743,
#cc2366,
#bc1888
);
border-color: #dc2743;
color: #fff;
}
/* ====================================================== */
/* 17. TAGS COMPLÉMENTAIRES (Planche V2.0)
====================================================== */
/**
* Tags manquants : burgundy, outline, active
*/
/* Tag Burgundy */
.tag--burgundy {
background: linear-gradient(135deg, var(--burgundy-dark), var(--burgundy));
color: var(--text-light);
}
/* Tag Outline */
.tag--outline {
background: rgba(27, 38, 59, 0.7);
border: 1px solid rgba(198, 166, 100, 0.3);
color: var(--argent-ecran);
}
.tag--outline::after {
display: none;
}
.tag--outline:hover {
background: rgba(198, 166, 100, 0.15);
border-color: var(--dore-popcorn);
color: var(--dore-popcorn);
}
/* Tag Active (sélectionné) */
.tag--active {
background: var(--dore-popcorn);
color: var(--bleu-nuit);
font-weight: 700;
}
.tag--active::after {
display: none;
}
/* ====================================================== */
/* 18. RESPONSIVE (Adaptation mobile/tablette)
====================================================== */
/**
* Media Queries : Règles CSS qui s'appliquent selon la taille de l'écran
* -----------------------------------------------------------------------
* @media (max-width: 800px) : Styles pour écrans de 800px et moins (tablettes, smartphones)
* @media (max-width: 500px) : Styles pour écrans de 500px et moins (smartphones uniquement)
*
* Principe "Mobile First" :
* On part des styles desktop, puis on surcharge pour les petits écrans
* (Alternative : commencer par mobile et utiliser min-width pour desktop)
*/
@media (max-width: 800px) {
body {
padding: 1rem 0.5rem;
}
.header,
.footer {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-main {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.footer-left {
align-items: center;
text-align: center;
}
.footer-logo-container {
justify-content: center;
}
.footer-right {
align-items: center;
}
.footer-menu {
justify-content: center;
gap: 1rem 1.5rem;
}
.footer-socials {
justify-content: center;
}
.footer-bottom {
flex-direction: column-reverse;
gap: 0.75rem;
}
.footer-copyright {
text-align: center;
}
.modal-content {
padding: 1.5rem;
max-width: 340px;
}
.social-links {
gap: 0.6rem;
}
.social-link {
width: 2.1rem;
height: 2.1rem;
}
}
@media (max-width: 500px) {
.title,
.footer-logo-text {
font-size: 1.5rem;
}
.logo-header {
height: 4rem;
}
.footer-logo {
height: 2.5rem;
}
.footer-slogan {
font-size: 0.8rem;
}
.footer-menu {
flex-direction: column;
gap: 0.8rem;
}
.footer-social-link {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
.btn {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
/* Responsive V2.0 Components */
.btn-nav {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
.btn-nav span {
display: none;
}
.social-links {
gap: 0.5rem;
}
.social-link {
width: 2rem;
height: 2rem;
}
.rating {
gap: 0.1rem;
}
.rating__star {
font-size: 0.85rem;
}
}
/* ================================================================ */
/* =========== MEDIA STATUS BADGE (photo profil, bannière) ======== */
/* ================================================================ */
/* Classe de base + positionnement délégué au composant parent */
.media-status-badge {
display: inline-block;
white-space: nowrap;
padding: 0.15rem 0.45rem;
font-size: 0.58rem;
font-weight: 700;
border-radius: 5px;
background-color: rgba(23, 32, 48, 0.92);
border: 1px solid rgba(198, 166, 100, 0.5);
color: var(--dore-popcorn);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.4;
pointer-events: none;
}
/* EN ATTENTE — orange
background-image préserve le background-color opaque de .media-status-badge */
.media-status-badge--pending {
background-image: linear-gradient(
135deg,
rgba(249, 115, 22, 0.35),
rgba(249, 115, 22, 0.18)
);
color: var(--orange-pellicule);
border-color: var(--orange-glow);
}
/* VALIDÉ — vert, disparaît après 3 s */
.media-status-badge--approved {
background-image: linear-gradient(
135deg,
rgba(6, 95, 70, 0.35),
rgba(5, 150, 105, 0.22)
);
border-color: var(--velvet-light);
color: var(--velvet-light);
animation: mediaStatusFadeOut 0.6s ease 3s forwards;
}
/* REFUSÉ — rouge, reste jusqu'au prochain upload */
.media-status-badge--rejected {
background-image: linear-gradient(
135deg,
rgba(215, 38, 56, 0.35),
rgba(215, 38, 56, 0.22)
);
color: var(--rouge-projecteur);
border-color: rgba(215, 38, 56, 0.5);
}
@keyframes mediaStatusFadeOut {
to {
opacity: 0;
visibility: hidden;
}
}
/* Glow doré au hover — centralisé ici, supprimé des fichiers de page */
@keyframes cinema-glow {
0% {
box-shadow: 0 0 0px var(--dore-popcorn);
}
50% {
box-shadow: 0 0 6px var(--dore-popcorn);
}
100% {
box-shadow: 0 0 8px var(--dore-popcorn);
}
}
/* ====================================================== */
/* BREADCRUMB (.bc) — Composant partagé toutes pages
====================================================== */
.bc {
max-width: var(--max-width, 1280px);
margin: 0 auto;
display: flex;
align-items: center;
gap: 8px;
height: 44px;
flex-wrap: wrap;
}
.bc a {
font-size: 0.62rem;
font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(232, 232, 232, 0.32);
text-decoration: none;
transition: color 0.2s;
}
.bc a:hover {
color: var(--or-titre, var(--dore-popcorn));
}
/* ====================================================== */
/* DESIGN SYSTEM MOODBOARD V2.1 — Composants additionnels
====================================================== */
/* ── Bouton Outline Or (secondaire) ── */
.btn--outline {
background: transparent;
border: 1.5px solid rgba(196, 160, 82, 0.45);
color: var(--or-titre);
}
.btn--outline:hover:not(:disabled) {
background: rgba(196, 160, 82, 0.08);
border-color: rgba(196, 160, 82, 0.8);
color: var(--dore-clair);
transform: translateY(-1px);
}
/* ── Bouton Hero — Rouge → Or au hover ── */
.btn--hero {
background: linear-gradient(135deg, #8b1c13 0%, #c23018 60%, #d43a20 100%);
color: #fff;
box-shadow: 0 0 10px rgba(194, 48, 24, 0.35);
}
.btn--hero:hover:not(:disabled) {
background: var(--gold-gradient-hover);
color: #1c1404;
box-shadow: 0 0 15px rgba(212, 168, 67, 0.5);
transform: translateY(-1px);
}
/* ── Bouton Favori — Cercle verre sombre ── */
.btn-fav {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: rgba(13, 27, 42, 0.78);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
flex-shrink: 0;
}
.btn-fav:hover {
background: rgba(194, 48, 24, 0.88);
border-color: #c23018;
transform: scale(1.1);
color: #fff;
}
.btn-fav[data-is-favorite="true"] {
background: rgba(194, 48, 24, 0.82);
border-color: #c23018;
color: #fff;
box-shadow: 0 0 10px rgba(194, 48, 24, 0.45);
}
.btn-fav[data-is-favorite="true"] .icon { fill: currentColor; }
.btn-fav[data-is-favorite="true"]:hover { background: rgba(232, 64, 32, 0.95); color: #fff; }
.btn-fav .btn__shimmer { display: none; }
/* ── Overlay hover générique (cards recettes & films) ── */
.cd-hover-overlay {
position: absolute; inset: 0; z-index: 3;
background: linear-gradient(160deg, rgba(8,16,28,.22) 0%, rgba(120,80,10,.28) 55%, rgba(184,136,42,.18) 100%);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
opacity: 0;
transition: opacity .3s ease;
pointer-events: none; /* le stretched link ou l'overlay parent gère le clic */
}
.cd-icon-btn {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 10px;
transform: translateY(10px) scale(.88);
opacity: 0;
transition: transform .34s cubic-bezier(.34,1.56,.64,1), opacity .26s ease;
}
.cd-icon-btn__wrap {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
}
.cd-icon-btn__ring {
position: absolute; inset: 0; border-radius: 50%;
border: 1px dashed rgba(242,200,75,.45);
transition: border-color .45s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.cd-icon-btn__bg {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(145deg, #8b6914 0%, #b8882a 22%, #c4a052 42%, #d4a843 55%, #f2c84b 68%, #d4a843 80%, #b8882a 100%);
border: 1.5px solid rgba(255,255,255,.22);
box-shadow: 0 4px 18px rgba(184,136,42,.45), inset 0 1px 0 rgba(255,255,255,.28);
display: flex; align-items: center; justify-content: center;
color: rgba(20,10,0,.72);
position: relative; z-index: 1;
transition: box-shadow .3s ease, filter .3s ease;
}
.cd-icon-btn__bg svg { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.cd-icon-btn__label {
font-family: var(--f-title);
font-size: .56rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--or-titre, #c4a052);
white-space: nowrap;
text-shadow: 0 1px 10px rgba(0,0,0,.9);
}
/* Animations au hover — déclenchées par les parents via leurs propres sélecteurs */
.cd-hover-overlay.is-visible { opacity: 1; }
.cd-hover-overlay.is-visible .cd-icon-btn { transform: translateY(0) scale(1); opacity: 1; }
.cd-hover-overlay.is-visible .cd-icon-btn__ring { border-color: rgba(242,200,75,.9); transform: rotate(60deg); }
.cd-hover-overlay.is-visible .cd-icon-btn__bg { box-shadow: 0 6px 28px rgba(184,136,42,.65); filter: brightness(1.08); }
.cd-hover-overlay.is-visible .cd-icon-btn__bg svg { transform: scale(1.15) translateY(-1px); }
/* Float vertical */
@keyframes cdIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cd-hover-overlay.is-visible .cd-icon-btn__wrap { animation: cdIconFloat 2.2s ease-in-out infinite; }
/* Pulse rayonnant */
.cd-icon-btn__bg::after {
content: ""; position: absolute; inset: -5px; border-radius: 50%;
border: 1.5px solid rgba(242,200,75,.55); opacity: 0; pointer-events: none;
}
.cd-hover-overlay.is-visible .cd-icon-btn__bg::after { animation: cdPulse 1.9s ease-out infinite; }
@keyframes cdPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.85); opacity: 0; } }
/* Cards mixtes (Option A) : image s'étend sur toute la card au hover
→ overlay léger doré centré, icône centrée sur l'image plein-card */
.recipe-card .cd-hover-overlay,
.ar-recipe-card .cd-hover-overlay,
.top3-card .cd-hover-overlay,
.top3-featured .cd-hover-overlay,
.djc-recette .cd-hover-overlay {
background: linear-gradient(160deg,
rgba(8,16,28,.18) 0%,
rgba(100,65,8,.30) 50%,
rgba(184,136,42,.22) 100%
);
}
/* Mobile (touch) : overlay masqué, la card reste cliquable via le stretched link */
/* Touch : overlay reste dans le DOM (opacity:0 + pointer-events:none suffisent) */
/* ── Badges Overlay Cards — Moodboard V2.1 ── */
/* Remplacent les anciens badge--sapphire / badge--red / badge--gold sur les cards */
.badge--genre {
background: rgba(13, 27, 42, 0.88);
border: 1px solid rgba(196, 160, 82, 0.38);
border-style: solid;
color: var(--or-titre);
}
.badge--type-r {
background: rgba(194, 48, 24, 0.18);
border: 1px solid rgba(194, 48, 24, 0.48);
border-style: solid;
color: #e84020;
}
.badge--type-b {
background: rgba(14, 24, 52, 0.78);
border: 1px solid rgba(80, 120, 200, 0.4);
border-style: solid;
color: rgba(140, 180, 245, 0.95);
backdrop-filter: blur(4px);
}
.badge--info {
background: rgba(65, 90, 119, 0.22);
border: 1px solid rgba(65, 90, 119, 0.4);
border-style: solid;
color: rgba(232, 232, 232, 0.72);
}
.badge--film {
background: rgba(10, 18, 32, 0.88);
border: 1px solid rgba(196, 160, 82, 0.52);
border-style: solid;
color: var(--dore-clair);
backdrop-filter: blur(8px);
}
.badge--film-dk {
background: rgba(4, 8, 18, 0.75);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-style: solid;
color: rgba(200, 215, 235, 0.88);
font-size: 0.68rem;
letter-spacing: 0.6px;
padding: 0.22rem 0.55rem;
border-radius: 4px;
}
/* Supprimer le liseré pointillé hérité sur les badges overlay */
.badge--genre::after,
.badge--type-r::after,
.badge--type-b::after,
.badge--info::after,
.badge--film::after,
.badge--film-dk::after {
display: none;
}
/* Badge Moment — étiquette temporelle (accent rouge discret) */
.badge--moment {
background: rgba(194, 48, 24, 0.22);
border-color: rgba(194, 48, 24, 0.45);
color: #e84020;
font-size: 0.62rem;
padding: 3px 10px;
}
/* ════════════════════════════════════════════════════════════
GAMIFICATION — badge harmonisé (cartes, sidebars, avis)
Classe de base réutilisable + variantes couleur.
Ne pas modifier les propriétés de layout des composants
parents (lvl-badge, rd-author-badge, etc.).
════════════════════════════════════════════════════════════ */
.gamification-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 4px;
font-family: var(--f-title, "Cinzel", serif);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.6;
border: 1px solid transparent;
white-space: nowrap;
vertical-align: middle;
}
/* Officiel / admin / "Ciné Délices" — pill rouge */
.gamification-badge--official {
color: rgba(255, 90, 90, 0.92);
background: rgba(200, 40, 40, 0.14);
border-color: rgba(220, 60, 60, 0.32);
border-radius: 50px;
}
/* Rang membre — bleu-argent */
.gamification-badge--rank {
color: rgba(120, 190, 255, 0.88);
background: rgba(80, 130, 255, 0.1);
border-color: rgba(120, 190, 255, 0.22);
}
/* XP / progression — vert */
.gamification-badge--xp {
color: rgba(90, 210, 140, 0.9);
background: rgba(40, 170, 100, 0.1);
border-color: rgba(40, 170, 100, 0.25);
}
/* ════════════════════════════════════════════════════════════════
CONTRIB BADGE — badge contributeur/auteur unifié
Moodboard de référence : docs/SEB/moodboard-badges-contributeur.html
Deux tailles :
.contrib → h 48px (pages détail, hero)
.contrib--sm → h 30px (cards listing)
Deux thèmes :
.contrib--admin → bleu nuit (admin / superadmin)
.contrib--membre → prune (membres)
════════════════════════════════════════════════════════════════ */
.contrib {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
height: 48px;
border-radius: 999px;
padding: 0 16px 0 6px;
overflow: hidden;
cursor: default;
transition:
transform 0.25s ease,
box-shadow 0.3s ease;
text-decoration: none;
flex-shrink: 0;
}
.contrib:hover {
transform: translateY(-2px);
}
.contrib::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.13),
transparent
);
pointer-events: none;
z-index: 3;
}
/* ── avatar ── */
.contrib__av {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
position: relative;
z-index: 2;
}
.contrib__av img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── texte stack ── */
.contrib__info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
z-index: 2;
}
.contrib__pseudo {
font-family: var(--f-title, "Cinzel", serif);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.6px;
color: var(--argent, #e8e8e8);
white-space: nowrap;
line-height: 1;
}
/* ── pill ── */
.contrib__pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
border-radius: 999px;
font-family: var(--f-title, "Cinzel", serif);
font-size: 0.38rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
line-height: 1.5;
white-space: nowrap;
}
.contrib__pill-dot {
width: 4px;
height: 4px;
border-radius: 50%;
flex-shrink: 0;
}
/* pill admin — bleu */
.contrib__pill--admin {
background: linear-gradient(135deg, #0a2540 0%, #0e3a5e 45%, #1560a0 100%);
border: 1px solid rgba(60, 140, 200, 0.55);
color: rgba(160, 215, 255, 0.95);
box-shadow:
0 0 8px rgba(30, 100, 180, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.contrib__pill--admin .contrib__pill-dot {
background: rgba(140, 200, 255, 0.75);
}
/* pill membre — prune/rose */
.contrib__pill--membre {
background: linear-gradient(135deg, #2a0820 0%, #4a1438 45%, #7a2460 100%);
border: 1px solid rgba(180, 80, 148, 0.55);
color: rgba(255, 185, 230, 0.95);
box-shadow:
0 0 8px rgba(180, 80, 148, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.contrib__pill--membre .contrib__pill-dot {
background: rgba(255, 170, 220, 0.75);
}
/* ── thème ADMIN — bleu nuit ── */
.contrib--admin {
background: rgba(8, 28, 46, 0.58);
box-shadow:
0 0 0 1.5px rgba(60, 140, 200, 0.35),
0 0 0 3px rgba(60, 140, 200, 0.06),
0 6px 28px rgba(60, 140, 200, 0.18),
0 2px 8px rgba(0, 0, 0, 0.65);
}
.contrib--admin:hover {
box-shadow:
0 0 0 1.5px rgba(60, 140, 200, 0.6),
0 0 0 4px rgba(60, 140, 200, 0.1),
0 10px 36px rgba(60, 140, 200, 0.28),
0 2px 8px rgba(0, 0, 0, 0.7);
}
.contrib--admin .contrib__pseudo {
color: rgba(115, 185, 240, 0.92);
}
.contrib--admin .contrib__av img {
box-shadow:
0 0 0 1.5px rgba(60, 140, 200, 0.7),
0 0 10px rgba(60, 140, 200, 0.35);
}
/* ── thème MEMBRE — prune ── */
.contrib--membre {
background: rgba(38, 14, 32, 0.62);
box-shadow:
0 0 0 1.5px rgba(180, 80, 148, 0.38),
0 0 0 3px rgba(180, 80, 148, 0.07),
0 6px 28px rgba(180, 80, 148, 0.18),
0 2px 8px rgba(0, 0, 0, 0.6);
}
.contrib--membre:hover {
box-shadow:
0 0 0 1.5px rgba(180, 80, 148, 0.65),
0 0 0 4px rgba(180, 80, 148, 0.12),
0 10px 36px rgba(180, 80, 148, 0.28),
0 2px 8px rgba(0, 0, 0, 0.7);
}
.contrib--membre .contrib__pseudo {
color: rgba(218, 130, 190, 0.92);
}
.contrib--membre .contrib__av img {
box-shadow:
0 0 0 1.5px rgba(180, 80, 148, 0.7),
0 0 10px rgba(180, 80, 148, 0.38);
}
/* ── taille SM — version épurée (cards, home, pages listing) ── */
.contrib--sm {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
height: auto;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
cursor: default;
transform: none !important;
transition: none;
}
.contrib--sm:hover {
transform: none;
box-shadow: none;
}
.contrib--sm::before { display: none; }
/* Admin SM → pseudo doré + anneau doré */
.contrib--sm.contrib--admin,
.contrib--sm.contrib--admin:hover {
background: none;
box-shadow: none;
}
.contrib--sm.contrib--admin .contrib__pseudo {
color: var(--or-titre, #c4a052);
}
.contrib--sm.contrib--admin .contrib__av {
box-shadow: 0 0 0 1.5px rgba(196, 160, 82, 0.75);
}
.contrib--sm.contrib--admin .contrib__pill--admin {
background: rgba(21, 96, 160, 0.25);
border: 1px solid rgba(60, 140, 200, 0.5);
color: rgba(160, 215, 255, 0.95);
box-shadow: none;
}
/* Membre SM → pseudo argent + anneau argenté */
.contrib--sm.contrib--membre,
.contrib--sm.contrib--membre:hover {
background: none;
box-shadow: none;
}
.contrib--sm.contrib--membre .contrib__pseudo {
color: var(--argent, #e8e8e8);
}
.contrib--sm.contrib--membre .contrib__av {
box-shadow: 0 0 0 1.5px rgba(200, 200, 210, 0.45);
}
.contrib--sm.contrib--membre .contrib__pill--membre {
background: rgba(122, 36, 96, 0.25);
border: 1px solid rgba(180, 80, 148, 0.45);
color: rgba(255, 185, 230, 0.9);
box-shadow: none;
}
/* Avatar 28×28 */
.contrib--sm .contrib__av {
width: 28px;
height: 28px;
margin-right: 3px;
}
.contrib--sm .contrib__av img {
width: 28px;
height: 28px;
}
.contrib--sm .contrib__info { gap: 3px; }
.contrib--sm .contrib__pseudo {
font-size: 0.58rem;
letter-spacing: 0.4px;
}
.contrib--sm .contrib__pill {
font-size: 0.28rem;
letter-spacing: 0.9px;
padding: 1.5px 6px;
}
.contrib--sm .contrib__pill-dot {
width: 3px;
height: 3px;
}
/* Contrib SM cliquable (tag ) */
a.contrib--sm {
pointer-events: auto;
cursor: pointer;
text-decoration: none;
}
a.contrib--sm:hover .contrib__pseudo {
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Animations Moodboard V2.1 ── */
@keyframes shimmer-gold {
0% {
background-position:
center,
0% 50%;
}
50% {
background-position:
center,
100% 50%;
}
100% {
background-position:
center,
200% 50%;
}
}
@keyframes badgePulse {
0%,
100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.04);
}
}
/* ── Scroll Reveal ── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* ── Tooltips CSS ── */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: rgba(4, 8, 15, 0.95);
color: #f0ecdf;
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.8px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid rgba(200, 168, 78, 0.2);
z-index: 100;
}
[data-tooltip]:hover::after {
opacity: 1;
}
/* ═══════════════════════════════════════════════════════════════════
NAV v2 — Navigation glassmorphism (header.ejs refonte maquette)
═══════════════════════════════════════════════════════════════════ */
/* ── Wrap : conteneur centré — utilise le système global --cd-max / --cd-px ── */
.wrap {
width: min(var(--cd-max, 1440px), 100% - 2 * var(--cd-px, 2rem));
margin: 0 auto;
}
/* ── Décalage global nav fixe ── */
/* La nav est fixed (z-index: 500) — toutes les pages décalent leur contenu vers le bas */
main {
padding-top: var(--nav-h);
}
/* ── Nav bar ── */
/*
Le logo "déborde" visuellement sous la barre via une astuce de layout :
- .nav-bar a un padding-bottom: 22px → sa hauteur physique = nav-h + 22px
- .nav-bar::before couvre seulement height: nav-h → le fond flouté s'arrête là
- Le logo (translateY 10px) descend dans la zone de padding transparente
→ Pas de clipping, pas de stacking context à contourner, ça marche dans tous les navigateurs.
*/
.nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 500;
overflow: visible;
padding-bottom: 22px; /* espace physique transparent sous le fond flouté */
background: transparent;
border-top: 2px solid rgba(196, 160, 82, 0.35);
transition:
border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--nav-h); /* s'arrête à la hauteur visuelle de la barre */
z-index: 0;
background: rgba(10, 18, 30, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(196, 160, 82, 0.08);
transition:
background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-bar.scrolled {
border-top-color: rgba(196, 160, 82, 0.5);
}
.nav-bar.scrolled::before {
background: rgba(12, 20, 34, 0.92);
backdrop-filter: blur(24px) saturate(1.6);
-webkit-backdrop-filter: blur(24px) saturate(1.6);
border-bottom-color: rgba(196, 160, 82, 0.14);
}
.site-nav {
position: relative;
z-index: 1; /* passe au-dessus du ::before */
height: var(--nav-h);
display: flex;
align-items: center;
overflow: visible;
}
/* ── Logo animé (canvas) ── */
.nav-logo {
flex: 1;
display: flex;
align-items: flex-end;
text-decoration: none;
overflow: visible;
}
/* Scène canvas — dimensions CSS 130×75px (ratio 500:287) */
.nav-logo__scene {
position: relative;
width: 150px;
height: 86px;
flex-shrink: 0;
transform: translateY(
12px
); /* déborde dans la zone de padding transparente */
z-index: 10;
cursor: pointer;
}
/* Les deux canvas couvrent la scène entièrement */
.nav-logo__fx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.nav-logo__fx--under {
z-index: 0;
}
/* Image logo au centre de la pile */
.nav-logo__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}
.nav-logo__fx--over {
z-index: 2;
}
.nav-logo__vignette {
display: none;
}
.nav-logo__name {
font-family: var(--f-display);
font-size: 1.14rem;
letter-spacing: 0.14em;
color: var(--or-titre);
white-space: nowrap;
text-shadow: 0 0 22px rgba(196, 160, 82, 0.28);
}
/* ── Nav links desktop ── */
.nav-links {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.nav-link {
position: relative;
padding: 7px 17px;
border-radius: 6px;
font-family: var(--f-title);
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: rgba(232, 232, 232, 0.55);
transition:
color 0.25s,
background 0.25s;
}
.nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1.5px;
border-radius: 1px;
background: linear-gradient(90deg, transparent, var(--or-titre), transparent);
transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover {
color: rgba(232, 232, 232, 0.9);
background: rgba(255, 255, 255, 0.04);
}
.nav-link:hover::after,
.nav-link--active::after {
width: 55%;
}
.nav-link--active {
color: var(--or-titre);
}
.nav-link--admin {
margin-left: 8px;
color: var(--bleu-nuit);
background: var(--gold-gradient);
border: none;
border-radius: 6px;
padding: 4px 11px;
font-weight: 700;
}
.nav-link--admin::after {
display: none;
}
.nav-link--admin:hover {
background: var(--gold-gradient-hover);
color: var(--bleu-nuit);
filter: brightness(1.06);
}
/* ── Nav actions ── */
.nav-actions {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
/* ── Search overlay ── */
.search-overlay {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 120px;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s;
}
.search-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.search-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 10, 20, 0.82);
backdrop-filter: blur(8px);
}
.search-overlay__box {
position: relative;
z-index: 1;
width: 100%;
max-width: 620px;
margin: 0 24px;
transform: translateY(-12px);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.search-overlay.is-open .search-overlay__box {
transform: translateY(0);
}
.search-overlay__inner {
display: flex;
align-items: center;
gap: 12px;
background: rgba(15, 26, 42, 0.95);
border: 1px solid rgba(196, 160, 82, 0.35);
border-radius: 14px;
padding: 12px 16px;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(196, 160, 82, 0.12);
}
.search-overlay__inner svg {
flex-shrink: 0;
color: rgba(196, 160, 82, 0.5);
}
.search-overlay__input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: var(--f-body);
font-size: 1rem;
font-weight: 300;
color: var(--argent-ecran);
caret-color: var(--or-titre);
}
.search-overlay__input::placeholder {
color: rgba(232, 232, 232, 0.28);
}
.search-overlay__close {
width: 28px;
height: 28px;
border-radius: 6px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(232, 232, 232, 0.4);
cursor: pointer;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.18s;
}
.search-overlay__close:hover {
background: rgba(194, 48, 24, 0.18);
border-color: rgba(194, 48, 24, 0.45);
color: #e84020;
}
.search-overlay__hint {
text-align: center;
margin-top: 14px;
font-size: 0.62rem;
font-weight: 300;
color: rgba(232, 232, 232, 0.28);
letter-spacing: 0.04em;
}
.search-overlay__hint kbd {
display: inline-block;
padding: 1px 5px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: var(--f-body);
font-size: 0.58rem;
color: rgba(232, 232, 232, 0.45);
}
/* ── Search button ── */
.nav-btn-search {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(232, 232, 232, 0.5);
transition: all 0.25s;
}
.nav-btn-search:hover {
background: rgba(196, 160, 82, 0.12);
border-color: rgba(196, 160, 82, 0.4);
color: var(--or-titre);
}
/* ── Fav button ── */
.nav-btn-fav {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
color: rgba(232, 232, 232, 0.5);
transition: all 0.25s;
position: relative;
}
.nav-btn-fav:hover {
background: rgba(194, 48, 24, 0.15);
border-color: rgba(194, 48, 24, 0.45);
color: #e84020;
}
.nav-btn-fav__count {
position: absolute;
top: -5px;
right: -5px;
min-width: 17px;
height: 17px;
border-radius: 9px;
padding: 0 4px;
background: var(--gold-gradient);
border: 1.5px solid #0a0f1a;
font-family: var(--f-title);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--bleu-nuit);
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(196,160,82,0.35);
}
.nav-btn-fav__count.has-favs {
display: flex;
}
/* ── Connect button (non connecté) ── */
.nav-btn-connect {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 20px;
height: 36px;
border-radius: 8px;
background: var(--gold-gradient);
border: none;
cursor: pointer;
font-family: var(--f-title);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bleu-nuit);
box-shadow:
0 2px 16px rgba(184, 136, 42, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: all 0.25s;
text-decoration: none;
white-space: nowrap;
}
.nav-btn-connect:hover {
background: var(--gold-gradient);
color: var(--bleu-nuit);
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(212, 168, 67, 0.42);
filter: brightness(1.07);
}
/* ── Hamburger mobile ── */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(196, 160, 82, 0.08);
border: 1px solid rgba(196, 160, 82, 0.28);
cursor: pointer;
transition:
background 0.25s,
border-color 0.25s;
}
.nav-hamburger:hover {
background: rgba(196, 160, 82, 0.18);
border-color: rgba(196, 160, 82, 0.55);
}
.nav-hamburger__line {
width: 18px;
height: 1.5px;
border-radius: 2px;
background: rgba(196, 160, 82, 0.85);
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s,
background 0.25s;
transform-origin: center;
}
.nav-hamburger.is-open .nav-hamburger__line:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
background: var(--or-titre);
}
.nav-hamburger.is-open .nav-hamburger__line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-hamburger.is-open .nav-hamburger__line:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
background: var(--or-titre);
}
/* ── Mobile drawer ── */
.mobile-drawer {
position: fixed;
inset: 0;
z-index: 450;
pointer-events: none;
}
.mobile-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 10, 18, 0.78);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.38s;
}
.mobile-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 88vw);
background: linear-gradient(160deg, #0f1e30 0%, #0a1520 100%);
border-left: 1px solid rgba(196, 160, 82, 0.14);
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.65);
transform: translateX(100%);
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.mobile-drawer.is-open {
pointer-events: auto;
}
.mobile-drawer.is-open .mobile-drawer__backdrop {
opacity: 1;
}
.mobile-drawer.is-open .mobile-drawer__panel {
transform: translateX(0);
}
.mobile-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 18px;
border-bottom: 1px solid rgba(196, 160, 82, 0.1);
}
.mobile-drawer__logo {
font-family: var(--f-display);
font-size: 1.1rem;
letter-spacing: 0.14em;
color: var(--or-titre);
}
.mobile-drawer__close {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(232, 232, 232, 0.55);
font-size: 1rem;
transition: all 0.22s;
}
.mobile-drawer__close:hover {
background: rgba(194, 48, 24, 0.18);
border-color: rgba(194, 48, 24, 0.5);
color: #e84020;
}
/* ── Bloc utilisateur dans le drawer ── */
.mobile-drawer__user {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid rgba(196, 160, 82, 0.1);
background: rgba(196, 160, 82, 0.04);
}
.mobile-drawer__user-av {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
}
.mobile-drawer__user-photo {
position: absolute;
width: 30px; height: 30px;
border-radius: 50%;
object-fit: cover;
top: 7px; left: 7px;
z-index: 1;
}
.mobile-drawer__user-frame {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 2;
pointer-events: none;
}
.mobile-drawer__user-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.mobile-drawer__user-name {
font-family: var(--f-display);
font-size: 1rem;
letter-spacing: .06em;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-drawer__user-role {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--f-title);
font-size: .44rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(196, 160, 82, 0.55);
}
.mobile-drawer__nav {
display: flex;
flex-direction: column;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
flex: 1;
}
.mobile-drawer__link {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 24px;
font-family: var(--f-title);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(232, 232, 232, 0.55);
text-decoration: none;
transition:
color 0.22s,
background 0.22s,
padding-left 0.22s;
position: relative;
}
.mobile-drawer__link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 0;
border-radius: 1px;
background: var(--or-titre);
transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-drawer__link:hover,
.mobile-drawer__link--active {
color: var(--or-titre);
background: rgba(196, 160, 82, 0.05);
padding-left: 30px;
}
.mobile-drawer__link:hover::before,
.mobile-drawer__link--active::before {
height: 60%;
}
.mobile-drawer__link--admin {
color: var(--rouge-projecteur);
border-left: 2px solid rgba(194, 48, 24, 0.4);
}
.mobile-drawer__link--admin:hover {
color: #e84020;
background: rgba(194, 48, 24, 0.08);
}
.mobile-drawer__link--logout {
color: rgba(194, 48, 24, 0.7);
margin-top: 8px;
}
.mobile-drawer__link--logout:hover {
color: #e84020;
background: rgba(194, 48, 24, 0.08);
}
.mobile-drawer__actions {
padding: 16px 20px 24px;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-drawer__btn-connect {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 44px;
border-radius: 9px;
background: var(--gold-gradient);
border: none;
cursor: pointer;
text-decoration: none;
font-family: var(--f-title);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bleu-nuit);
box-shadow: 0 4px 20px rgba(184, 136, 42, 0.3);
transition: all 0.25s;
}
.mobile-drawer__btn-connect:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.mobile-drawer__btn-logout {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
height: 44px;
border-radius: 9px;
background: transparent;
border: 1px solid rgba(194, 48, 24, 0.38);
cursor: pointer;
font-family: var(--f-title);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(232, 90, 70, 0.82);
transition: all 0.25s;
}
.mobile-drawer__btn-logout:hover {
background: rgba(194, 48, 24, 0.12);
border-color: rgba(194, 48, 24, 0.65);
color: #e84020;
transform: translateY(-1px);
}
/* ── Responsive ── */
@media (max-width: 860px) {
.nav-links {
display: none;
}
.nav-hamburger {
display: flex;
margin-left: 10px;
}
.nav-btn-connect {
display: none;
}
.nav-btn-search {
display: none;
}
}
@media (max-width: 540px) {
.nav-btn-fav {
display: none;
}
}
/* ====================================================== */
/* UTILITAIRE ACCESSIBILITÉ
====================================================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ====================================================== */
/* DESIGN SYSTEM V4 — Tags, Badges & Composants enrichis
====================================================== */
/* ── Tags Films V4 — identité cinéma avec glow ── */
.tag--genre-cinema {
background: rgba(30, 16, 62, 0.65);
border-color: rgba(107, 79, 160, 0.45);
color: rgba(180, 155, 228, 0.95);
text-shadow: 0 0 10px rgba(155, 126, 208, 0.28);
}
.tag--genre-cinema:hover {
background: rgba(30, 16, 62, 0.9);
border-color: rgba(107, 79, 160, 0.8);
box-shadow: 0 0 10px rgba(107, 79, 160, 0.25);
}
.tag--film-annee {
background: rgba(10, 16, 30, 0.6);
border-color: rgba(90, 115, 145, 0.32);
color: rgba(162, 184, 210, 0.85);
font-family: var(--f-display);
letter-spacing: 2px;
}
.tag--film-saga {
background: rgba(20, 8, 8, 0.6);
border-color: rgba(194, 48, 24, 0.38);
color: rgba(220, 100, 85, 0.92);
}
.tag--film-saga:hover {
border-color: rgba(194, 48, 24, 0.65);
box-shadow: 0 0 8px rgba(194, 48, 24, 0.18);
}
.tag--film-culte {
background: rgba(58, 42, 12, 0.6);
border-color: rgba(212, 168, 67, 0.5);
color: var(--dore-clair);
box-shadow: 0 0 8px rgba(212, 168, 67, 0.12);
}
.tag--film-culte:hover {
box-shadow: 0 0 14px rgba(212, 168, 67, 0.28);
}
/* Supprimer le liseré pointillé interne sur les tags film V4 */
.tag--genre-cinema::after,
.tag--film-annee::after,
.tag--film-saga::after,
.tag--film-culte::after {
display: none;
}
/* ── Tags Recettes V4 — palette culinaire chaude ── */
.tag--recette-cat {
background: rgba(45, 22, 6, 0.6);
border-color: rgba(201, 123, 58, 0.4);
color: rgba(230, 160, 85, 0.92);
}
.tag--recette-cat:hover {
background: rgba(45, 22, 6, 0.9);
border-color: rgba(201, 123, 58, 0.7);
}
.tag--recette-facile {
background: rgba(10, 32, 18, 0.55);
border-color: rgba(40, 110, 65, 0.3);
color: rgba(100, 185, 130, 0.95);
}
.tag--recette-moyen {
background: rgba(48, 28, 4, 0.6);
border-color: rgba(212, 130, 10, 0.4);
color: rgba(230, 165, 50, 0.92);
}
.tag--recette-difficile {
background: rgba(42, 12, 8, 0.65);
border-color: rgba(168, 78, 58, 0.45);
color: rgba(218, 105, 85, 0.92);
}
.tag--recette-rapide {
background: rgba(8, 28, 46, 0.58);
border-color: rgba(60, 140, 200, 0.35);
color: rgba(115, 185, 240, 0.92);
}
.tag--recette-gourmand {
background: rgba(38, 14, 32, 0.62);
border-color: rgba(180, 80, 148, 0.38);
color: rgba(218, 130, 190, 0.92);
}
/* Supprimer le liseré pointillé interne sur les tags recette V4 */
.tag--recette-cat::after,
.tag--recette-facile::after,
.tag--recette-moyen::after,
.tag--recette-difficile::after,
.tag--recette-rapide::after,
.tag--recette-gourmand::after {
display: none;
}
/* ── Badges Nouveautés V4 ── */
.badge-new {
display: inline-flex;
align-items: center;
gap: 0.28rem;
padding: 0.24rem 0.65rem;
border-radius: 5px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
border: 1px solid transparent;
font-family: var(--f-title);
white-space: nowrap;
}
.badge-new--new {
background: rgba(30, 16, 62, 0.7);
border-color: rgba(155, 126, 208, 0.55);
color: var(--violet-clair);
box-shadow:
0 0 10px rgba(107, 79, 160, 0.22),
inset 0 1px 0 rgba(155, 126, 208, 0.1);
}
.badge-new--trending {
background: rgba(50, 24, 4, 0.7);
border-color: rgba(240, 160, 48, 0.5);
color: var(--orange-clair);
box-shadow: 0 0 10px rgba(212, 130, 10, 0.18);
}
.badge-new--popular {
background: rgba(58, 42, 12, 0.7);
border-color: rgba(242, 200, 75, 0.52);
color: var(--dore-clair);
box-shadow: 0 0 10px rgba(212, 168, 67, 0.2);
}
.badge-new--recommande {
background: rgba(10, 32, 18, 0.7);
border-color: rgba(61, 170, 114, 0.48);
color: var(--vert-clair);
box-shadow: 0 0 8px rgba(42, 122, 80, 0.18);
}
/* ── Badges Statuts Admin V4 ── */
@keyframes pulse-dot {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
.badge-status {
display: inline-flex;
align-items: center;
gap: 0.32rem;
padding: 0.28rem 0.72rem;
border-radius: 6px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
border: 1px solid transparent;
font-family: var(--f-title);
}
.badge-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.badge-status--pending {
background: rgba(58, 32, 4, 0.62);
border-color: rgba(212, 130, 10, 0.42);
color: var(--orange-clair);
}
.badge-status--pending::before {
background: var(--orange-clair);
box-shadow: 0 0 5px rgba(240, 160, 48, 0.6);
animation: pulse-dot 1.8s ease infinite;
}
.badge-status--approved {
background: rgba(10, 34, 20, 0.62);
border-color: rgba(61, 170, 114, 0.42);
color: var(--vert-clair);
}
.badge-status--approved::before {
background: var(--vert-clair);
}
.badge-status--rejected {
background: rgba(44, 10, 8, 0.62);
border-color: rgba(194, 48, 24, 0.42);
color: #e84020;
}
.badge-status--rejected::before {
background: #e84020;
}
.badge-status--proposed {
background: rgba(14, 24, 52, 0.62);
border-color: rgba(80, 120, 200, 0.42);
color: rgba(140, 180, 245, 0.95);
}
.badge-status--proposed::before {
background: rgba(140, 180, 245, 0.9);
box-shadow: 0 0 5px rgba(80, 120, 200, 0.45);
animation: pulse-dot 2s ease infinite;
}
/* ── Avis Cards V4 ── */
@keyframes shimmer-gold-avis {
0% {
background-position:
100% 100%,
0% 50%;
}
50% {
background-position:
100% 100%,
100% 50%;
}
100% {
background-position:
100% 100%,
200% 50%;
}
}
@keyframes skeleton-pulse {
0%,
100% {
opacity: 0.35;
}
50% {
opacity: 0.7;
}
}
.avis-card {
position: relative;
border-radius: 14px;
padding: 18px 18px 16px 22px;
display: flex;
flex-direction: column;
gap: 12px;
background:
linear-gradient(160deg, #0f1e30, #142234) padding-box,
rgba(255, 255, 255, 0.06) border-box;
border: 1.5px solid transparent;
box-shadow: 0 6px 24px rgba(0, 2, 12, 0.45);
overflow: hidden;
}
.avis-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(
180deg,
transparent,
rgba(196, 160, 82, 0.55) 35%,
rgba(196, 160, 82, 0.7) 50%,
rgba(196, 160, 82, 0.55) 65%,
transparent
);
border-radius: 14px 0 0 14px;
}
.avis-card--featured {
background:
linear-gradient(160deg, #0f1e30, #1b263b) padding-box,
linear-gradient(
135deg,
#7a5a14,
#b8882a,
#f2c84b,
#ffe085,
#f2c84b,
#b8882a,
#7a5a14
)
border-box;
background-size:
100% 100%,
300% 300%;
animation: shimmer-gold-avis 3s ease infinite;
box-shadow:
0 12px 40px rgba(212, 168, 67, 0.18),
0 4px 14px rgba(0, 0, 0, 0.55);
}
/* Badges avis */
.badge-avis {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 5px;
font-family: var(--f-title);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.badge-avis--coup {
background: rgba(196, 160, 82, 0.12);
border: 1px solid rgba(196, 160, 82, 0.38);
color: var(--or-titre);
}
.badge-avis--top {
background: rgba(194, 48, 24, 0.14);
border: 1px solid rgba(194, 48, 24, 0.4);
color: #e84020;
}
.badge-avis--pop {
background: rgba(14, 24, 52, 0.7);
border: 1px solid rgba(80, 120, 200, 0.4);
color: rgba(140, 180, 245, 0.95);
}
/* ── Bouton Connexion Nav V4 (Cinzel doré, 36px) ── */
.btn--connect {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 20px;
height: 36px;
border-radius: 8px;
background: var(--gold-gradient);
border: none;
cursor: pointer;
font-family: var(--f-title);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bleu-nuit);
box-shadow:
0 2px 16px rgba(184, 136, 42, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: all 0.25s;
text-decoration: none;
}
.btn--connect:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(212, 168, 67, 0.42);
filter: brightness(1.08);
color: var(--bleu-nuit);
}
/* ══════════════════════════════════════════════════════════════
SYSTÈME DE TOAST UNIFIÉ — Ciné Délices
cd-toast.js
══════════════════════════════════════════════════════════════ */
#cd-toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 7px;
pointer-events: none;
max-width: 300px;
width: calc(100vw - 32px);
}
.cd-toast {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px 9px 12px;
border-radius: 10px;
background: rgba(8, 16, 30, 0.97);
border: 1px solid rgba(255,255,255,0.06);
border-left-width: 3px;
box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
backdrop-filter: blur(16px);
pointer-events: all;
position: relative;
overflow: hidden;
transform: translateX(calc(100% + 28px));
opacity: 0;
transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.24s ease;
}
.cd-toast--visible { transform: translateX(0); opacity: 1; }
.cd-toast--leaving { transform: translateX(calc(100% + 28px)); opacity: 0; transition-duration: 0.22s; }
/* Couleurs bordure gauche par type */
.cd-toast--success { border-left-color: #3DAA72; }
.cd-toast--error { border-left-color: #e84020; }
.cd-toast--warning { border-left-color: #F0A030; }
.cd-toast--info { border-left-color: #5b8af5; }
/* Icône compacte */
.cd-toast__icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cd-toast__icon svg { width: 13px; height: 13px; }
.cd-toast--success .cd-toast__icon { background: rgba(61,170,114,0.15); color: #3DAA72; }
.cd-toast--error .cd-toast__icon { background: rgba(232,64,32,0.15); color: #e84020; }
.cd-toast--warning .cd-toast__icon { background: rgba(240,160,48,0.15); color: #F0A030; }
.cd-toast--info .cd-toast__icon { background: rgba(91,138,245,0.15); color: #8aabff; }
/* Corps */
.cd-toast__body { flex: 1; min-width: 0; }
.cd-toast__title { font-family: var(--f-body); font-size: 0.72rem; font-weight: 600; color: rgba(232,232,232,0.92); line-height: 1.35; }
.cd-toast__sub { font-family: var(--f-body); font-size: 0.63rem; font-weight: 300; color: rgba(212,220,232,0.45); line-height: 1.4; margin-top: 1px; }
/* Bouton fermeture */
.cd-toast__close {
flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px;
background: transparent; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: rgba(212,220,232,0.25); transition: color 0.15s, background 0.15s; padding: 0;
}
.cd-toast__close svg { width: 10px; height: 10px; }
.cd-toast__close:hover { color: rgba(212,220,232,0.75); background: rgba(255,255,255,0.06); }
/* Barre de progression */
.cd-toast__progress {
position: absolute; bottom: 0; left: 0;
height: 2px; width: 100%; transform-origin: left;
transform: scaleX(1); transition: transform linear;
}
.cd-toast--success .cd-toast__progress { background: rgba(61,170,114,0.45); }
.cd-toast--error .cd-toast__progress { background: rgba(232,64,32,0.45); }
.cd-toast--warning .cd-toast__progress { background: rgba(240,160,48,0.45); }
.cd-toast--info .cd-toast__progress { background: rgba(91,138,245,0.45); }
.cd-toast__progress--running { transform: scaleX(0); }
/* Responsive mobile */
@media (max-width: 480px) {
#cd-toast-container { bottom: 14px; right: 14px; left: 14px; width: auto; max-width: none; }
}
/* ══════════════════════════════════════════════════════════════
FOCUS-VISIBLE GLOBAL — Cohérence clavier (WCAG 2.4.7 / 2.4.11)
Outline or doré sur tous les éléments interactifs
══════════════════════════════════════════════════════════════ */
:focus-visible {
outline: 3px solid var(--or-100, #d4a843);
outline-offset: 3px;
border-radius: 4px;
}
/* Supprime l'outline natif si focus-visible est actif */
:focus:not(:focus-visible) { outline: none; }
/* Variante subtile pour les éléments déjà stylisés */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--or-100, #d4a843);
outline-offset: 3px;
}
/* ══════════════════════════════════════════════════════════════
SR-ONLY — Texte visible uniquement pour les lecteurs d'écran
══════════════════════════════════════════════════════════════ */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ══════════════════════════════════════════════════════════════
SKIP LINK — Navigation clavier (WCAG 2.4.1)
══════════════════════════════════════════════════════════════ */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
padding: 0.75rem 1.25rem;
background: var(--or-100, #d4a843);
color: #0a1220;
font-family: var(--f-title);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-decoration: none;
border-radius: 0 0 8px 8px;
z-index: 10000;
transition: top 0.15s ease;
outline: none;
}
.skip-link:focus { top: 0; }
/* ══════════════════════════════════════════════════════════════
PREFERS-REDUCED-MOTION — Protection animations (WCAG 2.1 SC 2.3.3)
Désactive toutes les animations non-fonctionnelles pour les
utilisateurs sensibles (épilepsie, vertiges vestibulaires)
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Exceptions fonctionnelles : spinners, progress bars */
.spinner,
.progress-bar,
.hero__xp__fill { animation-duration: 1s !important; }
}