/* === VARIABLES CSS === */
:root {
--header-height: 80px;
--primary-color: #2c3e50;
--secondary-color: #95a5a6;
--accent-color: #3498db;
--text-color: #444444;
--text-light: #e8e8e8;
--bg-color: #ffffff;
--bg-secondary: #f8f9fa;
--border-color: #e1e8ed;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
--shadow-md: 0 4px 16px rgba(0,0,0,0.15);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.2);
--transition-speed: 0.3s;
/* Nouvelles variables pour coherence */
--title-color: #ab5656; /* LIGNE 18 - Modifier ici pour changer la couleur des titres */
--link-color: #972626;
--btn-bg-light: #d0d0d0;
--btn-text-light: #444444;
--btn-bg-dark: #3a3a3a;
--btn-text-dark: #d0d0d0;
--modal-bg: #f5f5f5;
--modal-text: #444444;
--input-disabled-bg: #f5f5f5; /* Fond des champs désactivés */
}
/* ===== MODE SOMBRE =====
   Bloc UNIQUE : les deux déclarations [data-theme="dark"] qui coexistaient ici
   ont été fusionnées. Elles portaient les mêmes 11 variables en double, la
   première ajoutant --input-disabled-bg, la seconde les rouges : rien n'est
   perdu, mais la source de vérité est désormais unique. */
[data-theme="dark"] {
    --primary-color: #f5f5f5;
    --secondary-color: #b0b0b0;
    --text-color: #d0d0d0;
    --text-light: #f0f0f0;
    --bg-color: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --border-color: #444;
    --shadow-sm: 0 2px 8px rgba(255,255,255,0.05);
    --shadow-md: 0 4px 16px rgba(255,255,255,0.1);
    --shadow-lg: 0 8px 32px rgba(255,255,255,0.15);
    --modal-bg: #2d2d2d;
    --modal-text: #d0d0d0;
    --input-disabled-bg: #2a2a2a; /* Fond des champs désactivés en mode sombre */

    /* Rouges du mode sombre.
       Les rouges du thème clair (--title-color #ab5656, --link-color #972626)
       sont calibrés pour un fond blanc : sur le fond sombre #1a1a1a ils perdent
       leur éclat et paraissent ternes. On remonte ici la luminosité et la
       saturation en conservant la teinte de la marque. Toutes les règles du site
       consommant ces deux variables, une seule passe suffit. */
    --title-color: #fa5754;
    --link-color: #ff8a8a;
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* === LIENS === */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--text-color);
}

/* === TITRES === */
h1, h2, h3, h4, h5, h6 {
    color: var(--title-color);
    font-family: 'Raleway', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'Raleway', sans-serif;
}

/* === HEADER === */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-speed);
}

[data-theme="dark"] #main-header {
    background-color: rgba(26, 26, 26, 0.90);
}

.header-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left .logo {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.2;
    color: var(--text-color);
}

.header-left .logo .logo-line1,
.header-left .logo .logo-line2,
.header-left .logo .logo-line3 {
    display: block;
    white-space: nowrap;
}

.header-left .logo .logo-line2::before {
    content: '';
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Aucun bouton du header ne doit jamais se faire comprimer par flex : sans
   ca, sur une fenetre desktop resserree, le texte interne (ex. "Recherche")
   peut passer a la ligne alors que la hauteur du bouton reste fixe - le
   texte deborde alors visuellement hors du cadre. */
.header-right > * {
    flex-shrink: 0;
}

/* === TOGGLES MODERNES === */
.toggles {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Toggle Switch Container */
.toggle-switch {
    position: relative;
    display: inline-flex;
    background: transparent;
    border: 1px solid var(--text-color);
    border-radius: 6px;
    padding: 6px 14px;
    min-width: 90px;
    height: 32px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: visible;
    flex-shrink: 0;
}

/* Options du toggle - cachées par défaut */
.toggle-option {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 13px;
    color: var(--text-color);
    text-transform: lowercase;
    letter-spacing: 0.5px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 2;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Seule l'option active est visible et cliquable */
.toggle-option.active {
    opacity: 1;
    pointer-events: auto;
}

/* Forcer la couleur en mode clair */
[data-theme="light"] .toggle-option {
    color: #444444;
}

/* Forcer la couleur en mode sombre */
[data-theme="dark"] .toggle-option {
    color: #d0d0d0;
}

/* Pas de slider visible */
.toggle-slider {
    display: none;
}

/* Effet hover sur le container */
.toggle-switch:hover {
    opacity: 0.8;
}

/* Toggle langue a 3 options (FR/EN/IT) : les 3 boutons sont visibles cote a
   cote au lieu du pattern stack binaire (un seul bouton visible en absolute).
   L'option active est mise en avant, les 2 autres restent cliquables. */
.toggle-switch.lang-toggle-3 {
    position: relative;
    display: inline-flex;
    gap: 6px;
    padding: 6px 10px;
    min-width: 100px;
    cursor: default;
}
.lang-toggle-3 .toggle-option {
    position: static;
    width: auto;
    height: auto;
    opacity: 0.5;
    pointer-events: auto;
    padding: 0 2px;
}
.lang-toggle-3 .toggle-option.active {
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    pointer-events: none;
}

/* Bouton connexion */
.login-btn {
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-color);
    text-transform: lowercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--text-color);
    border-radius: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    min-width: 80px;
    text-align: center;
    height: 32px;
    line-height: 20px;
    font-weight: 500;
    flex-shrink: 0;
}

[data-theme="light"] .login-btn {
    color: #444444;
}

[data-theme="dark"] .login-btn {
    color: #d0d0d0;
}

.login-btn:hover {
    opacity: 0.8;
}

/* Bouton recherche (icone + libelle) : sans ce bloc il n'heritait que de
   .login-btn (bloc icone/texte en flux inline normal, sans nowrap) - sur
   une fenetre desktop resserree le libelle passait a la ligne et debordait
   hors du cadre fixe de 32px. */
.search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.search-btn-label {
    white-space: nowrap;
}

/* === HAMBURGER === */
/* Bouton Galeries dans le header */
.btn-galleries {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    color: white;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-galleries:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    color: white;
}

[data-theme="light"] .btn-galleries {
    color: var(--text-color, #333);
    border-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .btn-galleries:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.5);
    color: var(--text-color, #333);
}

.hamburger {
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hamburger span:not(.hamburger-text) {
    width: 80%;
    height: 1px;
    background-color: var(--text-color);
    transition: all var(--transition-speed);
    position: absolute;
}

.hamburger span:nth-child(1) {
    top: 3px;
}

.hamburger span:nth-child(2) {
    top: 13px;
}

.hamburger span:nth-child(3) {
    top: 23px;
}

.hamburger-text {
    position: absolute;
    bottom: -18px;
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 1px;
    color: var(--text-color);
    font-weight: 300;
}

/* Animation hamburger en X quand menu ouvert */
.hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* === NAVIGATION === */
.main-nav {
    position: fixed;
    top: var(--header-height);
    right: -280px;
    width: 280px;
    max-width: 90vw;
    max-height: calc(100vh - var(--header-height));
    background-color: rgba(250, 250, 250, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transition: right var(--transition-speed);
    z-index: 999;
}

[data-theme="dark"] .main-nav {
    background-color: rgba(30, 30, 30, 0.6);
}

.main-nav.active {
    right: 0;
}

.nav-content {
    padding: 15px 20px;
}

.nav-section {
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 3px;
}

[data-theme="dark"] .nav-section {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--title-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 0;
}

.nav-title .arrow {
    font-size: 10px;
    transition: transform var(--transition-speed);
}

.nav-title.active .arrow {
    transform: rotate(180deg);
}

.submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed);
    padding-left: 20px;
}

.submenu.active {
    max-height: 1000px;
    margin-top: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.submenu li {
    margin-bottom: 5px;
}

.submenu a {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-color);
    display: block;
    padding: 4px 12px;
    line-height: 1.3;
    border-radius: 4px;
    transition: all var(--transition-speed);
}

/* === MENU FLOTTANT DU BOUTON GALERIES (barre du haut) === */
.galleries-dropdown {
    position: relative;
    display: inline-flex;
}

/* Le bouton reprend exactement l'apparence de l'ancien lien .btn-galleries.
   On neutralise les styles par defaut du <button> et on fixe la meme hauteur
   que les autres elements de la barre (.toggle-switch et .login-btn : 32px). */
button.btn-galleries {
    background: none;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    margin: 0;
    height: 32px;
    line-height: normal;
    justify-content: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.galleries-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--bg-color, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
    z-index: 1200;
}

.galleries-dropdown-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.galleries-dropdown-panel a {
    display: block;
    padding: 10px 18px;
    color: var(--text-color, #333);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--transition-speed);
}

.galleries-dropdown-panel a:hover {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .galleries-dropdown-panel {
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .galleries-dropdown-panel a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* === SOUS-MENUS IMBRIQUES (Fine Art / Open Editions) === */
/* Boutons deroulants de niveau 2 sous GALERIES. Reprennent le mecanisme
   generique .nav-title[data-submenu] mais avec un style plus discret que
   les entrees de premier niveau. */
.submenu-group {
    margin-bottom: 8px;
}

.submenu .nav-title.submenu-toggle {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.75;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: opacity var(--transition-speed);
}

.submenu .nav-title.submenu-toggle:hover,
.submenu .nav-title.submenu-toggle.active {
    opacity: 1;
}

.submenu .nav-title.submenu-toggle .arrow {
    font-size: 9px;
    transition: transform var(--transition-speed);
}

.submenu .nav-title.submenu-toggle.active .arrow {
    transform: rotate(180deg);
}

/* Le sous-menu parent doit pouvoir contenir les deux listes depliees */
#galleries-submenu.active {
    max-height: 3000px;
}

/* Lien "Toutes les galeries" propre a chaque section (Fine Art / Open Editions) */
.submenu a.submenu-all {
    font-style: italic;
    opacity: 0.8;
}

/* Meilleur contraste en mode clair */
[data-theme="light"] .submenu a {
    color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .submenu a:hover {
    color: var(--link-color);
    background: rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
    font-weight: 500;
}

/* Meilleur contraste en mode sombre */
[data-theme="dark"] .submenu a {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .submenu a:hover {
    color: var(--link-color);
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    font-weight: 500;
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed);
    z-index: 998;
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* === MAIN CONTENT === */
main {
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    padding-top: 20px;
}

/* === GALLERY MOSAIC - SYSTEME === */
.gallery-mosaic {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 0;
}

.gallery-item {
    opacity: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
    touch-action: manipulation; /* Éviter le délai de 300ms sur mobile */
}

.gallery-item.visible {
    animation: zoomIn 1.5s ease-out forwards;
}

.gallery-item.animated {
    opacity: 1;
}

@keyframes zoomIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-item img {
    display: block;
    object-fit: cover;
    transition: transform var(--transition-speed);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .gallery-item {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .gallery-item:hover {
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.gallery-item-title {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: auto;
    text-align: left;
    color: rgb(50, 50, 50);
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(75, 75, 75, 0.4);
    transition: color 0.3s ease, text-shadow 0.3s ease;
    pointer-events: none;
    padding: 5px 10px;
    border-radius: 3px;
}

/* Fond foncé détecté → titre blanc */
.gallery-item.dark-bg .gallery-item-title {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Étoile badge sélection — haut droite, cachée par défaut */
.gallery-item-star {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: none;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.gallery-item-star svg {
    width: 24px;
    height: 24px;
}

.gallery-item-star svg polygon {
    fill: #8c1e14;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linejoin: round;
}

/* Visible quand la galerie a des sélections */
.gallery-item.has-selection .gallery-item-star {
    display: block;
    cursor: default;
    pointer-events: auto;
}

/* Tooltip étoile index */
#star-tooltip {
    display: none;
    position: absolute;
    z-index: 9999;
    max-width: 260px;
    padding: 10px 14px;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.5;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#star-tooltip.visible {
    display: block;
    opacity: 1;
}

#star-tooltip.fading {
    opacity: 0;
}

/* HOVER sur les noms de galeries - UNIQUEMENT dans la mosaïque index.php */
.gallery-mosaic .gallery-item:hover .gallery-item-title {
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 14px;
    transform: scale(0.95);
    text-shadow: none;
}

[data-theme="dark"] .gallery-mosaic .gallery-item:hover .gallery-item-title {
    background: var(--text-color);
    color: var(--bg-color);
}

.gallery-item-filename {
    position: absolute;
    bottom: 10px;
    left: 12px;
    top: auto;
    color: white;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(75, 75, 75, 0.4);
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}

.gallery-item-filename:hover {
    color: black;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
}

.gallery-item-filename span {
    flex: 1;
    pointer-events: auto;
    user-select: text;
    cursor: text;
}

.filename-cart-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0 !important;
    margin: 0;
    border-radius: 0;
    opacity: 1;
    transition: all 0.3s ease;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto;
    user-select: none;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* SVG étoile dans les galeries */
.filename-cart-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Étoile non sélectionnée : blanche, contour sombre */
.filename-cart-btn svg polygon {
    fill: #ffffff;
    stroke: #222222;
    stroke-width: 1px;
    stroke-linejoin: round;
}

/* Tooltip instantané pour le bouton caddie */
.filename-cart-btn[data-title]::before {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 10000;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.filename-cart-btn[data-title]:hover::before {
    opacity: 1;
    transition-delay: 0s;
}

.filename-cart-btn:hover {
    opacity: 1;
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.3);
}

/* État sélectionné : X gris en overlay */
.filename-cart-btn.selected::after {
    content: '';
}

.filename-cart-btn.selected {
    opacity: 1;
    background: rgba(255, 255, 255, 0.25);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

/* Étoile sélectionnée : rouge bordeaux, contour blanc */
.filename-cart-btn.selected svg polygon {
    fill: #8c1e14;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linejoin: round;
}

/* === GALLERY-GRID : étoile haut droite, nom bas gauche — modèle mosaïque index === */

/* Étoile sélection : haut droite dans gallery-grid (identique à gallery-item-star de l'index) */
.gallery-grid .filename-cart-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
    width: 26px !important;
    height: 26px !important;
    background: transparent;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
    z-index: 10;
}

.gallery-grid .filename-cart-btn.selected {
    background: rgba(255, 255, 255, 0.25);
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.9));
}

.gallery-grid .filename-cart-btn.selected svg polygon {
    fill: #8c1e14;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linejoin: round;
}

.gallery-grid .filename-cart-btn svg {
    width: 26px !important;
    height: 26px !important;
}


/* Nom de fichier : bas gauche, texte sombre par défaut (fond clair) */
.gallery-grid .gallery-item-filename {
    position: absolute;
    bottom: 10px;
    left: 12px;
    top: auto;
    color: rgba(30, 30, 30, 0.9);
    text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
    pointer-events: none;
    padding: 4px 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10;
}

/* Fond foncé détecté → nom de fichier blanc */
.gallery-grid .gallery-image-wrapper.dark-bg .gallery-item-filename {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.35);
}

/* Hover sur le nom : inversion fond/texte identique à l'index */
.gallery-grid .gallery-image-wrapper:hover .gallery-item-filename {
    background: var(--text-color);
    color: var(--bg-color);
    text-shadow: none;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

[data-theme="dark"] .gallery-grid .gallery-image-wrapper:hover .gallery-item-filename {
    background: var(--text-color);
    color: var(--bg-color);
}

/* overflow:hidden conservé — l'étoile à 14px est dans les limites, jamais coupée */
.gallery-grid .gallery-image-wrapper {
    overflow: hidden;
}

.gallery-grid .gallery-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

/* === GALLERY GRID === */
.gallery-grid {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 0;  /* Supprimer le padding horizontal pour permettre le centrage parfait */
    overflow-x: hidden; /* Empêcher le défilement horizontal si la grille dépasse */
}
/* Conteneur interne pour la grille absolue */
.gallery-grid-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.gallery-banner {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.gallery-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== HERO des pages statiques (bienvenue, contact, login, packing, etc.) ===== */
.page-hero {
    width: 100%;
    height: 420px;
    overflow: hidden;
    position: relative;
}

.page-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    .page-hero {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .page-hero {
        height: 160px;
    }
}

/* Mention de recadrage sous le hero.
   Le hero affiche les images en object-fit:cover : elles y sont donc recadrées.
   Alignée sur le CONTENU du bouton de galerie (.page-hero-link) : celui-ci est
   à left:16px avec un padding interne de 14px, son icône commence donc à 30px.
   C'est cette verticale-là que suit la mention, pas le bord du bouton. */
.hero-crop-note {
    margin: 6px 0 0 30px;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--text-color);
    font-style: normal;
}

@media (max-width: 480px) {
    .hero-crop-note {
        /* En mobile le bouton passe à left:10px avec un padding de 10px :
           son icône commence donc à 20px. */
        margin-left: 20px;
        font-size: 0.62rem;
    }
}

/* Bouton discret sur le hero : « Voir cette image dans sa galerie » */
.page-hero-link {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0.78;
    transition: opacity 0.25s ease, background 0.25s ease;
    z-index: 3;
}
.page-hero-link:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}
.page-hero-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .page-hero-link {
        left: 10px;
        bottom: 10px;
        padding: 6px 10px;
        font-size: 0.72rem;
    }
    .page-hero-link svg { width: 14px; height: 14px; }
}

/* ===== Lightbox hero : image seule + lien vers la galerie ===== */
.hero-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    padding: 24px;
    cursor: zoom-out;
}
.hero-lightbox.active { display: flex; }
.hero-lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    cursor: default;
}
.hero-lightbox-inner img {
    max-width: 95vw;
    max-height: 82vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.hero-lightbox-gallery {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.hero-lightbox-gallery:hover { background: rgba(255, 255, 255, 0.28); }
.hero-lightbox-gallery svg { width: 18px; height: 18px; flex-shrink: 0; }
.hero-lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.hero-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }

/* MOBILE/TABLETTE - Banner réduite de 50% */
@media (max-width: 1024px) {
    .gallery-banner {
        height: 150px !important;
    }
    
    .gallery-banner img {
        object-fit: cover !important;
        object-position: center center !important;
    }
    
    .view-selection-btn,
    .go-to-cart-btn,
    .view-slideshow-btn,
    .btn-primary,
    button.view-selection-btn,
    button.go-to-cart-btn,
    button.view-slideshow-btn,
    a.view-selection-btn,
    a.go-to-cart-btn,
    a.view-slideshow-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        line-height: 1.2 !important;
    }
}

.gallery-header {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 40px;
    text-align: center;
}

.gallery-title {
    font-size: 48px;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: var(--title-color);
}

.gallery-title-en {
    font-size: 19px; /* LIGNE 504 - 60% plus petit que le titre principal (48px * 0.4 = 19px) - Modifier ici */
    font-weight: 200;
    letter-spacing: 2px;
    display: block;
    margin-top: 10px;
    opacity: 0.8;
}

.gallery-intro {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-color);
    max-width: 900px;
    margin: 0 auto;
    text-align: justify; /* Justifié pour FR et EN */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-wrap: break-word;
}

/* === BANDEAU EDITION OUVERTE (series) === */
/* Place sous la banniere, avant le titre. Bord gauche cale sur la marge du
   site (meme reference que le logo : conteneur 1600px centre, padding 20px),
   et non sur la colonne 900px de l'intro. Puce rouge pulsante en tete pour
   attirer l'attention sur la mention (series : non numerote, non
   defiscalisable). Variables de theme pour compatibilite clair / sombre. */
.gallery-open-notice {
    max-width: 1600px;
    margin: 40px auto 0;
    padding: 0 20px;
    text-align: left;
    box-sizing: border-box;
}

.gallery-open-notice p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0;
    position: relative;
    padding-left: 22px;
}

/* Puce rouge avec pulsation douce */
.gallery-open-notice p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #AB5656;
    transform: translateY(-50%);
    animation: openNoticePulse 2.4s ease-in-out infinite;
}

