/* ================================================================
   1. VARIABLES & RESET
   Palette issue du design system HRV-Concept (hrv-concept.css) :
   violet magenta #99468b + dégradés, fonds lilas, Nunito Sans,
   complétée par les couleurs logo et le bleu de fond fournis.
   ================================================================ */
:root{
  /* Charte hrv-concept.css (fichier projet) */
  --rouge:        #99468b;   /* --hrv-accent : violet magenta signature */
  --rouge-fonce:  #742d67;   /* --hrv-accent-mid : dégradés & hover */
  --violet-nuit:  #5e2b56;   /* --hrv-accent-dark : fins de dégradés */
  --beige:        #faf8fb;   /* --hrv-bg : fond lilas très doux */
  --beige-fonce:  #f3e9f1;   /* --hrv-accent-soft : éléments sur fond doux */
  --bleu-fond:    #ccdbe4;   /* bleu du fond (site web) */
  --violet-clair: #a47fd5;   /* écriture violette (site web) */
  --logo-bleu:    #2b82cd;   /* couleurs du logo */
  --logo-violet:  #a90df7;
  --logo-rouge:   #fd000d;
  --danger:       #c0392b;   /* --hrv-danger */
  --blanc:        #ffffff;
  --encre:        #2d2d2d;   /* --hrv-text */
  --gris:         #777777;
  --radius:       16px;      /* cartes (12-16px dans la charte) */
  --radius-sm:    12px;      /* --hrv-radius */
  --ombre:        0 4px 20px rgba(153,70,139,.08);   /* ombres violettes de la charte */
  --ombre-forte:  0 20px 60px rgba(153,70,139,.15);  /* --hrv-shadow */
  --transition:   .3s ease;
  --conteneur:    1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  color:var(--encre);
  background:var(--blanc);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.conteneur{max-width:var(--conteneur);margin:0 auto;padding:0 1.25rem}

/* Titres : graisse 800/900, interlignage serré — signature du site */
h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.02em}
.titre-section{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:.75rem}
.sous-titre-section{color:var(--gris);font-size:1.08rem;max-width:680px;margin-bottom:2.5rem}

/* Boutons pilule — comme les CTA "Sportifs & Entraineurs" / "Chef d'Entreprises" */
.btn{
  display:inline-block;padding:.95rem 2.1rem;border-radius:999px;
  font-weight:700;font-size:1rem;transition:var(--transition);
  text-align:center;
}
.btn-rouge{background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce));color:#fff}
.btn-rouge:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn-noir{background:#fff;border:1px solid var(--rouge);color:var(--rouge)}
.btn-noir:hover{background:var(--beige-fonce);transform:translateY(-2px)}

/* Badges de rubrique */
.badge{
  display:inline-block;padding:.28rem .85rem;border-radius:999px;
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;background:var(--rouge);color:#fff;
}

/* Animation d'apparition au scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ================================================================
   2. HEADER STICKY + MENU MOBILE
   ================================================================ */
.header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(28,28,30,.07);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.25rem;max-width:var(--conteneur);margin:0 auto;
}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.25rem;letter-spacing:-.03em}
.logo__pastille{
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:linear-gradient(135deg,var(--logo-bleu),var(--logo-violet) 55%,var(--logo-rouge));
  display:grid;place-items:center;color:#fff;font-size:1.05rem;flex-shrink:0;
}
.logo sup{color:var(--rouge);font-size:.6em}
.nav{display:flex;align-items:center;gap:1.8rem}
.nav a{font-weight:600;font-size:.96rem;position:relative;padding:.3rem 0}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--rouge);transition:width var(--transition);
}
.nav a:hover::after,.nav a.actif::after{width:100%}
.nav .btn{padding:.6rem 1.4rem;font-size:.9rem}
.nav .btn::after{display:none}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;padding:.4rem;z-index:110}
.burger span{width:26px;height:3px;background:var(--encre);border-radius:2px;transition:var(--transition)}
.burger.ouvert span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0}
.burger.ouvert span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Bandeau d'actualités défilant */
.bandeau{
  background:#1e1b22;color:#fff;font-size:.85rem;overflow:hidden;
  white-space:nowrap;padding:.45rem 0;
}
.bandeau__piste{display:inline-block;animation:defile 40s linear infinite}
.bandeau__piste span{margin-right:3rem}
.bandeau__piste b{color:var(--violet-clair);margin-right:.4rem}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bandeau__piste{animation:none}}

