/* =============================================================================
   Sychel Mall - Feuille de style
   Couleurs relevees sur le logo et les affiches de la marque.
   Registre visuel : marketplace dense facon Alibaba, ce qu'elle a demande.
   ============================================================================= */

:root {
  /* Marque, relevee sur le logo et les affiches produit.
     La palette est volontairement vive : les affiches de Sychel Mall jouent
     sur les blocs colores et les pastilles, le site reprend ce registre. */
  --marine:        #0B2E6B;
  --marine-clair:  #16408C;
  --bleu:          #1565D8;
  --bleu-pale:     #E8F0FC;
  --vert:          #2E7D32;
  --vert-clair:    #4CAF50;
  --vert-pale:     #EAF5EA;
  --orange:        #F58220;   /* aplats et filets decoratifs seulement */
  --jaune:         #F2C230;

  /* Versions lisibles des couleurs vives (06/10, checklist de pre-lancement).
     Les teintes de la marque sont trop claires pour porter du texte : blanc
     sur orange donnait 2,59 au lieu des 4,5 exiges, blanc sur vert pomme 2,05.
     Meme famille de couleur, juste assez foncee pour etre lue. A utiliser des
     qu'il y a du TEXTE, en couleur ou sur fond colore. */
  --orange-fonce:  #C25100;   /* prix, boutons principaux */
  --cyan-fonce:    #0A7396;
  --lime-fonce:    #4E7A16;
  --magenta-fonce: #B82A6B;

  /* Les couleurs des bulles du logo, reprises comme accents.
     Chaque format de lot en recoit une, comme sur l'affiche des dosettes. */
  --cyan:          #17ABDB;
  --cyan-pale:     #E3F5FB;
  --lime:          #8CC63F;
  --lime-pale:     #F0F8E4;
  --magenta:       #D6337F;
  --magenta-pale:  #FCEAF3;
  --violet:        #7B3FA0;
  --violet-pale:   #F3ECF8;

  /* Neutres */
  --texte:         #16202E;
  --texte-doux:    #5A6675;
  --texte-faible:  #6B7585;   /* assombri le 06/10 : #8B95A3 donnait 3,03 sur blanc */
  --bordure:       #E1E6EC;
  --fond:          #F4F6F9;
  --blanc:         #FFFFFF;

  /* Etats */
  --succes:        #2E7D32;
  --alerte:        #C75300;
  --erreur:        #C62828;

  --rayon:         8px;
  --rayon-sm:      5px;
  --ombre:         0 1px 3px rgba(11, 46, 107, .08);
  --ombre-forte:   0 6px 20px rgba(11, 46, 107, .14);
  --largeur:       1240px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 16px; }

/* -----------------------------------------------------------------------------
   Barre fixe
   Apparait quand le visiteur quitte le haut de la page. Ne reprend que le
   logo, WhatsApp et le panier, plus le menu quand la place le permet.
   -------------------------------------------------------------------------- */
.barre-fixe {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* Meme decor que le menu (voir .nav-cat) : la barre prend son relais au
     defilement, elle doit lui ressembler. */
  background:
    url('../images/menu-bulles.jpg') no-repeat right center / auto 100%,
    url('../images/menu-feuilles.jpg') no-repeat left center / auto 100%,
    var(--blanc);
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 2px 12px rgba(11, 46, 107, .10);
  transform: translateY(-100%);
  transition: transform .22s ease;
}
.barre-fixe.visible { transform: translateY(0); }
.barre-fixe .conteneur {
  display: flex; align-items: center; gap: 22px;
  padding-top: 8px; padding-bottom: 8px;
  /* Meme calcul que le menu : le logo et le panier ne passent pas sur les
     coins decoratifs, quelle que soit la largeur d'ecran. */
  padding-left:  max(16px, calc(84px - max(0px, (100vw - var(--largeur)) / 2)));
  padding-right: max(16px, calc(96px - max(0px, (100vw - var(--largeur)) / 2)));
}
.barre-fixe .logo img { height: 40px; }
.barre-fixe .actions-entete { margin-left: auto; }

.barre-fixe-menu { display: flex; gap: 20px; overflow: hidden; }
.barre-fixe-menu a {
  font-size: 13.5px; font-weight: 500; color: var(--texte-doux); white-space: nowrap;
}
.barre-fixe-menu a:hover, .barre-fixe-menu a.actif { color: var(--marine); text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .barre-fixe { transition: none; } }

/* -----------------------------------------------------------------------------
   En-tete
   -------------------------------------------------------------------------- */
.entete { background: var(--blanc); border-bottom: 1px solid var(--bordure); }
.entete .conteneur {
  display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px;
}
.logo { flex-shrink: 0; }
.logo img { height: 52px; width: auto; }

/* Barre de recherche large : signature visuelle des marketplaces.
   min-width: 0 est indispensable : sans lui, un conteneur flex refuse de
   descendre sous la largeur de son contenu et fait deborder la page entiere
   sur les tres petits ecrans. */