@keyframes openNoticePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(171, 86, 86, 0.45);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 6px rgba(171, 86, 86, 0);
        opacity: 0.75;
    }
}

/* Respect des preferences de reduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    .gallery-open-notice p::before {
        animation: none;
    }
}

@media (max-width: 768px) {
    .gallery-open-notice {
        margin-top: 30px;
    }
    .gallery-open-notice p {
        font-size: 16px;
    }
}

/* Bascule desktop / mobile du rappel edition ouverte.
   Le message existe sous deux formes dans le HTML, une seule est visible :
     - au-dessus de 768px : le bandeau en dur, la modale est neutralisee ;
     - jusqu'a 768px      : la modale, le bandeau est masque.
   Le masquage de la modale est un filet de securite : notice-modal.js ne
   l'ouvre deja pas sur desktop (data-notice-mobile-only). */
@media (min-width: 769px) {
    .notice-modal-mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .gallery-open-notice {
        display: none;
    }
}

/* === NAVIGATION PAR TIERS (vues ambiance) ===
   Le tiers gauche et le tiers droit font defiler les photos ; le tiers
   central reste inerte. Le decoupage lui-meme est fait en JS (handlers
   mousemove/click sur le conteneur d'image), qui pose la classe d'etat
   correspondante : ce CSS ne fait qu'habiller ces trois etats.

   Rien ne change au statut de l'image : c'est un simple defilement
   d'apercu. Les etoiles de selection, la ou elles existent, restent
   pleinement actives sur la photo affichee.

   Curseur : chevron directionnel filaire, trace blanc fin double d'un
   lisere sombre pour rester lisible sur photo claire comme sombre.
   Repli sur les curseurs systeme w-resize / e-resize si le navigateur
   refuse les curseurs SVG (Safari et Firefox les ignorent au-dela de
   32 px, d'ou cette taille). */
.nav-zone-left {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpolyline%20points%3D%2220%2C8%2011%2C16%2020%2C24%22%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C0%2C0%2C.55%29%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolyline%20points%3D%2220%2C8%2011%2C16%2020%2C24%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 16, w-resize;
}

.nav-zone-right {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpolyline%20points%3D%2212%2C8%2021%2C16%2012%2C24%22%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C0%2C0%2C.55%29%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolyline%20points%3D%2212%2C8%2021%2C16%2012%2C24%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 16, e-resize;
}

.nav-zone-idle {
    cursor: default;
}

/* Leger voile blanc sous le tiers survole, pour rendre la zone
   identifiable sans surcharger l'interface. Pose par le JS en meme temps
   que le curseur, via un voile dedie place SOUS les elements interactifs
   (fleches, X, boutons « Agrandir »), qui restent cliquables. */
.nav-blur-veil {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 33.333%;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: opacity .22s;
}

.nav-blur-veil.active {
    opacity: 1;
}

.nav-blur-veil-left  { left: 0; }
.nav-blur-veil-right { right: 0; }

/* Pas d'effet de survol sur appareil tactile : le survol y est simule par
   le premier appui et laisserait le flou fige apres la navigation. */
