/* ===== THEME ===== */
:root{
  --water-50:#eef8ff; --water-100:#d7efff; --water-200:#b9e2ff; --water-300:#8ed0ff;
  --water-400:#54b6ff; --water-500:#0ea5e9; --water-600:#0284c7; --water-700:#1e3a8a;
  --water-800:#0b1220; --copper:#b87333; --ring:rgba(14,132,199,.22);
  --text:#222; --muted:#6b7280;

  /* NAV */
  --nav-bg: linear-gradient(180deg,rgba(11,18,32,.88),rgba(2,6,23,.88));
  --nav-text:#e5e7eb; --nav-accent:var(--water-500);
  --nav-ring:var(--ring); --nav-border:rgba(255,255,255,.08);
}

/* ===== TITRE ===== */
h1{
  display:inline-block; font-size:2.2rem; font-weight:800; line-height:1.15;
  margin:.25em 0 .8em; padding:.52rem .9rem .58rem; color:#f4faff;
  text-shadow:0 1px 2px rgba(0,0,0,.25), 0 0 8px rgba(15,76,129,.25);
  background:linear-gradient(90deg,#174a8a 0%, #1e88c8 55%, #1560a9 100%);
  border:1px solid #8fc8ff; border-radius:12px; box-shadow:0 8px 22px rgba(15,76,129,.12);
  position:relative; overflow:hidden;
}
h1::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 52%);
  transform:skewX(-16deg); animation:shine 7.5s ease-in-out infinite; pointer-events:none; mix-blend-mode:screen; opacity:.45;
}
@keyframes shine{0%{transform:translateX(-35%) skewX(-16deg)}50%{transform:translateX(35%) skewX(-16deg)}100%{transform:translateX(-35%) skewX(-16deg)}}
@media (max-width:600px){ h1{font-size:1.65rem;padding:.44rem .7rem .5rem;} }

/* ===== BASE/CONTENU ===== */
body,.content{ font:16px/1.6 system-ui,sans-serif; color:var(--text); text-align:left; }
.content h2{ font-size:1.4rem; margin:1.2em 0 .4em; color:var(--water-700); }
.content h3{ font-size:1.2rem; margin:1em 0 .3em; color:var(--water-600); }
.content p{ margin:.6em 0; }
.content ul,.content ol{ margin:.6em 0 .6em 1.2em; }

