:root{
--bg:#ffffff;
--ink:#0d1726;
--muted:#56657a;
--card:#f6f8fb;
--line:#e6ebf2;
--accent:#0aa0c9;
--blue:#0b5ed7;
--yellow:#f2d433;
--shadow: 0 10px 30px rgba(13,23,38,.10);
--radius: 18px;
}

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

a{ color:inherit; }
.container{ width:min(1100px, 92vw); margin:0 auto; }

/* ===================== */
/* Bandeau bleu supérieur */
/* ===================== */
.top-yellow-bar{
height:18px;
background:var(--blue);
position: sticky;
top: 0;
z-index: 60;
transition: transform .25s ease;
}

/* ===================== */
/* Header sticky */
/* ===================== */
.topbar{
position:sticky;
top:18px;
z-index:50;
background:#ffffff;
border-bottom:1px solid var(--line);
transition: transform .25s ease;
}

/* Mode release */
body.release-topbar .top-yellow-bar,
body.release-topbar .topbar{
position: relative;
top: auto;
transform: none;
}

/* Header layout */
.topbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 0;
position:relative;
}

.brand img{
height:auto;
max-height:260px;
width:100%;
max-width:1100px;
display:block;
margin:0 auto;
}

/* ===================== */
/* Navigation */
/* ===================== */
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 600px;
} 

.nav a:not(.btn-actualites) {
text-decoration: none;
color: var(--muted);
font-weight: 600;
font-size: 14px;
text-align: center;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--line);
background: #ffffff;
transition: all 0.2s ease;
white-space: nowrap;
}

.nav a:not(.btn-actualites):hover {
color: var(--ink);
border-color: var(--accent);
transform: translateY(-1px);
}

/* Boutons stylés (L'équipe et Contact) */
.nav .btn {
background: linear-gradient(90deg, var(--accent), #0b7ad8);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(10, 160, 201, 0.18);
}

.nav .btn:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(10, 160, 201, 0.25);
}

.nav .btn-ghost {
background: transparent;
border-color: var(--line);
color: var(--ink);
box-shadow: none;
}

.nav .btn-ghost:hover {
background: var(--card);
border-color: var(--accent);
color: var(--accent);
}

/* ===================== */
/* Burger */
/* ===================== */
.burger{
display:none;
width:44px;
height:44px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
cursor:pointer;
}

.burger span{
display:block;
height:2px;
margin:7px 10px;
background:var(--ink);
border-radius:2px;
}

/* ===================== */
/* Boutons */
/* ===================== */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
border-radius:999px;
border:1px solid transparent;
background:linear-gradient(90deg, var(--accent), #0b7ad8);
color:#fff;
text-decoration:none;
font-weight:800;
box-shadow: 0 10px 20px rgba(10,160,201,.18);
}

.btn-small{ padding:10px 14px; font-size:14px; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-ghost{
background:transparent;
border-color: var(--line);
color: var(--ink);
box-shadow:none;
}

/* ===================== */
/* Imagette lettre header */
/* ===================== */
.letter-thumb-link {
position: relative;
display: flex;
align-items: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-radius: 16px;
overflow: visible;
}

.letter-thumb-link:hover {
transform: translateY(-4px);
}

.letter-thumb {
height: 240px;
width: auto;
display: block;
border-radius: 16px;
border: 3px solid var(--line);
box-shadow: 0 8px 30px rgba(13, 23, 38, 0.3);
transition: box-shadow 0.2s ease;
}

.letter-thumb-link:hover .letter-thumb {
box-shadow: 0 12px 40px rgba(13, 23, 38, 0.4);
}

/* Bandeau ROUGE sur l'imagette - IMPACT MAX */
.letter-banner-mini {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%) rotate(-4deg);
background: #dc3545;
color: #ffffff;
font-weight: 900;
font-size: 16px;
padding: 10px 24px;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.5);
z-index: 10;
pointer-events: none;
letter-spacing: 0.5px;
text-transform: uppercase;
}

/* ===================== */
/* Photo équipe en haut */
/* ===================== */
.team-hero {
  padding: 0;
  margin: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.team-hero .container {
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.team-photo {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}


/* ===================== */
/* Imagette lettre VERSION MOBILE */
/* ===================== */
.letter-mobile {
display: none;
padding: 20px 0;
background: var(--bg);
}

.letter-mobile .container {
display: flex;
justify-content: center;
}

.letter-mobile-link {
position: relative;
display: inline-block;
text-decoration: none;
}

.letter-thumb-mobile {
height: 200px;
width: auto;
display: block;
border-radius: 12px;
border: 2px solid var(--line);
box-shadow: 0 6px 20px rgba(13, 23, 38, 0.25);
}

.letter-banner-mobile {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
background: #dc3545;
color: #ffffff;
font-weight: 900;
font-size: 13px;
padding: 8px 16px;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5);
z-index: 10;
letter-spacing: 0.5px;
text-transform: uppercase;
}

/* ===================== */
/* HERO */
/* ===================== */
.hero{
position:relative;
padding: 34px 0 30px;
overflow:hidden;
}

.hero-bg{
position:absolute;
inset:0;
z-index:0;
background:
radial-gradient(900px 500px at 15% 20%, rgba(10,160,201,.12), transparent 60%),
radial-gradient(800px 450px at 70% 25%, rgba(77,184,71,.12), transparent 60%);
pointer-events:none;
}

.hero-grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns: 1.05fr .95fr;
gap:26px;
align-items:stretch;
}