@media (hover: none) {
    .nav-blur-veil {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-blur-veil {
        transition: none;
    }
}

/* === INDICATEUR DE DEFILEMENT ===
   Chevron centre en bas de la zone concernee, signalant qu'il reste du
   contenu sous la ligne de flottaison. Les barres de defilement etant
   masquees au repos sous macOS, rien n'indiquerait autrement qu'un contenu
   se poursuit.

   Deux usages : invitation initiale sur les pages (effacee au premier
   defilement, l'ascenseur natif prenant le relais) et indicateur permanent
   dans les modales, qui n'ont pas d'ascenseur visible.

   Aspect : meme pastille que les fleches de navigation (.preview-nav-arrow),
   mais ADAPTATIVE. Les fleches de lightbox sont posees sur photo, fond
   toujours sombre : leur pastille claire ne bouge pas. Le chevron, lui, est
   pose sur le fond de modale ou de page, qui suit le theme : sa pastille
   s'inverse donc en theme clair, faute de quoi un trace blanc sur fond blanc
   serait illisible. Meme vocabulaire visuel, decline selon le fond.

   Purement indicatif : pointer-events desactive, pour ne jamais gener les
   boutons places en bas de contenu. */
.scroll-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 13px;
    border-radius: 50%;
    /* Theme clair par defaut : pastille sombre sur fond clair. */
    background: rgba(60,60,60,.55);
    border: 1.5px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 12px rgba(0,0,0,.25);
    color: rgba(255,255,255,.92);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 20;
}

/* Theme sombre : le fond de page et de modale s'assombrit, la pastille
   repasse en clair, comme les fleches de lightbox. */
[data-theme="dark"] .scroll-hint {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    color: rgba(255,255,255,.90);
}

.scroll-hint.visible {
    opacity: 1;
    animation: scrollHintNudge 2.2s ease-in-out infinite;
}

.scroll-hint svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hote fixe de l'indicateur de page : ancre en bas de fenetre, sans occuper
   de place dans le flux. */
.scroll-hint-page-host {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    z-index: 1400; /* sous les modales (1500), au-dessus du contenu */
}

.scroll-hint-page-host .scroll-hint {
    bottom: 20px;
}

/* Mouvement vertical discret, pour attirer l'oeil sans agiter la page. */
@keyframes scrollHintNudge {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint.visible {
        animation: none;
    }
    .scroll-hint {
        transition: none;
    }
}

/* === LIGHTBOX === */
/* === LIGHTBOX SIMPLIFIEE === */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.98);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

/* Wrapper contenant image + label + controls */
.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 90vw;
    max-height: 90vh;
}

/* Wrapper de l'image avec les boutons prev/next */
.lightbox-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image directement dans lightbox-image-wrapper */
.lightbox-image-wrapper img {
    max-width: 90vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: grab;
    user-select: none;
    transition: transform 0.1s ease-out;
}

.lightbox-image-wrapper img.zoomed {
    cursor: move;
}

.lightbox-image-wrapper img.dragging {
    cursor: grabbing;
}

/* Label sous l'image */
.lightbox-label {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 10px;
    white-space: nowrap;
    user-select: text;
    cursor: text;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lightbox-label .selection-icon {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.selection-icon {
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.selection-icon.selected {
    background-color: #ffffff;
    color: black;
}

.selection-icon.selected::after {
    content: 'v';
    font-size: 14px;
    font-weight: bold;
}

/* Boutons navigation */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 52px !important; height: 52px !important;
    min-width: 52px; min-height: 52px;
    max-width: 52px; max-height: 52px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    border: 1.5px solid rgba(255,255,255,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    color: rgba(255,255,255,.90);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .22s, border-color .22s, transform .22s;
    z-index: 10001;
    padding: 0;
    line-height: 1;
}

/* Survol unifie de tous les X de fermeture sur image : rotation du signe,
   sans changement de taille. Meme comportement en lightbox 1, lightbox 2
   (plein ecran) et modale de previsualisation. */
.lightbox-close:hover {
    background: rgba(255,255,255,.32) !important;
    border-color: rgba(255,255,255,.80);
    transform: rotate(90deg);
}

/* Flèches lightbox style lb-arrow */
.lb-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .22s, border-color .22s, transform .22s;
    z-index: 10001;
}
.lb-arrow:hover {
    background: rgba(255,255,255,.32);
    border-color: rgba(255,255,255,.80);
    transform: translateY(-50%) scale(1.10);
}
.lb-arrow:active { transform: translateY(-50%) scale(.96); }
.lb-arrow.prev { left: 20px; }
.lb-arrow.next { right: 20px; }
.lb-arrow svg {
    width: 18px; height: 18px;
    stroke: rgba(255,255,255,.90);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lb-arrow.prev svg { margin-right: 2px; }
.lb-arrow.next svg { margin-left: 2px; }

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 52px !important; height: 52px !important;
    min-width: 52px; min-height: 52px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    border: 1.5px solid rgba(255,255,255,.45) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    display: flex !important; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .22s, border-color .22s, transform .22s;
    z-index: 10001;
    pointer-events: auto;
    font-size: 0 !important;
    padding: 0;
    color: transparent;
}
.lightbox-prev svg,
.lightbox-next svg {
    width: 18px !important; height: 18px !important;
    stroke: rgba(255,255,255,.90);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}
.lightbox-prev { left: 20px; }
.lightbox-prev svg { margin-right: 2px; }
.lightbox-next { right: 20px; }
.lightbox-next svg { margin-left: 2px; }
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255,255,255,.32) !important;
    border-color: rgba(255,255,255,.80) !important;
    transform: translateY(-50%) scale(1.10);
}