.recherche { flex: 1; min-width: 0; display: flex; max-width: 620px; }
.recherche input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 2px solid var(--marine);
  border-right: none;
  border-radius: var(--rayon) 0 0 var(--rayon);
  font-size: 14px; font-family: inherit;
}
.recherche input:focus { outline: none; border-color: var(--bleu); }
.recherche button {
  padding: 11px 26px;
  background: var(--marine); color: #fff;
  border: 2px solid var(--marine);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.recherche button:hover { background: var(--marine-clair); border-color: var(--marine-clair); }

.actions-entete { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.lien-action {
  display: flex; align-items: center; gap: 7px;
  color: var(--texte-doux); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.lien-action:hover { color: var(--marine); text-decoration: none; }
.lien-action svg { width: 20px; height: 20px; flex-shrink: 0; }

.pastille-panier { position: relative; }
.pastille-panier[data-n]:not([data-n="0"])::after {
  content: attr(data-n);
  position: absolute; top: -6px; right: -9px;
  background: var(--orange-fonce); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; display: grid; place-items: center;
}

/* Navigation des categories
   Fond decoratif compose a partir du visuel de la marque : la vague et les
   feuilles a gauche, les bulles a droite, le centre laisse blanc pour que les
   liens restent lisibles. L'image est ancree sur les bords et non repetee. */
.nav-cat {
  /* Deux coins decoupes a part plutot qu'une bande etiree en "cover" : la
     bande etait rognee sur les bords, et les bulles tombaient justement dans
     la partie coupee. Chaque coin est ancre a son bord, a la hauteur du menu. */
  background:
    url('../images/menu-bulles.jpg') no-repeat right center / auto 100%,
    url('../images/menu-feuilles.jpg') no-repeat left center / auto 100%,
    var(--blanc);
  border-bottom: 1px solid var(--bordure);
}
/* Les liens ne doivent pas passer sur un coin. Quand l'ecran est large, les
   coins sont hors du conteneur et la marge retombe a 16px ; quand il se
   resserre, elle grandit juste assez pour les eviter. Pas de voile blanc :
   il masquait les bulles et creait une barre de defilement parasite. */
.nav-cat .conteneur {
  display: flex; gap: 26px; overflow-x: auto;
  /* Le max(0px, ...) interieur est indispensable : sous la largeur maximale,
     (100vw - largeur) devient negatif et gonflait la marge au lieu de la
     plafonner, ce qui poussait les liens au milieu du menu. */
  padding-left:  max(16px, calc(84px - max(0px, (100vw - var(--largeur)) / 2)));
  padding-right: max(16px, calc(96px - max(0px, (100vw - var(--largeur)) / 2)));
}
/* Sur telephone les liens debordent et defilent : sans ce fondu, ils
   passaient par-dessus les bulles. Le masque s'applique au conteneur des
   liens seulement ; le fond du menu, porte par .nav-cat, reste intact. */
@media (max-width: 760px) {
  .nav-cat .conteneur {
    -webkit-mask-image: linear-gradient(90deg, transparent 56px, #000 84px, #000 calc(100% - 96px), transparent calc(100% - 70px));
            mask-image: linear-gradient(90deg, transparent 56px, #000 84px, #000 calc(100% - 96px), transparent calc(100% - 70px));
  }
}
.nav-cat a {
  padding: 11px 0; font-size: 14px; font-weight: 500;
  color: var(--texte-doux); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-cat a:hover, .nav-cat a.actif {
  color: var(--marine); border-bottom-color: var(--vert-clair); text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Accueil : banniere
   -------------------------------------------------------------------------- */
/* Fond clair et non plus bleu plein : les affiches de la marque travaillent
   sur blanc, avec la couleur apportee par des blocs et des pastilles. */
.heros {
  background:
    radial-gradient(700px 380px at 8% 0%, var(--cyan-pale) 0%, transparent 60%),
    radial-gradient(650px 360px at 92% 100%, var(--lime-pale) 0%, transparent 62%),
    var(--blanc);
  border-bottom: 1px solid var(--bordure);
  color: var(--texte); padding: 34px 0;
}
.heros .conteneur { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.heros h1 { font-size: 34px; line-height: 1.18; margin: 0 0 12px; }
.heros p { font-size: 16px; color: #CBDCF5; margin: 0 0 22px; max-width: 46ch; }

/* --- Hero a deux mises en avant : les dosettes et la location --------------
   Chaque offre occupe une moitie de l'ecran, avec sa photo en fond et le
   texte par-dessus. La diagonale est taillee au clip-path plutot que dessinee
   par un degrade : elle doit couper les photos elles-memes, pas passer par
   dessus. Le bloc de droite remonte sur celui de gauche (marge negative) et
   le recouvre, ce qui dessine la coupe. */
.heros-double { background: var(--marine); padding: 0; }
.heros-double .conteneur {
  grid-template-columns: 1fr 1fr; gap: 0;
  max-width: none; padding: 0; align-items: stretch;
}

.mise-en-avant {
  position: relative;
  min-height: 400px;
  display: flex; align-items: center;
  padding: 36px 44px;
  background-size: cover; background-position: center;
  border: none; border-radius: 0;
}
.heros-double .mise-en-avant:first-child {
  background-image: url('../images/fond-lessive.jpg');
  clip-path: polygon(0 0, 100% 0, calc(100% - 56px) 100%, 0 100%);
  padding-right: 84px;
}
.heros-double .mise-en-avant:last-child {
  background-image: url('../images/fond-location.jpg');
  background-position: 32% center;
  clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -56px;
  padding-left: 84px;
}

/* Voile : les photos sont claires et chargees, un texte blanc n'y tiendrait
   pas sans lui. Degrade et non aplat, pour que le sujet de la photo reste
   visible du cote oppose au texte. */
.mise-en-avant::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(11, 46, 107, .94) 0%, rgba(11, 46, 107, .84) 40%, rgba(11, 46, 107, .15) 100%);
}
.heros-double .mise-en-avant:last-child::before {
  background: linear-gradient(270deg,
    rgba(11, 46, 107, .94) 0%, rgba(11, 46, 107, .84) 40%, rgba(11, 46, 107, .15) 100%);
}
/* Le texte du bloc droit se cale a droite : sa photo a le sujet a gauche. */
.heros-double .mise-en-avant:last-child .mise-en-avant-texte { margin-left: auto; text-align: right; }
.heros-double .mise-en-avant:last-child .puces-heros { justify-content: flex-end; }

.mise-en-avant.accent-cyan { --accent: var(--cyan-fonce); }
.mise-en-avant.accent-lime { --accent: var(--lime-fonce); }

.mise-en-avant-texte { position: relative; z-index: 1; max-width: 400px; }
.mise-en-avant-texte h2 {
  font-size: 27px; line-height: 1.2; margin: 8px 0 12px; color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}
.mise-en-avant-texte p { font-size: 14.5px; margin: 0 0 14px; color: #DCE7F7; }
.surtitre {
  display: inline-block; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: #fff; background: var(--accent, var(--cyan));
  padding: 4px 11px; border-radius: 20px;
}
.depuis { font-size: 14px; color: #DCE7F7; margin: 0 0 16px !important; }
.depuis strong { color: var(--jaune); font-size: 22px; }
.mise-en-avant .puces-heros { gap: 18px; margin-bottom: 14px; }
.mise-en-avant .puces-heros li { font-size: 13px; color: #DCE7F7; }
.mise-en-avant .puces-heros li::before { background: var(--accent, var(--cyan)); }
.heros-visuel {
  background: #fff; border-radius: var(--rayon); padding: 18px;
  box-shadow: var(--ombre-forte); display: grid; place-items: center;
}
.heros-visuel img { border-radius: var(--rayon-sm); max-height: 300px; width: auto; }

.puces-heros { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 22px; padding: 0; list-style: none; }
.puces-heros li { font-size: 13px; color: #CBDCF5; display: flex; align-items: center; gap: 7px; }
.puces-heros li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vert-clair); }

/* Les deux appels a l'action : cote a cote au large, empiles sur mobile. */
.boutons-heros { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .boutons-heros .btn { flex: 1 1 100%; } }

/* -----------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: none; border-radius: var(--rayon);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: background .15s;
}
.btn:hover { text-decoration: none; }
.btn-principal { background: var(--orange-fonce); color: #fff; }
.btn-principal:hover { background: #DC7016; }
.btn-secondaire { background: var(--vert); color: #fff; }
.btn-secondaire:hover { background: #256428; }
.btn-contour { background: transparent; color: var(--marine); border: 1.5px solid var(--bordure); }
.btn-contour:hover { border-color: var(--marine); background: var(--bleu-pale); }
.btn-clair { background: #fff; color: var(--marine); }
.btn-clair:hover { background: #EDF3FC; }
.btn-bloc { width: 100%; }
.btn-lg { padding: 14px 30px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* -----------------------------------------------------------------------------
   Sections et titres
   -------------------------------------------------------------------------- */
.section { padding: 34px 0; }
.entete-section {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.entete-section h2 { font-size: 21px; margin: 0; color: var(--marine); }
.entete-section .lien-plus { font-size: 13px; font-weight: 600; }

/* Bandeau d'arguments */
.arguments { background: var(--blanc); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.arguments .conteneur {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 20px; padding-bottom: 20px;
}
/* Pictogramme dans une pastille de couleur, comme les icones de l'affiche. */
.argument { display: flex; gap: 12px; align-items: center; }
.argument svg {
  width: 40px; height: 40px; flex-shrink: 0; padding: 9px;
  border-radius: 50%; color: #fff; background: var(--accent, var(--vert));
}
.argument:nth-child(1) { --accent: var(--vert); }
.argument:nth-child(2) { --accent: var(--magenta); }
.argument:nth-child(3) { --accent: var(--cyan); }
.argument:nth-child(4) { --accent: var(--marine); }
.argument h3 { font-size: 14px; margin: 0 0 2px; color: var(--marine); }
.argument p { font-size: 12.5px; margin: 0; color: var(--texte-doux); }

/* -----------------------------------------------------------------------------
   Grille de produits : dense, facon marketplace
   -------------------------------------------------------------------------- */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
  gap: 14px;
}
/* Avec deux ou trois produits, une grille pleine largeur laisse un grand vide
   a droite. On elargit les cartes plutot que d'etaler du blanc. La classe est
   posee par le script qui affiche la grille, selon le nombre reel de produits. */
.grille-produits.peu { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 340px)); }
.carte {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
}
.carte:hover { box-shadow: var(--ombre-forte); border-color: #C9D6E8; }
.carte a { color: inherit; text-decoration: none; }
/* Hauteur fixe plutot qu'aspect-ratio : une image portrait plus haute que le
   ratio fait grandir le conteneur, et les cartes voisines se desalignent. */
.carte-image {
  position: relative; height: 230px; background: #fff;
  display: grid; place-items: center; padding: 12px; overflow: hidden;
}
.carte-image img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.carte-corps { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.carte-titre { font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0; }
.carte-desc { font-size: 12.5px; color: var(--texte-doux); margin: 0; }
.carte-prix { margin-top: auto; }
.prix { font-size: 19px; font-weight: 700; color: var(--orange-fonce); }
.prix-sur { font-size: 11px; color: var(--texte-faible); display: block; }
.carte-meta { font-size: 11.5px; color: var(--texte-faible); }

.etiquette {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: var(--vert); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 3px; text-transform: uppercase;
}
.etiquette.rupture { background: var(--texte-faible); }

/* Pastilles de parfum */
.parfums-apercu { display: flex; gap: 4px; align-items: center; }
.pastille {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--bordure);
}
.parfums-apercu span:last-child { font-size: 11.5px; color: var(--texte-faible); margin-left: 3px; }

/* -----------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */
.fil { font-size: 12.5px; color: var(--texte-faible); padding: 14px 0; }
.fil a { color: var(--texte-doux); }

.fiche { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 34px; align-items: start; }
.fiche-visuel { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 22px; }
.fiche-visuel img { margin: 0 auto; max-height: 400px; width: auto; }

.fiche-info { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 24px; }
.fiche-info h1 { font-size: 25px; margin: 0 0 6px; color: var(--marine); line-height: 1.25; }
.accroche { font-size: 15px; color: var(--texte-doux); margin: 0 0 18px; }

/* Le bloc prend la couleur du format choisi : le lien entre le format
   selectionne et le total affiche se lit sans avoir a le chercher. */
.bloc-prix {
  background: var(--accent-pale, var(--bleu-pale));
  border-left: 5px solid var(--accent, var(--bleu));
  border-radius: var(--rayon); padding: 15px 18px; margin-bottom: 20px;
  /* Pas de transition sur background ni border-color : une propriete en
     transition dont la valeur vient d'une variable CSS garde son ancienne
     valeur quand la variable change. Verifie sur ce bloc, et deja rencontre
     sur le basculement de theme du portfolio koneladeu. */
}
.bloc-prix .prix { font-size: 30px; color: var(--accent-texte, var(--orange-fonce)); }
.bloc-prix .prix-detail { font-size: 12.5px; color: var(--texte-doux); }

.champ { margin-bottom: 20px; }
.champ > label, .titre-champ {
  display: block; font-size: 13px; font-weight: 700; color: var(--marine);
  margin-bottom: 9px; text-transform: uppercase; letter-spacing: .3px;
}
.aide { font-size: 12.5px; color: var(--texte-doux); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Choix du format
   Une couleur par format, dans l'ordre, comme les encarts de prix de
   l'affiche : vert pour le petit lot, cyan pour le moyen, violet pour le gros.
   La couleur aide a distinguer les offres d'un coup d'oeil. */
.formats { display: grid; gap: 9px; }
.format {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--bordure); border-left: 5px solid var(--accent, var(--vert));
  border-radius: var(--rayon);
  padding: 12px 14px; cursor: pointer; background: #fff; transition: border-color .12s, background .12s;
}
/* Les memes teintes servent aux formats et au bloc de prix qui les reflete. */
.formats .format:nth-child(1), .teinte-1 { --accent: var(--vert);    --accent-pale: var(--vert-pale);    --accent-texte: var(--vert); }
.formats .format:nth-child(2), .teinte-2 { --accent: var(--cyan);    --accent-pale: var(--cyan-pale);    --accent-texte: var(--cyan-fonce); }
.formats .format:nth-child(3), .teinte-3 { --accent: var(--violet);  --accent-pale: var(--violet-pale);  --accent-texte: var(--violet); }
.formats .format:nth-child(4), .teinte-4 { --accent: var(--magenta); --accent-pale: var(--magenta-pale); --accent-texte: var(--magenta-fonce); }
.format:hover { border-color: #B9C8DC; border-left-color: var(--accent, var(--vert)); }
.format input { margin: 0; accent-color: var(--accent, var(--marine)); }
.format.choisi {
  border-color: var(--accent, var(--marine));
  background: var(--accent-pale, var(--bleu-pale));
}
.format.choisi .format-prix .prix { color: var(--accent-texte, var(--orange-fonce)); }
.format.indisponible { opacity: .5; cursor: not-allowed; }
.format-nom { font-weight: 600; font-size: 14px; }
.format-unite { font-size: 12px; color: var(--texte-faible); }
.format-prix { margin-left: auto; text-align: right; }
.format-prix .prix { font-size: 17px; }
.format-prix .unitaire { font-size: 11.5px; color: var(--texte-faible); display: block; }

/* Choix des parfums */
.parfums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr)); gap: 9px; }
.parfum {
  border: 1.5px solid var(--bordure); border-radius: var(--rayon);
  padding: 9px; cursor: pointer; text-align: center; background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .12s, background .12s;
}
.parfum:hover { border-color: #B9C8DC; }
.parfum.choisi { border-color: var(--vert); background: var(--vert-pale); }

/* Tableaux visuels de la fiche produit (gamme, guide de dosage). Recadres en
   format paysage : l'un sous l'autre, chacun plafonne a sa largeur reelle
   pour ne jamais etre agrandi au point de devenir flou. */
.tableaux-produit { display: grid; gap: 18px; margin-top: 22px; justify-items: center; }
.tableau-produit {
  display: block; width: fit-content; max-width: 100%;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden; background: var(--blanc);
}
.tableau-produit img { display: block; max-width: 100%; height: auto; }
/* Un parfum epuise reste visible, mais se voit comme tel et ne se coche pas. */
.parfum.indisponible { opacity: .45; cursor: not-allowed; }
.parfum.indisponible:hover { border-color: var(--bordure); }
.parfum.indisponible small { font-weight: 500; color: var(--texte-faible); font-size: 11px; }
.parfum input { display: none; }
/* Hauteur superieure a la largeur : les applicateurs de gel sont tres
   verticaux et disparaissaient dans un carre. Les dosettes, presque carrees,
   restent centrees correctement. */
.parfum img { width: 100%; max-width: 60px; height: 64px; object-fit: contain; border-radius: var(--rayon-sm); }
.parfum-nom { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.parfum-poids { font-weight: 700; color: var(--bleu); }

/* --- Composition du lot : un compteur par parfum --------------------------
   Remplace les cases a cocher. .parfum input est masque plus haut (heritage
   des cases) : le champ du compteur doit etre re-affiche explicitement. */
.parfums-compteurs { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); }
.parfums-compteurs .parfum { cursor: default; }
.compteur-parfum {
  display: flex; align-items: center; margin-top: 2px;
  border: 1.5px solid var(--bordure); border-radius: var(--rayon-sm); overflow: hidden; background: #fff;
}
.compteur-parfum button {
  width: 32px; height: 32px; border: none; background: var(--fond);
  font-size: 17px; line-height: 1; color: var(--marine); cursor: pointer; font-family: inherit;
}
.compteur-parfum button:hover:not(:disabled) { background: #E6ECF4; }
.compteur-parfum button:disabled { color: var(--texte-faible); cursor: not-allowed; opacity: .55; }
.parfums-compteurs .compteur-parfum input {
  display: block; width: 42px; height: 32px; border: none; text-align: center;
  font-size: 14px; font-weight: 700; font-family: inherit; color: var(--texte);
  -moz-appearance: textfield;
}
.compteur-parfum input::-webkit-outer-spin-button,
.compteur-parfum input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur-parfum input:focus { outline: 2px solid var(--bleu); outline-offset: -2px; }
.compte-composition { margin: 10px 0 0; font-size: 13px; color: var(--texte-doux); }
.compte-composition.juste { color: var(--vert); font-weight: 600; }
.compte-composition.incomplet { color: var(--alerte); font-weight: 600; }
.compte-composition.trop { color: var(--erreur); font-weight: 600; }

/* Quantite */
.quantite { display: inline-flex; align-items: center; border: 1.5px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.quantite button {
  width: 38px; height: 40px; border: none; background: #fff;
  font-size: 18px; cursor: pointer; color: var(--marine); font-family: inherit;
}
.quantite button:hover { background: var(--bleu-pale); }
.quantite input {
  width: 52px; height: 40px; border: none; border-left: 1px solid var(--bordure);
  border-right: 1px solid var(--bordure); text-align: center;
  font-size: 15px; font-weight: 600; font-family: inherit;
}
.quantite input:focus { outline: none; }

.ligne-ajout { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Description longue */
.description { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 24px; margin-top: 22px; }
.description h2 { font-size: 17px; color: var(--marine); margin: 0 0 12px; }
.description p { margin: 0 0 12px; color: var(--texte-doux); max-width: 78ch; }
.liste-atouts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 9px; }
.liste-atouts li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--texte-doux); }
.liste-atouts li::before { content: "✓"; color: var(--vert); font-weight: 700; flex-shrink: 0; }

/* -----------------------------------------------------------------------------
   En-tete de page interieure
   -------------------------------------------------------------------------- */
.entete-page { background: var(--marine); color: #fff; padding: 26px 0; }
.entete-page h1 { font-size: 27px; margin: 0 0 6px; }
.entete-page p { margin: 0; color: #CBDCF5; max-width: 60ch; font-size: 14.5px; }

/* -----------------------------------------------------------------------------
   Location de vehicules
   -------------------------------------------------------------------------- */
.grille-vehicules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 18px; }
.vehicule {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden; display: flex; flex-direction: column;
}
.vehicule-image { background: #fff; padding: 14px; display: grid; place-items: center; position: relative; }
/* Pastille de disponibilite, posee sur la photo comme l'etiquette produit. */
.etat-vehicule {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  border-radius: 20px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap;
}
.etat-vehicule.dispo   { background: var(--vert); }
.etat-vehicule.louee   { background: var(--orange-fonce); }
.etat-vehicule.atelier { background: var(--texte-faible); }
/* La voiture reste visible et desirable : elle sera de nouveau libre. On
   attenue la photo, pas la fiche entiere. */
.vehicule-indisponible .vehicule-image img { opacity: .55; }
.retour-prevu { font-size: 13px; color: var(--alerte); font-weight: 600; margin: -6px 0 12px; }
.vehicule-image img { max-height: 180px; width: auto; }
.vehicule-corps { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; position: relative; }
.numero {
  position: absolute; top: -22px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--marine); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.vehicule h2 { font-size: 19px; margin: 0; color: var(--marine); }
.vehicule-detail { font-size: 13.5px; color: var(--texte-doux); margin: 0; }
.vehicule-prix { margin: 10px 0 14px; }
.vehicule-prix .prix { font-size: 25px; }
.vehicule-prix .par { font-size: 13px; color: var(--texte-doux); margin-left: 6px; }
.vehicule-prix .option { display: block; font-size: 12.5px; color: var(--alerte); margin-top: 3px; }
.vehicule .btn { margin-top: auto; }
/* Prix à gauche, bouton Réserver à droite, sur la même ligne (29/09).
   Le bouton sort du flux « collé en bas » de la carte, d'où le margin-top. */
.ligne-prix-action {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ligne-prix-action .vehicule-prix { flex: 1 1 auto; }
.ligne-prix-action .btn { margin-top: 0; white-space: nowrap; padding: 11px 20px; }
@media (max-width: 420px) {
  .ligne-prix-action .btn { flex: 1 1 100%; text-align: center; }
}

.conditions { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 24px; }
.conditions h2 { font-size: 19px; color: var(--marine); margin: 0 0 16px; }
.grille-conditions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px; }
.condition h3 { font-size: 14.5px; color: var(--marine); margin: 0 0 4px; }
.condition p { font-size: 13.5px; color: var(--texte-doux); margin: 0; }

.appel-contact {
  margin-top: 18px; background: var(--bleu-pale); border-radius: var(--rayon); padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.appel-contact h2 { font-size: 18px; color: var(--marine); margin: 0 0 4px; }
.appel-contact p { margin: 0; color: var(--texte-doux); font-size: 14px; }

/* -----------------------------------------------------------------------------
   Panier
   -------------------------------------------------------------------------- */
.page-panier { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; }
.lignes-panier { display: grid; gap: 12px; }

.ligne-panier {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px; display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center;
}
.ligne-image { background: var(--fond); border-radius: var(--rayon-sm); height: 92px; display: grid; place-items: center; overflow: hidden; }
.ligne-image img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.ligne-info h3 { font-size: 15px; margin: 0 0 3px; }
.ligne-info h3 a { color: var(--marine); }
.ligne-format { font-size: 13px; color: var(--texte-doux); margin: 0 0 3px; font-weight: 600; }
.ligne-parfums { font-size: 12.5px; color: var(--texte-doux); margin: 0 0 3px; }
.ligne-parfums-vide { color: var(--texte-faible); font-style: italic; }
.ligne-unitaire { font-size: 12.5px; color: var(--texte-faible); margin: 0; }
.ligne-actions { display: grid; gap: 8px; justify-items: end; }
.ligne-total { font-size: 17px; font-weight: 700; color: var(--orange-fonce); }
.lien-retirer {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--texte-faible); text-decoration: underline;
}
.lien-retirer:hover { color: var(--erreur); }

/* Confirmation de retrait, sur toute la largeur de la ligne. Le bouton pour
   garder le produit est le plus visible des deux, volontairement. */
.confirmer-retrait {
  grid-column: 1 / -1; background: var(--bleu-pale); border-radius: var(--rayon-sm);
  padding: 12px 14px; font-size: 13.5px;
}
.confirmer-retrait p { margin: 0 0 4px; color: var(--texte-doux); }
.confirmer-retrait p strong { color: var(--marine); }
.confirmer-retrait-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; }

/* Message rouge de la cliente (21/09) : le lot du dessus revient au même
   prix ou moins cher. Le client reste libre, le bouton l'y fait passer. */
.conseil-palier {
  grid-column: 1 / -1; margin: 10px 0 4px; padding: 11px 13px;
  background: #FDECEA; border-left: 4px solid var(--erreur); border-radius: var(--rayon-sm);
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
}
.conseil-palier p { margin: 0; color: var(--erreur); font-size: 14px; flex: 1 1 220px; }
.conseil-palier .btn { padding: 8px 14px; font-size: 13.5px; }
.ligne-fixe { margin: 0; font-size: 12.5px; color: var(--texte-doux); max-width: 150px; }

.recap {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 18px; position: sticky; top: 76px;
}
.recap h3 { font-size: 16px; color: var(--marine); margin: 0 0 14px; }
.recap-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 8px; }
.recap-attente { font-size: 13px; color: var(--alerte); }

/* Code promo (29/09) */
/* .recap-ligne est en display:flex, qui l'emporte sur l'attribut hidden : sans
   cette règle, la ligne de réduction reste visible sans code appliqué. */
.recap-ligne[hidden] { display: none; }
.bloc-promo { border-top: 1px dashed var(--bordure); margin-top: 12px; padding-top: 12px; }
.bloc-promo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--marine); margin-bottom: 6px; }
.ligne-promo { display: flex; gap: 8px; }
.ligne-promo input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--bordure);
  border-radius: var(--rayon); font-size: 14px; font-family: inherit; text-transform: uppercase;
}
.ligne-promo input:focus { outline: none; border-color: var(--bleu); }
.ligne-promo .btn { padding: 10px 14px; white-space: nowrap; }
.promo-ok { color: var(--vert) !important; font-weight: 600; }
.promo-erreur { color: var(--erreur) !important; font-weight: 600; }
#ligne-remise strong { color: var(--vert); }
.recap-note { font-size: 12px; color: var(--texte-doux); background: var(--bleu-pale); border-radius: var(--rayon-sm); padding: 9px 11px; margin: 10px 0; }
.recap-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--bordure); padding-top: 12px; margin-bottom: 14px; font-size: 14px;
}
.recap-total .prix { font-size: 23px; }

@media (max-width: 860px) {
  .page-panier { grid-template-columns: 1fr; }
  .recap { position: static; }
}
@media (max-width: 560px) {
  .ligne-panier { grid-template-columns: 70px 1fr; }
  .ligne-image { height: 70px; }
  .ligne-actions { grid-column: 1 / -1; justify-items: stretch; grid-template-columns: auto 1fr auto; align-items: center; }
  .ligne-total { text-align: right; }
}

/* -----------------------------------------------------------------------------
   Formulaire de commande
   -------------------------------------------------------------------------- */
.page-commande { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; }
.bloc-formulaire {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 22px;
}
.bloc-formulaire h3 { font-size: 16px; color: var(--marine); margin: 0 0 14px; }

.champ-form { margin-bottom: 16px; }
.champ-form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--texte); margin-bottom: 6px; }
.obligatoire { color: var(--erreur); }
.facultatif { color: var(--texte-faible); font-weight: 400; }
.champ-form input, .champ-form textarea, .champ-form select {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--bordure); border-radius: var(--rayon);
  font-size: 14.5px; font-family: inherit; color: var(--texte); background: #fff;
}
.champ-form input:focus, .champ-form textarea:focus, .champ-form select:focus {
  outline: none; border-color: var(--bleu);
}
.champ-form textarea { resize: vertical; }
.aide-champ { font-size: 12.5px; color: var(--texte-doux); margin: 5px 0 0; }

