@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --noir:#0a0c0b; --vert:#0f6e52; --vert-clair:#16a878; --vert-fonce:#0a4d3a; --or:#c9a24b; --or-clair:#e8cd8a;
  --creme:#f6f1e6; --creme-fonce:#ece2ca; --gris-texte:#6f766f; --border:rgba(0,0,0,0.08);
  --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body { font-family:'Inter',Arial,sans-serif; color:var(--noir); background:var(--creme); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; max-width:100vw; }
h1,h2,h3,.font-display { font-family:'Playfair Display',serif; letter-spacing:-0.01em; }
::selection { background:var(--or); color:var(--noir); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--creme-fonce); }
::-webkit-scrollbar-thumb { background:var(--vert-fonce); border-radius:10px; }
.container { max-width:1240px; margin:0 auto; padding:0 24px; }
img { max-width:100%; height:auto; }

/* ================= TRANSITIONS DE PAGE ================= */
body.page-exit { opacity:0; transition:opacity .4s var(--ease); }
body.page-enter { opacity:0; }
body.page-entered { opacity:1; transition:opacity .55s var(--ease); }
[data-reveal].in-view { opacity:1; transform:translateY(0); }
[data-reveal-delay="1"] { transition-delay:.12s; }
[data-reveal-delay="2"] { transition-delay:.24s; }
[data-reveal-delay="3"] { transition-delay:.36s; }
[data-reveal-delay="4"] { transition-delay:.48s; }

/* ================= HEADER ================= */
.top-bar { background:var(--noir); color:rgba(255,255,255,0.65); font-size:.78rem; letter-spacing:.03em; }
.top-bar-inner { display:flex; justify-content:space-between; padding:9px 24px; text-transform:uppercase; }
.site-header { position:sticky; top:0; z-index:999; }
.main-nav { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; background:rgba(246,241,230,0.9); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid var(--border); transition:padding .35s var(--ease-soft), box-shadow .35s var(--ease-soft); }
.main-nav.scrolled { padding:10px 24px; box-shadow:0 8px 30px rgba(0,0,0,0.07); }

