/* Droits-Accès — calendrier d'activités.
   Disposition inspirée de TDSCO : barre de contrôle, grille pleine largeur,
   titres d'activités dans les cases, bascule Mois / Semaine.
   Tout est scopé sous #da-calendar pour ne pas fuir dans le thème Bridge. */

#da-calendar{
  /* palette Droits-Accès */
  --da-green:#7eb836; --da-green-lt:#8cc540; --da-green-dk:#6aa02c;
  --da-dark:#303030; --da-dark-2:#454545;
  --da-ink:#303030; --da-muted:#6f6f6f; --da-line:#e3e3e3; --da-line-lt:#f0f0f0;
  --da-bg:#ffffff; --da-bg-alt:#fafafa;
  /* accessibilite (retour RAAMM, 2026-09) : jamais de texte blanc, noir sur
     fond pale ; police systeme large et reguliere dans les cases. */
  --da-green-pale:#dfedcd; --da-green-pale-2:#d3e6ba;
  --da-cell-font:"Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
  color:var(--da-ink); background:var(--da-bg);
  font-family:inherit; line-height:1.4;
  padding:18px;
  /* La largeur DISPONIBLE n'est pas monotone : le menu vertical du site occupe
     261px et ne se replie qu'en dessous de 1001px, si bien qu'a 1060px le
     calendrier ne fait que 600px alors qu'a 995px il en fait 768. Aucun seuil
     base sur la fenetre ne decrit cela — on interroge donc le conteneur. */
  container-type:inline-size; container-name:dacal;
}
#da-calendar *,#da-calendar *::before,#da-calendar *::after{box-sizing:border-box;}

/* ---------- barre de contrôle ---------- */
#da-calendar .dac-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 18px;
}
#da-calendar .dac-today{
  background:#fff; color:var(--da-dark); border:2px solid var(--da-dark);
  padding:8px 18px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:background .25s ease;
}
#da-calendar .dac-today:hover{background:var(--da-line-lt);}
#da-calendar .dac-nav{display:flex; align-items:center; gap:10px;}
#da-calendar .dac-nav button{
  background:none; border:0; color:var(--da-dark); cursor:pointer;
  font-size:22px; line-height:1; padding:4px 10px;
  font-family:inherit; transition:background .25s ease,color .25s ease;
}
#da-calendar .dac-nav button:hover{background:var(--da-line-lt); color:var(--da-green);}
#da-calendar .dac-period{
  font-size:17px; font-weight:700; color:var(--da-dark);
  min-width:170px; text-align:center; text-transform:capitalize;
}
#da-calendar .dac-views{display:flex; gap:8px; margin-left:auto;}
#da-calendar .dac-views button{
  background:var(--da-line-lt); color:var(--da-dark); border:0;
  padding:10px 22px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:background .25s ease,color .25s ease;
}
#da-calendar .dac-views button:hover{background:#e2e2e2;}
#da-calendar .dac-views button.is-active{background:var(--da-green-pale); color:var(--da-dark); box-shadow:inset 0 -3px 0 var(--da-green-dk);}
#da-calendar .dac-views button.is-active:hover{background:var(--da-green-pale-2);}

/* ---------- en-tête des jours ---------- */
#da-calendar .dac-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
#da-calendar .dac-dow{
  background:var(--da-green-pale); color:var(--da-dark); text-align:center;
  padding:11px 4px; font-size:14px; font-weight:700; letter-spacing:.4px;
}

/* ---------- cases ---------- */
#da-calendar .dac-cell{
  background:var(--da-bg); border:1px solid var(--da-line);
  padding:8px 9px; min-height:112px; display:flex; flex-direction:column; gap:5px;
}
#da-calendar .dac-cell.is-out{background:var(--da-bg-alt); border-color:var(--da-line-lt);}
#da-calendar .dac-cell.is-out .dac-daynum{color:#8a8a8a;}
/* bordure 2px au lieu de 1 : le padding recule d'autant pour garder la meme boite */
#da-calendar .dac-cell.is-today{background:var(--da-green-pale); border:2px solid var(--da-green-dk); padding:7px 8px;}
#da-calendar .dac-cell.is-today .dac-daynum{color:var(--da-dark);}
#da-calendar .dac-cell.is-today .dac-ev{color:var(--da-dark); text-decoration-color:rgba(48,48,48,.55);}
#da-calendar .dac-cell.is-today .dac-ev:hover{color:var(--da-green-dk); text-decoration-thickness:2px;}
#da-calendar .dac-daynum{font-family:var(--da-cell-font); font-size:17px; font-weight:700; color:var(--da-dark); line-height:1;}
#da-calendar .dac-evs{display:flex; flex-direction:column; gap:10px; min-width:0;}
#da-calendar .dac-ev{
  display:block; font-family:var(--da-cell-font); font-size:16px; line-height:1.25; color:var(--da-ink);
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(48,48,48,.55);
  overflow-wrap:anywhere; transition:color .2s ease,text-decoration-color .2s ease;
}
#da-calendar .dac-ev:hover,#da-calendar .dac-ev:focus{
  color:var(--da-green-dk); text-decoration-color:var(--da-green-dk);
}