/* Flèches modale prévisualisation - même style */
.preview-nav-arrow {
    width: 52px; height: 52px;
    min-width: 52px; min-height: 52px;
    max-width: 52px; max-height: 52px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .22s, border-color .22s, transform .22s;
    flex-shrink: 0;
    color: white;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.preview-nav-arrow svg {
    width: 18px; height: 18px;
    stroke: rgba(255,255,255,.90);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.preview-nav-arrow:hover {
    background: rgba(255,255,255,.32);
    border-color: rgba(255,255,255,.80);
    transform: scale(1.10);
}
.preview-nav-arrow:active { transform: scale(.96); }

/* Variante fond clair — classe .on-light ou thème clair automatique */
.on-light .preview-nav-arrow,
.preview-nav-arrow.on-light,
[data-theme="light"] .preview-nav-arrow {
    background: rgba(0,0,0,.14);
    border: 1.5px solid rgba(0,0,0,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 12px rgba(0,0,0,.12);
}
.on-light .preview-nav-arrow svg,
.preview-nav-arrow.on-light svg,
[data-theme="light"] .preview-nav-arrow svg {
    stroke: rgba(0,0,0,.75);
}
.on-light .preview-nav-arrow:hover,
.preview-nav-arrow.on-light:hover,
[data-theme="light"] .preview-nav-arrow:hover {
    background: rgba(0,0,0,.26);
    border-color: rgba(0,0,0,.45);
}

/* Controls collés sous le label */
.lightbox-controls {
    display: flex;
    gap: 15px;
    z-index: 10001;
}

.lightbox-controls button {
    padding: 0;
    background-color: transparent;
    color: #ffffff;
    border-radius: 4px;
    transition: background-color var(--transition-speed);
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Cadre gris foncé pour visibilité sur zones claires */
    box-shadow: 0 0 0 3px rgba(60, 60, 60, 0.9), 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(80, 80, 80, 0.95);
}

.lightbox-controls button:hover {
    background-color: transparent;
    box-shadow: 0 0 0 3px rgba(80, 80, 80, 0.95), 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Bouton zoom toggle avec SVG */
.lightbox-controls .zoom-toggle {
    position: relative;
    border: 2px solid transparent;
    /* Griser la loupe */
    opacity: 0.7;
    filter: grayscale(0.3);
}

.lightbox-controls .zoom-toggle .zoom-icon {
    display: block;
    width: 40px;
    height: 40px;
    color: #ffffff;
}

.lightbox-controls .zoom-toggle .zoom-sign {
    font-size: 12px;
    font-weight: bold;
    fill: #ffffff;
}

/* Animation au survol */
.lightbox-controls .zoom-toggle:hover {
    opacity: 1;
    filter: grayscale(0);
}

.lightbox-controls .zoom-toggle:hover .zoom-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.lightbox-controls .btn-primary {
    background-color: transparent !important;
    border: 2px solid white !important;
    border-radius: 4px !important;
    font-size: 0; /* Pas d'emoji, juste SVG */
    transition: all 0.3s ease;
    position: relative;
}

/* SVG étoile dans bouton lightbox */
.lightbox-controls .btn-primary svg {
    width: 45px !important;
    height: 45px !important;
    display: block !important;
}

/* Étoile lightbox : blanche non sélectionnée */
.lightbox-controls .lightbox-star-btn svg polygon {
    fill: #ffffff;
    stroke: #222222;
    stroke-width: 1px;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.lightbox-controls .btn-primary:hover {
    background-color: transparent !important;
    transform: scale(1.05);
}

/* État sélectionné : étoile rouge bordeaux contour blanc */
.lightbox-controls .lightbox-star-btn.selected svg polygon {
    fill: #8c1e14;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linejoin: round;
}

.lightbox-controls .btn-primary.selected {
    background-color: transparent !important;
}

/* Supprimer le ✓ overlay */
.lightbox-controls .btn-primary.selected::after {
    content: none;
}

/* Étoile de sélection réduite (lightbox 1 #lightbox-quote-btn ET vue plein
   écran "Agrandir la vue" .fullscreen-star-btn, qui réutilise ces mêmes
   classes) : sélecteur plus spécifique que .lightbox-controls button /
   .lightbox-controls .btn-primary ci-dessus, ne modifie qu'eux, la loupe
   .zoom-toggle garde sa taille d'origine. */
.lightbox-controls .lightbox-star-btn {
    width: 44px;
    height: 44px;
}

.lightbox-controls .lightbox-star-btn svg {
    width: 30px !important;
    height: 30px !important;
}

/* Amélioration zones tactiles sur mobile */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    /* Boutons caddie dans les galeries - taille normale sur mobile */
    .filename-cart-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .filename-cart-btn.selected::after {
        font-size: 28px !important;
    }
    
    /* Boutons d'action (Voir le panier, etc.) */
    .go-to-cart-btn,
    .view-slideshow-btn,
    .btn-primary,
    .view-selection-btn {
        min-height: 48px !important;
        padding: 14px 32px !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    }
    
    /* Boutons de la lightbox - portrait uniquement */
    .lightbox-controls button {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    }
    
    /* Boutons lightbox - SPÉCIFIQUE pour surcharger les règles générales */
    .lightbox-controls .btn-primary {
        width: 64px !important;
        height: 64px !important;
        font-size: 0 !important; /* Pas d'emoji, juste SVG */
        padding: 0 !important;
        min-height: 64px !important;
    }
    
    .lightbox-controls .btn-primary svg {
        width: 48px !important;
        height: 48px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Icône loupe même taille */
    .lightbox-controls .zoom-toggle .zoom-icon {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Étoile réduite en portrait tactile : sélecteur à 3 classes, plus
   spécifique que .lightbox-controls .btn-primary ci-dessus (2 classes),
   surcharge donc ses !important sans y toucher. */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .lightbox-controls .btn-primary.lightbox-star-btn {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
    }

    .lightbox-controls .btn-primary.lightbox-star-btn svg {
        width: 34px !important;
        height: 34px !important;
    }
}

/* Mode paysage tactile : boutons compacts pour rentrer dans l'écran */
@media (max-width: 1024px) and (max-height: 700px) and (orientation: landscape) and (pointer: coarse) {
    .lightbox-controls {
        gap: 8px !important;
        margin-top: 1px !important;
    }
    
    .lightbox-content {
        padding: 3px 15px !important;
    }
    
    .lightbox-image-wrapper {
        max-height: calc(100vh - 80px) !important;
    }
    
    .lightbox-label {
        font-size: 9px !important;
        margin-bottom: 1px !important;
        padding: 1px 0 !important;
    }
    
    /* Boutons compacts carrés : forcer dimensions exactes */
    .lightbox-controls button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        /* Cadre gris foncé adapté au mode compact */
        box-shadow: 0 0 0 2px rgba(60, 60, 60, 0.9), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(80, 80, 80, 0.95) !important;
    }
    
    /* SVG loupe compact */
    .lightbox-controls .zoom-toggle {
        width: 32px !important;
        height: 32px !important;
    }
    
    .lightbox-controls .zoom-toggle .zoom-icon {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        display: block !important;
    }
    
    .lightbox-controls .zoom-toggle svg {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        display: block !important;
    }
    
    /* Caddie compact */
    .lightbox-controls .btn-primary {
        width: 32px !important;
        height: 32px !important;
        font-size: 0 !important; /* Pas d'emoji, juste SVG */
        line-height: 1 !important;
        padding: 0 !important;
    }
    
    /* SVG panier en mode paysage */
    .lightbox-controls .btn-primary svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Étoile réduite en paysage tactile compact : encore un cran sous le
   .btn-primary générique (24px) ci-dessus. */
@media (max-width: 1024px) and (max-height: 700px) and (orientation: landscape) and (pointer: coarse) {
    .lightbox-controls .btn-primary.lightbox-star-btn {
        width: 26px !important;
        height: 26px !important;
    }

    .lightbox-controls .btn-primary.lightbox-star-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* Fallback paysage sans détection tactile */
@media (max-width: 1024px) and (max-height: 700px) and (orientation: landscape) {
    .lightbox-controls button {
        height: 32px !important;
        max-height: 32px !important;
        width: 32px !important;
        max-width: 32px !important;
        /* Cadre gris foncé adapté au mode compact */
        box-shadow: 0 0 0 2px rgba(60, 60, 60, 0.9), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(80, 80, 80, 0.95) !important;
    }
    
    .lightbox-controls .zoom-toggle .zoom-icon,
    .lightbox-controls .zoom-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* === MODALES === */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1500;
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 20px 0;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-text);
    padding: 40px;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin: auto;
}

/* Fix formulaires dans modales en theme sombre */
[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .modal-content textarea {
    background-color: var(--bg-secondary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-content label {
    color: var(--text-color);
}

[data-theme="dark"] .modal-content h2 {
    color: var(--text-color);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
    color: var(--modal-text);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.modal-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Style spécifique pour le bouton de fermeture de la modale preview */
.modal-preview-content .modal-close {
    top: -14px;
    right: -14px;
    font-size: 22px;
    width: 52px !important; height: 52px !important;
    min-width: 52px !important; min-height: 52px !important;
    max-width: 52px !important; max-height: 52px !important;
    border-radius: 50% !important;
    background: rgba(60,60,60,.60) !important;
    border: 1.5px solid rgba(255,255,255,.45) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 12px rgba(0,0,0,.25);
    color: rgba(255,255,255,.90) !important;
    transition: background .22s, border-color .22s, transform .22s;
    line-height: 1;
    padding: 0;
}

[data-theme="dark"] .modal-preview-content .modal-close {
    background: rgba(60,60,60,.60);
    border-color: rgba(255,255,255,.35);
}

.modal-preview-content .modal-close:hover {
    background: rgba(80,80,80,.85);
    border-color: rgba(255,255,255,.80);
    transform: rotate(90deg);
}

[data-theme="dark"] .modal-preview-content .modal-close:hover {
    background: rgba(80,80,80,.85);
}

.modal-title {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: var(--title-color);
}

/* === FORMULAIRES === */
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-color);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--title-color);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* === BOUTONS === */
button,
.btn {
    font-family: 'Raleway', sans-serif;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all var(--transition-speed);
    cursor: pointer;
    border: none;
}

.btn-primary,
button[type="submit"],
.view-selection-btn,
.go-to-cart-btn,
.view-slideshow-btn {
    background-color: var(--btn-bg-light);
    color: var(--btn-text-light);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] button[type="submit"],
[data-theme="dark"] .view-selection-btn,
[data-theme="dark"] .go-to-cart-btn,
[data-theme="dark"] .view-slideshow-btn {
    background-color: var(--btn-bg-dark);
    color: var(--btn-text-dark);
}

.btn-primary:hover,
button[type="submit"]:hover,
.view-selection-btn:hover,
.go-to-cart-btn:hover,
.view-slideshow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] button[type="submit"]:hover,
[data-theme="dark"] .view-selection-btn:hover,
[data-theme="dark"] .go-to-cart-btn:hover,
[data-theme="dark"] .view-slideshow-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

/* === FOOTER === */
#main-footer {
    padding: 20px 20px 40px 20px;
    margin-top: 80px;
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] #main-footer {
    background-color: var(--bg-secondary);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.footer-ai-note {
    align-self: flex-start;
    font-size: 12px;
    font-style: italic;
    color: var(--secondary-color);
    opacity: 0.8;
}

.footer-copyright-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    max-width: 800px;
}

.footer-copyright-text strong {
    font-weight: 600;
    color: var(--title-color);
}

.footer-link {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-speed);
}

.footer-link:hover {
    color: var(--text-color);
}

.footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-social a {
    color: var(--text-color);
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social a:hover {
    color: var(--link-color);
    transform: translateY(-3px);
}

.footer-social svg {
    width: 32px;
    height: 32px;
}

.footer-copyright {
    font-size: 12px;
    color: var(--secondary-color);
    text-align: center;
}

.footer-copyright .footer-separator {
    margin: 0 8px;
    opacity: 0.5;
}

.footer-copyright .footer-link {
    color: var(--secondary-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-copyright .footer-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .gallery-mosaic,
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .gallery-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .header-container {
        padding: 0 8px;
    }
    
    .header-left .logo {
        font-size: 17px;
        line-height: 1.2;
        letter-spacing: 0.8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .header-left .logo .logo-line1,
    .header-left .logo .logo-line2,
    .header-left .logo .logo-line3 {
        white-space: nowrap;
    }
    
    .header-left .logo .logo-line2::before {
        content: '';
    }
    
    /* Le toggle langue passe en version compacte (1 lettre-declencheur au
       lieu de 3 boutons cote a cote, voir plus bas) : la place liberee
       permet de redonner un peu de respiration entre les boutons plutot
       que de les laisser colles (etaient a 1px). */
    .header-right {
        gap: 4px !important;
    }
    
    .toggles {
        gap: 4px !important;
    }
    
    .toggle-btn {
        font-size: 10px !important;
    }
    
    .toggle-btn span {
        padding: 1px 0px !important;
    }
    
    .toggle-btn .separator {
        padding: 0 1px !important;
    }
    
    /* Toggle connexion plus large */
    #login-toggle.toggle-switch {
        padding: 3px 12px !important;
        min-width: 88px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
    
    /* Autres toggles (en, dark) plus compacts */
    #lang-toggle.toggle-switch,
    #theme-toggle.toggle-switch {
        padding: 3px 3px !important;
        min-width: 42px !important;
        height: 28px !important;
    }

    /* theme-toggle seul : "sombre"/"scuro"/"chiaro" plus longs que "dark",
       besoin d'un peu plus de largeur que la regle partagee ci-dessus */
    #theme-toggle.toggle-switch {
        min-width: 64px !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
    }

    /* Toggle langue compact : seule la langue active reste visible (sert de
       declencheur), les 2 autres apparaissent en menu deroule vertical au
       clic - libere la place auparavant occupee par les 3 langues cote a
       cote (lang-dropdown-open ajoutee/retiree par script.js). */
    #lang-toggle.toggle-switch.lang-toggle-3 {
        position: relative;
        min-width: 36px !important;
        width: 36px;
        padding: 3px 0 !important;
        gap: 0;
        overflow: visible;
    }

    #lang-toggle.lang-toggle-3 .toggle-option {
        position: static;
    }

    /* La regle desktop .lang-toggle-3 .toggle-option.active met
       pointer-events:none (la langue active n'est qu'un libelle non
       cliquable côte a cote des 2 autres) - sur mobile ce meme bouton
       devient le declencheur du menu, il doit redevenir cliquable. */
    #lang-toggle.lang-toggle-3 .toggle-option.active {
        pointer-events: auto;
        cursor: pointer;
    }

    #lang-toggle.lang-toggle-3 .toggle-option:not(.active) {
        position: absolute;
        left: 0;
        width: 56px;
        height: 44px;
        display: flex;
        font-size: 13px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: var(--bg-color, #fff);
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        transition: opacity var(--transition-speed), visibility var(--transition-speed);
        z-index: 1200;
    }

    [data-theme="dark"] #lang-toggle.lang-toggle-3 .toggle-option:not(.active) {
        background: #1a1a1a;
        border-color: rgba(255, 255, 255, 0.15);
    }

    #lang-toggle.lang-toggle-3.lang-dropdown-open .toggle-option:not(.active) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Empilement vertical dans l'ordre fixe fr / en / it (en sautant la
       langue active), calcule via data-current-lang (deja rendu par
       header.php) - jamais de chevauchement entre les 2 options du menu.
       Lignes agrandies a 44px (cible tactile confortable) : le panneau
       est en position absolue, cet agrandissement ne coute rien sur la
       largeur du header. */
    #lang-toggle[data-current-lang="fr"] .toggle-option[data-lang="en"],
    #lang-toggle[data-current-lang="en"] .toggle-option[data-lang="fr"] { top: calc(100% + 4px); }

    #lang-toggle[data-current-lang="fr"] .toggle-option[data-lang="it"],
    #lang-toggle[data-current-lang="en"] .toggle-option[data-lang="it"] { top: calc(100% + 52px); }

    #lang-toggle[data-current-lang="it"] .toggle-option[data-lang="fr"] { top: calc(100% + 4px); }
    #lang-toggle[data-current-lang="it"] .toggle-option[data-lang="en"] { top: calc(100% + 52px); }

    /* Chevron sur la langue active : indique qu'elle est cliquable et ouvre
       le menu - absent sur desktop, ou les 3 langues sont deja visibles. */
    #lang-toggle.lang-toggle-3 .toggle-option.active::after {
        content: '\25BE';
        font-size: 8px;
        margin-left: 2px;
        opacity: 0.6;
    }
    
    /* Bouton panier compact */
    #cart-link.login-btn {
        padding: 3px 5px !important;
        min-width: 56px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    /* Bouton Galeries compact pour laisser de la place au logo */
    .btn-galleries {
        padding: 3px 7px !important;
        font-size: 10px !important;
        letter-spacing: 0.6px !important;
        height: 28px !important;
    }
    
    .hamburger {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        margin-left: 0px !important;
    }
    
    .hamburger span:not(.hamburger-text) {
        width: 65%;
        height: 2px;
    }
    
    .hamburger span:nth-child(1) {
        top: 3px;
    }
    
    .hamburger span:nth-child(2) {
        top: 13px;
    }
    
    .hamburger span:nth-child(3) {
        top: 23px;
    }
    
    .hamburger-text {
        bottom: -14px;
        font-size: 8px;
    }
    
    /* Réduire les marges générales sur mobile */
    main {
        padding-top: 10px;
    }
    
    .gallery-mosaic,
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        padding: 20px 10px;
    }
    
    .gallery-banner {
        height: 200px;
    }
    
    .gallery-banner img {
        object-fit: cover;
        object-position: center center;
    }
    
    /* Réduire hauteur des boutons */
    .view-selection-btn,
    .go-to-cart-btn,
    .view-slideshow-btn,
    .btn-primary {
        padding: 10px 20px;
        font-size: 14px;
        min-height: 40px;
    }
    
    .gallery-header {
        padding: 0 10px;
        margin: 30px auto;
    }
    
    .gallery-title {
        font-size: 28px;
    }
    
    .gallery-intro {
        font-size: 16px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .quote-preview {
        grid-template-columns: 1fr;
        padding: 15px 10px;
    }
    
    /* Améliorer les conteneurs généraux */
    .container,
    .page-container,
    section {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }
    
    /* Tables responsive */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-content {
        padding: 30px 15px;
        margin: 20px 10px;
        max-width: calc(100vw - 20px);
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 52px !important;
        height: 52px !important;
        font-size: 0 !important;
        background: rgba(255,255,255,.18) !important;
    }
    
    .lightbox-prev {
        left: 8px;
        right: auto;
    }
    
    .lightbox-next {
        right: 8px;
        left: auto;
    }
    
    .lightbox-controls {
        flex-wrap: wrap;
        justify-content: center;
    }


}
@media (max-width: 480px) {
    :root {
        --header-height: 65px;
    }
    
    .header-container {
        padding: 0 6px;
        gap: 4px;
    }
    
    /* Garantie : la zone droite ne pousse jamais le hamburger hors écran */
    .header-right {
        min-width: 0;
        flex-shrink: 1;
    }
    
    /* Le hamburger reste toujours visible et intact */
    #hamburger.hamburger {
        flex-shrink: 0 !important;
    }
    
    .header-left .logo {
        font-size: 9px;
        line-height: 1.1;
        letter-spacing: 0.6px;
    }
    
    .header-left .logo .logo-line1,
    .header-left .logo .logo-line2,
    .header-left .logo .logo-line3 {
        white-space: nowrap;
    }
    
    /* Toggle langue compact (voir plus bas) libere de la place : gaps
       redonnes a 3px plutot que colles a 1px. */
    .header-right {
        gap: 3px !important;
    }
    
    .toggles {
        gap: 3px !important;
    }
    
    .toggle-btn {
        font-size: 10px !important;
    }
    
    .toggle-btn span {
        padding: 1px 0px !important;
    }
    
    .toggle-btn .separator {
        padding: 0 1px !important;
    }
    
    /* Toggle login - le texte affiché (connexion/connecté/accedi/connesso/
       login/logged) varie en longueur selon la langue ; un min-width trop
       serré fait deborder le libelle hors de sa boite (position:absolute,
       overflow:visible sur .toggle-switch) et le fait chevaucher les
       boutons voisins ("entrechoques"). On elargit donc suffisamment pour
       le mot le plus long ("connexion", 9 caracteres) et on reduit un peu
       la police pour rester compact. */
    #login-toggle.toggle-switch {
        padding: 2px 8px !important;
        min-width: 72px !important;
        height: 26px !important;
        font-size: 9.5px !important;
    }
    
    /* Theme toggle : meme logique ("sombre"/"scuro"/"chiaro" plus longs
       que "dark") */
    #theme-toggle.toggle-switch {
        padding: 2px 6px !important;
        min-width: 54px !important;
        height: 26px !important;
        font-size: 9.5px !important;
    }

    #lang-toggle.toggle-switch.lang-toggle-3 {
        position: relative;
        min-width: 32px !important;
        width: 32px;
        padding: 2px 0 !important;
        gap: 0;
        font-size: 10px;
        overflow: visible;
    }

    /* Meme correctif que le bloc 768px : la regle desktop met
       pointer-events:none sur la langue active, il faut le neutraliser
       ici pour que le bouton reste cliquable (declencheur du menu). */
    #lang-toggle.lang-toggle-3 .toggle-option.active {
        pointer-events: auto;
        cursor: pointer;
    }

    #lang-toggle.lang-toggle-3 .toggle-option:not(.active) {
        position: absolute;
        left: 0;
        width: 52px;
        height: 42px;
        display: flex;
        font-size: 12px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: var(--bg-color, #fff);
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        transition: opacity var(--transition-speed), visibility var(--transition-speed);
        z-index: 1200;
    }

    [data-theme="dark"] #lang-toggle.lang-toggle-3 .toggle-option:not(.active) {
        background: #1a1a1a;
        border-color: rgba(255, 255, 255, 0.15);
    }

    #lang-toggle.lang-toggle-3.lang-dropdown-open .toggle-option:not(.active) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #lang-toggle[data-current-lang="fr"] .toggle-option[data-lang="en"],
    #lang-toggle[data-current-lang="en"] .toggle-option[data-lang="fr"] { top: calc(100% + 3px); }

    #lang-toggle[data-current-lang="fr"] .toggle-option[data-lang="it"],
    #lang-toggle[data-current-lang="en"] .toggle-option[data-lang="it"] { top: calc(100% + 49px); }

    #lang-toggle[data-current-lang="it"] .toggle-option[data-lang="fr"] { top: calc(100% + 3px); }
    #lang-toggle[data-current-lang="it"] .toggle-option[data-lang="en"] { top: calc(100% + 49px); }

    #lang-toggle.lang-toggle-3 .toggle-option.active::after {
        content: '\25BE';
        font-size: 7px;
        margin-left: 1px;
        opacity: 0.6;
    }
    
    /* Bouton panier compact */
    #cart-link.login-btn {
        padding: 2px 4px !important;
        min-width: 56px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
    
    /* Bouton Galeries compact pour laisser de la place au logo */
    .btn-galleries {
        padding: 2px 5px !important;
        font-size: 8.5px !important;
        letter-spacing: 0.3px !important;
        height: 26px !important;
    }
    
    .hamburger {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        margin-left: 0px !important;
    }
    
    .hamburger span:not(.hamburger-text) {
        height: 2px;
    }
    
    .hamburger span:nth-child(1) {
        top: 2px;
    }
    
    .hamburger span:nth-child(2) {
        top: 12px;
    }
    
    .hamburger span:nth-child(3) {
        top: 22px;
    }
    
    .hamburger-text {
        bottom: -13px;
        font-size: 7px;
    }
    
    /* Réduire encore plus les marges */
    main {
        padding-top: 5px;
    }
    
    .gallery-mosaic,
    .gallery-grid {
        grid-template-columns: 1fr;
        padding: 15px 8px;
    }
    
    .gallery-banner {
        height: 300px;
    }
    
    .gallery-header {
        padding: 0 8px;
        margin: 20px auto;
    }
    
    .gallery-title {
        font-size: 24px;
    }
    
    .quote-preview {
        padding: 10px 8px;
    }
    
    /* Conteneurs très petits écrans */
    .container,
    .page-container,
    section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .modal-content {
        padding: 20px 10px;
        margin: 10px 8px;
        max-width: calc(100vw - 16px);
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* === UTILITY CLASSES === */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-40 {
    margin-top: 40px;
}

/* === PAGES STATIQUES === */
.page-content {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 40px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
}

.page-title {
    font-size: 48px;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: center;
    color: var(--title-color);
}

.page-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-wrap: break-word;
}

