/* =========================================================
RYC&A EXPRESS — STYLE GLOBAL
========================================================= */

:root {
--bg: #f8f3eb;
--accent: #b5835a;
--accent-dark: #8c6444;
--card-bg: #ffffff;
--muted: #5a4636;
--info-bg: #f1e4d0;
--light: #f6e8d9;
--text: #3e2a1d;
--nav: #d6bfa7;
--white: #ffffff;
}

/* RESET */
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, sans-serif;
background-color: var(--bg);
margin: 0;
padding: 0;
color: var(--text);
-webkit-font-smoothing: antialiased;
}

/* =========================================================
IMAGE DE FOND OPTIONNELLE
========================================================= */

/*
POUR AJOUTER UNE IMAGE DE FOND AU SITE :

background-image: url("TON-LIEN");

Laisse "none" si tu ne veux pas d'image.
*/

body {
background-image: none;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed;
}

/* =========================================================
HEADER
========================================================= */

header {
background-color: var(--white);
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.10);
text-align: center;
}

header img {
height: 50px;
width: auto;
max-width: 90%;
object-fit: contain;
display: block;
margin: 0 auto;
}

/* =========================================================
NAVIGATION
========================================================= */

nav {
text-align: center;
background-color: var(--nav);
padding: 10px;
}

nav a {
display: inline-block;
margin: 0 15px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 15px;
}

nav a:hover {
text-decoration: underline;
}

/* =========================================================
BANNIÈRE
========================================================= */

.banner {
background-color: #e8ddd0;

/*
IMAGE DE BANNIÈRE OPTIONNELLE :

background-image: url("TON-LIEN-IMAGE");

Pour l'instant aucune image n'est imposée.
*/

background-image: none;

background-repeat: no-repeat;
background-position: center;
background-size: cover;

min-height: 300px;

display: flex;
align-items: center;
justify-content: center;

padding: 30px 20px;
}

/* =========================================================
BULLE
========================================================= */

.zone-bulle {
display: flex;
justify-content: center;
align-items: center;
margin: 25px 0;
}

