:root{
	/* Palette centrale */
	--primary-color: #93B5AFad; /* utilisé pour cartes / cta */
	--secondary-color: #B59399ad; /* boutons */
	--accent-color: #6b2d5b; /* accent global */
	--danger-color: #a83f3f;
	--info-color: #2b6ea3;
	--bg-color: #4a615e;
	--text-color: #ffffff;
	--input-bg-color: #e6f7f8;
	--input-border-color: #bfdfe0;
	--input-text-color: #000000;
	--shadow-color: rgba(0,0,0,0.6);
	/* Espacements et typographie (rem-based) */
	--space-xxs: 0.25rem; /* 4px */
	--space-xs: 0.5rem;   /* 8px */
	--space-sm: 0.75rem;  /* 12px */
	--space-md: 1rem;     /* 16px */
	--space-lg: 1.5rem;   /* 24px */
	--space-xl: 2.5rem;   /* 40px */
	--radius: 12px;       /* détails en px comme demandé */

	/* Breakpoints (mobile-first) */
	--bp-sm: 37.5rem; /* 600px */
	--bp-md: 48rem;   /* 768px */
	--bp-lg: 75rem;   /* 1200px */
	--bp-xl: 91.875rem; /* 1470px (~1655px earlier) */
}
/* Taille de base du texte : conserver 16px pour que les calculs en rem restent prévisibles */
html{font-size:16px;/* couleur de fond fallback pour le site */background-color:var(--bg-color);overflow-y:scroll}
/* Fallback font system pour réduire le CLS pendant le chargement de Dancing Script */
/* Conserver box-sizing global tout en limitant l'application de la police aux éléments textuels. */
*,*::before,*::after{box-sizing:border-box}
body,button,input,textarea,select{font-family:'Dancing Script',cursive}
/* Body transparent pour laisser apparaître le pseudo-élément body::before (image font) */
body{
	margin:0;
	position:relative;
	z-index:0;
	background-color:transparent;
	color:var(--text-color);
	font-weight:400;
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

/* utilitaire pour garder les labels accessibles mais visuellement cachés */
.sr-only{position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Calque d'arrière-plan global : utilisé via un élément DOM `.site-bg` 
   Fond d'écran personnalisable par galerie (remplace le font par défaut) */
.site-bg{
	position:fixed;
	inset:0;
	background-image: url('../assets/font.webp'); /* Fond par défaut (font) */
	opacity: 0.4; /* Opacité identique pour tous les fonds */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	pointer-events: none;
	z-index: -1;
	will-change: transform;
	transform: translateZ(0);
	transition: opacity 0.3s ease; /* Transition douce lors du changement */
}

/* Overlay optionnel pour améliorer la lisibilité (désactivé par défaut) */
.site-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0); /* Transparent par défaut */
	pointer-events: none;
	transition: background 0.3s ease;
}

/* Quand un fond personnalisé est appliqué, garder la même opacité */
.site-bg.custom-background {
	opacity: 0.4; /* Même opacité que le fond par défaut */
}

.site-bg.custom-background::before {
	background: rgba(255, 255, 255, 0); /* Pas d'overlay supplémentaire */
}

.hidden-fix,[hidden]{display:none !important}
.container{max-width:103.4375rem;margin:0 auto;padding:var(--space-lg)}
/* Réserver une hauteur minimale pour la grille pour éviter le CLS lors du chargement */
#projects-list.grid{min-height:30rem}
/* Classes pour le loader et messages de la galerie (évite les styles inline CSP) */
.gallery-loader{min-height:30rem;display:flex;align-items:center;justify-content:center}
.gallery-loader p{margin:0;opacity:0.6}
.gallery-empty{text-align:center;padding:2rem 0}
.card{background:var(--primary-color);padding:1.25rem;border-radius:var(--radius);margin-bottom:1rem;color:var(--text-color)}

