/* index.css — Encodage UTF-8 (sans BOM)
   1) Styles de page index-*
   2) Header hdr-* (responsive + logo débordant 14%)
   3) Pages commande/paiement
*/

/* ===============================
   BASE ANTI-DÉBORDEMENT (ajouts)
   =============================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;               /* évite le scroll horizontal */
  scrollbar-gutter: auto;
}

/* Médias fluides */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Textes/mots très longs */
.wrap-any {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tables / code */
table { width: 100%; table-layout: fixed; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ===============================
   Variables & Font-face
   =============================== */
:root{
  --index-font-family: "CustomFont", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fond & couleurs */
  --index-color-bg: #808080;
  --index-color-text: #ffffff;
  --index-color-text-weak: #e9e9e9;
  --index-color-accent: #C0161B;
  --index-color-accent-soft: rgba(192,22,27,.75);

  /* Layout généraux */
  --index-radius: 16px;
  --index-gap: 24px;
  --index-maxw: 1200px;
  --index-shadow: 0 8px 30px rgba(0,0,0,.12);
  --index-transition: 200ms ease;

  /* Header */
  --hdr-pad-x: 16px;
  --hdr-gap: 10px;

  /* Logo (réduit un peu) */
  --hdr-logo-size: 100px;
  --hdr-logo-br: 12px;
  --hdr-logo-frame: 4px;
  --hdr-logo-top-gap: 14px;

  /* Hauteur de barre (u: 0.95) */
  --hdr-height: calc(var(--hdr-logo-size) * .95);

  /* Boutons NAV */
  --hdr-btn-radius: 8px;
  --hdr-btn-shadow: 0 4px 0 rgba(0,0,0,.25);
  --hdr-btn-inset: inset 0 2px 0 rgba(255,255,255,.08);
  --hdr-btn-bg: linear-gradient(135deg, #2a2a2a 0%, #525252 55%, #2a2a2a 100%);
  --hdr-btn-bg-hover: linear-gradient(135deg, #333 0%, #4a1416 55%, #da1b20 100%);
  --hdr-btn-glow: 0 0 0 2px rgba(255,64,64,.5);

  /* Tailles uniformes des liens du menu */
  --hdr-link-w: clamp(96px, 9vw, 120px);
  --hdr-link-h: 36px;
  --hdr-link-font: .95rem;

  /* Zone actions à droite (si présente) */
  --hdr-actions-right: 26px;

  /* Spécifique bouton Connexion */
  --hdr-login-font: .9rem;
  --hdr-login-h: calc(var(--hdr-link-h) * .5);
  --hdr-login-pad-x: 12px;

  /* Effets logo */
  --hdr-red: #690C0F;
  --hdr-red-glow: rgba(255,64,64,.65);

  /* Min hauteur “zone contenu” (fallback visuel) */
  --index-min-content: 640px;

  /* Menu utilisateur */
  --hdr-user-menu-w: 240px;
  --hdr-user-item-h: 36px;

  /* Couleurs header */
  --hdr-bg: #000;                 /* ← fond header et dropdown user */
  --hdr-dropdown-bottom: #9e9e9e; /* ← bordure grise en bas */
}

/* @font-face optionnel
@font-face{
  font-family:"CustomFont";
  src:url("/assets/fonts/CustomFont.ttf") format("truetype");
  font-display:swap;
}
*/

/* ===============================
   Anti tap-highlight mobile (iOS/Android)
   =============================== */
a, button, summary,
.hdr-logo, .hdr-link, .hdr-btn, .hdr-burger,
.index-arrow, .index-tapzone, .index-dot {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

/* Évite la sélection/long-press dans le header & la galerie */
.hdr-header,
.index-gallery, .index-gallery-viewport, .index-gallery-track,
.index-gallery-slide, .index-arrow, .index-tapzone {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* Sur écrans tactiles, on neutralise l’outline focus (on garde l’accessibilité desktop) */
@media (hover:none) and (pointer:coarse){
  a:focus, button:focus, summary:focus,
  .hdr-link:focus, .hdr-btn:focus, .hdr-burger:focus,
  .index-arrow:focus, .index-tapzone:focus, .index-dot:focus {
    outline: none !important;
  }
}

/* ===============================
   Base page + Dégradé de fond
   =============================== */
.index-body{
  margin:0;
  min-height:100svh;
  font-family:var(--index-font-family);
  color:var(--index-color-text);

  /* Dégradé contrôlé */
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.80) 0%,
      rgba(192,22,27,.04) 28%,
      rgba(192,22,27,.12) 50%,
      rgba(192,22,27,.28) 68%,
      rgba(210,18,22,.55) 85%,
      rgba(126,0,0,.70) 96%
    ),
    var(--index-color-bg);
}

.index-container{ width:min(100% - 32px, var(--index-maxw)); margin-inline:auto; }

.index-h1{ font-size:clamp(2rem, 3vw + 1rem, 3rem); margin:0 0 .5em 0; line-height:1.2; }
.index-h2{ font-size:clamp(1.4rem, 1.5vw + 1rem, 2rem); margin:0 0 .5em 0; line-height:1.25; }
.index-lead{ font-size:1.125rem; color:var(--index-color-text-weak); }

.index-section{ padding:48px 0; }

main, .index-main{
  display:block;
  min-height: calc(100svh - var(--hdr-height) - 180px);
  min-height: max(var(--index-min-content), calc(100svh - var(--hdr-height) - 180px));
}

/* ===============================
   Boutons de page
   =============================== */
.index-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  min-height:36px;
  border-radius:var(--hdr-btn-radius);
  text-decoration:none;
  color:#fff;
  background:var(--hdr-btn-bg);
  box-shadow:var(--hdr-btn-shadow), var(--hdr-btn-inset);
  transition:transform var(--index-transition), box-shadow var(--index-transition), background var(--index-transition), filter var(--index-transition);
  will-change:transform;
}
.index-btn:hover{ background:var(--hdr-btn-bg-hover); transform:translateY(-1px); }
.index-btn:active{ transform:translateY(1px); box-shadow:inset 0 3px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(255,64,64,.35); }
.index-btn:focus-visible{ outline:none; box-shadow:var(--hdr-btn-glow), var(--hdr-btn-shadow), var(--hdr-btn-inset); }

.index-btn-primary{ background:var(--hdr-btn-bg); color:#fff; }
.index-btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.35); background:transparent; }
.index-btn-ghost:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }

/* ===============================
   HÉRO
   =============================== */
.index-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--index-gap);
  align-items:center;
  min-width: 0;
}
.index-hero-media{ margin:0; }
.index-hero-img{ width:100%; height:auto; display:block; border-radius:var(--index-radius); box-shadow:var(--index-shadow); }
.index-hero-content{
  display:flex; flex-direction:column; gap:14px;
  min-width: 0;
}

