/* =====================================================
   POLICE INTER AUTO-HÉBERGÉE
===================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: local('Arial');
  size-adjust: 100%;
}

/* =====================================================
   PALETTE — 2 variables pilotent toute la couleur du site
===================================================== */
:root {
  --color-primary:      #0062d9;
  --color-primary-dark: #0052b8;
}

/* =====================================================
   RESET / BASE
===================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* Le header est en `position: sticky` (voir plus bas) : le navigateur réserve
   lui-même exactement la place qu'il occupe, quelle que soit sa hauteur réelle
   (texte de catégorie sur 1 ou 2 lignes, etc.) — pas de padding-top à deviner,
   pas de calcul JS, jamais de décalage possible. */

/* La barre d'admin WordPress (connecté) est fixed en haut du viewport. Avec un
   header sticky, il suffit de décaler son point d'accroche du montant exact de
   la admin bar pour qu'il se colle juste en dessous d'elle au lieu de se superposer. */
@media screen and (min-width: 783px) {
  body.admin-bar .site-header { top: 32px; }
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

main { min-height: 100vh; }
img { object-fit: cover; }
a { color: inherit; }
.no-underline { text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* =====================================================
   UTILITAIRES DE MISE EN PAGE (équivalents des classes
   Tailwind utilisées côté Astro — pas de build CSS ici)
===================================================== */
.container       { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }   /* max-w-6xl mx-auto px-6 */
.container-tight { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }     /* header : px-4 */
.container-narrow  { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; } /* max-w-4xl */
.container-medium  { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } /* max-w-5xl */

.flex        { display: flex; }
.flex-1      { flex: 1 1 0%; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.justify-center   { justify-content: center; }
.gap-2  { gap: 0.5rem; }
.shrink-0 { flex-shrink: 0; }
.text-center { text-align: center; }

.grid { display: grid; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hidden { display: none; }
@media (min-width: 1024px) {
  .lg\:block       { display: block; }
  .lg\:hidden      { display: none; }
  .lg\:inline-flex { display: inline-flex; }
}
@media (max-width: 1023px) {
  .lg\:block { display: none; }
}
@media (min-width: 768px) {
  .md\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .md\:grid-3 { grid-template-columns: 1fr; }
}

/* =====================================================
   TYPOGRAPHIE DE CONTENU (pages/posts WordPress natifs)
===================================================== */
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-weight: 500; margin-bottom: 0.5rem; line-height: 1.2; max-width: 72ch;
}
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.5rem; }
.prose h4 { font-size: 1.25rem; }
.prose p, .prose a, .prose ol li, .prose ul li { line-height: 1.75; max-width: 72ch; }
.prose p, .prose ol, .prose ul { margin-bottom: 1.5rem; }
.prose li { margin-bottom: 0.25rem; }
.prose blockquote {
  font-style: italic; border-left: 5px solid #000;
  padding-inline: 1rem; margin-inline: 0; margin-block: 1rem;
}
.prose ul li { margin-inline: 1rem; padding-block: 0.125rem; list-style: disc; }
.prose ol li { list-style-type: decimal; padding-block: 0.125rem; margin-inline: 1rem; }
.prose a { color: #034ad8; text-decoration: underline; text-underline-offset: 0.1rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.prose th, .prose td { border: 1px solid #e5e5e5; padding: 0.5rem; }
.prose thead { background-color: #f5f5f5; }
.prose img { max-width: 100%; height: auto; margin: 1rem auto; }
.prose hr { border: 0; border-top: 1px solid #d4d4d4; margin: 1.5rem 0; }

/* =====================================================
   HEADER
===================================================== */
.site-header { position: sticky; top: 0; left: 0; width: 100%; background: white; z-index: 1002; }
.header-main { height: 58px; border-bottom: 3px solid #e8e8e8; }
.header-main-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }

.logo-text {
  color: #111111; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; line-height: 1;
}

.nav-desktop { flex: 1; }
.nav-desktop ul { list-style: none; display: flex; align-items: stretch; justify-content: center; height: 58px; }
.nav-link {
  display: flex; align-items: center; padding: 0 16px; height: 58px;
  color: rgba(0,0,0,0.65); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; text-decoration: none;
  border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.nav-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.header-actions { display: flex; align-items: center; }

.search-toggle {
  width: 46px; height: 58px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: rgba(0,0,0,0.65);
  transition: color 0.2s; flex-shrink: 0;
}
.search-toggle:hover { color: var(--color-primary); }

.contact-btn {
  background: var(--color-primary); color: white; padding: 8px 18px; margin-left: 16px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; transition: background 0.2s; line-height: 1; align-items: center;
}
.contact-btn:hover { background: var(--color-primary-dark); }

.contact-icon-btn {
  width: 46px; height: 58px; align-items: center; justify-content: center;
  color: rgba(0,0,0,0.65); text-decoration: none; flex-shrink: 0; transition: color 0.2s;
}
.contact-icon-btn:hover { color: var(--color-primary); }

/* box-shadow plutôt que border : la séparation visuelle ne doit pas ajouter à la hauteur (100px = 58 + 42, exact). */
.cat-bar { background: white; box-shadow: 0 1px 0 #E5E5E5; }

.search-bar {
  position: absolute; top: 100%; left: 0; right: 0; background: #1a1a1a; padding: 16px;
  border-bottom: 3px solid var(--color-primary); z-index: 1003;
}

/* =====================================================
   BARRE DE CATÉGORIES
===================================================== */
.cat-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0 16px; height: 44px; background: white; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: #555; transition: color 0.15s; border-bottom: 4px solid var(--color-primary);
}
.cat-toggle:hover { color: var(--color-primary); }
.cat-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.3s ease; }
.cat-toggle[aria-expanded="true"] .cat-chevron { transform: rotate(180deg); }

.cat-grid { overflow: hidden; max-height: 0; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1); }
.cat-grid.open { max-height: 600px; }
.cat-grid ul { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; width: 100%; border-bottom: 4px solid var(--color-primary); }
.cat-grid li { display: flex; border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }
.cat-grid li:nth-child(even) { border-right: none; }
.cat-grid li:nth-last-child(-n+2) { border-bottom: none; }

.cat-link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; width: 100%; text-decoration: none; color: #444; transition: background 0.15s, color 0.15s; }
.cat-link svg { width: 22px; height: 22px; flex-shrink: 0; }
.cat-link span { font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2; text-align: center; }
.cat-link:hover, .cat-link.active { background: #F5F5F5; color: var(--color-primary); }

@media (min-width: 768px) {
  .cat-toggle { display: none; }
  .cat-grid { overflow: visible; max-height: none !important; transition: none; }
  /* Pas de hauteur imposée : align-items (stretch, par défaut) fait que tous les
     liens s'alignent sur le plus haut d'entre eux — si un libellé passe sur 2
     lignes, toute la barre grandit avec lui, sans jamais tronquer le texte. */
  .cat-grid ul { display: flex; width: 100%; min-width: 0; border-bottom: none; }
  .cat-grid li { flex: 1; min-width: 0; display: flex; border: none; }
  .cat-link { flex: 1; padding: 8px 4px; min-width: 0; border-bottom: 3px solid transparent; gap: 4px; flex-direction: column; align-items: center; justify-content: center; }
  .cat-link:hover, .cat-link.active { background: #F9F9F9; border-bottom-color: var(--color-primary); }
  .cat-link svg { width: 20px; height: 20px; flex-shrink: 0; }
  .cat-link span { white-space: normal; font-size: 8px; letter-spacing: 0; line-height: 1.2; text-align: center; word-break: break-word; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .cat-link span { display: none; }
  .cat-link { padding: 12px 0; gap: 0; }
  .cat-link svg { width: 22px; height: 22px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .cat-link { padding: 8px 2px; gap: 3px; }
  .cat-link svg { width: 18px; height: 18px; }
  .cat-link span { font-size: 7.5px; }
}
@media (min-width: 1100px) {
  .cat-link { padding: 10px 8px; gap: 5px; }
  .cat-link svg { width: 21px; height: 21px; }
  .cat-link span { font-size: 9px; letter-spacing: 0.2px; }
}
@media (min-width: 1280px) {
  .cat-link { padding: 10px 14px; }
  .cat-link span { font-size: 9.5px; letter-spacing: 0.3px; }
}

/* =====================================================
   FOOTER
===================================================== */
.site-footer { background: #111111; border-top: 3px solid var(--color-primary); }
.footer-inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem 2rem; }
@media (min-width: 1024px) { .footer-inner { padding: 3rem 2rem 2rem; } }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid #222222; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-logo-text { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 1.5px; }
.footer-desc { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.5); margin: 0; }
.footer-badges { display: flex; gap: 8px; margin-top: 4px; }
.badge-independant { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: white; border: 1px solid var(--color-primary); padding: 4px 10px; }
.badge-gratuit { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); border: 1px solid #333333; padding: 4px 10px; }

.footer-col-title { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.9); margin: 0; padding-bottom: 8px; border-bottom: 1px solid #222222; }
.footer-links-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.footer-link { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.footer-link:hover { color: white; }
.footer-link-dash { width: 12px; height: 1px; background: #333333; flex-shrink: 0; display: inline-block; }

.footer-cta-box { margin-top: 8px; padding: 16px; border: 1px solid #222222; background: #1a1a1a; }
.footer-cta-text { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.6); margin: 0 0 12px; }
.footer-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary); color: white; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 10px 20px; transition: background 0.2s; }
.footer-cta:hover { background: var(--color-primary-dark); }

.footer-social { display: flex; gap: 12px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-family: 'Inter', sans-serif; font-size: 12px; transition: color 0.2s; }
.social-link:hover { color: white; }

.footer-bottom-line { height: 1px; background: #222222; margin: 20px 0; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.footer-bottom p { font-family: 'Inter', sans-serif; margin: 0; }
.footer-bottom p:first-child { font-size: 11px; color: rgba(255,255,255,0.6); }
.footer-bottom p:last-child { font-size: 10px; color: rgba(255,255,255,0.55); }