/* La carte de contact doit être transparente pour laisser apparaître l'arrière-plan */
.contact-card{background:transparent}
/* Limiter la largeur du formulaire de contact et le centrer */
#contact-form{max-width:1000px;width:100%;margin:0 auto}
/* Les champs du formulaire dans la carte de contact ont un bloc de fond subtil */
.contact-card label{display:block;background:var(--primary-color);border-radius:8px;margin-bottom:2.5rem;color:var(--text-color);border:5px solid transparent;padding:0.75rem 1.125rem;box-sizing:border-box}
.contact-card label br{display:none}
.contact-card input,.contact-card textarea{background:transparent;border:none;color:var(--text-color);width:100%;padding:0 0 0 1.875rem;font-size:2.25rem;outline:none}
/* Supprimer apparences natives sur mobile / webkit pour éviter une zone visible autour de l'input */
.contact-card input{appearance:none}
.contact-card textarea{min-height:8.75rem;resize:vertical}
/* Le placeholder des champs de contact doit également être blanc */
.contact-card input::placeholder,.contact-card textarea::placeholder{color:var(--text-color);opacity:0.9}
.contact-feedback{margin:0.625rem 0 0;text-align:center;font-size:1.625rem;min-height:2rem}
.contact-feedback.error{color:#ffd4d4}
.contact-feedback.success{color:#d8ffd8}

/* Styles pour la page À propos */
.about-card{background:transparent;max-width:1000px;margin:0 auto;padding-top:0}
.about-content{background:var(--primary-color);border-radius:8px;padding:var(--space-xl);color:var(--text-color);font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-style: italic;}
.about-content h2{font-size:2.5rem;margin:0 0 var(--space-lg) 0;text-align:center}
.about-content p{font-size:1.5rem;line-height:1.6;margin:0 0 var(--space-lg) 0;text-align:center}
.about-content p:last-of-type{margin-bottom:0}
.about-content a{color:#ffffff;text-decoration:none;transition:color 0.2s ease, text-shadow 0.2s ease}
.about-content a:hover, .about-content a:focus{color:var(--secondary-color);text-shadow:0 2px 4px rgba(0,0,0,0.3);outline:none}

/* Boutons retour en-dessous des cartes Contact et À propos, centrés (comme detail-back-wrapper) */
.contact-back-wrapper, .about-back-wrapper{width:100%;text-align:center;margin-top:var(--space-lg)}

/* Style extérieur pour le champ message : n'appliquer la bordure + ombre au label enveloppant
   que lorsque la textarea est active (focus à l'intérieur) pour respecter la demande */
/* état par défaut pour le champ message : padding spécifique pour accueillir la textarea */
.contact-card label[for="contact-message"]{ /* état par défaut : bordure transparente réservée */
	border: 5px solid transparent;
	border-radius: 10px;
	padding: 1.125rem 1.375rem; /* assurer un padding à l'intérieur de la zone */
	color: var(--text-color);
	display:block;
	margin-bottom:2.5rem;
	box-sizing:border-box;
}

/* Lorsque n'importe quel label de la carte de contact reçoit le focus (ou un de ses enfants),
   afficher la bordure blanche et l'ombre pour rendre le focus cohérent entre Nom et Message */
.contact-card label:focus-within{
	border-color: var(--text-color);
	box-shadow: 0 12px 24px rgba(0,0,0,0.6);
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));column-gap:6.5625rem;row-gap:3.75rem;align-items:start;justify-items:center}
.project{
	width:18.75rem;
	min-height:25rem;
	display:flex;
	flex-direction:column;
	align-items:center;
	position:relative;
	cursor:pointer;
	contain:layout style paint;
}
/* Animation au survol uniquement sur desktop (appareils avec souris) */
@media (hover: hover) and (pointer: fine) {
	.project{transition:transform 0.2s ease, box-shadow 0.2s ease;cursor:pointer}
	.project:hover, .project:focus-within{transform:translateY(-0.5rem);box-shadow:0 0.75rem 1.875rem rgba(0,0,0,0.4);outline:none}
}
/* Container pour l'image avec hauteur fixe pour aligner verticalement toutes les images */
.project-link{display:flex;align-items:center;justify-content:center;height:18.75rem;margin-bottom:0.9375rem}
/* Images de galerie : dimensions fixes avec aspect-ratio pour éviter CLS */
.project img{
	max-width:18.75rem;
	max-height:18.75rem;
	width:18.75rem;
	height:18.75rem;
	aspect-ratio:1/1;
	object-fit:cover;
	display:block;
}
.project h2,
.project h3{
	margin:0 0 0.375rem;
	text-align:center;
	font-size:2rem;
	font-weight:normal;
}
.project .meta{text-align:center;font-style:italic}
.project .meta.type-date{font-style:normal;font-size:1.375rem;margin-top:0.25rem;margin-bottom:0.125rem}
.project .meta.collection{font-style:normal;font-size:1.25rem;margin-bottom:0.375rem;color:rgba(255,255,255,0.85)}
.project .description{font-size:1.5rem;margin:0.375rem 0}
.project .size{font-size:1.5rem;margin:0.25rem 0}
/* Actions admin overlay (edit / delete) */
.admin-actions{position:absolute;top:0.5rem;left:0.5rem;right:0.5rem;display:block;height:0;z-index:10}
.admin-actions button{position:absolute;background:rgba(0,0,0,0.5);border:none;color:var(--text-color);padding:0.375rem 0.5rem;border-radius:6px;cursor:pointer;font-size:1.25rem;transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease}
.admin-actions button:hover, .admin-actions button:focus{background:rgba(0,0,0,0.7);transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,0.4);outline:none}
.admin-actions button:active{transform:scale(1)}
.admin-actions .admin-edit{right:0.5rem}
.admin-actions .admin-delete{left:0.5rem}
.card-actions{display:flex;gap:0.5rem;margin-top:0.5rem}
button{background:var(--secondary-color);color:var(--text-color);border:none;padding:0.5rem 0.75rem;border-radius:8px;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}
button:hover, button:focus{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.3);outline:none}
button:active{transform:translateY(0)}
button.delete{background:var(--danger-color)}
/* étoile pour sélectionner l'image principale (vignette) */
button.star{
	background:var(--danger-color);
	color:var(--text-color);
}
button.edit{background:var(--info-color)}
label{display:block;margin:0.5rem 0}
input,textarea{width:100%;padding:0.75rem;border:2px solid var(--input-border-color);border-radius:8px;background:var(--input-bg-color);color:var(--input-text-color)}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:#6b6b6b}
.actions{display:flex;gap:var(--space-xs);margin-top:var(--space-xs)}

/* Centrer les actions à l'intérieur de la carte de contact */
.contact-card .actions{justify-content:center}


/* Rendre le bouton d'envoi du formulaire visuellement identique au CTA principal */
.contact-card .actions button{
	display:inline-block;
	padding:0.875rem 8.125rem; /* large horizontal CTA (kept in rem) */
	background:var(--primary-color);
	color:var(--text-color);
	border-radius:10px; /* radius kept in px as project convention */
	text-decoration:none;
	font-size:2.25rem;
	margin-top:2.5rem;
	border:none;
	cursor:pointer;
}

/* en-tête / navigation */
.site-header{position:fixed;left:0;right:0;top:0;padding:0.75rem 1.25rem;z-index:40}
.nav{display:flex;justify-content:center;align-items:center;max-width:68.75rem;margin:0 auto}
.nav a{color:var(--text-color);text-decoration:none;transition:transform 0.2s ease, text-shadow 0.2s ease}
.nav a:hover, .nav a:focus{transform:scale(1.05);text-shadow:0 2px 4px rgba(0,0,0,0.3);outline:none}
.logo{font-size:1.6rem;font-weight:400}