.logo { font-family:'Playfair Display',serif; font-weight:800; font-size:1.4rem; color:var(--noir); text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; margin-right:20px; overflow:hidden; text-overflow:ellipsis; }
.logo span { color:var(--vert); font-style:italic; font-weight:600; }
.nav-links { display:flex; align-items:center; gap:20px; list-style:none; flex-wrap:wrap; }
.nav-links a { position:relative; text-decoration:none; color:var(--noir); font-weight:500; font-size:.80rem; padding-bottom:4px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--or); transition:width .35s var(--ease); }
.nav-links a:hover::after { width:100%; }
.nav-cart-badge { background:var(--vert); color:#fff; border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; }

.nav-actions { display:flex; align-items:center; gap:18px; margin-left:20px; flex-shrink:0; }
.cart-link { background:var(--vert-fonce); color:#fff; padding:10px 22px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.85rem; transition:background .35s var(--ease-soft), transform .3s var(--ease-soft); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.cart-link:hover { background:var(--vert); transform:translateY(-2px); }

/* ================= HERO ================= */
.hero { position:relative; overflow:hidden; min-height:88vh; display:flex; align-items:center; background:radial-gradient(circle at 20% 20%, #123a2d 0%, var(--noir) 55%), var(--noir); color:#fff; padding:60px 0;}
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(201,162,75,0.12), transparent 60%); animation:heroShift 14s ease-in-out infinite alternate; }
@keyframes heroShift { 0%{transform:translate(-4%,-2%) scale(1);} 100%{transform:translate(4%,3%) scale(1.08);} }
.hero-content { max-width: 720px; margin: 0 auto; text-align: center;}
.hero-eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; color:var(--or-clair); margin-bottom:18px; opacity:0; animation:fadeUp .8s var(--ease) .1s forwards; }
.hero h1 { font-size:clamp(2.6rem,6vw,4.6rem); font-weight:800; line-height:1.05; margin-bottom:22px; opacity:0; animation:fadeUp .9s var(--ease) .25s forwards; }
.hero p { font-size:1.15rem; color:rgba(255,255,255,0.75); margin-bottom:34px; max-width:540px; opacity:0; animation:fadeUp .9s var(--ease) .4s forwards; text-align: center; margin : 0 auto; }
.hero .btn { margin-top: 28px;opacity:0; animation:fadeUp .9s var(--ease) .55s forwards; }
@keyframes fadeUp { from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }

/* ================= PHOTOS PREMIUM ================= */
.photo-luxe { position:relative; overflow:hidden; border-radius:22px; box-shadow:0 30px 60px rgba(0,0,0,0.18); }
.photo-luxe img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05); transition:transform .8s var(--ease); }
.photo-luxe:hover img { transform:scale(1.06); }
.photo-luxe::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,11,0) 40%, rgba(10,12,11,0.55) 100%); pointer-events:none; }
.photo-luxe .photo-caption { position:absolute; left:22px; bottom:18px; color:#fff; font-weight:600; z-index:2; }
.photo-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.photo-grid .photo-luxe:first-child { grid-row:span 2; min-height:420px; }
.photo-grid .photo-luxe { min-height:200px; }

/* ================= BOUTONS ================= */
.btn { position:relative; display:inline-flex; align-items:center; gap:10px; padding:15px 34px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem; border:none; cursor:pointer; overflow:hidden; transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft); }
.btn::before { content:''; position:absolute; inset:0; background:var(--vert-clair); transform:translateX(-105%); transition:transform .45s var(--ease); z-index:0; }
.btn span, .btn { z-index:1; }
.btn-primary { background:var(--or); color:var(--noir); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(201,162,75,0.35); color:var(--noir); }
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary > * { position:relative; }
.btn-secondary { background:transparent; color:var(--noir); border:1.5px solid var(--noir); margin-top:10px; }
.btn-secondary:hover { background:var(--noir); color:#fff; transform:translateY(-2px); }
.btn-link { background:none; border:none; color:var(--vert-fonce); font-weight:600; cursor:pointer; padding:0; text-decoration:underline; font-size:.88rem; }
.btn-link:hover { color:var(--vert); }
.btn-small { padding:9px 20px; font-size:.82rem; }
.btn-danger { background:#c0392b !important; color:#fff !important; }
.btn-danger:hover { background:#a53125 !important; color:#fff !important; }
.btn-danger::before { background:#d9534f !important; }

/* ================= SECTIONS ================= */
.section { padding:90px 24px; }
.section-title { font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:40px; color:var(--noir); position:relative; display:inline-block; font-weight:700; }
.section-title::after { content:''; display:block; width:60px; height:3px; background:var(--or); margin-top:14px; }
.section-title.center { text-align:center; display:block; margin-left:auto; margin-right:auto; }
.section-title.center::after { margin-left:auto; margin-right:auto; }
.section-creme { background:linear-gradient(160deg, var(--creme) 0%, var(--creme-fonce) 100%); }
.section-creme-inverse { background:linear-gradient(160deg, var(--creme-fonce) 0%, var(--creme) 100%); }
.section-vert-tint { background:linear-gradient(150deg, rgba(15,110,82,0.10) 0%, var(--creme) 55%, var(--creme-fonce) 100%); }

.grid { display:grid; gap:26px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

.card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:30px; box-shadow:0 4px 20px rgba(0,0,0,0.05); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.card:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,0.1); }
.card h3 { color:var(--noir); margin-bottom:12px; font-size:1.15rem; }
.card .date { color:var(--gris-texte); font-size:.8rem; margin-bottom:10px; text-transform:uppercase; }

.horaires-centre-wrap { display:flex; justify-content:center; }
.horaires-card { background:#fff; border-radius:22px; padding:44px 52px; box-shadow:0 20px 50px rgba(0,0,0,0.08); text-align:center; max-width:480px; }
.horaires-card .horaire-icone { font-size:2.4rem; margin-bottom:14px; }
.horaires-card .horaire-ligne { display:flex; justify-content:space-between; gap:30px; padding:14px 0; border-bottom:1px solid var(--border); font-size:1.05rem; }
.horaires-card .horaire-ligne:last-child { border-bottom:none; }
.horaires-card .horaire-ligne span:first-child { font-weight:600; }

.zone-list { list-style:none; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.zone-list li { background:var(--vert-fonce); color:#fff; padding:10px 22px; border-radius:999px; font-size:.88rem; transition:background .35s, transform .35s; }
.zone-list li:hover { background:var(--vert); transform:translateY(-3px); }

.service-card { overflow:hidden; padding:0; display:flex; flex-direction:column; }
.service-card .service-img { height:190px; background:var(--creme-fonce); overflow:hidden; }
.service-card .service-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-img img { transform:scale(1.08); }
.service-card .service-icon { height:190px; display:flex; align-items:center; justify-content:center; font-size:3rem; background:linear-gradient(140deg, var(--vert-fonce), var(--vert)); color:#fff; }
.service-card .service-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.service-card h3 { margin-bottom:10px; }
.service-card p { color:var(--gris-texte); font-size:.92rem; flex:1; }

/* ================= FILTRES BOUTIQUE ================= */
.category-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.chip { padding:10px 20px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:.85rem; font-weight:600; cursor:pointer; letter-spacing:.02em; transition:all .3s var(--ease-soft); }
.chip:hover { border-color:var(--or); color:var(--vert-fonce); transform:translateY(-2px); }
.chip.active { background:var(--vert-fonce); color:#fff; border-color:var(--vert-fonce); }

.filters-bar { background:#fff; border-radius:18px; padding:22px 26px; margin-bottom:34px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; box-shadow:0 6px 24px rgba(0,0,0,0.05); }
.filters-bar .filter-group { display:flex; flex-direction:column; gap:6px; }
.filters-bar .filter-group label { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gris-texte); font-weight:700; }
.filters-bar select, .filters-bar input { padding:12px 16px; border:1px solid var(--border); border-radius:10px; font-size:.92rem; background:var(--creme); min-width:190px; }
.filters-bar select:focus, .filters-bar input:focus { outline:none; border-color:var(--or); box-shadow:0 0 0 3px rgba(201,162,75,0.18); background:#fff; }
.filters-bar .filter-search { flex:1; min-width:220px; }

.brand-header { display:flex; align-items:center; gap:16px; margin:50px 0 22px; padding-bottom:14px; border-bottom:2px solid var(--or); }
.brand-header:first-of-type { margin-top:0; }
.brand-header a.brand-link { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--noir); }
.brand-header .brand-logo { height:38px; max-width:120px; object-fit:contain; }
.brand-header .brand-name { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; letter-spacing:.02em; }
.brand-header .brand-name.fallback { text-transform:uppercase; letter-spacing:.12em; font-size:1.1rem; }

/* ================= CARTES PRODUIT (catalogue) ================= */
.produit-card { position:relative; overflow:hidden; padding:0; cursor:pointer; }
.produit-card .img-wrap { overflow:hidden; border-radius:18px 18px 0 0; height:220px; background:var(--creme-fonce); }
.produit-card img { width:100%; height:220px; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.produit-card:hover img { transform:scale(1.08); }
.produit-card .card-body { padding:22px; }
.produit-card .badge-ordonnance { display:inline-block; background:#c0392b; color:#fff; font-size:.7rem; padding:3px 10px; border-radius:999px; margin-bottom:6px; }

/* NOTE : cette regle generique s'applique a TOUS les boutons dans une
   carte produit (le bouton "Voir la fiche produit" notamment). Elle
   ne doit JAMAIS s'appliquer au coeur favori : voir la regle dediee
   plus bas ".produit-card .card-favori-btn" qui la neutralise grace
   a une specificite CSS plus forte (2 classes > 1 classe + 1 element). */
.produit-card button { width:100%; margin-top:14px; justify-content:center; }
.catalogue-notice { background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px 26px; margin-bottom:0; text-align:center; font-size:.95rem; }
.catalogue-empty { text-align:center; color:var(--gris-texte); padding:40px 0; }

/* ================= FICHE PRODUIT ================= */
.produit-card-panel { background:#fff; border-radius:26px; padding:44px; box-shadow:0 24px 60px rgba(0,0,0,0.09); border:1px solid var(--border); }
@media (max-width:600px) { .produit-card-panel { padding:26px; } }

.produit-detail { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.produit-photos { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.produit-photos img { width:100%; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.08); object-fit:cover; aspect-ratio:1/1; background:var(--creme-fonce); }

.produit-infos .brand-link-detail { display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:16px; }
.produit-infos .brand-link-detail img { height:34px; max-width:110px; object-fit:contain; }
.produit-infos .brand-link-detail .brand-name-text { font-family:'Playfair Display',serif; font-weight:700; font-size:1.1rem; color:var(--vert-fonce); text-transform:uppercase; letter-spacing:.08em; }
.produit-infos h1 { font-size:2rem; margin-bottom:14px; }

.produit-specs { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 20px; }
.spec-pill { background:var(--creme); border-radius:10px; padding:10px 16px; font-size:.85rem; }
.spec-pill span { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gris-texte); margin-bottom:2px; font-weight:700; }
.spec-pill a.meta-link { color:var(--vert-fonce); font-weight:600; text-decoration:none; }
.spec-pill a.meta-link:hover { color:var(--vert); }

.produit-infos .bloc-usage { background:var(--creme); border:none; border-radius:16px; padding:24px; margin-top:24px; }
.produit-infos .bloc-usage h3 { margin-bottom:10px; font-size:1.05rem; }

.btn-favori { background:#fff; border:1.5px solid var(--noir); color:var(--noir); }
.btn-favori:hover { background:var(--noir); color:#fff; }
.btn-favori.active { background:#c0392b; border-color:#c0392b; color:#fff; }
.btn-favori.active:hover { background:#a53125; }
.btn-favori-top { margin:18px 0 6px; }

.produit-note-discrete { font-size:.82rem; color:var(--gris-texte); margin-top:22px; font-style:italic; }

@media (max-width:900px) { .produit-detail { grid-template-columns:1fr; } }

/* ================= AUTH / MON COMPTE ================= */
.notice { background:#fdf6e6; border-left:3px solid var(--or); padding:16px 18px; margin:18px 0; font-size:.9rem; border-radius:0 10px 10px 0; }
.auth-page-wrap { min-height:62vh; display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.auth-card-outer { width:100%; max-width:460px; }
.auth-tabs { display:flex; gap:10px; margin-bottom:26px; justify-content:center; }
.tab-btn { padding:12px 26px; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-weight:600; }
.tab-btn.active { background:var(--vert-fonce); color:#fff; border-color:var(--vert-fonce); }
.auth-form { width:100%; display:flex; flex-direction:column; gap:14px; background:#fff; padding:38px; border-radius:22px; border:1px solid var(--border); box-shadow:0 20px 50px rgba(0,0,0,0.08); }
.auth-form h2 { text-align:center; margin-bottom:6px; }
.auth-form input, .auth-form textarea, .auth-form select { padding:14px 16px; border:1px solid var(--border); border-radius:10px; font-size:1rem; background:var(--creme); }
.auth-form input:focus, .auth-form textarea:focus, .auth-form select:focus { outline:none; border-color:var(--or); box-shadow:0 0 0 3px rgba(201,162,75,0.18); background:#fff; }
.forgot-link-wrap { text-align:right; margin-top:-6px; }
.error-msg { color:#c0392b; text-align:center; }
.success-msg { color:var(--vert); text-align:center; }
.temp-password-box { background:var(--creme-fonce); border-radius:10px; padding:14px; text-align:center; font-weight:700; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-info h3 { margin-bottom:8px; margin-top:22px; }
.contact-info h3:first-child { margin-top:0; }

/* ================= TELECONSULTATION ================= */
.tele-intro { max-width:850px; margin:0 auto 30px; padding:28px 32px; border-radius:18px; background:linear-gradient(135deg, rgba(15,110,82,.1), rgba(246,241,230,.9)); border:1px solid rgba(15,110,82,.15); }
.tele-intro h2 { margin-bottom:10px; }
.tele-intro p { color:var(--gris-texte); }
.tele-intro p + p { margin-top:8px; }

.tele-wrap { display:grid; grid-template-columns:300px 1fr; gap:30px; background:#fff; border-radius:22px; padding:34px; border:1px solid var(--border); box-shadow:0 20px 50px rgba(0,0,0,0.06); }
.tele-dates { display:flex; flex-direction:column; gap:8px; max-height:480px; overflow-y:auto; }
.tele-date-btn { text-align:left; padding:12px 16px; border-radius:10px; border:1px solid var(--border); background:var(--creme); cursor:pointer; font-weight:600; }
.tele-date-btn.active, .tele-date-btn:hover { background:var(--vert-fonce); color:#fff; }
.tele-date-btn.jour-bloque { background:rgba(192,57,43,0.15); color:#c0392b; border-color:#c0392b; }
.tele-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:12px; align-content:start; }
.tele-slot-btn { padding:12px 8px; border-radius:10px; border:1px solid var(--border); background:var(--creme); cursor:pointer; font-weight:600; text-align:center; transition:background .3s, color .3s, transform .3s; }
.tele-slot-btn:hover { background:var(--vert); color:#fff; transform:translateY(-2px); }
.tele-slot-btn.selected { background:var(--vert-fonce); color:#fff; }
.tele-slot-btn small { display:block; font-size:.64rem; margin-top:3px; text-transform:uppercase; letter-spacing:.04em; opacity:.75; font-weight:400; }
.tele-slot-btn.admin-slot-disponible { background:var(--creme); color:var(--noir); }
.tele-slot-btn.admin-slot-reserve { background:rgba(15,110,82,0.15); color:var(--vert-fonce); border-color:rgba(15,110,82,0.4); }
.tele-slot-btn.admin-slot-bloque { background:rgba(192,57,43,0.12); color:#c0392b; border-color:rgba(192,57,43,0.4); }
.tele-empty { color:var(--gris-texte); font-style:italic; grid-column:1/-1; }
.rdv-card { display:flex; justify-content:space-between; align-items:center; background:var(--creme); padding:16px 20px; border-radius:12px; margin-bottom:12px; flex-wrap:wrap; gap:10px; }

.rdv-confirm-card { background:#fff; border-radius:20px; padding:30px; margin-top:26px; border:1px solid var(--border); box-shadow:0 20px 50px rgba(0,0,0,0.07); scroll-margin-top:130px; }
.rdv-confirm-card h3 { margin-bottom:6px; }
.rdv-confirm-card .rdv-recap-date { color:var(--vert-fonce); font-weight:700; font-size:1.1rem; margin-bottom:18px; }
.rdv-confirm-card textarea, .rdv-confirm-card input { width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:var(--creme); font-family:inherit; font-size:.95rem; resize:vertical; }
.rdv-confirm-card label { display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gris-texte); font-weight:700; margin-bottom:8px; }

.rdv-detail-box p { margin-bottom:8px; font-size:.92rem; }
.rdv-detail-box p strong { color:var(--noir); }

.dispo-legend { display:flex; gap:18px; margin-bottom:20px; flex-wrap:wrap; font-size:.82rem; }
.dispo-legend span { display:inline-flex; align-items:center; gap:6px; }
.dispo-legend .dot { width:12px; height:12px; border-radius:50%; display:inline-block; }

/* ================= PHARMACIE DE GARDE ================= */
.garde-box { background:linear-gradient(140deg, var(--vert-fonce), var(--vert)); color:#fff; padding:40px; border-radius:22px; text-align:center; }
.garde-box h2 { color:#fff; }
.garde-box .btn-primary { margin-top:20px; }

/* ================= FOOTER ================= */
.site-footer { background:var(--noir); color:rgba(255,255,255,0.75); padding:60px 0 0; margin-top:60px; }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-bottom:40px; }
.footer-grid h3 { color:var(--or); margin-bottom:14px; font-size:1rem; text-transform:uppercase; }
.footer-grid a { color:rgba(255,255,255,0.75); text-decoration:none; }
.footer-grid a:hover { color:var(--or-clair); }
.footer-grid, .footer-grid p, .footer-grid a { overflow-wrap:break-word; word-break:break-word; }
.footer-bottom { text-align:center; padding:20px; background:rgba(255,255,255,0.03); font-size:.8rem; }

/* ================= MENU MOBILE ================= */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; z-index:1001; }
.nav-toggle span { display:block; width:26px; height:2px; background:var(--noir); margin:6px 0; transition:transform .35s var(--ease), opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
body.menu-mobile-ouvert { overflow:hidden; }

/* ================= FAVORIS ================= */
.favoris-actions { display:flex; gap:10px; margin-top:14px; }
.favoris-actions .btn { flex:1; margin-top:0; padding-left:12px; padding-right:12px; justify-content:center; font-size:.85rem; white-space:nowrap; }

/* ================= FORMULAIRE ACTUALITE (admin) ================= */
.actu-lien-group { display:flex; flex-direction:column; gap:10px; }
.actu-lien-group select { padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--creme); font-family:inherit; font-size:.92rem; }

/* ================= FENETRE DE CONFIRMATION ================= */
.modal-overlay { position:fixed; inset:0; background:rgba(10,12,11,0.55); z-index:4000; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box { background:#fff; border-radius:20px; padding:34px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; }
.modal-box h3 { margin-bottom:18px; }
.modal-close { float:right; cursor:pointer; font-size:1.4rem; background:none; border:none; line-height:1; }
.confirm-box { max-width:420px; text-align:center; }
.confirm-message { font-size:1rem; line-height:1.6; margin-bottom:24px; }
.confirm-actions { display:flex; gap:12px; justify-content:center; }
.confirm-actions .btn { margin-top:0; }

/* ================= TOAST DE NOTIFICATION ================= */
.toast-notification {
  position:fixed; top:100px; right:24px; background:var(--noir); color:#fff; padding:15px 22px; border-radius:14px;
  font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:10px; box-shadow:0 16px 40px rgba(0,0,0,0.25);
  opacity:0; transform:translateX(30px); z-index:5000; transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft); max-width:min(90vw, 360px);
}
.toast-notification.visible { opacity:1; transform:translateX(0); }
.toast-notification.toast-success { background:var(--vert-fonce); }
.toast-notification.toast-error { background:#c0392b; }
.toast-icon { font-size:1.1rem; flex-shrink:0; }
@media (max-width:600px) { .toast-notification { top:auto; bottom:20px; right:16px; left:16px; max-width:none; } }

/* ================= AUTOCOMPLETION EMAIL (admin) ================= */
.autocomplete-wrap { position:relative; }
.autocomplete-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.12); z-index:20; max-height:220px; overflow-y:auto; }
.autocomplete-item { padding:10px 14px; cursor:pointer; font-size:.88rem; border-bottom:1px solid var(--border); }
.autocomplete-item:last-child { border-bottom:none; }
.autocomplete-item:hover { background:var(--creme); }
.autocomplete-item strong { display:block; color:var(--noir); }
.autocomplete-item small { color:var(--gris-texte); }

/* ================= PAGE CONTACT ================= */
.contact-action-card {
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; color:var(--noir); gap:6px; cursor:pointer;
  border:1px solid rgba(15,110,82,.18);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.contact-action-card:hover { color:var(--vert-fonce); border-color:var(--or); box-shadow:0 18px 40px rgba(0,0,0,.12); transform:translateY(-6px); }
.contact-action-card:focus-visible { outline:3px solid var(--or); outline-offset:4px; }
.contact-action-icon { font-size:2.4rem; margin-bottom:10px; }
.contact-action-card p { color:var(--gris-texte); font-size:.92rem; }
.contact-action-cta {
  display:inline-block; margin-top:14px; padding:8px 18px; border-radius:999px;
  background:var(--vert-fonce); color:#fff; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.contact-action-card:hover .contact-action-cta { background:var(--vert); }

/* ==========================================================
   COEUR FAVORI - DEFINITION UNIQUE, PRIORITAIRE
   Le selecteur ".produit-card .card-favori-btn" (2 classes) a une
   specificite plus forte que ".produit-card button" (1 classe + 1
   element) defini plus haut : cette regle gagne donc TOUJOURS sur
   width/height/margin, quel que soit l'ordre dans le fichier.
   C'est ce qui corrige le bug de l'ovale/pilule etiree.
   Pour ajuster : "width"/"height"/"font-size" = taille du rond,
   "top"/"right" = position sur la carte produit.
   ========================================================== */
.produit-card .card-favori-btn,
.card-favori-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 5;
  box-sizing: border-box;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  flex: none;
  margin: 0 !important;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(10,12,11,.15);
  box-shadow: 0 3px 12px rgba(0,0,0,.16);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  color: rgba(10,12,11,.6);
  transition: transform .25s var(--ease-soft), color .25s, border-color .25s;
}
.card-favori-btn:hover { transform: scale(1.1); border-color: var(--or); }
.card-favori-btn.active { color: #c0392b; border-color: rgba(192,57,43,.35); }

/* ================= RESPONSIVE ================= */
@media (max-width:1100px) {
  .nav-links { display:none; position:fixed; top:0; right:0; height:100vh; width:min(340px, 88vw); max-width:88vw; background:var(--creme); flex-direction:column; padding:100px 40px; gap:20px; align-items:flex-start; transform:translateX(100%); transition:transform .5s var(--ease); z-index:1000; box-shadow:-10px 0 40px rgba(0,0,0,0.12); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; }
  .nav-toggle { display:block; }
  .nav-links.open { transform:translateX(0); display:flex; }
  .tele-wrap { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .photo-grid { grid-template-columns:1fr; }
  .photo-grid .photo-luxe:first-child { grid-row:auto; min-height:260px; }
  .top-bar-inner { flex-direction:column; gap:2px; padding:8px 16px; }
  .top-bar-inner span { overflow-wrap:break-word; word-break:break-word; text-align:center; }
  .horaires-card { padding:32px 24px; }
  .filters-bar { flex-direction:column; align-items:stretch; }
  .filters-bar select, .filters-bar input { min-width:0; width:100%; }
}
@media (max-width:700px) {
  .main-nav { padding:14px 12px; }
  .logo { margin-right:0; max-width:calc(100vw - 150px); font-size:1.05rem; }
  .nav-actions { margin-left:6px; gap:8px; }
  .cart-link { padding:8px 14px; font-size:.78rem; }
  .produit-card .card-favori-btn,
  .card-favori-btn {
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    font-size: .95rem;
  }
}
@media (max-width:560px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .hero { min-height:78vh; }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .top-bar-inner { padding:8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}


/* Fond de l'image agrandie */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
  padding: 50px 20px 20px;
  box-sizing: border-box;
}

/* Affichage du lightbox */
.lightbox.open {
  display: flex;
}

/* Image agrandie */
#lightboxImg {
  display: block;
  max-width: 95%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* Bouton de fermeture */
.lightbox-close {
  position: absolute;
  top: 15px;
  right: 25px;
  border: none;
  background: transparent;
  color: white;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  padding: 5px 10px;
}

.lightbox-close:hover {
  opacity: 0.7;
}

/* Indication visuelle sur les photos produit */
.photo-principale,
.photo-verso {
  cursor: zoom-in;
}

@media (max-width: 600px) {
  .lightbox {
    padding: 55px 10px 15px;
  }

  #lightboxImg {
    max-width: 100%;
    max-height: 85vh;
  }

  .lightbox-close {
    top: 10px;
    right: 12px;
  }
}