[data-theme="dark"] .page-text {
    color: var(--text-light);
}

.page-text p {
    margin-bottom: 20px;
}

.page-text h2 {
    font-size: 24px;
    font-weight: 300;
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--title-color);
}

.page-text h3 {
    font-size: 20px;
    font-weight: 300;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--title-color);
}

.page-text ul, .page-text ol {
    margin-left: 30px;
    margin-bottom: 20px;
}

.page-text li {
    margin-bottom: 10px;
}

/* === GALLERY IMAGE WRAPPER === */
.gallery-image-wrapper {
    position: relative;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    touch-action: manipulation; /* Éviter le délai de 300ms sur mobile */
}

.gallery-image-wrapper.visible {
    animation: zoomIn 1.5s ease-out forwards;
}

.gallery-image-wrapper.animated {
    opacity: 1;
}

.gallery-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-speed);
}

.gallery-image-wrapper:hover img {
    transform: scale(1.05);
}

/* Overlay blanc 50% pour les photos non sélectionnées */
.gallery-image-wrapper.not-selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 5;
}

[data-theme="dark"] .gallery-image-wrapper.not-selected::after {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Cadre rouge 1px pour les photos sélectionnées */
.gallery-image-wrapper.selected-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid red;
    pointer-events: none;
    z-index: 10;
    box-sizing: border-box;
}

/* ========================================
   NOUVEAU SYSTEME DE SELECTION
   ======================================== */

.selection-checkbox {
    display: none !important; /* Masquer les checkboxes de sélection */
}

.selection-checkbox:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.selection-checkbox.checked {
    background-color: transparent;
    color: rgb(50, 50, 50);
}

.selection-checkbox.checked::after {
    content: '\2713';
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

#lightbox-checkbox {
    border-color: rgb(50, 50, 50);
    color: rgb(50, 50, 50);
}

#lightbox-checkbox.checked {
    background-color: rgb(50, 50, 50);
    color: black;
}

/* Tooltip instantané des 3 boutons de galerie (diaporama / sélection /
   panier) : au-dessus du bouton, centré, sans délai. Remplace le tooltip
   natif du navigateur (attribut title), non repositionnable et trop lent.
   Même esprit visuel que #star-tooltip (index.php). */
#gallery-btn-tooltip {
    display: none;
    position: absolute;
    z-index: 9999;
    max-width: 280px;
    padding: 10px 14px;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-align: center;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

#gallery-btn-tooltip.visible {
    display: block;
}

/* Conteneur pour les boutons de galerie */
.gallery-buttons-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px auto;
    max-width: 600px;
}

.view-selection-btn,
.go-to-cart-btn,
.view-slideshow-btn {
    flex: 1;
    padding: 12px 15px; /* Réduit encore pour plus d'espace */
    border: none;
    border-radius: 4px;
    font-size: 13px; /* Réduit de 14px à 13px */
    font-weight: 500;
    letter-spacing: 0.5px; /* Réduit de 1px à 0.5px */
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background-color: var(--btn-bg-light);
    color: var(--btn-text-light);
    min-height: 70px; /* Hauteur mini partagee - .gallery-buttons-container
                          (display:flex, align-items:stretch par defaut)
                          egalise automatiquement les 3 boutons sur la
                          hauteur du plus grand */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3; /* Réduit pour plus compact */
    white-space: normal; /* Permet le retour à la ligne */
    word-wrap: break-word;
    /* overflow: hidden retire : coupait le compteur "(1)" quand le texte
       traduit (ex. italien) passait sur 2 lignes */
}

[data-theme="dark"] .view-selection-btn,
[data-theme="dark"] .go-to-cart-btn,
[data-theme="dark"] .view-slideshow-btn {
    background-color: var(--btn-bg-dark);
    color: var(--btn-text-dark);
}

.view-selection-btn:hover,
.go-to-cart-btn:hover,
.view-slideshow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .view-selection-btn:hover,
[data-theme="dark"] .go-to-cart-btn:hover,
[data-theme="dark"] .view-slideshow-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* ========================================
   MODALE "PAS DE SELECTION"
   ======================================== */