/* hero (bannière) */
.hero{height:100vh;display:flex;align-items:center;justify-content:center}
/* Réserver explicitement une hauteur minimale pour le hero afin d'éviter
	que le chargement des polices ou le swap de fonte fasse bouger le layout
	(réduction du CLS). Le hero reste centré et a une hauteur stable. */
.hero-inner{min-height:45vh;text-align:center;background:transparent;padding:var(--space-xl);border-radius:var(--radius);display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero h1,.hero h2{font-size:clamp(2.25rem,6vw,4.5rem);margin:0 0 0.5rem;text-shadow:0 2px 6px var(--shadow-color);font-weight:400}
/* Limiter la hauteur du titre pour qu'il ne pousse pas le contenu suivant
	lors du swap de font. Autoriser au maximum ~2 lignes (max-height). */
.hero-title{
	min-height:clamp(3rem,6vh,8rem);
	max-height:11rem;
	display:inline-flex;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
	gap:var(--space-xs);
	line-height:1.1;
	max-width:100%;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
}
.hero-title-brand,.hero-title-role{display:inline}
.hero-title-role{white-space:nowrap}
.hero-title-sep{display:inline-block}
.hero-title-role.is-empty{display:none}
/* Désactiver le wrap même en mode stacked : toujours rester sur une ligne */
.hero-title--stacked{flex-wrap:nowrap !important}
.hero-title--stacked .hero-title-sep{display:none !important}
.hero-title--stacked .hero-title-role{display:block;width:100%;white-space:normal;margin-top:var(--space-xs)}

/* Page de connexion : centrer le formulaire - règles consolidées */
.connect-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl) var(--space-md);gap:1.5rem}
.connect-page .hero{height:auto;display:block;text-align:center;padding:0;margin:0}
.connect-page .hero h1{margin:0;font-size:3rem}
.connect-page .hero p{margin:0.375rem 0 0;font-size:1.25rem;opacity:0.95}
.connect-page .connect-form{width:100%;max-width:32.5rem;background:rgba(255,255,255,0.04);padding:1.75rem;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,0.5)}
.connect-page form#login-form{display:flex;flex-direction:column;gap:0.75rem}
.connect-page label{color:var(--text-color);font-size:1.25rem}
.connect-page input{font-size:1.25rem;padding:0.75rem;border-radius:8px;background:var(--input-bg-color);border:2px solid var(--input-border-color);color:var(--input-text-color)}
.connect-page .form-actions{display:flex;gap:0.75rem;justify-content:space-between;align-items:center;margin-top:0.5rem}
.connect-page .form-actions .btn, .connect-page .form-actions button{padding:0.625rem 1.25rem;font-size:1.125rem}

/* h1 sans graisse par défaut — défini font-size explicitement pour éviter l'API obsolète H1UserAgentFontSizeInSection */
h1{font-weight:400;font-size:2rem}
/* h2 également sans graisse par défaut */
h2{font-weight:400}
/* h3 également sans graisse par défaut */
h3{font-weight:400}
.subtitle{font-size:clamp(1.35rem,3vw,2.25rem);margin-bottom:3.125rem;text-shadow:0 1px 4px var(--shadow-color)}
.cta{display:inline-block;padding:0.875rem 1.625rem;background:var(--primary-color);color:var(--text-color);border-radius:10px;text-decoration:none;font-size:2.25rem;margin-top:2.5rem}

/* En-tête pour la page détail, reprend le titre de l'accueil */
.detail-hero{text-align:center;margin-bottom:0rem;padding:0}
.detail-hero h1,.detail-hero h2{font-size:clamp(2.25rem,6vw,4.5rem);margin:0;font-weight:400}
.detail-hero .hero-title{justify-content:center}

/* Conteneur du sous-titre de page, séparé du hero principal */
.page-subtitle-container{text-align:center;padding:0 !important}
.page-subtitle{font-size:clamp(1.5rem,3.5vw,2.5rem);margin:0}

/* Rendre le hero partagé (#page-hero) fixe (sticky) pendant le défilement ; fond transparent */
#page-hero{
	position: sticky;
	top: 1rem; /* espacement depuis le haut */
	z-index: 30;
	background: transparent; /* conserver le fond transparent demandé */
	transition: opacity 0.3s ease;
}

/* détail */
/* La carte de détail contient directement le carousel et le panneau d'info */
.detail-card{display:flex;flex-direction:row;gap:1.75rem;align-items:stretch;margin:0 auto;padding:0;border-radius:var(--radius);overflow:hidden}
/* plus de wrapper detail-inner */

/* Carrousel d'images pour la vue détail - règles consolidées */
/* Le carousel s'adapte à la hauteur de l'image active tout en gardant une limite */
.carousel{
	position:relative;
	flex:3 1 0;
	min-width:0;
	height:auto;
	max-height:70vh;
	min-height:500px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	/*background:var(--bg-color);*/
}
/* Stack images on top of each other and show only the active one.
	This prevents images from laying out side-by-side when multiple <img>
	elements are present in the DOM for the carousel. */
.carousel img{
	width:100%;
	height:auto;
	max-height:70vh;
	aspect-ratio: auto;
	object-fit:contain;
	display:none;
	transition:opacity .25s ease-in-out;
}
.carousel img.active{display:block;opacity:1}
.detail-info{
	flex:2 1 0;
	min-width:0;
	max-height:70vh;
	min-height:500px;
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	align-items:center;
	text-align:center;
	font-size:2.25rem;
	padding:1.5rem;
	overflow:auto;
}
/* Titre h2 en enfant direct de detail-info : occupe toute la largeur, centré en mode desktop */
.detail-info > h2{width:100%;font-size:2.25rem;margin-top:0;text-align:center}
.detail-info .meta{font-size:2rem;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, sans-serif;font-style:italic;margin-top:0;margin-bottom:0;text-align:left}
.detail-info .price{font-size:3rem;margin:2.125rem 0;font-weight:400}