/* ===============================
   GALERIE / CARROUSEL (compat main.js)
   =============================== */
.index-gallery{ position:relative; }
.index-gallery-viewport{
  position:relative;
  overflow:hidden;
  border-radius:var(--index-radius);
  box-shadow:var(--index-shadow);
}
.index-gallery-track{
  display:flex;
  width:100%;
  height:54svh;
  max-height:560px;
  will-change:transform;
  transition: transform 500ms ease;
}
.index-gallery-slide{
  flex: 0 0 100%;
  max-width: 100%;
  width:100%;
  height:100%;
  display:block;
}
/* cadrage correct des images du carrousel */
.index-gallery-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-drag: none;
}

/* Flèches */
.index-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  padding:8px 12px; font-size:28px; line-height:1;
  border:none; border-radius:12px; background:rgba(0,0,0,.35);
  color:#fff; cursor:pointer; opacity:0; transition:opacity var(--index-transition), background var(--index-transition);
}
.index-arrow-left{ left:10px; }
.index-arrow-right{ right:10px; }
.index-gallery-viewport:hover .index-arrow{ opacity:1; }
.index-arrow:focus-visible{ opacity:1; outline:2px solid #fff; outline-offset:3px; }
.index-arrow:hover{ background:rgba(0,0,0,.5); }

/* Tap zones mobile */
.index-tapzone{ position:absolute; top:0; bottom:0; width:45%; background:transparent; border:none; cursor:pointer; }
.index-tapzone-left{ left:0; }
.index-tapzone-right{ right:0; }

/* Dots */
.index-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.index-dot{ width:10px; height:10px; border-radius:99px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.25); cursor:pointer; }
.index-dot[aria-selected="true"]{ background:#fff; }

/* ===============================
   ARTICLES
   =============================== */
.index-article-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:var(--index-gap); align-items:center;
  min-width: 0;
}
.index-article-media{ margin:0; }
.index-article-img{ width:100%; height:auto; display:block; border-radius:var(--index-radius); box-shadow:var(--index-shadow); }
.index-article-text{ color:var(--index-color-text-weak); }

