/*
 * Styles des actualités (carrousel « À la une », vignettes, corps d'article)
 * absents du CSS Tailwind précompilé dans _next/ — ajoutés ici plutôt que de
 * recompiler Tailwind.
 */
.pc-hero { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .pc-hero { aspect-ratio: 16 / 9; } }
.pc-hero-slide { transition: opacity .3s ease; }
.pc-hero-slide[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.pc-hero-surtitre { letter-spacing: .14em; }
.pc-vignette { width: 112px; height: 72px; }
.pc-couverture { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) { .pc-hero-slide { transition: none; } }

.pc-article { max-width: 68ch; font-size: 1rem; line-height: 1.75; }
.pc-article > * + * { margin-top: 1em; }
.pc-article h2 { margin-top: 1.6em; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.pc-article h3 { margin-top: 1.4em; font-size: 1.1rem; font-weight: 600; }
.pc-article ul { padding-left: 1.25rem; list-style: disc; }
.pc-article li + li { margin-top: .35em; }
.pc-article a { text-decoration: underline; text-underline-offset: 2px; }

/* L'attribut hidden doit l'emporter sur grid/flex de Tailwind : sans JS, les
   commandes du carrousel (inopérantes) restent masquées. */
[data-carrousel] [hidden] { display: none !important; }

/* Grand écran : le 16:9 pleine largeur dépasserait la hauteur de l'écran. */
@media (min-width: 1024px) { .pc-hero { aspect-ratio: auto; height: 460px; } }

/*
 * Dégradés des pastilles « Numéros utiles » (teinte en base, ex. from-red-500 to-red-600) :
 * absents du Tailwind précompilé car la valeur vient des données.
 */
.from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-red-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}
.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-blue-700{--tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position)}

/*
 * Présentation blog de /actualites/ (vedette + grille de cartes) : les
 * variantes md:/lg: nécessaires sont absentes du Tailwind précompilé.
 */