/* ================================================================
   3. HERO — grande typographie centrée, structure du site d'origine
   (kicker → H1 géant → accroche → deux boutons pilule)
   ================================================================ */
.hero{background:linear-gradient(180deg,var(--bleu-fond),var(--beige));padding:5.5rem 0 4.5rem;text-align:center}
.hero .kicker{
  font-size:1.05rem;font-weight:700;color:var(--rouge-fonce);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.2rem;
}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:900;margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:var(--rouge)}
.hero p{max-width:720px;margin:0 auto 2.2rem;font-size:1.15rem;color:var(--gris)}
.hero p b{color:var(--encre)}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ================================================================
   4. À LA UNE — carte principale + 2 cartes secondaires
   ================================================================ */
.une{padding:4.5rem 0}
.une__grille{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem}
.carte-une{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--ombre);min-height:420px;display:flex;align-items:flex-end;
}
.carte-une img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.carte-une:hover img{transform:scale(1.05)}
.carte-une__voile{
  position:relative;width:100%;padding:2rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
}
.carte-une__voile h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:.7rem 0 .5rem}
.carte-une__voile p{font-size:.95rem;opacity:.9}
.carte-une--petite{min-height:200px}
.colonne-une{display:grid;gap:1.5rem}
.meta{font-size:.8rem;opacity:.85;margin-top:.7rem;display:flex;gap:.9rem;flex-wrap:wrap}

/* ================================================================
   5. COMPTEURS — "Quelques chiffres" (données réelles du site)
   ================================================================ */
.chiffres{background:linear-gradient(135deg,var(--rouge),var(--violet-nuit));color:#fff;padding:4rem 0;text-align:center}
.chiffres h2{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:2.5rem}
.chiffres__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.chiffre .nombre{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.2)}
.chiffre .libelle{font-weight:700;margin-top:.3rem;font-size:1.02rem}

/* ================================================================
   6. FIL D'ACTU — onglets + grille d'articles + sidebar
   ================================================================ */