/* Boutons dans la vue détail : bouton de retour avec fond, bouton d'achat avec fond */
.detail-info .btn{padding:0.625rem 1.125rem;margin-top:0;background:var(--secondary-color);color:var(--text-color)}
.detail-info .buy{padding:0.875rem 1.375rem;display:inline-block;color:var(--text-color);text-decoration:none;background:var(--secondary-color);border-radius:8px;transition:transform 0.2s ease, box-shadow 0.2s ease}

.btn{display:inline-block;padding:0.625rem 1.125rem;background:var(--secondary-color);color:var(--text-color);border-radius:8px;text-decoration:none;margin-top:0.75rem;transition:transform 0.2s ease, box-shadow 0.2s ease}
.btn, .buy, .btn-back, .btn-back-inline { font-weight:400; font-size:1.125rem; }
.btn:hover, .btn:focus, .buy:hover, .buy:focus{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.3);outline:none}
.btn:active, .buy:active{transform:translateY(0)}

/* Petite note atténuée utilisée sur la page 404 */
.muted-note{margin-top:1rem;color:#666;font-size:.9rem}

/* S'assurer que les labels et champs prennent la largeur disponible
	 et évitent de forcer la largeur du conteneur parent */
.detail-info label{width:100%;max-width:100%;box-sizing:border-box;align-self:stretch}
.detail-info input,.detail-info textarea,.detail-info select{width:100%;max-width:100%}

/* Actions (boutons) : permettre le wrapping et conserver un centrage */
.detail-info .actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);justify-content:center}
.detail-info .actions .btn{white-space:normal;min-width:0}

/* Conteneur pour les boutons admin (centré) */
.admin-buttons-container {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  align-items: center; /* Alignement vertical centré */
  margin: 0 auto var(--space-lg) auto;
  width: fit-content;
}

/* Bouton ajouter un projet (admin) - positionné après les boutons de navigation galerie */
.add-project{
	display: inline-block;
	width: fit-content;
	margin: 0; /* Pas de margin, le conteneur parent gère l'espacement */
	padding: 0.625rem 1.25rem;
	background: var(--secondary-color);
	color: var(--text-color);
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-size: 1.25rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	vertical-align: middle; /* Alignement vertical */
	line-height: normal; /* Reset line-height pour éviter les décalages */
}
.add-project:hover, .add-project:focus{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.3);outline:none}
.add-project:active{transform:translateY(0)}

/* Bouton de déconnexion en haut à droite */
.logout-btn{position:fixed;top:0.875rem;right:0.875rem;z-index:60;padding:0.5rem 0.75rem;background:rgba(0,0,0,0.6);color:var(--text-color);border:none;border-radius:8px;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease}
.logout-btn:hover, .logout-btn:focus{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.4);background:rgba(0,0,0,0.8);outline:none}
.logout-btn:active{transform:translateY(0)}

/* footer */
/* Réserver une hauteur minimale stable pour éviter CLS lors du chargement de la police */
/* Footer non fixé : il suit le flux du document et est poussé en bas si le contenu est court */

.site-footer{
	padding:0 1rem var(--space-md);
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:var(--text-color);
	font-size:1.125rem;
	margin-top:var(--space-xl);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-height:3.5rem;
	position:relative;
	background:transparent;
}
/* Mise en page : pousser le footer en bas quand nécessaire sans le fixer à l'écran */
main{flex:1;padding-bottom:0}

/* Flèches de navigation du carrousel */
.carousel .carousel-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	background:rgba(0,0,0,0.4);
	color:var(--text-color);
	border:none;
	width:3.875rem;
	height:3.875rem;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:2.5rem;
	cursor:pointer;
	z-index:40;
	transition:transform 0.2s ease, background 0.2s ease;
}
.carousel .carousel-arrow.left{left:0.75rem}
.carousel .carousel-arrow.right{right:0.75rem}
.carousel .carousel-arrow:hover{
	background:rgba(0,0,0,0.7);
	transform:translateY(-50%) scale(1.1);
}
.carousel .carousel-arrow:active{
	transform:translateY(-50%) scale(0.95);
}
.carousel .carousel-arrow:focus-visible{
	outline:3px solid rgba(255,255,255,0.6);
	outline-offset:2px;
}

/* Compteur d'images du carousel (ex: 1/3) */
.carousel-counter{position:absolute;top:0.5rem;right:0.5rem;background:rgba(0,0,0,0.6);color:var(--text-color);padding:0.25rem 0.625rem;border-radius:1rem;font-size:0.875rem;font-weight:600;z-index:10}

/* Indicateur de position du carousel (points/segments) */
/* Version inside : positionnement absolu à l'intérieur du carousel (desktop/laptop) */
.carousel-indicators--inside{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:0.375rem;z-index:10;pointer-events:none}
/* Version outside : entre carousel et detail-info (smartphone/tablette) */
.carousel-indicators--outside{display:none;gap:0.375rem;justify-content:center;padding:0.5rem 0;width:100%}
.carousel-indicator{width:2rem;height:0.25rem;background:rgba(255,255,255,0.4);border-radius:0.125rem;transition:background 0.3s ease, transform 0.2s ease;cursor:pointer;pointer-events:auto}
.carousel-indicator:hover, .carousel-indicator:focus{background:rgba(255,255,255,0.6);transform:scaleY(1.5);outline:none}
.carousel-indicator.active{background:var(--text-color)}