.pc-grille-blog { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .pc-grille-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pc-grille-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.pc-vedette-visuel { aspect-ratio: 16 / 9; }
.pc-vedette-titre { font-size: 1.375rem; }
@media (min-width: 768px) {
  .pc-vedette-lien { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .pc-vedette-visuel { aspect-ratio: auto; min-height: 320px; height: 100%; }
  .pc-vedette-texte { justify-content: center; padding: 2rem; }
  .pc-vedette-titre { font-size: 1.75rem; }
}
@media (min-width: 1024px) { .pc-vedette-visuel { min-height: 380px; } .pc-vedette-titre { font-size: 2rem; } }

.pc-carte, .pc-vedette { transition: box-shadow .2s ease, transform .2s ease; }
.pc-carte:hover, .pc-vedette:hover { box-shadow: 0 10px 30px -12px rgba(31, 24, 18, .25); transform: translateY(-2px); }
.pc-visuel-img { transition: transform .4s ease; }
.pc-carte:hover .pc-visuel-img, .pc-vedette:hover .pc-visuel-img { transform: scale(1.04); }
.pc-repli { background: linear-gradient(135deg, #f3e9da 0%, #ead8bd 55%, #e2c49b 100%); }

.pc-tronque-3, .pc-tronque-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.pc-tronque-3 { -webkit-line-clamp: 3; }
.pc-tronque-4 { -webkit-line-clamp: 4; }

.pc-vide { max-width: 28rem; margin: 0 auto; padding: 3rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  .pc-carte, .pc-vedette, .pc-visuel-img { transition: none; }
  .pc-carte:hover, .pc-vedette:hover, .pc-carte:hover .pc-visuel-img, .pc-vedette:hover .pc-visuel-img { transform: none; }
}

/* Utilitaires Tailwind utilisés par la présentation blog mais absents de _next/. */
.self-start { align-self: flex-start; }
.rounded-full { border-radius: 9999px; }
.p-5 { padding: 1.25rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-1\.5 { margin-top: .375rem; }
.h-full { height: 100%; }

/* Page article en présentation blog. */
.pc-lecture { max-width: 48rem; margin-left: auto; margin-right: auto; }
.pc-article-titre { font-size: 1.75rem; }
@media (min-width: 768px) { .pc-article-titre { font-size: 2.5rem; } }
.pc-grande-couverture { aspect-ratio: 16 / 9; max-width: 64rem; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .pc-grande-couverture { aspect-ratio: 21 / 9; } }
.pc-lecture .pc-article { max-width: none; }
.pc-voisins { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .pc-voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-voisin-suivant { text-align: right; } .pc-voisin-suivant > span:first-child { justify-content: flex-end; } }
.gap-x-3 { column-gap: .75rem; }
.pt-6 { padding-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.hover\:border-terracotta-500:hover { border-color: rgb(193 68 14); }

/*
 * Teintes des catégories de bons plans (border-*/text-* dépendant des
 * données) : plusieurs combinaisons ne sont référencées nulle part dans le
 * code source Next.js d'origine, donc absentes du Tailwind précompilé.
 */
.border-savane-400 { border-color: #3D947A; }
.text-savane-600 { color: #0E5340; }
.border-ocre-400 { border-color: #E9A13B; }
.border-terracotta-400 { border-color: #DA6F3C; }
.border-blue-500 { border-color: #3b82f6; }
.text-blue-600 { color: #2563eb; }

/*
 * Badge de date du programme de l'édition (accueil) : largeur et espacement
 * absents du Tailwind précompilé.
 */
.w-16 { width: 4rem; }
.gap-0\.5 { gap: .125rem; }

/*
 * lg:items-start (grille 3 colonnes de Numéros utiles/Bons plans/Sponsor)
 * doit revenir à stretch une fois repassé en colonne unique à partir de xl,
 * sinon l'encart sponsor (sans largeur intrinsèque) se réduit à son contenu
 * au lieu de remplir la colonne comme ses voisins.
 */
@media (min-width: 1280px) { .xl\:items-stretch { align-items: stretch; } }

/*
 * Bandeaux de phase du calendrier (couleur_bandeau en base, ex. « bg-savane-200
 * text-savane-700 » pour un quart de finale) : seules les teintes déjà
 * utilisées ailleurs dans le site Next.js d'origine ont été conservées dans
 * le CSS précompilé. Sans ces classes, huitièmes/quarts/demi-finales
 * s'affichaient sans couleur (texte nu sur fond blanc), les rendant
 * indiscernables des préliminaires — d'où leur ajout ici.
 */
.bg-savane-100 { background-color: #D6EBE1; }
.bg-savane-200 { background-color: #A9D6C3; }
.text-savane-700 { color: #0A3F31; }
.bg-ocre-200 { background-color: #F8DCA4; }
.text-ocre-800 { color: #5A3210; }

/*
 * Refonte calendrier (étape E) : panneau de filtres canton/phase replié par
 * défaut sur mobile (il occupait tout le premier écran), forcé ouvert à
 * partir de lg où la place ne manque pas. Case à cocher masquée + <label>,
 * même technique que le menu mobile de inc/header.php : un <details> natif
 * a été essayé, mais son repli (content-visibility en plus du display, côté
 * navigateur) résiste à toute règle CSS d'auteur, même avec !important.
 * Bandeau de saut rapide entre journées en ligne unique défilable, fixé
 * sous l'en-tête au scroll.
 */
.pc-filtres-contenu { display: none; }
.pc-filtres-checkbox:checked ~ .pc-filtres-contenu { display: block; }
.pc-filtres-icone { transition: transform .2s ease; }
.pc-filtres-checkbox:checked ~ .pc-filtres-label .pc-filtres-icone { transform: rotate(90deg); }
@media (min-width: 1024px) {
  .pc-filtres-label { display: none; }
  .pc-filtres-contenu { display: block !important; }
}
.flex-nowrap { flex-wrap: nowrap; }
.overflow-x-auto { overflow-x: auto; }
.pc-scroll-x { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pc-scroll-x::-webkit-scrollbar { display: none; }
.pc-jours-sticky { position: sticky; top: 60px; }

/*
 * Refonte bons plans / numéros utiles (étape E) : nom de l'établissement
 * au-dessus de ses numéros au lieu d'une seule ligne qui s'enroulait mal
 * (chevauchement constaté sur « Lux Lounge Bar », deux numéros).
 */
.pc-fiche-numeros { row-gap: .125rem; }

/*
 * Numéros utiles : page trop clairsemée sur grand écran (2 cartes courtes
 * sur les 1320px du shell). Largeur resserrée, propre à cette page.
 */
.pc-numeros-shell { max-width: 56rem; margin-left: auto; margin-right: auto; }

/*
 * Calendrier interactif (étape G) : bascule Liste/Calendrier en input radio
 * masqué + label (même technique que .pc-filtres-* ci-dessus — un <details>
 * natif ne se laisse pas piloter proprement en CSS pur). Les deux vues
 * restent dans le DOM ; seule celle correspondant au radio coché s'affiche.
 * L'état "actif" des libellés cible directement le <label> associé par son
 * attribut for, peu importe sa position dans le document.
 */
.pc-vue-grille { display: none; }
#vue-grille:checked ~ .pc-vue-grille { display: block; }
#vue-grille:checked ~ .pc-vue-liste { display: none; }
#vue-liste:checked ~ div .pc-vue-label[for="vue-liste"],
#vue-grille:checked ~ div .pc-vue-label[for="vue-grille"] {
  background-color: #C1440E; /* terracotta-500 */
  color: #FEFCFA; /* ink-inverse */
}

/*
 * Grille mensuelle du calendrier : grid-cols-7 absent du CSS précompilé
 * (seuls grid-cols-1/2 y sont, seule densité utilisée par le site Next
 * d'origine qui n'a pas de vraie grille). Cases de taille fixe en CSS pur
 * plutôt qu'avec des utilitaires Tailwind eux aussi absents (aspect-square,
 * ring-2…), pour un rendu stable de 375px à grand écran.
 */
.pc-calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  border-radius: .625rem;
  background-color: #E6DBCA; /* line */
}
.pc-calendrier-entete {
  padding: .375rem 0;
  background-color: #FFFFFF;
  text-align: center;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8A7D6D; /* ink-subtle */
}
.pc-calendrier-case {
  display: flex;
  min-height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
  background-color: #FFFFFF;
  font-size: .8125rem;
  color: #8A7D6D; /* ink-subtle, jour sans événement */
}
.pc-calendrier-case--vide { background-color: #FAF6F0; }
a.pc-calendrier-case--evenement {
  background-color: #FDF4EF; /* terracotta-50 */
  color: #14100D; /* ink */
  font-weight: 700;
  transition: background-color .15s ease;
}
a.pc-calendrier-case--evenement:hover,
a.pc-calendrier-case--evenement:focus-visible { background-color: #FAE3D4; /* terracotta-100 */ }
.pc-calendrier-case--aujourdhui { box-shadow: inset 0 0 0 2px #C1440E; /* terracotta-500 */ }
.pc-calendrier-point { height: .375rem; width: .375rem; border-radius: 999px; }

/* Utilitaires ponctuels absents du CSS précompilé, utilisés par la bascule Liste/Calendrier et la grille. */
.cursor-pointer { cursor: pointer; }
.space-y-6 > * + * { margin-top: 1.5rem; }
@media (min-width: 640px) { .sm\:p-4 { padding: 1rem; } }