.actus{padding:4.5rem 0;background:var(--beige)}
.onglets{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.2rem}
.onglet{
  padding:.55rem 1.3rem;border-radius:999px;font-weight:700;font-size:.92rem;
  background:#fff;color:var(--encre);border:2px solid transparent;
  transition:var(--transition);
}
.onglet:hover{border-color:var(--rouge)}
.onglet.actif{background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce));color:#fff}
.actus__disposition{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.grille-articles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.carte-article{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--ombre);display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition);
}
.carte-article:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte)}
.carte-article__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.carte-article__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.carte-article:hover .carte-article__media img{transform:scale(1.06)}
.carte-article__media .badge{position:absolute;top:1rem;left:1rem}
.carte-article__corps{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.carte-article__corps h3{font-size:1.16rem;line-height:1.25}
.carte-article__corps h3 a:hover{color:var(--rouge)}
.carte-article__corps p{color:var(--gris);font-size:.95rem;flex:1}
.carte-article__pied{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.82rem;color:var(--gris);border-top:1px solid var(--beige);
  padding-top:.8rem;margin-top:.4rem;
}
.carte-article__pied b{color:var(--encre)}
.carte-article.cachee{display:none}

/* Sidebar */
.sidebar{display:grid;gap:1.5rem;position:sticky;top:90px}
.widget{background:#fff;border-radius:var(--radius);padding:1.6rem;box-shadow:var(--ombre)}
.widget h3{font-size:1.15rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem}
.widget h3::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--rouge)}
.tendance{display:flex;gap:.9rem;padding:.7rem 0;border-bottom:1px solid var(--beige);align-items:baseline}
.tendance:last-child{border-bottom:none}
.tendance .rang{font-size:1.4rem;font-weight:900;color:var(--rouge);min-width:1.6rem}
.tendance a{font-weight:600;font-size:.93rem;line-height:1.35}
.tendance a:hover{color:var(--rouge)}
.widget--news{background:linear-gradient(135deg,var(--rouge),var(--violet-nuit));color:#fff}
.widget--news p{font-size:.9rem;color:rgba(255,255,255,.85);margin-bottom:1rem}
.widget--news input{
  width:100%;padding:.85rem 1.1rem;border-radius:999px;border:none;
  font-family:inherit;font-size:.95rem;margin-bottom:.7rem;
}
.widget--news .btn-rouge{width:100%;background:#fff;color:var(--rouge)}
.widget--news .btn-rouge:hover{filter:none;background:var(--beige-fonce)}
.widget--news .confirmation{color:#7ddb8a;font-weight:600;font-size:.9rem;display:none}

/* ================================================================
   7. SLIDER — "Ils nous font confiance" (galerie du site d'origine)
   ================================================================ */
.slider-section{padding:4.5rem 0}
.slider{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre)}
.slider__piste{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.diapo{min-width:100%;position:relative}
.diapo img{width:100%;height:clamp(300px,48vw,540px);object-fit:cover}
.diapo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
  font-weight:700;font-size:clamp(1rem,2vw,1.3rem);
}
.slider__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:3rem;height:3rem;border-radius:50%;background:rgba(255,255,255,.92);
  font-size:1.2rem;font-weight:900;display:grid;place-items:center;
  transition:var(--transition);box-shadow:var(--ombre);
}
.slider__btn:hover{background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce));color:#fff}
.slider__btn--prec{left:1rem}
.slider__btn--suiv{right:1rem}
.slider__points{display:flex;gap:.5rem;justify-content:center;margin-top:1.2rem}
.point{width:10px;height:10px;border-radius:50%;background:var(--beige-fonce);transition:var(--transition)}
.point.actif{background:var(--rouge);transform:scale(1.25)}

/* ================================================================
   8. NOTRE ÉQUIPE — cartes portrait, comme sur le site d'origine
   ================================================================ */
.equipe{padding:4.5rem 0;background:var(--beige);text-align:center}
.equipe .sous-titre-section{margin-inline:auto}
.equipe h3.groupe{font-size:1.25rem;margin:2.2rem 0 1.4rem;font-style:italic}
.equipe__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:980px;margin:0 auto}
.carte-membre{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);transition:transform var(--transition)}
.carte-membre:hover{transform:translateY(-6px)}
.carte-membre img{aspect-ratio:4/5;object-fit:cover;width:100%}
.carte-membre__infos{padding:1.2rem}
.carte-membre__infos h4{font-size:1.05rem}
.carte-membre__infos span{font-size:.85rem;color:var(--rouge);font-weight:600;display:block}
.carte-membre__infos a{font-size:.8rem;color:var(--gris);text-decoration:underline}

/* ================================================================
   9. CONTACT — "Prendre rendez-vous pour parler à un expert ?"
   ================================================================ */