.no-selection-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.no-selection-modal.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.no-selection-content {
    background-color: var(--modal-bg);
    color: var(--modal-text);
    padding: 30px 50px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.5px;
    border: 2px solid;
}


/* ========================================
   STYLES GLOBAUX POUR MODALES
   À ajouter dans style.css
   ======================================== */

/* Overlay de la modale */
.global-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .global-modal-overlay {
    background: rgba(0, 0, 0, 0.85);
}

.global-modal-overlay.show {
    opacity: 1;
}

/* Contenu de la modale */
.global-modal-message {
    background: var(--bg-color);
    color: var(--text-color);
    padding: 40px 60px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    font-size: 16px;
    line-height: 1.6;
    max-width: 500px;
    min-width: 300px;
}

/* Icône */
.global-modal-icon {
    font-size: 48px;
    color: #27ae60;
    margin-bottom: 15px;
}

/* Boutons dans les confirmations */
.global-modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    min-width: 120px;
    transition: opacity 0.2s ease;
}

.global-modal-btn:hover {
    opacity: 0.9;
}

.global-modal-btn-primary {
    background: var(--title-color);
    color: white;
}

.global-modal-btn-secondary {
    background: #666;
    color: white;
}

/* === CORRECTIONS FINALES POUR MOBILE === */
@media (max-width: 768px) {
    /* Toggles plus compacts sur mobile */
    .toggles {
        gap: 10px;
    }
    
    .toggle-switch {
        border-radius: 5px;
        padding: 5px 11px;
        min-width: 50px;
        height: 28px;
    }
    
    .toggle-option {
        font-size: 12px;
    }

    .toggle-switch.lang-toggle-3 {
        min-width: 76px;
        padding: 5px 6px;
        gap: 4px;
    }

    .login-btn {
        padding: 5px 11px;
        font-size: 12px;
        border-radius: 5px;
        min-width: 70px;
        height: 28px;
        line-height: 18px;
    }
    
    /* Forcer les marges réduites sur tous les conteneurs */
    body > *,
    main > *,
    .page-content,
    .cart-container,
    .order-container,
    .quote-container,
    article,
    section,
    div[class*="container"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Conteneurs spécifiques */
    .gallery-header,
    .page-header {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Tableaux et listes */
    table,
    .table-responsive {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        overflow-x: auto !important;
    }
    
    /* Images et médias */
    img,
    figure,
    .image-wrapper {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Marges encore plus réduites sur très petits écrans */
    body > *,
    main > *,
    .page-content,
    .cart-container,
    .order-container,
    .quote-container,
    article,
    section,
    div[class*="container"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .gallery-header,
    .page-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    table,
    .table-responsive {
        max-width: calc(100vw - 16px) !important;
    }
}

/* Fix pour affichage texte marges blanches 
.option-group p {
    line-height: 1.5;
}*/

.option-group a.margin-info-link {
    display: inline;
    white-space: normal;
}

/* Fix interlignage texte marges blanches */
.option-group > h3 + p {
    line-height: 1.5;
}

/* Fix hauteur uniforme des options de marges et dimensions */
.margin-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.margin-option,
.dimension-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 40px;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.margin-option:hover,
.dimension-option:hover {
    background-color: var(--bg-secondary);
}

.margin-label-compact,
.dimension-label-compact {
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.margin-label-compact {
    white-space: nowrap;
}

/* En-tête du tableau dimensions : Format papier / Dimensions photo.
   Porté depuis cart.php (Couche 2 : le markup est mutualisé via
   print-options-renderer.js, mais cette règle CSS n'existait qu'en
   <style> inline dans cart.php — absente ici, la modale affichait
   l'en-tête sans mise en page (spans collés en ligne). */
.dimension-table-header {
    display: grid;
    grid-template-columns: 18px 1fr 1fr;
    gap: 8px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--title-color);
    text-align: center;
}

/* Variante modale (script.js) : réutilise directement .dimension-cols pour
   la partie données, garantissant un alignement pixel-perfect avec les
   lignes à TOUTE largeur (même règle CSS exacte, pas une approximation
   côté en-tête). cart.php garde l'ancienne structure grid ci-dessus,
   inchangée. */
.dimension-table-header.dth-shared {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-template-columns: none;
}

.dth-shared .dth-spacer {
    width: 16px;
    flex-shrink: 0;
}

.dth-shared .dth-cols {
    flex: 1;
    text-align: left;
}

/* La zone de données des LIGNES doit s'étirer exactement comme celle de
   l'en-tête ci-dessus (flex:1), sinon elle se contente de la largeur de
   son contenu et devient plus étroite que l'en-tête — d'où le décalage
   du libellé "Dimensions photo" vers la droite par rapport aux valeurs
   réelles en dessous. Scopé à la modale (#preview-dimensions-container)
   pour ne jamais toucher cart.php, qui a son propre système. */
#preview-dimensions-container .dimension-cols {
    flex: 1;
}

.dth-shared .dth-cols > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--title-color);
}

/* Taille fixe (au lieu du rendu par défaut du navigateur, qui varie selon
   l'OS/le navigateur) : condition pour que le calcul d'alignement ci-dessus
   (18px + 8px de gap = 16px de radio + 10px de gap de .dimension-option)
   soit vrai partout, pas seulement sur le navigateur où c'était mesuré. */
.dimension-option input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Deux colonnes (format papier / dimensions photo) séparées clairement.
   Passé en grid à colonnes égales (comme l'en-tête .dimension-table-header
   et comme cart.php) : en flex, les colonnes se dimensionnaient selon leur
   contenu et ne s'alignaient jamais exactement sous l'en-tête. */
.dimension-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.dimension-cols .dim-col {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.dimension-cols .dim-separator {
    opacity: 0.5;
    margin: 0 2px;
}

/* Micro-libellés inline (Format papier / Dimensions photo) injectés par
   script.js pour la modale uniquement (showInlineLabels:true) — masqués
   par défaut, l'en-tête du tableau suffit sur desktop. Rendus visibles
   sous 768px, là où l'en-tête est masqué (voir media query plus bas). */
.dim-col-label {
    display: none;
}

/* ========================================
   MODALE DE PRÉVISUALISATION (GALERIES)
   ======================================== */

.modal-preview-content {
    max-width: 1400px !important;
    width: 80% !important;
    padding: 40px !important;
    container-type: inline-size;
    container-name: preview-modal;
}

.preview-modal-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Section principale (prévisualisation + options) */
.preview-modal-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section prévisualisation */
.preview-modal-slideshow-wrapper {
    position: relative;
    overflow: hidden;
}

.preview-modal-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
}

.preview-slide-wrapper {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
    overflow: hidden;
}

.preview-slide-wrapper.active {
    display: block;
}

.ambiance-bg-modal {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-disclaimer-modal {
    font-size: 13px;
    color: var(--secondary-color);
    text-align: center;
    margin: 3px 0 0 0; /* Réduit drastiquement pour remonter près du visuel */
    line-height: 1.5;
}

.preview-dots-modal {
    display: flex;
    justify-content: center;
    gap: 12px;
    /* Espace resserre entre la legende, les dots d'ambiance et l'etoile de
       selection : 3px au-dessus pour rester pres de la legende, 8px sous les
       dots avant le filet. */
    padding: 3px 0 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.preview-dot-modal {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.4;
}

.preview-dot-modal:hover {
    opacity: 0.7;
    transform: scale(1.2);
}

.preview-dot-modal.active {
    background-color: var(--title-color);
    opacity: 1;
    transform: scale(1.3);
}

/* Tooltip "Choisissez une ambiance" / "Choose a style" / "Scegli un'ambientazione"
   au-dessus des dots d'ambiance — mutualisé entre la modale galerie
   (.preview-dots-modal) et le panier (.preview-controls). CSS pur, trilingue
   via html[lang], sans dépendance JS : n'affecte ni ambiance-engine.js ni
   cart.js/script.js. */
.preview-dots-modal,
.preview-controls {
    position: relative;
}

.preview-dots-modal::before,
.preview-controls::before {
    content: 'Choisissez une ambiance';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 20;
}

html[lang="en"] .preview-dots-modal::before,
html[lang="en"] .preview-controls::before {
    content: 'Choose a style';
}

html[lang="it"] .preview-dots-modal::before,
html[lang="it"] .preview-controls::before {
    content: "Scegli un'ambientazione";
}

.preview-dots-modal:hover::before,
.preview-controls:hover::before {
    opacity: 1;
}

/* Bouton d'agrandissement dans modale galerie */
.preview-enlarge-btn-modal {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.preview-enlarge-btn-modal:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateX(-50%) scale(1.05);
}

/* Caddie de sélection/désélection dans l'angle inférieur droit de l'image */
.preview-cart-toggle-modal {
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 46px;
    height: 46px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.preview-cart-toggle-modal:hover {
    transform: scale(1.05);
    background: rgba(255,255,255,0.3);
}

/* SVG étoile — non sélectionnée : blanche contour sombre */
.preview-cart-toggle-modal svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
}

.preview-cart-toggle-modal svg polygon {
    fill: #ffffff;
    stroke: #222222;
    stroke-width: 1px;
    stroke-linejoin: round;
}

/* Sélectionnée : étoile rouge bordeaux contour blanc */
.preview-cart-toggle-modal.selected {
    background: rgba(255,255,255,0.25);
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.9));
}

.preview-cart-toggle-modal.selected svg polygon {
    fill: #8c1e14;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linejoin: round;
}

/* Masquer les anciens éléments cart-icon / cart-cross */
.preview-cart-toggle-modal .cart-icon,
.preview-cart-toggle-modal .cart-cross {
    display: none !important;
}

/* Section options SOUS la prévisualisation */
.preview-modal-options {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

/* Bascule verticale : quand la modale elle-meme (et non le viewport) est
   plus etroite que 900px, le bloc Marges blanches passe sous Dimensions.
   La container query interroge l'ancetre .modal-preview-content, ce qui
   fonctionne meme en grande fenetre ou la modale reste etroite. */
@container preview-modal (max-width: 900px) {
    .preview-modal-options {
        grid-template-columns: 1fr;
    }
}

.option-group-modal {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Groupe Dimensions - largeur minimale */
.option-group-modal:first-child {
    min-width: fit-content;
}

/* Groupe Marges - prend l'espace restant */
.option-group-modal:last-child {
    width: 100%;
}

.option-group-modal h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--title-color);
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--title-color);
}

.margin-description-modal {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* Options de dimensions */
#preview-dimensions-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dimension-option-modal {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bg-color);
}

.dimension-option-modal:hover {
    border-color: var(--title-color);
    background-color: var(--bg-secondary);
}

.dimension-option-modal input[type="radio"] {
    margin-right: 12px;
    cursor: pointer;
    accent-color: var(--title-color);
}

.dimension-option-modal input[type="radio"]:checked ~ .dimension-label-compact-modal {
    color: var(--title-color);
    font-weight: 600;
}

.dimension-label-compact-modal {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 15px;
    color: var(--text-color);
}

.dimension-label-compact-modal .dim-value {
    font-weight: 500;
}

.dimension-label-compact-modal .dim-separator {
    color: var(--secondary-color);
}

/* Options de marges */
.margin-options-grid-modal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.margin-option-modal {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bg-color);
}

.margin-option-modal:hover {
    border-color: var(--title-color);
    background-color: var(--bg-secondary);
}

.margin-option-modal input[type="radio"] {
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--title-color);
}

.margin-option-modal input[type="radio"]:checked ~ .margin-label-compact-modal {
    color: var(--title-color);
    font-weight: 600;
}

