/* ===========================
   2018.css — modernised (Option 4)
   Conserves legacy classnames for compat
   Palette + tokens at top for easy tweak
   =========================== */

/* ---------- Palette / tokens ---------- */
:root{
  --bg: #FFFFFF;
  --surface: #FAFBFC;
  --muted: #6B7178;
  --text: #111827;            /* dark slate */
  --accent: #FF8C42;          /* modern orange (soft) */
  --accent-600: #FF6A00;
  --accent-100: #FFEDE0;
  --brand: #22324A;           /* blue-navy for headers/contrast */
  --border: #E6E9EE;
  --success: #16A34A;
  --danger: #DC2626;
  --glass: rgba(0,0,0,0.06);
  --radius: 10px;
  --max-width: 1200px;
  --container-padding: 20px;
  --transition: 200ms ease;
  --focus-ring: 0 0 0 4px rgba(255,139,66,0.12);
  --font-sans: "Inter", "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background-color: var(--bg);
  margin: 0;
  padding: 0 0 40px 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Images responsive */
img { max-width:100%; height:auto; display:block; }

/* Links */
a { color: var(--brand); text-decoration:none; transition: color var(--transition); font-weight:600; }
a:hover, a:focus { color: var(--accent-600); outline: none; text-decoration: underline; }

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* header/menu */
.headermenu {
  position: fixed;
  top:0; left:0; right:0;
  height:56px;
  display:flex;
  align-items:center;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,250,0.85));
  border-bottom: 1px solid var(--border);
  z-index: 200;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(34,50,74,0.03);
}

/* nav / menu */
nav { display:flex; align-items:center; gap:16px; }
nav ul { list-style:none; margin:0; padding:0; display:flex; gap:8px; align-items:center; }
nav li { margin:0; padding:0; }
#menu-icon { display:none; width:40px; height:40px; background-size:contain; background-repeat:no-repeat; cursor:pointer; }

/* Legacy horizontal list items */
ul { list-style:none; padding:0; margin:0; }
li { display:inline-block; vertical-align:middle; padding: 12px 12px; }


/* ---------- Sections / headings ---------- */
section {
  margin: 86px 0 24px; /* leave space for fixed header */
  max-width: 980px;
  position: relative;
  padding: 22px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(34,50,74,0.02);
}

/* Headings */
h1 { font-size:1.35rem; font-weight:700; color:var(--brand); margin:0 0 8px; }
h2 { font-size:1.15rem; font-weight:700; color:var(--accent); margin:0 0 8px; }
#Titre { font-size:1.5rem; font-weight:700; color:var(--brand); }
h3 {
  background: transparent;
  font-size:0.85rem;
  font-weight:700;
  color:var(--brand);
  margin: 0 0 8px;
}

/* Text */
p, .paragraphe { color: var(--muted); margin: 0 0 12px; }

/* ---------- Buttons ---------- */
.bouton_submit,
.buttonredirige,
.button {
  display:inline-block;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
  background: linear-gradient(180deg,var(--accent), var(--accent-600));
  color:white;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: 0 6px 18px rgba(34,50,74,0.06);
}
.bouton_submit:hover,
.buttonredirige:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(34,50,74,0.08);
  background: linear-gradient(180deg,var(--accent-600), var(--accent));
}
.bouton_submit:focus,
.buttonredirige:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* legacy .Style_* kept but modernized */
.Style_Blanc { color: var(--text); font-size: 1.8rem; font-weight:700; }
.Style_Blanc_petit { color: #fff; font-size:0.9rem; }

/* ---------- Small utility classes ---------- */
.arrondie { border-radius: 9px; overflow:hidden; }
.box { padding: 8px 12px; }
.box2 { padding: 6px; }

/* ---------- Forms (inputs, textarea, select) ---------- */
input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 8px;
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

input { min-height:40px; }
textarea { min-height: 100px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--accent-100);
}