/* Texte centré affiché lorsque le carrousel ne contient pas d'image (mode création) */
.carousel-placeholder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,0.85);font-style:italic;padding:1rem;text-align:center}

/* Style discret pour le bouton d'ajout de photo en mode création */
.add-photo-btn--subtle{border:1px solid rgba(0,0,0,0.12);background:rgba(0,0,0,0.04);padding:0.5rem 0.75rem;border-radius:4px}

/* Unified subtle action button style for add/save/cancel */
.action-btn--subtle{border:1px solid rgba(0,0,0,0.12);background:rgba(0,0,0,0.04);padding:0.5rem 0.75rem;border-radius:6px}
.action-btn--subtle:active{transform:translateY(1px)}

.custom-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:1200;padding:1rem}
.custom-alert{background:var(--primary-color);color:var(--text-color);padding:1.75rem 2rem;border-radius:12px;max-width:26.25rem;width:100%;box-shadow:0 18px 40px rgba(0,0,0,0.45);text-align:center}
.custom-alert p{margin:0;font-size:1.25rem;line-height:1.5}
.custom-alert-actions{margin-top:1.25rem;display:flex;justify-content:center}
.custom-alert-actions .btn{min-width:7.5rem}

/* Veiller à ce que les liens du pied de page (p.ex. 'Contact') soient blancs */
.site-footer a{color:var(--text-color);transition:text-shadow 0.2s ease, transform 0.2s ease}
.site-footer a:hover, .site-footer a:focus{text-shadow:0 2px 4px rgba(0,0,0,0.3);outline:none}

/* Bouton "scroll to top" pour la galerie */
.scroll-to-top{
	position:fixed;
	bottom:3.5rem;
	right:2rem;
	width:3.5rem;
	height:3.5rem;
	background:var(--secondary-color);
	color:var(--text-color);
	border:none;
	border-radius:50%;
	font-size:2rem;
	cursor:pointer;
	box-shadow:0 4px 12px rgba(0,0,0,0.3);
	z-index:50;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background 0.2s ease, transform 0.2s ease;
}
.scroll-to-top:hover, .scroll-to-top:focus{
	background:var(--accent-color);
	transform:scale(1.1);
	outline:none;
}
.scroll-to-top:active{
	transform:scale(0.95);
}

/* Styles pour les miniatures en mode édition / création */
#edit-images { width:100%; text-align:center; margin-top:var(--space-xs) }
.thumb-wrap { display:inline-block; margin:0.75rem; position:relative }
/* thumbnails in editor/create */
.thumb-img { width:7.5rem; height:7.5rem; object-fit:cover; border-radius:6px; display:block }
.thumb-star { position:absolute; left:-0.5rem; top:-0.375rem; border:none; cursor:pointer; background:var(--danger-color); color:var(--text-color); width:2.125rem; height:2.125rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem }
.thumb-delete { position:absolute; right:-0.5rem; top:-0.375rem; border:none; cursor:pointer; background:var(--danger-color); color:var(--text-color); width:2.125rem; height:2.125rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem }

/* =========================
	 Breakpoints (mobile-first)
	 Profils :
		 - smartphone : jusqu'à 600px (--bp-sm = 37.5rem)
		 - tablette    : 601px .. 820px
		 - laptop      : 821px .. 1200px (--bp-lg)
		 - grand écran : au-dessus de 1200px (--bp-lg)
	 Note : les variables CSS ne fonctionnent pas dans toutes les media queries ; on utilise des valeurs px
	 ========================= */

