/* =========================================================
   Dojo Rabastens – Feuille de Styles (version nettoyée)
   ========================================================= */

/* ------------------------------------------------------------------
   1) THÈME & VARIABLES GLOBALES
   ------------------------------------------------------------------ */
:root{
  /* Couleurs principales — MODIFIABLE */
  --bg:            #fafafa;   /* couleur de fond du site */
  --text:          #111111;   /* couleur de texte par défaut */
  --muted:         #5a5a5a;   /* texte secondaire/discret */
  --accent:        #9a1b1f;   /* rouge principal (liens, points forts) */
  --accent-2:      #b0252a;   /* variante rouge plus sombre (hover) */

  /* Nuances utilitaires — MODIFIABLE */
  --ink:           #111111;   /* alias de texte sombre */
  --ink-2:         #222222;   /* liens par défaut */
  --ink-3:         #333333;
  --ink-4:         #444444;
  --ink-6:         #666666;
  --ink-7:         #777777;
  --ink-8:         #888888;
  --paper:         #ffffff;   /* blanc pur */
  --paper-2:       #f7f7f7;   /* gris très clair (tuiles) */

  /* Bordures & cartes — MODIFIABLE */
  --border:        #dddddd;   /* couleur des bordures */
  --card:          #595959;   /* fond sombre pour items actifs/hover */

  /* Ombres — MODIFIABLE */
  --shadow:        0 10px 30px rgba(0,0,0,.06);
  --shadow-soft:   0 2px 8px rgba(0,0,0,0.05);
  --shadow-strong: 0 12px 28px rgba(0,0,0,.08);

  /* Layout header — MODIFIABLE */
  --clock-w:       100px;     /* largeur réservée à l'horloge (desktop) */
  --dd-gap:        10px;      /* écart visible entre l'onglet et son sous-menu */
  --header-pad:    14px;      /* padding vertical de la barre */
  --mobHeaderH: 72px

  /* Rayons & transitions — MODIFIABLE */
  --radius-sm:     8px;
  --radius:        10px;
  --radius-lg:     12px;
  --radius-xl:     14px;
  --speed:         .2s;       /* durée d'animation standard */
}

/* Breakpoints (informatifs)
   NB : les variables CSS ne s'utilisent pas directement dans @media.
   - Desktop→Mobile nav: 980px
   - Grilles index: 900px
   - Mobile générique: 768px
   - Floats images: 700px
   - Team 1col: 640px
   - XS: 480px
*/