h1{
margin:14px 0 10px;
font-size: clamp(30px, 4vw, 46px);
line-height:1.05;
letter-spacing:-.02em;
color:var(--blue);
}

.lead{
color:var(--muted);
font-size:18px;
}

.hero-cta{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:16px;
}

/* ===================== */
/* Bandeaux */
/* ===================== */
.date-banner{
display:inline-block;
background:var(--blue);
color:#fff;
font-weight:800;
font-size:28px;
padding:16px 28px;
transform: rotate(-4deg);
margin-bottom:16px;
}

.date-banner-visit{
display:inline-block;
background:var(--yellow);
color:var(--ink);
font-weight:800;
font-size:20px;
padding:12px 22px;
transform: rotate(-6deg);
margin-top:18px;
line-height:1.15;
}

/* ===================== */
/* Carte candidat */
/* ===================== */
.hero-card{
background:#ffffff;
padding:18px;
border-radius:24px;
display:grid;
grid-template-rows:auto 1fr;
gap:14px;
}

.photo-wrap{ position:relative; }

.hero-card .photo-wrap {
overflow: visible;
}

.date-banner-on-photo{
position:absolute;
top:14px;
left:14px;
transform: rotate(-6deg);
z-index:10;
box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.hero-card .date-banner-on-photo {
top: -22px;
left: 14px;
transform: rotate(-6deg);
z-index: 10;
box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.portrait{
width:100%;
height:auto;
border-radius: var(--radius);
border:1px solid var(--line);
box-shadow: var(--shadow);
object-fit: cover;
}

/* ===================== */
/* Cartes / panels */
/* ===================== */
.card, .panel{
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

.card{ padding:18px 18px 14px; }
.card h2{ margin:0 0 10px; font-size:18px; }
.checklist{
margin:0;
padding:0 0 0 18px;
color:var(--muted);
}

.checklist li{ margin:6px 0; }
.link{
text-decoration:none;
font-weight:800;
color:var(--accent);
}

.link:hover{ text-decoration:underline; }

/* ===================== */
/* Sections */
/* ===================== */
.team-preview-left {
display: inline-block;
margin-top: 20px;
max-width: 75%;
text-decoration: none;
}

.team-preview-left img {
width: 100%;
height: auto;
border-radius: 16px;
display: block;
}

.team-banner {
  font-size: 12px;
  padding: 5px 10px;
  background: rgba(227, 6, 19, 0.95); /* rouge propre */
  color: #fff;
  border-radius: 20px;
  display: inline-block;
  width: auto;
}

.section{
padding: 56px 0;
position:relative;
z-index:1;
}

.section.alt{
background: #fbfcfe;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.section h2{
margin:0 0 16px;
font-size: clamp(22px, 2.6vw, 34px);
letter-spacing:-.02em;
}

.grid-2{
display:grid;
grid-template-columns: 1fr 1fr;
gap:16px;
align-items:stretch;
}

#projet .grid-2 > aside{
grid-column: 1 / -1;
}

.panel{ padding:18px; }
.panel h3{ margin:0 0 8px; font-size:18px; }
.panel p{ margin:0 0 10px; color:var(--muted); }
.panel.accent{
background: linear-gradient(180deg, rgba(10,160,201,.10), rgba(77,184,71,.08));
border-color: rgba(10,160,201,.25);
}

.section-equipe {
text-align: center;
padding: 60px 20px;
background-color: #f6f6f6;
}

.section-equipe h2 {
margin-bottom: 10px;
}

.section-equipe p {
margin-bottom: 25px;
font-size: 1.1rem;
}

.btn-equipe {
display: inline-block;
padding: 14px 28px;
background-color: #005aa7;
color: #fff;
text-decoration: none;
font-weight: 600;
border-radius: 6px;
transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-equipe:hover {
background-color: #003f78;
transform: translateY(-2px);
}

.team-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
margin-top: 24px;
}

.team-text p {
margin-bottom: 14px;
}

.team-preview {
display: block;
}

.team-preview img {
width: 50%;
height: auto;
border-radius: 16px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: block;
margin-left: auto;
margin-right: auto;
}

.team-preview:hover img {
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.team-cta {
display: inline-block;
margin-top: 18px;
text-decoration: none;
}

.team-cta img {
width: 100%;
max-width: 360px;
border-radius: 16px;
display: block;
}

/* ===================== */
/* Divers */
/* ===================== */
.small{ font-size:13px; color:var(--muted); }
.qrwrap{
display:grid;
grid-template-columns: 140px 1fr;
gap:14px;
align-items:center;
}

.qrwrap img{
width:140px;
height:140px;
border-radius:14px;
border:1px solid var(--line);
background:#fff;
}

/* ===================== */
/* Footer */
/* ===================== */
.footer{
padding: 42px 0;
background: #ffffff;
color: var(--ink);
border-top: 1px solid var(--line);
}

.footer-grid{
display:flex;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
}

.social{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.social-icon img{
width:22px;
height:22px;
display:block;
}

/* ===================== */
/* Scroll anchors */
/* ===================== */
#projet, #rencontre, #procuration, #contact{
scroll-margin-top: 140px;
}

/* ===================== */
/* Phrases clés */
/* ===================== */
.panel .bleu-fort{
color: var(--blue);
font-weight: 900;
display: inline-block;
margin-top: 6px;
padding-left: 10px;
border-left: 4px solid var(--blue);
animation: bleuPop .35s ease-out both;
}

@keyframes bleuPop{
from{ transform: translateY(3px); opacity: 0; }
to{ transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
.panel .bleu-fort{ animation: none; }
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  
  .brand img{
    max-height:110px;
  }

  .topbar-inner{
    padding:12px 0;
  }

  /* CACHER L'IMAGETTE LETTRE DU HEADER SUR MOBILE */
  .letter-thumb-link {
    display: none !important;
  }

  /* AFFICHER L'IMAGETTE LETTRE VERSION MOBILE */
  .letter-mobile {
    display: block;
  }

  /* Photo équipe ENTIÈRE sur mobile */
  .team-hero {
    max-height: none;
    height: auto;
  }
  
  .team-photo {
    max-height: none;
    height: auto;
    object-fit: contain;
  }

  .nav{ display:none; }
  .nav.open{
    display:flex;
    position:absolute;
    top:110px;
    right:4vw;
    width:min(320px, 92vw);
    flex-direction:column;
    padding:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }

  .nav.open a,
  .nav.open .btn{
    width:100%;
    justify-content:center;
  }

  .burger{ display:inline-block; }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-preview {
    order: -1;
  }
}

@media (max-width: 720px){
  .grid-2{ grid-template-columns:1fr; }
  .qrwrap{ grid-template-columns:1fr; }
  .qrwrap img{ width:160px; height:160px; }
  .date-banner{ font-size:24px; }
  .date-banner-visit{ font-size:18px; }
}

@media (max-width: 600px) {
   .team-hero {
    max-height: none;
  }
  
  .team-photo {
    max-height: none;
    object-fit: contain;
  }
}
/* =========================
   ACTUALITÉS
========================= */

.news-grid {
  display: grid;
  gap: 40px;
}

.news-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.news-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}


.news-content {
  padding: 28px;
}

.news-date {
  font-size: 14px;
  font-weight: 600;
  color: #888;
  margin-bottom: 10px;
}

.news-content h3 {
  margin: 0 0 14px;
  font-size: 22px;
}

.news-text {
  white-space: pre-line; /* conserve les retours à la ligne */
  line-height: 1.7;
}

/* Animation apparition */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
  .news-card {
    grid-template-columns: 1fr;
  }
/*   
  .news-card img {
    height: 240px;
  } */
}

/* ===== Badge Nouveau ===== */
.btn-news {
  position: relative;
}

.badge-new {
  position: absolute;
  top: -8px;
  right: -18px;
  background: #e30613;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Mobile adaptation */
@media (max-width: 900px) {
  .badge-new {
    top: -6px;
    right: -12px;
    font-size: 9px;
    padding: 2px 5px;
  }
}

/* =========================
   Médias dans les actualités
========================= */
.news-media {
  width: 100%;
  height: auto;        /* IMPORTANT */
  display: block;
  object-fit: contain; /* évite toute déformation */
}


video.news-media {
  background: #000;
  object-fit: cover;
}


/* ===== Ajustement spécifique mobile bandeau vidéo ===== */
@media (max-width: 600px) {

  .team-banner {
    font-size: 11px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    max-width: 75% !important;
    border-radius: 14px !important;
  }

  .date-banner-on-photo.team-banner {
    width: auto !important;
    display: inline-block !important;
  }

}
/* =========================
   Événements à venir
========================= */

.event-banner {
  background: #ffffff;
  border-left: 6px solid #e30613;
  padding: 18px 20px;
  margin: 20px 0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.event-banner h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 800;
}

.event-item {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.4;
}

.event-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .event-banner {
    padding: 16px;
  }

  .event-banner h3 {
    font-size: 16px;
  }

  .event-item {
    font-size: 14px;
  }
}

.video-wrapper {
  position: relative;
}

/* Bouton son discret */
.sound-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 20px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.sound-toggle:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.05);
}


@keyframes pulseBadge{
    0%{transform:scale(1);}
    50%{transform:scale(1.15);}
    100%{transform:scale(1);}
}

.btn-actualites{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff !important;
  background: linear-gradient(90deg, var(--blue), #1c74ff) !important;
  border: 1px solid transparent !important;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(11,94,215,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.btn-actualites:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11,94,215,0.35);
}

.news-badge{
    animation:pulseBadge 2s infinite;
    position:absolute;
    top:-6px;
    right:-10px;
    background:#e10000;
    color:white;
    font-size:11px;
    padding:3px 7px;
    border-radius:20px;
    font-weight:bold;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
}