/* smartphone: compact layout, single column */
@media (max-width: 600px){
	.container{padding:0 var(--space-md)}
	.detail-hero.container{width:100%;padding:0 var(--space-md)}
	.grid{grid-template-columns:repeat(1,1fr);column-gap:var(--space-md);row-gap:var(--space-xl);justify-items:center}
	.project{width:100%;max-width:18.75rem;min-height:23rem}
	/* Container image mobile : garder hauteur fixe pour réserver l'espace et éviter CLS */
	/* On mobile, align the image to the top of the container so landscape images
	   don't leave excessive space between the image and the title below. */
	.project-link{height:18.75rem;display:flex;align-items:flex-start;justify-content:center;margin-bottom:0.625rem}
	/* Images galerie mobile : dimensions fixes avec aspect-ratio pour éviter CLS */
	.project img{
		/* Keep the thumbnail width but allow height to adapt to the image aspect
		   so landscape images don't create a tall empty box. */
		max-width:100%;
		width:18.75rem;
		height:auto;
		max-height:18.75rem;
		object-fit:cover;
		display:block;
	}
	/* Réduire la taille du titre et des méta-informations dans la galerie */
	.project h2,
	.project h3{font-size:1.75rem}
	.project .meta.type-date{font-size:1.125rem}
	.project .meta.collection{font-size:1rem}
	.hero-inner{padding:var(--space-lg)}
	/* Ajustement pour smartphone : titre plus petit et serré pour tenir sur une ligne */
	.hero h1,.hero h2{font-size:1.6rem;line-height:1.12}
	.hero .subtitle{font-size:1.0rem;margin-bottom:var(--space-md)}
	/* Augmenter d'un cran la taille des sous-titres de page en mobile */
	.page-subtitle{font-size:1.30rem}

	/* Forcer le titre hero sur une seule ligne */
	.hero-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:0.125rem}
	.hero-title > *{display:inline-block}

	
	/* Section détail : centrer verticalement dans la page */
	#detail.page{display:flex;flex-direction:column}
	
	/* Hero détail : hauteur minimale */
	.detail-hero{flex-shrink:0;margin-bottom:var(--space-md)}
	
	/* Carte détail : flex column avec ratio 5:2 (carousel 5/7, detail-info 2/7) */
	.detail-card{flex-direction:column;gap:0}
	.detail-card .carousel{width:100%;flex:5 0 0%;height:auto;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:300px}
	/* On mobile, pour que les images portrait remplissent la largeur sans être trop
	   petites, afficher seulement l'image active (display:block) et masquer les
	   autres via display:none. Les images prennent la largeur entière et conservent
	   leur ratio (height:auto). Ceci évite que les images portrait restent centrées
	   avec une largeur faible en mode 'contain'. */
	.detail-card .carousel img{position:static;inset:auto;width:100%;height:auto;max-height:70vh;aspect-ratio: auto;object-fit:contain;object-position:center;display:block;opacity:1}
	.detail-card .carousel img:not(.active){display:none}
	
	/* Detail-info : layout en wrap pour placer h2 au-dessus (pleine largeur) puis detail-content et detail-actions côte à côte */

	/* indicator overlay used while dragging to show insertion point */
	.reorder-indicator-overlay {
		pointer-events: none;
		position: absolute;
		z-index: 9999;
		opacity: 0;
	}

	.reorder-indicator-overlay > div {
		/* inner bar - mostly styled inline by JS for dynamic sizing */
		height: 6px; /* fallback when JS-injected styles aren't applied */
	}

		.detail-card .detail-info{width:100%;flex:2 0 0%;min-height:136px;padding:0.75rem;overflow:hidden;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-sm);align-items:flex-start;justify-content:flex-start;align-content: center;}
	/* Titre h3 en enfant direct de detail-info : prend toute la largeur (force le passage à la ligne suivante) */
	.detail-card .detail-info > h3{width:100%;flex:0 0 100%;font-size:1.25rem;font-weight:700;text-align:center}
	/* Colonne de contenu (infos) à gauche : 5/7 de l'espace restant */
	.detail-card .detail-info .detail-content{flex:5 0 0%;min-width:0;text-align:left}
	.detail-card .detail-info .detail-content .meta{font-size:0.875rem;margin:0.125rem 0}
	/* Si pas de prix : detail-content prend toute la largeur et est centré comme h2 */
	.detail-card .detail-info .detail-actions.hidden{display:none}
	.detail-card .detail-info:has(.detail-actions.hidden) .detail-content{flex:0 0 100%;width:100%;text-align:center}
	.detail-card .detail-info:has(.detail-actions.hidden) .detail-content .meta{text-align:center}
	/* Colonne d'actions (boutons) à droite : 2/7 de l'espace restant - empêche le rétrécissement pour garder le bouton visible */
	.detail-card .detail-info .detail-actions{flex:2 0 0%;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center}
	.detail-card .detail-info .detail-actions .price{font-size:1.25rem;margin:0 0 0.5rem 0;font-weight:400;text-align:center;flex-shrink:0}
	.detail-card .detail-info .detail-actions .buy{font-size:1.125rem;padding:0.4rem 0.4rem;margin:0;flex-shrink:0}
	/* Cacher le bouton retour inline en mode smartphone */
	.detail-card .detail-info .detail-actions .btn-back-inline{display:none}
	
	/* Cacher les flèches du carousel en mode smartphone */
	.carousel .carousel-arrow{display:none}
	
	/* Indicateurs de carousel : masquer inside, afficher outside */
	.carousel-indicators--inside{display:none}
	.carousel-indicators--outside{display:flex}
	
	/* Bouton retour en-dessous de detail-info, centré */
	.detail-back-wrapper{width:100%;text-align:center;margin-top:var(--space-md)}
	.detail-back-wrapper .btn-back{font-size:1.125rem;padding:0.5rem 0.625rem}
	.contact-back-wrapper .btn-back, .about-back-wrapper .btn-back{font-size:1.375rem;padding:0.5rem 0.625rem}
	
	.detail-hero h1,.detail-hero h2{font-size:2rem;margin-bottom:1rem}
	/* Keep page subtitle larger on mobile; reduce bottom spacing to avoid large gaps */
	.page-subtitle{margin-bottom:var(--space-md);}
	
	/* Footer : augmenter marge inférieure et taille de police en mode smartphone */
	.site-footer{font-size:1rem;padding-bottom:2rem;margin-top:var(--space-md)}
	
	/* Page contact : adapter les tailles pour smartphone */
	.contact-card label{margin-bottom:1rem;padding:0.5rem 0.75rem}
	.contact-card input,.contact-card textarea{font-size:1rem;padding:0 0 0 0.75rem}
	.contact-card textarea{min-height:5rem}
	.contact-card label[for="contact-message"]{padding:0.75rem}
	.contact-feedback{font-size:0.875rem;margin:0.5rem 0 0}
	.contact-card .actions button{font-size:1.125rem;padding:0.625rem 2rem;margin-top:1rem}
	
	/* Pages Contact et À propos : bouton retour adapté pour smartphone */
	.contact-back-wrapper, .about-back-wrapper{margin-top:var(--space-md)}
	
	/* Page À propos : adapter les tailles pour smartphone */
	.about-content h2{font-size:1.75rem}
	.about-content p{font-size:1rem}
}