/* ------------------------------------------------------------------
   2) BASE GLOBALE
   ------------------------------------------------------------------ */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-tap-highlight-color:transparent;
  height:100%;                              /* pour sticky footer */
  overflow-x:hidden;                         /* évite le scroll horizontal parasite */
}
body{ display:flex; flex-direction:column; min-height:100vh; -webkit-overflow-scrolling:touch }
img{ max-width:100%; height:auto; border-radius:var(--radius-lg) }
a{ color:var(--ink-2); text-decoration:none }
a:hover{ color:#000; text-decoration:underline }
a:focus-visible,
button:focus-visible,
.group-toggle:focus-visible{ outline:2px solid #bbb; outline-offset:2px }
.container{ width:min(1500px,92%); margin-inline:auto }

/* Petite anim quand les includes se chargent */
#include-header, #include-footer{ animation:fadeIn .3s ease; display:block; width:100% }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:translateY(0)} }

/* ------------------------------------------------------------------
   3) HEADER (desktop par défaut)
   ------------------------------------------------------------------ */
.header{
  position:-webkit-sticky; position:sticky; top:0; z-index:1000;
  background:var(--bg); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  backface-visibility:hidden; will-change:transform; transform:translateZ(0);
}
.header .container{ width:93% }

/* Barre : logo | menu | espace horloge */
.header .nav{
  display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
  padding:var(--header-pad); position:relative;
  padding-right:calc(var(--clock-w) + 60px); /* réserve l'emprise de l'horloge */
}

/* Bloc marque */
.brand{ color:inherit; display:flex; align-items:center; gap:12px; text-decoration:none!important; min-width:0; flex:0 0 auto }
.brand-logo{ width:100px; height:auto; border-radius:var(--radius-sm) }
.brand:hover .brand-title{ font-weight:800; letter-spacing:.3px; transition:color var(--speed) }

/* Menu horizontal (desktop) */
.menu{ display:flex; align-items:center; flex:1 1 auto; min-width:0; justify-content:flex-end; gap:16px }
.menu a, .dropdown-toggle{ align-items:center; vertical-align:middle; padding:10px; border-radius:var(--radius); line-height:1; font-weight:600; color:var(--ink) }
.menu a.active{ background:var(--card); color:var(--paper) }
.menu a:hover{  background:var(--card); color:var(--paper); text-decoration:none }

/* ------------------------------------------------------------------
   4) DROPDOWNS (desktop)
   ------------------------------------------------------------------ */
.dropdown{ position:relative }
.dropdown-toggle{ display:flex; align-items:center; gap:6px; cursor:pointer }
.dropdown-menu{
  position:absolute; left:0; top:calc(100% + var(--dd-gap));
  min-width:260px; background:var(--paper); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:8px; display:none; z-index:1200;
}
.dropdown:hover .dropdown-menu{ display:block }
.dropdown-menu a{ display:block; padding:10px 12px; border-radius:var(--radius); color:var(--ink); transition:background .15s ease }
.dropdown-menu a:hover{ background:var(--card); color:var(--paper) }
@media (min-width:981px){
  .dropdown:hover::after{ content:""; position:absolute; left:0; right:0; top:100%; height:var(--dd-gap); background:transparent; pointer-events:auto; z-index:1100 }
}

/* ------------------------------------------------------------------
   5) HORLOGE (desktop)
   ------------------------------------------------------------------ */
.datetime-fixed{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  line-height:1.1; white-space:nowrap; max-width:var(--clock-w); width:var(--clock-w);
  pointer-events:none; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
#date-line{ font-weight:700; font-size:14px; color:var(--muted); text-transform:capitalize }
#time-line{ font-weight:800; font-size:16px; color:var(--accent); margin-top:2px }
@media (max-width:980px){ .datetime-fixed{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important }}

/* ------------------------------------------------------------------
   6) SECTIONS / CARTES / PROSE
   ------------------------------------------------------------------ */
.hero{ padding:20px }
.hero h1{ font-size:clamp(28px,4vw,42px); margin:0 0 12px }
.hero p{ color:var(--muted); margin:0 }

.grid{ display:grid; gap:22px; align-items:start }
@media (min-width:901px){ .grid.cols-2{ grid-template-columns:65% 35% } }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr } }

.card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow) }
.card h3{ margin-top:0 }

.prose{ font-size:18px }
.prose h1,.prose h2,.prose h3{ line-height:1.25; margin-top:0px }
.prose ul{ margin:0 0 0 18px }
.prose li{ margin:6px 0 }

/* ------------------------------------------------------------------
   7) DIVERS (tables, blockquote, mailto)
   ------------------------------------------------------------------ */
.kicker{ font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:14px; color:var(--accent) }
.table{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden }
.table th,.table td{ padding:10px; border-bottom:1px solid var(--border); text-align:left }
.table thead th{ background:var(--card); color:var(--paper) }
.table-scroll{ overflow-x:auto; margin-top:14px; -webkit-overflow-scrolling: touch; }

.table.table-compet{
  table-layout:auto;      /* laisse le navigateur ajuster selon le contenu */
  min-width: 760px;       /* évite l’écrasement : ajuste 700–860px si besoin */
}

.table.table-cot{
  table-layout:auto;
  min-width:0;
}

.table.table-cot th:first-child,
.table.table-cot td:first-child{ width:50% }
.table.table-cot th:nth-child(2),
.table.table-cot td:nth-child(2),
.table.table-cot th:last-child,
.table.table-cot td:last-child{
  width:25%;
  text-align:right;
}
.table.table-cot td:nth-child(2),
.table.table-cot td:last-child{ white-space:nowrap }