.contact{padding:5rem 0;text-align:center}
.contact h2{font-size:clamp(2rem,4.5vw,3.2rem);max-width:820px;margin:0 auto 1rem}
.contact p{color:var(--gris);max-width:560px;margin:0 auto 2rem;font-size:1.1rem}
.contact form{
  display:flex;gap:.8rem;max-width:560px;margin:0 auto;flex-wrap:wrap;
  justify-content:center;
}
.contact input{
  flex:1;min-width:240px;padding:1rem 1.4rem;border-radius:999px;
  border:2px solid var(--beige-fonce);font-family:inherit;font-size:1rem;
  transition:border-color var(--transition);
}
.contact input:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(153,70,139,.12)}
.contact .confirmation{color:#1f8a3b;font-weight:700;margin-top:1rem;display:none}

/* ================================================================
   10. FOOTER
   ================================================================ */
.footer{background:#1e1b22;color:#c9c6c3;padding:3.5rem 0 2rem}
.footer__grille{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.footer .logo{color:#fff;margin-bottom:1rem}
.footer p{font-size:.92rem;max-width:320px}
.footer h4{color:#fff;font-size:1rem;margin-bottom:1rem}
.footer li{margin-bottom:.55rem}
.footer a{font-size:.92rem;transition:color var(--transition)}
.footer a:hover{color:var(--violet-clair)}
.footer__bas{
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;
}
.reseaux{display:flex;gap:.8rem}
.reseaux a{
  width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(255,255,255,.1);
  display:grid;place-items:center;font-weight:800;font-size:.8rem;
  transition:var(--transition);
}
.reseaux a:hover{background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce));color:#fff}

/* Bouton retour en haut */
.haut{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:90;
  width:3rem;height:3rem;border-radius:50%;
  background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce));color:#fff;
  font-size:1.2rem;display:grid;place-items:center;box-shadow:var(--ombre);
  opacity:0;pointer-events:none;transition:var(--transition);
}
.haut.visible{opacity:1;pointer-events:auto}
.haut:hover{filter:brightness(1.12)}

/* ================================================================
   11. RESPONSIVE
   ================================================================ */
@media (max-width:1024px){
  .une__grille{grid-template-columns:1fr}
  .actus__disposition{grid-template-columns:1fr}
  .sidebar{position:static;grid-template-columns:repeat(2,1fr)}
  .equipe__grille{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:0;background:var(--beige);flex-direction:column;
    justify-content:center;gap:1.8rem;font-size:1.25rem;
    transform:translateX(100%);transition:transform .35s ease;z-index:105;
  }
  .nav.ouvert{transform:none}
  .chiffres__grille{grid-template-columns:repeat(2,1fr)}
  .grille-articles{grid-template-columns:1fr}
  .sidebar{grid-template-columns:1fr}
  .footer__grille{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .hero{padding:3.5rem 0}
  .equipe__grille,.footer__grille,.chiffres__grille{grid-template-columns:1fr}
  .carte-une{min-height:320px}
}

/* ---- Ajouts version dynamique ---- */
a.carte-une__voile{display:block;color:#fff}

/* ---- Page article (article.php) ---- */
.article-page{padding:3.5rem 0;background:var(--beige)}
.article-page .fil-ariane{font-size:.88rem;color:var(--gris);margin-bottom:1.4rem}
.article-page .fil-ariane a{color:var(--rouge);font-weight:700}
.article-carte{background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);overflow:hidden;max-width:860px;margin:0 auto}
.article-carte__media img{width:100%;max-height:440px;object-fit:cover}
.article-carte__corps{padding:2.2rem clamp(1.2rem,4vw,3rem) 2.6rem}
.article-carte__corps h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.9rem 0 .6rem}
.article-carte__corps .meta{color:var(--gris);opacity:1;margin-bottom:1.6rem}
.article-contenu{font-size:1.06rem;color:#3c3a3e}
.article-contenu p{margin-bottom:1.1rem}
.article-retour{margin-top:2rem}


/* ---- Ajouts dossier de presse ---- */
.chiffres__sous{color:rgba(255,255,255,.85);font-size:1.02rem;margin:-1.8rem 0 2.4rem}
.citation{
  max-width:740px;margin:2.4rem auto 0;text-align:center;
  font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:700;font-style:italic;
  color:var(--rouge-fonce);line-height:1.5;
}
.carte-membre__infos p{font-size:.84rem;color:var(--gris);margin-top:.55rem;line-height:1.45}
.logo {

    width:150px;
    max-width:40%;
    margin-bottom:20px;

}