/* tablette: two columns when possible, slightly larger spacing */
@media (min-width: 601px) and (max-width: 1025px){
	.container{padding:var(--space-lg)}
	.grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));column-gap:2rem;row-gap:5rem}
	/* Réduire légèrement la police des titres de projets en tablette */
	.project h3{font-size:1.75rem}
	/* Réduire la taille des méta-informations dans la galerie */
	.project .meta.type-date{font-size:1.125rem}
	.project .meta.collection{font-size:1rem}
	.hero-inner{padding:var(--space-xl)}
	/* Ajustement pour tablette : titre légèrement réduit pour tenir sur une ligne */
	.hero h1,.hero h2{font-size:2.2rem;line-height:1.04}
	.hero .subtitle{font-size:1.5rem;margin-bottom:var(--space-lg)}

	/* Add bottom spacing for page subtitles on tablets */
	.page-subtitle{margin-bottom:var(--space-lg)}

	/* Forcer le titre hero sur une seule ligne (tablette) */
	.hero-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:0.25rem}
	.hero-title > *{display:inline-block}
	
	/* Section détail : centrer verticalement dans la page */
	#detail.page{display:flex;flex-direction:column;padding:0 var(--space-md)}
	
	/* Hero détail : hauteur minimale */
	.detail-hero{flex-shrink:0}
	
	/* Carte détail : flex column avec ratio 5:2 (carousel 5/7, detail-info 2/7) et hauteur contrainte pour éviter que le carousel prenne tout l'espace */
	.detail-card{flex-direction:column;gap:0}
	.detail-card .carousel{width:100%;flex:5 0 0%;min-height:0;height:100%;align-items:center;justify-content:center;overflow:hidden;position:relative}
	/* Ensure images fit inside the carousel on tablet: preserve aspect ratio and
	   never exceed carousel height. Use max-height:70vh as a safe cap so tall
	   images don't get cropped; center them vertically. */
	.detail-card .carousel img{max-width:100%;max-height:70vh;width:auto;height:auto;aspect-ratio: auto;display:none;object-fit:contain;object-position:center;align-self:center}
	.detail-card .carousel img.active{display:block}
	
	/* Detail-info : layout en wrap pour placer h3 au-dessus (pleine largeur) puis detail-content et detail-actions côte à côte */
	.detail-card .detail-info{width:100%;flex:2 0 0%;min-height:160px;padding:1rem;overflow:hidden;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-md);align-items:flex-start;justify-content:flex-start;align-content: center;}
	/* Titre h3 en enfant direct de detail-info : prend toute la largeur (force le passage à la ligne suivante) */
	/* Augmenté d'un cran en mode tablette pour meilleure lisibilité */
	.detail-card .detail-info > h3{width:100%;flex:0 0 100%;font-size:1.75rem;font-weight:700;margin:0 0 0.375rem 0;text-align:center}
	/* Colonne de contenu (infos) à gauche : 5/7 de l'espace restant */
	.detail-card .detail-info .detail-content{flex:5 0 0%;min-width:0;text-align:left}
	.detail-card .detail-info .detail-content .meta{font-size:1.125rem;margin:0.125rem 0}
	/* Si pas de prix : detail-content prend toute la largeur et est centré comme h2 */
	.detail-card .detail-info .detail-actions.hidden{display:none}
	.detail-card .detail-info:has(.detail-actions.hidden) .detail-content{flex:0 0 100%;width:100%;text-align:center}
	.detail-card .detail-info:has(.detail-actions.hidden) .detail-content .meta{text-align:center}
	/* Colonne d'actions (boutons) à droite : 2/7 de l'espace restant - empêche le rétrécissement pour garder le bouton visible */
	.detail-card .detail-info .detail-actions{flex:2 0 0%;min-height:100px;display:flex;flex-direction:column;gap:var(--space-xs);align-items:center;justify-content:center}
	.detail-card .detail-info .detail-actions .price{font-size:1.75rem;margin:0 0 0.625rem 0;font-weight:400;text-align:center;flex-shrink:0}
	.detail-card .detail-info .detail-actions .buy{font-size:1.25rem;padding:0.625rem 0.875rem;margin:0;white-space:nowrap;flex-shrink:0}
	/* Cacher le bouton retour inline en mode tablette */
	.detail-card .detail-info .detail-actions .btn-back-inline{display:none}
	
	/* Cacher les flèches du carousel en mode tablette */
	.carousel .carousel-arrow{display:none}
	
	/* Indicateurs de carousel : masquer inside, afficher outside */
	.carousel-indicators--inside{display:none}
	.carousel-indicators--outside{display:flex}
	
	/* Boutons retour en-dessous, centrés (detail, contact, about) */
	.detail-back-wrapper, .contact-back-wrapper, .about-back-wrapper{width:100%;text-align:center;margin-top:var(--space-md)}
	.detail-back-wrapper .btn-back{font-size:1.25rem;padding:0.625rem 0.875rem}
	.contact-back-wrapper .btn-back, .about-back-wrapper .btn-back{font-size:1.375rem;padding:0.625rem 0.875rem}
	
	.detail-hero h1{font-size:2.75rem}
	.page-subtitle{font-size:1.75rem}

	/* Réduction spécifique pour tablettes portrait : limiter la hauteur de la
	   card pour éviter qu'elle n'occupe trop de l'écran (formats 10/16 fréquents).
	   On utilise 60vh ici, plus adapté aux tablettes portrait que 70vh. */
	.detail-card .carousel{max-height:60vh;min-height:400px}
	.detail-card .carousel img{max-height:60vh}
	.detail-card .detail-info{max-height:60vh;overflow:auto}
	
	/* Footer : augmenter taille de police en mode tablette */
	.site-footer{font-size:1.125rem}
}