@media (max-width:600px){
  .table.table-cot{ font-size:.8rem }
  .table.table-cot th,.table.table-cot td{ padding:7px 6px }
  .table.table-cot th:first-child,.table.table-cot td:first-child{ width:46% }
  .table.table-cot th:nth-child(2),.table.table-cot td:nth-child(2),
  .table.table-cot th:last-child,.table.table-cot td:last-child{ width:27% }
}

a[href^="mailto:"]{ font-weight:700; color:var(--text); text-decoration:none }
a[href^="mailto:"]:hover{ color:var(--accent); text-decoration:underline }

blockquote{ border-left:4px solid var(--accent); padding-left:12px; margin:10px 0; color:#333 }

/* ------------------------------------------------------------------
   8) NOTICES (jaune / warning / download / info) + Signature unifiée
   ------------------------------------------------------------------ */
.notice{
  position:relative; padding:14px 18px 14px 56px; margin:18px 0; border-left:6px solid; border-radius:var(--radius-xl);
  font-size:17px; line-height:1.5; box-shadow:var(--shadow-soft); background:var(--paper); color:#333; overflow:auto; max-width:100%; box-sizing:border-box;
}
.notice::before{ content:""; position:absolute; left:18px; top:50%; transform:translateY(-50%); width:22px; height:22px; background-size:contain; background-repeat:no-repeat }

.notice-yellow{ background:#fffbe6; border-color:#f0c14b }
.notice-yellow::before{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23f0c14b" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3a6 6 0 0 0-6 6c0 2.5 1.5 4 3 5v2h6v-2c1.5-1 3-2.5 3-5a6 6 0 0 0-6-6zM10 19h4"/></svg>') }

.notice-warning{ background:#fff5f3; border-color:#e67c73; color:#3b2f2f }
.notice-warning::before{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23e67c73" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>') }

.notice-download{ background:#fbfff0; border-color:#b2cc7e; color:#333 }
.notice-download::before{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23b2cc7e" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 15v2a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-2m-8 1V4m0 12-4-4m4 4 4-4"/></svg>') }
/* Bouton Télécharger */
.btn-download{ display:inline-block; background:#666; color:var(--paper) !important; font-weight:600; border-radius:6px; padding:6px 12px; font-size:15px; text-decoration:none; transition:background var(--speed) ease, transform .1s ease; margin-left:8px; line-height:1.2 }
.btn-download:hover{ background:#444 }
.btn-download:active{ transform:scale(.97) }

.notice-info{ background:#f3faff; border-color:#90bcd5; color:#2b4d63 }
.notice-info::before{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%2390bcd5" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16v-4m0-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>') }

/* Signature (UNIQUE) */
.notice-signature{
  width:fit-content; max-width:100%; margin:24px auto 0; padding:10px 14px; align-items:center; gap:8px;
  background:linear-gradient(145deg,#f7f7f7,#efefef); border-left:4px solid var(--accent); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.06);
  color:#222; font-size:15px; font-style:italic; overflow:hidden; box-sizing:border-box; text-align:center;
}
.notice-signature::before{ content:"✍️"; font-size:18px; line-height:1; flex-shrink:0 }
.notice-signature strong{ white-space:nowrap; font-weight:700 }
@media (max-width:480px){ .notice-signature{ font-size:14px; padding:8px 12px } .notice-signature::before{ font-size:16px } }

/* ------------------------------------------------------------------
   9) TEAM / MEMBRES
   ------------------------------------------------------------------ */
.team-head .muted{ color:var(--muted); margin:0 0 8px }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.team-grid > .member-card:last-child:nth-child(3n+1){ grid-column:2 }
.team-grid > .member-card:nth-last-child(2):nth-child(3n+1){ grid-column:1 }
.team-grid > .member-card:last-child:nth-child(3n+2){ grid-column:3 }

.member-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); text-align:center; transition:transform .15s ease, box-shadow .15s ease }
.member-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-strong) }
.member-photo{ width:120px; height:120px; margin:6px auto 14px; border-radius:var(--radius-lg); background:#f6f6f6; border:1px solid var(--border); display:grid; place-items:center; overflow:hidden }
.member-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.initials{ font-weight:800; font-size:28px; letter-spacing:.5px; color:#444 }
.member-name{ display:inline-block; margin:0 auto 6px; padding:6px 14px; background:#eac; border-radius:var(--radius); font-weight:800; color:#111 }
.member-role{ margin:0; color:#777; font-style:italic; font-size:18px }

/* ------------------------------------------------------------------
   10) IMAGES INSÉRÉES DANS LE CONTENU
   ------------------------------------------------------------------ */
.content-img{ display:block; max-width:90%; height:auto; margin:14px auto; border-radius:10px; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.2)); transition:transform var(--speed) ease }
.content-img:hover{ transform:scale(1.02) }
.content-img.left{ float:left; width:clamp(220px,30vw,360px); margin:8px 18px 12px 0; border-radius:10px; shape-outside:inset(0 round 10px); clip-path:inset(0 round 10px) }
.content-img.right{ float:right; width:clamp(220px,30vw,360px); margin:8px 0 12px 18px; border-radius:10px; shape-outside:inset(0 round 10px); clip-path:inset(0 round 10px) }
@media (max-width:700px){ .content-img.left, .content-img.right{ float:none; display:block; margin:14px auto; width:min(90%,520px); clip-path:none; shape-outside:auto } }

/* Images génériques insérées par CMS (sans .content-img) */
.prose img:not(.content-img), .item-page img:not(.content-img), [itemprop="articleBody"] img:not(.content-img){
  display:block; max-width:85%; height:auto; margin:12px auto; border-radius:10px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))
}
@media (max-width:768px){
  .prose img:not(.content-img), .item-page img:not(.content-img), [itemprop="articleBody"] img:not(.content-img){ max-width:92%; margin:10px auto }
}

/* ------------------------------------------------------------------
   11) FACEBOOK
   ------------------------------------------------------------------ */
.fb-wrap{ width:100%; max-width:none; margin:0 auto; border-radius:0; overflow:hidden; box-shadow:none; display:flex; justify-content:center }
.fb-page{ width:100% !important }
.fb-page iframe{ width:100% !important; max-width:100% !important }

/* ------------------------------------------------------------------
   12) PLANNING (tableau affiche)
   ------------------------------------------------------------------ */
.planning-matrix{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; background:var(--paper); border:2px solid #333; box-shadow:0 8px 24px rgba(0,0,0,.06); border-radius:6px; overflow:hidden }
.planning-matrix th, .planning-matrix td{ border:2px solid #333; padding:10px 12px; vertical-align:top; text-align:center; width:25%; box-sizing:border-box; word-wrap:break-word; overflow-wrap:anywhere }
.planning-matrix thead th{ background:#aaa; font-size:22px; letter-spacing:.5px; text-align:center; font-weight:800 }
.pm-time{ font-size:18px; text-align:center; font-weight:700; background:#eee }
.pm-block h4{ margin:0 0 4px; font-size:18px; font-weight:800 }
.pm-block .sub{ display:block; color:#444; font-size:15px; line-height:1.35 }
.pm-note{ font-size:15px; line-height:1.4; color:#333; background:var(--paper) }


/* Supprime la bordure noire du haut sous Samedi */
.cellule-vide{ position:relative }
.cellule-vide::before{ content:""; position:absolute; top:-4px; left:0; width:100%; height:6px; background:var(--paper); z-index:2 }

/* Hauteur uniforme par ligne (cases blanches) — MODIFIABLE */
.planning-matrix tbody tr{ height:150px }

.planning-matrix-scroll{ overflow-x:auto; margin-top:14px; -webkit-overflow-scrolling: touch; }

.planning-matrix.matrix{
  table-layout:auto;      /* laisse le navigateur ajuster selon le contenu */
  min-width: 760px;       /* évite l’écrasement : ajuste 700–860px si besoin */
}

/* ------------------------------------------------------------------
   13) ACCORDION
   ------------------------------------------------------------------ */
.accordion{ border-radius:var(--radius); overflow:hidden }
.accordion-item{ border:1px solid var(--border); margin-bottom:8px; border-radius:var(--radius); background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,0.05) }
.accordion-header{ width:100%; background:#f3f3f3; color:#222; font-size:1.1rem; font-weight:600; padding:12px 16px; text-align:left; border:none; border-radius:var(--radius); cursor:pointer; transition:background var(--speed), color var(--speed) }
.accordion-header:hover{ background:#e9e9e9 }
.accordion-header.active{ background:#f59d9d; color:var(--paper) }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 16px }
.accordion-body.open{ padding:12px 16px 16px }
.accordion-body h3{ margin-top:10px; font-size:1.05rem; color:#444 }
.accordion-body ul{ margin:6px 0 10px 20px }
.accordion-body ul li{ margin-bottom:4px }

/* ------------------------------------------------------------------
   14) BOUTON "REMONTER EN HAUT"
   ------------------------------------------------------------------ */
#backToTop{
  position:fixed; bottom:25px; right:25px; width:45px; height:45px; border:none; border-radius:50%;
  background:var(--ink-6); color:var(--paper); font-size:20px; font-weight:bold; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.2); display:none; z-index:1500; transition:background .3s, transform .3s;
}
#backToTop:hover{ background:var(--accent-2) }
@media (max-width:900px){ #backToTop{ width:40px; height:40px; font-size:22px; bottom:15px; right:15px } }

/* ------------------------------------------------------------------
   15) FOOTER (+ sticky footer)
   ------------------------------------------------------------------ */
main{ flex:1 0 auto; padding-bottom:24px }
main > *:last-child{ margin-bottom:0 !important }
.container > *:last-child{ margin-bottom:0 }

.footer{ flex-shrink:0; margin-top:16px; padding:20px 0; border-top:1px solid var(--border); color:#555; text-align:center; line-height:1.4 }
.footer .grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); justify-items:center; text-align:center; gap:10px }
.footer .grid > div{ margin-bottom:10px }
.footer p{ margin:4px 0 }
.footer .container:last-child{ margin-top:12px; color:var(--ink-8); font-size:13px }

/* ------------------------------------------------------------------
   16) VERSION MOBILE RAFFINÉE (<=768px)
   ------------------------------------------------------------------ */
@media (max-width:768px){
  html,body{ font-size:14px; line-height:1.45; overflow-x:hidden }
  main.container{ padding:0 10px }
  h1{ font-size:1.4rem; line-height:1.3 }
  h2{ font-size:1.2rem }
  h3{ font-size:1.05rem }
  p,li{ font-size:.95rem }

  .header{ display:flex; flex-direction:column; align-items:center; padding:8px 0 10px; border-bottom:1px solid var(--border) }
  .header .container.nav{ flex-direction:row; align-items:center; gap:12px; padding:10px 16px; }
  .brand{ flex-direction:row; text-align:center; align-items:center; gap:8px }
  .brand-logo{ width:64px; height:auto; }
  .brand-title{ font-size:1rem; font-weight:700 }
  .kicker{ font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent) }

  /* Les définitions structurelles de .mobile-toggle et .mobile-panel
     sont centralisées dans la section 17 (<=980px). Ici on ajuste seulement
     la taille des contrôles si besoin. */
  .btn-download, button, .newsletter button{ font-size:.85rem; padding:6px 10px }

  .planning-matrix{ width:100%; font-size:.85rem; border-collapse:separate; border-spacing:0; table-layout:fixed; background:var(--paper); border:2px solid #333; box-shadow:0 8px 24px rgba(0,0,0,.06); border-radius:6px; overflow:hidden }
  .planning-matrix th, .planning-matrix td{ border:1px solid #333; padding:6px 8px; vertical-align:top; text-align:center; width:25%; box-sizing:border-box; word-wrap:break-word; overflow-wrap:anywhere }
  .planning-matrix thead th{ background:#aaa; font-size:.9rem; letter-spacing:.5px; text-align:center; font-weight:700 }
  .pm-time{ font-size:.85rem; text-align:center; font-weight:600; background:#eee }
  .pm-block h4{ margin:0 0 4px; font-size:.9rem; font-weight:700 }
  .pm-block .sub{ display:block; color:#444; font-size:.8rem; line-height:1.35 }
  .pm-note{ font-size:15px; line-height:1.4; color:#333; background:var(--paper) }

  .notice{ font-size:.9rem; padding:10px 12px 10px 42px; margin:12px 0; line-height:1.4 }

  .footer{ font-size:.85rem; text-align:center; padding:20px 10px }
  .footer .container.grid{ display:flex; flex-direction:column; gap:18px; align-items:center }
  .footer p{ margin:4px 0; line-height:1.4 }
  .footer .newsletter{ display:flex; flex-direction:column; gap:6px; align-items:center; width:100% }
  .footer .newsletter input, .footer .newsletter button{ width:90%; max-width:320px; font-size:.85rem; padding:8px }

  #backToTop{ bottom:14px; right:14px; width:44px; height:44px; font-size:20px; box-shadow:0 2px 6px rgba(0,0,0,0.2) }

  .hero{ padding:10px }
  .hero h1{ font-size:1.3rem; text-align:center; margin-bottom:8px }
  .card{ padding:14px }
  article.card.prose{ padding:12px; font-size:.95rem }
  article.card.prose ul{ margin-left:16px }

  .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr !important; gap:16px }
  .team-grid{ grid-template-columns:1fr }
  .member-card{ padding:14px }
  .team-grid > .member-card{ grid-column:auto !important }

}

/* ------------------------------------------------------------------
   17) MOBILE / ÉCRANS ÉTROITS (<=980px)
   ------------------------------------------------------------------ */
.mobile-toggle{ display:none }     /* masqué par défaut (desktop) */
.mobile-panel{  display:none }     /* masqué par défaut (desktop) */

@media (max-width:980px){
  .header .nav{ flex-wrap:wrap; padding-right:14px }
  .menu{ display:none }

  /* Bouton "Menu" */
  .mobile-toggle{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border); padding:12px 16px; border-radius:var(--radius); background:var(--paper);
    margin-left:auto; position:relative; z-index:1400;
    transition:all var(--speed) ease-in-out; font-weight:900;
  }
  .mobile-toggle:hover{ background:var(--accent); color:var(--paper); border-color:var(--accent-2); transform:scale(1.05); cursor:pointer }

  /* Panneau overlay (mobile) */
  .mobile-panel{
    position:absolute; left:0; right:0; top:100%; background:var(--paper); border-top:1px solid var(--border);
    padding:12px; display:none; z-index:1300; box-shadow:0 10px 30px rgba(0,0,0,.08); pointer-events:auto;
    flex-direction:column; width:100%;
  }
  .mobile-panel a.tile{ display:block; padding:14px 16px; border-radius:var(--radius-lg); color:var(--ink); font-weight:700; background:var(--paper-2); border:1px solid var(--border); margin:10px 0; text-decoration:none }
  .mobile-panel a.tile:hover{ background:var(--card); color:var(--paper) }

  .mobile-group{ border:1px solid var(--border); border-radius:16px; padding:10px; background:var(--bg); margin:12px 0 }
  .group-head{ display:flex; align-items:center; gap:10px }
  .group-link{ display:block; flex:1 1 auto; padding:14px 16px; border-radius:var(--radius-lg); color:var(--ink); font-weight:800; background:var(--paper-2); border:1px solid var(--border); text-decoration:none }
  .group-link:hover{ background:var(--card); color:var(--paper); text-decoration:none }
  .group-toggle{ margin-left:8px; border:1px solid var(--border); background:var(--paper); border-radius:var(--radius); width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; line-height:1; user-select:none }
  .group-toggle:focus{ outline:2px solid #bbb; outline-offset:2px }
  .mobile-submenu{ display:none; padding:8px 4px 0 }
  .mobile-submenu a{ display:block; padding:12px 14px; border-radius:var(--radius); color:var(--ink); font-weight:600; background:var(--paper); border:1px solid var(--border); margin:8px 6px 0; text-decoration:none }
  .mobile-submenu a:hover{ background:var(--card); color:var(--paper) }
}
@media (min-width:981px){ .mobile-panel{ display:none !important } }

/* ------------------------------------------------------------------
   18) ACTUALITÉS 2026 / ACCESSIBILITÉ / APPELS À L'ACTION
   ------------------------------------------------------------------ */
.skip-link{
  position:fixed; left:16px; top:-80px; z-index:3000; padding:12px 16px;
  color:#fff; background:#111; border-radius:0 0 10px 10px; font-weight:800;
}
.skip-link:focus{ top:0 }

.event-banner{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:28px;
  align-items:center; margin:0 0 24px; padding:clamp(22px,4vw,42px);
  color:#fff; background:linear-gradient(135deg,#9d1118 0%,#c5222c 55%,#7f0d13 100%);
  border-radius:22px; box-shadow:0 18px 48px rgba(119,9,16,.24); overflow:hidden;
}
.event-banner h2{ margin:.1em 0 .4em; font-size:clamp(1.7rem,3vw,2.5rem); color:#fff }
.event-banner p{ margin:.55em 0; color:#fff }
.event-banner img{ width:100%; height:auto; max-height:360px; object-fit:cover; object-position:right center; border-radius:16px; box-shadow:0 14px 28px rgba(0,0,0,.24) }
.eyebrow{ margin:0; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:900; opacity:.85 }
.button-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.button{ display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; font-weight:800; text-decoration:none; transition:transform .15s ease, background .15s ease }
.button:hover{ transform:translateY(-1px); text-decoration:none }
.button-primary{ background:#fff; color:#96121a }
.button-primary:hover{ background:#fff5f5; color:#6d0a10 }
.button-secondary{ border:1px solid currentColor; background:transparent; color:inherit }
.section-intro{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; padding:18px 20px; background:#fff; border:1px solid var(--border); border-radius:16px }
.section-intro p{ margin:0; font-size:1.05rem }
.section-intro .button-secondary{ flex:none; color:var(--accent); background:#fff }

.news-section{ margin-top:28px }
.news-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:18px 0 28px }
.news-grid--home{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.news-card{ --news-accent:var(--accent); display:flex; flex-direction:column; min-width:0; overflow:hidden; background:#fff; border:1px solid var(--border); border-top:4px solid var(--news-accent); border-radius:18px; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease }
.news-card--stages{ --news-accent:#4169a1 }
.news-card--resultats{ --news-accent:#a87308 }
.news-card--competitions{ --news-accent:#356f4d }
.news-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-strong) }
.news-card-image{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#eee }
.news-card-body{ display:flex; flex:1; flex-direction:column; padding:20px }
.news-card h2{ margin:0 0 10px; font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.25 }
.news-card-topline{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px }
.news-category{ display:inline-flex; padding:5px 9px; color:#fff; background:var(--news-accent); border-radius:999px; font-size:.72rem; font-weight:900; letter-spacing:.03em; line-height:1; text-transform:uppercase }
.news-meta{ margin:0; color:var(--muted); font-size:.8rem; font-weight:700; text-align:right; text-transform:capitalize }
.news-copy p{ margin:.5em 0; line-height:1.6 }
.news-link{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:auto; padding-top:16px; color:#315ca4; font-weight:800 }
.news-link span{ display:inline-grid; width:22px; height:22px; place-items:center; color:#fff; background:#1877f2; border-radius:50%; font-family:Arial,sans-serif; font-size:15px; font-weight:900 }
.empty-state{ grid-column:1/-1; margin:0; padding:30px; text-align:center; background:#fff; border:1px dashed var(--border); border-radius:16px; color:var(--muted) }

:focus-visible{ outline:3px solid #ef9b9f; outline-offset:3px }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important } }

@media (max-width:800px){
  .event-banner{ grid-template-columns:1fr; padding:22px }
  .event-banner img{ max-height:300px }
  .section-intro{ align-items:flex-start; flex-direction:column }
  .news-grid{ grid-template-columns:1fr }
}
@media (min-width:801px) and (max-width:1050px){ .news-grid--home{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:480px){
  .news-card-topline{ align-items:flex-start; flex-direction:column; gap:8px }
  .news-meta{ text-align:left }
}