/* ===== Composants : boutons, cartes, formulaires, badges, alertes, emplacements photos ===== */

/* --- Emplacements photos (img1 … img65) --- */
.ph { position: relative; margin: 0; background: repeating-linear-gradient(135deg, var(--fond-2) 0 12px, #ebe5dc 12px 24px); border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; }
.ph::after { content: attr(data-img); position: absolute; inset: 0; display: grid; place-items: center; font: 600 var(--t-s)/1 var(--police-texte); color: var(--encre-3); letter-spacing: .05em; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph-carre { aspect-ratio: 1; }
.ph-large { aspect-ratio: 16 / 7; }
.ph-bandeau { aspect-ratio: 1920 / 500; border-radius: 0; }

/* --- Boutons --- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--braise); color: #fff; border: 2px solid var(--braise); border-radius: var(--rayon-rond); padding: .75rem 1.4rem; font-weight: 600; font-size: var(--t-s); text-decoration: none; cursor: pointer; transition: var(--transition); line-height: 1.2; }
.bouton:hover { background: var(--braise-fonce); border-color: var(--braise-fonce); color: #fff; }
.bouton-secondaire { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton-secondaire:hover { background: var(--encre); color: #fff; border-color: var(--encre); }
.bouton-foret { background: var(--foret); border-color: var(--foret); }
.bouton-foret:hover { background: var(--foret-fonce); border-color: var(--foret-fonce); }
.bouton-clair { background: #fff; color: var(--encre); border-color: #fff; }
.bouton-clair:hover { background: transparent; color: #fff; }
.bouton-petit { padding: .45rem 1rem; font-size: var(--t-xs); }
.bouton-plein { width: 100%; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.lien-bouton { background: none; border: 0; padding: 0; color: var(--foret); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* --- Carte produit --- */
.carte-produit { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition); }
.carte-produit:hover { box-shadow: var(--ombre-l); transform: translateY(-2px); }
.carte-produit[hidden] { display: none; }
.carte-image { position: relative; display: block; }
.carte-image .ph { border-radius: 0; aspect-ratio: 1; }
.etiquette { position: absolute; top: .8rem; left: .8rem; z-index: 2; background: var(--braise); color: #fff; font-size: var(--t-xs); font-weight: 700; padding: .25rem .65rem; border-radius: var(--rayon-rond); }
.carte-corps { padding: var(--e-5); display: flex; flex-direction: column; flex: 1; }
.carte-corps h3 { font-size: var(--t-l); margin-bottom: var(--e-1); }
.carte-corps h3 a { color: var(--encre); text-decoration: none; }
.carte-sous-titre { color: var(--encre-2); font-size: var(--t-s); margin-bottom: var(--e-3); }
.carte-pied { margin-top: auto; }
.carte-prix { margin: var(--e-3) 0 var(--e-1); display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.carte-prix strong { font-size: var(--t-xl); font-family: var(--police-titre); }
.carte-prix small { color: var(--encre-2); }
.prix-unite { font-size: var(--t-xs); color: var(--encre-2); background: var(--fond-2); padding: .1rem .5rem; border-radius: var(--rayon-rond); }
.dispo { font-size: var(--t-xs); color: var(--encre-2); margin-bottom: var(--e-4); display: flex; align-items: center; gap: .4rem; }
.point-vert { width: 8px; height: 8px; border-radius: 50%; background: var(--succes); display: inline-block; }

.puces-infos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.puces-infos li { font-size: var(--t-xs); background: var(--foret-clair); color: var(--foret-fonce); padding: .2rem .6rem; border-radius: var(--rayon-rond); }

/* --- Cartes génériques --- */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l); padding: var(--e-5); }
.carte-ombre { box-shadow: var(--ombre); }

/* --- Formulaires --- */
.champ { margin-bottom: var(--e-4); }
.champ label { display: block; font-weight: 600; font-size: var(--t-s); margin-bottom: .35rem; }
.champ .aide-champ { font-size: var(--t-xs); color: var(--encre-2); margin-top: .3rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--foret); box-shadow: 0 0 0 3px var(--foret-clair); }
textarea { min-height: 130px; resize: vertical; }
.champs-2 { display: grid; gap: 0 var(--e-4); grid-template-columns: 1fr 1fr; }
.case { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-s); margin-bottom: var(--e-3); }
.case input { margin-top: .25rem; accent-color: var(--foret); }
@media (max-width: 560px) { .champs-2 { grid-template-columns: 1fr; } }

