/* ========= Variables (inchangées) ========= */
:root {
  --color-primary: #006A4E;
  --color-primary-light: #008F6B;
  --color-secondary: #FF7D00;
  --color-dark: #1E1E1E;
  --color-gray: #6B7280;
  --color-light: #F9FAFB;
  --color-white: #FFFFFF;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --transition: all 0.3s ease;

  /* UI helpers */
  --header-h: 70px;
  --progress: 0; /* mis à jour par JS [0..100] */
}

/* ========= Reset & Base ========= */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', sans-serif;
  background:
    linear-gradient(180deg, var(--color-light) 0%, var(--color-white) 100%);
  color: var(--color-dark);
  line-height: 1.6;
}

/* Barre de progression de lecture – sans modifier le HTML */
body::before{
  content:"";
  position:fixed; inset:0 auto auto 0;
  height:3px; width:calc(var(--progress) * 1%);
  background: var(--color-primary);
  z-index: 2000;
  transform-origin: left center;
}

/* Sélection de texte */
::selection { background: var(--color-primary-light); color: var(--color-white); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
h1, h2, h3, h4 { font-weight: 700; }

/* ========= Header ========= */
.site-header {
  position: fixed; top:0; left:0; right:0;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
  padding: 1rem 0;
  backdrop-filter: saturate(160%) blur(8px);
}
.site-header .container {
  display:flex; align-items:center; justify-content:space-between;
}
.logo {
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:1.3rem;
  color: var(--color-primary); text-decoration:none;
}
.logo-icon { font-size:1.5rem; }

.nav { display:flex; gap:2rem; }
.nav-list { list-style:none; display:flex; gap:1.5rem; }
.nav-list a {
  text-decoration:none; font-weight:500;
  color: var(--color-gray);
  position:relative; padding:.25rem 0;
  transition: var(--transition);
}
.nav-list a:hover, .nav-list a.active { color:var(--color-primary); }
.nav-list a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0%;
  background: var(--color-primary);
  transition: width .25s ease;
}
.nav-list a:hover::after, .nav-list a.active::after{ width:100%; }

.nav-toggle { display:none; }

/* ========= Section Header ========= */
main.policy { margin-top: calc(var(--header-h) + 2rem); }
.section-header { text-align:center; margin-bottom:2rem; }
.section-subtitle {
  text-transform:uppercase; font-size:.9rem;
  color: var(--color-primary); font-weight:600;
  display:block; margin-bottom:.5rem; letter-spacing:.06em;
}
.section-title {
  font-size:2rem; line-height:1.2;
  display:inline-block; position:relative; padding-bottom:.5rem;
}
.section-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:90px; height:4px; border-radius:999px;
  background: var(--color-primary);
}

/* ========= Meta + Outils ========= */
.policy-meta {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin:1rem 0 2rem;
}
.badge {
  background:var(--color-light);
  padding:.45rem .85rem;
  border-radius:999px;
  font-size:.85rem; color:var(--color-gray);
  box-shadow:var(--shadow-sm);
}
.policy-actions .btn { margin-left:.5rem; }