.recap-articles { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.recap-articles li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
  font-size: 13px; align-items: start;
  border-bottom: 1px solid var(--bordure); padding-bottom: 10px;
}
.recap-articles li:last-child { border-bottom: none; padding-bottom: 0; }
.recap-qte { font-weight: 700; color: var(--marine); }
.recap-articles small { color: var(--texte-faible); font-size: 11.5px; }
.mention-paiement { font-size: 12px; color: var(--texte-doux); text-align: center; margin: 10px 0 0; }

@media (max-width: 860px) { .page-commande { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   Paiement
   -------------------------------------------------------------------------- */
.page-paiement { max-width: 720px; margin: 0 auto; }
/* Consignes saisies par la boutique dans Reglages (payment_instructions).
   pre-line : les retours a la ligne qu'elle tape sont respectes. */
.consignes-boutique {
  white-space: pre-line; font-size: 14px; line-height: 1.55; color: var(--texte);
  background: var(--bleu-pale); border-left: 4px solid var(--bleu);
  border-radius: var(--rayon-sm); padding: 12px 14px; margin: 0 0 18px;
}
.confirmation { text-align: center; margin-bottom: 22px; }
.coche {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--vert); color: #fff; font-size: 28px; display: grid; place-items: center;
}
.confirmation h1 { font-size: 24px; color: var(--marine); margin: 0 0 8px; }
.confirmation p { margin: 0 0 4px; color: var(--texte-doux); font-size: 14.5px; }
.reference { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--marine); }
.conserver { font-size: 12.5px !important; color: var(--texte-faible) !important; }

