/*╭━━━━━━━━━━╯ DÉBUT Thème & variables (couleurs logo à adapter ici) ╰━━━━━━━━━━╮*/
:root {
  --bg: #f7f7f7;
  --text: #111111;
  --card: #ffffff;
  --accent: #00B5D8; /* <- Ajuster selon votre logo principal */
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary-color: var(--accent);
  --transition: .18s ease;
}
html[data-theme="dark"] {
  --bg: #262624;        /* Fond sombre fourni */
  --text: #FFFFFF;      /* Texte sur fond sombre */
  --card: #2f2f2c;
  --accent: #00B5D8;    /* Accent par défaut (modifiable) */
  --muted: #cbd5e1;
  --border: #3b3b37;
  --primary-color: var(--accent);
}
/*╰━━━━━━━━━━╮ FIN Thème & variables ╭━━━━━━━━━━╯*/

/* Curseur par défaut pour le contenu */
body, main, header, footer, table, th, td, p, h1, h2, h3, h4, h5, h6, span, div { cursor: default; }
/* Curseur pointeur pour les éléments interactifs */
a, button { cursor: pointer; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.row{display:flex;align-items:center}
.row.between{justify-content:space-between}
.row.center{align-items:center}
.row.start{align-items:flex-start}
.row.gap{gap:1rem}

.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:10}
.brand .logo{height:58px;display:block}
.brand .dark-only{display:none}
html[data-theme="dark"] .brand .light-only{display:none}
html[data-theme="dark"] .brand .dark-only{display:block}

/*╭━━━━━━━━━━╯ DÉBUT Correctif visibilité des boutons nav (outline) ╰━━━━━━━━━━╮*/
.main-nav a{ border: none; } /* annule le 1px transparent générique */