.margin-label-compact-modal {
    font-size: 14px;
    color: var(--text-color);
}

.margin-tip-modal {
    font-size: 13px;
    color: var(--secondary-color);
    margin-top: 10px;
    line-height: 1.5;
}

/* Boutons de navigation entre photos */
.preview-nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    /* Etoile de selection, entre les dots d'ambiance et le tableau des
       options. Espaces resserres : 8px au-dessus (16px au total avec le
       padding des dots), 6px en dessous (12px avec le padding des options). */
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 6px;
}

/* Fleches de navigation flottantes sur la previsualisation.
   Meme presentation que celles de la lightbox : boutons circulaires
   centres verticalement sur les bords gauche et droit de l'image.
   L'etoile de selection reste, elle, dans .preview-nav-buttons sous l'image. */
.preview-nav-arrow-float {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    pointer-events: auto;
}

.preview-nav-arrow-float.preview-nav-prev { left: 14px; }
.preview-nav-arrow-float.preview-nav-next { right: 14px; }

.preview-nav-arrow-float:hover {
    transform: translateY(-50%) scale(1.10);
}

.preview-nav-arrow-float:active {
    transform: translateY(-50%) scale(.96);
}

@media (max-width: 600px) {
    .preview-nav-arrow-float.preview-nav-prev { left: 8px; }
    .preview-nav-arrow-float.preview-nav-next { right: 8px; }
}

/* Étoile sélection entre les flèches */
.preview-nav-star {
    width: 52px; height: 52px;
    min-width: 52px; min-height: 52px;
    max-width: 52px; max-height: 52px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .22s;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.preview-nav-star svg {
    width: 28px;
    height: 28px;
    display: block;
}

/* Non sélectionnée : rouge bordeaux contour blanc */
.preview-nav-star svg polygon {
    fill: #ffffff;
    stroke: #222222;
    stroke-width: 1px;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.preview-nav-star:hover {
    transform: scale(1.10);
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
}

/* Sélectionnée : étoile rouge bordeaux contour blanc */
.preview-nav-star.selected {
    background: rgba(255,255,255,0.25);
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.9));
}

.preview-nav-star.selected svg polygon {
    fill: #8c1e14;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linejoin: round;
}

/* Variante fond clair */
.on-light .preview-nav-star,
.preview-nav-star.on-light,
[data-theme="light"] .preview-nav-star {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

[data-theme="light"] .preview-nav-star.selected,
.preview-nav-star.on-light.selected {
    background: rgba(255,255,255,0.25);
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.9));
}

/* Responsive */
@media (max-width: 768px) {
    /* ── Confinement horizontal de la modale ──────────────────────────────
       Cause du débordement mobile : les lignes du tableau Dimensions
       contiennent 4 valeurs en white-space:nowrap (format papier cm + in,
       dimensions photo cm + in), soit une largeur incompressible d'environ
       420px, alors que la modale mobile fait ~340px. Le contenu s'échappait
       latéralement de .modal-content, qui n'avait aucun overflow-x, laissant
       apparaître la grille de galerie derrière.
       On borne d'abord les conteneurs, puis on rend les lignes compressibles
       (voir plus bas : passage des deux colonnes dim en vertical). */
    .modal-content,
    .modal-preview-content {
        overflow-x: hidden;
        max-width: calc(100vw - 20px) !important;
    }

    .preview-modal-container,
    .preview-modal-main,
    .preview-modal-options,
    .option-group-modal {
        min-width: 0;
        max-width: 100%;
    }

    .modal-preview-content {
        width: 95% !important;
        padding: 25px 20px !important;
    }
    
    .modal-preview-content .modal-close {
        top: -10px;
        right: -10px;
        font-size: 20px;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px; min-height: 44px;
    }
    
    .preview-modal-options {
        grid-template-columns: 1fr;
    }

    /* ── Tableau Dimensions : deux colonnes -> empilement vertical ────────
       En-tête et lignes partagent la même structure (3 cellules : radio,
       format papier, dimensions photo). En mobile on masque l'en-tête à
       trois colonnes, devenu illisible, et chaque ligne affiche le format
       papier au-dessus des dimensions photo. Plus aucune largeur
       incompressible : la ligne tient dans la modale. */
    .dimension-table-header {
        display: none;
    }

    .dimension-option {
        align-items: flex-start;
        padding: 10px 12px;
        min-width: 0;
    }

    .dimension-option input[type="radio"] {
        flex-shrink: 0;
        margin-top: 3px;
    }

    .dimension-cols {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
    }

    .dimension-cols .dim-col {
        flex-wrap: wrap;
        white-space: normal;
        min-width: 0;
    }

    .dimension-cols .dim-photo {
        font-size: 13px;
        opacity: 0.75;
    }

    .dim-col-label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--title-color);
        margin-bottom: 2px;
    }

    .dim-photo .dim-col-label {
        font-size: 10px;
        font-weight: 500;
        opacity: 0.75;
    }

    .margin-options-grid-modal {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }

    .margin-options-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }

    .margin-option {
        min-width: 0;
        padding: 10px 12px;
    }

    .margin-label-compact {
        white-space: normal;
        min-width: 0;
    }
    
    .option-group-modal h3 {
        font-size: 16px;
    }
    
    .preview-dots-modal {
        gap: 10px;
    }
    
    .preview-nav-buttons {
        gap: 16px;
    }
    
    .preview-nav-arrow,
    .preview-nav-star {
        width: 44px;
        height: 44px;
    }
}

/* ========================================
   BOUTON D'AGRANDISSEMENT DANS CART
   ======================================== */

.cart-item-preview-container {
    position: relative;
}

.preview-enlarge-btn {
    position: static;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.preview-enlarge-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}


/* ========================================
   MODALE PLEIN ÉCRAN POUR AGRANDISSEMENT
   ======================================== */

.fullscreen-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fullscreen-preview-modal.active {
    display: flex;
}

.fullscreen-preview-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.fullscreen-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Étoile de chargement plein écran (lightbox 2) : la classe 'loading' était
   déjà posée par script.js/cart.js pendant la recomposition prev/next mais
   n'avait jamais eu d'effet visuel (aucune règle CSS associée). Centrée sur
   le conteneur (l'image y est elle-même centrée par flexbox), même pastille
   glassmorphism et même rotation (recherche-star-spin) que les autres
   étoiles de chargement du site. */
.fullscreen-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a3a3a;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 5;
}
.fullscreen-preview-image.loading + .fullscreen-loading-spinner {
    opacity: 1;
}
.fullscreen-loading-spinner svg {
    width: 26px;
    height: 26px;
}
.fullscreen-preview-image.loading + .fullscreen-loading-spinner svg {
    animation: recherche-star-spin 1s linear infinite;
    transform-origin: center;
}

/* Nom de fichier sous l'image en vue plein écran (lightbox 2).
   Réutilise .lightbox-label (couleur/taille/police) ; ici uniquement le
   positionnement bas-centré, identique à l'esprit de la lightbox initiale. */
.fullscreen-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    user-select: text;
    cursor: text;
    z-index: 5;
}

@media (max-width: 768px) {
    .fullscreen-label {
        bottom: 12px;
        font-size: 11px;
    }
}

/* Étoile de sélection + loupe (zoom) de la vue plein écran ("Agrandir la
   vue"), au-dessus du nom de fichier. Réutilise les classes .lightbox-controls
   / .zoom-toggle / .lightbox-star-btn / .btn-primary (voir plus bas, ~L1792) :
   seul le positionnement, absent en contexte plein écran, est ajouté ici. */
.fullscreen-controls {
    position: absolute;
    bottom: 78px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
}

@media (max-width: 768px) {
    .fullscreen-controls {
        bottom: 48px;
    }
}

/* X de fermeture de la vue plein ecran : meme pastille que .lightbox-close
   (modele de reference), seul le survol differe (rotation, cf. plus bas). */
.fullscreen-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 52px !important; height: 52px !important;
    min-width: 52px; min-height: 52px;
    max-width: 52px; max-height: 52px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    border: 1.5px solid rgba(255,255,255,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    color: rgba(255,255,255,.90);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .22s, border-color .22s, transform .22s;
    z-index: 10001;
    padding: 0;
    line-height: 1;
}

.fullscreen-close:hover {
    background: rgba(255,255,255,.32) !important;
    border-color: rgba(255,255,255,.80);
    transform: rotate(90deg);
}

/* Flèches de navigation de la vue plein écran (lightbox 2).
   Style aligné sur .preview-nav-arrow, positionnées sur les bords. */
.fullscreen-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 12px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    transition: background 0.22s, border-color 0.22s, transform 0.22s;
    z-index: 10;
}

.fullscreen-nav-left {
    left: 20px;
}

.fullscreen-nav-right {
    right: 20px;
}

.fullscreen-nav-arrow svg {
    width: 20px;
    height: 20px;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fullscreen-nav-arrow:hover {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.80);
    transform: translateY(-50%) scale(1.10);
}

.fullscreen-nav-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

@media (max-width: 768px) {
    .fullscreen-nav-arrow {
        width: 44px;
        height: 44px;
    }
    .fullscreen-nav-left {
        left: 10px;
    }
    .fullscreen-nav-right {
        right: 10px;
    }
}

@media (max-width: 768px) {
    .fullscreen-close {
        top: 10px;
        right: 10px;
        font-size: 20px;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px; min-height: 44px;
        max-width: 44px; max-height: 44px;
    }
    
    .preview-enlarge-btn {
        bottom: 50px;
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .preview-enlarge-btn-modal {
        bottom: 10px;
        padding: 8px 16px;
        font-size: 13px;
    }
}


/* SVG mobile */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .filename-cart-btn svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ============================================================
   CART — CORRECTIONS MOBILES (ex script_cart-mobile.css)
   ============================================================ */

/* Conteneur principal */
body .cart-container .cart-item-preview-container {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 3px !important;
    margin: 5px 0 !important;
}
body .cart-container .cart-item-preview {
    background-color: transparent !important;
    overflow: hidden !important;
    max-width: 100% !important;
}
body .cart-container .ambiance-bg,
body .cart-container .preview-slide img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}
body .cart-container .preview-slideshow,
body .cart-container .preview-slide {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}
body .cart-container .preview-slide {
    /* Contexte de positionnement pour .ambiance-insert-spinner (étoile de
       chargement de l'incrustation) — n'affecte pas le rendu, la slide
       occupe déjà 100% en display block normal. */
    position: relative;
}
body .cart-container .preview-disclaimer {
    margin: 2px 0 3px 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}
body .cart-container .preview-controls {
    padding: 3px 0 5px 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    body .cart-container,
    body .order-container,
    body .page-container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
}

/* === BANDEAU COOKIES (Consent Mode v2) === */
.cookie-banner {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99999;
    max-width: 380px;
    width: calc(100% - 60px);
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 24px;
    display: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.cookie-banner.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner-text {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: var(--text-color);
}

.cookie-banner-text a {
    color: var(--link-color);
    text-decoration: none;
}

.cookie-banner-text a:hover {
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-banner-actions button {
    padding: 8px 20px;
    font-size: 12px;
    border-radius: 4px;
    flex: 1;
}

@media (max-width: 480px) {
    .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
        padding: 18px;
    }
}

/* ========================================================================
   MESSAGES SITE — BANDEAUX (app/site_messages.php)
   Bibliotheque de messages sitewide géree depuis l'admin. Le conteneur est
   fixe, colle juste sous le header (lui-meme fixe) ; le JS embarque dans
   renderSiteMessageBanners() pousse <main> vers le bas de sa hauteur reelle
   (voir adjustMainOffset()), pour ne jamais recouvrir le contenu de page,
   quelle que soit la longueur du texte ou le nombre de messages actifs.
   Les modales de ce meme systeme ne necessitent aucun CSS dedie : elles
   reutilisent .modal / .modal-content / .modal-title / .modal-close, comme
   la modale de fermeture existante (notice_modal.php).
   ======================================================================== */
#site-messages-banners {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 999; /* sous #main-header (1000), au-dessus du contenu de page */
    display: flex;
    flex-direction: column;
}