.montant-a-payer {
  background: var(--blanc); border: 1px solid var(--bordure); border-top: 4px solid var(--orange);
  border-radius: var(--rayon); padding: 18px; text-align: center; margin-bottom: 18px;
}
.montant-a-payer span { display: block; font-size: 13px; color: var(--texte-doux); }
.montant-a-payer .prix { font-size: 34px; }
.montant-a-payer .apart { font-size: 12.5px; color: var(--alerte); margin-top: 6px; }
/* Les conditions de restitution de la caution : un paragraphe, donc aligné à
   gauche et dans la couleur du texte courant, pas en orange centré (29/09). */
.montant-a-payer .apart-caution {
  text-align: left; color: var(--texte-doux); line-height: 1.5; margin-top: 10px;
  border-top: 1px solid var(--bordure); padding-top: 10px;
}
.montant-a-payer .apart-caution strong { color: var(--texte); }

.etapes-paiement { list-style: none; counter-reset: etape; padding: 0; margin: 0; display: grid; gap: 14px; }
.etapes-paiement > li {
  counter-increment: etape;
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 18px 18px 18px 58px; position: relative;
}
.etapes-paiement > li::before {
  content: counter(etape);
  position: absolute; left: 18px; top: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--marine); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.etapes-paiement h3 { font-size: 16px; color: var(--marine); margin: 0 0 6px; }