.main-nav a.btn-outline,
.nav-btn.btn-outline{
  border: 2px solid var(--primary-color) !important;
  color: var(--text);
  background: transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.main-nav a.btn-outline:hover,
.main-nav a.btn-outline:focus,
.nav-btn.btn-outline:hover,
.nav-btn.btn-outline:focus{
  outline: none;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.main-nav a.btn-outline-danger,
.nav-btn.btn-outline-danger{
  border: 1px solid #b91c1c !important;
  color: #b91c1c;
  background: transparent;
}
.main-nav a.btn-outline-danger:hover,
.main-nav a.btn-outline-danger:focus,
.nav-btn.btn-outline-danger:hover,
.nav-btn.btn-outline-danger:focus{
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, #b91c1c 25%, transparent);
}
/*╰━━━━━━━━━━╮ FIN Correctif visibilité des boutons nav (outline) ╭━━━━━━━━━━╯*/

.hamburger{display:none;background:transparent;border:0;width:42px;height:42px;border-radius:10px;position:relative}
.hamburger span{position:absolute;left:8px;right:8px;height:2px;background:var(--text);transition:.2s}
.hamburger span:nth-child(1){top:12px}.hamburger span:nth-child(2){top:20px}.hamburger span:nth-child(3){top:28px}

/*╭━━━━━━━━━━╯ DÉBUT Bouton bascule thème (🌙 / ☀️) ╰━━━━━━━━━━╮*/
.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:transparent;
  border-radius:12px;
  padding:.5rem .7rem;
  cursor:pointer;
  transition: var(--transition);
  margin-left:.5rem;
}
.theme-toggle:hover,
.theme-toggle:focus{
  outline:none;
  background:var(--primary-color);
  color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
/*╰━━━━━━━━━━╮ FIN Bouton bascule thème ╭━━━━━━━━━━╯*/

.site-main{padding:2rem 1.25rem}
.hero{padding:2rem 1.5rem;border:1px solid var(--border);border-radius:20px;background:var(--card);text-align:center}
.hero h1{margin-top:0;font-size:2rem}
.cta{display:flex;gap:.75rem;justify-content:center}

.btn{display:inline-block;padding:.6rem 1rem;margin-top:1rem;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text);background:transparent}
.btn:hover{border-color:var(--accent)}
.btn.accent{background:var(--accent);color:#fff;border-color:transparent}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem}
.alert{padding:.75rem 1rem;border-radius:12px;margin:.75rem 0;border:1px solid var(--border);background:var(--card)}
.alert.success{border-color:#22c55e}
.alert.danger{border-color:#ef4444}
.alert.warning{border-color:#f59e0b}
.form label{display:flex;flex-direction:column;gap:.3rem;margin:.25rem 0}

input,select{padding:.55rem .7rem;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{display:inline-block;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:var(--text)}
.tag:hover{border-color:var(--accent)}
.muted{color:var(--muted)}

.site-footer{border-top:1px solid var(--border);padding:1.25rem 0;margin-top:2rem}

/*╭━━━━━━━━━━╯ DÉBUT Correctif lisibilité SELECT en mode sombre ╰━━━━━━━━━━╮*/
html{ color-scheme: light; }
html[data-theme="dark"]{ color-scheme: dark; }

select{
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
html[data-theme="dark"] select,
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup{
  background-color: var(--card);
  color: var(--text);
}
html[data-theme="dark"] select option:checked{
  background-color: #3b3b37;
  color: #fff;
}
/*╰━━━━━━━━━━╮ FIN Correctif lisibilité SELECT en mode sombre ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Styles cartes vignettes (local à la page) ╰━━━━━━━━━━╮*/
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.thumb-card{display:block;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card);text-decoration:none;color:var(--text);transition:transform .12s, border-color .12s}
.thumb-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.thumb{aspect-ratio:16/9;background-size:cover;background-position:center;}
.thumb-body{padding:.75rem 1rem}
.thumb-body h3{margin:.1rem 0 .25rem;font-size:1.05rem}
.thumb-body p{margin:0;color:var(--muted);font-size:.9rem}
.badge-all{display:inline-block;margin-left:.5rem;padding:.1rem .5rem;border-radius:999px;border:1px solid var(--border);font-size:.75rem;color:var(--muted)}
/*╰━━━━━━━━━━╮ FIN Styles cartes vignettes (local à la page) ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Variante <img> responsive (contain) ╰━━━━━━━━━━╮*/
.thumb-imgwrap{aspect-ratio:16/9;background:var(--card);display:block;overflow:hidden}
.thumb-imgwrap img{width:100%;height:100%;object-fit:contain;display:block}
/*╰━━━━━━━━━━╮ FIN Variante <img> responsive (contain) ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Contraste renforcé des champs de saisie ╰━━━━━━━━━━╮*/
:root{
  --field-bg: var(--card);
  --field-text: var(--text);
  --field-border: #d1d5db;
  --field-border-hover: #9ca3af;
  --field-focus: var(--accent);
  --field-placeholder: #6b7280;
}
html[data-theme="dark"]{
  --field-bg: #242422;
  --field-text: var(--text);
  --field-border: #6d6d68;
  --field-border-hover: #8e8e88;
  --field-focus: var(--accent);
  --field-placeholder: #cbd5e1;
}
input, select, textarea{
  padding: .6rem .75rem;
  border-radius: 10px;
  border: 1.5px solid var(--field-border);
  background-color: var(--field-bg);
  color: var(--field-text);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:hover, select:hover, textarea:hover{
  border-color: var(--field-border-hover);
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 25%, transparent);
}
input::placeholder, textarea::placeholder{
  color: var(--field-placeholder);
  opacity: 1;
}
input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly]{
  opacity: .85;
  cursor: not-allowed;
  background-color: color-mix(in srgb, var(--field-bg) 85%, #888 15%);
}
select{
  background-color: var(--field-bg);
  color: var(--field-text);
  border-color: var(--field-border);
}
html[data-theme="dark"] select,
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup{
  background-color: var(--field-bg);
  color: var(--field-text);
}
html[data-theme="dark"] select option:checked{
  background-color: #3b3b37;
  color: #fff;
}
/*╰━━━━━━━━━━╮ FIN Contraste renforcé des champs de saisie ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Styles boutons de navigation ╰━━━━━━━━━━╮*/
.nav-btn{ border-width:2px; border-style:solid; border-color:var(--border); padding:.5rem .9rem; }
.btn-pill{ border-radius:999px; }

.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-ghost:hover{ border-color:var(--primary-color); }

.btn-accent{
  background:var(--primary-color); color:#fff; border-color:transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-accent:hover{ transform: translateY(-3px); box-shadow:0 6px 14px -8px rgba(0,0,0,.4); }

.btn-outline-danger{
  color:#b91c1c; border-color:#b91c1c; background:transparent;
}
.btn-outline-danger:hover{ background:#b91c1c; color:#fff; }
/*╰━━━━━━━━━━╮ FIN Styles boutons de navigation ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Boutons outline visibles au repos ╰━━━━━━━━━━╮*/
.btn-outline{
  background: transparent;
  color: var(--text);
  border: 2px solid var(--primary-color);
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn-outline:hover,
.btn-outline:focus{
  outline: none;
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
html[data-theme="dark"] .btn-outline{ border-color: var(--primary-color); }
/*╰━━━━━━━━━━╮ FIN Boutons outline visibles au repos ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Icônes dans les boutons nav (alignement propre) ╰━━━━━━━━━━╮*/
.nav-btn{ display:inline-flex; align-items:center; gap:.4rem; }
/* ✔️ Correction: icônes 18px (au lieu de 38px) pour un rendu propre sur mobile */
.nav-btn .icon-16{ width:48px; height:38px; flex:0 0 auto; }
/*╰━━━━━━━━━━╮ FIN Icônes dans les boutons nav ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Cards avec relief (ombre + sur-élévation au survol) ╰━━━━━━━━━━╮*/
.card-relief{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow:
    0 10px 20px -15px rgba(0,0,0,.35),
    0 2px  6px  -2px rgba(0,0,0,.20);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.card-relief:hover,
.card-relief:focus-within{
  transform: translateY(-4px);
  box-shadow:
    0 18px 30px -18px rgba(0,0,0,.45),
    0 6px  14px -6px  rgba(0,0,0,.28);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
html[data-theme="dark"] .card-relief{
  box-shadow:
    0 10px 20px -16px rgba(0,0,0,.55),
    0 2px  6px  -3px rgba(0,0,0,.35);
}
html[data-theme="dark"] .card-relief:hover,
html[data-theme="dark"] .card-relief:focus-within{
  box-shadow:
    0 20px 36px -20px rgba(0,0,0,.65),
    0 8px  18px -8px  rgba(0,0,0,.45);
}
@media (prefers-reduced-motion: reduce){
  .card-relief{ transition: none; }
  .card-relief:hover,
  .card-relief:focus-within{ transform: none; }
}
/*╰━━━━━━━━━━╮ FIN Cards avec relief (ombre + sur-élévation au survol) ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Sécurité anti-débordement de la carte formulaire ╰━━━━━━━━━━╮*/
.form.card{
  max-width:100%;
  overflow:hidden;            /* évite les coins qui « bavent » quand un enfant dépasse */
}
/*╰━━━━━━━━━━╮ FIN Sécurité anti-débordement de la carte formulaire ╭━━━━━━━━━━╯*/

/*╭━━━━━━━━━━╯ DÉBUT Harmonisation des images dans le flux (optionnel mais utile) ╰━━━━━━━━━━╮*/
img{ max-width:100%; height:auto; display:block; }
/*╰━━━━━━━━━━╮ FIN Harmonisation des images ╭━━━━━━━━━━╯*/