body {
font-family: "Open Sans", Arial, sans-serif;
background-color: var(--bg-page);
color: var(--text-primary);
}
.image-container {
position: relative;
}
.image-container .heart {
position: absolute;
margin-left: -40px;
margin-top: -40px;
top: 50%;
left: 50%;
color: #FFF;
display: block;
opacity: 0.5;
}
#content .hidden{
display: none;
}
#content #loader{
display: none;
}
.round {
border-radius: 15px;
}
.container {
max-width: 960px !important;
}
/* Sur grand écran, le contenu de chaque page se recentre à la même largeur que le fil (Wall,
via .container ci-dessus) au lieu de s'étirer sur toute la fenêtre — le header/nav fixes,
eux, restent pleine largeur, exactement comme sur Wall. En dessous de 960px (mobile/tablette)
cette règle ne change rien : .black-main (Wall, Search) garde son propre traitement plein
écran déjà correct et n'est pas concerné. */
main:not(.black-main) {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 768px) {
.modal-dialog.modal-lg {
max-width: 550px; /* New width for default modal */
}
}
.text-orange, .text-orange:hover{
color: #ffbb00;
}
/* Alertes Bootstrap — remplace le jaune/rouge pastel par défaut, illisible sur fond sombre */
.alert-warning {
background-color: rgba(224,155,60,.14);
border: none;
color: #e0b25f;
border-radius: 12px;
}
.nav-link-icon[data-count]:after{
position:absolute;
right:6px;
top:2px;
content: attr(data-count);
font-size:.68rem;
padding:1px 5px;
border-radius:999px;
line-height:16px;
height:17px;
color: white;
background:var(--danger);
box-shadow: 0 0 0 2px var(--bg-page);
text-align:center;
min-width:17px;
font-weight:700;
}
.text-purple {
color: var(--purple)!important;
}
.text-pink {
color: var(--pink)!important;
}
.form-control:focus{
border-color: var(--border-subtle-strong);
-webkit-box-shadow: none;
box-shadow: none;
}
.ui-menu-item {
cursor: pointer;
}
.ui-menu-item:hover {
background-color: none;
}
.ui-menu-item-wrapper {
cursor: pointer;
padding: 5px;
margin: 0px;
}
.ui-menu-item-wrapper:hover {
background-color: none;
text-decoration: none;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0px;
max-width: 360px;
z-index: 100; /* Behind the navbar */
margin-top: 50px; /* Height of navbar */
}
.match-text {
font-family: 'La Belle Aurore';
}
/* ==========================================================================
Design system — carte profil / boutons pill / grille photo arrondie
========================================================================== */
:root {
/* Palette : noir anthracite / gris très foncé (surfaces) + mauve / fuchsia (accents).
--purple/--dark-purple/--pink sont conservées (des dizaines de règles les référencent déjà
via var()) mais pointent maintenant vers le nouveau nom : mauve, anthracite, fuchsia. */
--purple: #9b6b95;
--purple-dark: #855a80;
--purple-light: #c9a9c4;
--dark-purple: #1b1a1f;
--pink: #c13584;
--pink-dark: #a02b6e;
--danger: #e0304a;
--bg-page: #1b1a1f;
--bg-surface: #26242b;
--bg-surface-raised: #322f38;
--text-primary: #f2f0f3;
--text-secondary: rgba(242,240,243,.62);
--text-tertiary: rgba(242,240,243,.4);
--border-subtle: rgba(242,240,243,.09);
--border-subtle-strong: rgba(242,240,243,.16);
}
/* Hero photo card */
.hero-photo-card {
position: relative;
width: 100%;
height: 50vw;
max-height: 330px;
min-height: 220px;
overflow: hidden;
background-color: var(--dark-purple);
margin-top: -55px; /* annule le padding-top du (gabarit.php) réservé au header fixe absent sur ces pages */
}
.hero-photo-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-topbar {
position: absolute;
top: 0; left: 0; right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
z-index: 2;
}
.hero-topbar a,
.hero-topbar span,
.hero-topbar button {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
/* Icône plate sans fond, posée directement sur la photo (chevron retour, "..." options) */
.hero-icon-btn {
background: transparent;
border: none;
padding: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.15rem;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* Regroupe le bouton "Publier" et ses icônes compagnes (ex: photos à autoriser) en bas de la
hero-photo-card, alignés horizontalement. */
.hero-actions {
display: flex;
align-items: center;
gap: 10px;
}
.hero-consent-btn {
position: relative;
background: rgba(0,0,0,.35);
border-radius: 50%;
}
.hero-consent-btn[data-count]:after {
position: absolute;
right: -4px;
top: -4px;
content: attr(data-count);
font-size: .68rem;
padding: 1px 5px;
border-radius: 999px;
line-height: 16px;
height: 17px;
color: #fff;
background: var(--danger);
box-shadow: 0 0 0 2px var(--bg-page);
text-align: center;
min-width: 17px;
font-weight: 700;
}
.hero-gradient {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 65%;
background: linear-gradient(to top,
rgba(27,26,31,.98) 0%,
rgba(27,26,31,.92) 25%,
rgba(27,26,31,.55) 55%,
rgba(27,26,31,0) 100%);
pointer-events: none;
}
.hero-info {
position: absolute;
left: 18px; right: 18px; bottom: 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
z-index: 2;
}
.hero-name {
color: #fff;
font-weight: 800;
font-size: 1.4rem;
margin: 0;
line-height: 1.15;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Rôle + icône sexe, sous le nom — couleur alignée sur le rôle (mauve photographe / fuchsia modèle). */
.hero-role {
display: flex;
align-items: center;
gap: 5px;
font-weight: 700;
font-size: .8rem;
text-transform: uppercase;
margin: 3px 0 0;
line-height: 1.3;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.hero-role-photographer { color: var(--purple); }
.hero-role-model { color: var(--pink); }
.hero-location {
color: var(--text-secondary);
font-weight: 500;
font-size: .78rem;
margin: 0;
line-height: 1.3;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Badge "profil vérifié" à côté du nom — bleu du badge de certification Instagram */
.hero-badge-verified {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
color: #3897f0;
font-size: .85rem;
margin-left: 4px;
}
.hero-badge-verified .fa-check {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: .34rem;
color: #fff;
}
/* Pill buttons */
.btn-pill-primary {
display: block;
width: 100%;
background-color: var(--purple);
color: #fff !important;
border: none;
border-radius: 999px;
padding: .7rem 1.25rem;
font-weight: 600;
text-align: center;
text-decoration: none !important;
}
/* Bouton "Envoyer" de la modale de proposition de séance : même gabarit que les champs du
formulaire au-dessus (coins arrondis 12px, même hauteur), plutôt que la pilule habituelle.
.modal-footer a par défaut moins de padding que .modal-body (Bootstrap : .75rem vs 1rem) et
ajoute une marge de .25rem à ses enfants, donc le bouton n'avait ni la même largeur ni le
même alignement horizontal que les champs juste au-dessus sans ces deux overrides. */
#propose-shoot-submit {
border-radius: 12px;
padding: .65rem .9rem;
}
#ProposeShootModal .modal-footer {
display: block;
/* 2rem = 1rem de .modal-body + 16px de .form-field (voir style.css) : les champs du
formulaire ci-dessus sont inset des deux, donc le bouton doit l'être tout autant pour
avoir exactement la même largeur, pas seulement le padding de .modal-body seul. */
padding: 0 2rem 1rem;
}
#ProposeShootModal .modal-footer > * {
margin: 0;
}
.btn-pill-primary:hover,
.btn-pill-primary:focus { background-color: var(--purple-dark); color: #fff; }
.btn-pill-primary.disabled { background-color: var(--bg-surface-raised); color: var(--text-tertiary) !important; pointer-events: none; }
.btn-pill-accent {
display: inline-block;
background-color: var(--pink);
color: #fff !important;
border: none;
border-radius: 999px;
padding: .4rem .9rem;
font-weight: 600;
font-size: .8rem;
text-decoration: none !important;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.btn-pill-accent:hover,
.btn-pill-accent:focus { background-color: var(--pink-dark); color: #fff; }
/* Variante icône seule (bouton Contact à côté de Suivre dans le hero du profil) */
.btn-pill-accent.btn-pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: .85rem;
}
/* Pill outline clair, pour CTA secondaire sur fond sombre (ex: modal de match) */
.btn-pill-outline-light {
display: block;
width: 100%;
background: transparent;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,.55);
border-radius: 999px;
padding: .65rem 1.25rem;
font-weight: 600;
text-align: center;
text-decoration: none !important;
}
.btn-pill-outline-light:hover,
.btn-pill-outline-light:focus {
background: rgba(255,255,255,.12);
color: #fff;
}
/* Bouton fermeture (X) en cercle clair, posé sur fond sombre (ex: modal de match) */
.modal-close-light {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.14);
border: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
/* Bouton Suivre / Suivi(e) façon Instagram */
.btn-pill-follow {
display: inline-block;
background-color: var(--purple);
color: #fff !important;
border: none;
border-radius: 999px;
padding: .4rem .9rem;
font-weight: 600;
font-size: .8rem;
text-decoration: none !important;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.btn-pill-follow:hover,
.btn-pill-follow:focus { background-color: var(--purple-dark); color: #fff; }
.btn-pill-follow.is-following {
background-color: transparent;
border: 1.5px solid rgba(255,255,255,.55);
color: #fff !important;
box-shadow: none;
}
.btn-pill-follow.is-following:hover,
.btn-pill-follow.is-following:focus {
background-color: rgba(255,255,255,.12);
color: #fff !important;
}
/* Stat row — reste dans le bandeau sombre du hero, pas de rupture vers du blanc */
.stat-row {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 8px;
background-color: var(--dark-purple);
text-align: center;
}
.stat-row .stat-value {
display: block;
font-size: 1.15rem;
font-weight: 700;
color: #fff;
line-height: 1.1;
}
.stat-row .stat-label {
display: block;
font-size: .68rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 2px;
}
.stat-row .stat-tab {
cursor: pointer;
opacity: .62;
transition: opacity .15s ease;
flex: 1 1 0;
}
.stat-row .stat-tab.active {
opacity: 1;
}
.stat-row .stat-tab .stat-value i {
font-size: 1.05rem;
}
/* Profil — bascule "carousel" entre Détails / Photos / Collabs / Followers */
.profile-carousel {
position: relative;
overflow: hidden;
}
.profile-carousel-panel {
display: none;
}
.profile-carousel-panel.active {
display: block;
}
.profile-carousel-panel.slide-from-right {
animation: profileSlideFromRight .25s ease;
}
.profile-carousel-panel.slide-from-left {
animation: profileSlideFromLeft .25s ease;
}
@keyframes profileSlideFromRight {
from { transform: translateX(28px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes profileSlideFromLeft {
from { transform: translateX(-28px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.profile-list-panel {
padding: 10px 0 0;
}
.profile-list-panel .list-row:last-child,
.profile-list-panel .request-card:last-child {
margin-bottom: 2px;
}
.list-row-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
margin-left: 8px;
}
.btn-pill-xs {
display: inline-block;
border: none;
border-radius: 999px;
padding: .38rem .85rem;
font-size: .74rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.btn-pill-xs-accept {
background-color: var(--purple);
color: #fff;
}
.btn-pill-xs-accept:hover { background-color: var(--purple-dark); }
.btn-pill-xs-refuse {
background-color: var(--bg-surface-raised);
color: var(--text-secondary);
}
.btn-pill-xs-refuse:hover { background-color: var(--border-subtle-strong); }
.btn-pill-xs-cancel {
background-color: rgba(224,155,60,.16);
color: #e0b25f;
}
.btn-pill-xs-cancel:hover { background-color: rgba(224,155,60,.26); }
/* Etat "en cours" générique pour tout bouton/tuile déclenchant un appel AJAX :
masque le contenu et affiche un spinner, sans changer la taille de l'élément */
.is-busy.is-busy {
position: relative;
color: transparent !important;
pointer-events: none;
opacity: .85;
}
.is-busy::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid rgba(255,255,255,.55);
border-top-color: #fff;
border-radius: 50%;
animation: is-busy-spin .6s linear infinite;
}
/* Variante pour boutons à fond clair (texte sombre) */
.is-busy.is-busy-dark::after {
border-color: rgba(53,38,65,.2);
border-top-color: var(--dark-purple);
}
@keyframes is-busy-spin {
to { transform: rotate(360deg); }
}
/* Onglets segmentés (page Collaborations : Demandes / Acceptées / Réalisées) */
.segmented-tabs {
display: flex;
gap: 4px;
background: var(--bg-page);
border-radius: 999px;
padding: 4px;
margin: 12px;
}
.segmented-tabs a {
flex: 1;
text-align: center;
padding: .55rem .5rem;
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
color: var(--text-secondary);
text-decoration: none !important;
white-space: nowrap;
}
.segmented-tabs a.active {
background: var(--purple);
color: #fff !important;
box-shadow: 0 2px 6px rgba(155,107,149,.35);
}
/* Modal plein écran (ex: demandes de collaboration depuis le profil) */
.fullpage-modal {
position: fixed;
inset: 0;
background: var(--bg-surface);
z-index: 1090;
display: none;
flex-direction: column;
}
.fullpage-modal.show {
display: flex;
}
/* Une modale Bootstrap (ex: "Ajouter une photo") ouverte par-dessus un fullpage-modal
(ex: la modale Collaborations) doit rester au premier plan : Bootstrap les pose par
défaut à 1050/1040, sous le fullpage-modal (1090). */
.modal {
z-index: 1110;
}
.modal-backdrop {
z-index: 1100;
}
.fullpage-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
flex-shrink: 0;
}
.fullpage-modal-header h1 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.fullpage-modal-close {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bg-page);
border: none;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fullpage-modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding-bottom: 24px;
}
/* La modale Collaborations liste des .list-row (fond blanc) : sur le fond blanc par défaut
du fullpage-modal elles se fondaient dedans. On lui donne le même gris clair que le reste
de l'appli pour que les cartes ressortent exactement comme sur Messages/Notifications. */
#RequestsModal .fullpage-modal-body {
background-color: var(--bg-page);
}
/* Spinner affiché le temps que la visionneuse photo (ShowPicture) charge ses données */
.picture-viewer-spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
border: 3px solid rgba(255,255,255,.25);
border-top-color: #fff;
border-radius: 50%;
animation: is-busy-spin .7s linear infinite;
z-index: 3;
}
.fullpage-modal.loading .picture-viewer-spinner {
display: block;
}
.fullpage-modal.loading .image-container img {
opacity: 0;
}
/* Visionneuse photo (picture.php) : bandeau équipe + fermeture en haut, likes compacts
(cœur + nombre) en bas — deux vrais bandeaux (pas des overlays), la photo respire en
noir pur entre les deux, comme les cartes du Wall/Search. */
.picture-viewer-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
background: #000;
flex-shrink: 0;
}
.picture-viewer-crew {
display: flex;
gap: 8px;
overflow-x: auto;
flex: 1 1 auto;
min-width: 0;
}
.picture-viewer-crew::-webkit-scrollbar { display: none; }
.picture-viewer-likes {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
background: #000;
flex-shrink: 0;
}
.picture-viewer-likes .heart {
font-size: 1.4rem;
cursor: pointer;
color: var(--text-secondary);
}
.picture-viewer-likes .fas.heart {
color: var(--danger);
}
.picture-viewer-likes span {
font-size: .85rem;
color: var(--text-secondary);
}
.picture-viewer-likes strong {
color: var(--text-primary);
}
/* Actions réservées à l'équipe de la photo (télécharger / publier), à l'opposé des likes */
.picture-viewer-crew-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.picture-viewer-action-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--bg-page);
color: var(--text-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .92rem;
text-decoration: none !important;
cursor: pointer;
flex-shrink: 0;
}
.picture-viewer-action-btn.picture-viewer-action-btn-primary {
background: var(--purple);
color: #fff;
}
.picture-viewer-action-btn.disabled {
opacity: .45;
pointer-events: none;
cursor: default;
}
.requests-tab-panel {
display: none;
}
.requests-tab-panel.active {
display: block;
}
/* Page Recherche */
.app-header-search {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1030;
height: 52px;
background: var(--bg-page);
border-bottom: 1px solid var(--border-subtle-strong);
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
}
.app-header-search .search-input-wrap {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-page);
border-radius: 999px;
padding: .5rem .9rem;
color: var(--text-secondary);
}
.app-header-search .search-input-wrap i {
font-size: .82rem;
}
.app-header-search input {
border: none;
background: transparent;
outline: none;
flex: 1;
font-size: .9rem;
color: var(--text-primary);
min-width: 0;
}
.app-header-search input::placeholder { color: var(--text-secondary); }
.app-header-search-cancel {
background: none;
border: none;
color: var(--purple);
font-weight: 700;
font-size: .88rem;
padding: 4px 2px;
white-space: nowrap;
flex-shrink: 0;
}
/* Menu "..." (paramètres) */
.settings-sheet .modal-content {
border-radius: 20px;
border: none;
overflow: hidden;
}
.settings-menu-item {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 20px;
background: none;
border: none;
color: var(--text-primary) !important;
text-decoration: none !important;
text-align: left;
font-family: inherit;
font-weight: 600;
font-size: .92rem;
cursor: pointer;
}
.settings-menu-item:hover {
background: var(--bg-surface-raised);
}
.settings-menu-item i {
width: 20px;
text-align: center;
color: var(--purple);
}
.settings-menu-item.danger {
color: var(--danger) !important;
}
.settings-menu-item.danger i {
color: var(--danger);
}
.settings-menu-cancel {
display: block;
width: calc(100% - 28px);
margin: 8px 14px 14px;
}
/* Formulaires (édition profil, mot de passe, inscription...) */
.form-field {
margin-bottom: 14px;
padding: 0 16px;
}
.form-field label {
display: block;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="password"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
width: 100%;
border: none;
background: var(--bg-surface-raised);
border-radius: 12px;
padding: .65rem .9rem;
font-size: .9rem;
color: var(--text-primary);
font-family: inherit;
resize: vertical;
}
/* garde une partie de son chrome natif (icône calendrier) qui impose une
hauteur de contenu minimale légèrement plus grande que les autres champs, même avec un padding,
une font-size et un line-height strictement identiques (vérifié : ~2px d'écart malgré ça, sur
Chromium comme WebKit) — d'où une hauteur visuelle différente malgré width:100% partagé.
-webkit-appearance:none limite déjà l'écart de largeur ; on fixe aussi une hauteur explicite
commune (au lieu de laisser le padding seul la déterminer) pour égaliser le reste au pixel près. */
.form-field input[type="date"] {
-webkit-appearance: none;
appearance: none;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="password"],
.form-field input[type="date"],
.form-field select {
height: 44px;
}
/* Le