.site-msg-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: var(--text-light);
    box-shadow: var(--shadow-sm);
    text-align: left;
}

.site-msg-banner-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px 12px;
    max-width: 1200px;
}

.site-msg-banner-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.site-msg-banner-text {
    font-size: 14px;
    line-height: 1.5;
}

.site-msg-banner-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    text-decoration: underline;
    white-space: nowrap;
}

.site-msg-banner-link:hover {
    color: var(--text-light);
    opacity: 0.8;
}

.site-msg-banner-close {
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-light);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.site-msg-banner-close:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .site-msg-banner {
        padding: 10px 16px;
        gap: 10px;
    }
    .site-msg-banner-content {
        gap: 4px 10px;
    }
    .site-msg-banner-title,
    .site-msg-banner-text,
    .site-msg-banner-link {
        font-size: 13px;
    }
}

/* ========================================================================
   PAGE RECHERCHE (recherche.php) — mise en page 2 colonnes
   Colonne gauche = mots-clés, organisés en onglets par thème (Couleur,
   Nuit, Marin...) + Divers + Tous, chacun dépliant une liste à cocher.
   Colonne droite = résultats (.gallery-grid déjà géré en JS pour la
   disposition des vignettes, s'adapte à la largeur de son conteneur).
   Sur demande explicite : les 2 colonnes restent côte à côte même en
   mobile/fenêtre étroite (pas d'empilement vertical comme un sidebar
   classique) — seule la largeur de la colonne mots-clés se réduit.

   Colonne mots-clés collée (sticky) sous le header fixe, hauteur bornée
   au viewport : la liste ne doit jamais étirer la page à l'infini, et
   l'accès aux mots-clés doit rester la voie prioritaire d'usage (avant
   la recherche libre/IA), donc toujours visible et facile à parcourir
   pendant que les résultats défilent à droite.
   ======================================================================== */

/* .container (générique, pages texte) plafonne à 900px — beaucoup trop
   étroit pour une grille photo à plusieurs colonnes une fois la sidebar
   "Mots-clés" (220px) et l'espacement (30px) déduits (650px restants =
   1 seule colonne possible à 335px/image). Les vraies galeries utilisent
   .page-content directement (1200px, sans passer par .container) — on
   aligne recherche.php sur cette même largeur.  */
.recherche-container {
    max-width: 1200px;
}

.recherche-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    align-items: start;
}

.recherche-sidebar {
    min-width: 0;
    position: sticky;
    top: calc(var(--header-height) + 20px);
    align-self: start;
}

/* Zone de contrôles (radios + champ + bouton + spinner) : bloc pleine
   largeur, centré sur TOUTE la page — même axe que le titre au-dessus,
   plutôt que centré uniquement dans la colonne de droite (ce qui créait
   un décalage visuel avec le titre, la sidebar "Mots-clés" décalant le
   centre apparent de la colonne de résultats). */
.recherche-controls-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
}

.recherche-keywords-box {
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--header-height) - 40px);
}

.recherche-keywords-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--title-color);
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Récapitulatif des mots-clés sélectionnés (toutes catégories confondues),
   toujours visible au-dessus des onglets. Hauteur bornée + défilement
   propre, pour ne pas repousser les onglets si beaucoup de mots sont
   sélectionnés. Vide = pas de bordure inutile. */
.recherche-selected-tags {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 92px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.recherche-selected-tags:empty {
    margin-bottom: 0;
}

.recherche-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 3px;
    background: var(--title-color);
    color: var(--bg-color);
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
}

.recherche-selected-chip-x {
    font-size: 13px;
    line-height: 1;
    opacity: 0.85;
}

.recherche-selected-chip:hover .recherche-selected-chip-x {
    opacity: 1;
}

/* Onglets : empilés verticalement (largeur de colonne trop étroite pour
   une bande horizontale avec des libellés à deux mots). Un seul actif à
   la fois (classe .active posée en JS), badge = nombre de mots cochés
   dans cette catégorie quand l'onglet est fermé. */
.recherche-tabs {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.recherche-tab {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 24px 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Petit triangle rouge pointe en bas, à droite de chaque onglet — repère
   visuel signalant que l'onglet se déplie. */
.recherche-tab::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #c0392b;
}

.recherche-tab:hover {
    background: var(--bg-secondary);
    border-color: var(--title-color);
    color: var(--title-color);
}

.recherche-tab.active {
    background: var(--title-color);
    border-color: var(--title-color);
    color: var(--bg-color);
}

.recherche-tab-count {
    font-weight: 700;
    margin-left: 4px;
}

.recherche-tab-count:not(:empty)::before {
    content: "(";
}

.recherche-tab-count:not(:empty)::after {
    content: ")";
}

/* Zone de panneau : hauteur flexible (ce qu'il reste dans la boîte sticky),
   seul le panneau actif (hidden=false) est affiché et défile en interne. */
.recherche-tab-panels {
    flex: 1 1 auto;
    min-height: 0;
}

.recherche-tab-panel {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.recherche-tag-list {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.recherche-tag-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

.recherche-tag-item:hover {
    background: var(--bg-secondary);
}

.recherche-tag-checkbox {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--title-color);
}

/* Filtre live de l'onglet "Tous" : reste visible en haut du panneau
   pendant que la liste défile en dessous (sticky à l'intérieur du
   panneau lui-même, pas de la boîte entière). */
.recherche-kw-filter {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 9px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 13px;
}

.recherche-kw-filter:focus {
    outline: none;
    border-color: var(--title-color);
}

.recherche-kw-empty {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
    padding: 4px 2px;
    display: none;
}

.recherche-results {
    min-width: 0;
    /* La balise <main> globale du site porte margin-top: header-height +
       padding-top: 20px (positionnement sous le header fixe pour LE main
       structurel de la page). recherche.php réutilise <main> pour la
       colonne de droite seulement — elle héritait involontairement de ces
       100px, décalant la grille sous le haut de la sidebar "Mots-clés". */
    margin-top: 0;
    padding-top: 0;
    min-height: auto;
}

/* .gallery-grid (règle partagée site-wide) ajoute 40px de padding-top,
   ce qui décale la première photo sous le haut de la sidebar "Mots-clés".
   Override scopé à recherche.php uniquement, pour aligner les deux haut
   de colonne. */
.recherche-results .recherche-grid {
    padding-top: 0;
}

.recherche-form-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Groupe radio (mode ET/OU) : en ligne, centré au-dessus du champ de
   recherche (colonne droite) — jamais de retour à la ligne au sein d'une
   même option. */
.recherche-mode-group-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    margin-bottom: 16px;
}

.recherche-mode-group-inline label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

.recherche-star-wrap {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.recherche-empty,
.recherche-count {
    font-size: 14px;
    color: var(--text-color);
}

/* Fenêtre étroite / mobile : colonnes conservées côte à côte,
   seule la colonne mots-clés se resserre. */
@media (max-width: 768px) {
    .recherche-layout {
        grid-template-columns: 130px 1fr;
        gap: 14px;
    }

    .recherche-tab {
        font-size: 11px;
        padding: 5px 7px;
    }

    .recherche-tag-item {
        font-size: 12px;
        padding: 3px 5px;
    }

    .recherche-selected-chip {
        font-size: 10px;
        padding: 2px 5px;
    }

    .recherche-kw-filter {
        font-size: 12px;
        padding: 5px 7px;
    }

    .recherche-form-group {
        flex-direction: column;
        align-items: stretch;
    }

    .recherche-mode-group-inline {
        gap: 6px 14px;
    }

    .recherche-mode-group-inline label {
        font-size: 12px;
        gap: 5px;
    }

    .recherche-controls-zone .gallery-buttons-container {
        flex-direction: column;
        max-width: 100%;
        gap: 8px;
    }

    .recherche-controls-zone .view-selection-btn,
    .recherche-controls-zone .go-to-cart-btn,
    .recherche-controls-zone .view-slideshow-btn {
        font-size: 11px;
        padding: 8px 10px;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .recherche-layout {
        grid-template-columns: 105px 1fr;
        gap: 10px;
    }

    .recherche-tab {
        font-size: 10px;
        padding: 4px 6px;
    }

    .recherche-tag-item {
        font-size: 11px;
        padding: 3px 4px;
    }

    .recherche-kw-filter {
        font-size: 11px;
        padding: 4px 6px;
    }

    .recherche-keywords-box {
        max-height: calc(100vh - var(--header-height) - 30px);
    }

    .recherche-mode-group-inline {
        gap: 5px 10px;
    }

    .recherche-mode-group-inline label {
        font-size: 11px;
        gap: 4px;
    }
}

/* ========================================================================
   Bouton recherche du header : visible uniquement sur desktop.
   Sur mobile il fait doublon avec l'entrée déjà présente dans le menu
   hamburger (#search-link-mobile, header.php) — un seul point d'accès
   suffit, et le header mobile est déjà chargé (fr/en/it, thème, panier,
   connexion, galeries).
   ======================================================================== */
@media (max-width: 768px) {
    .search-btn {
        display: none !important;
    }
}

/* ========================================================================
   Étoile de progression recherche.php : l'animation de rotation n'était
   jamais définie (classe .spinning ajoutée en JS mais aucun CSS associé).
   ======================================================================== */
.recherche-spinner-star.spinning {
    animation: recherche-star-spin 1s linear infinite;
    transform-origin: center;
}

@keyframes recherche-star-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ========================================================================
   Étoile de chargement de l'incrustation ambiance (modale galerie + panier) :
   affichée à l'emplacement exact du tirage (coordonnées AmbianceEngine)
   pendant que compose() génère le canvas, pour que l'attente ne paraisse
   jamais vide. Même pastille glassmorphism que .preview-nav-arrow (cohérence
   sur fond photo), rotation via les keyframes recherche-star-spin ci-dessus
   (pas de duplication).
   ======================================================================== */
.ambiance-insert-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: -22px 0 0 -22px; /* centrage sur left/top en % (pas de support transform ici, cf. JS) */
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a3a3a;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 5;
}
.ambiance-insert-spinner.visible {
    opacity: 1;
}
.ambiance-insert-spinner svg {
    width: 22px;
    height: 22px;
}
.ambiance-insert-spinner.visible svg {
    animation: recherche-star-spin 1s linear infinite;
    transform-origin: center;
}

/* ========================================================================
   Tableau Dimensions : léger espacement entre colonne "Format papier"
   et colonne "Dimensions photo" (desktop).
   ======================================================================== */
.dimension-cols .dim-photo {
    padding-left: 8px;
}

@media (max-width: 768px) {
    .dimension-cols .dim-photo {
        padding-left: 0;
    }

    /* Le libellé injecté (Format papier / Dimensions photo) doit occuper
       toute la largeur pour forcer les valeurs à passer à la ligne
       suivante (flex-wrap déjà actif sur .dim-col en mobile). Sans ça,
       le libellé reste sur la même ligne que les chiffres (flex-direction
       row par défaut hérité de .dim-col). */
    .dim-col-label {
        flex-basis: 100%;
    }
}