:root {
    --couleur-fond: #f7f5f3;
    --couleur-texte: #23201d;
    --couleur-texte-discret: #6b6459;
    --couleur-accent: #b5834c;
    --couleur-accent-fonce: #96693a;
    --couleur-surface: #fff;
    --couleur-bordure: #e5e0da;
    --couleur-succes: #2e7d32;
    --couleur-erreur: #c62828;
    --ombre-carte: 0 1px 2px rgba(35, 32, 29, 0.06), 0 6px 20px -10px rgba(35, 32, 29, 0.18);
    --ombre-carte-hover: 0 2px 4px rgba(35, 32, 29, 0.08), 0 14px 28px -12px rgba(35, 32, 29, 0.24);
    --rayon: 10px;
}

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: var(--couleur-fond); color: var(--couleur-texte); }
.entete { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--couleur-texte); color: #fff; position: relative; }
.entete-logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; }
.entete-nav { display: flex; gap: 1rem; align-items: center; }
.entete-actions { display: flex; align-items: center; gap: 0.75rem; }
.lien-entete { color: #fff; text-decoration: underline; }
.lien-entete-actif { text-decoration: none; font-weight: 700; pointer-events: none; cursor: default; }
.separateur-nav { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.3); }

.bouton-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer; }
.bouton-burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.bouton-burger-actif span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bouton-burger-actif span:nth-child(2) { opacity: 0; }
.bouton-burger-actif span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.contenu { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.contenu.transition-fondu-sortie { transition: opacity 0.6s ease; opacity: 0; }
@keyframes fondu-entree { from { opacity: 0; } to { opacity: 1; } }
.page-souvenir { animation: fondu-entree 0.6s ease; }

.switcher-langue { display: flex; gap: 0.4rem; }
.switcher-langue a { color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.2rem 0.35rem; border-radius: 4px; }
.switcher-langue a:hover { color: #fff; }
.switcher-langue a.langue-active { color: #fff; background: rgba(255, 255, 255, 0.15); }

/* ==========================================================================
   Responsive — base (en-tête, conteneur), commun à toutes les pages.
   Le contenu de chaque page a ses propres ajustements plus bas.
   ========================================================================== */
@media (orientation: portrait), (max-width: 500px) {
    .entete { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
    .entete-actions { display: flex; margin-left: auto; }
    .bouton-burger { display: flex; }
    .entete-nav {
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .entete-nav.menu-ouvert { max-height: 400px; gap: 0.75rem; padding-top: 0.75rem; }
    .separateur-nav { width: 100%; height: 1px; align-self: auto; }
}
@media (min-width: 501px) and (orientation: landscape) {
    .entete { justify-content: flex-start; }
    .entete-nav { order: 1; margin-left: auto; }
    .entete-actions { order: 2; margin-left: 0.75rem; }
}
@media (max-width: 700px) {
    .contenu { padding: 1.25rem 1rem; }
}
@media (max-width: 480px) {
    .formulaire { max-width: 100%; }
}

.page-erreur { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 2rem 1rem; text-align: center; }
.page-erreur-carte { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 2.5rem 2rem; max-width: 420px; width: 100%; }
.page-erreur-code { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.2em; color: var(--couleur-accent-fonce); }
.page-erreur-carte h1 { margin: 0 0 0.5rem; font-size: 1.4rem; }
.page-erreur-carte p { color: var(--couleur-texte-discret); margin: 0 0 1.5rem; }
.page-erreur-carte .bouton { padding: 0.65rem 1.4rem; }

.page-erreur-obturateur { position: relative; width: 92px; height: 92px; margin: 0 auto 1.5rem; }
.page-erreur-obturateur span { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; clip-path: polygon(50% 50%, 88% 6%, 100% 34%); background: var(--couleur-accent); opacity: 0.82; border-radius: 4px; transition: opacity 0.2s; }
.page-erreur-obturateur span:nth-child(1) { transform: rotate(0deg); }
.page-erreur-obturateur span:nth-child(2) { transform: rotate(60deg); }
.page-erreur-obturateur span:nth-child(3) { transform: rotate(120deg); }
.page-erreur-obturateur span:nth-child(4) { transform: rotate(180deg); }
.page-erreur-obturateur span:nth-child(5) { transform: rotate(240deg); }
.page-erreur-obturateur span:nth-child(6) { transform: rotate(300deg); }

.page-erreur-obturateur-fermee span { clip-path: polygon(50% 50%, 97% 2%, 100% 46%); background: var(--couleur-erreur); opacity: 0.75; }

.page-erreur-obturateur-grippee span { background: var(--couleur-erreur); opacity: 0.7; }
.page-erreur-obturateur-grippee span:nth-child(3) { transform: rotate(95deg) scale(0.85); opacity: 0.45; }
.page-erreur-obturateur-grippee span:nth-child(5) { transform: rotate(265deg) scale(1.1); }

.formulaire { display: flex; flex-direction: column; gap: 0.75rem; max-width: 420px; }
.formulaire label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.formulaire-large { max-width: clamp(640px, 55vw, 900px); }
@media (max-width: 700px) { .formulaire-large { max-width: 100%; } }
.formulaire-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
@media (max-width: 480px) { .formulaire-ligne { grid-template-columns: 1fr; } }
.formulaires-cote-a-cote { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
/* Pages composées d'un unique formulaire étroit (mon-compte, nouvelle demande de shooting…) :
   un panneau d'aide occupe l'espace libre à droite plutôt que de le laisser vide. */
.page-formulaire-aide { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 2rem; align-items: start; }
.panneau-aide { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1.25rem 1.5rem; }
.panneau-aide h2 { margin: 0 0 0.6rem; font-size: 1rem; }
.panneau-aide p { color: var(--couleur-texte-discret); font-size: 0.9rem; margin: 0; }
.panneau-aide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.panneau-aide a { color: var(--couleur-accent-fonce); font-weight: 600; text-decoration: none; }
.panneau-aide a:hover { text-decoration: underline; }
@media (max-width: 780px) { .page-formulaire-aide { grid-template-columns: 1fr; } }
#champs-planification { display: flex; flex-direction: column; gap: 0.75rem; }
#champs-planification[hidden] { display: none; }
input, select, button, textarea { font: inherit; padding: 0.5rem; border-radius: 6px; border: 1px solid #ccc; }

.champ-mot-de-passe { display: flex; align-items: stretch; gap: 0.35rem; }
.champ-mot-de-passe input { flex: 1; min-width: 0; }
.bouton-oeil { flex-shrink: 0; background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid #ccc; padding: 0.5rem 0.7rem; }
.bouton-oeil:hover { background: var(--couleur-fond); }
.bouton-oeil-actif { background: var(--couleur-accent); color: #fff; border-color: var(--couleur-accent); }
button { cursor: pointer; background: var(--couleur-texte); color: #fff; border: none; }
button:hover { background: #45403a; }
button.actif { background: var(--couleur-accent); }
a.bouton { display: inline-block; cursor: pointer; background: var(--couleur-texte); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; }
a.bouton:hover { background: #45403a; }
.lien-bouton { display: inline-block; background: var(--couleur-texte); color: #fff; padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; margin-top: 0.5rem; }

.bouton-deconnexion { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0; cursor: pointer; border: none; font: inherit; perspective: 40px; transition: background 0.2s ease; }
.bouton-deconnexion:hover { background: #45403a; }
.bouton-deconnexion .icone-deconnexion-cadre { transition: transform 0.25s ease; transform-origin: 3px 12px; }
.bouton-deconnexion .icone-deconnexion-fleche { transition: transform 0.25s ease; transform-origin: 12px 12px; }
.bouton-deconnexion:hover .icone-deconnexion-cadre { transform: rotateY(35deg); }
.bouton-deconnexion:hover .icone-deconnexion-fleche { transform: translateX(3px); }

.ligne-client-projet { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem 0; border-bottom: 1px solid var(--couleur-bordure); }
.ligne-client-projet:last-child { border-bottom: none; }
.ligne-client-projet--termine { opacity: 0.55; }
.ligne-client-projet--termine:hover { opacity: 0.85; }
.ligne-client-infos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ligne-client-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.ligne-client-actions form { display: inline-flex; margin: 0; }
.ligne-client-actions button { font-size: 0.75rem; padding: 0.25rem 0.55rem; }
.bouton-icone { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0 !important; border-radius: 50%; font-size: 0.85rem; line-height: 1; }
.bouton-icone-danger { background: var(--couleur-erreur); }
.bouton-icone-danger:hover { background: #8e1c1c; }

.badge { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--couleur-bordure); }
.badge-stade1 { background: var(--couleur-bordure); color: var(--couleur-texte-discret); }
.badge-stade2 { background: var(--couleur-accent); color: #fff; }
.badge-mode-test { background: var(--couleur-accent); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-migration-terminee { background: #2e7d32; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-jamais-connecte { background: var(--couleur-bordure); color: var(--couleur-texte-discret); }
.badge-lien-attente { background: #e65100; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-alerte { background: var(--couleur-erreur); color: #fff; }
.badge-collab { background: var(--couleur-accent); color: #fff; margin-left: 0.35rem; }
.section-a-valider .carte-photo-livree { display: flex; flex-direction: column; gap: 0.5rem; }

.section-galeries-groupe { margin-top: 2rem; }
.section-galeries-groupe h2 { margin-bottom: 0.25rem; }
.section-galeries-archivees { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px dashed var(--couleur-bordure); opacity: 0.75; }

.grille-galeries { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.carte-galerie { position: relative; display: flex; flex-direction: column; gap: 0.4rem; background: var(--couleur-surface); border-radius: var(--rayon); padding: 1rem; box-shadow: var(--ombre-carte); text-decoration: none; color: var(--couleur-texte); border: 3px solid transparent; }
.carte-galerie img, .carte-galerie-vide { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; border-radius: 6px; background: var(--couleur-bordure); }
.carte-galerie-nom { font-weight: 600; }
.carte-galerie-clients { font-size: 0.8rem; color: var(--couleur-texte-discret); }
.carte-galerie-livraison { font-size: 0.8rem; color: var(--couleur-accent-fonce); font-weight: 600; }
.carte-galerie.carte-galerie-selectionnee { border-color: var(--couleur-accent); }
.case-galerie-lot { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; display: flex; padding: 0.2rem; background: var(--couleur-surface); border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.case-galerie-lot input { width: 1.1rem; height: 1.1rem; margin: 0; cursor: pointer; }

.section-lot-galeries { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--couleur-surface); border-left: 4px solid var(--couleur-accent); border-radius: var(--rayon); display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.section-lot-galeries h2 { margin: 0; }
.section-lot-galeries .formulaire { flex-direction: row; align-items: flex-end; gap: 0.75rem; }

.filtres-galeries { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.25rem; padding: 0.75rem 1rem; background: var(--couleur-surface); border-left: 4px solid var(--couleur-accent); border-radius: var(--rayon); }

.synthese-factures { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); font-weight: 600; }

.section-a-traiter { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--couleur-surface); border-left: 4px solid var(--couleur-erreur); border-radius: var(--rayon); }
.section-a-traiter h2 { margin-top: 0; }
.liste-a-traiter { margin: 0; padding-left: 1.2rem; }
.liste-a-traiter li { margin-bottom: 0.35rem; }
.liste-a-traiter-action { display: inline-block; margin-left: 0.5rem; }
.liste-a-traiter-action button, a.liste-a-traiter-action { font-size: 0.85rem; padding: 0.15rem 0.5rem; }
.liste-a-traiter-ignorer .bouton-texte { background: none; border: none; padding: 0; font-size: 0.85rem; color: var(--couleur-texte-attenue, #777); text-decoration: underline; cursor: pointer; }
.liste-a-traiter-ignorer .bouton-texte:hover { color: var(--couleur-erreur); }
.a-traiter-categorie { margin-bottom: 0.6rem; }
.a-traiter-categorie:last-child { margin-bottom: 0; }
.a-traiter-categorie summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; list-style: none; }
.a-traiter-categorie summary::-webkit-details-marker { display: none; }
.a-traiter-categorie summary::before { content: '▸'; display: inline-block; width: 1.1rem; transition: transform 0.15s ease; }
.a-traiter-categorie[open] summary::before { transform: rotate(90deg); }
.a-traiter-categorie summary .badge { font-weight: 600; }
.a-traiter-categorie .liste-a-traiter { margin: 0.35rem 0 0.5rem; }
.filtre-galerie { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }

.section-selection, .section-livree { margin-top: 2.5rem; }
.section-selection h2, .section-livree h2 { margin-bottom: 0.5rem; }

.actions-telechargement { display: flex; gap: 0.75rem; margin: 1rem 0; flex-wrap: wrap; }
.actions-telechargement button { background: var(--couleur-accent); }
.actions-telechargement button:hover { background: var(--couleur-accent-fonce); }
.actions-telechargement button[value="selection"] { background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); }
.actions-telechargement button[value="selection"]:hover { background: var(--couleur-fond); }

.grille-photos-livrees { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.carte-photo-livree { background: var(--couleur-surface); border-radius: var(--rayon); padding: 0.75rem; box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.carte-photo-livree label { display: block; width: 100%; cursor: pointer; }
.carte-photo-livree img { width: 100%; border-radius: 6px; display: block; }
.carte-photo-livree input[type="checkbox"] { margin-bottom: 0.4rem; }

.grille-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.carte-photo { background: var(--couleur-surface); border-radius: var(--rayon); padding: 1rem; box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: 0.5rem; border: 3px solid transparent; }
.carte-photo[hidden] { display: none; }
.carte-photo img { width: 100%; border-radius: 6px; }
.carte-photo img.photo-cliquable { cursor: pointer; }
.carte-photo.carte-selectionnee { border-color: var(--couleur-accent); }
.vignette-video-indisponible { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--couleur-fond); border: 1px dashed var(--couleur-bordure); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--couleur-texte-discret); text-align: center; padding: 0.5rem; }
.vignette-video-indisponible span { font-size: 0.8rem; word-break: break-word; }
.dossier-videos-indisponibles { margin-top: 1.5rem; border: 1px solid var(--couleur-bordure); border-radius: 6px; padding: 0.75rem 1rem; }
.dossier-videos-indisponibles summary { cursor: pointer; font-weight: 600; }
.dossier-videos-indisponibles .galerie-masonry { margin-top: 0.75rem; }

/* Pattern unique pour tous les champs de recherche/filtre admin (recherche-clients,
   recherche-photos, et les champs scopés par id sans classe dédiée type
   #recherche-photos-selection) : même apparence, seuls largeur/marge varient par contexte. */
input[type="search"] { border: 1px solid var(--couleur-bordure); border-radius: 6px; padding: 0.5rem 0.7rem; background: var(--couleur-surface); color: var(--couleur-texte); }
input[type="search"]::placeholder { color: var(--couleur-texte-discret); }

.recherche-clients { display: block; width: 100%; margin-bottom: 0.4rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.case[hidden] { display: none; }

.recherche-photos { display: block; width: 100%; max-width: 320px; margin: 0.75rem 0; padding: 0.5rem 0.7rem; }

.filtres-galeries-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.recherche-galeries { display: block; width: 100%; max-width: 200px; margin: 0; padding: 0.5rem 0.7rem; }
.filtre-type-prestation, .filtre-statut-galerie { padding: 0.5rem 0.7rem; }
.section-galeries-groupe[hidden] { display: none; }
.nom-fichier-photo { font-size: 0.75rem; word-break: break-all; margin: 0; }

.barre-assignation { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0; padding: 0.75rem; background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); position: sticky; top: 0.75rem; z-index: 10; }
/* flex-basis:100% force chaque ligne sur sa propre ligne dans le flex-wrap du parent, sans
   changer .barre-assignation elle-même (toujours une seule ligne quand elle n'a pas de
   .barre-assignation-ligne enfant, ex : onglet Retouche). */
.barre-assignation-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; flex: 1 0 100%; }
/* Un bouton "Tout sélectionner" partagé peut précéder plusieurs formulaires d'action (assigner,
   supprimer...) dans la même barre : display:contents les fait participer au flex du parent
   sans ajouter de boîte englobante qui casserait l'alignement. */
.barre-assignation form { display: contents; }

.liste-versions-hd { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.ligne-version-hd { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--couleur-fond); border-radius: 6px; padding: 0.3rem 0.5rem; }
.ligne-version-hd form { display: inline; }
.ligne-version-hd button { font-size: 0.75rem; padding: 0.2rem 0.5rem; }

.carte-import-lot-galerie { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1rem; margin-bottom: 0.9rem; border-left: 4px solid var(--couleur-succes); }
.carte-import-lot-galerie.import-lot-galerie-a-verifier { border-left-color: #e08a1e; }
.import-lot-titre-galerie { margin: 0 0 0.5rem; }
.carte-import-lot-galerie > .import-lot-groupe-galerie { margin-bottom: 0.5rem; }
.carte-import-lot-ligne { background: none; box-shadow: none; border-top: 1px solid var(--couleur-fond); border-left: 3px solid var(--couleur-succes); padding: 0.85rem 0 0.85rem 0.6rem; margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.carte-import-lot-ligne.import-lot-ligne-a-verifier { border-left-color: #e08a1e; }
.carte-import-lot-galerie .carte-import-lot-ligne:first-of-type { border-top: 1px dashed var(--couleur-bordure); }
.carte-import-lot-ligne p { flex-basis: 100%; margin: 0; }
.import-lot-ligne-ignoree { opacity: 0.5; border-left-color: var(--couleur-bordure); }
.import-lot-badge-statut { background: var(--couleur-succes); color: #fff; }
.import-lot-badge-statut.import-lot-badge-a-verifier { background: #e08a1e; }
.import-lot-ligne-pourcentage { background: var(--couleur-accent); color: #fff; }
.import-lot-groupe-galerie { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.import-lot-formulaire-galerie { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; background: var(--couleur-fond); border-radius: 6px; padding: 0.6rem; margin-top: 0.5rem; }
.import-lot-formulaire-galerie[hidden] { display: none; }
.import-lot-formulaire-galerie .erreur { flex-basis: 100%; margin: 0; }
.combobox { position: relative; display: inline-block; }
.combobox-champ { min-width: 14rem; }
.combobox-liste { position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 20; min-width: 100%; max-height: 14rem; overflow-y: auto; background: var(--couleur-surface); box-shadow: var(--ombre-carte); border-radius: var(--rayon); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.1rem; }
.combobox-liste[hidden] { display: none; }
.combobox-option { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.4rem 0.5rem; border-radius: 4px; cursor: pointer; color: var(--couleur-texte); }
.combobox-option:hover { background: var(--couleur-fond); }
.combobox-groupe { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--couleur-texte-discret); padding: 0.4rem 0.5rem 0.1rem; }
.combobox-vide { padding: 0.4rem 0.5rem; color: var(--couleur-texte-discret); font-size: 0.9rem; }

.liste-orphelines { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.carte-orpheline { background: var(--couleur-surface); border-radius: var(--rayon); padding: 1rem; box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: 0.5rem; }
.miniature-orpheline { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--couleur-bordure); }
.actions-photo form, .avis form { display: inline-flex; gap: 0.5rem; }
.tags { font-size: 0.85rem; color: var(--couleur-texte-discret); margin: 0; }
.commentaires p { font-size: 0.85rem; margin: 0.25rem 0; }
.commentaires form { display: flex; gap: 0.5rem; }
/* Bulles de discussion : modèle à gauche, photographe à droite (comme une messagerie). */
.bulle-commentaire { max-width: 85%; padding: 0.35rem 0.65rem; border-radius: 10px; }
.bulle-modele { margin-right: auto; background: var(--couleur-fond); border-bottom-left-radius: 2px; }
.bulle-photographe { margin-left: auto; background: var(--couleur-accent); color: #fff; text-align: right; border-bottom-right-radius: 2px; }
.ok { color: var(--couleur-succes); font-weight: 600; }
.badge-selection-envoyee { display: inline-block; background: var(--couleur-fond); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; margin: 0; }
/* .galerie-masonry remet le padding de .carte-photo à 0 (image à bord perdu, le texte vit
   normalement dans .carte-photo-corps) — cette carte simplifiée n'a pas ce conteneur, il lui
   faut son propre padding pour que le badge ne colle pas aux bords de la carte. */
.galerie-masonry .carte-photo-simple { padding: 0.85rem 1rem 1rem; box-shadow: none; }
.erreur { color: var(--couleur-erreur); }
.estimation { background: #fff3e0; border: 1px solid #e5c9a3; border-radius: 6px; padding: 0.5rem 0.75rem; display: inline-block; }
.aide { font-size: 0.8rem; color: var(--couleur-texte-discret); margin: 0; }

fieldset { border: 1px solid #ccc; border-radius: 6px; }
.case { display: flex; flex-direction: row !important; align-items: center; gap: 0.5rem !important; }

.formulaire-pleine-largeur { max-width: 100%; }
.formulaire-pleine-largeur .volet-discret { font-size: 0.85rem; color: var(--couleur-texte-discret); }
.formulaire-pleine-largeur .volet-discret h3 { font-size: 0.95rem; }
.cadrage-tenue-apercu { max-width: 160px; border-radius: 8px; display: block; }
.bouton-pleine-largeur { width: 100%; }
.bouton-flottant { position: sticky; bottom: 1rem; display: flex; z-index: 5; }
.bouton-flottant button { width: 100%; box-shadow: var(--ombre-carte); }

.nav-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #ddd; }
.nav-admin a { color: var(--couleur-texte); font-weight: 600; text-decoration: none; }
.nav-admin a:hover { text-decoration: underline; }
.nav-admin-configuration { position: relative; }
.nav-admin-configuration summary { cursor: pointer; font-weight: 600; list-style: none; }
.nav-admin-configuration summary::-webkit-details-marker { display: none; }
.nav-admin-configuration summary::after { content: ' ▾'; }
.nav-admin-configuration[open] summary::after { content: ' ▴'; }
.nav-admin-configuration-liste { position: absolute; top: calc(100% + 0.5rem); left: 0; display: flex; flex-direction: column; gap: 0.5rem; background: var(--couleur-surface); box-shadow: var(--ombre-carte); border-radius: var(--rayon); padding: 0.75rem 1rem; z-index: 10; min-width: max-content; }

/* Timeline admin — heatmap (une seule teinte, du plus clair au plus foncé selon la densité). */
.heatmap-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 1rem; overflow-x: auto; }
.heatmap-entete, .heatmap-ligne-annee { display: grid; grid-template-columns: 3.5rem repeat(12, 1fr); gap: 4px; align-items: center; }
.heatmap-ligne-annee { text-decoration: none; color: inherit; }
.heatmap-annee-libelle { font-weight: 700; font-size: 0.85rem; }
.heatmap-mois-libelle { font-size: 0.75rem; color: var(--couleur-texte-discret); text-align: center; }
.heatmap-mois { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 4px; min-width: 22px; font-size: 0.7rem; font-weight: 600; line-height: 1; }
.heatmap-niveau-0 { background: var(--couleur-bordure); color: var(--couleur-texte-discret); }
.heatmap-niveau-1 { background: #ecdcc5; color: var(--couleur-texte); }
.heatmap-niveau-2 { background: #d9b78c; color: var(--couleur-texte); }
.heatmap-niveau-3 { background: var(--couleur-accent); color: #fff; }
.heatmap-niveau-4 { background: #8a5c2e; color: #fff; }
.heatmap-ligne-annee:hover .heatmap-mois { outline: 1px solid var(--couleur-texte-discret); outline-offset: -1px; }
.heatmap-legende { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--couleur-texte-discret); }
.heatmap-legende .heatmap-mois { width: 16px; min-width: 16px; }

/* Timeline admin — bilan annuel (chiffres clés + frise horizontale). */
.bilan-annuel-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.25rem 0; }
.bilan-annuel-chiffre { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1rem 1.5rem; min-width: 180px; }
.bilan-annuel-chiffre strong { display: block; font-size: 2rem; color: var(--couleur-accent-fonce); line-height: 1; }
.bilan-annuel-chiffre span { font-size: 0.85rem; color: var(--couleur-texte-discret); }
.bilan-annuel-univers-noms { margin: 0.4rem 0 0; font-size: 0.8rem; }
.bilan-photos-marquantes { columns: unset; column-width: 200px; }

.frise-horizontale { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; margin-top: 1rem; }
.frise-horizontale-item { flex: 0 0 auto; min-width: 160px; max-width: 200px; background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 0.75rem 1rem; text-decoration: none; color: var(--couleur-texte); border-top: 3px solid var(--couleur-accent); }
.frise-horizontale-item:hover { box-shadow: var(--ombre-carte-hover); }
.frise-horizontale-date { display: block; font-size: 0.75rem; color: var(--couleur-texte-discret); }
.frise-horizontale-nom { display: block; font-weight: 600; margin-top: 0.2rem; }
.frise-horizontale-univers { display: block; font-size: 0.8rem; color: var(--couleur-texte-discret); margin-top: 0.2rem; }

.details-badges { margin: 0.5rem 0; }
.details-badges summary { cursor: pointer; font-weight: 600; }
.details-badges .formulaire-badges, .details-badges .formulaire { margin-top: 0.5rem; }

.formulaire-badges fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem 1rem; }
.formulaire-badges button[type="submit"] { margin-top: 0.75rem; }

.liste-badges-manuels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ligne-badge-manuel { display: flex; align-items: center; gap: 0.75rem; }
.ligne-badge-manuel .badge-nom { font-weight: 600; min-width: 220px; }
.formulaire-badge-manuel { display: inline; }

.entete-fiche { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.entete-fiche h1 { margin: 0; }
.entete-fiche form { margin: 0; }

.ligne-client-nouveau { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ligne-client-nouveau[hidden] { display: none; }
.select-badges-client { min-width: 160px; }
.select-badges-client:disabled { opacity: 0.4; }

.sous-onglets { display: flex; gap: 0.35rem; margin: 1.5rem 0; padding: 0.3rem; background: var(--couleur-surface); border-radius: 999px; box-shadow: var(--ombre-carte); width: fit-content; }
.sous-onglets button { background: transparent; color: var(--couleur-texte-discret); border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.9rem; font-weight: 600; }
.sous-onglets button:hover { background: var(--couleur-fond); color: var(--couleur-texte); }
.sous-onglets button.onglet-actif { background: var(--couleur-texte); color: #fff; }
.sous-onglets button.onglet-actif:hover { background: var(--couleur-texte); }
.sous-onglets button.onglet-danger { color: var(--couleur-erreur); }
.sous-onglets button.onglet-danger.onglet-actif { background: var(--couleur-erreur); color: #fff; }
@media (max-width: 600px) {
    .sous-onglets { width: 100%; flex-wrap: wrap; border-radius: var(--rayon); }
    .sous-onglets button { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
}
.aide-danger { font-size: 0.8rem; color: var(--couleur-erreur); font-weight: 600; margin: 0 0 0.75rem; }

.bandeau-apercu { display: flex; justify-content: center; align-items: center; gap: 1rem; background: var(--couleur-accent); color: #fff; padding: 0.5rem 1rem; text-align: center; }
.bandeau-apercu button { background: var(--couleur-texte); }
.bandeau-lien-acces { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; background: #e65100; color: #fff; padding: 0.5rem 1rem; text-align: center; }
.bandeau-lien-acces .lien-bouton { background: var(--couleur-texte); color: #fff; }

.barre-filtres-utilisateurs { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.barre-filtres-utilisateurs #recherche-utilisateurs { max-width: 200px; }
.liste-utilisateurs { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.ligne-utilisateur { display: flex; align-items: center; gap: 1rem; background: var(--couleur-surface); border-radius: 8px; padding: 0.75rem 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08); flex-wrap: wrap; }
.ligne-utilisateur[hidden] { display: none; }
.ligne-utilisateur-form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; flex: 1; }
.ligne-utilisateur-form[hidden] { display: none; }
.ligne-utilisateur-lecture { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; flex: 1; }
.ligne-utilisateur-lecture[hidden] { display: none; }
.ligne-utilisateur-email { color: var(--couleur-texte-discret); }
.ligne-utilisateur-nom { min-width: 160px; font-weight: 600; }
.section-danger { background: rgba(180, 40, 40, 0.06); border: 1px solid rgba(180, 40, 40, 0.25); border-left: 4px solid var(--couleur-erreur); border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }

.liste-collaborateurs { display: flex; flex-direction: column; gap: 0.75rem; }
.ligne-collaborateur { display: flex; align-items: center; gap: 1rem; background: var(--couleur-fond); border-radius: 8px; padding: 0.75rem 1rem; flex-wrap: wrap; }
.ligne-collaborateur[hidden] { display: none; }
.ligne-collaborateur-nom { min-width: 160px; font-weight: 600; }
.ligne-collaborateur--masquee { opacity: 0.55; }
.ligne-collaborateur--masquee .ligne-collaborateur-nom { font-weight: normal; }

.modale-confirmation-overlay { position: fixed; inset: 0; background: rgba(23, 21, 19, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modale-confirmation-overlay[hidden] { display: none; }
.modale-confirmation { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte-hover); padding: 1.5rem; max-width: 420px; width: 100%; }
.modale-confirmation p { margin: 0 0 1.25rem; white-space: pre-line; }
.modale-confirmation-actions { display: flex; justify-content: flex-end; gap: 0.75rem; }

.toast-message { position: fixed; bottom: 1.5rem; right: 1.5rem; max-width: min(90vw, 360px); padding: 0.85rem 1.1rem; border-radius: var(--rayon); box-shadow: var(--ombre-carte-hover); color: #fff; background: var(--couleur-accent); opacity: 0; transform: translateY(0.5rem); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 1100; }
.toast-message.toast-erreur { background: var(--couleur-erreur); }
.toast-message.toast-visible { opacity: 1; transform: translateY(0); }

.bouton-remonter { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; border: none; background: var(--couleur-accent); color: #fff; box-shadow: var(--ombre-carte-hover); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 90; }
.bouton-remonter.bouton-remonter-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bouton-remonter:hover { background: #45403a; }
/* Overlay plein écran, rien à remonter derrière lui tant qu'il est ouvert. */
body:has(.swipe-conteneur:not([hidden])) .bouton-remonter { display: none; }
.bouton-danger { background: var(--couleur-erreur); }
.bouton-danger:hover { background: #8e1c1c; }
.zone-danger { margin-top: 2.5rem; padding: 1rem; border: 1px solid var(--couleur-erreur); border-radius: 8px; }

.filtres-mails { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1.25rem; margin-top: 1rem; }
.filtres-mails label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.filtres-mails-reset { font-size: 0.85rem; align-self: center; }

.liste-mails { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.ligne-mail { background: var(--couleur-surface); border-radius: 8px; padding: 0.75rem 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.ligne-mail-entete { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; }
.ligne-mail-statut { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ligne-mail-statut.ok { color: var(--couleur-succes); }
.ligne-mail-statut.erreur { color: var(--couleur-erreur); }
.ligne-mail-date { color: var(--couleur-texte-discret); }
.ligne-mail-destinataire { font-weight: 600; }
.ligne-mail-sujet { margin: 0.35rem 0 0; }
.ligne-mail-corps { white-space: pre-wrap; font-family: inherit; font-size: 0.85rem; background: var(--couleur-fond); border-radius: 6px; padding: 0.75rem; margin-top: 0.5rem; }

.liste-factures { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0 2rem; }
.ligne-facture { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--couleur-surface); border-radius: 8px; padding: 0.85rem 1.1rem; box-shadow: var(--ombre-carte); }
.ligne-facture-projet { font-weight: 600; }
.ligne-facture-date { display: block; font-size: 0.8rem; color: var(--couleur-texte-discret); }
.ligne-facture-montant { font-weight: 700; color: var(--couleur-accent-fonce); margin-left: auto; }
.ligne-facture-admin { flex-wrap: wrap; }
.ligne-facture-form { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.ligne-facture-form input[type="url"] { width: 220px; }
.ligne-facture-detail { margin: 0.2rem 0 0; font-size: 0.8rem; }

/* ==========================================================================
   Galerie client — page projet (views/client/projet.php)
   Toutes les règles nouvelles sont scopées sous .page-galerie / .galerie-masonry
   pour ne jamais affecter la vue admin, qui réutilise .carte-photo / .grille-photos
   dans une mise en page en grille simple sans ces classes.
   ========================================================================== */

.page-galerie h1 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); letter-spacing: -0.01em; margin-bottom: 0.2rem; }
.page-galerie .galerie-entete { margin-bottom: 1.75rem; }
.page-galerie .galerie-meta { color: var(--couleur-texte-discret); font-size: 0.92rem; margin: 0.15rem 0; }

/* Jauge d'avancement : stepper relié par une ligne, scrollable horizontalement sur mobile
   plutôt que de laisser les libellés se tasser et se chevaucher. */
.jauge-scroll { overflow-x: auto; margin: 1.5rem -0.25rem; padding: 0.25rem; -webkit-overflow-scrolling: touch; }
.jauge { display: flex; list-style: none; padding: 0; margin: 0; gap: 0; }
.jauge li { flex: 1; min-width: 84px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0 0.35rem; text-align: center; background: none; border-radius: 0; }
.jauge li::before { content: ''; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--couleur-accent); opacity: 0.35; z-index: 0; }
.jauge li:first-child::before { display: none; }
.jauge li.jauge-atteinte::before { opacity: 1; }
.jauge-point { width: 20px; height: 20px; border-radius: 50%; background: var(--couleur-surface); border: 2px solid var(--couleur-accent); opacity: 0.55; z-index: 1; flex-shrink: 0; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.jauge li.jauge-atteinte .jauge-point { background: var(--couleur-accent); border-color: var(--couleur-accent); opacity: 1; }
.jauge li.jauge-courante .jauge-point { box-shadow: 0 0 0 4px rgba(181, 131, 76, 0.22); }
.jauge-label { font-size: 0.78rem; color: var(--couleur-texte-discret); line-height: 1.25; }
.jauge li.jauge-atteinte .jauge-label { color: var(--couleur-texte); font-weight: 600; }
@media (max-width: 600px) {
    .jauge { width: max-content; min-width: 100%; }
    .jauge li { flex: 0 0 92px; }
}

/* Récapitulatif de sélection : compteur, barre de progression, estimation, CTA de validation. */
.carte-recap { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1.25rem 1.5rem; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.carte-recap-quota-depasse { border: 1px solid var(--couleur-erreur); }
.carte-recap button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
.recap-compteur { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.recap-compteur strong { font-size: 1.1rem; }
.barre-progression { height: 8px; border-radius: 999px; background: var(--couleur-bordure); overflow: hidden; }
.barre-progression-remplie { height: 100%; background: var(--couleur-accent); border-radius: 999px; transition: width 0.25s ease; }
.carte-recap .estimation { margin: 0; }
.carte-recap .ok { margin: 0; }
.carte-recap form { margin: 0; }
.carte-recap button[type="submit"] { background: var(--couleur-accent); padding: 0.65rem 1.4rem; font-weight: 600; }
.carte-recap button[type="submit"]:hover { background: var(--couleur-accent-fonce); }
.recap-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.carte-recap .recap-actions button.bouton-secondaire[type="submit"] { background: transparent; color: var(--couleur-texte); font-weight: normal; }
.carte-recap .recap-actions button.bouton-secondaire[type="submit"]:hover { background: var(--couleur-fond); }

.carte-paiement-requis { align-items: center; text-align: center; justify-content: center; min-height: 55vh; }
.carte-paiement-requis .ligne-facture-montant { margin-left: 0; align-self: center; }
.cadenas-paiement-requis { font-size: 2.5rem; line-height: 1; }

/* Mood board (phase de planification) : grille simple d'images/liens d'inspiration. */
.grille-moodboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin: 1rem 0; }
.carte-moodboard { background: var(--couleur-fond); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.carte-moodboard img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.carte-moodboard-lien { font-size: 0.8rem; word-break: break-all; color: var(--couleur-accent-fonce); }
.carte-moodboard form { margin: 0; }
.carte-moodboard .bouton-danger { font-size: 0.75rem; padding: 0.3rem 0.6rem; width: 100%; }

/* Notation 1 à 5 (formulaire de satisfaction) */
.notation-5 { display: flex; gap: 0.5rem; }
.notation-option { flex-direction: row !important; align-items: center; gap: 0.3rem !important; background: var(--couleur-fond); border: 1px solid var(--couleur-bordure); border-radius: 999px; padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.85rem; }
.notation-option:has(input:checked) { background: var(--couleur-accent); border-color: var(--couleur-accent); color: #fff; }

/* Notation emoji/étoiles (questionnaire de satisfaction post-séance) */
.notation-emoji .notation-option { font-size: 1.4rem; padding: 0.3rem 0.6rem; }
.notation-etoiles .notation-option { font-size: 1rem; color: #d9a600; }
.notation-etoiles .notation-option:has(input:checked) { color: #fff; }

/* Carte d'invitation optionnelle au formulaire de satisfaction (page galerie) */
.carte-satisfaction { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1.25rem 1.5rem; margin: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.carte-satisfaction p { margin: 0; }

/* Carte "réouvrir ma sélection" (galerie livrée, page client) */
.carte-reouverture { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); border-left: 4px solid var(--couleur-accent); padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.carte-reouverture p { margin: 0; }

/* Carte "réactiver ma sélection" (date de clôture dépassée, page client) */
.carte-selection-expiree { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); border-left: 4px solid var(--couleur-erreur); padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.carte-selection-expiree p { margin: 0; }

/* Bandeau "voir vos souvenirs" (galerie active, dès qu'au moins une photo est déjà disponible) */
.carte-souvenirs-disponibles { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); border-left: 4px solid var(--couleur-accent); padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.carte-souvenirs-disponibles p { margin: 0; }
.bouton-secondaire { background: transparent; color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); padding: 0.5rem 1rem; border-radius: 6px; }
.bouton-secondaire:hover { background: var(--couleur-fond); }

/* Filtre par avis : segmented control, collant sous l'en-tête pour rester accessible
   pendant le défilement d'une longue galerie. */
.filtre-avis { display: flex; gap: 0.35rem; margin: 1.5rem 0 1.25rem; padding: 0.3rem; background: var(--couleur-surface); border-radius: 999px; box-shadow: var(--ombre-carte); width: fit-content; max-width: 100%; position: sticky; top: 0.75rem; z-index: 10; }
.filtre-avis button { background: transparent; color: var(--couleur-texte-discret); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; flex-shrink: 0; }
.filtre-avis button:hover { background: var(--couleur-fond); color: var(--couleur-texte); }
.filtre-avis button.filtre-actif { background: var(--couleur-texte); color: #fff; }
.filtre-avis button.filtre-actif:hover { background: var(--couleur-texte); }

/* Sur mobile la barre déborderait et serait tronquée (largeur fit-content, pas de wrap) :
   on la laisse passer à la ligne plutôt que de couper ou masquer les derniers boutons
   derrière un défilement horizontal peu visible. */
@media (max-width: 600px) {
    .filtre-avis { width: 100%; flex-wrap: wrap; border-radius: var(--rayon); }
    .filtre-avis button { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
}
.compteur-filtre { display: inline-block; font-size: 0.7rem; font-weight: 700; background: var(--couleur-accent); color: #fff; border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.2rem; }

.galerie-masonry { display: block; column-count: 3; column-gap: 1.5rem; }
.galerie-masonry .carte-photo { break-inside: avoid; margin-bottom: 1.5rem; width: 100%; padding: 0; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.galerie-masonry .carte-photo:hover { box-shadow: var(--ombre-carte-hover); }
@media (max-width: 900px) { .galerie-masonry { column-count: 2; } }
@media (max-width: 600px) { .galerie-masonry { column-count: 1; } }

.declencheur-lightbox { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; position: relative; line-height: 0; }
.declencheur-lightbox img { display: block; width: 100%; border-radius: 0; }
.carte-photo-livree .declencheur-lightbox img { border-radius: 6px; }

.badge-selectionnee { position: absolute; top: 0.65rem; left: 0.65rem; width: 28px; height: 28px; border-radius: 50%; background: var(--couleur-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.badge-commentaire-photo { position: absolute; top: 0.65rem; right: 0.65rem; border-radius: 999px; padding: 0.84rem 0.7rem; background: rgba(23, 21, 19, 0.72); color: #fff; font-size: 1.08rem; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }

/* Corps de carte : tags + barre d'actions (sélection + avis côte à côte) + lien HD. */
.galerie-masonry .carte-photo-corps { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.galerie-masonry .tags { font-size: 0.8rem; }

.carte-photo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.carte-photo-toolbar .actions-photo { display: flex; flex-direction: column; gap: 0.4rem; }
.carte-photo-toolbar .actions-photo form { display: block; }
.carte-photo-toolbar .actions-photo button { font-size: 0.85rem; padding: 0.4rem 0.85rem; border-radius: 999px; }
.carte-photo-toolbar .actions-photo button[type="submit"] { background: var(--couleur-accent); }
.carte-photo-toolbar .actions-photo button[type="submit"]:hover { background: var(--couleur-accent-fonce); }
.carte-photo-toolbar .actions-photo form[action*="deselectionner"] button { background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); }
.carte-photo-toolbar .actions-photo form[action*="deselectionner"] button:hover { background: var(--couleur-fond); }
.carte-photo-toolbar .actions-photo .ok { font-size: 0.8rem; }
.carte-photo-toolbar .actions-photo .bouton-desactive { background: var(--couleur-surface); color: var(--couleur-texte-discret); border: 1px solid var(--couleur-bordure); cursor: not-allowed; }

/* Le panneau avis/commentaires participe directement à la barre d'actions tant qu'il est
   dans la carte (display: contents retire sa propre boîte) ; une fois déplacé dans la
   lightbox par le JS il n'est plus descendant de .carte-photo-toolbar et retrouve la mise
   en page de .lightbox-contenu .panneau-interaction plus bas. */
.carte-photo-toolbar .panneau-interaction { display: contents; }
.carte-photo-toolbar .avis form { display: flex; gap: 0.4rem; }
.carte-photo-toolbar .avis button { background: var(--couleur-fond); color: var(--couleur-texte); border-radius: 999px; padding: 0.4rem 0.7rem; font-size: 0.85rem; font-weight: 600; }
.carte-photo-toolbar .avis button:hover { background: var(--couleur-bordure); }
.carte-photo-toolbar .avis button.actif { background: var(--couleur-accent); color: #fff; }
.avis-autres { font-size: 0.78rem; color: var(--couleur-texte-discret); margin: 0.3rem 0 0; }

.galerie-masonry .lien-bouton { margin-top: 0; align-self: flex-start; background: transparent; color: var(--couleur-accent-fonce); padding: 0; text-decoration: underline; font-size: 0.85rem; font-weight: 600; }
.galerie-masonry .lien-bouton:hover { color: var(--couleur-texte); }

/* Commenter n'est possible que depuis la lightbox : le bloc .commentaires est caché tant qu'il
   est dans la carte, et redevient visible une fois déplacé dans la lightbox par le JS (il n'est
   alors plus descendant de .carte-photo, donc cette règle ne s'applique plus). */
.carte-photo .commentaires { display: none; }

/* ==========================================================================
   Liste des galeries (views/client/projets.php)
   ========================================================================== */
.page-galeries h1 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); letter-spacing: -0.01em; }
.carte-galerie[hidden], .carte-shooting[hidden] { display: none; }
.page-galeries .carte-galerie { position: relative; box-shadow: var(--ombre-carte); transition: box-shadow 0.2s ease, transform 0.2s ease; overflow: hidden; padding-top: 0; }
.page-galeries .carte-galerie img, .page-galeries .carte-galerie-vide { border-radius: 0; margin: -1rem -1rem 0; width: calc(100% + 2rem); }
.page-galeries .carte-galerie-nom { padding: 0 0.1rem; }
.page-galeries .carte-galerie:hover { box-shadow: var(--ombre-carte-hover); transform: translateY(-2px); }
.page-galeries .badge { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(23, 21, 19, 0.72); color: #fff; backdrop-filter: blur(2px); }
.badge-nouveau { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--couleur-accent); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 999px; }
.carte-galerie-date { font-size: 0.78rem; color: var(--couleur-texte-discret); padding: 0 0.1rem; }
.carte-galerie-progression { height: 5px; }
.carte-galerie-action { font-size: 0.8rem; color: var(--couleur-accent-fonce); font-weight: 600; }
.carte-galerie-depassement { font-size: 0.75rem; color: var(--couleur-texte-discret); padding: 0 0.1rem; }

/* Section "Souvenirs" (projets terminés) : présentation plus dense, sans barre de progression
   ni bouton d'action (déjà livrés, plus rien à faire dessus). */
.grille-bibliotheque { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.grille-bibliotheque .carte-galerie { padding: 0; gap: 0; }
.grille-bibliotheque .carte-galerie-nom { padding: 0.5rem 0.6rem 0.6rem; font-size: 0.85rem; }
.grille-bibliotheque .carte-galerie-date { padding: 0 0.6rem 0.6rem; }
.grille-bibliotheque .carte-galerie-progression, .grille-bibliotheque .carte-galerie-action, .grille-bibliotheque .carte-galerie-depassement { display: none; }

/* Espace "mes albums souvenirs" : maçonnerie CSS pure (columns), chaque photo garde son ratio
   naturel plutôt qu'un recadrage forcé — d'où l'usage de columns et non d'une grid uniforme. */
.maconnerie-souvenirs { columns: 2; column-gap: 1rem; margin-top: 1rem; }
.carte-album-souvenir, .carte-photo-souvenir { display: block; break-inside: avoid; margin-bottom: 1rem; position: relative; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-carte); }
/* Bonus : la tuile (lien de téléchargement) ne peut pas contenir le form "ajouter à ma
   sélection" (un <button> dans un <a> est invalide) — le conteneur reprend break-inside/margin
   à la place de .carte-photo-souvenir, qui garde le reste de son style habituel. */
.carte-photo-souvenir-conteneur { break-inside: avoid; margin-bottom: 1rem; }
.carte-photo-souvenir-conteneur .carte-photo-souvenir { margin-bottom: 0.4rem; }
.carte-album-souvenir:hover, .carte-photo-souvenir:hover { box-shadow: var(--ombre-carte-hover); }
.carte-album-souvenir img, .carte-photo-souvenir img, .carte-album-souvenir-vide { width: 100%; display: block; background: var(--couleur-bordure); }
.carte-album-souvenir-vide { aspect-ratio: 4 / 3; }
.carte-album-souvenir-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 0.9rem 0.7rem; background: linear-gradient(to top, rgba(23, 21, 19, 0.85), rgba(23, 21, 19, 0)); color: #fff; display: flex; flex-direction: column; }
.carte-album-souvenir-nom { font-weight: 600; }
.carte-album-souvenir-date { font-size: 0.78rem; opacity: 0.85; }
.carte-album-souvenir[hidden] { display: none; }

/* Titre d'année inséré en JS quand le groupement par année est actif : column-span:all pour
   traverser toutes les colonnes de la maçonnerie sans casser la mise en page par défaut (plate). */
.titre-annee-souvenir { column-span: all; font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }
.titre-annee-souvenir:first-child { margin-top: 0; }

.barre-filtres-souvenirs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.barre-filtres-souvenirs .recherche-projets { margin-bottom: 0; }
.btn-filtre-annee { background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid #ccc; padding: 0.55rem 0.8rem; font-size: 0.85rem; }
.btn-filtre-annee:hover { background: var(--couleur-fond); }
.btn-filtre-annee.actif { background: var(--couleur-accent); color: #fff; border-color: var(--couleur-accent); }

@media (min-width: 640px) { .maconnerie-souvenirs { columns: 3; } }
@media (min-width: 1024px) { .maconnerie-souvenirs { columns: 4; } }

/* Page détail d'un souvenir : nombre de colonnes recalculé en continu selon la largeur
   disponible (column-width) plutôt que des paliers fixes, pour mieux exploiter les grands écrans. */
.maconnerie-souvenir-detail { columns: unset; column-width: 230px; }

.section-souvenir-groupe { margin-top: 2rem; }
.section-souvenir-groupe:first-of-type { margin-top: 0; }
.titre-groupe-souvenir { font-size: 1.1rem; margin: 0 0 0.3rem; padding-top: 1rem; border-top: 1px solid var(--couleur-bordure); }
.section-souvenir-groupe:first-of-type .titre-groupe-souvenir { padding-top: 0; border-top: none; }

.bandeau-souvenir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.5rem; }
.bandeau-souvenir-meta { font-size: 0.9rem; color: var(--couleur-texte-discret); }
.bandeau-souvenir-texte { flex-basis: 100%; margin: 0; color: var(--couleur-texte); }
.badge-distinction { background: var(--couleur-accent); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.6rem; border-radius: 999px; }

/* Frise collab (bibliothèque mes-souvenirs) : rangée de points reliés par un trait fin, une
   date sous chaque point pour donner un sens du temps écoulé, vignette de couverture au survol.
   Le conteneur reste visible (sticky) pendant le défilement de la bibliothèque. */
.frise-collab-sticky { position: sticky; top: 0.75rem; z-index: 10; background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 0.75rem 1rem 0.25rem; margin-bottom: 1.5rem; }
.frise-collab-titre { font-size: 0.85rem; color: var(--couleur-texte-discret); margin: 0 0 0.4rem; }
.frise-collab { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 0.25rem 0.25rem 0.5rem; }
.frise-collab-item { position: relative; display: flex; flex-direction: column; align-items: center; width: 4rem; flex: 0 0 auto; }
.frise-collab-point { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--couleur-bordure); cursor: pointer; }
.frise-collab-item:not(:last-child) .frise-collab-point::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: calc(4rem - 14px); height: 2px; background: var(--couleur-bordure); }
.frise-collab-point-disponible { background: var(--couleur-accent); }
.frise-collab-point-disponible:hover, .frise-collab-point-disponible:focus-visible { background: var(--couleur-accent-fonce); }
.frise-collab-point-en-cours:hover, .frise-collab-point-en-cours:focus-visible { background: var(--couleur-texte-discret); }
.frise-collab-date { margin-top: 0.5rem; font-size: 0.75rem; color: var(--couleur-texte-discret); white-space: nowrap; }

/* Vignette flottante (position: fixed, hors du conteneur scrollable de la frise — voir
   assets/frise-collab-vignette.js pour la raison du overflow-x/overflow-y). */
.frise-collab-vignette-flottante { position: fixed; transform: translate(-50%, calc(-100% - 10px)); max-width: 180px; background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte-hover); padding: 0.4rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.05s linear; z-index: 1000; }
.frise-collab-vignette-flottante img { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; border-radius: 6px; margin: 0 auto; }
.frise-collab-vignette-flottante .frise-collab-vignette-legende { display: block; margin-top: 0.3rem; font-size: 0.75rem; line-height: 1.3; color: var(--couleur-texte); text-align: center; }
.frise-collab-vignette-flottante.frise-collab-vignette-visible { opacity: 1; visibility: visible; }
.frise-collab-vignette-flottante.frise-collab-vignette-dessous { transform: translate(-50%, 10px); }

.lien-discret-galerie-travail { display: inline-block; margin-top: 1.5rem; font-size: 0.85rem; color: var(--couleur-texte-discret); text-decoration: none; }
.lien-discret-galerie-travail:hover { color: var(--couleur-texte); }
.souvenir-telecharger-tout { margin-top: 0.75rem; }

/* Zone d'accueil du dashboard : message chaleureux, rappel doux de clôture, carte événement. */
.zone-accueil { margin-bottom: 2rem; }
.zone-accueil h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.flavor-fidelite { color: var(--couleur-texte-discret); font-size: 0.85rem; margin: -1rem 0 1.25rem; }

/* Signature fidélité, discrète, en bas de page (Bloc B) plutôt qu'en avant sur le dashboard */
.signature-fidelite { display: block; text-align: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--couleur-bordure); color: var(--couleur-texte-discret); font-size: 0.85rem; text-decoration: none; }
.signature-fidelite:hover { color: var(--couleur-texte); }
.signature-fidelite-barre { max-width: 220px; height: 4px; margin: 0.5rem auto 0; }

.carte-palier, .carte-parrainage, .carte-badges { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.palier-nom { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.6rem; }
.carte-palier .aide { margin: 0.6rem 0; }
.carte-palier .barre-progression { margin: 0.7rem 0; }
.code-parrainage { font-family: monospace; font-size: 1.2rem; letter-spacing: 0.08em; background: var(--couleur-fond); border-radius: 6px; padding: 0.5rem 0.9rem; display: inline-block; margin: 0.5rem 0; }
.liste-codes-fidelite { list-style: none; margin: 0; padding: 0; }
.liste-codes-fidelite li { padding: 0.4rem 0; border-bottom: 1px solid var(--couleur-bordure); }
.liste-codes-fidelite li:last-child { border-bottom: none; }

.liste-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.liste-badges li { background: var(--couleur-fond); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.liste-badges li.badge-verrouille { opacity: 0.5; }
.liste-badges .badge-nom { font-weight: 700; margin-right: 0.3rem; }
.badge-fidelite { background: var(--couleur-fond); border-radius: 999px; font-size: 0.75rem; padding: 0.2rem 0.6rem; margin-left: 0.4rem; display: inline-block; }
.celebration-badges { margin: 0 0 1rem; }
.celebration-badges-titre { font-weight: 600; margin: 0 0 0.4rem; }
.celebration-badges ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.celebration-badges li { background: var(--couleur-fond); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.8rem; max-width: 100%; overflow: hidden; white-space: nowrap; box-sizing: border-box; }

.bandeau-notifications { background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); margin-bottom: 1rem; overflow: hidden; }
.ligne-notification { display: block; padding: 0.8rem 1.25rem; color: var(--couleur-texte); text-decoration: none; border-left: 3px solid var(--couleur-accent); border-bottom: 1px solid var(--couleur-bordure); font-size: 0.9rem; transition: background 0.15s ease; }
.ligne-notification:last-child { border-bottom: none; }
.ligne-notification:hover { background: var(--couleur-fond); }

.aide-indicateur-global { color: var(--couleur-texte-discret); font-size: 0.9rem; margin: -0.5rem 0 1rem; }

/* Ancrée en haut (comme .badge-nouveau, jamais affichée en même temps qu'elle : l'une est
   pour "livrée", l'autre pour "sélection en cours") plutôt qu'en bas de .carte-galerie —
   sinon elle se superposait au texte/bouton d'action sous l'image, dont la position varie
   selon la hauteur du contenu de la carte. */
.pastille-urgence { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--couleur-accent); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; box-shadow: var(--ombre-carte); }

.recherche-projets { display: block; width: 100%; max-width: 360px; margin: 0 0 1.5rem; padding: 0.55rem 0.8rem; font-size: 0.9rem; }

.lien-retour { display: inline-block; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--couleur-texte-discret); text-decoration: none; }
.lien-retour:hover { color: var(--couleur-texte); }

.carte-evenement { background: linear-gradient(135deg, var(--couleur-accent), var(--couleur-accent-fonce)); color: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.carte-evenement-date { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.carte-evenement h2 { font-size: 1.1rem; margin: 0.2rem 0; }
.carte-evenement p { margin: 0; font-size: 0.88rem; opacity: 0.92; max-width: 40ch; }
.carte-evenement form { margin: 0; }
.carte-evenement button { background: #fff; color: var(--couleur-accent-fonce); font-weight: 600; flex-shrink: 0; }
.carte-evenement button:hover { background: var(--couleur-fond); }
.carte-evenement .ok { color: #fff; margin: 0; font-weight: 600; }

.titre-section { font-size: 1.15rem; margin: 2rem 0 1rem; }

/* Section "Shootings à venir" (phase de planification) : liste distincte de la grille de
   galeries, pas de vignette/progression puisqu'il n'y a pas encore de photos. */
.liste-shootings { display: flex; flex-direction: column; gap: 0.75rem; }
.carte-shooting { display: flex; align-items: center; gap: 1.25rem; background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1rem 1.25rem; text-decoration: none; color: var(--couleur-texte); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.carte-shooting:hover { box-shadow: var(--ombre-carte-hover); transform: translateY(-2px); }
.carte-shooting-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--couleur-fond); border-radius: 8px; padding: 0.5rem 0.75rem; min-width: 64px; flex-shrink: 0; }
.carte-shooting-jour { font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--couleur-accent-fonce); }
.carte-shooting-mois { font-size: 0.7rem; text-transform: uppercase; color: var(--couleur-texte-discret); }
.carte-shooting-corps { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.carte-shooting-nom { font-weight: 600; }
.carte-shooting-lieu { font-size: 0.82rem; color: var(--couleur-texte-discret); }
.mini-jauge { display: flex; gap: 0.3rem; }
.mini-jauge-point { width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-bordure); }
.mini-jauge-point.atteint { background: var(--couleur-accent); }
.carte-shooting-action { font-size: 0.8rem; color: var(--couleur-accent-fonce); font-weight: 600; flex-shrink: 0; }
@media (max-width: 600px) {
    .carte-shooting-action { display: none; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.92); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.lightbox[hidden] { display: none; }
.lightbox-contenu { max-width: min(90vw, 900px); max-height: 90vh; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.lightbox-contenu::-webkit-scrollbar { width: 6px; }
.lightbox-contenu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 999px; }
.lightbox-contenu img { max-width: 100%; max-height: 58vh; object-fit: contain; border-radius: 6px; margin: 0 auto; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); }
.lightbox-compteur { text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; letter-spacing: 0.03em; }
.lightbox-contenu .panneau-interaction { background: var(--couleur-surface); border-radius: var(--rayon); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; box-shadow: var(--ombre-carte); }
.lightbox-contenu .panneau-interaction .avis form { display: flex; gap: 0.5rem; }
.lightbox-contenu .panneau-interaction .avis button { background: var(--couleur-fond); border-radius: 999px; padding: 0.45rem 0.9rem; font-weight: 600; }
.lightbox-contenu .panneau-interaction .avis button.actif { background: var(--couleur-accent); color: #fff; }
.lightbox-contenu .panneau-interaction .commentaires { display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid var(--couleur-bordure); padding-top: 0.75rem; }
.lightbox-fermer, .lightbox-precedent, .lightbox-suivant { position: fixed; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 1.3rem; line-height: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; backdrop-filter: blur(4px); }
.lightbox-fermer:hover, .lightbox-precedent:hover, .lightbox-suivant:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-fermer { top: 1.25rem; right: 1.25rem; }
.lightbox-precedent { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-suivant { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
    .lightbox { padding: 0.75rem; padding-top: 3.5rem; }
    .lightbox-fermer { top: 0.75rem; right: 0.75rem; }
    .lightbox-precedent, .lightbox-suivant { width: 38px; height: 38px; font-size: 1.1rem; }
    .lightbox-precedent { left: 0.5rem; }
    .lightbox-suivant { right: 0.5rem; }
}

/* Célébration de livraison (Bloc C) : animation ponctuelle, jouée une seule fois, jamais permanente */
.celebration-overlay { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.75); z-index: 110; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.celebration-carte { position: relative; background: var(--couleur-surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte-hover); padding: 2rem 1.75rem; max-width: 570px; width: 100%; text-align: center; }
.celebration-fermer { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: none; font-size: 1.4rem; line-height: 1; color: var(--couleur-texte-discret); padding: 0.25rem 0.5rem; }
.celebration-fermer:hover { color: var(--couleur-texte); }
.celebration-titre { font-weight: 700; font-size: 1.1rem; margin: 0 0 1.25rem; }
.celebration-compteur { font-size: 2.2rem; font-weight: 700; color: var(--couleur-accent-fonce); margin: 0 0 0.3rem; }
.celebration-jauge { margin-bottom: 1rem; }
.celebration-jauge .barre-progression-remplie { transition: width 1s ease; }
.celebration-palier { font-weight: 600; color: var(--couleur-accent-fonce); border-radius: 999px; padding: 0.5rem 1rem; background: var(--couleur-fond); margin: 0 0 1rem; max-width: 100%; overflow: hidden; white-space: nowrap; box-sizing: border-box; }
.celebration-halo { animation: celebration-pulse 1.6s ease-in-out 2; }
.celebration-popup-image { display: block; width: 100%; max-height: 320px; object-fit: contain; background: var(--couleur-fond); border-radius: var(--rayon); margin-bottom: 1.25rem; }
.celebration-popup-lien { display: inline-block; margin: 0 0 1rem; font-size: 0.85rem; color: var(--couleur-texte-discret); text-decoration: none; }
.celebration-popup-lien:hover { color: var(--couleur-texte); }
.celebration-digest { margin-top: 0.5rem; text-align: left; }
.celebration-digest ul { list-style: none; margin: 0; padding: 0; }
.celebration-digest li { border-top: 1px solid var(--couleur-bordure); }
.celebration-digest li a { display: block; padding: 0.6rem 0.2rem; color: var(--couleur-texte); text-decoration: none; font-size: 0.9rem; }
.celebration-digest li a:hover { color: var(--couleur-accent-fonce); }
@keyframes celebration-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(181, 131, 76, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(181, 131, 76, 0); }
}

/* QR code du lien de configuration (admin utilisateurs) : complément visuel du lien texte */
.qrcode-conteneur { margin-top: 0.5rem; }
.qrcode-conteneur .qrcode-canvas { display: block; border: 1px solid var(--couleur-bordure); border-radius: 4px; background: #fff; padding: 0.5rem; }

/* Contrat photographe/modèle (admin) : document imprimable, nav/bouton masqués à l'impression */
.contrat-document { max-width: 780px; margin-top: 1.5rem; line-height: 1.5; }
.contrat-document section { margin-bottom: 1.5rem; }
.contrat-document h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.contrat-document[hidden], .contrat-document section[hidden], .contrat-document div[hidden] { display: none; }
.clauses-cases { list-style: none; padding: 0; margin: 0.5rem 0; }
.clauses-cases li { margin-bottom: 0.5rem; }
.contrat-case-mineur { font-weight: 600; }
.contrat-signatures-grille { display: flex; gap: 2rem; margin-top: 1rem; flex-wrap: wrap; }
.contrat-signatures-grille > div { flex: 1 1 200px; }
.contrat-signature-espace { border-bottom: 1px solid var(--couleur-texte); height: 3rem; }
@media print {
    .entete, .nav-admin, .bouton-imprimer, .no-print { display: none !important; }
    .contenu { padding: 0; }
    .contrat-document { max-width: none; }
}

/* Mode swipe (sélection + retouche), tactile uniquement — voir galerie-swipe.js */
.bouton-swipe-toggle { margin: 0 0 1rem; }
.bouton-swipe-toggle[hidden] { display: none; }

.swipe-conteneur[hidden] { display: none; }
.swipe-conteneur {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--couleur-fond);
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0.75rem) 0.75rem env(safe-area-inset-bottom, 0.75rem);
}
.swipe-fermer {
    position: absolute;
    top: env(safe-area-inset-top, 0.75rem);
    right: 0.75rem;
    z-index: 5;
    background: transparent;
    color: var(--couleur-texte);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.5rem;
}
.swipe-overlay-compteur {
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 0 0.25rem;
}
.swipe-filtres {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.swipe-filtres:empty { display: none; }
.swipe-filtres .filtre-avis { margin: 0 0 0.5rem; position: static; }
.swipe-annuler-icone[hidden] { display: none; }
.swipe-annuler-icone {
    position: absolute;
    top: env(safe-area-inset-top, 0.75rem);
    left: 0.75rem;
    z-index: 5;
    background: var(--couleur-surface);
    box-shadow: var(--ombre-carte);
    border-radius: 999px;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
}
.swipe-pile {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.swipe-pile[hidden] { display: none; }
.swipe-carte {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    will-change: transform;
}
.swipe-carte img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--rayon); transition: opacity 0.2s ease; }
.swipe-carte-envoyee { background: var(--couleur-succes); border-radius: var(--rayon); }
.swipe-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.swipe-badge-positif { color: var(--couleur-succes); }
.swipe-badge-negatif { color: var(--couleur-erreur); }
.swipe-boutons { display: flex; justify-content: center; gap: 1rem; padding: 0.75rem 0; }
.swipe-boutons button { border-radius: 999px; width: 3rem; height: 3rem; font-size: 1.1rem; background: var(--couleur-surface); box-shadow: var(--ombre-carte); }
.swipe-boutons button[data-swipe-action="selectionner"],
.swipe-boutons button[data-swipe-action="valider"] { background: var(--couleur-accent); color: #fff; }
.swipe-boutons button[data-swipe-action="rejeter"] { background: var(--couleur-erreur); color: #fff; }
.swipe-boutons button.actif { background: var(--couleur-accent); color: #fff; }
.swipe-commentaire { display: flex; gap: 0.5rem; padding-bottom: 0.5rem; }
.swipe-commentaire input { flex: 1 1 auto; }
.swipe-pile-desactivee .swipe-carte-active { opacity: 0.35; pointer-events: none; }
.swipe-bandeau-annulation[hidden] { display: none; }
.swipe-bandeau-annulation {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 5;
}
.swipe-bandeau-annulation button { background: transparent; color: #fff; text-decoration: underline; font-weight: 600; }
.swipe-recap[hidden] { display: none; }
.swipe-recap {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: var(--couleur-fond);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 1.5rem;
    overflow-y: auto;
}
.swipe-recap-grille { width: 100%; margin: 0; column-gap: 0.75rem; }
.swipe-recap-grille:empty { display: none; }
.swipe-recap-vignette { position: relative; width: 100%; padding: 0; margin-bottom: 0.75rem; break-inside: avoid; display: block; background: none; border-radius: var(--rayon); overflow: hidden; }
.swipe-recap-vignette img { width: 100%; display: block; border-radius: var(--rayon); }
.swipe-recap-vignette-retirer {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.8rem;
}
.swipe-recap-actions { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 320px; flex-shrink: 0; }