.bulle {
background: rgba(255,255,255,0.82);

padding: 12px 25px;

border-radius: 50px;

font-size: 22px;
font-weight: bold;
line-height: 1.4;

color: var(--muted);

display: inline-block;

text-align: center;

max-width: 90%;

box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* =========================================================
CONTAINER
========================================================= */

.container {
width: 100%;
max-width: 1100px;

margin: 20px auto;

padding: 20px;
}

/* =========================================================
ACCUEIL
========================================================= */

.accueil {
text-align: center;
}

.accueil h1 {
color: var(--muted);
margin-bottom: 30px;
}

.choice-container {
display: grid;

grid-template-columns: repeat(2,1fr);

gap: 25px;

max-width: 900px;

margin: 40px auto;
}

.choice-card {
background-color: var(--card-bg);

border-radius: 15px;

padding: 35px 25px;

text-align: center;

box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.choice-card h2 {
color: var(--muted);
}

.choice-card p {
line-height: 1.5;
}

.choice-icon {
font-size: 45px;
margin-bottom: 10px;
}

/* =========================================================
BOUTONS
========================================================= */

.btn,
.bouton {
display: inline-block;

background-color: var(--accent);

color: #ffffff;

padding: 12px 20px;

margin: 10px;

border: none;

border-radius: 6px;

cursor: pointer;

font-size: 16px;

font-weight: bold;

text-decoration: none;

text-align: center;

transition: background-color 0.2s ease;
}

.btn:hover,
.bouton:hover {
background-color: var(--accent-dark);
}

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

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

.btn-danger {
background-color: #a65d52;
}

/* =========================================================
INFO
========================================================= */

.info {
background-color: var(--info-bg);

padding: 10px;

text-align: center;

font-size: 14px;

border-radius: 6px;

margin: 10px auto;

max-width: 1100px;
}

/* =========================================================
FORMULAIRES
========================================================= */

.form-box {
background-color: #ffffff;

padding: 25px;

border-radius: 12px;

box-shadow: 0 2px 8px rgba(0,0,0,0.08);

max-width: 800px;

margin: 25px auto;
}

.form-box h3 {
color: var(--muted);
}

.form-box hr {
margin: 30px 0;

border: none;

border-top: 1px solid #ddd;
}

label {
display: inline-block;

background-color: var(--light);

padding: 5px 10px;

border-radius: 5px;

color: #2b1b10;

font-weight: bold;

font-size: 15px;

margin: 15px 0 8px;
}

input,
select,
textarea {
width: 100%;

padding: 11px;

margin-bottom: 15px;

border: 2px solid var(--accent);

border-radius: 8px;

background-color: #fff7f0;

font-size: 16px;

font-family: Arial, sans-serif;
}

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

input:focus,
select:focus,
textarea:focus {
outline: none;

border-color: var(--accent-dark);

background-color: #ffffff;
}

.hidden {
display: none !important;
}

/* =========================================================
FILTRES
========================================================= */

.filters {
display: flex;

gap: 12px;

flex-wrap: wrap;

margin-bottom: 25px;

align-items: flex-start;
}

.filters > div {
min-width: 180px;
flex: 1;
}

.filters label {
display: block;
}

.filters select,
.filters input {
width: 100%;
}

/* =========================================================
MULTISELECT
========================================================= */

.multiselect {
position: relative;
user-select: none;
}

.multiselect .selector {
display: flex;

align-items: center;

justify-content: space-between;

gap: 8px;

padding: 8px 10px;

border-radius: 8px;

background-color: #fff7f0;

cursor: pointer;

border: 2px solid var(--accent);

min-height: 42px;
}

.multiselect .selector .labels {
display: flex;

gap: 6px;

flex-wrap: wrap;

align-items: center;
}

.tag {
background-color: #ffffff;

border-radius: 14px;

padding: 4px 8px;

font-size: 13px;

color: var(--muted);

border: 1px solid rgba(0,0,0,0.06);
}

.multiselect .caret {
font-size: 12px;
color: var(--muted);
}

.multiselect .options {
position: absolute;

left: 0;
right: 0;

top: calc(100% + 8px);

background-color: #ffffff;

border: 1px solid rgba(0,0,0,0.08);

box-shadow: 0 4px 16px rgba(0,0,0,0.08);

border-radius: 8px;

max-height: 220px;

overflow-y: auto;

z-index: 100;

padding: 8px;

display: none;
}

.multiselect.open .options {
display: block;
}

.multiselect .option {
display: flex;

align-items: center;

gap: 8px;

padding: 8px;

cursor: pointer;

border-radius: 6px;
}

.multiselect .option:hover {
background-color: #f6f1ea;
}

.multiselect .option input {
width: 16px;
height: 16px;
margin: 0;
}

.small-hint {
font-size: 12px;
color: #6b4e36;
margin-top: 6px;
}

/* =========================================================
CATALOGUE
========================================================= */

.ville-section {
margin-bottom: 40px;
}

.ville-section h2 {
color: var(--muted);

background-color: var(--light);

padding: 10px;

border-radius: 5px;

margin: 0 0 15px;
}

.products-grid {
display: grid;

gap: 18px;

grid-template-columns: repeat(4,1fr);

align-items: stretch;
}

.fiche-produit {
background-color: var(--card-bg);

padding: 12px;

border-radius: 8px;

box-shadow: 0 2px 6px rgba(0,0,0,0.08);

text-align: center;

overflow: hidden;

display: flex;

flex-direction: column;

height: 100%;
}

.fiche-produit h4 {
margin: 10px 0 6px;

color: var(--muted);

font-size: 16px;
}

.fiche-produit p {
margin: 6px 0;

font-size: 14px;

color: var(--text);

line-height: 1.35;
}

/* =========================================================
CARROUSEL
========================================================= */

.mini-carrousel {
position: relative;

width: 100%;

height: 260px;

overflow: hidden;

border-radius: 6px;

margin-bottom: 12px;

background-color: #ffffff;
}

.mini-carrousel .track {
display: flex;

height: 100%;

transition: transform 400ms ease;

will-change: transform;
}

.mini-carrousel img {
width: 100%;

height: 260px;

object-fit: cover;

flex: 0 0 100%;

display: block;

cursor: pointer;
}

.carousel-controls {
position: absolute;

top: 50%;

left: 8px;
right: 8px;

display: flex;

justify-content: space-between;

transform: translateY(-50%);

pointer-events: none;
}

.carousel-controls button {
pointer-events: all;

background-color: rgba(255,255,255,0.9);

border: none;

padding: 8px 10px;

border-radius: 6px;

cursor: pointer;

box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.carousel-dots {
margin-top: 6px;

display: flex;

gap: 6px;

justify-content: center;
}

/* =========================================================
DESCRIPTION
========================================================= */
.desc-box {
text-align: left;
height: 155px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
}

.desc-scroll {
height: 120px;
overflow: hidden;
position: relative;
padding-right: 6px;
}

.desc-scroll.expanded {
height: auto;
max-height: none;
}

.see-more {
display: block;
margin-top: 6px;
border: none;
background: none;
color: var(--accent);
cursor: pointer;
font-weight: bold;
padding: 0;
}


/* =========================================================
RESERVATION
========================================================= */

.reserve-btn {
margin-top: auto;

align-self: center;

background-color: var(--accent);

color: #ffffff;

padding: 9px 14px;

border: none;

border-radius: 6px;

cursor: pointer;

font-weight: bold;

text-decoration: none;
}

.reserve-btn:hover {
background-color: var(--accent-dark);
}

/* =========================================================
DRESSING
========================================================= */

.dressing-capsule {
display: inline-block;

margin: 10px auto 12px;

padding: 8px 18px;

background-color: var(--light);

border: 2px solid var(--nav);

border-radius: 999px;

font-size: 14px;

font-weight: bold;

color: var(--muted);

letter-spacing: 0.3px;

box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* =========================================================
ARTICLE LOUÉ
========================================================= */

.fiche-produit.loue {
opacity: 0.45;

filter: grayscale(100%);

position: relative;
}

.fiche-produit.loue::after {
content: "LOUÉ";

position: absolute;

top: 10px;
left: 10px;

background-color: #000000;

color: #ffffff;

padding: 6px 10px;

font-weight: bold;

border-radius: 4px;

font-size: 14px;
}

.fiche-produit.loue .reserve-btn {
background-color: #999999;

cursor: not-allowed;

pointer-events: none;
}

/* =========================================================
ADMIN
========================================================= */

.admin-card {
background-color: #ffffff;

padding: 20px;

margin: 15px 0;

border-radius: 10px;

box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.admin-card h3 {
color: var(--muted);
}

/* =========================================================
IMAGE ARTICLE
========================================================= */

.article-image {
width: 100%;

max-width: 500px;

max-height: 500px;

object-fit: contain;

border-radius: 10px;
}

/* =========================================================
MESSAGES
========================================================= */

.message {
padding: 15px;

border-radius: 8px;

margin: 15px 0;

text-align: center;

font-weight: bold;
}

.message-success {
background-color: #e4f2df;
color: #355c2d;
}

.message-error {
background-color: #f5dddd;
color: #7a3030;
}

.message-info {
background-color: var(--info-bg);
color: var(--muted);
}

/* =========================================================
RESPONSIVE
========================================================= */

/* =========================================================
RESPONSIVE
========================================================= */

/* TABLETTE : 3 annonces par ligne */
@media (max-width: 1000px) and (min-width: 701px) {
.products-grid {
grid-template-columns: repeat(3,1fr);
}
}

/* TÉLÉPHONE : 2 annonces par ligne */
@media (max-width: 700px) {
nav a {
display: inline-block;
margin: 5px 7px;
font-size: 14px;
}

.choice-container {
grid-template-columns: 1fr;
}

.products-grid {
grid-template-columns: repeat(2,1fr);
gap: 12px;
}

.filters {
flex-direction: column;
}

.filters > div {
width: 100%;
}

.banner {
min-height: 250px;
}

.container {
padding: 12px;
}

.bulle {
font-size: 19px;
padding: 10px 18px;
}

.form-box {
padding: 18px;
}

header img {
height: 50px;
}
}