/* laptop: multi-column grid, larger hero */
@media (min-width: 1025px) and (max-width: 1200px){
	.container{padding:var(--space-xl)}
	.grid{grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));column-gap:3.75rem;row-gap:2.5rem}
	.hero h1{font-size:3.5rem;line-height:1.1}
	.hero .subtitle{font-size:1.875rem}
	
	/* Forcer le titre hero sur une seule ligne (laptop) */
	.hero-title{white-space:nowrap;overflow:hidden}
	
	.detail-card{flex-direction:row}
	.detail-card .detail-info{font-size:1.5rem;padding:1.25rem}
	.detail-hero h1{font-size:3.5rem;margin-bottom:1.5rem}
	.page-subtitle{font-size:2.125rem}
	
	/* Augmenter taille h3 en mode laptop */
	.detail-card .detail-info > h3{font-size:2.25rem;font-weight:700}
	
	/* Centrer le contenu détail en mode laptop */
	.detail-card .detail-info .detail-content{text-align:center}
	.detail-card .detail-info .detail-content .meta{text-align:center}
	
	/* Styles pour les actions en mode laptop : afficher le bouton retour inline */
	.detail-card .detail-info .detail-actions{display:flex;flex-direction:column;gap:var(--space-sm);align-items:stretch}
	.detail-card .detail-info .detail-actions .btn-back-inline{display:inline-block}
	.detail-card .detail-info .detail-actions .buy,
	.detail-card .detail-info .detail-actions .btn-back{width:100%;text-align:center;white-space:normal;word-wrap:break-word}
	
	/* En mode laptop, afficher les indicateurs inside et masquer outside */
	.carousel-indicators--inside{display:flex;position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);width:auto;padding:0}
	.carousel-indicators--outside{display:none}
	
	/* Cacher le bouton retour externe en mode laptop */
	.detail-back-wrapper{display:none}
}

/* Ensure detail info never exceeds carousel height on larger screens
	 - force max-height to match carousel max (70vh)
	 - allow internal scrolling of the info panel when content is long
	 This block targets laptop+ desktop (>=1025px) */
@media (min-width: 1025px) {
	.detail-card{align-items:stretch}
	.detail-card .carousel{max-height:70vh;min-height:600px}
	.detail-card .carousel img{max-height:70vh}
	.detail-card .detail-info{max-height:70vh;overflow:auto}
}

/* grand ecran: spacious layout, max container width larger */
@media (min-width: 1201px){
	.container{padding:var(--space-xl)}
	.grid{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));column-gap:4.5rem;row-gap:3rem}
	.hero h1{font-size:4.5rem}
	.hero .subtitle{font-size:2rem}
	
	/* Forcer le titre hero sur une seule ligne (desktop) */
	.hero-title{white-space:nowrap;overflow:hidden}
	
	.detail-card{flex-direction:row}
	.detail-card .detail-info{font-size:1.75rem;padding:1.5rem}
	.detail-hero h1{font-size:4.5rem}
	.page-subtitle{font-size:2.25rem}
	
	/* Augmenter taille h3 en mode desktop */
	.detail-card .detail-info > h3{font-size:3rem;font-weight:700}
	
	/* Centrer le contenu détail en mode desktop */
	.detail-card .detail-info .detail-content{text-align:center}
	.detail-card .detail-info .detail-content .meta{text-align:center}
	
	/* Styles pour les actions en mode desktop : afficher le bouton retour inline */
	.detail-card .detail-info .detail-actions{display:flex;flex-direction:column;gap:var(--space-sm);align-items:stretch}
	.detail-card .detail-info .detail-actions .btn-back-inline{display:inline-block}
	.detail-card .detail-info .detail-actions .buy,
	.detail-card .detail-info .detail-actions .btn-back{width:100%;text-align:center;white-space:normal;word-wrap:break-word}
	
	/* En mode desktop, afficher les indicateurs inside et masquer outside */
	.carousel-indicators--inside{display:flex;position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);width:auto;padding:0}
	.carousel-indicators--outside{display:none}
	
	/* Cacher le bouton retour externe en mode desktop */
	.detail-back-wrapper{display:none}
}

/* Fix desktop-specific button sizing overrides: ensure detail page buttons are not smaller */
@media (min-width: 1025px) {
	.detail-card .detail-info .detail-actions .buy,
	.detail-card .detail-info .detail-actions .btn-back,
	.detail-back-wrapper .btn-back,
	.detail-info .btn {
		font-size: 2rem;
		line-height: 1.1;
		min-height: 3.5rem;
		padding: 0.75rem 1.75rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.contact-back-wrapper .btn-back,
	.about-back-wrapper .btn-back {
		font-size: 2rem;
		min-height: 3.5rem;
		padding: 0.75rem 1.75rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================
   Navigation entre galeries (admin)
   ============================================ */
.gallery-nav {
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
	align-items: center;
	margin-bottom: var(--space-md);
	padding: var(--space-md) 0;
	flex-wrap: wrap;
}

.gallery-nav-btn {
	background: var(--secondary-color);
	color: var(--text-color);
	border: 2px solid transparent;
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-lg);
	font-size: 1.25rem;
	font-family: 'Dancing Script', cursive;
	cursor: pointer;
	transition: all 0.2s ease;
}

.gallery-nav-btn:hover {
	background: var(--accent-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px var(--shadow-color);
}

.gallery-nav-btn.active {
	background: var(--accent-color);
	border-color: var(--text-color);
}

/* Bouton "Fond d'écran" (à côté de "+ Ajouter un projet") */
.gallery-bg-btn {
	display: inline-block;
	background: var(--secondary-color);
	color: var(--text-color);
	border: none;
	border-radius: 8px;
	padding: 0.625rem 1.25rem;
	font-size: 1.125rem;
	font-family: 'Dancing Script', cursive;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
	margin: 0; /* Pas de margin, le conteneur parent gère l'espacement */
	vertical-align: middle; /* Alignement vertical */
	line-height: normal; /* Reset line-height pour éviter les décalages */
}

.gallery-bg-btn:hover, .gallery-bg-btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	outline: none;
}

.gallery-bg-btn:active {
	transform: translateY(0);
}

@media (min-width: 769px) {
	.gallery-nav-btn {
		font-size: 1.125rem;
		padding: var(--space-sm) var(--space-xl);
	}
	
	.gallery-bg-btn {
		font-size: 1rem;
		padding: var(--space-sm) var(--space-lg);
	}
}