.btn {
  padding:.65rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight:600;
  border:2px solid transparent;
  cursor:pointer; transition:var(--transition);
  will-change: transform, box-shadow;
}
.btn:focus-visible{
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}
.btn-primary { background:var(--color-primary); color:var(--color-white); }
.btn-primary:hover { background:var(--color-primary-light); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-outline {
  background:transparent; color:var(--color-primary);
  border:2px solid var(--color-primary);
}
.btn-outline:hover { background:var(--color-primary); color:var(--color-white); transform: translateY(-1px); }

/* ========= Outils ========= */
.policy-tools {
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:1.25rem; margin-bottom:2rem;
  align-items: start;
}
.policy-search {
  position:relative;
  background:var(--color-white);
  border:1px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding:.85rem 1rem .85rem 2.6rem;
  box-shadow: var(--shadow-sm);
}
.policy-search i {
  position:absolute; left:1rem; top:50%;
  transform:translateY(-50%); color:var(--color-gray);
}
.policy-search input {
  width:100%; border:none; outline:none;
  background:transparent; font-size:1rem;
}
.policy-search input::placeholder{ color:#9aa3af; }

.policy-toc {
  background:var(--color-white);
  border:1px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding:1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow:auto;
}
.policy-toc strong { display:block; margin-bottom:.5rem; }
.policy-toc ol { margin-left:1rem; display:grid; gap:.35rem; }
.policy-toc a {
  text-decoration:none; color:var(--color-gray);
  transition:var(--transition);
  display:block; line-height:1.4;
}
.policy-toc a:hover { color:var(--color-primary); transform: translateX(2px); }
.policy-toc a.active { color: var(--color-primary); font-weight: 600; }

/* ========= Accordéon ========= */
.accordion { display:grid; gap:1rem; }
.acc-item {
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  border: 1px solid #eef0f3;
  transition: var(--transition);
}
.acc-item:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.acc-item.active{ border-left: 3px solid var(--color-primary); }

.acc-btn {
  width:100%; text-align:left;
  padding:1rem 3rem 1rem 1.25rem;
  background: var(--color-light);
  border:none; cursor:pointer; font-weight:600;
  color:var(--color-dark); position:relative;
}
.acc-btn:focus-visible{
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}
.acc-btn::after {
  content:"\f067"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:1rem; top:50%; transform:translateY(-50%) rotate(0deg);
  color:var(--color-primary); transition: transform .25s ease;
}
.acc-item.active .acc-btn { background:#fdfefe; }
.acc-item.active .acc-btn::after { content:"\f068"; transform:translateY(-50%) rotate(180deg); }

.acc-panel {
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .25s ease;
  padding:0 1.25rem;
  background:var(--color-white);
}
.acc-panel > * { margin:1rem 0; }
.acc-item.active .acc-panel { padding:1rem 1.25rem; }

/* Surlignage recherche */
mark[data-hl], .highlight {
  background: #fff4c2;
  padding: .05rem .2rem;
  border-radius: .25rem;
}

/* ========= Modal cookies ========= */
.modal { position:fixed; inset:0; display:none; }
.modal.show { display:block; }
.modal-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  animation: fadeIn .25s ease;
}
.modal-content {
  position:relative;
  width:min(600px,92vw);
  margin:10vh auto;
  background:var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding:1.5rem;
  animation: scaleIn .18s ease;
}
.modal-close {
  position:absolute; right:.75rem; top:.5rem;
  font-size:1.5rem; border:none; background:none;
  cursor:pointer; color:var(--color-gray);
}
.cookie-form { display:grid; gap:1rem; margin-top:.5rem; }
.switch { display:flex; align-items:center; gap:.75rem; cursor:pointer; }
.switch input { display:none; }
.slider {
  width:44px; height:24px; background:#e5e7eb; border-radius:999px; position:relative; transition:var(--transition);
}
.slider::after {
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  background:#fff; border-radius:50%; box-shadow: var(--shadow-sm); transition:var(--transition);
}
.switch input:checked + .slider { background:var(--color-primary); }
.switch input:checked + .slider::after { left:23px; }
.switch-label { color:var(--color-dark); }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }

/* ========= Footer ========= */
.site-footer {
  margin-top:3rem;
  padding:2rem 0;
  background:var(--color-dark);
  color:var(--color-white);
  text-align:center;
}

/* ========= Animations ========= */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{transform:scale(.96); opacity:0} to{transform:scale(1); opacity:1} }

/* ========= Responsive ========= */
@media (max-width:900px){
  .policy-tools { grid-template-columns:1fr; }
  .policy-toc { position: static; max-height: none; }
}
@media (max-width:768px){
  :root{ --header-h: 64px; }

  .nav {
    position:fixed; top:var(--header-h); right:-100%;
    width:80%; max-width:300px;
    height:calc(100vh - var(--header-h));
    background:var(--color-white);
    flex-direction:column; padding:2rem;
    transition:var(--transition);
    box-shadow:-5px 0 15px rgba(0,0,0,0.1);
    z-index: 1001;
  }
  .nav.active { right:0; }
  .nav-toggle {
    display:flex; flex-direction:column;
    justify-content:space-between;
    width:2rem; height:1.5rem;
    background:none; border:none; cursor:pointer;
  }
  .nav-toggle .bar {
    width:100%; height:3px;
    background:var(--color-primary);
    border-radius:2px;
    transition: var(--transition);
  }
  .nav-toggle.active .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle.active .bar:nth-child(2){ opacity:0; }
  .nav-toggle.active .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

/* ========= A11Y & Prefers-reduced-motion ========= */
:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ========= Impression ========= */
@media print{
  body::before{ display:none; }
  .site-header, .policy-tools, .policy-meta .policy-actions, .modal { display:none !important; }
  .acc-panel{ max-height:none !important; padding:0 !important; }
  .acc-item{ break-inside: avoid; box-shadow:none; border:none; }
  .acc-btn{ background:transparent; padding:.25rem 0; }
}