.etapes-paiement p { font-size: 14px; color: var(--texte-doux); margin: 0 0 12px; }

.moyens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; }
.moyen {
  border: 1.5px solid var(--bordure); border-left: 5px solid var(--teinte, var(--marine));
  border-radius: var(--rayon); padding: 12px 14px; display: grid; gap: 3px;
}
.moyen-nom { font-size: 12.5px; font-weight: 700; color: var(--teinte, var(--marine)); text-transform: uppercase; letter-spacing: .4px; }
.numero-copier {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 19px; font-weight: 700; color: var(--texte);
  display: flex; align-items: baseline; gap: 9px;
}
.copier-mention {
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--bleu);
  text-transform: uppercase; letter-spacing: .5px;
}
.moyen-titulaire { font-size: 12px; color: var(--texte-faible); }

/* Référence copiable (25/09) : le client la recopiait à la main dans le motif
   du transfert, une faute et le paiement devient introuvable. */
.reference-copier {
  background: none; border: 1px dashed var(--bleu); border-radius: var(--rayon-sm);
  padding: 2px 8px; cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700; color: var(--marine); font-size: inherit;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.reference-copier:hover { background: var(--bleu-pale); }
p .reference.reference-copier { font-size: 17px; }
.consigne { background: var(--bleu-pale); border-radius: var(--rayon-sm); padding: 10px 12px; font-size: 13px !important; color: #123C7A !important; margin: 0 !important; }

.detail-commande {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 18px; margin-top: 18px;
}
.detail-commande h3 { font-size: 15px; color: var(--marine); margin: 0 0 12px; }

/* -----------------------------------------------------------------------------
   Suivi de commande
   -------------------------------------------------------------------------- */
.page-suivi { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; }
.suivi-principal { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 22px; }
.suivi-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.suivi-entete h2 { font-size: 21px; margin: 2px 0 0; }
.badge-statut {
  background: var(--vert-pale); color: var(--vert); border-radius: 20px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 700;
}
.badge-annule { background: #FDECEA; color: var(--erreur); }

.etapes-suivi { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.etapes-suivi li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding-bottom: 20px; position: relative; }
.etapes-suivi li:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 30px; bottom: 0;
  width: 2px; background: var(--bordure);
}
.etapes-suivi li.faite:not(:last-child)::before { background: var(--vert-clair); }
.puce {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; position: relative; z-index: 1;
  background: var(--fond); color: var(--texte-faible); border: 2px solid var(--bordure);
}
.etapes-suivi li.faite .puce { background: var(--vert); color: #fff; border-color: var(--vert); }
.etapes-suivi li.courante .puce { background: var(--marine); color: #fff; border-color: var(--marine); }
.etapes-suivi h3 { font-size: 14.5px; margin: 5px 0 0; color: var(--texte); }
.etapes-suivi li.a-venir h3 { color: var(--texte-faible); }
.etapes-suivi p { font-size: 13px; color: var(--texte-doux); margin: 3px 0 0; }

.page-suivi-vide {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 34px; text-align: center; max-width: 560px; margin: 0 auto;
}
.page-suivi-vide h2 { font-size: 21px; color: var(--marine); margin: 0 0 10px; }
.page-suivi-vide p { color: var(--texte-doux); margin: 0 0 12px; }
.secours { font-size: 13px !important; background: var(--fond); border-radius: var(--rayon-sm); padding: 12px; }

@media (max-width: 860px) { .page-suivi { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   Etats et messages
   -------------------------------------------------------------------------- */
.note { border-radius: var(--rayon); padding: 12px 15px; font-size: 13.5px; margin-bottom: 16px; }
.note-info { background: var(--bleu-pale); color: #123C7A; }
.note-succes { background: var(--vert-pale); color: #1B5E20; }
.note-alerte { background: #FFF4E5; color: #8A4B00; }
.note-erreur { background: #FDECEA; color: #A31D14; }

.vide, .chargement { text-align: center; padding: 56px 20px; color: var(--texte-faible); }

/* Squelettes de chargement */
.squelette { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.squelette .barre { background: linear-gradient(90deg, #EEF1F5 25%, #E3E8EE 50%, #EEF1F5 75%); background-size: 200% 100%; animation: glisse 1.3s infinite; }
.squelette .barre.image { aspect-ratio: 1; }
.squelette .barre.texte { height: 12px; margin: 10px 12px; border-radius: 3px; }
.squelette .barre.texte.court { width: 55%; }
@keyframes glisse { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .squelette .barre { animation: none; } }

/* -----------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--marine); color: #A9BEDC; margin-top: 44px; padding: 34px 0 20px; font-size: 13.5px; }
.pied .conteneur { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; }
.pied h3 { color: #fff; font-size: 14px; margin: 0 0 11px; }
.pied a { color: #A9BEDC; }
.pied a:hover { color: #fff; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.pied img { height: 46px; width: auto; margin-bottom: 11px; filter: brightness(0) invert(1); opacity: .95; }
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 26px; padding-top: 15px;
  text-align: center; font-size: 12.5px; color: #7E96BC;
}

/* -----------------------------------------------------------------------------
   Location : formules sur les cartes, reservation, paiement
   -------------------------------------------------------------------------- */
.formules-vehicule {
  list-style: none; padding: 0; margin: -6px 0 14px; display: grid; gap: 4px;
  font-size: 13px; border-top: 1px dashed var(--bordure); padding-top: 10px;
}
.formules-vehicule li { display: flex; justify-content: space-between; gap: 10px; color: var(--texte-doux); }
.formules-vehicule strong { color: var(--vert); }
.lien-question { display: block; text-align: center; font-size: 12.5px; margin-top: 8px; color: var(--texte-doux); }

/* Montants : aussi definis dans admin.css, repris ici pour les pages publiques. */
.totaux { margin-top: 12px; display: grid; gap: 7px; font-size: 14px; }
.totaux > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.totaux small { color: var(--texte-faible); font-weight: 400; }
.total-final { border-top: 1px solid var(--bordure); padding-top: 9px; font-size: 16px; }
.total-final strong { color: var(--orange-fonce); font-size: 20px; }

.page-reservation { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.resa-principal {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 22px;
}
.resa-vehicule { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.resa-vehicule img { width: 130px; height: 90px; object-fit: contain; flex-shrink: 0; }
.resa-vehicule h1 { font-size: 22px; margin: 0 0 4px; color: var(--marine); }

/* Tarifs par duree, pour information : le bon tarif s'applique seul selon
   les dates choisies (plus de choix de formule depuis le 19/09). */
.tarifs-duree {
  background: var(--fond); border-radius: var(--rayon); padding: 12px 14px; margin-bottom: 18px;
}
.tarifs-duree ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: 13.5px; }
.tarifs-duree li { display: flex; justify-content: space-between; gap: 12px; }
.tarifs-duree li span { color: var(--texte-doux); }
.tarifs-duree li strong { color: var(--vert); text-align: right; }
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.formule {
  border: 1.5px solid var(--bordure); border-radius: var(--rayon); padding: 12px;
  display: grid; gap: 2px; cursor: pointer; background: #fff; position: relative;
}
.formule input { position: absolute; opacity: 0; pointer-events: none; }
.formule:hover { border-color: #B9C8DC; }
.formule.choisi { border-color: var(--vert); background: var(--vert-pale); }
.formule:focus-within { outline: 2px solid var(--bleu); outline-offset: 2px; }
.formule-titre { font-weight: 700; color: var(--marine); }
.formule-sous { font-size: 12px; color: var(--texte-faible); }
.formule-prix { font-weight: 700; color: var(--orange-fonce); margin-top: 4px; }

/* Calendrier : deux mois cote a cote, un seul sur telephone. */
.calendrier { position: relative; }
.cal-nav { position: absolute; top: -2px; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.cal-nav button {
  pointer-events: auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--bordure); background: #fff; font-size: 20px; line-height: 1;
  color: var(--marine); cursor: pointer;
}
.cal-nav button:disabled { opacity: .35; cursor: default; }
.cal-mois-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cal-titre { text-align: center; font-weight: 700; color: var(--marine); text-transform: capitalize; height: 32px; line-height: 32px; }
.cal-semaine, .cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-semaine span { text-align: center; font-size: 11.5px; color: var(--texte-faible); padding: 6px 0; }
.cal-jour {
  aspect-ratio: 1; border: none; background: none; font-family: inherit; font-size: 13.5px;
  color: var(--texte); cursor: pointer; border-radius: 0; position: relative;
}
.cal-jour:hover:not(:disabled) { background: var(--bleu-pale); border-radius: 6px; }
.cal-jour.aujourdhui { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cal-jour.passe { color: #C3CCD8; cursor: default; }
.cal-jour.pris { color: #B4BFCD; cursor: not-allowed; text-decoration: line-through; background: #F1F3F6; }
.cal-jour.selection { background: var(--vert-pale); color: var(--marine); }
.cal-jour.debut, .cal-jour.fin { background: var(--vert); color: #fff; font-weight: 700; }
.cal-jour.debut { border-radius: 6px 0 0 6px; }
.cal-jour.fin { border-radius: 0 6px 6px 0; }
.cal-jour.debut.fin { border-radius: 6px; }
.legende-calendrier { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--texte-doux); margin: 12px 0 0; }
.pastille-jour { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--bordure); }
.pastille-jour.libre { background: #fff; }
.pastille-jour.pris { background: #F1F3F6; }
.pastille-jour.choisi { background: var(--vert); border-color: var(--vert); }
/* Jour du retour : retenu pour la voiture, mais pas facturé (27/09). */
.cal-jour.restitution:not(.pris):not(.passe) {
  background: repeating-linear-gradient(45deg, var(--vert-pale) 0 5px, #fff 5px 10px);
  color: var(--marine); font-weight: 600; border-radius: 6px;
}
.pastille-jour.restitution {
  background: repeating-linear-gradient(45deg, var(--vert-pale) 0 4px, #fff 4px 8px);
  border-color: var(--vert);
}

/* Heure de prise en charge */
.select-heure {
  padding: 11px 13px; border: 1.5px solid var(--bordure); border-radius: var(--rayon);
  font-size: 15px; font-family: inherit; background: var(--blanc); color: var(--texte); min-width: 130px;
}
.select-heure:focus { outline: none; border-color: var(--bleu); }
.resa-tolerance { font-size: 12px; color: var(--texte-doux); margin: 6px 0 0; }

.option-chauffeur {
  display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--bordure);
  border-radius: var(--rayon); padding: 12px 14px; cursor: pointer; background: #fff;
}
.option-chauffeur:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); }
.option-chauffeur input { width: 18px; height: 18px; accent-color: var(--vert); }
.option-chauffeur span { display: grid; }
.option-chauffeur small { color: var(--texte-doux); }

/* Conditions à cocher avant de réserver et avant de déclarer le paiement
   (demande de la cliente, 25/09) : elle veut être sûre qu'elles sont lues. */
/* Sélecteur à deux classes : .champ > label met les intitulés en majuscules,
   ce qui rendrait la phrase illisible. */
.champ > .condition-a-cocher, .condition-a-cocher {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--texte);
  background: var(--blanc); border: 1.5px solid var(--bordure); border-radius: var(--rayon);
  padding: 12px 14px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.45;
}
.condition-a-cocher:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); }
.condition-a-cocher input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--vert); }

.resa-recap { position: sticky; top: 76px; }
.resa-vide { font-size: 13.5px; color: var(--texte-faible); margin: 0 0 6px; }
.resa-dates { font-size: 14px; margin: 0; line-height: 1.6; }
.resa-duree {
  display: inline-block; margin-left: 4px; background: var(--marine); color: #fff;
  border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 700;
}
.form-resa { border-top: 1px solid var(--bordure); margin-top: 16px; padding-top: 14px; }

.fiche-resa { margin: 0 0 6px; display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; font-size: 14px; }
.fiche-resa dt { color: var(--texte-faible); }
.fiche-resa dd { margin: 0; }

@media (max-width: 900px) {
  .page-reservation { grid-template-columns: 1fr; }
  .resa-recap { position: static; }
}
@media (max-width: 620px) {
  .cal-mois-liste { grid-template-columns: 1fr; }
  .cal-mois:nth-child(2) { display: none; }   /* un mois a la fois sur telephone */
  .resa-principal { padding: 16px; }
  .resa-vehicule img { width: 96px; height: 66px; }
  .resa-vehicule h1 { font-size: 18px; }
}

/* -----------------------------------------------------------------------------
   Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .barre-fixe-menu { display: none; }   /* la place manque, on garde l'essentiel */
}

@media (max-width: 980px) {
  .heros .conteneur { grid-template-columns: 1fr; }
  .heros-visuel { max-width: 380px; }
  /* Une colonne : la diagonale n'a plus de sens et couperait le texte en
     travers. Les deux blocs s'empilent, coupe droite, et le voile devient
     vertical pour que le texte reste lisible sur toute la largeur. */
  .heros-double .conteneur { grid-template-columns: 1fr; }
  .heros-double .mise-en-avant:first-child,
  .heros-double .mise-en-avant:last-child {
    clip-path: none; margin-left: 0;
    /* Bloc plus haut, et le texte descend en bas : la moitie superieure
       reste degagee pour qu'on voie la voiture et les dosettes. */
    /* La photo est plafonnee a 520px de large, donc 390px de haut au maximum
       (cadrage 4:3). Sans ce plafond, elle grandit avec l'ecran alors que le
       bloc ne bouge pas, et le sujet finit coupe par le voile. */
    min-height: 580px;
    padding: 30px 20px 34px;
    align-items: flex-end;
  }
  /* La location passe en premier sur petit ecran : c'est le service que la
     cliente cherche en mobilite, les dosettes se commandent plus posement.
     L'ordre du HTML ne bouge pas, seul l'affichage est inverse. */
  .heros-double .mise-en-avant:last-child  { order: 1; }
  .heros-double .mise-en-avant:first-child { order: 2; border-top: 4px solid var(--jaune); }
  .heros-double .mise-en-avant:last-child  { border-top: none; }

  /* Versions recadrees sur le sujet : les fonds panoramiques du bureau sont
     trop zoomes sur une colonne etroite, la voiture et les dosettes en
     sortaient. La photo occupe la moitie haute, le texte se pose sur le bleu
     en dessous : plus aucun recouvrement. */
  .heros-double .mise-en-avant:last-child {
    background-image: url('../images/fond-location-mobile.jpg');
  }
  .heros-double .mise-en-avant:first-child {
    background-image: url('../images/fond-lessive-mobile.jpg');
  }
  .heros-double .mise-en-avant:first-child,
  .heros-double .mise-en-avant:last-child {
    background-size: min(100%, 520px) auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: var(--marine);
  }

  /* Le voile ne couvre plus la photo : transparent sur le sujet, il devient
     opaque juste avant le texte pour assurer le raccord avec le bleu. */
  .mise-en-avant::before,
  .heros-double .mise-en-avant:last-child::before {
    /* Bornes en pixels et non en pourcentage : la photo mesure au plus 390px
       de haut quelle que soit la largeur d'ecran, le raccord tombe donc
       toujours au bon endroit. */
    background: linear-gradient(180deg,
      rgba(11, 46, 107, 0)   0px,
      rgba(11, 46, 107, 0)  300px,
      rgba(11, 46, 107, .7) 360px,
      var(--marine)         400px,
      var(--marine)         100%);
  }

  .heros-double .mise-en-avant:last-child .mise-en-avant-texte { margin-left: 0; text-align: left; }
  .heros-double .mise-en-avant:last-child .puces-heros { justify-content: flex-start; }
  .mise-en-avant-texte { max-width: none; }
  .fiche { grid-template-columns: 1fr; }
  .arguments .conteneur { grid-template-columns: repeat(2, 1fr); }
  .pied .conteneur { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .entete .conteneur { flex-wrap: wrap; gap: 12px; }
  .recherche { order: 3; flex-basis: 100%; max-width: none; }
  .actions-entete { gap: 14px; }
  .lien-action span { display: none; }
  .heros h1 { font-size: 26px; }
  .grille-produits { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
  .section { padding: 24px 0; }
}

@media (max-width: 560px) {
}

@media (max-width: 380px) {
  .recherche button { padding-left: 14px; padding-right: 14px; }
  .recherche input { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 480px) {
  .arguments .conteneur { grid-template-columns: 1fr; }
  .pied .conteneur { grid-template-columns: 1fr; }
  .logo img { height: 42px; }
}

/* -----------------------------------------------------------------------------
   Page introuvable (06/10)
   -------------------------------------------------------------------------- */
.page-404 { padding: 40px 20px 60px; }
.page-404 .code-404 {
  font-size: 76px; font-weight: 800; line-height: 1; margin: 0 0 6px;
  color: var(--bleu-pale); letter-spacing: 2px;
}
.page-404 h1 { font-size: 26px; color: var(--marine); margin: 0 0 10px; }
.page-404 > p { color: var(--texte-doux); max-width: 460px; margin: 0 auto 20px; }
.actions-404 { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.aide-404 { font-size: 13px; color: var(--texte-faible); margin-top: 22px; }

/* -----------------------------------------------------------------------------
   Pages de texte : confidentialité, conditions de vente (06/10)
   -------------------------------------------------------------------------- */
.page-texte {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 30px 34px; max-width: 820px; margin: 0 auto; line-height: 1.65;
}
.page-texte h1 { font-size: 27px; color: var(--marine); margin: 0 0 4px; }
.page-texte h2 { font-size: 17px; color: var(--marine); margin: 26px 0 8px; }
.page-texte p, .page-texte li { color: var(--texte-doux); font-size: 14.5px; }
.page-texte ul { padding-left: 20px; }
.page-texte li { margin-bottom: 6px; }
.page-texte .maj { font-size: 12.5px; color: var(--texte-faible); margin: 0 0 18px; }
.tableau-texte { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
.tableau-texte th, .tableau-texte td { border: 1px solid var(--bordure); padding: 9px 11px; text-align: left; vertical-align: top; }
.tableau-texte th { background: var(--bleu-pale); color: var(--marine); font-size: 13px; }
.tableau-texte td { color: var(--texte-doux); }
@media (max-width: 600px) { .page-texte { padding: 22px 18px; } }