/* ===============================
   FOOTER
   =============================== */
.index-site-footer{
  margin-top:40px;
  padding:32px 0 42px;
  background:
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.0) 100%);
}
.index-footer-text{ margin:0; text-align:center; color:#fff; }

.index-footer-nav{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.index-footer-link{
  display:inline-block;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  letter-spacing:.2px;
  transform:translateY(0) translateZ(0);
  text-shadow:none;
  will-change:transform, filter, text-shadow;
  transition:transform var(--index-transition), text-shadow var(--index-transition), filter var(--index-transition);
}
.index-footer-link:hover,
.index-footer-link:focus-visible{
  transform:translateY(-2px);
  text-shadow:
    0 0 6px rgba(255,255,255,.75),
    0 0 14px rgba(192,22,27,.65);
  outline:none;
}

/* ===============================
   RESPONSIVE PAGE
   =============================== */
@media (max-width:768px){
  .index-hero-grid, .index-article-grid{ grid-template-columns:1fr; }
  .index-gallery-track{ height:44svh; max-height:none; }
  .index-arrow{ display:none; }
}

.index-nav-link:focus-visible, .index-dot:focus-visible, .index-tapzone:focus-visible{
  outline:2px solid #fff; outline-offset:3px;
}

/* ============================================
   HEADER (hdr-*) — Responsive + logo débordant 14%
   ============================================ */

/* Barre sticky */
.hdr-header{
  position:sticky; top:0; z-index:250;     /* ↑ reste au-dessus du contenu */
  background:var(--hdr-bg);
  width:100%;
  overflow:visible;
  margin-bottom:calc(var(--hdr-logo-size) * .14);
}

/* Grille : logo | nav | actions */
.hdr-bar{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--hdr-gap);
  height:var(--hdr-height);
  padding:0 var(--hdr-pad-x);
  width:100%;
  overflow:visible;
}

/* Logo au-dessus de tout */
.hdr-logo{
  position:relative;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.hdr-logo-img{
  display:block;
  height:var(--hdr-logo-size);
  width:auto;
  object-fit:contain;
  margin-top:var(--hdr-logo-top-gap);
  border-radius:var(--hdr-logo-br);
  box-shadow:
    0 0 0 var(--hdr-logo-frame) var(--hdr-red),
    0 4px 0 rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* NAV — centré verticalement */
.hdr-nav{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-left:10px;
  min-width: 0;
}
.hdr-nav-list{
  display:flex;
  list-style:none;
  gap:10px;
  margin:0; padding:0;
  min-width: 0;
}
.hdr-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--hdr-link-w); min-width:var(--hdr-link-w);
  min-height:var(--hdr-link-h);
  padding:0 10px;
  font-size:var(--hdr-link-font);
  color:#fff; text-decoration:none; font-weight:600;
  border-radius:var(--hdr-btn-radius);
  background:var(--hdr-btn-bg);
  box-shadow:var(--hdr-btn-shadow), var(--hdr-btn-inset);
  line-height:1;
  transition:transform var(--index-transition), box-shadow var(--index-transition), filter var(--index-transition), background var(--index-transition);
}
.hdr-link:hover{ background:var(--hdr-btn-bg-hover); transform:translateY(-1px); }
.hdr-link:active{ transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(255,64,64,.35); }
.hdr-link:focus-visible{ outline:none; box-shadow:var(--hdr-btn-glow), var(--hdr-btn-shadow), var(--hdr-btn-inset); }

/* Connexion plus compacte */
.hdr-link.hdr-btn-login{
  background:linear-gradient(135deg, #8f0f13 0%, #C0161B 55%, #8f0f13 100%);
  min-height:var(--hdr-login-h);
  font-size:var(--hdr-login-font);
  padding:0 var(--hdr-login-pad-x);
  align-self:center;
  box-shadow:0 4px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.08);
}
.hdr-link.hdr-btn-login:hover{
  background:linear-gradient(135deg, #a01216 0%, #da1b20 55%, #a01216 100%);
}
.hdr-link.hdr-btn-login:active{
  box-shadow:inset 0 3px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(255,64,64,.35);
}

.hdr-actions{
  justify-self:end;
  align-self:center;
  display:flex;
  align-items:center;
  height:var(--hdr-height);
  margin-right:var(--hdr-actions-right);
  width:auto;
  gap:10px;
  min-width: 0;
}

/* Bouton utilisateur (summary) : plus petit & centré */
.hdr-user-menu{ position:relative; }
.hdr-user-menu > summary.hdr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: .9rem;
  line-height: 1;
  border-radius: 10px;
}

/* Boutons génériques */
.hdr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 14px;
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  border-radius:var(--hdr-btn-radius);
  background:var(--hdr-btn-bg);
  box-shadow:var(--hdr-btn-shadow), var(--hdr-btn-inset);
  transition:transform var(--index-transition), box-shadow var(--index-transition), background var(--index-transition);
}
.hdr-btn:hover{ background:var(--hdr-btn-bg-hover); transform:translateY(-1px); }
.hdr-btn:active{ transform:translateY(1px); box-shadow:inset 0 3px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(255,64,64,.35); }
.hdr-btn:focus-visible{ outline:none; box-shadow:var(--hdr-btn-glow), var(--hdr-btn-shadow), var(--hdr-btn-inset); }