/* ---------- vue semaine ---------- */
#da-calendar.view-week .dac-cell{min-height:300px;}
#da-calendar.view-week .dac-ev{font-size:15px;}

/* ---------- vide ---------- */
#da-calendar .dac-empty{
  color:var(--da-muted); text-align:center; padding:34px 12px; font-size:14.5px;
  border:1px dashed var(--da-line); margin-top:14px;
}

/* ---------- responsive : pilote par la largeur du CONTENEUR ---------- */

/* le padding du conteneur ne peut pas dependre de sa propre requete :
   il reste sur la fenetre. */
@media (max-width:1300px){ #da-calendar{padding:14px;} }
@media (max-width:760px){ #da-calendar{padding:12px;} }

/* ~768px de calendrier -> 85px utiles par case : lisible en compact */
@container dacal (max-width:1000px){
  #da-calendar .dac-cell{min-height:96px; padding:7px;}
  #da-calendar .dac-cell.is-today{padding:6px;}
  #da-calendar .dac-ev{font-size:14px;}
  #da-calendar .dac-evs{gap:8px;}
  #da-calendar .dac-dow{font-size:12.5px; padding:9px 2px;}
  #da-calendar .dac-daynum{font-size:15px;}
}

/* Seuil cale sur un palier reel du gabarit : la largeur du calendrier saute de
   768 a 950px entre 1260 et 1300 de fenetre. A 768px, 7 colonnes ne laissent que
   85px utiles et les titres s'enroulent sur 4 lignes — on bascule donc en liste
   des le palier 768, ce qui place la transition juste sous 1260 de fenetre. */
@container dacal (max-width:800px){
  #da-calendar .dac-grid{grid-template-columns:1fr; gap:8px;}
  #da-calendar .dac-dow{display:none;}
  #da-calendar .dac-cell{min-height:0; flex-direction:row; align-items:flex-start; gap:14px; padding:10px 12px;}
  #da-calendar .dac-cell.is-today{padding:9px 11px;}
  #da-calendar .dac-cell.is-empty-day{display:none;}
  #da-calendar .dac-cell.is-out{display:none;}
  #da-calendar .dac-daynum{flex:0 0 68px; font-size:15px; padding-top:2px;}
  #da-calendar .dac-daynum::after{content:attr(data-dow); font-weight:400; color:var(--da-muted); display:block; font-size:12px; margin-top:2px;}
  #da-calendar .dac-cell.is-today .dac-daynum::after{color:var(--da-ink);}
  #da-calendar .dac-evs{flex:1 1 auto; gap:10px;}
  #da-calendar .dac-ev{font-size:15px;}
  #da-calendar .dac-views{margin-left:0; width:100%;}
  #da-calendar .dac-views button{flex:1 1 50%; padding:9px 12px;}
  #da-calendar .dac-bar{gap:10px;}
  #da-calendar .dac-today{flex:0 0 auto; padding:9px 14px; font-size:13px;}
  /* .dac-views passe a 100% et retombe sur sa propre ligne : la nav occupe seule
     la fin de la premiere ligne, on l'aligne donc a droite plutot qu'au centre. */
  #da-calendar .dac-nav{flex:1 1 auto; justify-content:flex-end;}
  #da-calendar .dac-period{min-width:0; font-size:15px;}
}
#da-calendar.view-week .dac-cell{min-height:300px;}
@container dacal (max-width:800px){ #da-calendar .dac-cell{min-height:0;} }

/* Tres etroit : la barre se stacke completement, chaque element sur sa ligne.
   Seuil cale sur un palier du gabarit — fenetre 480 -> conteneur 300px,
   fenetre 481 -> 420px — donc 360px place la bascule pile a 480 de fenetre. */
@container dacal (max-width:360px){
  #da-calendar .dac-today{width:100%;}
  #da-calendar .dac-nav{width:100%; justify-content:space-between;}
}

/* Repli pour un navigateur sans requetes de conteneur : on retombe sur la
   fenetre. Moins juste dans la bande 1001-1100, mais jamais casse. */
@supports not (container-type:inline-size){
  @media (max-width:1300px){
    #da-calendar .dac-cell{min-height:96px; padding:7px;}
  #da-calendar .dac-cell.is-today{padding:6px;}
    #da-calendar .dac-ev{font-size:14px;}
    #da-calendar .dac-evs{gap:8px;}
    #da-calendar .dac-dow{font-size:12.5px; padding:9px 2px;}
    #da-calendar .dac-daynum{font-size:15px;}
  }
  @media (max-width:480px){
    #da-calendar .dac-today{width:100%;}
    #da-calendar .dac-nav{width:100%; justify-content:space-between;}
  }
  @media (max-width:760px){
    #da-calendar .dac-grid{grid-template-columns:1fr; gap:8px;}
    #da-calendar .dac-dow{display:none;}
    #da-calendar .dac-cell{min-height:0; flex-direction:row; align-items:flex-start; gap:14px;}
    #da-calendar .dac-cell.is-empty-day,#da-calendar .dac-cell.is-out{display:none;}
    #da-calendar .dac-daynum{flex:0 0 68px; font-size:15px;}
    #da-calendar .dac-daynum::after{content:attr(data-dow); font-weight:400; color:var(--da-muted); display:block; font-size:12px;}
    #da-calendar .dac-ev{font-size:15px;}
    #da-calendar .dac-views{margin-left:0; width:100%;}
    #da-calendar .dac-nav{flex:1 1 auto; justify-content:flex-end;}
  }
}

/* ============================================================
   Fiche d'une activité (single-activites.php)
   Même feuille : elle est aussi mise en file sur is_singular('activites').
   Le gabarit intérieur de ce site est SOMBRE (wrapper #303030, texte blanc) :
   ces règles sont écrites pour ce fond, pas pour un fond clair.
   ============================================================ */
/* pas de plafond de largeur : le contenu remplit le container comme partout
   ailleurs sur le site (colonne mesuree a 1187px sur les pages temoins). */
.da-activite-back{margin:0 0 22px;}
/* Le gabarit menage un espace entre la barre de titre et le contenu, mais
   SEULEMENT a partir de 1000px de fenetre : a 999 il tombe a 0 et le lien
   « Retour au calendrier » vient toucher la barre verte. On le retablit. */
@media (max-width:999px){
  .da-activite{padding-top:50px;}
}
.da-activite-back a{
  display:inline-block; color:#fff; font-weight:600; font-size:14px;
  text-decoration:none; transition:color .25s ease;
}
.da-activite-back a:hover,.da-activite-back a:focus{color:#8cc540;}
.da-activite-thumb{margin:0 0 26px;}
.da-activite-thumb img{display:block; width:100%; height:auto;}
.da-activite-infos{
  list-style:none; margin:0 0 26px; padding:20px 24px;
  background:rgba(255,255,255,.06); border-left:4px solid #7eb836; color:#fff;
}
.da-activite-infos li{margin:0 0 8px; font-size:15px; line-height:1.5; color:#fff;}
.da-activite-infos li:last-child{margin-bottom:0;}
.da-activite-infos strong{color:#8cc540; font-weight:700;}
.da-activite-desc{font-size:15.5px; line-height:1.65;}
.da-activite-desc > *:last-child{margin-bottom:0;}
.da-activite-desc a{color:#8cc540;}

/* contenu riche saisi dans le wysiwyg — fond sombre */
.da-activite-desc p{margin:0 0 16px;}
/* le thème met les titres en graisse 300, plus léger que le corps de texte (400) :
   un intertitre s'y lit comme subordonné au paragraphe qu'il coiffe. On rétablit
   une hiérarchie par la graisse ET par l'écart de taille. */
.da-activite-desc h2,.da-activite-desc h3,.da-activite-desc h4{
  color:#8cc540; margin:30px 0 12px; line-height:1.25; font-weight:600;
}
.da-activite-desc h2{font-size:26px; font-weight:700;}
.da-activite-desc h3{font-size:21px;}
.da-activite-desc h4{font-size:18px;}
.da-activite-desc > *:first-child{margin-top:0;}
.da-activite-desc ul,.da-activite-desc ol{margin:0 0 16px; padding-left:22px;}
.da-activite-desc li{margin:0 0 7px; line-height:1.55;}
.da-activite-desc a{color:#8cc540; text-decoration:underline; text-underline-offset:2px;}
.da-activite-desc a:hover{color:#7eb836;}
.da-activite-desc strong{color:#fff; font-weight:700;}
.da-activite-desc blockquote{
  margin:20px 0; padding:2px 0 2px 18px; border-left:3px solid #7eb836;
  color:#d8d8d8; font-style:italic;
}
.da-activite-desc hr{border:0; border-top:1px solid rgba(255,255,255,.15); margin:26px 0;}