/* Legacy form yellow theme preserved but toned down */
textarea.legacy,
input.legacy {
  background: linear-gradient(90deg,#fff6d9,#fff9e6);
  border: 1px solid #ffd98a;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin: 10px 0 12px 25px; display:block; }
.breadcrumb ul { display:flex; gap:8px; align-items:center; padding:0; margin:0; }
.breadcrumb li { color:var(--muted); font-size:0.95rem; }
.breadcrumb li::before { content: " | "; color:var(--border); margin: 0 8px; }
.breadcrumb li:first-child::before { content: ""; margin:0; }

/* ---------- Tiny responsive behaviour ---------- */
@media (max-width: 920px){
  .container { padding: 0 16px; }
  .headermenu { padding: 0 12px; }
  nav ul { gap:6px; flex-wrap:wrap; }
  li { padding: 10px; }
  .container .section { padding:16px; }
}

/* ---------- Mobile specific ---------- */
@media (max-width: 640px) {
  #menu-icon { display:inline-block; background-size:contain; }
  nav ul { display:none; position:absolute; left:18px; top:56px; background:white; box-shadow:0 6px 20px rgba(0,0,0,0.06); border-radius:8px; padding:8px; width:220px; }
  navmenu:hover ul { display:block; }
  li { display:block; float:none; width:100%; padding:10px 12px; }
  .container { padding: 0 12px; }
  section { margin-top:80px; padding:16px; }
  .buttonredirige { font-size: 14px; padding:10px 12px; }
}

/* ---------- Showcase / header hero ---------- */
#showcase {
  background-image: url("images/Logo2023-180.png");
  background-position: center;
  background-size: contain;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 80px 20px;
  margin-top:56px;
  position:relative;
}
#showcase .noir { max-width:100%; text-align:center; padding:20px; background: rgba(0,0,0,0.48); border-radius:12px; color: #fff; }
#showcase .noir h3 { font-size: 2.4rem; color: #ffb3a0; margin:0; }
#showcase .noir .button-container { margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- Small helpers to keep legacy classes usable ---------- */
.StyleSOMBRE { color: var(--text); font-weight:700; font-size:1rem; }
.StyleSOMBRE_VERT { color: #0F9D58; font-weight:700; }
.StyleSOMBRE_ROUGE { color: var(--danger); font-weight:700; }
.StyleSOMBRE_ROUGEL { color: var(--accent); font-weight:700; }
.StyleSOMBRE_BLEU { color: var(--brand); font-weight:700; font-size:1.2rem; }
.StyleSOMBRE_ORANGE { color: var(--accent-600); font-weight:700; }
.StyleMUSEE { color: var(--accent); font-size:2.4rem; }

/* zoom classes */
.zoomIs_A, .zoomIs_0, .zoomIs_1, .zoomIs_2, .zoomIs_3 {
  display:inline-block;
  vertical-align:middle;
}
.zoomIs_A { font-size:0.85rem; }
.zoomIs_0 { font-size:1.05rem; }
.zoomIs_1 { font-size:1.15rem; }
.zoomIs_2 { font-size:1.25rem; }
.zoomIs_3 { font-size:1.35rem; }

/* fondtexte variants */
.fondtexte, .fondtexteSB, .fondtexteGRIS {
  padding:10px;
  border-radius:8px;
  font-size:0.95rem;
}
.fondtexte { background: #fff; border: 1px solid var(--border); color:var(--text); }
.fondtexteSB { background: #fff; border: 1px solid #000; color:#000; font-weight:700; }
.fondtexteGRIS { background: #F7F9FB; border: 1px solid var(--border); color:var(--muted); }

/* small decorative rules kept functional */
.voile:hover { background: rgba(255,230,180,0.24); padding: 12px; transition: background var(--transition); }

/* vote stars / small images */
img[alt="votediaporama.jpg"], .vote-stars { max-width:120px; }

/* small accessibility touches */
[role="button"], button { cursor:pointer; }



/* --- Menu mobile horizontal --- */

#mobileMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;              /* Hauteur moderne, réduite */
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Liste horizontale */
.mobile-menu-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    gap: 12px;                 /* Espace entre les icônes */
}

/* Chaque icône */
.mobile-menu-list li img {
    height: 40px;              /* Taille moderne */
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}

.mobile-menu-list li img:hover {
    transform: scale(1.12);
}

/* Ajout d'un espace en haut du contenu principal */
body {
    padding-top: 70px !important;
}



a {
    text-decoration: none !important;
}

a:hover, a:active, a:focus {
    text-decoration: none !important;
}






/* ---------- End modernised stylesheet ---------- */