/* Burger (mobile) */
.hdr-burger{
  display:none; justify-self:end; width:44px; height:44px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center;
}
.hdr-burger:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.hdr-burger-ico{ position:relative; width:22px; height:2px; background:#fff; display:inline-block; transition:transform 200ms ease, background 200ms ease; }
.hdr-burger-ico::before,
.hdr-burger-ico::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; transition:transform 200ms ease, top 200ms ease, opacity 200ms ease; }
.hdr-burger-ico::before{ top:-7px; }
.hdr-burger-ico::after{ top:7px; }

/* Checkbox cachée */
.hdr-burger-toggle{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* ==============================================
   MENU BURGER (mobile) — décalage + couche z-index
   ============================================== */
.hdr-menu-panel{
  position:absolute; left:0; right:0;
  top: calc(var(--hdr-height) + 8px); /* ← petit écart sous le header */
  display:none;
  background:rgba(20,20,20,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:14px var(--hdr-pad-x) 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
  z-index: 900;                 /* sous le logo (1000), au-dessus du contenu */
}

/* Contenus du panneau mobile */
.hdr-nav-mobile{ display:flex; flex-direction:column; gap:10px; }
.hdr-actions-mobile{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.hdr-link-block, .hdr-btn-block{ display:block; text-align:center; }

/* Interaction burger */
#hdr-burger:checked ~ .hdr-bar .hdr-burger .hdr-burger-ico{ background:transparent; }
#hdr-burger:checked ~ .hdr-bar .hdr-burger .hdr-burger-ico::before{ top:0; transform:rotate(45deg); }
#hdr-burger:checked ~ .hdr-bar .hdr-burger .hdr-burger-ico::after{ top:0; transform:rotate(-45deg); }
#hdr-burger:checked ~ .hdr-menu-panel{ display:block; }

/* Effets logo (hover desktop) */
@media (hover:hover) and (pointer:fine){
  .hdr-logo{ transition:transform 200ms ease; }
  .hdr-logo:hover{ transform:translateY(-1px); }
  .hdr-logo:active{ transform:translateY(1px); }
  .hdr-logo:hover .hdr-logo-img{
    box-shadow:
      0 0 0 var(--hdr-logo-frame) var(--hdr-red),
      0 4px 0 rgba(0,0,0,.35),
      0 0 14px var(--hdr-red-glow),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
  .hdr-logo:active .hdr-logo-img{
    box-shadow:
      0 0 0 var(--hdr-logo-frame) var(--hdr-red),
      inset 0 4px 12px rgba(0,0,0,.45),
      0 0 18px var(--hdr-red-glow);
    filter:brightness(1.03) saturate(1.06);
  }
  .hdr-logo:focus-visible .hdr-logo-img{
    outline:none;
    box-shadow:0 0 0 calc(var(--hdr-logo-frame) + 2px) var(--hdr-red), 0 0 12px var(--hdr-red-glow);
  }
}

/* Desktop vs Mobile */
@media (max-width:768px){
  .hdr-nav, .hdr-actions{ display:none; }
  .hdr-burger{ display:inline-flex; }
}
@media (min-width:769px){
  .hdr-menu-panel{ display:none !important; }
}

/* ===============================
   Ajustements spécifiques MOBILE
   =============================== */
@media (max-width:768px){
  .hdr-menu-panel .hdr-link{
    width:100%; min-width:0;
    min-height:42px;
    line-height:1;
  }
  .hdr-menu-panel .hdr-link-block{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
  }

  .hdr-actions-mobile{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
  }
  .hdr-actions-mobile .hdr-btn,
  .hdr-actions-mobile .hdr-btn-block,
  .hdr-actions-mobile .hdr-btn-login{
    display:flex; align-items:center; justify-content:center;
    width:100%;
    min-height:38px;
    padding:10px 12px;
    font-size:.95rem;
    line-height:1;
    border-radius:10px;
    background:linear-gradient(135deg, #8f0f13 0%, #C0161B 55%, #8f0f13 100%) !important;
    color:#fff; text-decoration:none; font-weight:800;
    box-shadow:0 3px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  }
}

/* ============================================================
   DROPDOWN USER — DESKTOP (anti-overflow + fond + bordure)
   ============================================================ */
.hdr-user-menu [role="menu"]{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  width: var(--hdr-user-menu-w) !important;
  min-width: var(--hdr-user-menu-w) !important;
  padding: 8px !important;
  background: var(--hdr-bg) !important;
  border-radius: 12px;
  border: none;
  border-bottom: 1px solid var(--hdr-dropdown-bottom);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  overflow: hidden;
  z-index: 920;
}

.hdr-user-menu [role="menu"] a{
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--hdr-user-item-h);
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  box-shadow: none !important;
  transition: background var(--index-transition), transform var(--index-transition);
}
.hdr-user-menu [role="menu"] a:hover,
.hdr-user-menu [role="menu"] a:focus-visible{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
  outline: none;
}

/* Neutralise le style “gros bouton” dans le dropdown */
.hdr-user-menu [role="menu"] .hdr-link{
  width: 100%;
  min-width: 0;
  min-height: var(--hdr-user-item-h);
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px;
  font-size: .95rem;
  padding: 8px 10px;
}

/* Déconnexion ROUGE en desktop */
.hdr-user-menu [role="menu"] a[href*="logout.php"]{
  background: linear-gradient(135deg, #8f0f13 0%, #C0161B 55%, #8f0f13 100%) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.hdr-user-menu [role="menu"] a[href*="logout.php"]:hover{
  background: linear-gradient(135deg, #a31216 0%, #da1b20 55%, #a31216 100%) !important;
}

/* ===============================
   Formulaires unifiés
   =============================== */
.contact-form, .index-form{
  max-width:600px; margin:0 auto;
  display:flex; flex-direction:column; gap:14px;
}
.contact-form label, .index-form label{
  display:block; text-align:center; font-weight:600; margin-bottom:4px;
}
.contact-form input, .contact-form textarea,
.index-form input, .index-form textarea, .index-form select{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.2); color:#fff; font-size:.95rem; outline:none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder,
.index-form input::placeholder, .index-form textarea::placeholder{ color:rgba(255,255,255,.65); }
.contact-form input:focus, .contact-form textarea:focus,
.index-form input:focus, .index-form textarea:focus, .index-form select:focus{
  outline:2px solid var(--index-color-accent); outline-offset:2px;
}
.contact-form .index-btn, .index-form .index-btn{ align-self:center; min-width:220px; text-align:center; }

@media (max-width:480px){
  .contact-form, .index-form{ max-width:100%; padding:0 8px; }
  .contact-form .index-btn, .index-form .index-btn{ width:100%; min-width:0; }
}

/* ===============================
   Shop (images 350x350 & stack)
   =============================== */
:root{ --shop-img-max: 350px; }
.page-shop .index-article-media{
  display:flex; align-items:center; justify-content:center;
  padding:10px; background:rgba(0,0,0,.15);
  border-radius:var(--index-radius); box-shadow:var(--index-shadow);
}
.page-shop .index-article-img{
  max-width:min(100%, var(--shop-img-max)); max-height:var(--shop-img-max);
  width:auto; height:auto; object-fit:contain; display:block; margin-inline:auto;
}
@media (max-width:480px){ :root{ --shop-img-max: 260px; } }

.page-shop .index-article-grid{ display:grid; grid-template-columns:1fr; gap:var(--index-gap); }
.page-shop .index-article{
  background:rgba(0,0,0,.12); border-radius:var(--index-radius); box-shadow:var(--index-shadow); padding:16px;
}
.page-shop .index-article-text{ color:var(--index-color-text-weak); }

.page-product .index-form{ }
.page-product .index-actions{ display:flex; justify-content:center; }

/* Accessibilité header */
.hdr-link:focus-visible, .hdr-btn:focus-visible, .hdr-burger:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Réduction animations */
@media (prefers-reduced-motion:reduce){
  .hdr-link, .hdr-btn, .hdr-burger-ico, .hdr-burger-ico::before, .hdr-burger-ico::after,
  .index-btn, .index-footer-link{ transition:none !important; }
}

/* ======================================================
   PAGES COMMANDE / PAIEMENT (cart, checkout, pay, success)
   ====================================================== */
.index-card{
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--index-radius);
  box-shadow: var(--index-shadow);
  padding: 16px;
}

.index-alert{
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.18);
}
.index-alert-error{ border-color: rgba(255,60,60,.45); background: rgba(140,0,0,.25); }
.index-alert-info{  border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }

.index-fieldset{
  margin: 16px 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
}
.index-legend{
  padding: 0 8px;
  font-weight: 800;
  letter-spacing: .2px;
}

.index-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.index-checkbox input[type="checkbox"]{
  width: 18px; height: 18px;
}

.index-fieldset label,
.checkout-form label{
  display:block;
  font-weight: 700;
  margin: 10px 0 6px;
}

.index-fieldset input,
.index-fieldset select,
.index-fieldset textarea,
.checkout-form input,
.checkout-form select,
.checkout-form textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(0,0,0,.22);
  color: #fff;
  font-size: .98rem;
  line-height: 1.35;
  outline: none;
  transition: box-shadow var(--index-transition), border-color var(--index-transition), background var(--index-transition);
}

.index-fieldset input:focus,
.index-fieldset select:focus,
.index-fieldset textarea:focus,
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus{
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 0 0 4px rgba(192,22,27,.30);
  background: rgba(0,0,0,.28);
}

textarea{ min-height: 120px; resize: vertical; overflow: auto; }
.textarea-lg{ min-height: 200px; }
.textarea-autofit{
  overflow: hidden;
  min-height: 140px;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid .form-col{ display: flex; flex-direction: column; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row > *{ min-width: 0; }

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

input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: center;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ======================
   PANIER
   ====================== */
.page-cart .cart-layout{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.page-cart .cart-items   { display: flex; flex-direction: column; gap: 12px; }
.page-cart .cart-summary {
  position: sticky;
  top: calc(var(--hdr-height) + 12px);
  align-self: start;
}
.page-cart .cart-line{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.12);
}
.page-cart .cart-thumb{ width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.22); }
.page-cart .cart-name { font-weight: 800; }
.page-cart .cart-price{ font-weight: 800; white-space: nowrap; }

.page-cart .cart-total{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.page-cart .cart-actions{
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}

@media (max-width: 920px){
  .page-cart .cart-layout{ grid-template-columns: 1fr; }
  .page-cart .cart-summary{ position: static; }
}

/* ======================
   CHECKOUT
   ====================== */
.page-checkout .checkout-summary{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.16);
  padding: 12px;
}

.page-checkout .checkout-layout{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
.page-checkout .checkout-main{ display: flex; flex-direction: column; gap: 14px; }
.page-checkout .checkout-side{
  position: sticky;
  top: calc(var(--hdr-height) + 12px);
  align-self: start;
  display: flex; flex-direction: column; gap: 10px;
}

.page-checkout .index-actions{
  display: flex; gap: 10px; flex-wrap: wrap;
}

.options-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
@media (max-width: 720px){
  .page-checkout .checkout-layout{ grid-template-columns: 1fr; }
  .options-list{ grid-template-columns: 1fr; }
}

.index-note{ font-size: .92rem; color: var(--index-color-text-weak); }

/* ======================
   PAIEMENT
   ====================== */
.page-pay .pay-card{ display: flex; flex-direction: column; gap: 10px; }
.page-pay #pay-button{ min-width: 220px; }

/* ======================
   SUCCESS / CANCEL
   ====================== */
.page-pay-success .index-actions,
.page-pay-cancel  .index-actions{
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}

/* ======================
   RECAP PRIX
   ====================== */
.price-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.price-row.total{
  border-top: 1px dashed rgba(255,255,255,.25);
  margin-top: 6px; padding-top: 10px;
  font-size: 1.1rem; font-weight: 900;
}

/* ======================================================
   DEMANDES SUPPLÉMENTAIRES
   - Liens hypertexte en contenu : noir, gras, pas souligné
   - Déconnexion bleu en mobile (panel)
   ====================================================== */
main a:not(.hdr-link):not(.index-btn):not(.hdr-btn),
.index-link{
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 800;
}
main a:not(.hdr-link):not(.index-btn):not(.hdr-btn):hover,
.index-link:hover{
  text-decoration: none;
  filter: brightness(.9);
}

/* Déconnexion BLEUE en mobile (panneau burger) */
@media (max-width: 768px){
  .hdr-actions-mobile a[href*="logout.php"]{
    background: linear-gradient(135deg, #0f4fa8 0%, #2d7bff 100%) !important;
    box-shadow: 0 3px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: #fff !important;
  }
  .hdr-actions-mobile .hdr-btn,
  .hdr-actions-mobile .hdr-link,
  .hdr-actions-mobile .hdr-btn-login{
    min-height: 38px;
    padding: 10px 12px;
    width: 100%;
  }
}
/* === FIX visibilité bouton téléchargement facture === */
/* Spécificité renforcée pour éviter d'être écrasé par les styles globaux */
.orders-list a.invoice-download,
.order-card a.invoice-download {
  --dl-size: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--dl-size);
  height: var(--dl-size);
  border-radius: 999px;
  text-decoration: none !important;
  background: transparent !important;
  border: 1.6px solid #fff !important;          /* contour blanc forcé */
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transition: transform .08s ease, box-shadow .12s ease, opacity .2s ease;
  line-height: 1;                                /* évite l’écrasement par line-height globaux */
  vertical-align: middle;
  z-index: 1;
}

/* Icône interne : on ne dépend plus de currentColor (stroke en #fff forcé) */
.orders-list a.invoice-download .invoice-download__icon {
  width: calc(var(--dl-size) - 12px);
  height: calc(var(--dl-size) - 12px);
  display: block;
}

/* Forcer le stroke via CSS inline sur le SVG */
.orders-list a.invoice-download .invoice-download__icon circle,
.orders-list a.invoice-download .invoice-download__icon path {
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Effets hover/active + brillance quand on “enfonce” le bouton */
.orders-list a.invoice-download:hover { opacity: .95; }
.orders-list a.invoice-download:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 18px rgba(255,255,255,.65);
}
.orders-list a.invoice-download:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 0 5px rgba(255,255,255,.15);
}

/* Variante auto-contrast si carte sur fond très clair */
@media (prefers-color-scheme: light) {
  .order-card:where([style*="background:#fff"], [style*="background: #fff"]) a.invoice-download,
  .order-card.is-light a.invoice-download {
    border-color: #111 !important;
  }
  .order-card:where([style*="background:#fff"], [style*="background: #fff"]) a.invoice-download .invoice-download__icon circle,
  .order-card:where([style*="background:#fff"], [style*="background: #fff"]) a.invoice-download .invoice-download__icon path,
  .order-card.is-light a.invoice-download .invoice-download__icon circle,
  .order-card.is-light a.invoice-download .invoice-download__icon path {
    stroke: #111 !important;
  }
}