/* --- Quantité --- */
.quantite { display: inline-flex; border: 1px solid var(--bordure); border-radius: var(--rayon-rond); overflow: hidden; background: var(--surface); }
.quantite button { width: 40px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; }
.quantite button:hover { background: var(--fond-2); }
.quantite input { width: 54px; text-align: center; border: 0; padding: .55rem 0; border-radius: 0; -moz-appearance: textfield; }
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* --- Badges et statuts --- */
.badge { display: inline-block; padding: .2rem .65rem; border-radius: var(--rayon-rond); font-size: var(--t-xs); font-weight: 600; background: var(--fond-2); color: var(--encre); }
.statut-en_attente { background: #fef3c7; color: #92400e; }
.statut-payee { background: #dbeafe; color: #1e40af; }
.statut-expediee { background: #ede9fe; color: #5b21b6; }
.statut-livree { background: #dcfce7; color: #166534; }
.statut-annulee { background: #fee2e2; color: #991b1b; }

/* --- Alertes --- */
.alerte { max-width: var(--largeur); margin: var(--e-4) auto; padding: var(--e-3) var(--e-4); border-radius: var(--rayon); font-size: var(--t-s); border-left: 4px solid; }
.alerte-succes { background: #ecfdf5; border-color: var(--succes); color: #14532d; }
.alerte-erreur { background: #fef2f2; border-color: var(--erreur); color: #7f1d1d; }
.alerte-info { background: var(--foret-clair); border-color: var(--foret); color: var(--foret-fonce); }
.alerte-attention { background: #fffbeb; border-color: var(--alerte); color: #78350f; }

/* --- Fil d'Ariane --- */
.ariane { font-size: var(--t-xs); color: var(--encre-2); padding: var(--e-4) 0; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.ariane li + li::before { content: '/'; margin-right: .4rem; color: var(--encre-3); }
.ariane a { color: var(--encre-2); }

/* --- Bandeau de page --- */
.bandeau-page { position: relative; color: #fff; background: var(--foret-fonce); overflow: hidden; }
.bandeau-page .ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; opacity: .55; }
.bandeau-page .ph::after { color: rgba(255,255,255,.6); }
.bandeau-page .conteneur { position: relative; z-index: 2; padding-top: var(--e-8); padding-bottom: var(--e-7); }
.bandeau-page h1 { color: #fff; margin-bottom: var(--e-2); text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.bandeau-page p { max-width: 640px; font-size: var(--t-l); margin: 0; }

/* --- Accordéon (FAQ) --- */
.accordeon details { border-bottom: 1px solid var(--bordure); }
.accordeon summary { cursor: pointer; padding: var(--e-4) 2rem var(--e-4) 0; font-weight: 600; list-style: none; position: relative; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--braise); transition: var(--transition); }
.accordeon details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.accordeon details > div { padding: 0 0 var(--e-4); color: var(--encre-2); }

/* --- Tableaux --- */
.tableau { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-l); overflow: hidden; }
.tableau-defile { overflow-x: auto; }
.tableau th, .tableau td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--bordure); font-size: var(--t-s); vertical-align: top; }
.tableau th { background: var(--fond-2); font-weight: 600; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .nombre { text-align: right; white-space: nowrap; }

/* --- Étoiles / notes sur 5 --- */
.note { display: inline-flex; gap: 3px; }
.note i { width: 12px; height: 12px; border-radius: 50%; background: var(--bordure); }
.note i.plein { background: var(--braise); }

/* --- Bouton d'aide flottant --- */
.aide { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.aide-bouton { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--foret); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombre-l); transition: var(--transition); }
.aide-bouton:hover { background: var(--foret-fonce); transform: scale(1.05); }
.aide-bouton .aide-fermer, .aide.ouvert .aide-ouvrir { display: none; }
.aide.ouvert .aide-fermer { display: block; }
.aide-choix { background: var(--surface); border-radius: var(--rayon-l); box-shadow: var(--ombre-l); padding: var(--e-4); width: 270px; animation: monte .2s ease; }
.aide-titre { font-weight: 700; margin-bottom: var(--e-3); }
.aide-titre small { display: block; font-weight: 400; color: var(--encre-2); font-size: var(--t-xs); }
.aide-option { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); text-decoration: none; color: var(--encre); cursor: pointer; text-align: left; margin-bottom: .5rem; }
.aide-option:hover { border-color: var(--foret); color: var(--encre); }
.aide-option small { display: block; color: var(--encre-2); font-size: var(--t-xs); }
.aide-icone { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.aide-whatsapp .aide-icone { background: #25d366; }
.aide-chat .aide-icone { background: var(--braise); }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }

/* --- Bandeau cookies --- */
.cookies { position: fixed; left: 1rem; bottom: 1rem; max-width: 460px; background: var(--encre); color: #eee; padding: var(--e-4); border-radius: var(--rayon-l); z-index: 85; font-size: var(--t-s); box-shadow: var(--ombre-l); }
.cookies a { color: #fff; }
.cookies-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.cookies .bouton-secondaire { color: #fff; border-color: #fff; }
@media (max-width: 560px) { .cookies { right: 1rem; bottom: 5.5rem; } }