/* ============================================================
   JUDO CLUB YOSEKAN SAUVETERRE — Corrections visuelles (5 oct. 2026)
   À charger APRÈS style.css. Ne remplace rien : ne fait que
   compléter / surcharger certaines règles de la page d'accueil.
   ============================================================ */

/* ---------- 7. Textes gris plus foncés et plus grands ---------- */
:root{--gris:#434A5E}

.chapeau p{font-size:1.05rem}
.duo p{font-size:1.02rem}
.pastille{font-size:.95rem}
.valeur p{font-size:1rem}
.groupe .desc{font-size:1rem}
.creneau{font-size:1rem}
.chiffre span{font-size:1rem}
.evenement p{font-size:1rem}
.note{font-size:.98rem}
.infos span,.infos a{font-size:1rem}
.sur-titre{font-size:.82rem}
.actu-date span{font-size:.92rem}
.actu-detail p{font-size:1rem}
.hero-pastille small{font-size:.85rem}

/* ---------- 9. Logo de l'en-tête plus lisible ---------- */
/* Le logo est rogné (logo-entete.png) : même hauteur d'en-tête, motif plus grand. */
.nav{padding:10px 0}
.marque img{width:60px;height:60px}

/* ---------- 2. Haut de page : chiffres + logo France Judo ---------- */
.hero-bas{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}
.hero-chiffres div{min-width:128px;padding:14px 18px}
.hero-chiffres span{display:block;font-size:.92rem;line-height:1.35;color:rgba(255,255,255,.94)}
.affilie-inline{
  display:flex;align-items:center;justify-content:center;
  margin-top:0;padding:8px 14px;border-radius:14px;
}
.affilie-inline img{width:116px}
@media (max-width:600px){
  .hero-bas{gap:12px}
  .affilie-inline img{width:120px}
}

/* ---------- 5. Icônes : un seul jeu d'icônes SVG au lieu des émojis ---------- */
.etiquette svg{width:16px;height:16px;flex:none}
.hero-pastille .rond{color:var(--rouge)}
.hero-pastille .rond svg{width:24px;height:24px}
.actu-icone{color:var(--bleu)}
.actu-icone svg{width:28px;height:28px}

.infos .ico{background:var(--bleu-voile);color:var(--bleu)}
.infos li:nth-child(even) .ico{background:var(--rouge-voile);color:var(--rouge)}
.infos .ico svg{width:22px;height:22px;display:block}

.reseaux a svg{width:19px;height:19px;display:block}
.reseaux a svg.plein{fill:currentColor}

/* ---------- 3. Bloc « Dernières nouvelles » ---------- */
/* Empêche le chariot de pousser le bloc hors de son cadre quand il contient beaucoup de nouvelles. */
.actu-texte{min-width:0}
@media (max-width:760px){.actu-carte{align-items:stretch}}
.actu-anciennes-label{color:var(--bleu-nuit)}
.actu-anciennes{position:relative;display:block}
.actu-carousel{
  gap:18px;padding:6px 6px 34px;margin:-6px -6px -22px;
  scroll-padding-left:6px;scroll-padding-right:6px;   /* laisse la place à l'ombre des cartes */
}
/* Les cartes plus anciennes reprennent exactement la largeur de celles du dessus. */
.actu-carousel .actu-item{flex:0 0 calc(50% - 9px)}
.actu-carousel .actu-item:only-child{flex-basis:100%}
/* Flèches posées sur les bords (elles ne rétrécissent plus les cartes)
   et masquées quand il n'y a rien à faire défiler. */
.actu-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;font-size:1.6rem;
  background:#fff;color:var(--bleu);border:2px solid var(--bleu);
  box-shadow:0 8px 20px rgba(6,12,59,.22);
}
.actu-nav:hover{background:var(--bleu);color:#fff}
.actu-prev{left:-16px}
.actu-next{right:-16px}
.actu-nav:disabled{display:none}
@media (max-width:600px){
  /* Sur téléphone, la date passe au-dessus du texte : plus de colonne étroite. */
  .actu-item{flex-direction:column;gap:8px}
  .actu-date{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4em}
  .actu-date br{display:none}
  .actu-date span{margin:0 0 0 .5em}
}
@media (max-width:760px){
  .actu-carousel .actu-item{flex-basis:86%}
  .actu-carousel .actu-item:only-child{flex-basis:100%}
  .actu-prev{left:-8px}
  .actu-next{right:-8px}
}

/* ---------- 4. Grilles sans cases vides ---------- */
/* Valeurs : 4 colonnes × 2 rangées (au lieu de 5 + 3). */
.valeurs{grid-template-columns:repeat(4,1fr);gap:18px}
/* Sections par âge : 4 colonnes sur une seule rangée (au lieu de 3 + 1). */
.groupes{grid-template-columns:repeat(4,1fr);gap:20px}
.groupe .corps{padding:20px 20px 22px}
.groupe h3{font-size:1.12rem}
@media (max-width:1100px){
  .groupes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .valeurs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .groupes{grid-template-columns:1fr}
  .valeur{padding:20px 16px}
}
@media (max-width:380px){
  .valeurs{grid-template-columns:1fr}
}

/* Galerie : 2 colonnes sur téléphone (page moins longue). */
@media (max-width:600px){
  .galerie{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* ---------- 10. Photo des réseaux : carrée, centrée ---------- */
.social-promo-visuel img{aspect-ratio:1/1;max-width:420px;margin-inline:auto}

/* ---------- 11. Flux Instagram : emplacement réservé + chargement différé ---------- */
.insta-feed{
  position:relative;max-width:960px;margin:0 auto;min-height:360px;
  border-radius:var(--rayon);overflow:hidden;background:#E9ECF6;
}
.insta-feed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.75) 50%,transparent 75%);
  transform:translateX(-100%);animation:insta-brille 1.5s ease-in-out infinite;
}
.insta-feed iframe{position:relative;z-index:1;display:block;width:100%;border:0;overflow:hidden}
.insta-feed.charge{min-height:0;background:none;overflow:visible}
.insta-feed.charge::after{display:none}
@keyframes insta-brille{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.insta-feed::after{animation:none}}
.insta-suite{text-align:center;margin-top:28px}

/* ---------- 6. Carte : même hauteur que la liste, remplie à 100 % ---------- */
.contact-grille{align-items:stretch}
.carte-bloc{display:flex;flex-direction:column;gap:14px;min-width:0}
.carte{flex:1;min-height:380px;position:relative}
.carte iframe{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.carte-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:960px){
  .carte{min-height:320px}
}

/* ---------- 8. Accès administration : discret, dans le pied de page ---------- */
.pied-bas .admin-pied{
  display:inline;padding:0;font-size:.82rem;
  color:rgba(255,255,255,.55);border-bottom:1px dotted rgba(255,255,255,.4);
}
.pied-bas .admin-pied:hover{color:#fff;transform:none}
.pied-bas .sep{margin:0 8px;opacity:.5}