.fs-18{font-size:18px;} .fs-22{font-size:22px;} .fs-28{font-size:28px;}
.c-black{color:#111;} .c-gray-700{color:#374151;} .c-gray-500{color:var(--muted);}
.c-white{color:#fff;} .c-blue{color:var(--water-600);} .c-red{color:#d93025;}
.c-green{color:#188038;} .c-copper{color:var(--copper);} .c-teal{color:#0d9488;}

.badge{padding:0 .3em;border-radius:4px;}
.bg-blue{background:#e6f4ff;} .bg-red{background:#ffe2e0;} .bg-green{background:#e5f6ea;}
.bg-teal{background:#d9f3f1;} .bg-gray{background:#e9ecef;} .bg-dark{background:#111;color:#fff;}

.content a{ text-decoration:underline; transition:color .15s, background .15s; }
.content a:hover{ color:#111; background:linear-gradient(180deg,transparent 60%, rgba(14,132,199,.18) 0); text-decoration:none; }

.content .align-left{text-align:left;} .content .align-center{text-align:center;}
.content .align-right{text-align:right;} .content .align-justify{text-align:justify;}
.content img{ max-width:100%; height:auto; display:block; margin:.8em auto; }
.content img.align-center{ margin:.8em auto; }
.content img.img-border{ border:2px solid #e5e7eb; border-radius:6px; padding:3px; }
.content img.img-shadow{ box-shadow:0 4px 12px rgba(0,0,0,.18); }
.content img.img-half{ width:50%; max-width:600px; }
.content table{ border-collapse:collapse; width:100%; }
.content th,.content td{ border:1px solid #e5e7eb; padding:.5em; }

/* TinyMCE preview helpers */
span.align-left,span.align-center,span.align-right{ display:inline-block; width:100%; }
span.align-left{text-align:left;} span.align-center{text-align:center;} span.align-right{text-align:right;}
span.img-border{ border:2px solid #e5e7eb; border-radius:6px; padding:2px; }
span.img-shadow{ box-shadow:0 4px 12px rgba(0,0,0,.18); padding:2px; }
span.img-half{ transform:scale(0.8); transform-origin:left center; display:inline-block; }

/* ===== NAV / HEADER compact ===== */
.site-header{
  position:sticky; top:0; z-index:300; isolation:isolate;
  display:flex; justify-content:center; padding:8px 12px;
}
.header-bar{
  display:inline-flex; align-items:center; gap:14px; max-width:100%;
  padding:6px 10px; border-radius:8px; box-sizing:border-box;
  background:rgba(255,255,255,.05);
  border:1px solid var(--nav-border);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  backdrop-filter:saturate(1.2) blur(8px);
}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand img{height:42px; width:auto; display:block; border-radius:6px}

.nav{
  position:relative; z-index:301;
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
  padding:.6rem .8rem; border-radius:999px;
  background:var(--nav-bg);
  border:1px solid var(--nav-border);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  backdrop-filter:saturate(1.2) blur(8px);
}
.nav__link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .95rem; border-radius:999px; line-height:1;
  font-weight:600; color:var(--nav-text); text-decoration:none; cursor:pointer;
  transition:transform .15s ease, color .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav__link:hover{
  color:#0b1220;
  box-shadow:0 0 0 6px var(--nav-ring), 0 12px 28px rgba(0,0,0,.35);
}
.nav__link.is-active{
  color:#fff; background:linear-gradient(135deg,var(--water-700),var(--water-600));
}

/* ===== CONTACT — Button Style ===== */
.nav .nav__link.nav__link--cta{
  position: relative; 
  overflow: visible;
  color: #111;
  background: linear-gradient(135deg, var(--water-300), var(--water-500)); /* Utilisation des couleurs du thème */
  border: none; 
  text-decoration: none;
  box-shadow: 0 0 0 4px var(--nav-ring), 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}

/* === Underline Dynamic Animation === */
.nav .nav__link.nav__link--cta::after{
  content: "";
  position: absolute;
  left: 20%; 
  right: 20%;
  bottom: 0.25em;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffffff, #f5f5dc, #ffffff, #f0e68c); /* Gradient effect for underline */
  background-size: 300% 100%;
  animation: underlineFlow 1.6s linear infinite; /* Increased speed */
  opacity: 1;
  box-shadow: 0 0 6px rgba(255, 255, 255, .6);
  pointer-events: none;
  transition: height .2s ease, opacity .2s ease;
}

/* === Hover and Active States for CTA === */
.nav .nav__link.nav__link--cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(217, 200, 69, .35), 0 12px 26px rgba(0, 0, 0, .4);
}
.nav .nav__link.nav__link--cta:hover::after,
.nav .nav__link.nav__link--cta.is-active::after{
  height: 3px; 
  opacity: 1;
}

/* === Underline Animation Keyframes === */
@keyframes underlineFlow{
  0%{ background-position: 0% 0; }
  100%{ background-position: 300% 0; }
}

.nav__link--cta{
  color:#0b1220;
  background:linear-gradient(135deg,var(--water-300),var(--water-500));
  box-shadow:0 0 0 4px var(--nav-ring), 0 8px 22px rgba(0,0,0,.35);
}

/* === Bouton Admin — bleu normal, rouge au survol === */
.nav__link--admin{
  position:relative;
  overflow:hidden;
  display:inline-flex; align-items:center; gap:.5rem;
  color:#fff;
  background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 60%,#a78bfa 100%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 0 4px rgba(14,165,233,.18), 0 10px 28px rgba(2,6,23,.6);
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease;
  z-index:1;
}

/* survol — passage rouge vif avec halo */
.nav__link--admin:hover{
  background:linear-gradient(135deg,#dc2626 0%,#ef4444 50%,#f87171 100%);
  box-shadow:0 0 12px rgba(239,68,68,.5), 0 14px 34px rgba(2,6,23,.7);
  transform:translateY(-1px);
}

/* halo rouge au survol */
.nav__link--admin::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(239,68,68,.35), transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.nav__link--admin:hover::after{
  opacity:1;
}

/* Option accessibilité */
@media (prefers-reduced-motion:reduce){
  .nav__link--admin:hover{ animation:none; transform:none; }
}

/* Icône masque */
.nav__icon{
  width:1.05em; height:1.05em; display:inline-block; background:#fff;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2l7 3v6c0 5-3.4 9.7-7 11-3.6-1.3-7-6-7-11V5l7-3z"/></svg>') no-repeat center/contain;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2l7 3v6c0 5-3.4 9.7-7 11-3.6-1.3-7-6-7-11V5l7-3z"/></svg>') no-repeat center/contain;
}


/* Conteneur page */
.wrap{ max-width:960px; margin:0 auto; padding:16px; }

/* Logo section */
.logo-section{ display:flex; justify-content:flex-start; padding:8px 0 0; }
.logo-section img{
  height:110px; margin-left:16px; width:auto; display:block;
  filter:drop-shadow(0 0 6px rgba(14,132,199,.55));
  animation:glowPulse 2.2s ease-in-out infinite;
}
@media (max-width:600px){
  .brand img{height:34px}
  .header-bar{width:100%; justify-content:space-between}
  .logo-section img{ height:90px; }
}
@keyframes glowPulse{
  0%{filter:drop-shadow(0 0 4px rgba(14,132,199,.35))}
  50%{filter:drop-shadow(0 0 10px rgba(14,132,199,.75))}
  100%{filter:drop-shadow(0 0 4px rgba(14,132,199,.35))}
}

/* Accessibilité */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:static; width:auto; height:auto; padding:.4rem; background:#111; color:#fff; border-radius:6px; }

/* Footer public */
html, body{ height:100%; margin:0; }
body{ display:flex; flex-direction:column; background:#eef4f9; }
.site-footer{
  margin-top:auto; width:100%; text-align:center; padding:2.2rem 0;
  font-size:.9rem; background:rgba(255,255,255,.06);
  border-top:1px solid rgba(0,0,0,.08); backdrop-filter:blur(6px);
  color:#555; position:relative; z-index:100;
}
.site-footer a{ color:var(--water-600); text-decoration:none; transition:color .2s, text-shadow .2s; }
.site-footer a:hover{ color:#111; text-shadow:0 0 6px rgba(14,132,199,.35); }